Update interface.py

interface.py

@@ -8,604 +8,189 @@ from ai_logic import (
     inicializar_sistema
 )
 
-# CSS Moderno - Otimizado para usar toda a tela
 css_customizado = """
-/* === VARIÁVEIS CSS === */
-:root {
-    --bg-primary: #212121 !important;
-    --bg-secondary: #2f2f2f !important;
-    --bg-tertiary: #3c4043 !important;
-    --bg-chat: #f8f9fa !important;
-    --bg-user: #e3f2fd !important;
-    --bg-assistant: #ffffff !important;
-    --border-color: #e0e0e0 !important;
-    --border-dark: #565869 !important;
-    --text-primary: #1a1a1a !important;
-    --text-secondary: #555555 !important;
-    --text-on-dark: #ffffff !important;
-    --text-chat: #2d2d2d !important;
-    --accent: #1976d2 !important;
-    --accent-hover: #1565c0 !important;
-    --shadow: 0 2px 16px rgba(0, 0, 0, 0.1) !important;
-    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12) !important;
-    --radius: 12px !important;
-    --radius-lg: 16px !important;
-    --sidebar-width: 280px !important;
-    --header-height: 60px !important;
-    --input-height: 80px !important;
-}
-
-
-/* === RESET E BASE === */
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    color-scheme: light !important; /* Força tema claro */
-}
-
-html, body {
+.gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto;
+    width: 99%;
     height: 100vh !important;
-    max-height: 100vh !important;
-    overflow: hidden !important;
-    background: var(--bg-chat) !important;
-    color: var(--text-primary) !important;
-}
-
-body, .gradio-container {
-    font-family: 'Söhne', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: var(--bg-chat) !important;
-    color: var(--text-primary) !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-    width: 100vw !important;
-    max-width: 100vw !important;
-    overflow: hidden !important;
-    line-height: 1.6;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-.gradio-container > div {
-    height: 100vh !important;
-    max-height: 100vh !important;
-    width: 100vw !important;
-    max-width: 100vw !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    overflow: hidden !important;
-}
-
-/* === LAYOUT PRINCIPAL === */
-.main-container {
-    display: flex !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-    width: 100vw !important;
-    max-width: 100vw !important;
-    position: fixed !important;
-    top: 0 !important;
-    left: 0 !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-/* === SIDEBAR === */
-.sidebar {
-    width: var(--sidebar-width) !important;
-    min-width: var(--sidebar-width) !important;
-    max-width: var(--sidebar-width) !important;
-    background: var(--bg-primary);
-    border-right: 1px solid var(--border-dark);
-    padding: 20px;
     display: flex;
     flex-direction: column;
-    gap: 20px;
-    height: 100vh !important;
-    max-height: 100vh !important;
-    overflow-y: auto;
-    transition: transform 0.3s ease;
-    z-index: 1000;
-    position: relative;
-}
-
-.sidebar-header {
-    text-align: center;
-    margin-bottom: 20px;
-    padding: 16px 0;
-    flex-shrink: 0;
-}
-
-.sidebar-title {
-    font-size: 20px;
-    font-weight: 700;
-    color: var(--text-on-dark);
-    margin-bottom: 4px;
-}
-
-.sidebar-subtitle {
-    font-size: 13px;
-    color: #8e8ea0;
-    opacity: 0.8;
+    overflow: hidden;
 }
-
-.sidebar-section {
-    margin-bottom: 24px;
+.main-content {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
     flex-shrink: 0;
 }
-
-.sidebar-section-title {
-    color: #8e8ea0;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    letter-spacing: 1px;
-}
-
-.new-chat-btn {
-    width: 100% !important;
-    background: linear-gradient(135deg, var(--accent), #0ea5e9) !important;
+.titulo-principal {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     color: white !important;
-    border: none !important;
-    border-radius: var(--radius) !important;
-    padding: 14px 16px !important;
-    font-weight: 600 !important;
-    font-size: 14px !important;
-    transition: all 0.2s ease !important;
-    box-shadow: var(--shadow) !important;
-    cursor: pointer !important;
-}
-
-.new-chat-btn:hover {
-    background: linear-gradient(135deg, var(--accent-hover), #0284c7) !important;
-    transform: translateY(-1px) !important;
-    box-shadow: var(--shadow-lg) !important;
-}
-
-/* Dropdown customizado */
-.sidebar .gr-dropdown {
-    background: var(--bg-secondary) !important;
-    border: 1px solid var(--border-dark) !important;
-    border-radius: var(--radius) !important;
-    color: var(--text-on-dark) !important;
-}
-
-.sidebar .gr-dropdown > div {
-    background: var(--bg-secondary) !important;
-    border: none !important;
-    color: var(--text-on-dark) !important;
-}
-
-/* === ÁREA DO CHAT === */
-.chat-main {
-    flex: 1 !important;
-    display: flex !important;
-    flex-direction: column !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-    width: calc(100vw - var(--sidebar-width)) !important;
-    background: var(--bg-chat);
-    position: relative;
-    overflow: hidden !important;
-}
-
-/* Header do Chat */
-.chat-header {
-    background: var(--bg-chat);
-    border-bottom: 1px solid var(--border-color);
-    padding: 12px 20px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-    z-index: 100;
+    padding: 10px !important;
+    border-radius: 10px !important;
+    margin-bottom: 10px !important;
+    text-align: center !important;
     flex-shrink: 0;
-    height: var(--header-height);
-    min-height: var(--header-height);
-    max-height: var(--header-height);
 }
-
-.chat-header-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--text-chat);
+.chat-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
-
-.mobile-menu-btn {
-    display: none;
-    background: none !important;
-    border: none !important;
-    font-size: 20px !important;
-    color: var(--text-chat) !important;
-    cursor: pointer !important;
-    padding: 8px !important;
-    border-radius: 8px !important;
+.chat-container {
+    flex: 1;
+    overflow-y: auto;
+    margin-bottom: 10px;
 }
-
-.mobile-menu-btn:hover {
-    background: var(--bg-user) !important;
+.input-container {
+    flex-shrink: 0;
+    padding: 10px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
-
-/* Container de Mensagens */
-.messages-container {
-    flex: 1 !important;
-    height: calc(100vh - var(--header-height) - var(--input-height)) !important;
-    max-height: calc(100vh - var(--header-height) - var(--input-height)) !important;
-    overflow-y: auto !important;
-    overflow-x: hidden !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    background: var(--bg-chat);
-    position: relative;
-    width: 100% !important;
+.additional-content {
+    overflow-y: auto;
+    padding-top: 20px;
 }
-
-/* Estilização do Chat */
-#chat {
+/* Estilos para o chat - Melhorias na legibilidade */
+.chatbot {
     height: 100% !important;
-    max-height: 100% !important;
-    min-height: 100% !important;
-    width: 100% !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    background: var(--bg-chat) !important;
-    color: var(--text-chat) !important;
-    overflow-y: auto !important;
-    overflow-x: hidden !important;
-}
-
-#chat * {
-    color: var(--text-chat) !important;
+    max-height: none !important;
 }
-
-#chat .message {
-    margin: 0 !important;
-    padding: 20px !important;
-    border: none !important;
-    border-radius: 0 !important;
-    max-width: 100% !important;
-    width: 100% !important;
-    word-wrap: break-word !important;
-    overflow-wrap: break-word !important;
-    color: var(--text-chat) !important;
-}
-
-#chat .message.user {
-    background: var(--bg-user) !important;
-    border-bottom: 1px solid #bbdefb !important;
-    color: var(--text-chat) !important;
-}
-
-#chat .message.user * {
-    color: var(--text-chat) !important;
-}
-
-#chat .message.bot {
-    background: var(--bg-assistant) !important;
-    border-bottom: 1px solid var(--border-color) !important;
-    color: var(--text-chat) !important;
-}
-
-#chat .message.bot * {
-    color: var(--text-chat) !important;
-}
-
-#chat .message-content {
-    max-width: 100% !important;
-    width: 100% !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    display: flex !important;
-    gap: 16px !important;
-    align-items: flex-start !important;
-    color: black !important;
-}
-
-#chat .avatar {
-    width: 36px !important;
-    height: 36px !important;
-    border-radius: 50% !important;
-    flex-shrink: 0 !important;
-    background: var(--accent) !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
+/* Mensagens do usuário */
+.message.user {
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
     color: white !important;
-    font-weight: 600 !important;
-    font-size: 14px !important;
+    border-radius: 18px 18px 6px 18px !important;
+    padding: 12px 16px !important;
+    margin: 8px 0 !important;
+    font-size: 15px !important;
+    line-height: 1.5 !important;
+    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
+    border: none !important;
 }
-
-#chat .message-text {
-    flex: 1 !important;
-    color: var(--text-chat) !important;
-    font-size: 16px !important;
+/* Mensagens do bot */
+.message.bot {
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
+    color: #1e293b !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 18px 18px 18px 6px !important;
+    padding: 16px 20px !important;
+    margin: 8px 0 !important;
+    font-size: 15px !important;
     line-height: 1.6 !important;
-    word-wrap: break-word !important;
-    overflow-wrap: break-word !important;
-    font-weight: 400 !important;
-    max-width: calc(100% - 52px) !important;
-    width: calc(100% - 52px) !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
 }
-
-/* Melhor contraste para links e código */
-#chat .message-text a {
-    color: var(--accent) !important;
-    text-decoration: underline !important;
-}
-
-#chat code,
-#chat .message-text code,
-[data-testid="chatbot"] code,
-.gradio-container code {
-    background: #f5f5f5 !important;
-    color: #d73502 !important;
-    padding: 2px 6px !important;
-    border-radius: 4px !important;
-    font-family: 'Monaco', 'Consolas', 'Courier New', monospace !important;
-    font-size: 14px !important;
-    border: 1px solid #e0e0e0 !important;
-}
-
-#chat pre,
-#chat .message-text pre,
-[data-testid="chatbot"] pre,
-.gradio-container pre {
-    background: #f8f8f8 !important;
-    color: #2d2d2d !important;
-    border: 1px solid #e0e0e0 !important;
+/* Estilização para código dentro das mensagens */
+.message pre {
+    background: #1e293b !important;
+    color: #e2e8f0 !important;
     border-radius: 8px !important;
     padding: 16px !important;
-    overflow-x: auto !important;
-    max-width: 100% !important;
     margin: 12px 0 !important;
-    font-family: 'Monaco', 'Consolas', 'Courier New', monospace !important;
+    overflow-x: auto !important;
+    font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
     font-size: 14px !important;
-    line-height: 1.4 !important;
-}
-
-#chat .message-text strong {
-    color: var(--text-chat) !important;
-    font-weight: 600 !important;
+    line-height: 1.5 !important;
+    border: 1px solid #374151 !important;
 }
-
-/* Área de Input */
-.input-area {
-    padding: 16px 20px;
-    background: var(--bg-chat);
-    border-top: 1px solid var(--border-color);
-    position: relative;
-    flex-shrink: 0;
-    height: var(--input-height);
-    min-height: var(--input-height);
-    max-height: var(--input-height);
-    display: flex;
-    align-items: center;
-    width: 100%;
+.message code {
+    background: #e2e8f0 !important;
+    color: #1e293b !important;
+    padding: 2px 6px !important;
+    border-radius: 4px !important;
+    font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
+    font-size: 13px !important;
 }
-
-.input-container {
-    width: 100% !important;
-    max-width: 100% !important;
-    margin: 0 !important;
-    position: relative;
-    background: var(--bg-chat);
-    border: 2px solid var(--border-color);
-    border-radius: var(--radius-lg);
-    transition: all 0.2s ease;
-    box-shadow: var(--shadow);
+/* Código inline dentro de pre */
+.message pre code {
+    background: transparent !important;
+    color: #e2e8f0 !important;
+    padding: 0 !important;
+    border-radius: 0 !important;
 }
-
-.input-container:focus-within {
-    border-color: var(--accent);
-    box-shadow: 0 0 0 3px rgba(16, 163, 127, 0.1);
+/* Estilos específicos do Gradio para chatbot */
+.chatbot .message-wrap {
+    margin: 8px 0 !important;
 }
-
-.input-wrapper {
-    display: flex;
-    align-items: center;
-    padding: 8px 12px;
-    gap: 12px;
-    width: 100%;
+.chatbot .message-wrap.user {
+    justify-content: flex-end !important;
 }
-
-#entrada_usuario {
-    flex: 1 !important;
-    width: 100% !important;
+.chatbot .message-wrap.bot {
+    justify-content: flex-start !important;
 }
-
+/* Melhorias na área de input */
 #entrada_usuario textarea {
-    background: var(--bg-chat) !important;
-    border: none !important;
-    color: var(--text-chat) !important;
-    font-size: 16px !important;
+    background: linear-gradient(135deg, #1e293b 0%, #374151 100%) !important;
+    color: white !important;
+    font-size: 15px !important;
     line-height: 1.5 !important;
-    resize: none !important;
-    padding: 8px 0 !important;
-    height: 24px !important;
-    max-height: 24px !important;
-    overflow: hidden !important;
-    font-family: inherit !important;
-    width: 100% !important;
-}
-
-
-#entrada_usuario textarea::placeholder {
-    color: var(--text-secondary) !important;
-    font-size: 16px !important;
+    border: 2px solid #374151 !important;
+    border-radius: 12px !important;
+    padding: 12px 16px !important;
+    min-height: 60px !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
 }
-
 #entrada_usuario textarea:focus {
-    outline: none !important;
-    box-shadow: none !important;
+    border-color: #4f46e5 !important;
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
 }
-
-.send-button {
-    background: var(--accent) !important;
-    color: white !important;
+#entrada_usuario textarea::placeholder {
+    color: #9ca3af !important;
+}
+/* Botão de enviar */
+.gradio-button.primary {
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
     border: none !important;
-    border-radius: 10px !important;
-    width: 20px !important;
-    height: 40px !important;
-    min-width: 20px !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
+    border-radius: 12px !important;
+    padding: 12px 24px !important;
+    font-weight: 600 !important;
+    font-size: 15px !important;
     transition: all 0.2s ease !important;
-    cursor: pointer !important;
-    font-size: 16px !important;
-    flex-shrink: 0 !important;
 }
-
-.send-button:hover:not(:disabled) {
-    background: var(--accent-hover) !important;
-    transform: scale(1.05) !important;
+.gradio-button.primary:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4) !important;
 }
-
-.send-button:disabled {
-    background: #d1d5db !important;
-    cursor: not-allowed !important;
-    transform: none !important;
+/* Dropdown do modelo */
+.modelo-dropdown {
+    margin-bottom: 15px !important;
 }
-
-/* === RESPONSIVIDADE MOBILE === */
+.modelo-dropdown .gr-dropdown {
+    border-radius: 8px !important;
+    border: 1px solid #d1d5db !important;
+}
+/* Responsividade melhorada */
 @media (max-width: 768px) {
-    :root {
-        --header-height: 56px;
-        --input-height: 70px;
-    }
-    
-    .sidebar {
-        position: fixed;
-        top: 0;
-        left: 0;
-        height: 100vh !important;
-        width: 280px !important;
-        transform: translateX(-100%);
-        z-index: 1000;
-        box-shadow: var(--shadow-lg);
-    }
-    
-    .sidebar.open {
-        transform: translateX(0);
-    }
-    
-    .chat-main {
-        width: 100vw !important;
-        max-width: 100vw !important;
-        height: 100vh !important;
-        max-height: 100vh !important;
-    }
-    
-    .mobile-menu-btn {
-        display: block !important;
-    }
-    
-    .chat-header {
-        padding: 12px 16px;
-        height: var(--header-height);
-    }
-    
-    .messages-container {
-        height: calc(100vh - var(--header-height) - var(--input-height)) !important;
-        max-height: calc(100vh - var(--header-height) - var(--input-height)) !important;
-        padding: 0 !important;
-    }
-    
-    #chat {
-        padding: 0 !important;
-    }
-    
-    #chat .message {
-        padding: 16px !important;
-    }
-    
-    #chat .message-content {
-        max-width: 100% !important;
-        width: 100% !important;
-        margin: 0 !important;
-        gap: 12px !important;
-    }
-    
-    #chat .message-text {
-        font-size: 15px !important;
-        max-width: calc(100% - 48px) !important;
-        width: calc(100% - 48px) !important;
-    }
-    
-    #chat .avatar {
-        width: 32px !important;
-        height: 32px !important;
-    }
-    
-    .input-area {
-        padding: 12px 16px;
-        height: var(--input-height);
+    .titulo-principal {
+        padding: 8px !important;
+        font-size: 14px !important;
     }
     
-    .input-container {
-        border-radius: var(--radius);
-        width: 100% !important;
-        max-width: 100% !important;
-    }
-    
-    .input-wrapper {
-        padding: 6px 8px;
-        gap: 8px;
+    #entrada_usuario textarea {
+        min-height: 50px !important;
+        font-size: 16px !important;
     }
     
-    .send-button {
-        width: 36px !important;
-        height: 36px !important;
-        min-width: 36px !important;
+    .message.user,
+    .message.bot {
+        font-size: 14px !important;
+        padding: 10px 14px !important;
     }
     
-    #entrada_usuario textarea {
-        font-size: 16px !important;
+    .message pre {
+        font-size: 12px !important;
+        padding: 12px !important;
     }
 }
-
-/* Overlay para mobile */
-.mobile-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 999;
+/* Animações suaves */
+.message {
+    animation: fadeInUp 0.3s ease-out !important;
 }
-
-.mobile-overlay.show {
-    display: block;
-}
-
-/* === MELHORIAS GERAIS === */
-/* Scrollbar customizada */
-.messages-container::-webkit-scrollbar,
-#chat::-webkit-scrollbar {
-    width: 6px;
-}
-
-.messages-container::-webkit-scrollbar-track,
-#chat::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.messages-container::-webkit-scrollbar-thumb,
-#chat::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 3px;
-}
-
-.messages-container::-webkit-scrollbar-thumb:hover,
-#chat::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 0, 0, 0.3);
-}
-
-/* Animações */
 @keyframes fadeInUp {
     from {
         opacity: 0;
@@ -616,343 +201,219 @@ body, .gradio-container {
         transform: translateY(0);
     }
 }
-
-#chat .message {
-    animation: fadeInUp 0.3s ease-out;
+/* Melhorias gerais na tipografia */
+.chatbot {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif !important;
 }
-
-/* Ocultar elementos desnecessários */
-footer {
-    display: none !important;
+/* Scroll personalizado para o chat */
+.chat-container::-webkit-scrollbar {
+    width: 6px;
 }
-
-.gr-button-lg {
-    display: none !important;
+.chat-container::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 3px;
 }
-
-/* Loading indicator */
-.typing-indicator {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 8px 0;
-    color: var(--text-secondary);
+.chat-container::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
 }
-
-.typing-indicator span {
-    height: 8px;
-    width: 8px;
-    background: var(--text-secondary);
-    border-radius: 50%;
-    animation: typing 1.4s infinite ease-in-out;
+.chat-container::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
 }
-
-.typing-indicator span:nth-child(2) {
-    animation-delay: 0.2s;
+/* Força aplicação dos estilos */
+#component-6 { flex-grow: initial !important; }
+#component-7 { flex-grow: initial !important; }
+.message-wrap.svelte-gjtrl6 .prose.chatbot.md {
+    opacity: 1 !important;
 }
-
-.typing-indicator span:nth-child(3) {
-    animation-delay: 0.4s;
+/* Estilo para links */
+.message a {
+    color: #4f46e5 !important;
+    text-decoration: underline !important;
 }
-
-@keyframes typing {
-    0%, 80%, 100% {
-        opacity: 0.3;
-        transform: scale(0.8);
-    }
-    40% {
-        opacity: 1;
-        transform: scale(1);
-    }
+.message.user a {
+    color: #e0e7ff !important;
 }
-
-/* Forçar uso total da viewport */
-.gradio-container,
-.gradio-container > div,
-.gradio-container > div > div {
-    height: 100vh !important;
-    max-height: 100vh !important;
+/* Estilo para listas */
+.message ul, .message ol {
+    margin: 12px 0 !important;
+    padding-left: 20px !important;
+}
+.message li {
+    margin: 6px 0 !important;
+    line-height: 1.6 !important;
+}
+/* Estilo para tabelas */
+.message table {
+    border-collapse: collapse !important;
     width: 100% !important;
-    max-width: 100% !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    margin: 0 !important;
+    margin: 12px 0 !important;
+}
+.message th, .message td {
+    border: 1px solid #d1d5db !important;
+    padding: 8px 12px !important;
+    text-align: left !important;
+}
+.message th {
+    background: #f8fafc !important;
+    font-weight: 600 !important;
 }
 """
 
 def criar_interface():
