Update interface.py

interface.py

@@ -8,211 +8,111 @@ from ai_logic import (
     inicializar_sistema
 )
 
+# CSS Aprimorado: mais limpo, focado em Flexbox e responsividade.
 css_customizado = """
-/* Reset e configurações básicas */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    background: var(--bg-primary);
-    color: var(--text-primary);
-    line-height: 1.5;
-    overflow: hidden;
-}
-
-/* Variáveis para tema claro e escuro */
+/* Reset Básico e Tema Escuro */
 :root {
-    --bg-primary: #ffffff;
-    --bg-secondary: #f4f4f5;
-    --bg-input: #f9fafb;
-    --text-primary: #111827;
-    --text-secondary: #6b7280;
-    --accent: #3b82f6;
-    --accent-hover: #2563eb;
-    --border: #e5e7eb;
-    --message-user-bg: #e0f2fe;
-    --message-bot-bg: #f3f4f6;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --bg-primary: #0f0f23;
-        --bg-secondary: #1f1f38;
-        --bg-input: #2d2d4a;
-        --text-primary: #ffffff;
-        --text-secondary: #9ca3af;
-        --accent: #60a5fa;
-        --accent-hover: #3b82f6;
-        --border: #2d2d4a;
-        --message-user-bg: #1e40af;
-        --message-bot-bg: #1f2937;
-    }
-}
-
-.gradio-container {
-    background: var(--bg-primary) !important;
-    min-height: 100vh !important;
-    max-width: 100% !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    overflow: hidden !important;
+    --bg-primary: #0F172A; /* Azul escuro principal */
+    --bg-secondary: #1E293B; /* Azul um pouco mais claro */
+    --bg-tertiary: #334155; /* Componentes de input, etc. */
+    --border-color: #475569;
+    --text-primary: #F1F5F9; /* Branco suave */
+    --text-secondary: #94A3B8; /* Cinza claro */
+    --accent-color: #2563EB; /* Azul vibrante */
+    --accent-hover: #1D4ED8;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body, .gradio-container {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: var(--bg-primary) !important;
+    color: var(--text-primary) !important;
+    height: 100vh;
+    overflow: hidden; /* Impede o scroll no body */
 }
-
-/* Layout principal */
+/* Layout Principal com Flexbox */
 .main-container {
     display: flex;
     height: 100vh;
-    max-height: 100vh;
-    background: var(--bg-primary);
-    overflow: hidden;
+    width: 100%;
 }
-
-/* Sidebar */
+/* --- Sidebar --- */
 .sidebar {
     width: 280px;
-    min-width: 280px;
-    background: var(--bg-secondary);
-    border-right: 1px solid var(--border);
+    background-color: var(--bg-secondary);
+    border-right: 1px solid var(--border-color);
     padding: 16px;
-    overflow-y: auto;
-    height: 100vh;
-    flex-shrink: 0;
-}
-
-.sidebar-header {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 0;
-    margin-bottom: 16px;
-    border-bottom: 1px solid var(--border);
-}
-
-.new-chat-btn {
-    background: var(--accent) !important;
-    color: #ffffff !important;
-    border: none !important;
-    border-radius: 8px !important;
-    padding: 8px 16px !important;
-    font-size: 14px !important;
-    font-weight: 500 !important;
-    cursor: pointer !important;
-    transition: background 0.2s ease !important;
-}
-
-.new-chat-btn:hover {
-    background: var(--accent-hover) !important;
+    flex-direction: column;
+    gap: 24px;
+    height: 100%;
 }
-
-.sidebar-section h3 {
+.sidebar-header { text-align: center; margin-bottom: 16px; font-size: 24px; font-weight: 600; }
+.sidebar-section-title {
     color: var(--text-secondary);
     font-size: 12px;
-    font-weight: 600;
+    font-weight: 500;
     text-transform: uppercase;
+    margin-bottom: 8px;
     letter-spacing: 0.5px;
-    margin-bottom: 12px;
 }
-
-/* Área principal */
+.new-chat-btn {
+    width: 100%;
+    background-color: var(--accent-color) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 10px !important;
+    font-weight: 500 !important;
+    transition: background-color 0.2s ease;
+}
+.new-chat-btn:hover { background-color: var(--accent-hover) !important; }
+/* --- Área do Chat --- */
 .chat-main {
     flex: 1;
     display: flex;
     flex-direction: column;
-    background: var(--bg-primary);
     height: 100vh;
-    overflow: hidden;
-}
-
-.chat-header {
-    background: var(--bg-secondary);
-    border-bottom: 1px solid var(--border);
-    padding: 12px 24px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-shrink: 0;
-    height: 60px;
+    overflow: hidden; /* Impede overflow */
 }
-
-.chat-title {
-    color: var(--text-primary);
-    font-size: 16px;
-    font-weight: 600;
-}
-
-.chat-title a {
-    color: var(--accent);
-    text-decoration: none;
-}
-
-.chat-title a:hover {
-    text-decoration: underline;
-}
-
-/* Área de mensagens */
+/* Container de Mensagens (com scroll) */
 .messages-container {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-    position: relative;
-}
-
-.chatbot {
-    flex: 1;
-    min-height: 0;
-    height: 100%;
-    overflow: hidden;
-    background: transparent !important;
-    border: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-.chatbot > div {
-    height: 100%;
-    overflow-y: auto;
-    padding: 16px 24px;
-    scroll-behavior: smooth;
+    flex: 1; /* Ocupa todo o espaço vertical disponível */
+    overflow-y: auto; /* Apenas este container terá scroll */
+    padding: 24px;
+    background-color: var(--bg-primary);
+}
+#chat { min-height: 100%; } /* Garante que o chatbot preencha o container */
+#chat .message-bubble {
+    background-color: transparent !important;
+    box-shadow: none !important;
+    border-radius: 12px !important;
+    padding: 12px !important;
+    max-width: 90% !important;
 }
+#chat .message-bubble.user { background-color: var(--bg-secondary) !important; }
+#chat .message-bubble.bot { background-color: transparent !important; } /* Apenas texto */
+#chat .prose { color: var(--text-primary) !important; font-size: 16px; line-height: 1.6; }
+#chat .avatar-container img { border-radius: 50% !important; }
 
-/* Área de input */
+/* Área de Input */
 .input-area {
-    background: var(--bg-primary);
     padding: 16px 24px;
-    border-top: 1px solid var(--border);
-    flex-shrink: 0;
-    height: 100px;
-    max-height: 100px;
+    border-top: 1px solid var(--border-color);
+    background-color: var(--bg-primary);
 }
-
 .input-container {
     max-width: 800px;
     margin: 0 auto;
     display: flex;
-    align-items: center;
-}
-
-.input-wrapper {
-    background: var(--bg-input);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 12px 16px;
-    display: flex;
-    align-items: center;
+    align-items: flex-end;
     gap: 12px;
-    width: 100%;
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    padding: 8px 8px 8px 16px;
     transition: border-color 0.2s ease;
 }
-
-.input-wrapper:focus-within {
-    border-color: var(--accent);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-}
-
+.input-container:focus-within { border-color: var(--accent-color); }
 #entrada_usuario textarea {
     background: transparent !important;
     border: none !important;
@@ -220,468 +120,200 @@ body {
     font-size: 16px !important;
     line-height: 1.5 !important;
     resize: none !important;
-    outline: none !important;
-    min-height: 24px !important;
-    max-height: 48px !important;
-    height: 24px !important;
-    padding: 0 !important;
-    margin: 0 !important;
+    padding: 8px 0 !important;
+    max-height: 200px !important; /* Limita o crescimento */
     overflow-y: auto !important;
-    width: 100% !important;
-}
-
-#entrada_usuario textarea::placeholder {
-    color: var(--text-secondary) !important;
 }
-
+#entrada_usuario textarea::placeholder { color: var(--text-secondary) !important; }
 .send-button {
-    width: 36px;
-    height: 36px;
-    background: var(--accent) !important;
-    border: none !important;
-    border-radius: 8px !important;
-    color: #ffffff !important;
-    cursor: pointer !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.2s ease;
-}
-
-.send-button:hover:not(:disabled) {
-    background: var(--accent-hover) !important;
-}
-
-.send-button:disabled {
-    background: var(--text-secondary) !important;
-    cursor: not-allowed !important;
-}
-
-/* Estilo das mensagens */
-.message {
-    padding: 12px 0;
-    border-bottom: 1px solid var(--border);
-    animation: fadeIn 0.3s ease-out;
-}
-
-.message-content {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 0 24px;
-    display: flex;
-    gap: 12px;
-    align-items: flex-start;
-}
-
-.message-avatar {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    font-weight: 600;
-}
-
-.user-avatar {
-    background: var(--accent);
-    color: #ffffff;
-}
-
-.bot-avatar {
-    background: #6b7280;
-    color: #ffffff;
-}
-
-.message-text {
-    flex: 1;
-    line-height: 1.6;
-    font-size: 16px;
-    color: var(--text-primary);
-}
-
-.message.user {
-    background: var(--message-user-bg);
-}
-
-.message.assistant {
-    background: var(--message-bot-bg);
-}
-
-/* Estilo para código */
-.message pre {
-    background: var(--bg-secondary) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 8px !important;
-    padding: 12px !important;
-    margin: 12px 0 !important;
-    overflow-x: auto !important;
-    font-family: 'JetBrains Mono', monospace !important;
-    font-size: 14px !important;
-}
-
-.message code {
-    background: rgba(0, 0, 0, 0.05) !important;
-    padding: 2px 6px !important;
-    border-radius: 4px !important;
-    font-family: 'JetBrains Mono', monospace !important;
-}
-
-.message pre code {
-    background: transparent !important;
-    padding: 0 !important;
-}
-
-/* Links */
-.message a {
-    color: var(--accent) !important;
-    text-decoration: none !important;
-}
-
-.message a:hover {
-    text-decoration: underline !important;
-}
-
-/* Listas */
-.message ul, .message ol {
-    margin: 12px 0 !important;
-    padding-left: 24px !important;
-}
-
-.message li {
-    margin: 6px 0 !important;
-}
-
-/* Tabelas */
-.message table {
-    border-collapse: collapse !important;
-    width: 100% !important;
-    margin: 16px 0 !important;
-    background: var(--bg-secondary) !important;
-    border-radius: 8px !important;
-}
-
-.message th, .message td {
-    border: 1px solid var(--border) !important;
-    padding: 12px !important;
-    text-align: left !important;
-}
-
-.message th {
-    background: rgba(0, 0, 0, 0.05) !important;
-    font-weight: 600 !important;
-}
-
-/* Scrollbar */
-::-webkit-scrollbar {
-    width: 6px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--bg-secondary);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--text-secondary);
-    border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--accent);
-}
+    background: var(--accent-color) !important;
+    color: white !important;
+    border-radius: 10px !important;
+    width: 40px !important;
+    height: 40px !important;
+    min-width: 40px !important;
+    transition: background-color 0.2s ease;
+    align-self: flex-end; /* Alinha o botão na parte inferior */
+}
+.send-button:hover:not(:disabled) { background: var(--accent-hover) !important; }
+.send-button:disabled { background: var(--bg-tertiary) !important; cursor: not-allowed !important; }
 
 /* Responsividade */
 @media (max-width: 768px) {
-    .main-container {
-        flex-direction: column;
-    }
-    
+    .main-container { flex-direction: column; }
     .sidebar {
         width: 100%;
-        height: 180px;
-        max-height: 180px;
+        height: auto;
         border-right: none;
-        border-bottom: 1px solid var(--border);
-    }
-    
-    .chat-main {
-        height: calc(100vh - 180px);
+        border-bottom: 1px solid var(--border-color);
+        flex-direction: row; /* Itens da sidebar em linha */
+        flex-wrap: wrap; /* Quebra de linha se não couber */
+        align-items: center;
     }
-    
-    .messages-container {
-        max-height: calc(100vh - 280px);
-    }
-    
-    .input-area {
-        padding: 12px 16px;
-        height: 80px;
-        max-height: 80px;
-    }
-    
-    .message-content {
-        padding: 0 16px;
-        gap: 10px;
-    }
-    
-    .message-avatar {
-        width: 32px;
-        height: 32px;
-        font-size: 16px;
-    }
-    
-    .message-text {
-        font-size: 15px;
-    }
-}
-
-/* Animações */
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(8px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-/* Loading */
-.loading-indicator {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    color: var(--text-secondary);
-    font-style: italic;
-}
-
-.loading-dots span {
-    width: 5px;
-    height: 5px;
-    background: var(--text-secondary);
-    border-radius: 50%;
-    animation: pulse 1.2s ease-in-out infinite;
-}
-
-.loading-dots span:nth-child(1) { animation-delay: -0.24s; }
-.loading-dots span:nth-child(2) { animation-delay: -0.12s; }
-.loading-dots span:nth-child(3) { animation-delay: 0s; }
-
-@keyframes pulse {
-    0%, 80%, 100% { opacity: 0.3; }
-    40% { opacity: 1; }
-}
-
-/* Gradio components */
-.gr-textbox, .gr-dropdown {
-    background: transparent !important;
-    border: none !important;
-    color: var(--text-primary) !important;
-}
-
-.gr-dropdown {
-    background: var(--bg-input) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 8px !important;
-}
-
-.gr-accordion {
-    background: transparent !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 8px !important;
-}
-
-.gr-accordion summary {
-    background: var(--bg-input) !important;
-    color: var(--text-primary) !important;
-    padding: 12px !important;
-    border-radius: 8px !important;
-}
-
-.gr-accordion[open] summary {
-    border-bottom: 1px solid var(--border) !important;
-    border-radius: 8px 8px 0 0 !important;
-}
-
-.gr-accordion .gr-panel {
-    background: var(--bg-secondary) !important;
-    padding: 12px !important;
-    border-radius: 0 0 8px 8px !important;
-}
+    .sidebar-header, .sidebar-section { flex: 1; }
+    .chat-main { height: calc(100% - auto); } /* Ajusta a altura */
+    .messages-container { padding: 16px; }
+    .input-area { padding: 12px; }
+    #chat .message-bubble { max-width: 95% !important; }
+}
+/* Ocultar elementos desnecessários do Gradio */
+footer { display: none !important; }
+.gr-button-lg { display: none !important; }
 """
 
 def criar_interface():
