Update app.py

app.py

@@ -46,8 +46,38 @@ def chat_with_openai(user_input, history, api_key):
 with gr.Blocks(title="Voice Bot: Krishnavamshi Thumma", js="./custom.js") as demo:
     gr.Markdown("## 🎙️ Krishnavamshi Thumma - Voice Assistant")
     
+    # Add custom CSS
+    gr.HTML("""
+    <style>
+        #chatBox {
+            height: 60vh;
+            overflow-y: auto;
+            padding: 20px;
+            border-radius: 10px;
+            background: #f9f9f9;
+        }
+        .message {
+            margin: 10px 0;
+            padding: 12px;
+            border-radius: 8px;
+        }
+        .user {
+            background: #e3f2fd;
+            text-align: right;
+        }
+        .bot {
+            background: #f5f5f5;
+        }
+        #micButton {
+            width: 100%;
+            padding: 12px;
+            font-size: 1.2em;
+        }
+    </style>
+    """)
+    
     api_key = gr.Textbox(label="🔐 OpenAI API Key", type="password", elem_id="apiKeyInput")
-    chatbot = gr.Chatbot(elem_id="chatBox")
+    chatbot = gr.Chatbot(elem_id="chatBox", type="messages")
     state = gr.State([])
     
     with gr.Row():
@@ -56,7 +86,6 @@ with gr.Blocks(title="Voice Bot: Krishnavamshi Thumma", js="./custom.js") as dem
     
     # Hidden components for JS communication
     voice_input = gr.Textbox(visible=False, elem_id="voiceInput")
-    js_trigger = gr.Textbox(visible=False, elem_id="jsTrigger")
     
     # Event handlers
     voice_input.change(
@@ -64,7 +93,9 @@ with gr.Blocks(title="Voice Bot: Krishnavamshi Thumma", js="./custom.js") as dem
         [voice_input, state, api_key], 
         [chatbot, state]
     )
-    mic_btn.click(None, None, None, _js="startListening")
+    
+    # Corrected JS trigger syntax
+    mic_btn.click(None, [], [], js="startListening")
     clear_btn.click(lambda: ([], []), None, [chatbot, state])
 
 demo.launch()