Update app.py

app.py

@@ -18,6 +18,7 @@ import edge_tts
 from audio_recorder_streamlit import audio_recorder
 import nest_asyncio
 import re
+from image_paster import image_paster  # Import the custom component
 
 # Patch for nested async - sneaky fix! 🐍✨
 nest_asyncio.apply()
@@ -115,8 +116,6 @@ if 'last_chat_update' not in st.session_state:
     st.session_state.last_chat_update = 0
 if 'displayed_chat_lines' not in st.session_state:
     st.session_state.displayed_chat_lines = []
-if 'pasted_image_data_temp' not in st.session_state:
-    st.session_state.pasted_image_data_temp = None
 
 # Timestamp wizardry - clock ticks with flair! ⏰🎩
 def format_timestamp_prefix():
@@ -378,7 +377,6 @@ def create_streamlit_interface():
             .chat-box {font-family: monospace; background: #1e1e1e; color: #d4d4d4; padding: 10px; border-radius: 5px; height: 300px; overflow-y: auto;}
             .timer {font-size: 24px; color: #ffcc00; text-align: center; animation: pulse 1s infinite;}
             @keyframes pulse {0% {transform: scale(1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);}}
-            #paste-target {border: 2px dashed #ccc; padding: 20px; text-align: center; cursor: pointer;}
             </style>
         """, unsafe_allow_html=True)
 
@@ -479,51 +477,15 @@ def create_streamlit_interface():
             st.session_state.message_text = ''
             st.rerun()
 
-        # Image paste component without key
-        components.html(
-            """
-            <div id="paste-target">Paste an image here (Ctrl+V)</div>
-            <script>
-            const pasteTarget = document.getElementById('paste-target');
-            pasteTarget.addEventListener('paste', (event) => {
-                const items = (event.clipboardData || window.clipboardData).items;
-                for (let i = 0; i < items.length; i++) {
-                    if (items[i].type.indexOf('image') !== -1) {
-                        const blob = items[i].getAsFile();
-                        const reader = new FileReader();
-                        reader.onload = (e) => {
-                            window.parent.postMessage({
-                                type: 'streamlit:setComponentValue',
-                                value: e.target.result
-                            }, '*');
-                            pasteTarget.innerHTML = '<p>Image pasted! Processing...</p>';
-                            // Trigger a custom event to notify Python
-                            window.parent.postMessage({
-                                type: 'streamlit:imagePasted',
-                                value: e.target.result
-                            }, '*');
-                        };
-                        reader.readAsDataURL(blob);
-                    }
-                }
-                event.preventDefault();
-            });
-            </script>
-            """,
-            height=100
-        )
-
-        # Custom JavaScript listener for pasted image (simulated via session state)
-        if 'pasted_image_data_temp' in st.session_state and st.session_state.pasted_image_data_temp and st.session_state.pasted_image_data != st.session_state.pasted_image_data_temp:
-            pasted_image_data = st.session_state.pasted_image_data_temp
-            if isinstance(pasted_image_data, str):
-                st.session_state.pasted_image_data = pasted_image_data
-                filename = await save_pasted_image(st.session_state.pasted_image_data, st.session_state.username)
-                if filename:
-                    await save_chat_entry(st.session_state.username, f"Pasted image: {filename}")
-                    st.session_state.pasted_image_data = None
-                    st.session_state.pasted_image_data_temp = None  # Clear after processing
-                st.rerun()
+        # Use the custom image paster component
+        pasted_image_data = image_paster()
+        if pasted_image_data and st.session_state.pasted_image_data != pasted_image_data:
+            st.session_state.pasted_image_data = pasted_image_data
+            filename = await save_pasted_image(st.session_state.pasted_image_data, st.session_state.username)
+            if filename:
+                await save_chat_entry(st.session_state.username, f"Pasted image: {filename}")
+                st.session_state.pasted_image_data = None
+            st.rerun()
 
         st.subheader("Media Gallery 🎨🎶🎥")
         uploaded_file = st.file_uploader("Upload Media", type=['png', 'jpg', 'mp3', 'mp4'])