-    with gr.Blocks(title="Dr. Aldo Henrique - iAldo AI Assistant", theme=gr.themes.Base(), css=css_customizado) as interface:
-        session_id_state = gr.State(str(uuid.uuid4()))
+    with gr.Blocks(theme=gr.themes.Base(), css=css_customizado, title="iAldo AI Assistant") as interface:
+        session_id_state = gr.State(lambda: str(uuid.uuid4()))
 
         with gr.Row(elem_classes="main-container"):
-            # Sidebar
-            with gr.Column(elem_classes="sidebar", scale=0, min_width=280):
-                gr.HTML("""
-                <div class="sidebar-header">
-                    <h2 style="color: var(--accent); font-size: 20px; font-weight: 600;">iAldo AI</h2>
-                    <button class="new-chat-btn">Novo Chat</button>
-                </div>
-                """)
-                
+            # --- Sidebar (Painel de Controle) ---
+            with gr.Column(scale=0, min_width=280, elem_classes="sidebar"):
                 with gr.Group():
-                    gr.HTML('<h3>🧠 Modelo de IA</h3>')
+                    gr.HTML("<div class='sidebar-header'>iAldo AI</div>")
+                    novo_chat_btn = gr.Button("➕ Novo Chat", elem_classes="new-chat-btn")
+                
+                with gr.Group(elem_classes="sidebar-section"):
+                    gr.HTML("<p class='sidebar-section-title'>🧠 Modelo de IA</p>")
                     modelo_select = gr.Dropdown(
                         choices=list(MODELS.keys()),
-                        value="Llama 3.2 3B",
-                        label="",
-                        show_label=False,
-                        elem_classes="model-selector",
+                        value=DEFAULT_MODEL,
+                        label=None, show_label=False,
                         container=False
                     )
 
