feat: aprendizado contínuo, presets temperatura e tabs na configuração

- Sistema de aprendizado contínuo: [KNOWLEDGE: ...] no system prompt
- 3 presets de temperatura: Técnico(0.2), Equilibrado(0.6), Detalhista(1.0)
- Tabs na configuração: Identidade, Estilo, Conhecimento
- CRUD de conhecimento adquirido (lista + adicionar manual)
- knowledge_adquirido.json persistido no servidor
- GET/POST/DELETE /api/conhecimento + POST /api/conhecimento/extrair
- CSS: modal grande, tabs, opções temperatura, lista conhecimento

public/app.js

@@ -107,13 +107,26 @@ const initApp = () => {
   const welcomeTitle = document.getElementById('welcomeTitle');
   const welcomeAvatarImg = document.getElementById('welcomeAvatarImg');
   const sidebarAvatarImg = document.getElementById('sidebarAvatarImg');
+  const temperatureOptions = document.getElementById('temperatureOptions');
+  const knowledgeList = document.getElementById('knowledgeList');
+  const manualKnowledgeInput = document.getElementById('manualKnowledgeInput');
+  const btnAddKnowledge = document.getElementById('btnAddKnowledge');
 
   window.agentConfig = {
     agentName: "Kemily",
     kemilyAvatarUrl: "assets/kemily.png",
-    camilaAvatarUrl: "assets/camila_prof.png"
+    camilaAvatarUrl: "assets/camila_prof.png",
+    temperaturePreset: 'equilibrado'
   };
 
+  window.temperaturePresets = {
+    tecnico: { value: 0.2, label: 'Técnico e Direto', description: 'Respostas curtas, objetivas, sem rodeios. Ideal para quando precisa só do essencial.' },
+    equilibrado: { value: 0.6, label: 'Equilibrado', description: 'Bom para uso geral — nem muito curto, nem muito longo.' },
+    detalhista: { value: 1.0, label: 'Detalhista e Falante', description: 'Respostas extensas, explicações completas, contextualização máxima. Ideal para estudo e revisão.' }
+  };
+
+  window.conhecimento = { facts: [], lastUpdated: null };
+
   // Carrega as configurações do servidor
   const loadAgentConfig = async () => {
     try {
@@ -146,6 +159,125 @@ const initApp = () => {
     if (previewCamilaAvatar) {
       previewCamilaAvatar.src = window.agentConfig.camilaAvatarUrl;
     }
+    // Atualiza seleção de temperatura
+    renderTemperatureOptions();
+  };
+
+  // Carregar presets de temperatura do servidor
+  const loadTemperaturePresets = async () => {
+    try {
+      const res = await fetch('/api/temperature-presets');
+      if (res.ok) {
+        window.temperaturePresets = await res.json();
+        renderTemperatureOptions();
+      }
+    } catch (e) {
+      console.error('Erro ao carregar presets de temperatura:', e);
+    }
+  };
+
+  // Renderizar opções de temperatura
+  const renderTemperatureOptions = () => {
+    if (!temperatureOptions) return;
+    const preset = window.agentConfig.temperaturePreset || 'equilibrado';
+    temperatureOptions.innerHTML = Object.entries(window.temperaturePresets).map(([key, t]) => `
+      <label class="temperature-option ${preset === key ? 'selected' : ''}" data-preset="${key}">
+        <input type="radio" name="temperature" value="${key}" ${preset === key ? 'checked' : ''}>
+        <div class="temperature-option-content">
+          <strong>${t.label}</strong>
+          <span>${t.description}</span>
+        </div>
+      </label>
+    `).join('');
+
+    // Event listeners para as opções
+    temperatureOptions.querySelectorAll('.temperature-option').forEach(opt => {
+      opt.addEventListener('click', () => {
+        temperatureOptions.querySelectorAll('.temperature-option').forEach(o => o.classList.remove('selected'));
+        opt.classList.add('selected');
+        opt.querySelector('input').checked = true;
+      });
+    });
+  };
+
+  // Carregar conhecimento do servidor
+  const loadConhecimento = async () => {
+    try {
+      const res = await fetch('/api/conhecimento');
+      if (res.ok) {
+        window.conhecimento = await res.json();
+        renderKnowledgeList();
+      }
+    } catch (e) {
+      console.error('Erro ao carregar conhecimento:', e);
+    }
+  };
+
+  // Renderizar lista de conhecimento
+  const renderKnowledgeList = () => {
+    if (!knowledgeList) return;
+    if (!window.conhecimento.facts || window.conhecimento.facts.length === 0) {
+      knowledgeList.innerHTML = '<p style="color: var(--text-muted); text-align: center; padding: 20px;">Nenhum conhecimento aprendido ainda. A assistente aprende automaticamente quando você ensinar algo novo!</p>';
+      return;
+    }
+    knowledgeList.innerHTML = window.conhecimento.facts.map(f => `
+      <div class="knowledge-item" data-id="${f.id}">
+        <div class="knowledge-item-content">
+          <span class="knowledge-source">${f.source}</span>
+          <p>${f.content}</p>
+          <small>${new Date(f.addedAt).toLocaleDateString('pt-BR')}</small>
+        </div>
+        <button class="knowledge-delete-btn" onclick="deleteKnowledge(${f.id})">×</button>
+      </div>
+    `).join('');
+  };
+
+  // Deletar item de conhecimento (função global para onclick)
+  window.deleteKnowledge = async (id) => {
+    try {
+      const res = await fetch(`/api/conhecimento/${id}`, { method: 'DELETE' });
+      if (res.ok) {
+        window.conhecimento.facts = window.conhecimento.facts.filter(f => f.id !== id);
+        renderKnowledgeList();
+      }
+    } catch (e) {
+      console.error('Erro ao deletar conhecimento:', e);
+    }
+  };
+
+  // Adicionar conhecimento manualmente
+  if (btnAddKnowledge) {
+    btnAddKnowledge.addEventListener('click', async () => {
+      const input = manualKnowledgeInput?.value.trim();
+      if (!input) return;
+      try {
+        const res = await fetch('/api/conhecimento', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ fact: input, source: 'manual' })
+        });
+        if (res.ok) {
+          manualKnowledgeInput.value = '';
+          await loadConhecimento();
+        }
+      } catch (e) {
+        console.error('Erro ao adicionar conhecimento:', e);
+      }
+    });
+  }
+
+  // Função para extrair knowledge tags da resposta da IA e enviar ao servidor
+  window.extractAndSaveKnowledge = async (assistantMessage) => {
+    if (!assistantMessage || !assistantMessage.includes('[KNOWLEDGE:')) return;
+    try {
+      await fetch('/api/conhecimento/extrair', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: assistantMessage })
+      });
+    } catch (e) {
+      console.error('Erro ao extrair conhecimento:', e);
+    }
   };
 
   // Variáveis temporárias para avatares (em base64 ou URLs novas)
