SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
08cc9379f81cacd7c660f19d0f9a0594e75ad035
sgse-app/SISTEMA_CHAT_IMPLEMENTADO.md

14 KiB
Raw Blame History

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

  • Enviar mensagens de texto
  • Conversas individuais (1-a-1)
  • Conversas em grupo
  • Upload de arquivos (qualquer tipo, max 10MB)
  • Upload de imagens com preview
  • Mensagens não lidas (contador)
  • Marcar como lida
  • Scroll automático

✅ Notificações

  • Notificações internas (sino)
  • Contador de não lidas
  • Dropdown com últimas notificações
  • Marcar como lida
  • Notificações desktop (com permissão)
  • Som de notificação (configurável)

✅ Presença

  • Status online/offline/ausente/externo/em_reunião
  • Indicador visual (bolinha colorida)
  • Heartbeat automático
  • Detecção de inatividade
  • Atualização ao mudar de aba

✅ Agendamento

  • Agendar mensagens
  • Date e time picker
  • Preview de data/hora
  • Lista de mensagens agendadas
  • Cancelar agendamento
  • Envio automático via cron

✅ Indicadores

  • Indicador "digitando..." em tempo real
  • Limpeza automática de indicadores antigos
  • Debounce de 1s

✅ Perfil

  • Upload de foto de perfil
  • Seleção de avatar
  • Edição de setor
  • Mensagem de status
  • Preferências de notificação
  • Configuração de status de presença

✅ UI/UX

  • Janela flutuante (bottom-right)
  • Responsivo (fullscreen em mobile)
  • Animações suaves
  • Loading states
  • Mensagens de erro
  • Confirmações
  • Tooltips

⏳ Features Parcialmente Implementadas

🟡 Reações

  • Adicionar reação emoji
  • Remover reação
  • Exibir reações
  • Emoji picker UI integrado (falta UX)

🟡 Menções

  • Backend suporta menções
  • 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

npm install emoji-picker-element date-fns @internationalized/date

🚀 Como Usar

1. Iniciar o Backend (Convex)

cd packages/backend
npx convex dev

2. Iniciar o Frontend

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

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! 🚀