Update app.py

app.py

@@ -410,15 +410,13 @@ with gr.Blocks(css=custom_css, title="Document Q&A System") as demo:
     <div style='text-align:center; color:#1976D2; margin-bottom:18px;'>Upload a document, ask questions, or use your voice!</div>
     """)
 
-    # Define shared components first
-    chatbot = gr.Chatbot(height=350, elem_classes="gradio-chatbot", label=None, type="messages")
-    file_output = gr.Textbox(label="Upload Status", interactive=False, elem_classes="textbox")
-
+    # Document upload section
     with gr.Row(elem_classes="centered-main"):
         with gr.Column():
             with gr.Group(elem_classes="compact-box"):
                 gr.Markdown("<div class='section-title'>1. Upload Document</div>")
                 file_input = gr.File(label="Upload Document", file_types=[".pdf", ".txt", ".doc", ".docx"], file_count="single", type="binary", elem_classes="upload-btn")
+                file_output = gr.Textbox(label="Upload Status", interactive=False, elem_classes="textbox")
                 reset_btn = gr.Button("Reset Chat & Upload New Document", elem_classes="reset-btn")
                 def reset_all():
                     rag.thread_id = None
@@ -426,10 +424,12 @@ with gr.Blocks(css=custom_css, title="Document Q&A System") as demo:
                 file_input.change(process_file, file_input, file_output)
                 reset_btn.click(reset_all, None, [file_output, chatbot])
 
+    # Unified chat and voice panel
     with gr.Row(elem_classes="centered-main"):
         with gr.Column():
             with gr.Group(elem_classes="compact-box"):
                 gr.Markdown("<div class='section-title'>2. Chat with your Document</div>")
+                chatbot = gr.Chatbot(height=350, elem_classes="gradio-chatbot", label=None, type="messages")
                 with gr.Row():
                     question = gr.Textbox(label="Type your question and press Enter", placeholder="Ask a question about your document...", elem_classes="textbox")
                     send_btn = gr.Button("Send", elem_classes="send-btn")
@@ -437,17 +437,14 @@ with gr.Blocks(css=custom_css, title="Document Q&A System") as demo:
                 question.submit(process_question, [question, chatbot], [question, chatbot])
                 send_btn.click(process_question, [question, chatbot], [question, chatbot])
 
-    with gr.Row(elem_classes="centered-main", visible=False) as audio_row:
-        with gr.Column():
-            with gr.Group(elem_classes="compact-box"):
-                gr.Markdown("<div class='section-title'>Speak your Question</div>")
-                audio_input = gr.Audio(type="filepath", label="Record or Upload Audio", elem_classes="gradio-audio")
-                audio_status = gr.Textbox(label="Audio Status", interactive=False, elem_classes="status-text")
+                # Inline audio recorder, hidden by default
+                audio_input = gr.Audio(type="filepath", label="Record or Upload Audio", elem_classes="gradio-audio", visible=False)
+                audio_status = gr.Textbox(label="Audio Status", interactive=False, elem_classes="status-text", visible=False)
                 audio_input.change(process_audio, [audio_input, chatbot], [audio_input, chatbot])
 
-    def show_audio():
-        return gr.update(visible=True)
-    mic_btn.click(show_audio, None, audio_row)
+                def show_audio():
+                    return {audio_input: gr.update(visible=True), audio_status: gr.update(visible=True)}
+                mic_btn.click(show_audio, None, [audio_input, audio_status])
 
     # Add JavaScript for audio handling
     demo.load(