505 lines
14 KiB
Markdown
505 lines
14 KiB
Markdown
# Sistema de Chat Completo - SGSE ✅
|
|
|
|
## Status: ~90% Implementado
|
|
|
|
---
|
|
|
|
## 📦 Fase 1: Backend - Convex (100% Completo)
|
|
|
|
### ✅ Schema Atualizado
|
|
|
|
**Arquivo:** `packages/backend/convex/schema.ts`
|
|
|
|
#### Campos Adicionados na Tabela `usuarios`:
|
|
- `avatar` (opcional): String para avatar emoji ou ID
|
|
- `fotoPerfil` (opcional): ID do storage para foto
|
|
- `setor` (opcional): String para setor do usuário
|
|
- `statusMensagem` (opcional): Mensagem de status (max 100 chars)
|
|
- `statusPresenca` (opcional): Enum (online, offline, ausente, externo, em_reuniao)
|
|
- `ultimaAtividade` (opcional): Timestamp
|
|
- `notificacoesAtivadas` (opcional): Boolean
|
|
- `somNotificacao` (opcional): Boolean
|
|
|
|
#### Novas Tabelas Criadas:
|
|
|
|
1. **`conversas`**: Conversas individuais ou em grupo
|
|
- Índices: `by_criado_por`, `by_tipo`, `by_ultima_mensagem`
|
|
|
|
2. **`mensagens`**: Mensagens de texto, imagem ou arquivo
|
|
- Suporte a reações (emojis)
|
|
- Suporte a menções (@usuario)
|
|
- Suporte a agendamento
|
|
- Índices: `by_conversa`, `by_remetente`, `by_agendamento`
|
|
|
|
3. **`leituras`**: Controle de mensagens lidas
|
|
- Índices: `by_conversa_usuario`, `by_usuario`
|
|
|
|
4. **`notificacoes`**: Notificações do sistema
|
|
- Tipos: nova_mensagem, mencao, grupo_criado, adicionado_grupo
|
|
- Índices: `by_usuario`, `by_usuario_lida`
|
|
|
|
5. **`digitando`**: Indicador de digitação em tempo real
|
|
- Índices: `by_conversa`, `by_usuario`
|
|
|
|
---
|
|
|
|
### ✅ Mutations Implementadas
|
|
|
|
**Arquivo:** `packages/backend/convex/chat.ts`
|
|
|
|
1. `criarConversa` - Cria conversa individual ou grupo
|
|
2. `enviarMensagem` - Envia mensagem (texto, arquivo, imagem)
|
|
3. `agendarMensagem` - Agenda mensagem para envio futuro
|
|
4. `cancelarMensagemAgendada` - Cancela mensagem agendada
|
|
5. `reagirMensagem` - Adiciona/remove reação emoji
|
|
6. `marcarComoLida` - Marca mensagens como lidas
|
|
7. `atualizarStatusPresenca` - Atualiza status do usuário
|
|
8. `indicarDigitacao` - Indica que usuário está digitando
|
|
9. `uploadArquivoChat` - Gera URL para upload
|
|
10. `marcarNotificacaoLida` - Marca notificação específica como lida
|
|
11. `marcarTodasNotificacoesLidas` - Marca todas as notificações como lidas
|
|
12. `deletarMensagem` - Soft delete de mensagem
|
|
|
|
**Mutations Internas (para crons):**
|
|
13. `enviarMensagensAgendadas` - Processa mensagens agendadas
|
|
14. `limparIndicadoresDigitacao` - Remove indicadores antigos (>10s)
|
|
|
|
---
|
|
|
|
### ✅ Queries Implementadas
|
|
|
|
**Arquivo:** `packages/backend/convex/chat.ts`
|
|
|
|
1. `listarConversas` - Lista conversas do usuário com info dos participantes
|
|
2. `obterMensagens` - Busca mensagens com paginação
|
|
3. `obterMensagensAgendadas` - Lista mensagens agendadas da conversa
|
|
4. `obterNotificacoes` - Lista notificações (pendentes ou todas)
|
|
5. `contarNotificacoesNaoLidas` - Conta notificações não lidas
|
|
6. `obterUsuariosOnline` - Lista usuários com status online
|
|
7. `listarTodosUsuarios` - Lista todos os usuários ativos
|
|
8. `buscarMensagens` - Busca mensagens por texto
|
|
9. `obterDigitando` - Retorna quem está digitando na conversa
|
|
10. `contarNaoLidas` - Conta mensagens não lidas de uma conversa
|
|
|
|
---
|
|
|
|
### ✅ Mutations de Perfil
|
|
|
|
**Arquivo:** `packages/backend/convex/usuarios.ts`
|
|
|
|
1. `atualizarPerfil` - Atualiza foto, avatar, setor, status, preferências
|
|
2. `obterPerfil` - Retorna perfil do usuário atual
|
|
3. `uploadFotoPerfil` - Gera URL para upload de foto de perfil
|
|
|
|
---
|
|
|
|
### ✅ Crons (Scheduled Functions)
|
|
|
|
**Arquivo:** `packages/backend/convex/crons.ts`
|
|
|
|
1. **Enviar mensagens agendadas** - A cada 1 minuto
|
|
2. **Limpar indicadores de digitação** - A cada 1 minuto
|
|
|
|
---
|
|
|
|
## 🎨 Fase 2: Frontend - Componentes Base (100% Completo)
|
|
|
|
### ✅ Store de Chat
|
|
|
|
**Arquivo:** `apps/web/src/lib/stores/chatStore.ts`
|
|
|
|
- Estado global do chat (aberto/fechado/minimizado)
|
|
- Conversa ativa
|
|
- Contador de notificações
|
|
- Funções auxiliares
|
|
|
|
---
|
|
|
|
### ✅ Utilities
|
|
|
|
**Arquivo:** `apps/web/src/lib/utils/notifications.ts`
|
|
|
|
- `requestNotificationPermission()` - Solicita permissão
|
|
- `showNotification()` - Exibe notificação desktop
|
|
- `playNotificationSound()` - Toca som de notificação
|
|
- `isTabActive()` - Verifica se aba está ativa
|
|
|
|
---
|
|
|
|
### ✅ Componentes de Chat
|
|
|
|
#### 1. **UserStatusBadge.svelte**
|
|
- Bolinha de status colorida (online, offline, ausente, externo, em_reunião)
|
|
- 3 tamanhos: sm, md, lg
|
|
|
|
#### 2. **NotificationBell.svelte** ⭐
|
|
- Sino com badge de contador
|
|
- Dropdown com últimas notificações
|
|
- Botão "Marcar todas como lidas"
|
|
- Integrado no header
|
|
|
|
#### 3. **PresenceManager.svelte**
|
|
- Gerencia presença em tempo real
|
|
- Heartbeat a cada 30s
|
|
- Detecta inatividade (5min = ausente)
|
|
- Atualiza status ao mudar de aba
|
|
|
|
#### 4. **ChatWidget.svelte** ⭐
|
|
- Janela flutuante estilo WhatsApp Web
|
|
- Posição: fixed bottom-right
|
|
- Responsivo (fullscreen em mobile)
|
|
- Estados: aberto/minimizado/fechado
|
|
- Animações suaves
|
|
|
|
#### 5. **ChatList.svelte**
|
|
- Lista de conversas
|
|
- Busca de conversas
|
|
- Botão "Nova Conversa"
|
|
- Mostra última mensagem e contador de não lidas
|
|
- Indicador de presença
|
|
|
|
#### 6. **NewConversationModal.svelte**
|
|
- Tabs: Individual / Grupo
|
|
- Busca de usuários
|
|
- Multi-select para grupos
|
|
- Campo para nome do grupo
|
|
|
|
#### 7. **ChatWindow.svelte**
|
|
- Header com info da conversa
|
|
- Botão voltar para lista
|
|
- Status do usuário
|
|
- Integra MessageList e MessageInput
|
|
|
|
#### 8. **MessageList.svelte**
|
|
- Scroll reverso (mensagens recentes embaixo)
|
|
- Auto-scroll para última mensagem
|
|
- Agrupamento por dia
|
|
- Suporte a texto, imagem e arquivo
|
|
- Reações (emojis)
|
|
- Indicador "digitando..."
|
|
- Marca como lida automaticamente
|
|
|
|
#### 9. **MessageInput.svelte**
|
|
- Textarea com auto-resize (max 5 linhas)
|
|
- Enter = enviar, Shift+Enter = quebra linha
|
|
- Botão de anexar arquivo (max 10MB)
|
|
- Upload de arquivos com preview
|
|
- Indicador de digitação (debounce 1s)
|
|
- Loading states
|
|
|
|
#### 10. **ScheduleMessageModal.svelte**
|
|
- Formulário de agendamento
|
|
- Date e time pickers
|
|
- Preview de data/hora
|
|
- Lista de mensagens agendadas
|
|
- Botão para cancelar agendamento
|
|
|
|
---
|
|
|
|
## 👤 Fase 3: Perfil do Usuário (100% Completo)
|
|
|
|
### ✅ Página de Perfil
|
|
|
|
**Arquivo:** `apps/web/src/routes/(dashboard)/perfil/+page.svelte`
|
|
|
|
#### Card 1: Foto de Perfil
|
|
- Upload de foto (max 2MB, crop automático futuro)
|
|
- OU escolher avatar (15 opções de emojis)
|
|
- Preview da foto/avatar atual
|
|
|
|
#### Card 2: Informações Básicas
|
|
- Nome (readonly)
|
|
- Email (readonly)
|
|
- Matrícula (readonly)
|
|
- Setor (editável)
|
|
- Mensagem de Status (editável, max 100 chars)
|
|
|
|
#### Card 3: Preferências de Chat
|
|
- Status de presença (select)
|
|
- Notificações ativadas (toggle)
|
|
- Som de notificação (toggle)
|
|
- Notificações desktop (toggle + solicitar permissão)
|
|
|
|
---
|
|
|
|
## 🔗 Fase 4: Integração (100% Completo)
|
|
|
|
### ✅ Sidebar
|
|
|
|
**Arquivo:** `apps/web/src/lib/components/Sidebar.svelte`
|
|
|
|
- `NotificationBell` adicionado ao header (antes do dropdown do usuário)
|
|
- `ChatWidget` adicionado no final (apenas se autenticado)
|
|
- `PresenceManager` adicionado no final (apenas se autenticado)
|
|
- Link "/perfil" no dropdown do usuário
|
|
|
|
---
|
|
|
|
## 📋 Features Implementadas
|
|
|
|
### ✅ Chat Básico
|
|
- [x] Enviar mensagens de texto
|
|
- [x] Conversas individuais (1-a-1)
|
|
- [x] Conversas em grupo
|
|
- [x] Upload de arquivos (qualquer tipo, max 10MB)
|
|
- [x] Upload de imagens com preview
|
|
- [x] Mensagens não lidas (contador)
|
|
- [x] Marcar como lida
|
|
- [x] Scroll automático
|
|
|
|
### ✅ Notificações
|
|
- [x] Notificações internas (sino)
|
|
- [x] Contador de não lidas
|
|
- [x] Dropdown com últimas notificações
|
|
- [x] Marcar como lida
|
|
- [x] Notificações desktop (com permissão)
|
|
- [x] Som de notificação (configurável)
|
|
|
|
### ✅ Presença
|
|
- [x] Status online/offline/ausente/externo/em_reunião
|
|
- [x] Indicador visual (bolinha colorida)
|
|
- [x] Heartbeat automático
|
|
- [x] Detecção de inatividade
|
|
- [x] Atualização ao mudar de aba
|
|
|
|
### ✅ Agendamento
|
|
- [x] Agendar mensagens
|
|
- [x] Date e time picker
|
|
- [x] Preview de data/hora
|
|
- [x] Lista de mensagens agendadas
|
|
- [x] Cancelar agendamento
|
|
- [x] Envio automático via cron
|
|
|
|
### ✅ Indicadores
|
|
- [x] Indicador "digitando..." em tempo real
|
|
- [x] Limpeza automática de indicadores antigos
|
|
- [x] Debounce de 1s
|
|
|
|
### ✅ Perfil
|
|
- [x] Upload de foto de perfil
|
|
- [x] Seleção de avatar
|
|
- [x] Edição de setor
|
|
- [x] Mensagem de status
|
|
- [x] Preferências de notificação
|
|
- [x] Configuração de status de presença
|
|
|
|
### ✅ UI/UX
|
|
- [x] Janela flutuante (bottom-right)
|
|
- [x] Responsivo (fullscreen em mobile)
|
|
- [x] Animações suaves
|
|
- [x] Loading states
|
|
- [x] Mensagens de erro
|
|
- [x] Confirmações
|
|
- [x] Tooltips
|
|
|
|
---
|
|
|
|
## ⏳ Features Parcialmente Implementadas
|
|
|
|
### 🟡 Reações
|
|
- [x] Adicionar reação emoji
|
|
- [x] Remover reação
|
|
- [x] Exibir reações
|
|
- [ ] Emoji picker UI integrado (falta UX)
|
|
|
|
### 🟡 Menções
|
|
- [x] Backend suporta menções
|
|
- [x] Notificação especial para menções
|
|
- [ ] Auto-complete @usuario (falta UX)
|
|
- [ ] Highlight de menções (falta UX)
|
|
|
|
---
|
|
|
|
## 🔴 Features NÃO Implementadas (Opcional/Futuro)
|
|
|
|
### Busca de Mensagens
|
|
- [ ] SearchModal.svelte
|
|
- [ ] Busca com filtros
|
|
- [ ] Highlight nos resultados
|
|
- [ ] Navegação para mensagem
|
|
|
|
### Menu de Contexto
|
|
- [ ] MessageContextMenu.svelte
|
|
- [ ] Click direito em mensagem
|
|
- [ ] Opções: Reagir, Responder, Copiar, Encaminhar, Deletar
|
|
|
|
### Emoji Picker Integrado
|
|
- [ ] EmojiPicker.svelte com emoji-picker-element
|
|
- [ ] Botão no MessageInput
|
|
- [ ] Inserir emoji no cursor
|
|
|
|
### Otimizações
|
|
- [ ] Virtualização de listas (svelte-virtual)
|
|
- [ ] Cache de avatares
|
|
- [ ] Lazy load de imagens
|
|
|
|
### Áudio/Vídeo (Fase 2 Futura)
|
|
- [ ] Chamadas de áudio (WebRTC)
|
|
- [ ] Chamadas de vídeo (WebRTC)
|
|
- [ ] Mensagens de voz
|
|
- [ ] Compartilhamento de tela
|
|
|
|
---
|
|
|
|
## 📁 Arquivos Criados/Modificados
|
|
|
|
### Backend
|
|
- `packages/backend/convex/schema.ts` (modificado)
|
|
- `packages/backend/convex/chat.ts` (NOVO)
|
|
- `packages/backend/convex/crons.ts` (NOVO)
|
|
- `packages/backend/convex/usuarios.ts` (modificado)
|
|
|
|
### Frontend - Stores
|
|
- `apps/web/src/lib/stores/chatStore.ts` (NOVO)
|
|
|
|
### Frontend - Utils
|
|
- `apps/web/src/lib/utils/notifications.ts` (NOVO)
|
|
|
|
### Frontend - Componentes Chat
|
|
- `apps/web/src/lib/components/chat/UserStatusBadge.svelte` (NOVO)
|
|
- `apps/web/src/lib/components/chat/NotificationBell.svelte` (NOVO)
|
|
- `apps/web/src/lib/components/chat/PresenceManager.svelte` (NOVO)
|
|
- `apps/web/src/lib/components/chat/ChatWidget.svelte` (NOVO)
|
|
- `apps/web/src/lib/components/chat/ChatList.svelte` (NOVO)
|
|
- `apps/web/src/lib/components/chat/NewConversationModal.svelte` (NOVO)
|
|
- `apps/web/src/lib/components/chat/ChatWindow.svelte` (NOVO)
|
|
- `apps/web/src/lib/components/chat/MessageList.svelte` (NOVO)
|
|
- `apps/web/src/lib/components/chat/MessageInput.svelte` (NOVO)
|
|
- `apps/web/src/lib/components/chat/ScheduleMessageModal.svelte` (NOVO)
|
|
|
|
### Frontend - Páginas
|
|
- `apps/web/src/routes/(dashboard)/perfil/+page.svelte` (NOVO)
|
|
|
|
### Frontend - Layout
|
|
- `apps/web/src/lib/components/Sidebar.svelte` (modificado)
|
|
|
|
### Assets
|
|
- `apps/web/static/sounds/README.md` (NOVO)
|
|
|
|
---
|
|
|
|
## 🎯 Dependências Instaladas
|
|
|
|
```bash
|
|
npm install emoji-picker-element date-fns @internationalized/date
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Como Usar
|
|
|
|
### 1. Iniciar o Backend (Convex)
|
|
```bash
|
|
cd packages/backend
|
|
npx convex dev
|
|
```
|
|
|
|
### 2. Iniciar o Frontend
|
|
```bash
|
|
cd apps/web
|
|
npm run dev
|
|
```
|
|
|
|
### 3. Acessar o Sistema
|
|
- URL: http://localhost:5173
|
|
- Fazer login com usuário existente
|
|
- O sino de notificações aparecerá no header
|
|
- O botão de chat flutuante aparecerá no canto inferior direito
|
|
|
|
### 4. Testar o Chat
|
|
1. Abrir em duas abas/navegadores diferentes com usuários diferentes
|
|
2. Criar uma nova conversa
|
|
3. Enviar mensagens
|
|
4. Testar upload de arquivos
|
|
5. Testar agendamento
|
|
6. Testar notificações
|
|
7. Ver mudanças de status em tempo real
|
|
|
|
---
|
|
|
|
## 📝 Assets Necessários
|
|
|
|
### 1. Som de Notificação
|
|
**Local:** `apps/web/static/sounds/notification.mp3`
|
|
- Duração: 1-2 segundos
|
|
- Formato: MP3
|
|
- Tamanho: < 50KB
|
|
- Onde encontrar: https://notificationsounds.com/
|
|
|
|
### 2. Avatares (Opcional)
|
|
**Local:** `apps/web/static/avatars/avatar-1.svg até avatar-15.svg`
|
|
- Formato: SVG ou PNG
|
|
- Tamanho: ~200x200px
|
|
- Usar DiceBear ou criar manualmente
|
|
- **Nota:** Atualmente usando emojis (👤, 😀, etc) como alternativa
|
|
|
|
---
|
|
|
|
## 🐛 Problemas Conhecidos
|
|
|
|
### Linter Warnings
|
|
- Avisos de `svelteHTML` no Svelte 5 (problema de tooling, não afeta funcionalidade)
|
|
- Avisos sobre pacote do Svelte não encontrado (problema de IDE, não afeta funcionalidade)
|
|
|
|
### Funcionalidades Pendentes
|
|
- Emoji picker ainda não está integrado visualmente
|
|
- Menções @usuario não têm auto-complete visual
|
|
- Busca de mensagens não tem UI dedicada
|
|
- Menu de contexto (click direito) não implementado
|
|
|
|
---
|
|
|
|
## ✨ Destaques da Implementação
|
|
|
|
### 🎨 UI/UX de Qualidade
|
|
- Design moderno estilo WhatsApp Web
|
|
- Animações suaves
|
|
- Responsivo (mobile-first)
|
|
- DaisyUI para consistência visual
|
|
- Loading states em todos os lugares
|
|
|
|
### ⚡ Performance
|
|
- Queries reativas (tempo real via Convex)
|
|
- Paginação de mensagens
|
|
- Lazy loading ready
|
|
- Debounce em digitação
|
|
- Auto-scroll otimizado
|
|
|
|
### 🔒 Segurança
|
|
- Validação no backend (todas mutations verificam autenticação)
|
|
- Verificação de permissões (usuário pertence à conversa)
|
|
- Validação de tamanho de arquivos (10MB)
|
|
- Validação de datas (agendamento só futuro)
|
|
- Sanitização de inputs
|
|
|
|
### 🎯 Escalabilidade
|
|
- Paginação pronta
|
|
- Índices otimizados no banco
|
|
- Crons para tarefas assíncronas
|
|
- Soft delete de mensagens
|
|
- Limpeza automática de dados temporários
|
|
|
|
---
|
|
|
|
## 🎉 Conclusão
|
|
|
|
O sistema de chat está **90% completo** e **100% funcional** para os recursos implementados!
|
|
|
|
Todas as funcionalidades core estão prontas:
|
|
- ✅ Chat em tempo real
|
|
- ✅ Conversas individuais e grupos
|
|
- ✅ Upload de arquivos
|
|
- ✅ Notificações
|
|
- ✅ Presença online
|
|
- ✅ Agendamento de mensagens
|
|
- ✅ Perfil do usuário
|
|
|
|
Faltam apenas:
|
|
- 🟡 Emoji picker visual
|
|
- 🟡 Busca de mensagens (UI)
|
|
- 🟡 Menu de contexto (UX)
|
|
- 🟡 Sons e avatares (assets)
|
|
|
|
**O sistema está pronto para uso e testes!** 🚀
|
|
|