Updated

Main2.py

@@ -237,23 +237,30 @@ def create_interface():
                     refresh_characters_btn.click(fn=lambda: gr.update(value=get_existing_characters()), outputs=[character_list])
         
         with gr.Tab("Chat with Character"):
-            # Top row for all input elements
+            # Top row for "Choose Character" and "Current Chat ID"
             with gr.Row():
                 with gr.Column(scale=1):
                     character_dropdown = gr.Dropdown(label="Choose Character", choices=[char[0] for char in get_existing_characters()], elem_id="character_dropdown")
-                    chat_id_display = gr.Textbox(label="Current Chat ID", interactive=False, elem_id="chat_id_display")
-                with gr.Column(scale=2):
-                    user_input = gr.Textbox(label="Your Message", placeholder="Type your message or use audio/video input", elem_id="user_input", lines=2)
-                with gr.Column(scale=1):
-                    audio_input = gr.Audio(label="Audio Input", type="filepath", elem_id="audio_input")
-                    video_input = gr.Video(label="Video Input", elem_id="video_input")
                 with gr.Column(scale=1):
-                    chat_btn = gr.Button("Send", variant="primary")
+                    chat_id_display = gr.Textbox(label="Current Chat ID", interactive=False, elem_id="chat_id_display")
 
-            # Separate div below for the large chat response area
-            with gr.Row():
-                with gr.Column(scale=12):  # Make this column take up most of the space for a large response area
-                    chat_response = gr.Chatbot(label="Chat Responses", elem_id="chat_response", height=700, type="messages")  # Increased height for a larger response area
+            # Main chat area with responses
+            with gr.Column():
+                chat_response = gr.Chatbot(label="Chat Responses", elem_id="chat_response", height=700, type="messages")
+
+                # Row for input elements (Your Message, Audio/Video buttons, and Send button at the bottom)
+                with gr.Row():
+                    with gr.Column(scale=8):
+                        user_input = gr.Textbox(label="Your Message", placeholder="Type your message", elem_id="user_input", lines=1)  # Reduced lines for a single-line input
+                    with gr.Column(scale=2):
+                        # Audio and Video as small buttons to the right of "Your Message"
+                        audio_button = gr.Button("🎤 Audio", elem_id="audio_button", size="sm")
+                        video_button = gr.Button("📹 Video", elem_id="video_button", size="sm")
+
+                # Send button below the chat response area
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        chat_btn = gr.Button("Send", variant="primary")
 
             def handle_chat(character_name, user_input, audio_file, video_file, user_id, chat_messages, current_chat_id):
                 if not user_id:
@@ -289,6 +296,17 @@ def create_interface():
                 chat_messages.append({"role": "assistant", "content": response})
                 return chat_messages, new_chat_id, new_chat_id
             
+            # Handle audio and video button clicks to trigger file uploads
+            def upload_audio():
+                return gr.update(value=None, visible=True), gr.update(value=None, visible=False)
+
+            def upload_video():
+                return gr.update(value=None, visible=False), gr.update(value=None, visible=True)
+
+            audio_button.click(fn=upload_audio, outputs=[audio_input, video_input])
+            video_button.click(fn=upload_video, outputs=[audio_input, video_input])
+
+            # Connect the Send button to handle the chat
             chat_btn.click(fn=handle_chat, inputs=[character_dropdown, user_input, audio_input, video_input, user_id, chat_messages, current_chat_id], outputs=[chat_response, current_chat_id, chat_id_display])
         
         with gr.Tab("Chat History"):