Update interface.py

interface.py

@@ -8,702 +8,295 @@ from ai_logic import (
     inicializar_sistema
 )
 
-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: #0f0f23;
-    color: #ffffff;
-    overflow-x: hidden;
-}
-
-.gradio-container {
-    background: #0f0f23 !important;
-    min-height: 100vh !important;
-    max-width: 100% !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    overflow-x: hidden !important;
-    height: 100vh !important; /* FORÇA altura fixa */
-}
-
-/* CRÍTICO: Layout principal com altura fixa absoluta */
-.main-container {
-    display: flex !important;
-    height: 100vh !important; 
-    max-height: 100vh !important; /* Impede crescimento */
-    background: #0f0f23;
-    overflow: hidden !important;
-    position: relative;
-}
-
-/* Sidebar lateral com altura fixa */
-.sidebar {
-    width: 260px;
-    min-width: 260px;
-    max-width: 260px;
-    background: #171717;
-    border-right: 1px solid #2d2d2d;
-    padding: 16px;
-    overflow-y: auto;
-    flex-shrink: 0;
-    height: 100vh !important;
-    max-height: 100vh !important;
-}
-
-.sidebar-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 20px;
-    padding-bottom: 16px;
-    border-bottom: 1px solid #2d2d2d;
-}
-
-.new-chat-btn {
-    background: #10a37f !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 8px !important;
-    padding: 8px 12px !important;
-    font-size: 14px !important;
-    font-weight: 500 !important;
-    cursor: pointer !important;
-    transition: all 0.2s ease !important;
-}
-
-.new-chat-btn:hover {
-    background: #0d8f6e !important;
-}
-
-.sidebar-section {
-    margin-bottom: 24px;
-}
-
-.sidebar-section h3 {
-    color: #8e8ea0;
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 8px;
-}
-
-/* CRÍTICO: Área principal com altura controlada */
-.chat-main {
-    flex: 1;
-    display: flex !important;
-    flex-direction: column !important;
-    background: #0f0f23;
-    position: relative;
-    height: 100vh !important;
-    max-height: 100vh !important; /* IMPEDE CRESCIMENTO */
-    overflow: hidden !important;
-    min-height: 0; /* Permite encolhimento */
-}
-
-/* Header do chat com altura fixa */
-.chat-header {
-    background: #171717;
-    border-bottom: 1px solid #2d2d2d;
-    padding: 12px 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    z-index: 10;
-    flex-shrink: 0;
-    height: 60px !important; /* Altura fixa */
-    min-height: 60px !important;
-    max-height: 60px !important;
-}
-
-.chat-title {
-    color: #ffffff;
-    font-size: 16px;
-    font-weight: 600;
-    text-align: center;
-}
-
-.chat-title a {
-    color: #10a37f;
-    text-decoration: none;
-}
-
-.chat-title a:hover {
-    text-decoration: underline;
-}
-
-/* SOLUÇÃO PRINCIPAL: Container de mensagens com altura calculada */
-.messages-container {
-    flex: 1 !important; /* Ocupa espaço disponível */
-    display: flex !important;
-    flex-direction: column !important;
-    background: #0f0f23;
-    min-height: 0 !important; /* PERMITE ENCOLHIMENTO */
-    max-height: calc(100vh - 180px) !important; /* Altura máxima calculada (total - header - input) */
-    overflow: hidden !important;
-    position: relative !important;
-}
-
-/* CRÍTICO: Chatbot com scroll controlado */
-.chatbot {
-    flex: 1 !important;
-    min-height: 0 !important; /* PERMITE ENCOLHIMENTO */
-    height: 100% !important;
-    max-height: 100% !important; /* NÃO ULTRAPASSA O CONTAINER */
-    overflow: hidden !important; /* Container não faz scroll */
-    background: transparent !important;
-    border: none !important;
-    padding: 0 !important; /* Remove padding que pode causar overflow */
-    margin: 0 !important;
-    position: relative !important;
-}
-
-/* Container interno com scroll */
-.chatbot > div {
-    height: 100% !important;
-    max-height: 100% !important;
-    overflow-y: auto !important; /* APENAS ESTE DIV FAZ SCROLL */
-    overflow-x: hidden !important;
-    padding: 16px 24px !important; /* Padding interno */
-    scroll-behavior: smooth !important;
-}
-
-/* CRÍTICO: Área de input com altura fixa */
-.input-area {
-    background: #0f0f23;
-    padding: 24px;
-    border-top: 1px solid #2d2d2d;
-    flex-shrink: 0 !important; /* NUNCA ENCOLHE */
-    position: relative;
-    z-index: 20;
-    height: 120px !important; /* Altura fixa para area do input */
-    min-height: 120px !important;
-    max-height: 120px !important;
-}
-
-.input-container {
-    max-width: 768px;
-    margin: 0 auto;
-    position: relative;
-    height: 100%;
-    display: flex;
-    align-items: center;
-}
-
-.input-wrapper {
-    background: #2d2d2d;
-    border: 1px solid #4d4d4d;
-    border-radius: 12px;
-    padding: 12px 16px;
-    display: flex;
-    align-items: flex-end;
-    gap: 12px;
-    transition: all 0.2s ease;
-    width: 100%;
-    max-height: 72px; /* Altura máxima do wrapper de input */
-}
-
-.input-wrapper:focus-within {
-    border-color: #10a37f;
-    box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.2);
-}
-
-#entrada_usuario {
-    flex: 1;
-}
-
-#entrada_usuario textarea {
-    background: transparent !important;
-    border: none !important;
-    color: #ffffff !important;
-    font-size: 16px !important;
-    line-height: 1.5 !important;
-    resize: none !important;
-    outline: none !important;
-    min-height: 24px !important;
-    max-height: 48px !important; /* Reduzido para não afetar layout */
-    height: 24px !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    overflow-y: auto !important;
-}
-
-#entrada_usuario textarea::placeholder {
-    color: #8e8ea0 !important;
-}
-
-.send-button {
-    width: 32px;
-    height: 32px;
-    background: #10a37f !important;
-    border: none !important;
-    border-radius: 6px !important;
-    color: white !important;
-    cursor: pointer !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    transition: all 0.2s ease !important;
-    flex-shrink: 0;
-}
-
-.send-button:hover:not(:disabled) {
-    background: #0d8f6e !important;
-}
-
-.send-button:disabled {
-    background: #4d4d4d !important;
-    cursor: not-allowed !important;
-}
-
-/* Estilo das mensagens */
-.message {
-    width: 100%;
-    padding: 16px 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.message-content {
-    max-width: 768px;
-    margin: 0 auto;
-    padding: 0 24px;
-    display: flex;
-    gap: 16px;
-    align-items: flex-start;
-}
-
-.message-avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-    font-weight: 600;
-}
-
-.user-avatar {
-    background: #10a37f;
-    color: white;
-}
-
-.bot-avatar {
-    background: #5436da;
-    color: white;
-}
-
-.message-text {
-    flex: 1;
-    line-height: 1.7;
-    font-size: 16px;
-    color: #ffffff;
-}
-
-.message.user {
-    background: rgba(16, 163, 127, 0.05);
-}
-
-.message.assistant {
-    background: rgba(84, 54, 218, 0.05);
-}
-
-/* Modelo selector na sidebar */
-.model-selector {
-    background: #2d2d2d;
-    border: 1px solid #4d4d4d;
-    border-radius: 8px;
-    padding: 8px 12px;
-    color: #ffffff;
-    font-size: 14px;
-}
-
-/* Accordions na sidebar */
-.sidebar .gr-accordion {
-    background: transparent !important;
-    border: 1px solid #2d2d2d !important;
-    border-radius: 8px !important;
-    margin-bottom: 16px !important;
-}
-
-.sidebar .gr-accordion summary {
-    background: #2d2d2d !important;
-    color: #ffffff !important;
-    padding: 12px 16px !important;
-    border-radius: 8px !important;
-    font-weight: 500 !important;
-}
-
-.sidebar .gr-accordion[open] summary {
-    border-bottom: 1px solid #4d4d4d !important;
-    border-radius: 8px 8px 0 0 !important;
-}
-
-.sidebar .gr-accordion .gr-panel {
-    background: #1a1a1a !important;
-    padding: 16px !important;
-    border-radius: 0 0 8px 8px !important;
-}
-
-/* Estilo para código */
-.message pre {
-    background: #1e1e1e !important;
-    border: 1px solid #3e3e3e !important;
-    border-radius: 8px !important;
-    padding: 16px !important;
-    margin: 12px 0 !important;
-    overflow-x: auto !important;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
-    font-size: 14px !important;
-    line-height: 1.5 !important;
-}
-
-.message code {
-    background: rgba(255, 255, 255, 0.1) !important;
-    padding: 2px 6px !important;
-    border-radius: 4px !important;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
-    font-size: 14px !important;
-}
-
-.message pre code {
-    background: transparent !important;
-    padding: 0 !important;
-}
-
-/* Links */
-.message a {
-    color: #10a37f !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;
-    line-height: 1.6 !important;
-}
-
-/* Tabelas */
-.message table {
-    border-collapse: collapse !important;
-    width: 100% !important;
-    margin: 16px 0 !important;
-    background: rgba(255, 255, 255, 0.05) !important;
-    border-radius: 8px !important;
-    overflow: hidden !important;
-}
-
-.message th, .message td {
-    border: 1px solid #3e3e3e !important;
-    padding: 12px !important;
-    text-align: left !important;
-}
-
-.message th {
-    background: rgba(255, 255, 255, 0.1) !important;
-    font-weight: 600 !important;
-}
-
-/* Scrollbar personalizada */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: #1a1a1a;
-}
-
-::-webkit-scrollbar-thumb {
-    background: #4d4d4d;
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: #6d6d6d;
-}
-
-/* CRÍTICO: CSS para componentes Gradio específicos */
-.gr-column:has(.messages-container) {
-    flex: 1 !important;
-    min-height: 0 !important;
-    max-height: calc(100vh - 180px) !important;
-    overflow: hidden !important;
-}
-
-.gr-column:has(.input-area) {
-    flex-shrink: 0 !important;
-    height: 120px !important;
-    min-height: 120px !important;
-    max-height: 120px !important;
-}
-
-/* Força o container principal do gradio */
-.gradio-container > .gr-column {
-    height: 100vh !important;
-    max-height: 100vh !important;
-    overflow: hidden !important;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .main-container {
-        flex-direction: column;
+def criar_interface():
+    css = """
+    @import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css');
+    body {
+        font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+        background-color: #f5f5f5;
+        color: #1f2937;
+        margin: 0;
+        height: 100vh;
+        overflow: hidden;
+    }
+    .gradio-container {
+        max-width: 100% !important;
         height: 100vh !important;
-        max-height: 100vh !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        overflow: hidden !important;
+    }
+    .main-container {
+        display: flex;
+        height: 100vh;
+        max-height: 100vh;
+        overflow: hidden;
     }
-    
     .sidebar {
-        width: 100%;
-        height: 200px !important;
-        max-height: 200px !important;
-        min-height: 200px !important;
-        border-right: none;
-        border-bottom: 1px solid #2d2d2d;
+        width: 280px;
+        background-color: #ffffff;
+        border-right: 1px solid #e5e7eb;
+        padding: 1.5rem;
+        overflow-y: auto;
+        flex-shrink: 0;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
     }
-    
     .chat-main {
-        height: calc(100vh - 200px) !important;
-        max-height: calc(100vh - 200px) !important;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        background-color: #f5f5f5;
+        height: 100vh;
+        overflow: hidden;
+    }
+    .chat-header {
+        background-color: #ffffff;
+        border-bottom: 1px solid #e5e7eb;
+        padding: 1rem 1.5rem;
+        text-align: center;
+        flex-shrink: 0;
     }
-    
     .messages-container {
-        max-height: calc(100vh - 320px) !important;
+        flex: 1;
+        overflow-y: auto;
+        padding: 1.5rem;
+        background-color: #f5f5f5;
+        scroll-behavior: smooth;
     }
-    
-    .message-content {
-        padding: 0 16px;
-        gap: 12px;
+    .input-area {
+        background-color: #ffffff;
+        border-top: 1px solid #e5e7eb;
+        padding: 1rem 1.5rem;
+        flex-shrink: 0;
     }
-    
-    .message-avatar {
-        width: 28px;
-        height: 28px;
-        font-size: 14px;
+    .input-container {
+        max-width: 800px;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
     }
-    
-    .input-area {
-        padding: 16px;
-        height: 100px !important;
-        max-height: 100px !important;
+    .input-wrapper {
+        flex: 1;
+        background-color: #f3f4f6;
+        border: 1px solid #d1d5db;
+        border-radius: 0.5rem;
+        padding: 0.75rem;
+        display: flex;
+        align-items: center;
+        transition: all 0.2s ease;
+    }
+    .input-wrapper:focus-within {
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+    }
+    #entrada_usuario textarea {
+        background: transparent !important;
+        border: none !important;
+        color: #1f2937 !important;
+        font-size: 1rem !important;
+        line-height: 1.5 !important;
+        resize: none !important;
+        outline: none !important;
+        width: 100% !important;
+        min-height: 24px !important;
+        max-height: 80px !important;
+        overflow-y: auto !important;
+    }
+    #entrada_usuario textarea::placeholder {
+        color: #6b7280 !important;
+    }
+    .send-button {
+        background-color: #3b82f6 !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 0.375rem !important;
+        padding: 0.5rem !important;
+        cursor: pointer !important;
+        transition: background-color 0.2s ease !important;
+    }
+    .send-button:hover:not(:disabled) {
+        background-color: #2563eb !important;
+    }
+    .send-button:disabled {
+        background-color: #9ca3af !important;
+        cursor: not-allowed !important;
+    }
+    .message {
+        margin-bottom: 1.5rem;
+        display: flex;
+        gap: 0.75rem;
+        max-width: 800px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .message.user .message-content {
+        background-color: #dbeafe;
+        border-radius: 0.5rem 0.5rem 0 0.5rem;
+        padding: 0.75rem 1rem;
+    }
+    .message.assistant .message-content {
+        background-color: #ffffff;
+        border: 1px solid #e5e7eb;
+        border-radius: 0.5rem 0.5rem 0.5rem 0;
+        padding: 0.75rem 1rem;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
     }
-    
     .message-text {
-        font-size: 15px;
+        font-size: 1rem;
+        line-height: 1.5;
     }
-}
-
-/* Animações */
-.message {
-    animation: fadeIn 0.3s ease-out;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
+    .model-selector {
+        width: 100%;
+        padding: 0.5rem;
+        border-radius: 0.375rem;
+        border: 1px solid #d1d5db;
+        background-color: #f9fafb;
     }
-    to {
-        opacity: 1;
-        transform: translateY(0);
+    .accordion {
+        border: 1px solid #e5e7eb !important;
+        border-radius: 0.375rem !important;
+        margin-bottom: 1rem !important;
+        background-color: #f9fafb !important;
     }
-}
-
-/* Estado de carregamento */
-.loading-indicator {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    color: #8e8ea0;
-    font-style: italic;
-}
-
-.loading-dots {
-    display: inline-flex;
-    gap: 2px;
-}
-
-.loading-dots span {
-    width: 4px;
-    height: 4px;
-    background: #8e8ea0;
-    border-radius: 50%;
-    animation: pulse 1.4s ease-in-out infinite both;
-}
-
-.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
-.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
-.loading-dots span:nth-child(3) { animation-delay: 0s; }
-
-@keyframes pulse {
-    0%, 80%, 100% {
-        opacity: 0.3;
+    .accordion summary {
+        padding: 0.75rem !important;
+        font-weight: 500 !important;
+        cursor: pointer !important;
     }
-    40% {
-        opacity: 1;
+    .accordion[open] summary {
+        border-bottom: 1px solid #e5e7eb !important;
     }
-}
-
-/* Ocultar elementos desnecessários do Gradio */
-.gr-button-lg {
-    display: none !important;
-}
-
-/* Customizar os componentes específicos */
-.gr-textbox {
-    background: transparent !important;
-    border: none !important;
-}
-
-.gr-dropdown {
-    background: #2d2d2d !important;
-    border: 1px solid #4d4d4d !important;
-    border-radius: 8px !important;
-    color: #ffffff !important;
-}
-
-/* Botões personalizados */
-.control-button {
-    background: #2d2d2d !important;
-    color: #ffffff !important;
-    border: 1px solid #4d4d4d !important;
-    border-radius: 8px !important;
-    padding: 8px 16px !important;
-    font-size: 14px !important;
-    cursor: pointer !important;
-    transition: all 0.2s ease !important;
-}
-
-.control-button:hover {
-    background: #3d3d3d !important;
-    border-color: #6d6d6d !important;
-}
-
-.control-button.primary {
-    background: #10a37f !important;
-    border-color: #10a37f !important;
-}
-
-.control-button.primary:hover {
-    background: #0d8f6e !important;
-}
-
-/* Status indicators */
-.status-indicator {
-    font-size: 12px;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-weight: 500;
-}
-
-.status-success {
-    background: rgba(16, 163, 127, 0.2);
-    color: #10a37f;
-    border: 1px solid rgba(16, 163, 127, 0.3);
-}
-
-.status-error {
-    background: rgba(239, 68, 68, 0.2);
-    color: #ef4444;
-    border: 1px solid rgba(239, 68, 68, 0.3);
-}
-
-.status-warning {
-    background: rgba(245, 158, 11, 0.2);
-    color: #f59e0b;
-    border: 1px solid rgba(245, 158, 11, 0.3);
-}
-"""
+    .accordion .gr-panel {
+        padding: 1rem !important;
+    }
+    pre, code {
+        font-family: 'Fira Code', monospace !important;
+        background-color: #1f2937 !important;
+        color: #f9fafb !important;
+        border-radius: 0.375rem !important;
+        padding: 0.75rem !important;
+    }
+    pre {
+        overflow-x: auto;
+    }
+    code {
+        padding: 0.2rem 0.4rem !important;
+    }
+    a {
+        color: #3b82f6 !important;
+        text-decoration: none !important;
+    }
+    a:hover {
+        text-decoration: underline !important;
+    }
+    @media (max-width: 768px) {
+        .main-container {
+            flex-direction: column;
+        }
+        .sidebar {
+            width: 100%;
+            height: auto;
+            max-height: 200px;
+            border-right: none;
+            border-bottom: 1px solid #e5e7eb;
+        }
+        .chat-main {
+            height: calc(100vh - 200px);
+        }
+        .messages-container {
+            padding: 1rem;
+        }
+        .input-area {
+            padding: 0.75rem;
+        }
+        .message {
+            margin-bottom: 1rem;
+        }
+    }
+    .loading-indicator {
+        color: #6b7280;
+        font-style: italic;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+    .loading-dots span {
+        width: 0.25rem;
+        height: 0.25rem;
+        background-color: #6b7280;
+        border-radius: 50%;
+        animation: pulse 1.4s ease-in-out infinite;
+    }
+    .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
+    .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
+    .loading-dots span:nth-child(3) { animation-delay: 0s; }
+    @keyframes pulse {
+        0%, 80%, 100% { opacity: 0.3; }
+        40% { opacity: 1; }
+    }
+    """
 
-def criar_interface():
-    with gr.Blocks(title="Dr. Aldo Henrique - iAldo AI Assistant", theme=gr.themes.Base(), css=css_customizado) as interface:
+    with gr.Blocks(title="Dr. Aldo Henrique - iAldo AI Assistant", css=css) as interface:
         session_id_state = gr.State(str(uuid.uuid4()))
 
         with gr.Row(elem_classes="main-container"):
-            # Sidebar esquerda
-            with gr.Column(elem_classes="sidebar", scale=0, min_width=260):
+            with gr.Column(elem_classes="sidebar", scale=0, min_width=280):
                 gr.HTML("""
-                <div class="sidebar-header">
-                    <h2 style="color: #10a37f; font-size: 18px; font-weight: 600;">iAldo AI</h2>
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-xl font-semibold text-blue-600">iAldo AI</h2>
                 </div>
                 """)
-                
-                # Seletor de modelo
                 with gr.Group():
-                    gr.HTML('<h3 style="color: #8e8ea0; font-size: 12px; font-weight: 600; text-transform: uppercase; margin-bottom: 8px;">🧠 Modelo de IA</h3>')
+                    gr.HTML('<h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">🧠 Modelo de IA</h3>')
                     modelo_select = gr.Dropdown(
                         choices=list(MODELS.keys()),
                         value="Llama 3.2 3B",
-                        label="",
                         show_label=False,
                         elem_classes="model-selector",
                         container=False
                     )
-
-                # Status da API
-                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!")
-
-                # Informações
-                with gr.Accordion("ℹ️ Sobre", open=False, elem_classes="sidebar-section"):
+                with gr.Accordion("🔧 Status API", open=False, elem_classes="accordion"):
+                    status_api = gr.Textbox(
+                        value="✅ Modelos carregados com sucesso!",
+                        interactive=False,
+                        lines=4,
+                        show_label=False
+                    )
+                with gr.Accordion("ℹ️ Sobre", open=False, elem_classes="accordion"):
                     gr.Markdown("""
                     **Dr. Aldo Henrique**
-                    
-                    • Especialista em C/C++, Java
-                    • Desenvolvimento Web & IA
-                    • Conteúdo: aldohenrique.com.br
-                    
+
+                    - Especialista em C/C++, Java
+                    - Desenvolvimento Web & IA
+                    - Conteúdo: [aldohenrique.com.br](https://aldohenrique.com.br/)
+
                     **Dicas:**
-                    • Faça perguntas específicas
-                    • Use o RAG para consultar o blog
-                    • Experimente diferentes modelos
+                    - Faça perguntas específicas
+                    - Use o RAG para consultar o blog
+                    - Experimente diferentes modelos
                     """)
 
-            # Área principal do chat
             with gr.Column(elem_classes="chat-main", scale=1):
-                # Header do chat
                 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 class="text-lg font-semibold text-gray-800">
+                        🤖 Conversando com <a href="https://aldohenrique.com.br/" target="_blank" class="text-blue-600">Prof. Dr. Aldo Henrique</a>
                     </div>
                 </div>
                 """)
-
-                # Área de mensagens
                 with gr.Column(elem_classes="messages-container"):
                     chatbot = gr.Chatbot(
-                        label="",
-                        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"),
+                        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%"  # Força altura 100%
+                        height="100%"
                     )
-
-                # Área de input
                 with gr.Column(elem_classes="input-area"):
                     with gr.Row(elem_classes="input-container"):
                         with gr.Column(elem_classes="input-wrapper", scale=1):
@@ -711,43 +304,31 @@ def criar_interface():
                                 show_label=False,
                                 placeholder="Digite sua mensagem aqui...",
                                 lines=1,
+                                max_lines=3,
                                 elem_id="entrada_usuario",
-                                max_lines=3,  # Reduzido para não expandir muito
-                                container=False,
-                                scale=1
+                                container=False
                             )
-                            # Botão de envio oculto (será substituído por JavaScript)
-                            enviar_btn = gr.Button("➤", variant="primary", size="sm", elem_classes="send-button")
+                            enviar_btn = gr.Button("➤", variant="primary", elem_classes="send-button")
 
         def responder(chat_history, user_msg, modelo, session_id):
             if not user_msg.strip():
                 return chat_history, ""
-
-            # Adiciona a mensagem do usuário ao histórico
-            chat_history = chat_history + [[user_msg, "🤔 Dr. Aldo está pensando..."]]
+            chat_history = chat_history + [[user_msg, '<div class="loading-indicator">🤔 Dr. Aldo está pensando... <span class="loading-dots"><span></span><span></span><span></span></span></div>']]
             yield chat_history, ""
-
             try:
-                # Obtem a resposta do modelo
                 resposta_final = responder_como_aldo(session_id, user_msg, modelo)
-                
-                # Atualiza o histórico com a resposta final
                 chat_history[-1][1] = resposta_final
                 yield chat_history, ""
-                
             except Exception as e:
-                # Em caso de erro, mostra uma mensagem amigável
                 chat_history[-1][1] = f"❌ Desculpe, ocorreu um erro: {str(e)}"
                 yield chat_history, ""
 
-        # Eventos
         enviar_btn.click(
             fn=responder,
             inputs=[chatbot, user_input, modelo_select, session_id_state],
             outputs=[chatbot, user_input],
             show_progress=False
         )
-
         user_input.submit(
             fn=responder,
             inputs=[chatbot, user_input, modelo_select, session_id_state],
@@ -755,124 +336,57 @@ def criar_interface():
             show_progress=False
         )
 
-        # JavaScript otimizado e simplificado
         gr.HTML("""
         <script>
-        (function() {
-            let initialized = false;
-            
-            function initLayout() {
-                if (initialized) return;
-                initialized = true;
-                
-                // Força layout fixo imediatamente
-                const mainContainer = document.querySelector('.main-container');
-                if (mainContainer) {
-                    mainContainer.style.height = '100vh';
-                    mainContainer.style.maxHeight = '100vh';
-                    mainContainer.style.overflow = 'hidden';
-                }
-                
-                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 messagesContainer = document.querySelector('.messages-container');
-                if (messagesContainer) {
-                    messagesContainer.style.flex = '1';
-                    messagesContainer.style.minHeight = '0';
-                    messagesContainer.style.overflow = 'hidden';
-                }
-                
-                const inputArea = document.querySelector('.input-area');
-                if (inputArea) {
-                    inputArea.style.flexShrink = '0';
-                    inputArea.style.height = '120px';
-                    inputArea.style.maxHeight = '120px';
-                }
-                
-                // Configuração do textarea
-                const textarea = document.querySelector("#entrada_usuario textarea");
-                if (textarea) {
-                    textarea.style.height = "24px";
-                    textarea.style.minHeight = "24px";
-                    textarea.style.maxHeight = "48px"; // Limitado para não quebrar layout
-                    textarea.style.resize = "none";
-                    textarea.style.overflowY = "hidden";
-                    
-                    // Auto-resize limitado
-                    function autoResize() {
-                        textarea.style.height = "24px";
-                        const newHeight = Math.min(textarea.scrollHeight, 48);
-                        textarea.style.height = Math.max(newHeight, 24) + "px";
-                        
-                        if (textarea.scrollHeight > 48) {
-                            textarea.style.overflowY = "auto";
-                        } else {
-                            textarea.style.overflowY = "hidden";
-                        }
-                    }
-                    
-                    textarea.addEventListener('input', autoResize);
-                    textarea.addEventListener('paste', () => setTimeout(autoResize, 0));
-                    setTimeout(() => textarea.focus(), 300);
-                }
-                
-                console.log("Layout fixo inicializado");
+        document.addEventListener('DOMContentLoaded', () => {
+            const textarea = document.querySelector("#entrada_usuario textarea");
+            if (textarea) {
+                textarea.style.height = "auto";
+                textarea.style.overflowY = "hidden";
+                const adjustHeight = () => {
+                    textarea.style.height = "auto";
+                    textarea.style.height = Math.min(textarea.scrollHeight, 80) + "px";
+                };
+                textarea.addEventListener('input', adjustHeight);
+                textarea.addEventListener('paste', () => setTimeout(adjustHeight, 0));
+                setTimeout(() => textarea.focus(), 300);
             }
-            
-            // Executa quando DOM estiver pronto
-            if (document.readyState === 'loading') {
-                document.addEventListener('DOMContentLoaded', initLayout);
-            } else {
-                setTimeout(initLayout, 100);
+
+            const messagesContainer = document.querySelector('.messages-container');
+            if (messagesContainer) {
+                messagesContainer.scrollTop = messagesContainer.scrollHeight;
+                const observer = new MutationObserver(() => {
+                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+                });
+                observer.observe(messagesContainer, { childList: true, subtree: true });
             }
-            
-            // Reforça o layout depois que o Gradio terminar de carregar
-            setTimeout(initLayout, 1000);
-            setTimeout(initLayout, 2000);
-        })();
+        });
         </script>
         """)
 
     return interface
 
 def inicializar_sistema_sync():
-    """Função síncrona para compatibilidade"""
     try:
         import asyncio
-        
-        # Tenta obter o loop atual
         try:
             loop = asyncio.get_event_loop()
             if loop.is_running():
-                # Se já está rodando, cria uma nova thread
                 import concurrent.futures
                 with concurrent.futures.ThreadPoolExecutor() as executor:
                     future = executor.submit(lambda: asyncio.run(inicializar_sistema()))
                     return future.result()
             else:
-                # Se não está rodando, executa normalmente
                 return loop.run_until_complete(inicializar_sistema())
         except RuntimeError:
-            # Se não há loop, cria um novo
             return asyncio.run(inicializar_sistema())
-            
     except Exception as e:
         print(f"Erro na inicialização: {e}")
-        return False, {}    
+        return False, {}
 
 def configurar_interface():
-    """
-    Configura a interface Gradio apenas se o sistema for inicializado com pelo menos 3 modelos disponíveis.
-    Lança uma exceção com a lista de modelos disponíveis se a inicialização falhar.
-    """
     try:
-        status, available_models = inicializar_sistema()
+        status, available_models = inicializar_sistema_sync()
         if status:
             return criar_interface()
         else: