Update interface.py

interface.py

@@ -1,4 +1,3 @@
-
 import gradio as gr
 import uuid
 from ai_logic import (
@@ -10,189 +9,427 @@ from ai_logic import (
 )
 
 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;
+}
+
 .gradio-container {
-    max-width: 1400px !important;
-    margin: 0 auto;
-    width: 99%;
-    height: 100vh !important;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+    background: #0f0f23 !important;
+    min-height: 100vh !important;
+    max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
 }
-.main-content {
+
+/* Layout principal estilo ChatGPT */
+.main-container {
     display: flex;
-    flex-direction: column;
     height: 100vh;
-    overflow: hidden;
+    background: #0f0f23;
+}
+
+/* Sidebar lateral */
+.sidebar {
+    width: 260px;
+    background: #171717;
+    border-right: 1px solid #2d2d2d;
+    padding: 16px;
+    overflow-y: auto;
     flex-shrink: 0;
 }
-.titulo-principal {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !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;
-    padding: 10px !important;
-    border-radius: 10px !important;
-    margin-bottom: 10px !important;
-    text-align: center !important;
-    flex-shrink: 0;
+    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;
 }
-.chat-area {
+
+/* Área principal do chat */
+.chat-main {
     flex: 1;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
-}
-.chat-container {
-    flex: 1;
-    overflow-y: auto;
-    margin-bottom: 10px;
+    background: #0f0f23;
+    position: relative;
 }
-.input-container {
-    flex-shrink: 0;
-    padding: 10px 0;
+
+/* Header do chat */
+.chat-header {
+    background: #171717;
+    border-bottom: 1px solid #2d2d2d;
+    padding: 12px 24px;
     display: flex;
-    flex-direction: column;
+    align-items: center;
     justify-content: center;
+    position: relative;
+    z-index: 10;
+}
+
+.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;
 }
-.additional-content {
+
+/* Área de mensagens */
+.messages-container {
+    flex: 1;
     overflow-y: auto;
-    padding-top: 20px;
+    padding: 0;
+    background: #0f0f23;
+    scroll-behavior: smooth;
 }
-/* Estilos para o chat - Melhorias na legibilidade */
+
 .chatbot {
+    background: transparent !important;
+    border: none !important;
     height: 100% !important;
     max-height: none !important;
+    padding: 0 !important;
+}
+
+/* Estilo das mensagens - similar ao ChatGPT */
+.message {
+    width: 100%;
+    padding: 24px 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;
 }
-/* Mensagens do usuário */
+
+.message-text {
+    flex: 1;
+    line-height: 1.7;
+    font-size: 16px;
+    color: #ffffff;
+}
+
 .message.user {
-    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
-    color: white !important;
-    border-radius: 18px 18px 6px 18px !important;
-    padding: 12px 16px !important;
-    margin: 8px 0 !important;
-    font-size: 15px !important;
+    background: rgba(16, 163, 127, 0.05);
+}
+
+.message.assistant {
+    background: rgba(84, 54, 218, 0.05);
+}
+
+/* Área de input inferior */
+.input-area {
+    background: #0f0f23;
+    padding: 24px;
+    border-top: 1px solid #2d2d2d;
+}
+
+.input-container {
+    max-width: 768px;
+    margin: 0 auto;
+    position: relative;
+}
+
+.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;
+}
+
+.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;
-    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
+    resize: none !important;
+    outline: none !important;
+    min-height: 24px !important;
+    max-height: 200px !important;
+    padding: 0 !important;
+    margin: 0 !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;
 }
-/* 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;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+
+.send-button:hover:not(:disabled) {
+    background: #0d8f6e !important;
+}
+
+.send-button:disabled {
+    background: #4d4d4d !important;
+    cursor: not-allowed !important;
+}
+
+/* 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;
 }
-/* Estilização para código dentro das mensagens */
+
+.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: #1e293b !important;
-    color: #e2e8f0 !important;
+    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: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
     font-size: 14px !important;
     line-height: 1.5 !important;
-    border: 1px solid #374151 !important;
 }
+
 .message code {
-    background: #e2e8f0 !important;
-    color: #1e293b !important;
+    background: rgba(255, 255, 255, 0.1) !important;
     padding: 2px 6px !important;
     border-radius: 4px !important;
-    font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
-    font-size: 13px !important;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
+    font-size: 14px !important;
 }
