Update app.py

app.py

@@ -113,7 +113,8 @@ def handle_chat(user_input, history, thread_id, image_url):
         for msg in reversed(msgs.data):
             if msg.role == "assistant":
                 content = msg.content[0].text.value
-                history.append((user_input, content))
+                history.append({"role": "user", "content": user_input})
+                history.append({"role": "assistant", "content": content})
                 match = re.search(
                     r'https://raw\\.githubusercontent\\.com/AndrewLORTech/surgical-pathology-manual/main/[\\w\\-/]*\\.png',
                     content
@@ -130,6 +131,20 @@ def handle_chat(user_input, history, thread_id, image_url):
 with gr.Blocks(theme=gr.themes.Soft()) as app:
     gr.Markdown("# 📄 Document AI Assistant")
 
+    gr.HTML("""
+    <style>
+    #ask-btn, #clear-chat-btn {
+        font-size: 16px !important;
+        padding: 10px 20px !important;
+    }
+    .record-button button {
+        font-size: 16px !important;
+        padding: 12px 24px !important;
+        background-color: #f2f2f2;
+    }
+    </style>
+    """)
+
     chat_state = gr.State([])
     thread_state = gr.State()
     image_state = gr.State()
@@ -140,8 +155,8 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
         with gr.Column(scale=1):
             image_display = gr.Image(label="🖼️ Document", type="filepath", show_download_button=False)
 
-        with gr.Column(scale=1.4):
-            chat = gr.Chatbot(label="💬 Chat", height=460)
+        with gr.Column(scale=2):
+            chat = gr.Chatbot(label="💬 Chat", height=460, type="messages")
 
             with gr.Row():
                 user_prompt = gr.Textbox(placeholder="Ask your question...", show_label=False, scale=6)
@@ -184,14 +199,4 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
                          outputs=[chat, voice_transcript, thread_state, image_state])
     app.load(fn=create_ws, outputs=[client_id])
 
-app.launch(css="""
-#ask-btn, #clear-chat-btn {
-    font-size: 16px !important;
-    padding: 10px 20px !important;
-}
-.record-button button {
-    font-size: 16px !important;
-    padding: 12px 24px !important;
-    background-color: #f2f2f2;
-}
-""")
+app.launch()