Update app.py

app.py

@@ -71,42 +71,64 @@ def load_chat(name):
         return [], [], f"❌ Load error: {e}"
 
 with gr.Blocks(css="""
-body { background-color: #111 !important; font-family: 'Segoe UI', sans-serif !important; }
-.gr-chatbot { border-radius: 10px; border: 1px solid #333; background-color: #1e1e1e !important; }
-.gr-chatbot-message { background-color: #292929 !important; color: #f1f1f1 !important; border-radius: 10px; margin-bottom: 5px; }
-textarea, input[type='text'] { background-color: #222 !important; color: #fff !important; border-radius: 8px !important; border: 1px solid #444 !important; padding: 10px; }
-.gr-button { background-color: #333 !important; color: #fff !important; border: 1px solid #444 !important; border-radius: 8px; padding: 8px 14px; font-weight: bold; transition: background-color 0.2s; }
+body { background-color: #111; font-family: 'Segoe UI', sans-serif; }
+.gr-chatbot { border: 1px solid #333; background-color: #1e1e1e; border-radius: 10px; }
+.gr-chatbot-message { background-color: #292929; color: #f1f1f1; border-radius: 10px; margin-bottom: 5px; }
+textarea, input[type='text'] {
+    background-color: #222; color: #fff; border-radius: 30px !important;
+    border: 1px solid #444; padding: 10px 50px 10px 15px; height: 48px;
+}
+.gr-button {
+    background-color: #333 !important; color: #fff !important;
+    border: 1px solid #444 !important; border-radius: 8px;
+    font-weight: bold; transition: background-color 0.2s;
+}
 .gr-button:hover { background-color: #555 !important; cursor: pointer; }
-.gr-dropdown { background-color: #222 !important; color: #fff !important; border-radius: 8px; border: 1px solid #444; padding: 8px; }
-h1, h2, h3, .gr-markdown { color: #f1f1f1 !important; text-align: center; }
-audio { background-color: #000 !important; border: 1px solid #333 !important; }
+.gr-dropdown { background-color: #222; color: #fff; max-height: 200px; overflow-y: auto; }
+h1, h2, h3, .gr-markdown { color: #f1f1f1; text-align: center; }
+input[type="file"] { color: white; }
+#mic-dropdown { position: absolute; right: 20px; top: 8px; }
 """) as demo:
 
     state = gr.State([])
+    audio_file = gr.File(visible=False)
 
     gr.Markdown("# ✨ JAWERIA'SBOT 🤖")
     gr.Markdown("Speak or type — your assistant listens and replies with text and emojis 💬")
 
     chatbot = gr.Chatbot(type="messages", height=400)
-    chat_input = gr.Textbox(label="💬 Message", placeholder="Type or speak your message...")
-    send_btn = gr.Button("Send 🚀")
 
     with gr.Row():
-        voice_input = gr.Audio(label="🎤 Speak", type="filepath", interactive=True)
-        voice_btn = gr.Button("🎙️ Transcribe to Text")
+        chat_input = gr.Textbox(label="💬", placeholder="Type your message...", scale=9)
+        mic_menu = gr.Dropdown(choices=["🎙️ Record Audio", "📁 Upload File"], label="", value=None, scale=1, interactive=True)
+
+    send_btn = gr.Button("Send 🚀")
 
     with gr.Row():
         new_chat_btn = gr.Button("🆕 New")
         save_btn = gr.Button("💾 Save")
-        saved_dropdown = gr.Dropdown(label="📂 Load Saved", choices=list_saved_files())
+        saved_dropdown = gr.Dropdown(label="📂 Load Saved", choices=list_saved_files(), interactive=True)
         load_btn = gr.Button("📥 Load")
 
     save_msg = gr.Markdown()
     load_msg = gr.Markdown()
 
+    # Event handlers
     send_btn.click(chat_with_groq, inputs=[chat_input, state], outputs=[chat_input, chatbot, state])
     chat_input.submit(chat_with_groq, inputs=[chat_input, state], outputs=[chat_input, chatbot, state])
-    voice_btn.click(transcribe_audio, inputs=[voice_input], outputs=[chat_input])
+
+    def handle_mic_choice(choice):
+        if choice == "🎙️ Record Audio":
+            return gr.Audio(source="microphone", type="filepath", label="Recording... 🎙️", interactive=True, visible=True)
+        elif choice == "📁 Upload File":
+            return gr.Audio(source="upload", type="filepath", label="Upload Audio 📁", interactive=True, visible=True)
+        else:
+            return gr.update(visible=False)
+
+    mic_audio = gr.Audio(visible=False, type="filepath")
+    mic_menu.change(handle_mic_choice, inputs=mic_menu, outputs=mic_audio)
+    mic_audio.change(transcribe_audio, inputs=mic_audio, outputs=chat_input)
+
     new_chat_btn.click(fn=lambda: ("", [], []), outputs=[chat_input, chatbot, state])
     save_btn.click(fn=save_session, inputs=[state], outputs=[save_msg])
     save_btn.click(fn=list_saved_files, outputs=[saved_dropdown])