153 lines
7.7 KiB
Markdown
153 lines
7.7 KiB
Markdown
# Sugestões de Melhoria — Camila AI (Kemily)
|
|
|
|
*Análise feita em 2026-05-26 — App: /root/Apps/Camila*
|
|
|
|
---
|
|
|
|
## 1. UX / UI
|
|
|
|
### 1.1 Tela de Boas-Vindas (Welcome)
|
|
- **Prompt cards genéricos.** As sugestões rápidas ("Novo chat", etc.) não refletem a persona Kemily.
|
|
- Substituir por cards relevantes à educação infantil: "Relatório semanal", "Planejamento Mind Lab", "Resumo de livro infantil", "Atividade BNCC".
|
|
- Cards com ícones temáticos e descrição curta.
|
|
|
|
- **Cursor de digitação simples.** O cursor `|` durante streaming é funcional mas visualmente pobre.
|
|
- Substituir por uma bolinha pulsante roxa (matching com o user avatar gradient) ou uma barra de loading no estilo "thinking...".
|
|
|
|
### 1.2 Sidebar / Menu Lateral
|
|
- **Edição de tags via `prompt()` nativo.** O uso de `prompt()` do navegador é abrupto e quebrado visualmente.
|
|
- Substituir por um modal/dropdown popover com checkboxes para selecionar tags. Mesmo visual do app.
|
|
|
|
- **Ordem do histórico.** O chat ativo não fica visível no topo quando você volta para ele.
|
|
- Ao selecionar um chat existente, movê-lo para o topo do grupo "Hoje".
|
|
|
|
- **Favicon genérico.** O favicon aponta para `chatgpt.com/favicon.ico`.
|
|
- Criar um favicon próprio (iniciais "K" ou "CA" com o verde brand).
|
|
|
|
### 1.3 Input de Mensagem
|
|
- **Contador de caracteres.** Principalmente no mobile, um contador visual ajuda a perceber o tamanho da mensagem.
|
|
|
|
- **Preview de anexo no mobile.** O preview de arquivos anexados aparece, mas no mobile pode ficar mal posicionado.
|
|
- Garantir que o preview fique visível e bem adaptado antes do textarea.
|
|
|
|
### 1.4 Header
|
|
- **Badge do modelo hardcoded.** O header mostra "GPT-4.1 Nano" de forma estática.
|
|
- Tornar dinâmico via variável de ambiente ou `/api/status` endpoint.
|
|
|
|
### 1.5 Acessibilidade
|
|
- **Contraste em textos.** Alguns textos em `text-muted` (#8e8e8e) sobre fundo escuro podem ter contraste insuficiente para leitura prolongada.
|
|
- Aumentar ligeiramente o peso (weight 500+) ou escurecer a cor para #9e9e9e ou #a0a0a0.
|
|
|
|
- **Focus visible.** Botões e inputs precisam de `focus-visible` melhorado para navegação por teclado.
|
|
|
|
---
|
|
|
|
## 2. Visuais
|
|
|
|
### 2.1 Avatar do Bot ( Kemily )
|
|
- **Confusão persona/foto real.** O avatar de IA usa a foto real da Camila. Quando o usuário互换 for "Camila AI", pode gerar confusão.
|
|
- Considerar um avatar ilustrado (estilo cartoon/feminino) ou um avatar geométrico abstrato com o verde brand. A/Kemia combina com um visual mais lúdico que combine com educação infantil.
|
|
|
|
### 2.2 Paleta e Tema
|
|
- **Apenas tema escuro.** O app só funciona em dark mode.
|
|
- Oferecer toggle de tema claro/escuro (light mode com whites/cinzas claros, mantendo o verde brand). Persistir escolha no localStorage.
|
|
|
|
### 2.3 Ilustrações e Decorativos
|
|
- **Falta identidade visual além das fotos.** A tela de login tem um glow verde, mas não há ilustrações, ícones decorativos ou gradientes que deem personalidade.
|
|
- Adicionar ilustrações SVG minimalistas na tela de boas-vindas (lápis, livro, jogos).
|
|
- Usar o gradiente do avatar em mais lugares (bordas, destaques).
|
|
|
|
### 2.4 Animações
|
|
- **Transições de entrada das mensagens.** A animação `fadeInUp` é boa, mas não há animação na saída (quando uma mensagem é removida na regeneração).
|
|
- Adicionar fadeOut na remoção de mensagens.
|
|
|
|
- **Animação de loading na sidebar.** Ao carregar ou buscar histórico, um skeleton ou shimmer melhoraria a percepção.
|
|
|
|
### 2.5 Tipografia
|
|
- **Fira Code para código.** O CSS referencia 'Fira Code' mas não está importado no `index.html`.
|
|
- Adicionar `<link>` para Fira Code no Google Fonts, ou usar 'JetBrains Mono' como alternativa.
|
|
|
|
---
|
|
|
|
## 3. Técnicas
|
|
|
|
### 3.1 Segurança
|
|
- **Autenticação fraca.** Apenas senha em texto no `.env` (sem hash), sem proteção contra brute force.
|
|
- Adicionar rate limiting no endpoint `/api/chat` e `/api/login`.
|
|
- Considerar usar JWT ou session-based auth com cookie seguro.
|
|
|
|
- **Senha exposta no frontend.** O `login.js` envia a senha diretamente. Mesmo em HTTPS, credenciais ficam expostas em logs de rede.
|
|
- Implementar Challenge-Response ou hash no client antes de enviar (ex: bcrypt client-side).
|
|
|
|
### 3.2 Armazenamento
|
|
- **localStorage sem limite.** Não há controle de espaço. Chats extensos podem atingir o limite de ~5MB do localStorage.
|
|
- Implementar quota checking antes de salvar. Alertar usuário ou auto-arquivar chats antigos para API/Backend.
|
|
|
|
- **Sem backup/exportação.** Histórico de conversas não pode ser exportado.
|
|
- Adicionar botão "Exportar conversas" (JSON ou Markdown).
|
|
|
|
### 3.3 TTS (Text-to-Speech)
|
|
- **Web Speech API limitada.** A seleção de voz é boa (busca por nome), mas não há controle de velocidade/profundidade e vozes pt-BR são inconsistentes entre navegadores.
|
|
- Oferecer um mini popup de configurações de voz (velocidade: 0.75x, 1x, 1.25x; pitch).
|
|
- Considerar integração com Edge TTS (Microsoft) via backend para vozes neurais consistentes em pt-BR.
|
|
|
|
### 3.4 Streaming e Performance
|
|
- **Re-renderização total do markdown.** A cada chunk do stream, `marked.parse()` é chamado na string inteira.
|
|
- Para respostas longas, implementar parsing incremental ou renderizar apenas o delta.
|
|
|
|
- **Sem debounce no input de busca.** A busca filtra a cada `input` event, sem debounce.
|
|
- Adicionar debounce de 300ms para searches mais pesados.
|
|
|
|
### 3.5 Backend e Infraestrutura
|
|
- **Arquivos do Agente no filesystem.** Os MDs em `/Agente/` são lidos via código no backend.
|
|
- Se o app escalar, considerar migrar para uma estrutura de API documentada (ex: FastAPI com `/api/v1/`).
|
|
|
|
- **Sem métricas/monitoring.** Não há logs de uso, latência, ou erros de API.
|
|
- Adicionar logging básico (quem acessou, tokens usados, latência de resposta).
|
|
|
|
### 3.6 Testes
|
|
- **Zero testes automatizados.**
|
|
- Configurar um framework (Vitest para frontend, Jest para backend). Cover: parsing de markdown, escapeHtml, lógica de filtro, renderização de componentes.
|
|
|
|
### 3.7 Mobile / PWA
|
|
- **Não é um PWA.** O app não tem manifest nem service worker.
|
|
- Adicionar `manifest.json` e SW para funcionar offline básico (tela de login e histórico).
|
|
- Adicionar meta tags de iOS (apple-mobile-web-app-capable).
|
|
|
|
### 3.8 SEO e Meta
|
|
- **Meta tags limitadas.** Title e description genéricos.
|
|
- Adicionar Open Graph tags, description customizada, e meta tags para compartilhamento.
|
|
|
|
---
|
|
|
|
## 4. Melhorias Estratégicas (Maior Impacto)
|
|
|
|
| Prioridade | Sugestão | Motivo |
|
|
|------------|----------|--------|
|
|
| 🔴 Alta | Tema claro/escuro | Acessibilidade e preferência pessoal |
|
|
| 🔴 Alta | Modal de tags no lugar de `prompt()` | UX consistente e profissional |
|
|
| 🔴 Alta | Toggle de tema claro | Contraste e acessibilidade |
|
|
| 🟡 Média | Avatar ilustrado para Kemily | Identidade visual + educação infantil |
|
|
| 🟡 Média | Cards de prompt temáticos | Relevância imediata ao abrir |
|
|
| 🟡 Média | Config TTS com velocidade | Experiência de voz personalizável |
|
|
| 🟡 Média | Exportar conversas | Não perder dados |
|
|
| 🟡 Média | Fira/JetBrains Mono importado | Código com monospace melhor |
|
|
| 🟢 Baixa | PWA / Service Worker | Offline e instalação |
|
|
| 🟢 Baixa | Métricas de uso | Dados para iterar |
|
|
|
|
---
|
|
|
|
## 5. Observações Positivas (Manter)
|
|
|
|
- ✅ Design system com variáveis CSS bem organizadas
|
|
- ✅ Sidebar com busca + filtros por tags + pinned chats — muito funcional
|
|
- ✅ Streaming SSE implementado corretamente com parsing incremental
|
|
- ✅ Drag-and-drop para anexos funcionando
|
|
- ✅ Reconhecimento de voz (Web Speech API) com seleção inteligente de voz pt-BR
|
|
- ✅ Ctrl+N e Ctrl+K atalhos de teclado úteis
|
|
- ✅ Mobile-first com sidebar em overlay
|
|
- ✅ Código bem comentado e organizado em seções
|
|
|
|
---
|
|
|
|
*Documento gerado por Hermes — 2026-05-26* |