🔄 Regenerar resposta + edit icon placeholder

2026-05-25 23:30:56 +00:00
parent 4edd3fce7d
commit 317981fa4b
3 changed files with 324 additions and 11 deletions
@@ -0,0 +1,231 @@
+# Análise UX/UI — App Camila AI
+## Sugestões de Melhoria com Base nos Chats Modernos
+
+**Data:** 25/05/2026
+**App:** camila.reifonas.cloud
+**Stack:** Express + Vanilla JS (frontend), OpenRouter API, dark theme estilo ChatGPT
+
+---
+
+## O QUE JÁ FUNCIONA BEM ✅
+
+- Tema dark premium com transições suaves
+- Sidebar com overlay no mobile
+- Boas-vindas com sugestões de prompts rápidos
+- Streaming de respostas em tempo real (SSE)
+- Renderização de markdown com syntax highlighting
+- Auto-save no localStorage por conversa
+- Logout funcional
+- Responsivo mobile-first
+- Input com auto-resize e Enter para enviar
+
+---
+
+## SUGESTÕES PRIORITÁRIAS (impacto alto)
+
+### 1. 🔒 Fixar Conversas no Topo (Pinned Chats)
+
+**Problema atual:** TODAS as conversas ficam na mesma lista cronológica. Se a Camila usa o app todo dia, em 1 mês tem 50+ conversas e achar algo específico vira um pesadelo.
+
+**Referência:** ChatGPT, Claude — tem um conceito de "pinned" no topo, separado do restante.
+
+**Solução:**
+- Adicionar botão de 📌 (pin) em cada conversation na sidebar
+- Fixadas aparecem no topo com label "FIXADAS" (assim como "HOJE", "ONTEM", etc.)
+- Ordenação: Fixadas → Cronologia (Hoje, Ontem, Semanas)
+
+### 2. 🏷️ Tags / Pastas para Organizar Conversas (Assuntos)
+
+**Problema atual:** Sem categorização nenhuma. Tudo é uma lista linear.
+
+**Referência:** Notion AI, Linear AI — permitem organizar conversas por projeto/tema.
+
+**Solução (simples):**
+- Adicionar campo `tags: []` em cada chat no localStorage
+- Na sidebar, permitir filtrar por tag (ex: "Relatórios", "Planejamento", "Mind Lab", "Estudos de Caso")
+- Tags coloridas com bolinhas (estilo Gmail/Notion)
+
+**Solução (intermediária):**
+- Pastas reais na sidebar com collapsible groups
+- Arrastar e soltar conversas entre pastas
+
+### 3. 🔍 Busca Global no Histórico
+
+**Problema atual:** Não existe busca. Só visualiza uma lista.
+
+**Referência:** Todo chat moderno tem Cmd/Ctrl+K para buscar.
+
+**Solução:**
+- Adicionar barra de busca no topo da sidebar
+- Busca por título E conteúdo das mensagens
+- Resultados destacados com snippet da mensagem que matchou
+
+### 4. ✏️ Renomear Conversas
+
+**Problema atual:** O título da conversa é gerado automaticamente das primeiras 26 caracteres da primeira mensagem. Não editable.
+
+**Referência:** ChatGPT permite renomear.
+
+**Solução:**
+- Duplo clique no título na sidebar abre edit inline
+- Botão de ⋮ (três pontos) com opção "Renomear"
+- Nomear com algo significativo: "Relatório mensal - Maio 2026", "Planejamento BNCC - Corpo"
+
+---
+
+## SUGESTÕES MÉDIAS (impacto médio)
+
+### 5. 📱 Input por Voz (Microfone)
+
+**Problema atual:** Só texto digitado.
+
+**Referência:** ChatGPT mobile, Gemini.
+
+**Solução:**
+- Adicionar botão de 🎤 (microfone) ao lado do input
+- Usa Web Speech API (navegador) — sem custo adicional
+- Transcreve voz → texto → envia automaticamente
+
+**Por que é importante para a Camila:**
+Professora passa o dia escrevendo — ter a opção de ditado para criar relatórios ou notas seria muito útil.
+
+### 6. 📋 Exportar / Copiar Mensagem Específica
+
+**Problema atual:** Só consigo copiar o texto selecionando. Não tem botão "copiar" em mensagens individuais.
+
+**Referência:** Claude, ChatGPT.
+
+**Solução:**
+- No hover de cada mensagem do bot, aparece botão de 📋 "Copiar"
+- Dropdown com: "Copiar texto", "Copiar como Markdown"
+-opcional: "Exportar conversa como PDF/Markdown"
+
+### 7. ⚡ Editar e Reenviar Mensagem
+
+**Problema atual:** Se a Camila digita algo errado, não tem como editar. Tem que criar novo chat.
+
+**Referência:** ChatGPT (clique no ícone ✏️ na mensagem do usuário).
+
+**Solução:**
+- Na mensagem do usuário, adicionar ícone de ✏️ (editar)
+- Ao clicar, o texto volta para o input para correção
+- Reenvia a mensagem e a conversa é re-gerada com a correção
+- Mostrar visual que "mensagem foi editada" (tipo chat WhatsApp)
+
+### 8. 🔄 Regenerar Resposta
+
+**Problema atual:** Se a Kemily dá uma resposta ruim, só apagando a mensagem e repedindo.
+
+**Referência:** ChatGPT, Claude.
+
+**Solução:**
+- Botão 🔄 ao lado da resposta do bot (no header da mensagem)
+- Regenera a resposta sem perder a conversa
+- Loading state na mensagem enquanto regenera
+
+### 9. 📊 Dashboard / Visão Geral do Histórico
+
+**Problema atual:** Sem noção macro de uso.
+
+**Referência:** Linear AI, Notion AI.
+
+**Solução:**
+- Mostrar "Conversas este mês: 12", "Principais assuntos: Relatórios, Mind Lab"
+- Nuvem de tags dos assuntos mais frequentes
+- Stats simples: mensagens enviadas, dias de uso
+
+---
+
+## SUGESTÕES AVANÇADAS (impacto menor, esforço maior)
+
+### 10. ⌨️ Atalhos de Teclado
+
+- `Ctrl+N` → Novo chat
+- `Ctrl+F` → Buscar no histórico
+- `Ctrl+Shift+C` → Copiar última resposta
+- `Escape` → Fechar sidebar (mobile pattern)
+
+### 11. 🌙 Tema Claro
+
+- Toggle de dark/light no header ou perfil
+- Salvar preferência no localStorage
+
+### 12. 📎 Upload de Imagens / Documentos
+
+- Permitir anexar foto de atividade, lousa, etc
+- A Kemily analisa a imagem
+- Usa mesma interface que a Camila já usa (arrastar ou colar)
+
+### 13. 🔗 Compartilhar Conversa
+
+- Gerar link público para uma conversa (sem auth)
+- Compartilhar com gestor/coordenador um relatório gerado
+
+### 14. 📅 Lembretes / Scheduling
+
+- "A Camila me pede para lembrar de algo" → agendar notificação
+- Integração com calendário da rede municipal (futuro)
+
+---
+
+## HIERARQUIA DE IMPLEMENTAÇÃO RECOMENDADA
+
+| Prioridade | Item | Esforço | Impacto |
+|---|---|---|---|
+| 🔴 Alta | Fixar conversas | Baixo | Alto |
+| 🔴 Alta | Tags/Pastas | Médio | Alto |
+| 🔴 Alta | Busca no histórico | Médio | Alto |
+| 🔴 Alta | Renomear conversas | Baixo | Médio |
+| 🟡 Média | Input por voz | Baixo | Médio |
+| 🟡 Média | Copiar mensagem | Baixo | Médio |
+| 🟡 Média | Editar/reenviar | Médio | Médio |
+| 🟡 Média | Regenerar resposta | Médio | Médio |
+| 🟢 Baixa | Atalhos de teclado | Baixo | Baixo |
+| 🟢 Baixa | Tema claro | Médio | Baixo |
+| 🟢 Baixa | Upload imagens | Médio | Alto |
+
+---
+
+## NOTES TÉCNICAS PARA IMPLEMENTAÇÃO
+
+### Estrutura localStorage sugerida (nova)
+
+```javascript
+// Chat existente
+{
+  id: "chat_1748...",
+  title: "Relatório mensal - Maio",
+  tags: ["relatorios", "bncc"],
+  pinned: true,
+  messages: [...],
+  createdAt: 1748...,
+  updatedAt: 1748...
+}
+
+// Tags globais (saved separately)
+{
+  tags: [
+    { id: "relatorios", name: "Relatórios", color: "#10a37f" },
+    { id: "planejamento", name: "Planejamento", color: "#a855f7" }
+  ]
+}
+```
+
+### Filtros na sidebar
+-Grupo "Fixadas" (se tiver pinned:true)
+- Grupo "Hoje"
+- Grupo "Ontem"
+- Grupo "Semana Passada"
+- Grupo "Este Mês"
+- Grupo "Mais Antigas"
+-Ao selecionar tag: mostra só as com aquela tag
+
+---
+
+## INSPIRAÇÕES DIRETAS
+
+1. **ChatGPT** (OpenAI) — sidebar organization, pinned, search, regenerate
+2. **Claude** (Anthropic) — edit message, copy buttons, regenerate
+3. **Notion AI** — cmd+K search, tags/folders, clean UI
+4. **Linear AI** — dashboard stats, keyboard shortcuts
+5. **Gemini** (Google) — voice input, image upload, web search integration
@@ -513,6 +513,12 @@ document.addEventListener('DOMContentLoaded', () => {
          </svg>
          <span>Copiar</span>
        </button>
+        <button class="msg-action-btn btn-regenerate" title="Regenerar resposta">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+          </svg>
+          <span>Regenerar</span>
+        </button>
      </div>
    ` : '';

@@ -545,15 +551,78 @@ document.addEventListener('DOMContentLoaded', () => {
      });
    }

+    // Event listener para regenerar resposta
+    const regenBtn = row.querySelector('.btn-regenerate');
+    if (regenBtn) {
+      regenBtn.addEventListener('click', () => {
+        if (isGenerating) return;
+        regenerateLastResponse();
+      });
+    }
+
    return row;
  };

+  // Regenerar última resposta do bot
+  const regenerateLastResponse = () => {
+    const chat = chats.find(c => c.id === currentChatId);
+    if (!chat || chat.messages.length === 0) return;
+
+    // Encontrar última mensagem do bot
+    let lastBotIdx = -1;
+    for (let i = chat.messages.length - 1; i >= 0; i--) {
+      if (chat.messages[i].role === 'assistant') {
+        lastBotIdx = i;
+        break;
+      }
+    }
+    if (lastBotIdx === -1) return;
+
+    // Remover última mensagem do bot e todas as mensagens depois da última mensagem do usuário
+    let lastUserIdx = -1;
+    for (let i = lastBotIdx - 1; i >= 0; i--) {
+      if (chat.messages[i].role === 'user') {
+        lastUserIdx = i;
+        break;
+      }
+    }
+
+    // Cortar mensagens até a última do usuário
+    if (lastUserIdx >= 0) {
+      chat.messages = chat.messages.slice(0, lastUserIdx + 1);
+    } else {
+      chat.messages = [];
+    }
+
+    // Remover da UI as mensagens depois do último user
+    const rows = conversationList.querySelectorAll('.message-row');
+    for (let i = rows.length - 1; i >= 0; i--) {
+      const row = rows[i];
+      const isBot = row.classList.contains('assistant');
+      const isUser = row.classList.contains('user');
+      if (isBot) {
+        row.remove();
+      } else if (isUser) {
+        break;
+      }
+    }
+
+    saveChats();
+    scrollToBottom();
+
+    // Reenviar última mensagem do usuário para gerar nova resposta
+    const lastUserMsg = chat.messages[chat.messages.length - 1];
+    if (lastUserMsg && lastUserMsg.role === 'user') {
+      handleSendMessage(lastUserMsg.content, true);
+    }
+  };
+
  const scrollToBottom = () => {
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  };

  // Função principal de envio de mensagens
-  const handleSendMessage = async (text) => {
+  const handleSendMessage = async (text, skipUserAppend = false) => {
    if (!text || isGenerating) return;

    isGenerating = true;
@@ -589,16 +658,16 @@ document.addEventListener('DOMContentLoaded', () => {
    const chat = chats.find(c => c.id === currentChatId);
    if (!chat) return;

-    // Adicionar mensagem do usuário no estado e na tela
-    const userMsg = { role: 'user', content: text };
-    chat.messages.push(userMsg);
-    chat.updatedAt = Date.now();
-    appendMessageUI('user', text);
-    scrollToBottom();
-
-    // Salvar estado temporário do chat
-    saveChats();
-    renderHistory();
+    // Adicionar mensagem do usuário no estado e na tela (pula se for regeneração)
+    if (!skipUserAppend) {
+      const userMsg = { role: 'user', content: text };
+      chat.messages.push(userMsg);
+      chat.updatedAt = Date.now();
+      appendMessageUI('user', text);
+      scrollToBottom();
+      saveChats();
+      renderHistory();
+    }

    // Criar container para a resposta do bot (Camila AI) na tela
    const botRow = document.createElement('div');
@@ -1229,6 +1229,19 @@ code {
  50% { transform: scale(1.15); opacity: 0.8; }
 }

+/* Botão regenerar */
+.msg-action-btn.btn-regenerate:hover {
+  color: #10b981 !important;
+}
+
+.msg-action-btn.btn-regenerate:hover svg {
+  transform: rotate(-30deg);
+}
+
+.msg-action-btn.btn-regenerate svg {
+  transition: transform 0.3s ease;
+}
+
 .disclaimer {
  font-size: 11px;
  color: var(--text-muted);