Update app.py

app.py

@@ -1,17 +1,14 @@
 import gradio as gr
 
-# Chatbot logic
 def respond(message, file, chat_history):
     if message:
         chat_history.append({"role": "user", "content": message})
     if file:
         chat_history.append({"role": "user", "content": f"📎 File uploaded: {file.name}"})
-    # Echo bot response
-    response = f"🤖: Got your message: {message or ''} {file.name if file else ''}"
-    chat_history.append({"role": "assistant", "content": response})
+    chat_history.append({"role": "assistant", "content": "✅ Got it!"})
     return "", None, chat_history
 
-# Custom CSS for layout
+# Custom CSS for layout (responsive and overflow-safe)
 custom_css = """
 .input-container {
     display: flex;
@@ -20,12 +17,16 @@ custom_css = """
     gap: 10px;
     margin-top: 10px;
     width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
 }
 .input-wrapper {
-    flex-grow: 1;
     display: flex;
     align-items: center;
     gap: 10px;
+    flex-grow: 1;
+    min-width: 0;
+    white-space: nowrap;
 }
 .input-wrapper .icon {
     font-size: 20px;
@@ -41,6 +42,7 @@ custom_css = """
     background: none;
     border: none;
     color: #007bff;
+    flex-shrink: 0;
 }
 """
 
@@ -48,41 +50,26 @@ with gr.Blocks(css=custom_css) as demo:
     chatbot = gr.Chatbot(type="messages")
     chat_history = gr.State([])
 
-    # Input container with icons on both sides
+    with gr.Row():
+        with gr.Column():
+            chatbot.render()
+
     with gr.Row():
         with gr.Column(elem_classes="input-container"):
             with gr.Row(elem_classes="input-wrapper"):
-                upload_btn = gr.UploadButton(
-                    label="📎",
-                    file_types=["*"],
-                    elem_classes="icon"
-                )
+                upload_btn = gr.UploadButton("📎", file_types=["*"], elem_classes="icon")
                 msg = gr.Textbox(
                     label="",
                     placeholder="Type your message...",
-                    scale=10,
                     show_label=False,
-                    container=False
+                    container=False,
+                    lines=1,
                 )
             send_btn = gr.Button("➡️", elem_classes="send-button")
 
-    # Submit on Enter or click send button
-    msg.submit(
-        respond,
-        inputs=[msg, upload_btn, chat_history],
-        outputs=[msg, upload_btn, chatbot]
-    )
-    send_btn.click(
-        respond,
-        inputs=[msg, upload_btn, chat_history],
-        outputs=[msg, upload_btn, chatbot]
-    )
-
-    # Optional: Trigger response when file is uploaded
-    upload_btn.upload(
-        respond,
-        inputs=[msg, upload_btn, chat_history],
-        outputs=[msg, upload_btn, chatbot]
-    )
+    # Event handlers
+    msg.submit(respond, inputs=[msg, upload_btn, chat_history], outputs=[msg, upload_btn, chatbot])
+    send_btn.click(respond, inputs=[msg, upload_btn, chat_history], outputs=[msg, upload_btn, chatbot])
+    upload_btn.upload(respond, inputs=[msg, upload_btn, chat_history], outputs=[msg, upload_btn, chatbot])
 
 demo.queue().launch()