-                with gr.Accordion("🔧 Status API", open=False, elem_classes="sidebar-section"):
-                    status_api = gr.Textbox(label="", interactive=False, lines=4, show_label=False,
-                                          value="✅ Modelos carregados com sucesso!")
-
-                with gr.Accordion("ℹ️ Sobre", open=False, elem_classes="sidebar-section"):
+                with gr.Accordion("ℹ️ Sobre", open=False):
                     gr.Markdown("""
-                    **Dr. Aldo Henrique**
-                    
-                    • Especialista em C/C++, Java
-                    • Desenvolvimento Web & IA
-                    • Conteúdo: aldohenrique.com.br
-                    
-                    **Dicas:**
-                    • Faça perguntas específicas
-                    • Use o RAG para consultar o blog
-                    • Experimente diferentes modelos
+                    **Assistente de IA do Prof. Dr. Aldo Henrique.**
+                    - Especialista em C/C++, Java, Web & IA.
+                    - [aldohenrique.com.br](https://aldohenrique.com.br)
                     """)
 
-            # Área principal
-            with gr.Column(elem_classes="chat-main", scale=1):
-                gr.HTML("""
-                <div class="chat-header">
-                    <div class="chat-title">
-                        🤖 Conversando com <a href="https://aldohenrique.com.br/" target="_blank">Prof. Dr. Aldo Henrique</a>
-                    </div>
-                </div>
-                """)
-
+            # --- Área Principal do Chat ---
+            with gr.Column(scale=4, elem_classes="chat-main"):
+                # Container das mensagens (com scroll)
                 with gr.Column(elem_classes="messages-container"):
                     chatbot = gr.Chatbot(
-                        label="",
+                        [],
+                        label="iAldo",
                         elem_id="chat",
                         show_label=False,
                         container=False,
-                        elem_classes="chatbot",
                         avatar_images=("https://cdn-icons-png.flaticon.com/256/9055/9055398.png", 
                                        "https://cdn.iconscout.com/icon/premium/png-256-thumb/robo-97-415007.png"),
                         bubble_full_width=False,
                         height="100%"
                     )
 
