Refactor chat layout in MayaGradioApp by adding new CSS classes for chat and settings columns, and enhancing input row styling for improved user interaction.

data/memories.json

@@ -28,7 +28,7 @@
     }
   },
   {
-    "content": "Blake and Maya have a romantic connection and deep technical bond",
+    "content": "Blake and Maya have a connection and deep technical bond",
     "metadata": {
       "user_id": "both",
       "timestamp": "2024-01-05"

src/app.py

@@ -336,6 +336,31 @@ class MayaGradioApp:
             border-radius: 10px;
             border: 2px solid #4ecdc4;
         }
+        .chat-column {
+            height: 580px;
+            display: flex;
+            flex-direction: column;
+        }
+        .settings-column {
+            height: 580px;
+            display: flex;
+            flex-direction: column;
+        }
+        .input-row {
+            margin-top: auto;
+        }
+        .send-icon-btn {
+            min-width: 60px !important;
+            height: 60px !important;
+            padding: 0 !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            font-size: 20px !important;
+        }
+        .message-input {
+            height: 60px !important;
+        }
         """
         
         with gr.Blocks(css=css, title="Maya AI Assistant - HuggingFace Demo") as demo:
@@ -354,7 +379,7 @@ class MayaGradioApp:
                 # Main Chat Tab
                 with gr.TabItem("💬 Chat with Maya"):
                     with gr.Row():
-                        with gr.Column(scale=3):
+                        with gr.Column(scale=3, elem_classes=["chat-column"]):
                             chatbot = gr.Chatbot(
                                 label="Maya AI Assistant",
                                 height=500,
@@ -362,15 +387,16 @@ class MayaGradioApp:
                                 type="messages"
                             )
                             
-                            with gr.Row():
+                            with gr.Row(elem_classes=["input-row"]):
                                 msg = gr.Textbox(
                                     placeholder="Type your message to Maya...",
-                                    label="Message",
-                                    scale=4
+                                    show_label=False,
+                                    scale=4,
+                                    elem_classes=["message-input"]
                                 )
-                                send_btn = gr.Button("Send", variant="primary")
+                                send_btn = gr.Button("📤", variant="primary", elem_classes=["send-icon-btn"])
                         
-                        with gr.Column(scale=1):
+                        with gr.Column(scale=1, elem_classes=["settings-column"]):
                             gr.Markdown("### Chat Settings")
                             
                             use_rag = gr.Checkbox(