-    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(scale=0, min_width=280, elem_classes="sidebar", elem_id="sidebar"):
-                with gr.Group():
-                    gr.HTML("""
-                    <div class='sidebar-header'>
-                        <div class='sidebar-title'>iAldo AI</div>
-                        <div class='sidebar-subtitle'>Assistant Inteligente</div>
-                    </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=DEFAULT_MODEL,
-                        label=None,
-                        show_label=False,
-                        container=False
-                    )
-
-                with gr.Accordion("ℹ️ Informações", open=False):
-                    gr.Markdown("""
-                    **Assistente do Prof. Dr. Aldo Henrique**
-                    
-                    🎯 **Especialidades:**
-                    - Programação C/C++, Java
-                    - Desenvolvimento Web
-                    - Inteligência Artificial
-                    - Algoritmos e Estruturas de Dados
-                    
-                    🌐 **Website:** [aldohenrique.com.br](https://aldohenrique.com.br)
-                    
-                    💡 **Dica:** Use Shift+Enter para quebrar linha
-                    """)
-
-            # === ÁREA PRINCIPAL ===
-            with gr.Column(scale=4, elem_classes="chat-main"):
-                # Header do Chat
-                gr.HTML("""
-                <div class='chat-header'>
-                    <button class='mobile-menu-btn' onclick='toggleSidebar()'>☰</button>
-                    <div class='chat-header-title'>Chat com Dr. Aldo</div>
-                    <div></div>
-                </div>
-                """)
-                
-                # Container das mensagens
-                with gr.Column(elem_classes="messages-container"):
+    with gr.Blocks(title="Dr. Aldo Henrique - API Externa", theme=gr.themes.Soft(), css=css_customizado) as interface:
+        session_id_state = gr.State(str(uuid.uuid4()))  # Geração do session_id único
+
+        with gr.Column(elem_classes="main-content"):
+            gr.HTML("""
+            <div class="titulo-principal">
+                <h4 style="margin: 0;">🤖 iAldo - Converse com o <a href="https://aldohenrique.com.br/" style="color: white; text-decoration: underline;">Prof. Dr. Aldo Henrique</a></h4>
+            </div>
+            """)
+
+            with gr.Column(elem_classes="chat-area"):
+                with gr.Column(elem_classes="chat-container"):
                     chatbot = gr.Chatbot(
-                        [],
-                        label="",
+                        label="💬 Área do chat",
                         elem_id="chat",
-                        show_label=False,
-                        container=False,
-                        avatar_images=(
-                            "https://api.dicebear.com/7.x/initials/svg?seed=User&backgroundColor=6366f1",
-                            "https://api.dicebear.com/7.x/bottts/svg?seed=Aldo&backgroundColor=10a37f"
-                        ),
-                        bubble_full_width=False,
                         height="100%",
-                        show_copy_button=True
+                        show_label=False,
+                        container=True,
+                        scale=1,
+                        min_width=160,
+                        visible=True,
+                        elem_classes="chatbot"
                     )
 
-                # Área de Input
-                with gr.Column(elem_classes="input-area"):
-                    with gr.Row(elem_classes="input-container"):
-                        with gr.Row(elem_classes="input-wrapper"):
-                            user_input = gr.Textbox(
-                                show_label=False,
-                                placeholder="Digite sua mensagem para o Dr. Aldo...",
-                                elem_id="entrada_usuario",
-                                container=False,
-                                scale=10,
-                                lines=1,
-                                max_lines=1
-                            )
-                            enviar_btn = gr.Button("⬆", variant="primary", elem_classes="send-button", scale=1, min_width=40)
-
-        # Overlay para mobile
-        gr.HTML('<div class="mobile-overlay" onclick="toggleSidebar()"></div>', elem_id="mobile-overlay")
+                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 Pensamento",
+                            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",
+                            max_lines=6
+                        )
+                        enviar_btn = gr.Button("Enviar", variant="primary", size="lg")
+
+        with gr.Column(elem_classes="additional-content"):
+            with gr.Accordion("⚙️ Controle do Conhecimento (RAG)", open=False):
+                status_rag = gr.Textbox(label="Status do Retreino", interactive=False)
+                botao_retreinar = gr.Button("🔄 Atualizar Conhecimento do Blog", variant="stop")
+                download_faiss_file = gr.File(label="Download do Índice FAISS", interactive=False, file_count="single", file_types=[".pkl"])
+                download_urls_file = gr.File(label="Download das URLs Processadas", interactive=False, file_count="single", file_types=[".pkl"])
+
+            with gr.Accordion("📚 Exemplos de Perguntas", open=False):
+                gr.Examples(
+                    examples=[
+                        ["Como implementar uma lista ligada em C com todas as operações básicas?", DEFAULT_MODEL],
+                        ["Qual a sua opinião sobre o uso de ponteiros em C++ moderno, baseada no seu blog?", "Mistral 7B (Mais acertivo)"],
+                        ["Resuma o que você escreveu sobre machine learning no seu blog.", "Zephyr 7B (Meio Termo)"],
+                    ],
+                    inputs=[user_input, modelo_select]
+                )
+
+            with gr.Accordion("🔧 Status da API", open=False):
+                status_api = gr.Textbox(label="Status dos Modelos", interactive=False, lines=8, 
+                                        value="Modelos carregados com sucesso! Verifique o console para detalhes.")
+
+            with gr.Accordion("ℹ️ Informações", open=False):
+                gr.Markdown("""
+                ### Sobre o Dr. Aldo Henrique:
+                - **Especialidade**: Linguagens C, Java, Desenvolvimento Web, Inteligência Artificial
+                - **Conhecimento Adicional**: Conteúdo do blog aldohenrique.com.br
+                ### Dicas para melhores respostas:
+                - Faça perguntas específicas sobre o conteúdo do blog para ver o RAG em ação!
+                - Peça resumos ou opiniões sobre temas que o professor aborda.
+                
+                ### Melhorias na Interface:
+                - **Mensagens do usuário**: Estilo moderno com gradiente azul/roxo
+                - **Respostas do bot**: Fundo claro com excelente contraste para leitura
+                - **Códigos**: Syntax highlighting com fundo escuro e fonte monospace
+                - **Responsivo**: Otimizado para desktop e mobile
+                """)
 
-        # === LÓGICA DE BACKEND (mantida intacta) ===
         def responder(chat_history, user_msg, modelo, session_id):
             if not user_msg.strip():
                 return chat_history, ""
-            
-            chat_history.append([user_msg, None])
+
+            # Adiciona a mensagem do usuário ao histórico
+            chat_history = chat_history + [[user_msg, "🤖 Dr. Aldo Henrique está digitando..."]]
             yield chat_history, ""
 
             try:
-                resposta_stream = responder_como_aldo(session_id, user_msg, modelo)
+                # 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, ""
                 
-                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)}"
+                # Em caso de erro, mostra uma mensagem amigável
+                chat_history[-1][1] = f"❌ Desculpe, ocorreu um erro ao processar sua mensagem: {str(e)}"
                 yield chat_history, ""
 
-        def limpar_chat():
-            return [], str(uuid.uuid4())
-
-        # === EVENTOS (mantidos intactos) ===
-        user_input.submit(
+        # Eventos de clique e submit
+        enviar_btn.click(
             fn=responder,
             inputs=[chatbot, user_input, modelo_select, session_id_state],
-            outputs=[chatbot, user_input]
+            outputs=[chatbot, user_input],
+            show_progress=True
         )
-        
-        enviar_btn.click(
+
+        user_input.submit(
             fn=responder,
             inputs=[chatbot, user_input, modelo_select, session_id_state],
-            outputs=[chatbot, user_input]
-        )
-        
-        novo_chat_btn.click(
-            fn=limpar_chat,
-            inputs=[],
-            outputs=[chatbot, session_id_state]
+            outputs=[chatbot, user_input],
+            show_progress=True
         )
 
-        # === JAVASCRIPT APRIMORADO ===
-        interface.load(
-            None,
-            None,
-            None,
-            js="""
-            () => {
-                // Função para toggle da sidebar no mobile
-                window.toggleSidebar = function() {
-                    const sidebar = document.getElementById('sidebar');
-                    const overlay = document.getElementById('mobile-overlay');
-                    
-                    if (sidebar && overlay) {
-                        sidebar.classList.toggle('open');
-                        overlay.classList.toggle('show');
-                    }
-                }
-
-                // Scroll automático para o final do chat
-                function scrollChatToBottom() {
-                    const chatContainer = document.querySelector('.messages-container');
-                    if (chatContainer) {
-                        chatContainer.scrollTo({
-                            top: chatContainer.scrollHeight,
-                            behavior: 'smooth'
-                        });
-                    }
-                }
-
-                // Observer para novas mensagens
-                const observer = new MutationObserver((mutations) => {
-                    let shouldScroll = false;
-                    mutations.forEach(mutation => {
-                        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
-                            shouldScroll = true;
-                        }
-                    });
-                    if (shouldScroll) {
-                        setTimeout(scrollChatToBottom, 100);
-                    }
-                });
-                
-                const chatElement = document.getElementById('chat');
-                if (chatElement) {
-                    observer.observe(chatElement, { 
-                        childList: true, 
-                        subtree: true,
-                        attributes: true,
-                        attributeFilter: ['class']
-                    });
-                }
+        botao_retreinar.click(
+            fn=build_and_save_vector_store,
+            outputs=[status_rag, download_faiss_file, download_urls_file],
+            show_progress=True
+        )
 
-                // Gerenciamento do input
-                const userInput = document.getElementById('entrada_usuario');
-                if (userInput) {
-                    const textarea = userInput.querySelector('textarea');
-                    if (textarea) {
-                        // Envio com Enter (Shift+Enter para nova linha)
-                        textarea.addEventListener('keydown', (e) => {
-                            if (e.key === 'Enter' && !e.shiftKey) {
-                                e.preventDefault();
-                                const sendButton = document.querySelector('.send-button');
-                                if (sendButton && textarea.value.trim()) {
-                                    sendButton.click();
-                                }
-                            }
+        # Script para focar no input ao carregar a página
+        gr.HTML("""
+        <script>
+            window.addEventListener("load", function() {
+                const textarea = document.querySelector("#entrada_usuario textarea");
+                if (textarea) {
+                    setTimeout(() => {
+                        textarea.focus();
+                        // Adiciona evento para redimensionar automaticamente
+                        textarea.addEventListener('input', function() {
+                            this.style.height = 'auto';
+                            this.style.height = this.scrollHeight + 'px';
                         });
-                        
-                        // Foco inicial
-                        setTimeout(() => textarea.focus(), 500);
-                    }
-                }
-
-                // Fechar sidebar ao clicar fora (mobile)
-                document.addEventListener('click', (e) => {
-                    if (window.innerWidth <= 768) {
-                        const sidebar = document.getElementById('sidebar');
-                        const menuBtn = document.querySelector('.mobile-menu-btn');
-                        
-                        if (sidebar && sidebar.classList.contains('open') && 
-                            !sidebar.contains(e.target) && 
-                            !menuBtn.contains(e.target)) {
-                            toggleSidebar();
-                        }
-                    }
-                });
-
-                // Gerenciar responsividade
-                function handleResize() {
-                    if (window.innerWidth > 768) {
-                        const sidebar = document.getElementById('sidebar');
-                        const overlay = document.getElementById('mobile-overlay');
-                        if (sidebar) sidebar.classList.remove('open');
-                        if (overlay) overlay.classList.remove('show');
-                    }
+                    }, 100);
                 }
-
-                window.addEventListener('resize', handleResize);
-                
-                // Scroll inicial e foco
-                setTimeout(() => {
-                    scrollChatToBottom();
-                    const textarea = document.querySelector('#entrada_usuario textarea');
-                    if (textarea) textarea.focus();
-                }, 1000);
-
-                console.log('🚀 iAldo AI Interface carregada com sucesso!');
-            }
-            """
-        )
+            });
+        </script>
+        """)
 
     return interface
 
-# === CÓDIGO DE INICIALIZAÇÃO (mantido intacto) ===
-def inicializar_sistema_sync():
-    """Função síncrona para compatibilidade"""
-    try:
-        import asyncio
-        try:
-            loop = asyncio.get_event_loop()
-            if loop.is_running():
-                import concurrent.futures
-                with concurrent.futures.ThreadPoolExecutor() as executor:
-                    future = executor.submit(lambda: asyncio.run(inicializar_sistema()))
-                    return future.result()
-            else:
-                return loop.run_until_complete(inicializar_sistema())
-        except RuntimeError:
-            return asyncio.run(inicializar_sistema())
-    except Exception as e:
-        print(f"Erro na inicialização: {e}")
-        return False, {}    
-
 def configurar_interface():
     """
-    Configura a interface Gradio apenas se o sistema for inicializado com sucesso.
+    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:
-            error_msg = f"Sistema não inicializado: Modelos indisponíveis. Modelos: {', '.join(available_models.keys()) if available_models else 'Nenhum'}"
+            error_msg = f"Não foi possível inicializar o sistema: menos de 3 modelos de IA disponíveis. Modelos disponíveis: {', '.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}")
@@ -969,5 +430,5 @@ if __name__ == "__main__":
             show_error=True
         )
     except Exception as e:
-        print(f"Erro ao iniciar a aplicação: {e} ")
+        print(f"Erro ao iniciar a aplicação: {e}")
         exit(1)