+                # Container do input
                 with gr.Column(elem_classes="input-area"):
                     with gr.Row(elem_classes="input-container"):
-                        with gr.Column(elem_classes="input-wrapper", scale=1):
-                            user_input = gr.Textbox(
-                                show_label=False,
-                                placeholder="Digite sua mensagem aqui...",
-                                lines=1,
-                                elem_id="entrada_usuario",
-                                max_lines=2,
-                                container=False,
-                                scale=1
-                            )
-                            enviar_btn = gr.Button("➤", variant="primary", size="sm", elem_classes="send-button")
-
+                        user_input = gr.Textbox(
+                            show_label=False,
+                            placeholder="Pergunte algo ao Dr. Aldo...",
+                            elem_id="entrada_usuario",
+                            container=False,
+                            scale=10 # Dá mais espaço para o textbox
+                        )
+                        enviar_btn = gr.Button("➤", variant="primary", elem_classes="send-button", scale=1, min_width=40)
+
+        # --- Lógica de Backend (sem alterações) ---
         def responder(chat_history, user_msg, modelo, session_id):
             if not user_msg.strip():
                 return chat_history, ""
-
-            chat_history = chat_history + [[user_msg, "🤔 Dr. Aldo está pensando..."]]
-            yield chat_history, ""
+            
+            chat_history.append([user_msg, None])
+            yield chat_history, "" # Limpa o input imediatamente
 
             try:
