Update app.py

app.py

@@ -46,7 +46,7 @@ def chat(message, history, image=None):
     global client, current_response_id, chat_history
     
     if not client:
-        return "Please set your OpenAI API key first."
+        return history + [("You", "Please set your OpenAI API key first.")]
     
     try:
         if image is not None:
@@ -97,9 +97,10 @@ def chat(message, history, image=None):
         chat_history.append({"role": "user", "content": message})
         chat_history.append({"role": "assistant", "content": response.output_text})
         
-        return response.output_text
+        # Return updated history
+        return history + [("You", message), ("Bot", response.output_text)]
     except Exception as e:
-        return f"Error: {str(e)}"
+        return history + [("You", message), ("Bot", f"Error: {str(e)}")]
 
 def export_chat():
     """Export chat history to JSON file"""
@@ -121,7 +122,7 @@ def clear_chat():
     global chat_history, current_response_id
     chat_history = []
     current_response_id = None
-    return None
+    return []
 
 def generate_iframe_code(request: gr.Request):
     """Generate iframe code for embedding the app"""
@@ -139,6 +140,10 @@ def generate_iframe_code(request: gr.Request):
     
     return iframe_code
 
+def process_image_upload(img, text):
+    """Process image upload and update message text"""
+    return gr.update(value=f"{text if text else ''}[Image attached]")
+
 def create_ui():
     """Create the Gradio UI"""
     with gr.Blocks(theme=gr.themes.Soft(), css="""
@@ -185,7 +190,8 @@ def create_ui():
             with gr.Group(visible=False) as chat_interface:
                 with gr.Tabs() as tabs:
                     with gr.TabItem("Chat", elem_classes="tab-content"):
-                        chatbot = gr.Chatbot(height=400)
+                        chatbot = gr.Chatbot(height=400, type="tuples")
+                        
                         with gr.Row():
                             with gr.Column(scale=4):
                                 msg = gr.Textbox(
@@ -194,8 +200,7 @@ def create_ui():
                                     container=False
                                 )
                             with gr.Column(scale=1):
-                                with gr.Row():
-                                    image_btn = gr.UploadButton("📎", file_types=["image"])
+                                image_btn = gr.UploadButton("📎", file_types=["image"])
                         
                         with gr.Row():
                             clear_btn = gr.Button("Clear Chat")
@@ -218,16 +223,27 @@ def create_ui():
             outputs=[api_key_group, chat_interface, api_key_message]
         )
         
+        # Handle image uploads
+        image_upload = None
+        image_btn.upload(
+            process_image_upload,
+            inputs=[image_btn, msg],
+            outputs=[msg]
+        ).then(
+            lambda x: x,
+            inputs=[image_btn],
+            outputs=[image_upload]
+        )
+        
+        # Handle chat submission
         msg.submit(
             chat,
-            inputs=[msg, chatbot, None],
+            inputs=[msg, chatbot, image_btn],
             outputs=[chatbot]
-        )
-        
-        image_btn.upload(
-            lambda img: gr.update(value=f"[Uploaded image] "),
-            inputs=[image_btn],
-            outputs=[msg]
+        ).then(
+            lambda: gr.update(value=""),
+            None,
+            [msg]
         )
         
         clear_btn.click(
@@ -241,9 +257,10 @@ def create_ui():
         )
         
         theme_btn.click(
-            lambda: gr.Theme.toggle_theme(),
             None,
-            None
+            None,
+            None,
+            _js="() => {document.body.classList.toggle('dark');}"
         )
         
         generate_iframe_btn.click(