@@ -160,6 +292,8 @@ const initApp = () => {
       if (settingAgentName) settingAgentName.value = window.agentConfig.agentName;
       if (previewKemilyAvatar) previewKemilyAvatar.src = window.agentConfig.kemilyAvatarUrl;
       if (previewCamilaAvatar) previewCamilaAvatar.src = window.agentConfig.camilaAvatarUrl;
+      renderTemperatureOptions();
+      loadConhecimento();
       settingsModal.style.display = 'flex';
     });
   }
@@ -170,6 +304,18 @@ const initApp = () => {
     });
   }
 
+  // Tab switching logic
+  document.querySelectorAll('.settings-tab').forEach(tab => {
+    tab.addEventListener('click', () => {
+      document.querySelectorAll('.settings-tab').forEach(t => t.classList.remove('active'));
+      document.querySelectorAll('.settings-tab-content').forEach(c => c.classList.remove('active'));
+      tab.classList.add('active');
+      const targetId = tab.dataset.tab;
+      const targetContent = document.getElementById(targetId);
+      if (targetContent) targetContent.classList.add('active');
+    });
+  });
+
   // Fechar clicando fora do modal-content
   if (settingsModal) {
     settingsModal.addEventListener('click', (e) => {
@@ -244,13 +390,15 @@ const initApp = () => {
         }
 
         // Envia as configurações gerais
+        const selectedTempPreset = temperatureOptions?.querySelector('input[name="temperature"]:checked')?.value || 'equilibrado';
         const resConfig = await fetch('/api/agent-config', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
             agentName: settingAgentName.value,
             kemilyAvatarUrl: kemilyUrl,
-            camilaAvatarUrl: camilaUrl
+            camilaAvatarUrl: camilaUrl,
+            temperaturePreset: selectedTempPreset
           })
         });
 
@@ -1646,6 +1794,9 @@ const initApp = () => {
         });
       }
 
+      // Extrair e salvar conhecimento aprendido (tags [KNOWLEDGE: ...])
+      window.extractAndSaveKnowledge(assistantContent);
+
       // Adicionar botões de ação (Copiar, Regenerar, Ouvir) após o streaming
       const escapedContent = escapeHtml(assistantContent).replace(/"/g, '&quot;');
       const actionsDiv = document.createElement('div');

public/index.html

@@ -249,32 +249,73 @@
 
   <!-- Modal de Configurações do Agente -->
   <div id="settingsModal" class="settings-modal" style="display: none;">
-    <div class="settings-modal-content">
+    <div class="settings-modal-content settings-modal-large">
       <div class="settings-modal-header">
         <h3>Configurações da Assistente</h3>
         <button id="closeSettingsModal" class="close-settings-btn">&times;</button>
       </div>
+      
+      <!-- Tabs de navegação -->
+      <div class="settings-tabs">
+        <button class="settings-tab active" data-tab="tabIdentidade">👤 Identidade</button>
+        <button class="settings-tab" data-tab="tabEstilo">🎯 Estilo</button>
+        <button class="settings-tab" data-tab="tabConhecimento">📚 Conhecimento</button>
+      </div>
+      
       <div class="settings-modal-body">
-        <div class="settings-group">
-          <label for="settingAgentName">Nome da Assistente</label>
-          <input type="text" id="settingAgentName" placeholder="Ex: Kemily">
-        </div>
-        
-        <div class="settings-group">
-          <label>Avatar da Assistente</label>
-          <div class="avatar-preview-container">
-            <img id="previewKemilyAvatar" src="assets/kemily.png" alt="Kemily Preview" class="preview-avatar-img">
-            <input type="file" id="uploadKemilyAvatar" accept="image/*" style="display: none;">
-            <button type="button" class="btn-change-avatar" onclick="document.getElementById('uploadKemilyAvatar').click()">Escolher Imagem</button>
+        <!-- Tab: Identidade -->
+        <div id="tabIdentidade" class="settings-tab-content active">
+          <div class="settings-group">
+            <label for="settingAgentName">Nome da Assistente</label>
+            <input type="text" id="settingAgentName" placeholder="Ex: Kemily">
+            <small style="color: var(--text-muted); margin-top: 4px; display: block;">Nome que aparece para a Camila na conversa</small>
+          </div>
+          
+          <div class="settings-group">
+            <label>Avatar da Assistente</label>
+            <div class="avatar-preview-container">
+              <img id="previewKemilyAvatar" src="assets/kemily.png" alt="Assistante Preview" class="preview-avatar-img">
+              <input type="file" id="uploadKemilyAvatar" accept="image/*" style="display: none;">
+              <button type="button" class="btn-change-avatar" onclick="document.getElementById('uploadKemilyAvatar').click()">Escolher Imagem</button>
+            </div>
+          </div>
+
+          <div class="settings-group">
+            <label>Avatar da Camila (Usuária)</label>
+            <div class="avatar-preview-container">
+              <img id="previewCamilaAvatar" src="assets/camila_prof.png" alt="Camila Preview" class="preview-avatar-img">
+              <input type="file" id="uploadCamilaAvatar" accept="image/*" style="display: none;">
+              <button type="button" class="btn-change-avatar" onclick="document.getElementById('uploadCamilaAvatar').click()">Escolher Imagem</button>
+            </div>
           </div>
         </div>
-
-        <div class="settings-group">
-          <label>Avatar da Camila (Usuária)</label>
-          <div class="avatar-preview-container">
-            <img id="previewCamilaAvatar" src="assets/camila_prof.png" alt="Camila Preview" class="preview-avatar-img">
-            <input type="file" id="uploadCamilaAvatar" accept="image/*" style="display: none;">
-            <button type="button" class="btn-change-avatar" onclick="document.getElementById('uploadCamilaAvatar').click()">Escolher Imagem</button>
+        
+        <!-- Tab: Estilo -->
+        <div id="tabEstilo" class="settings-tab-content">
+          <div class="settings-group">
+            <label>Modo de Resposta da IA</label>
+            <p style="color: var(--text-muted); margin-bottom: 16px; font-size: 13px;">Controla como a assistente se comporta nas respostas — mais técnica ou mais detalhista</p>
+            
+            <div class="temperature-options" id="temperatureOptions">
+              <!-- Opções preenchidas via JS -->
+            </div>
+          </div>
+        </div>
+        
+        <!-- Tab: Conhecimento -->
+        <div id="tabConhecimento" class="settings-tab-content">
+          <div class="settings-group">
+            <label>📖 Conhecimento Adquirido</label>
+            <p style="color: var(--text-muted); margin-bottom: 16px; font-size: 13px;">Informações que a assistente aprendeu com você ao longo das conversas. Você pode revisar e remover o que não for mais válido.</p>
+            
+            <div id="knowledgeList" class="knowledge-list" style="max-height: 300px; overflow-y: auto; margin-bottom: 16px;">
+              <!-- Lista de fatos preenchida via JS -->
+            </div>
+            
+            <div style="display: flex; gap: 8px; align-items: center;">
+              <input type="text" id="manualKnowledgeInput" placeholder="Adicionar conhecimento manualmente..." style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text);">
+              <button type="button" id="btnAddKnowledge" class="btn-save-settings" style="padding: 10px 16px;">+ Adicionar</button>
+            </div>
           </div>
         </div>
       </div>