-/* Código inline dentro de pre */
+
 .message pre code {
     background: transparent !important;
-    color: #e2e8f0 !important;
     padding: 0 !important;
-    border-radius: 0 !important;
 }
-/* Estilos específicos do Gradio para chatbot */
-.chatbot .message-wrap {
-    margin: 8px 0 !important;
+
+/* Links */
+.message a {
+    color: #10a37f !important;
+    text-decoration: none !important;
 }
-.chatbot .message-wrap.user {
-    justify-content: flex-end !important;
+
+.message a:hover {
+    text-decoration: underline !important;
 }
-.chatbot .message-wrap.bot {
-    justify-content: flex-start !important;
+
+/* Listas */
+.message ul, .message ol {
+    margin: 12px 0 !important;
+    padding-left: 24px !important;
 }
-/* Melhorias na área de input */
-#entrada_usuario textarea {
-    background: linear-gradient(135deg, #1e293b 0%, #374151 100%) !important;
-    color: white !important;
-    font-size: 15px !important;
-    line-height: 1.5 !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;
+
+.message li {
+    margin: 6px 0 !important;
+    line-height: 1.6 !important;
 }
-#entrada_usuario textarea:focus {
-    border-color: #4f46e5 !important;
-    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !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;
 }
-#entrada_usuario textarea::placeholder {
-    color: #9ca3af !important;
+
+.message th, .message td {
+    border: 1px solid #3e3e3e !important;
+    padding: 12px !important;
+    text-align: left !important;
 }
-/* Botão de enviar */
-.gradio-button.primary {
-    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 12px 24px !important;
+
+.message th {
+    background: rgba(255, 255, 255, 0.1) !important;
     font-weight: 600 !important;
-    font-size: 15px !important;
-    transition: all 0.2s ease !important;
 }
-.gradio-button.primary:hover {
-    transform: translateY(-1px) !important;
-    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4) !important;
+
+/* Scrollbar personalizada */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
-/* Dropdown do modelo */
-.modelo-dropdown {
-    margin-bottom: 15px !important;
+
+::-webkit-scrollbar-track {
+    background: #1a1a1a;
 }
-.modelo-dropdown .gr-dropdown {
-    border-radius: 8px !important;
-    border: 1px solid #d1d5db !important;
+
+::-webkit-scrollbar-thumb {
+    background: #4d4d4d;
+    border-radius: 4px;
 }
-/* Responsividade melhorada */
+
+::-webkit-scrollbar-thumb:hover {
+    background: #6d6d6d;
+}
+
+/* Responsive */
 @media (max-width: 768px) {
-    .titulo-principal {
-        padding: 8px !important;
-        font-size: 14px !important;
+    .main-container {
+        flex-direction: column;
     }
     
-    #entrada_usuario textarea {
-        min-height: 50px !important;
-        font-size: 16px !important;
+    .sidebar {
+        width: 100%;
+        height: auto;
+        border-right: none;
+        border-bottom: 1px solid #2d2d2d;
     }
     
-    .message.user,
-    .message.bot {
-        font-size: 14px !important;
-        padding: 10px 14px !important;
+    .message-content {
+        padding: 0 16px;
+        gap: 12px;
     }
     
-    .message pre {
-        font-size: 12px !important;
-        padding: 12px !important;
+    .message-avatar {
+        width: 28px;
+        height: 28px;
+        font-size: 14px;
+    }
+    
+    .input-area {
+        padding: 16px;
+    }
+    
+    .message-text {
+        font-size: 15px;
     }
 }
-/* Animações suaves */
+
+/* Animações */
 .message {
-    animation: fadeInUp 0.3s ease-out !important;
+    animation: fadeIn 0.3s ease-out;
 }
-@keyframes fadeInUp {
+
+@keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
@@ -202,151 +439,226 @@ css_customizado = """
         transform: translateY(0);
     }
 }
-/* Melhorias gerais na tipografia */
-.chatbot {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif !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;
 }
-/* Scroll personalizado para o chat */
-.chat-container::-webkit-scrollbar {
-    width: 6px;
+
+.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;
+    }
+    40% {
+        opacity: 1;
+    }
 }
-.chat-container::-webkit-scrollbar-track {
-    background: #f1f5f9;
-    border-radius: 3px;
+
+/* Ocultar elementos desnecessários do Gradio */
+.gr-button-lg {
+    display: none !important;
 }
-.chat-container::-webkit-scrollbar-thumb {
-    background: #cbd5e1;
-    border-radius: 3px;
+
+/* Customizar os componentes específicos */
+.gr-textbox {
+    background: transparent !important;
+    border: none !important;
 }
-.chat-container::-webkit-scrollbar-thumb:hover {
-    background: #94a3b8;
+
+.gr-dropdown {
+    background: #2d2d2d !important;
+    border: 1px solid #4d4d4d !important;
+    border-radius: 8px !important;
+    color: #ffffff !important;
 }
-/* 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;
+
+/* 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;
 }
-/* Estilo para links */
-.message a {
-    color: #4f46e5 !important;
-    text-decoration: underline !important;
+
+.control-button:hover {
+    background: #3d3d3d !important;
+    border-color: #6d6d6d !important;
 }
-.message.user a {
-    color: #e0e7ff !important;
+
+.control-button.primary {
+    background: #10a37f !important;
+    border-color: #10a37f !important;
 }
-/* Estilo para listas */
-.message ul, .message ol {
-    margin: 12px 0 !important;
-    padding-left: 20px !important;
+
+.control-button.primary:hover {
+    background: #0d8f6e !important;
 }
-.message li {
-    margin: 6px 0 !important;
-    line-height: 1.6 !important;
+
+/* Status indicators */
+.status-indicator {
+    font-size: 12px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-weight: 500;
 }
-/* Estilo para tabelas */
-.message table {
-    border-collapse: collapse !important;
-    width: 100% !important;
-    margin: 12px 0 !important;
+
+.status-success {
+    background: rgba(16, 163, 127, 0.2);
+    color: #10a37f;
+    border: 1px solid rgba(16, 163, 127, 0.3);
 }
-.message th, .message td {
-    border: 1px solid #d1d5db !important;
-    padding: 8px 12px !important;
-    text-align: left !important;
+
+.status-error {
+    background: rgba(239, 68, 68, 0.2);
+    color: #ef4444;
+    border: 1px solid rgba(239, 68, 68, 0.3);
 }
-.message th {
-    background: #f8fafc !important;
-    font-weight: 600 !important;
+
+.status-warning {
+    background: rgba(245, 158, 11, 0.2);
+    color: #f59e0b;
+    border: 1px solid rgba(245, 158, 11, 0.3);
 }
 """
 
 def criar_interface():
-    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"):
+    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.Row(elem_classes="main-container"):
+            # Sidebar esquerda
+            with gr.Column(elem_classes="sidebar", scale=0, min_width=260):
+                gr.HTML("""
+                <div class="sidebar-header">
+                    <h2 style="color: #10a37f; font-size: 18px; font-weight: 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>')
+                    modelo_select = gr.Dropdown(
+                        choices=list(MODELS.keys()),
+                        value=DEFAULT_MODEL,
+                        label="",
+                        show_label=False,
+                        elem_classes="model-selector",
+                        container=False
+                    )
+
+                # Controles RAG
+                with gr.Accordion("⚙️ Conhecimento (RAG)", open=False, elem_classes="sidebar-section"):
+                    status_rag = gr.Textbox(label="Status", interactive=False, show_label=False, 
+                                          placeholder="Status do retreino...")
+                    botao_retreinar = gr.Button("🔄 Atualizar", elem_classes="control-button primary", size="sm")
+                    download_faiss_file = gr.File(label="📁 Índice FAISS", interactive=False, 
+                                                file_count="single", file_types=[".pkl"])
+                    download_urls_file = gr.File(label="📁 URLs", interactive=False, 
+                                               file_count="single", file_types=[".pkl"])
+
+                # Exemplos
+                with gr.Accordion("💡 Exemplos", open=False, elem_classes="sidebar-section"):
+                    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?", "Mistral 7B (Mais acertivo)"],
+                            ["Resuma o que você escreveu sobre machine learning no seu blog.", "Zephyr 7B (Meio Termo)"],
+                        ],
+                        inputs=[gr.Textbox(visible=False), modelo_select],
+                        label=""
+                    )
+
+                # 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"):
+                    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
+                    """)
+
+            # Á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>
+                </div>
+                """)
+
+                # Área de mensagens
+                with gr.Column(elem_classes="messages-container"):
                     chatbot = gr.Chatbot(
-                        label="💬 Área do chat",
+                        label="",
                         elem_id="chat",
-                        height="100%",
+                        height="calc(100vh - 200px)",
                         show_label=False,
-                        container=True,
-                        scale=1,
-                        min_width=160,
-                        visible=True,
-                        elem_classes="chatbot"
+                        container=False,
+                        elem_classes="chatbot",
+                        avatar_images=("👤", "🤖"),
+                        bubble_full_width=False
                     )
 
-                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
-                """)
+                # Á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):
+                            user_input = gr.Textbox(
+                                show_label=False,
+                                placeholder="Digite sua mensagem aqui...",
+                                lines=1,
+                                elem_id="entrada_usuario",
+                                max_lines=10,
+                                container=False,
+                                scale=1
+                            )
+                            # Botão de envio oculto (será substituído por JavaScript)
+                            enviar_btn = gr.Button("➤", variant="primary", size="sm", 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 Henrique está digitando..."]]
+            chat_history = chat_history + [[user_msg, "🤔 Dr. Aldo está pensando..."]]
             yield chat_history, ""
 
             try:
@@ -359,22 +671,22 @@ def criar_interface():
                 
             except Exception as 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)}"
+                chat_history[-1][1] = f"❌ Desculpe, ocorreu um erro: {str(e)}"
                 yield chat_history, ""
 
-        # Eventos de clique e submit
+        # Eventos
         enviar_btn.click(
             fn=responder,
             inputs=[chatbot, user_input, modelo_select, session_id_state],
             outputs=[chatbot, user_input],
-            show_progress=True
+            show_progress=False
         )
 
         user_input.submit(
             fn=responder,
             inputs=[chatbot, user_input, modelo_select, session_id_state],
             outputs=[chatbot, user_input],
-            show_progress=True
+            show_progress=False
         )
 
         botao_retreinar.click(
@@ -383,22 +695,39 @@ def criar_interface():
             show_progress=True
         )
 
-        # Script para focar no input ao carregar a página
+        # JavaScript para melhorar a UX
         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';
-                        });
-                    }, 100);
-                }
-            });
+        // Auto-resize textarea
+        function setupAutoResize() {
+            const textarea = document.querySelector("#entrada_usuario textarea");
+            if (textarea) {
+                textarea.style.minHeight = "24px";
+                textarea.addEventListener('input', function() {
+                    this.style.height = 'auto';
+                    const newHeight = Math.min(this.scrollHeight, 200);
+                    this.style.height = newHeight + 'px';
+                });
+                
+                // Focus on load
+                setTimeout(() => textarea.focus(), 100);
+            }
+        }
+
+        // Scroll to bottom when new message is added
+        function scrollToBottom() {
+            const chatContainer = document.querySelector(".chatbot");
+            if (chatContainer) {
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }
+        }
+
+        // Initialize when page loads
+        document.addEventListener("DOMContentLoaded", setupAutoResize);
+        window.addEventListener("load", setupAutoResize);
+
+        // Re-setup after Gradio updates
+        setInterval(setupAutoResize, 1000);
         </script>
         """)
 
@@ -407,14 +736,24 @@ def criar_interface():
 def inicializar_sistema_sync():
     """Função síncrona para compatibilidade"""
     try:
-        loop = asyncio.get_event_loop()
-        if loop.is_running():
-            import concurrent.futures
-            with concurrent.futures.ThreadPoolExecutor() as executor:
-                future = executor.submit(asyncio.run, inicializar_sistema_sync()) # Erro: chama a si mesma
-                return future.result()
-        else:
-            return loop.run_until_complete(inicializar_sistema_sync()) # Erro: chama a si mesma
+        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, {}    
@@ -429,7 +768,7 @@ def configurar_interface():
         if status:
             return criar_interface()
         else:
-            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'}"
+            error_msg = f"Sistema não inicializado: menos de 3 modelos disponí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}")
@@ -447,4 +786,4 @@ if __name__ == "__main__":
         )
     except Exception as e:
         print(f"Erro ao iniciar a aplicação: {e}")
-        exit(1)
+        exit(1)