-                resposta_final = responder_como_aldo(session_id, user_msg, modelo)
-                chat_history[-1][1] = resposta_final
-                yield chat_history, ""
+                resposta_stream = responder_como_aldo(session_id, user_msg, modelo)
                 
+                # Resposta em streaming para melhor UX
+                resposta_completa = ""
+                for chunk in resposta_stream:
+                    resposta_completa += chunk
+                    chat_history[-1][1] = resposta_completa
+                    yield chat_history, ""
+
             except Exception as e:
                 chat_history[-1][1] = f"❌ Desculpe, ocorreu um erro: {str(e)}"
                 yield chat_history, ""
 
-        enviar_btn.click(
+        # Função para limpar o chat
+        def limpar_chat():
+            return [], str(uuid.uuid4())
+
+        # --- Eventos ---
+        user_input.submit(
             fn=responder,
             inputs=[chatbot, user_input, modelo_select, session_id_state],
-            outputs=[chatbot, user_input],
-            show_progress=False
+            outputs=[chatbot, user_input]
         )
-
-        user_input.submit(
+        enviar_btn.click(
             fn=responder,
             inputs=[chatbot, user_input, modelo_select, session_id_state],
-            outputs=[chatbot, user_input],
-            show_progress=False
+            outputs=[chatbot, user_input]
+        )
+        novo_chat_btn.click(
+            fn=limpar_chat,
+            inputs=[],
+            outputs=[chatbot, session_id_state]
         )
 
-        gr.HTML("""
-        <script>
-        (function() {
-            let initialized = false;
-            
-            function initLayout() {
-                if (initialized) return;
-                initialized = true;
-                
-                const mainContainer = document.querySelector('.main-container');
-                if (mainContainer) {
-                    mainContainer.style.height = '100vh';
-                    mainContainer.style.maxHeight = '100vh';
-                    mainContainer.style.overflow = 'hidden';
+        # --- JavaScript para Melhorar a UX ---
+        interface.load(
+            None,
+            None,
+            None,
+            js="""
+            () => {
+                // Função para rolar o chat para o final
+                function scrollChatToBottom() {
+                    const chatContainer = document.querySelector('.messages-container');
+                    if (chatContainer) {
+                        chatContainer.scrollTop = chatContainer.scrollHeight;
+                    }
                 }
+
+                // Observador para rolar automaticamente quando novas mensagens aparecem
+                const observer = new MutationObserver((mutations) => {
+                    scrollChatToBottom();
+                });
                 
-                const chatMain = document.querySelector('.chat-main');
-                if (chatMain) {
-                    chatMain.style.height = '100vh';
-                    chatMain.style.maxHeight = '100vh';
-                    chatMain.style.display = 'flex';
-                    chatMain.style.flexDirection = 'column';
+                const chatElement = document.getElementById('chat');
+                if(chatElement) {
+                    observer.observe(chatElement, { childList: true, subtree: true });
                 }
-                
-                const messagesContainer = document.querySelector('.messages-container');
-                if (messagesContainer) {
-                    messagesContainer.style.flex = '1';
-                    messagesContainer.style.minHeight = '0';
-                    messagesContainer.style.overflow = 'hidden';
+
+                // Lida com o envio via "Enter" e o crescimento dinâmico da textarea
+                const userInput = document.getElementById('entrada_usuario').querySelector('textarea');
+                if (userInput) {
+                    userInput.addEventListener('keydown', (e) => {
+                        if (e.key === 'Enter' && !e.shiftKey) {
+                            e.preventDefault(); // Impede a quebra de linha
+                            // Clica no botão de enviar do Gradio (que pode estar oculto)
+                            const sendButton = document.querySelector('.send-button');
+                            if (sendButton) sendButton.click();
+                        }
+                    });
+
+                    // Faz a textarea crescer com o conteúdo
+                    userInput.addEventListener('input', () => {
+                        userInput.style.height = 'auto'; // Reseta a altura
+                        userInput.style.height = (userInput.scrollHeight) + 'px';
+                    });
                 }
                 
-                const textarea = document.querySelector("#entrada_usuario textarea");
-                if (textarea) {
-                    textarea.style.height = "24px";
-                    textarea.style.minHeight = "24px";
-                    textarea.style.maxHeight = "48px";
-                    textarea.style.resize = "none";
-                    textarea.style.overflowY = "hidden";
-                    
-                    function autoResize() {
-                        textarea.style.height = "24px";
-                        const newHeight = Math.min(textarea.scrollHeight, 48);
-                        textarea.style.height = Math.max(newHeight, 24) + "px";
-                        textarea.style.overflowY = textarea.scrollHeight > 48 ? "auto" : "hidden";
-                    }
-                    
-                    textarea.addEventListener('input', autoResize);
-                    textarea.addEventListener('paste', () => setTimeout(autoResize, 0));
-                    setTimeout(() => textarea.focus(), 300);
-                }
-            }
-            
-            if (document.readyState === 'loading') {
-                document.addEventListener('DOMContentLoaded', initLayout);
-            } else {
-                setTimeout(initLayout, 100);
+                // Garante a rolagem inicial
+                scrollChatToBottom();
             }
-            
-            setTimeout(initLayout, 1000);
-        })();
-        </script>
-        """)
+            """
+        )
 
     return interface
 
+# --- Código de inicialização (sem alterações) ---
 def inicializar_sistema_sync():
+    """Função síncrona para compatibilidade"""
     try:
         import asyncio
         try:
@@ -700,12 +332,15 @@ def inicializar_sistema_sync():
         return False, {}    
 
 def configurar_interface():
+    """
+    Configura a interface Gradio apenas se o sistema for inicializado com sucesso.
+    """
     try:
         status, available_models = inicializar_sistema()
         if status:
             return criar_interface()
         else:
-            error_msg = f"Sistema não inicializado: menos de 3 modelos disponíveis. Modelos: {', '.join(available_models.keys()) if available_models else 'Nenhum'}"
+            error_msg = f"Sistema não inicializado: Modelos indisponíveis. Modelos: {', '.join(available_models.keys()) if available_models else 'Nenhum'}"
             raise RuntimeError(error_msg)
     except Exception as e:
         print(f"Erro na configuração da interface: {e}")