Update app.py

app.py

@@ -131,19 +131,27 @@ h1 {
     background-color: #45a049;
 }
 
-.gr-upload-btn {
-    background-color: #4CAF50;
-    color: white;
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    font-size: 24px;
+#message-box {
     display: flex;
     align-items: center;
-    justify-content: center;
+    position: relative;
+}
+
+#message-input {
+    width: 100%;
+    padding: 10px;
+    border-radius: 6px;
+    border: 1px solid #ddd;
+    font-size: 14px;
+    margin-right: 40px; /* To give space for the icon */
+}
+
+#upload-icon {
+    position: absolute;
+    right: 10px;
     cursor: pointer;
-    border: none;
-    margin-top: 10px;
+    font-size: 24px;
+    color: #4CAF50;
 }
 
 #loading-spinner {
@@ -167,20 +175,22 @@ h1 {
         with gr.Column(scale=1):
             chatbot_ui = gr.Chatbot(value=[], label="Chat History")
         with gr.Column(scale=2):
-            # Create the "+" button for uploading
-            upload_button = gr.Button("+", elem_id="upload_btn", visible=True, interactive=True)
+            # Message input area with the '+' icon inside it
+            with gr.Box(elem_id="message-box"):
+                message_input = gr.Textbox(placeholder="Type your question here...", label="Your Message", elem_id="message-input")
+                upload_button = gr.HTML('<span id="upload-icon">+</span>')  # The + icon inside the message box
+
             upload_section = gr.File(label="Upload NPY Image", type="filepath", visible=False)
             upload_status = gr.Textbox(label="Status", interactive=False)
             preview_img = gr.Image(label="Image Preview", interactive=False)
-            message_input = gr.Textbox(placeholder="Type your question here...", label="Your Message")
             send_button = gr.Button("Send")
             export_button = gr.Button("Export Chat History")
             loading_spinner = gr.HTML('<div id="loading-spinner"><img src="https://i.imgur.com/llf5Jjs.gif" alt="Loading..."></div>')
 
-    # Handle file upload when "+" button is clicked
+    # Handle click event for the '+' icon
     upload_button.click(lambda: upload_section.update(visible=True), None, upload_section)
 
-    # Display loading spinner when uploading an image
+    # Handle file upload
     upload_section.upload(lambda *args: loading_spinner.update("<div id='loading-spinner'><img src='https://i.imgur.com/llf5Jjs.gif' alt='Loading...'></div>"), upload_section, None)
     upload_section.upload(upload_image, upload_section, [upload_status, preview_img])