Update interface.py

interface.py

@@ -12,74 +12,148 @@ css_customizado = """
     max-width: 1400px !important; 
     margin: 0 auto; 
     width: 99%; 
-    height: 100vh !important; /* Define a altura total da janela */
+    height: 100vh !important;
     display: flex; 
     flex-direction: column; 
+    overflow: hidden;
 }
+
 .main-content {
-    flex: 1; /* Faz o conteúdo principal ocupar o espaço disponível */
-    overflow-y: auto; /* Adiciona rolagem vertical se necessário */
+    height: 100vh !important;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.titulo-principal { 
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; 
+    color: white !important; 
+    padding: 20px !important;
+    border-radius: 10px !important; 
+    margin-bottom: 10px !important; 
+    text-align: center !important; 
+    height: 10vh !important;
     display: flex;
     flex-direction: column;
-    min-height: 0; /* Evita problemas de altura em flex containers */
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.chat-container {
+    height: 70vh !important;
+    overflow-y: auto;
+    flex-shrink: 0;
+    margin-bottom: 10px;
 }
+
+.input-container {
+    height: 20vh !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-shrink: 0;
+    padding: 10px 0;
+}
+
+.additional-content {
+    overflow-y: auto;
+    padding-top: 20px;
+}
+
 .gr-textbox textarea { 
     font-size: 14px !important; 
     line-height: 1.5 !important; 
 }
+
 .resposta-container { 
     background-color: #ffffff !important; 
     color: #1a1a1a !important; 
     border: 1px solid #e0e0e0 !important; 
     border-radius: 20px !important; 
     padding: 20px !important; 
-    margin: 20px 0 !important; 
-    height: 10vh !important;
+    margin: 10px 0 !important; 
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; 
 }
+
 .resposta-container pre code { 
     color: #1a1a1a !important; 
     background-color: #f8f9fa !important; 
 }
+
 .pergunta-container { 
     background-color: #f0f8ff !important; 
     border-radius: 8px !important; 
     padding: 15px !important; 
 }
-.titulo-principal { 
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; 
-    color: white !important; 
-    padding: 20px !important; /* Ajustado para padding consistente */
-    border-radius: 10px !important; 
-    margin-bottom: 10px !important; 
-    text-align: center !important; 
-}
+
 .modelo-dropdown { 
     margin-bottom: 15px !important; 
 }
+
 .unequal-height.svelte-1xp0cw7 { 
     align-items: normal !important; 
 }
+
 div.svelte-1xp0cw7 { 
     display: grid !important; 
 }
+
 #entrada_usuario textarea {
     color: white !important; 
     font-size: large !important; 
     background-color: #1a1a1a !important; 
+    min-height: 60px !important;
 }
+
 .message-content { 
     font-size: larger; 
     color: white !important; 
     background-color: #1a1a1a !important; 
 }
+
+/* Responsivo para dispositivos móveis */
+@media (max-width: 768px) {
+    .titulo-principal {
+        height: 12vh !important;
+        padding: 15px !important;
+    }
+    
+    .chat-container {
+        height: 68vh !important;
+    }
+    
+    .input-container {
+        height: 20vh !important;
+    }
+    
+    #entrada_usuario textarea {
+        min-height: 50px !important;
+        font-size: 16px !important;
+    }
+}
+
+@media (max-width: 480px) {
+    .titulo-principal {
+        height: 15vh !important;
+        padding: 10px !important;
+    }
+    
+    .chat-container {
+        height: 65vh !important;
+    }
+    
+    .input-container {
+        height: 20vh !important;
+    }
+}
 """
 
 def criar_interface():
     with gr.Blocks(title="Dr. Aldo Henrique - API Externa", theme=gr.themes.Soft(), css=css_customizado) as interface:
-        # Contêiner principal para o conteúdo visível
+        # Contêiner principal para o conteúdo visível (100vh)
         with gr.Column(elem_classes="main-content"):
-            # Cabeçalho
+            # Cabeçalho - 10% da tela
             gr.HTML("""
             <div class="titulo-principal">
                 <h4>🤖 iAldo - Pergunte e aprenda</h4>
@@ -87,28 +161,36 @@ def criar_interface():
             </div>
             """)
 
-            chatbot = gr.Chatbot(label="💬 Chat com Dr. Aldo", elem_id="chat")
-
-            with gr.Row():
-                modelo_select = gr.Dropdown(
-                    choices=list(MODELS.keys()),
-                    value=DEFAULT_MODEL,
-                    label="🧠 Selecione o Modelo de IA",
-                    info="Escolha o modelo para responder",
-                    elem_classes="modelo-dropdown"
+            # Área do chat - 70% da tela
+            with gr.Column(elem_classes="chat-container"):
+                chatbot = gr.Chatbot(
+                    label="💬 Chat com Dr. Aldo", 
+                    elem_id="chat",
+                    height="100%"
                 )
 
-            with gr.Row():
-                user_input = gr.Textbox(
-                    show_label=False,
-                    placeholder="Digite sua pergunta e pressione Enter ou clique em Enviar",
-                    lines=2,
-                    elem_id="entrada_usuario"
-                )
-                enviar_btn = gr.Button("Enviar", variant="primary")
+            # Área de entrada - 20% da tela
+            with gr.Column(elem_classes="input-container"):
+                with gr.Row():
+                    modelo_select = gr.Dropdown(
+                        choices=list(MODELS.keys()),
+                        value=DEFAULT_MODEL,
+                        label="🧠 Selecione o Modelo de IA",
+                        info="Escolha o modelo para responder",
+                        elem_classes="modelo-dropdown"
+                    )
+
+                with gr.Row():
+                    user_input = gr.Textbox(
+                        show_label=False,
+                        placeholder="Digite sua pergunta e pressione Enter ou clique em Enviar",
+                        lines=2,
+                        elem_id="entrada_usuario"
+                    )
+                    enviar_btn = gr.Button("Enviar", variant="primary")
 
-        # Elementos fora da área visível inicial (acordions abaixo do botão Enviar)
-        with gr.Column():
+        # Conteúdo adicional (fora da visualização inicial)
+        with gr.Column(elem_classes="additional-content"):
             # RAG
             with gr.Accordion("⚙️ Controle do Conhecimento (RAG)", open=False):
                 status_rag = gr.Textbox(label="Status do Retreino", interactive=False)