Update app.py

app.py

@@ -6,25 +6,40 @@ def respond(message, file, chat_history):
         chat_history.append({"role": "user", "content": message})
     if file:
         chat_history.append({"role": "user", "content": f"📎 File uploaded: {file.name}"})
-    # Echo bot response (replace this with real logic)
+    # Echo bot response
     response = f"🤖: Got your message: {message or ''} {file.name if file else ''}"
     chat_history.append({"role": "assistant", "content": response})
     return "", None, chat_history
 
 # Custom CSS for layout
 custom_css = """
-.input-row {
+.input-container {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: 10px;
-    margin-bottom: 10px;
+    margin-top: 10px;
+    width: 100%;
 }
-.file-upload {
+.input-wrapper {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.input-wrapper .icon {
     font-size: 20px;
     cursor: pointer;
     color: #555;
 }
-.file-upload:hover {
+.input-wrapper .icon:hover {
+    color: #007bff;
+}
+.send-button {
+    font-size: 20px;
+    cursor: pointer;
+    background: none;
+    border: none;
     color: #007bff;
 }
 """
@@ -33,27 +48,37 @@ with gr.Blocks(css=custom_css) as demo:
     chatbot = gr.Chatbot(type="messages")
     chat_history = gr.State([])
 
-    with gr.Row(elem_classes="input-row"):
-        msg = gr.Textbox(
-            label="",
-            placeholder="Type your message...",
-            scale=10,
-            show_label=False
-        )
-        upload_btn = gr.UploadButton(
-            label="📎",
-            file_types=["*"],
-            elem_classes="file-upload"
-        )
+    # Input container with icons on both sides
+    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"
+                )
+                msg = gr.Textbox(
+                    label="",
+                    placeholder="Type your message...",
+                    scale=10,
+                    show_label=False,
+                    container=False
+                )
+            send_btn = gr.Button("➡️", elem_classes="send-button")
 
-    # Submit on Enter
+    # 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]
+    )
 
-    # Upload button triggers response
+    # Optional: Trigger response when file is uploaded
     upload_btn.upload(
         respond,
         inputs=[msg, upload_btn, chat_history],