public/style.css

@@ -2377,6 +2377,162 @@ code {
   opacity: 0.9;
 }
 
+/* Modal de Configurações - Tamanho grande para abas */
+.settings-modal-large .settings-modal-content {
+  max-width: 680px;
+  max-height: 85vh;
+}
+
+/* Tabs de navegação */
+.settings-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 12px 20px 0;
+  border-bottom: 1px solid var(--border-light, #262626);
+}
+
+.settings-tab {
+  padding: 10px 16px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary, #a3a3a3);
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 8px 8px 0 0;
+  transition: all 0.2s;
+}
+
+.settings-tab:hover {
+  color: var(--text-primary, #ffffff);
+  background: rgba(255,255,255,0.05);
+}
+
+.settings-tab.active {
+  color: var(--brand-green, #10a37f);
+  background: rgba(16, 163, 127, 0.1);
+  border-bottom: 2px solid var(--brand-green, #10a37f);
+}
+
+/* Tab content */
+.settings-tab-content {
+  display: none;
+  padding: 20px 0;
+}
+
+.settings-tab-content.active {
+  display: block;
+}
+
+/* Opções de temperatura */
+.temperature-options {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.temperature-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 1px solid var(--border-light, #262626);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: var(--bg-secondary, #1a1a1a);
+}
+
+.temperature-option:hover {
+  border-color: var(--brand-green, #10a37f);
+  background: rgba(16, 163, 127, 0.05);
+}
+
+.temperature-option.selected {
+  border-color: var(--brand-green, #10a37f);
+  background: rgba(16, 163, 127, 0.1);
+}
+
+.temperature-option input[type="radio"] {
+  margin-top: 4px;
+  accent-color: var(--brand-green, #10a37f);
+}
+
+.temperature-option-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.temperature-option-content strong {
+  color: var(--text-primary, #ffffff);
+  font-size: 0.95rem;
+}
+
+.temperature-option-content span {
+  color: var(--text-secondary, #a3a3a3);
+  font-size: 0.8rem;
+}
+
+/* Lista de conhecimento */
+.knowledge-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.knowledge-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  background: var(--bg-secondary, #1a1a1a);
+  border: 1px solid var(--border-light, #262626);
+  border-radius: 10px;
+}
+
+.knowledge-item-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.knowledge-source {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  color: var(--brand-green, #10a37f);
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.knowledge-item-content p {
+  margin: 0;
+  color: var(--text-primary, #ffffff);
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.knowledge-item-content small {
+  color: var(--text-muted, #666);
+  font-size: 0.75rem;
+}
+
+.knowledge-delete-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-muted, #666);
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.knowledge-delete-btn:hover {
+  color: #ef4444;
+}
+
 @keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }