Upload 29 files

app.py

@@ -53,8 +53,15 @@ body, html {
     padding-top: 2rem !important;
 }
 
+#chat-area {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
 #chat-canvas {
-    height: calc(100vh - 200px) !important;
+    height: min(520px, calc(100vh - 260px)) !important;
+    min-height: 320px !important;
     overflow-y: auto;
     border: none !important;
     box-shadow: none !important;
@@ -101,6 +108,9 @@ body, html {
     border-top: 1px solid var(--border-light);
     background: var(--bg-light);
     padding: 1.5rem 0;
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-end;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -119,6 +129,14 @@ body, html {
     padding: 16px !important;
 }
 
+#prompt-bar .gr-textbox {
+    flex: 1;
+}
+
+#prompt-bar .gr-button {
+    min-width: 110px !important;
+}
+
 @media (prefers-color-scheme: dark) {
     #prompt-input {
         background-color: var(--input-bg-dark) !important;
@@ -158,7 +176,7 @@ body, html {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    height: 100%;
+    gap: 0.5rem;
 }
 #welcome-message h2 { font-size: 2.2rem; font-weight: 700; }
 #welcome-message p { font-size: 1.1rem; opacity: 0.7; }
@@ -188,25 +206,37 @@ def build_ui() -> gr.Blocks:
             )
 
         # Welcome message or chat
-        gr.HTML(
-            """
-            <section class="welcome-card" id="welcome-card">
-                <h2>Tu Asistente de IA Personal</h2>
-                <p>Comienza una conversación para obtener ayuda con código, ideas y más.</p>
-            </section>
-            """,
-            elem_id="welcome-message",
-        )
-        
-        chat_box = gr.Chatbot(
-            label="",
-            height=None,
-            elem_id="chat-canvas",
-            show_label=False,
-            container=False,
-            visible=True  # Rendered, but hidden via CSS until user interacts
-        )
-        
+        with gr.Column(elem_id="chat-area"):
+            gr.HTML(
+                """
+                <section class="welcome-card" id="welcome-card">
+                    <h2>Tu Asistente de IA Personal</h2>
+                    <p>Comienza una conversación para obtener ayuda con código, ideas y más.</p>
+                </section>
+                """,
+                elem_id="welcome-message",
+            )
+
+            chat_box = gr.Chatbot(
+                label="",
+                height=None,
+                elem_id="chat-canvas",
+                show_label=False,
+                container=False,
+                visible=True
+            )
+
+            with gr.Row(elem_id="prompt-bar"):
+                attach_btn = gr.Button("📎", elem_id="attach-btn", size="sm")
+                user_in = gr.Textbox(
+                    placeholder="Escribe tu mensaje...",
+                    lines=1,
+                    elem_id="prompt-input",
+                    show_label=False,
+                    container=False,
+                )
+                send_btn = gr.Button("Enviar", elem_id="send-btn", variant="primary", size="sm")
+
         # Hidden components for logic
         files_in = gr.File(
             label="Attach files",
@@ -215,18 +245,6 @@ def build_ui() -> gr.Blocks:
             elem_id="file-input",
         )
 
-        # Prompt bar at the bottom
-        with gr.Row(elem_id="prompt-bar"):
-            attach_btn = gr.Button("📎", elem_id="attach-btn", size="sm")
-            user_in = gr.Textbox(
-                placeholder="Escribe tu mensaje...",
-                lines=1,
-                elem_id="prompt-input",
-                show_label=False,
-                container=False,
-            )
-            send_btn = gr.Button("Enviar", elem_id="send-btn", variant="primary", size="sm")
-
         # --- Event Handlers ---
 
         chat_inputs = [