@@ -290,6 +296,9 @@
{usuario.statusMensagem || usuario.email}
+
+ Status: {getStatusLabel(usuario.statusPresenca)}
+
{/each}
diff --git a/apps/web/src/lib/components/chat/ChatWidget.svelte b/apps/web/src/lib/components/chat/ChatWidget.svelte
index 1a68c18..25bb0cf 100644
--- a/apps/web/src/lib/components/chat/ChatWidget.svelte
+++ b/apps/web/src/lib/components/chat/ChatWidget.svelte
@@ -7,35 +7,52 @@
minimizarChat,
maximizarChat,
abrirChat,
- abrirConversa
+ abrirConversa,
+ notificacaoAtiva
} from '$lib/stores/chatStore';
import { useQuery } from 'convex-svelte';
import { api } from '@sgse-app/backend/convex/_generated/api';
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
import ChatList from './ChatList.svelte';
import ChatWindow from './ChatWindow.svelte';
- import { MessageCircle, MessageSquare, Minus, Maximize2, X, Bell } from 'lucide-svelte';
+ import ConnectionIndicator from './ConnectionIndicator.svelte';
+ import { MessageSquare, Minus, Maximize2, X, Bell } from 'lucide-svelte';
import { SvelteSet } from 'svelte/reactivity';
const count = useQuery(api.chat.contarNotificacoesNaoLidas, {});
- // Query para verificar o ID do usuário logado (usar como referência)
+ // Query otimizada: usar apenas uma query para obter usuário atual
+ // Priorizar obterPerfil pois retorna mais informações úteis
const meuPerfilQuery = useQuery(api.usuarios.obterPerfil, {});
- // Usuário atual
const currentUser = useQuery(api.auth.getCurrentUser, {});
+ // Derivar ID do usuário de forma otimizada (usar perfil primeiro, fallback para currentUser)
+ const meuId = $derived(() => {
+ if (meuPerfilQuery?.data?._id) {
+ return String(meuPerfilQuery.data._id).trim();
+ }
+ if (currentUser?.data?._id) {
+ return String(currentUser.data._id).trim();
+ }
+ return null;
+ });
+
let isOpen = $derived(false);
let isMinimized = $derived(false);
let activeConversation = $state {
+ // Propagar o clique para o elemento pai
+ e.stopPropagation();
+ if (!isDoubleClicking && !shouldPreventClick && !hasMoved && !isTouching) {
+ handleToggle();
+ }
+ }}
+ ondblclick={(e) => {
+ e.stopPropagation();
+ if (!shouldPreventClick && !hasMoved && !isTouching) {
+ handleDoubleClick();
+ }
+ }}
>
{#if isDragging || isTouching}
@@ -960,8 +1052,8 @@
{/if}
-
@@ -361,6 +368,32 @@
} />
diff --git a/apps/web/src/lib/components/chat/ConnectionIndicator.svelte b/apps/web/src/lib/components/chat/ConnectionIndicator.svelte
new file mode 100644
index 0000000..8ca81f3
--- /dev/null
+++ b/apps/web/src/lib/components/chat/ConnectionIndicator.svelte
@@ -0,0 +1,90 @@
+
+
+{#if showIndicator}
+ | null = null;
let showEmojiPicker = $state(false);
let mensagemRespondendo: {
@@ -42,6 +74,8 @@
let showMentionsDropdown = $state(false);
let mentionQuery = $state('');
let mentionStartPos = $state(0);
+ let selectedMentionIndex = $state(0); // Índice do participante selecionado no dropdown
+ let mensagemMuitoLonga = $state(false);
// Emojis mais usados
const emojis = [
@@ -134,6 +168,19 @@
// Auto-resize do textarea e detectar menções
function handleInput(e: Event) {
const target = e.target as HTMLTextAreaElement;
+
+ // Validar tamanho da mensagem
+ if (mensagem.length > MAX_MENSAGEM_LENGTH) {
+ mensagemMuitoLonga = true;
+ // Limitar ao tamanho máximo
+ mensagem = mensagem.substring(0, MAX_MENSAGEM_LENGTH);
+ if (textarea) {
+ textarea.value = mensagem;
+ }
+ } else {
+ mensagemMuitoLonga = false;
+ }
+
if (textarea) {
textarea.style.height = 'auto';
textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
@@ -160,11 +207,13 @@
// Indicador de digitação (debounce de 1s)
if (digitacaoTimeout) {
clearTimeout(digitacaoTimeout);
+ digitacaoTimeout = null;
}
digitacaoTimeout = setTimeout(() => {
if (mensagem.trim()) {
client.mutation(api.chat.indicarDigitacao, { conversaId });
}
+ digitacaoTimeout = null;
}, 1000);
}
@@ -175,6 +224,7 @@
mensagem = antes + `@${nome} ` + depois;
showMentionsDropdown = false;
mentionQuery = '';
+ selectedMentionIndex = 0; // Resetar índice selecionado
if (textarea) {
textarea.focus();
const newPos = antes.length + nome.length + 2;
@@ -187,6 +237,12 @@
async function handleEnviar() {
const texto = mensagem.trim();
if (!texto || enviando) return;
+
+ // Validar tamanho antes de enviar
+ if (texto.length > MAX_MENSAGEM_LENGTH) {
+ alert(`Mensagem muito longa. O limite é de ${MAX_MENSAGEM_LENGTH} caracteres.`);
+ return;
+ }
// Extrair menções do texto (@nome)
const mencoesIds: Id<'usuarios'>[] = [];
@@ -270,22 +326,43 @@
window.addEventListener('responderMensagem', handler);
return () => {
window.removeEventListener('responderMensagem', handler);
+ // Limpar timeout de digitação ao desmontar
+ if (digitacaoTimeout) {
+ clearTimeout(digitacaoTimeout);
+ digitacaoTimeout = null;
+ }
};
});
function handleKeyDown(e: KeyboardEvent) {
// Navegar dropdown de menções
if (showMentionsDropdown && participantesFiltrados().length > 0) {
- if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+ const participantes = participantesFiltrados();
+
+ if (e.key === 'ArrowDown') {
e.preventDefault();
- // Implementação simples: selecionar primeiro participante
- if (e.key === 'Enter') {
- inserirMencao(participantesFiltrados()[0]);
+ selectedMentionIndex = Math.min(selectedMentionIndex + 1, participantes.length - 1);
+ return;
+ }
+
+ if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ selectedMentionIndex = Math.max(selectedMentionIndex - 1, 0);
+ return;
+ }
+
+ if (e.key === 'Enter' || e.key === 'Tab') {
+ e.preventDefault();
+ if (participantes[selectedMentionIndex]) {
+ inserirMencao(participantes[selectedMentionIndex]);
}
return;
}
+
if (e.key === 'Escape') {
+ e.preventDefault();
showMentionsDropdown = false;
+ selectedMentionIndex = 0;
return;
}
}
@@ -302,41 +379,111 @@
const file = input.files?.[0];
if (!file) return;
- // Validar tamanho (max 10MB)
- if (file.size > 10 * 1024 * 1024) {
- alert('Arquivo muito grande. O tamanho máximo é 10MB.');
+ // Validar tamanho
+ if (file.size > MAX_FILE_SIZE) {
+ alert(`Arquivo muito grande. O tamanho máximo é ${(MAX_FILE_SIZE / 1024 / 1024).toFixed(0)}MB.`);
+ input.value = '';
return;
}
+ // Validar tipo de arquivo
+ if (!TODOS_TIPOS_PERMITIDOS.includes(file.type)) {
+ alert(
+ `Tipo de arquivo não permitido. Tipos aceitos:\n- Imagens: JPEG, PNG, GIF, WebP, SVG\n- Documentos: PDF, Word, Excel, PowerPoint, TXT, CSV\n- Arquivos: ZIP, RAR, 7Z, TAR, GZIP`
+ );
+ input.value = '';
+ return;
+ }
+
+ // Validar extensão do arquivo (segurança adicional)
+ const extensao = file.name.split('.').pop()?.toLowerCase();
+ const extensoesPermitidas = [
+ 'jpg',
+ 'jpeg',
+ 'png',
+ 'gif',
+ 'webp',
+ 'svg',
+ 'pdf',
+ 'doc',
+ 'docx',
+ 'xls',
+ 'xlsx',
+ 'ppt',
+ 'pptx',
+ 'txt',
+ 'csv',
+ 'zip',
+ 'rar',
+ '7z',
+ 'tar',
+ 'gz'
+ ];
+ if (extensao && !extensoesPermitidas.includes(extensao)) {
+ alert(`Extensão de arquivo não permitida: .${extensao}`);
+ input.value = '';
+ return;
+ }
+
+ // Sanitizar nome do arquivo (remover caracteres perigosos)
+ const nomeSanitizado = file.name.replace(/[^a-zA-Z0-9._-]/g, '_');
+
try {
uploadingFile = true;
+ uploadProgress = 0;
// 1. Obter upload URL
const uploadUrl = await client.mutation(api.chat.uploadArquivoChat, {
conversaId
});
- // 2. Upload do arquivo
- const result = await fetch(uploadUrl, {
- method: 'POST',
- headers: { 'Content-Type': file.type },
- body: file
+ // 2. Upload do arquivo com progresso
+ const xhr = new XMLHttpRequest();
+
+ // Promise para aguardar upload completo
+ const uploadPromise = new Promise((resolve, reject) => {
+ xhr.upload.addEventListener('progress', (e) => {
+ if (e.lengthComputable) {
+ uploadProgress = Math.round((e.loaded / e.total) * 100);
+ }
+ });
+
+ xhr.addEventListener('load', () => {
+ if (xhr.status >= 200 && xhr.status < 300) {
+ try {
+ const response = JSON.parse(xhr.responseText);
+ resolve(response.storageId);
+ } catch {
+ reject(new Error('Resposta inválida do servidor'));
+ }
+ } else {
+ reject(new Error(`Falha no upload: ${xhr.statusText}`));
+ }
+ });
+
+ xhr.addEventListener('error', () => {
+ reject(new Error('Erro de rede durante upload'));
+ });
+
+ xhr.addEventListener('abort', () => {
+ reject(new Error('Upload cancelado'));
+ });
+
+ xhr.open('POST', uploadUrl);
+ xhr.setRequestHeader('Content-Type', file.type);
+ xhr.send(file);
});
- if (!result.ok) {
- throw new Error('Falha no upload');
- }
-
- const { storageId } = await result.json();
+ const storageId = await uploadPromise;
// 3. Enviar mensagem com o arquivo
const tipo: 'imagem' | 'arquivo' = file.type.startsWith('image/') ? 'imagem' : 'arquivo';
await client.mutation(api.chat.enviarMensagem, {
conversaId,
- conteudo: tipo === 'imagem' ? '' : file.name,
+ conteudo: tipo === 'imagem' ? '' : nomeSanitizado,
tipo,
arquivoId: storageId,
- arquivoNome: file.name,
+ arquivoNome: nomeSanitizado,
arquivoTamanho: file.size,
arquivoTipo: file.type
});
@@ -383,31 +530,48 @@
+
+
+
{#if !chamadaAtual && !chamadaAtiva}
+
+ {#if showSearch}
+
@@ -596,6 +629,110 @@
e.stopPropagation()}
+ >
+
+
+
+ {#if searchQuery.trim().length >= 2}
+
+ {#if searching}
+
+ {/if}
+ {/if}
+
+
+ Buscando...
+
+ {:else if searchResults.length > 0}
+ + {searchResults.length} resultado{searchResults.length !== 1 ? 's' : ''} encontrado{searchResults.length !== 1 + ? 's' + : ''} +
+ {#each searchResults as resultado, index (resultado._id)} + + {/each} + {:else if searchQuery.trim().length >= 2} +
+
+ {/if}
+ Nenhuma mensagem encontrada
+
+ {#if !isOnline}
+
+{/if}
+
diff --git a/apps/web/src/lib/components/chat/MessageInput.svelte b/apps/web/src/lib/components/chat/MessageInput.svelte
index ceb7244..b6562f3 100644
--- a/apps/web/src/lib/components/chat/MessageInput.svelte
+++ b/apps/web/src/lib/components/chat/MessageInput.svelte
@@ -28,10 +28,42 @@
const client = useConvexClient();
const conversas = useQuery(api.chat.listarConversas, {});
+ // Constantes de validação
+ const MAX_MENSAGEM_LENGTH = 5000; // Limite de caracteres por mensagem
+ const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+ // Tipos de arquivo permitidos
+ const TIPOS_PERMITIDOS = {
+ imagens: ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'],
+ documentos: [
+ 'application/pdf',
+ 'application/msword',
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+ 'application/vnd.ms-excel',
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+ 'application/vnd.ms-powerpoint',
+ 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+ 'text/plain',
+ 'text/csv'
+ ],
+ arquivos: [
+ 'application/zip',
+ 'application/x-rar-compressed',
+ 'application/x-7z-compressed',
+ 'application/x-tar',
+ 'application/gzip'
+ ]
+ };
+ const TODOS_TIPOS_PERMITIDOS = [
+ ...TIPOS_PERMITIDOS.imagens,
+ ...TIPOS_PERMITIDOS.documentos,
+ ...TIPOS_PERMITIDOS.arquivos
+ ];
+
let mensagem = $state('');
let textarea: HTMLTextAreaElement;
let enviando = $state(false);
let uploadingFile = $state(false);
+ let uploadProgress = $state(0); // Progresso do upload (0-100)
let digitacaoTimeout: ReturnType
-
+
@@ -418,6 +582,8 @@
onclick={() => (showEmojiPicker = !showEmojiPicker)}
disabled={enviando || uploadingFile}
aria-label="Adicionar emoji"
+ aria-expanded={showEmojiPicker}
+ aria-haspopup="true"
title="Adicionar emoji"
>
-
+
{#each emojis as emoji}
@@ -458,21 +629,43 @@
oninput={handleInput}
onkeydown={handleKeyDown}
placeholder="Digite uma mensagem... (use @ para mencionar)"
- class="textarea textarea-bordered max-h-[120px] min-h-[44px] w-full resize-none pr-10"
+ class="textarea textarea-bordered max-h-[120px] min-h-[44px] w-full resize-none pr-10 {mensagemMuitoLonga
+ ? 'textarea-error'
+ : ''}"
rows="1"
disabled={enviando || uploadingFile}
+ maxlength={MAX_MENSAGEM_LENGTH}
+ aria-label="Campo de mensagem"
+ aria-describedby="mensagem-help"
+ aria-invalid={mensagemMuitoLonga}
>
+ {#if mensagemMuitoLonga || mensagem.length > MAX_MENSAGEM_LENGTH * 0.9}
+ | null>(null);
+ let todasMensagens = $state>([]);
+ let carregandoMais = $state(false);
+ let hasMore = $state(true);
+
+ // Query para obter mensagens com paginação
+ const mensagensQuery = useQuery(api.chat.obterMensagens, {
conversaId,
- limit: 50
+ limit: 50,
+ cursor: cursor || undefined
});
+
+ // Atualizar lista de mensagens quando a query mudar
+ $effect(() => {
+ if (mensagensQuery?.data) {
+ const resultado = mensagensQuery.data as { mensagens: any[]; hasMore: boolean; nextCursor: Id<'mensagens'> | null };
+
+ if (cursor === null) {
+ // Primeira carga: substituir todas as mensagens
+ todasMensagens = resultado.mensagens || [];
+ } else {
+ // Carregamento adicional: adicionar no início (mensagens mais antigas)
+ todasMensagens = [...(resultado.mensagens || []), ...todasMensagens];
+ }
+
+ hasMore = resultado.hasMore || false;
+ carregandoMais = false;
+ }
+ });
+
+ // Resetar quando mudar de conversa
+ $effect(() => {
+ cursor = null;
+ todasMensagens = [];
+ hasMore = true;
+ });
+
const digitando = useQuery(api.chat.obterDigitando, { conversaId });
const isAdmin = useQuery(api.chat.verificarSeEhAdmin, { conversaId });
const conversas = useQuery(api.chat.listarConversas, {});
@@ -54,8 +90,8 @@
mensagensCarregadas = true;
// Marcar todas as mensagens atuais como já visualizadas (não tocar beep ao abrir)
- if (mensagens?.data && mensagens.data.length > 0) {
- mensagens.data.forEach((msg) => {
+ if (todasMensagens.length > 0) {
+ todasMensagens.forEach((msg) => {
mensagensNotificadas.add(String(msg._id));
});
salvarMensagensNotificadas();
@@ -147,16 +183,44 @@
}
}
+ // Função para carregar mais mensagens (scroll infinito)
+ async function carregarMaisMensagens() {
+ if (carregandoMais || !hasMore || !mensagensQuery?.data) return;
+
+ const resultado = mensagensQuery.data as { mensagens: any[]; hasMore: boolean; nextCursor: Id<'mensagens'> | null };
+ if (!resultado.nextCursor) return;
+
+ carregandoMais = true;
+ cursor = resultado.nextCursor;
+
+ // Aguardar um pouco para a query atualizar
+ await new Promise(resolve => setTimeout(resolve, 100));
+ }
+
+ // Detectar quando usuário rola para o topo para carregar mais mensagens
+ function handleScroll(e: Event) {
+ const target = e.target as HTMLDivElement;
+ // Considerar "no final" se estiver a menos de 150px do final
+ const distanciaDoFinal = target.scrollHeight - target.scrollTop - target.clientHeight;
+ const isAtBottom = distanciaDoFinal < 150;
+ shouldScrollToBottom = isAtBottom;
+
+ // Se está próximo do topo (menos de 200px), carregar mais mensagens
+ if (target.scrollTop < 200 && hasMore && !carregandoMais) {
+ carregarMaisMensagens();
+ }
+ }
+
// Auto-scroll para a última mensagem quando novas mensagens chegam
// E detectar novas mensagens para tocar som e mostrar popup
$effect(() => {
- if (mensagens?.data && messagesContainer) {
- const currentCount = mensagens.data.length;
+ if (todasMensagens.length > 0 && messagesContainer) {
+ const currentCount = todasMensagens.length;
const isNewMessage = currentCount > lastMessageCount;
// Detectar nova mensagem de outro usuário
- if (isNewMessage && mensagens.data.length > 0 && usuarioAtualId) {
- const ultimaMensagem = mensagens.data[mensagens.data.length - 1];
+ if (isNewMessage && todasMensagens.length > 0 && usuarioAtualId) {
+ const ultimaMensagem = todasMensagens[todasMensagens.length - 1];
const mensagemId = String(ultimaMensagem._id);
const remetenteIdStr = ultimaMensagem.remetenteId
? String(ultimaMensagem.remetenteId).trim()
@@ -164,16 +228,33 @@
? String(ultimaMensagem.remetente._id).trim()
: null;
+ // Verificar se outra notificação já está ativa para esta mensagem
+ const notificacaoAtual = $notificacaoAtiva;
+ const conversaIdStr = String(conversaId).trim();
+ const jaTemNotificacaoAtiva =
+ notificacaoAtual &&
+ notificacaoAtual.conversaId === conversaIdStr &&
+ notificacaoAtual.mensagemId === mensagemId;
+
// Se é uma nova mensagem de outro usuário (não minha) E ainda não foi notificada
+ // E não há outra notificação ativa para esta mensagem
if (
remetenteIdStr &&
remetenteIdStr !== usuarioAtualId &&
- !mensagensNotificadas.has(mensagemId)
+ !mensagensNotificadas.has(mensagemId) &&
+ !jaTemNotificacaoAtiva
) {
// Marcar como notificada antes de tocar som (evita duplicação)
mensagensNotificadas.add(mensagemId);
salvarMensagensNotificadas();
+ // Registrar notificação ativa no store global
+ notificacaoAtiva.set({
+ conversaId: conversaIdStr,
+ mensagemId,
+ componente: 'messageList'
+ });
+
// Tocar som de notificação (apenas uma vez)
tocarSomNotificacao();
@@ -186,19 +267,55 @@
};
showNotificationPopup = true;
- // Ocultar popup após 5 segundos
+ // Ocultar popup após 5 segundos - garantir limpeza
if (notificationTimeout) {
clearTimeout(notificationTimeout);
+ notificationTimeout = null;
}
notificationTimeout = setTimeout(() => {
showNotificationPopup = false;
notificationMessage = null;
+ notificationTimeout = null;
+ // Limpar notificação ativa do store
+ notificacaoAtiva.set(null);
}, 5000);
}
}
- if (isNewMessage || shouldScrollToBottom) {
- // Usar requestAnimationFrame para garantir que o DOM foi atualizado
+ // Scroll automático inteligente: só rolar se:
+ // 1. É uma nova mensagem E o usuário está no final (ou perto)
+ // 2. OU o usuário já estava no final antes
+ if (isNewMessage) {
+ // Verificar se está no final antes de fazer scroll
+ if (messagesContainer) {
+ const distanciaDoFinal =
+ messagesContainer.scrollHeight -
+ messagesContainer.scrollTop -
+ messagesContainer.clientHeight;
+ const estaNoFinal = distanciaDoFinal < 150;
+
+ // Só fazer scroll se estiver no final ou se for minha própria mensagem
+ const ultimaMensagem = todasMensagens[todasMensagens.length - 1];
+ const remetenteIdStr = ultimaMensagem.remetenteId
+ ? String(ultimaMensagem.remetenteId).trim()
+ : ultimaMensagem.remetente?._id
+ ? String(ultimaMensagem.remetente._id).trim()
+ : null;
+ const ehMinhaMensagem = remetenteIdStr && remetenteIdStr === usuarioAtualId;
+
+ if (estaNoFinal || ehMinhaMensagem || shouldScrollToBottom) {
+ // Usar requestAnimationFrame para garantir que o DOM foi atualizado
+ requestAnimationFrame(() => {
+ tick().then(() => {
+ if (messagesContainer) {
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
+ }
+ });
+ });
+ }
+ }
+ } else if (shouldScrollToBottom) {
+ // Se não é nova mensagem mas o usuário estava no final, manter no final
requestAnimationFrame(() => {
tick().then(() => {
if (messagesContainer) {
@@ -210,12 +327,20 @@
lastMessageCount = currentCount;
}
+
+ // Cleanup: limpar timeout quando o effect for desmontado
+ return () => {
+ if (notificationTimeout) {
+ clearTimeout(notificationTimeout);
+ notificationTimeout = null;
+ }
+ };
});
// Marcar como lida quando mensagens carregam
$effect(() => {
- if (mensagens?.data && mensagens.data.length > 0 && usuarioAtualId) {
- const ultimaMensagem = mensagens.data[mensagens.data.length - 1];
+ if (todasMensagens.length > 0 && usuarioAtualId) {
+ const ultimaMensagem = todasMensagens[todasMensagens.length - 1];
const remetenteIdStr = ultimaMensagem.remetenteId
? String(ultimaMensagem.remetenteId).trim()
: ultimaMensagem.remetente?._id
@@ -302,7 +427,9 @@
function handleScroll(e: Event) {
const target = e.target as HTMLDivElement;
- const isAtBottom = target.scrollHeight - target.scrollTop - target.clientHeight < 100;
+ // Considerar "no final" se estiver a menos de 150px do final
+ const distanciaDoFinal = target.scrollHeight - target.scrollTop - target.clientHeight;
+ const isAtBottom = distanciaDoFinal < 150;
shouldScrollToBottom = isAtBottom;
}
@@ -435,6 +562,32 @@
return false;
}
+
+ // Escutar evento de scroll para mensagem específica (da busca)
+ onMount(() => {
+ const handler = (e: Event) => {
+ const customEvent = e as CustomEvent<{ mensagemId: Id<'mensagens'> }>;
+ const mensagemId = customEvent.detail.mensagemId;
+
+ // Encontrar elemento da mensagem e fazer scroll
+ if (messagesContainer) {
+ const mensagemElement = messagesContainer.querySelector(`[data-mensagem-id="${mensagemId}"]`);
+ if (mensagemElement) {
+ mensagemElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ // Destacar mensagem temporariamente
+ mensagemElement.classList.add('bg-yellow-200', 'dark:bg-yellow-900');
+ setTimeout(() => {
+ mensagemElement.classList.remove('bg-yellow-200', 'dark:bg-yellow-900');
+ }, 2000);
+ }
+ }
+ };
+
+ window.addEventListener('scrollToMessage', handler);
+ return () => {
+ window.removeEventListener('scrollToMessage', handler);
+ };
+ });
+ {mensagem.length}/{MAX_MENSAGEM_LENGTH}
+
+ {/if}
{#if showMentionsDropdown && participantesFiltrados().length > 0 && (conversa()?.tipo === 'grupo' || conversa()?.tipo === 'sala_reuniao')}
- {#each participantesFiltrados() as participante (participante._id)}
+ {#each participantesFiltrados() as participante, index (participante._id)}
diff --git a/apps/web/src/lib/components/chat/MessageList.svelte b/apps/web/src/lib/components/chat/MessageList.svelte
index 7e07a40..a534396 100644
--- a/apps/web/src/lib/components/chat/MessageList.svelte
+++ b/apps/web/src/lib/components/chat/MessageList.svelte
@@ -6,6 +6,7 @@
import { ptBR } from 'date-fns/locale';
import { onMount, tick } from 'svelte';
import { File, CheckCircle2, CheckCircle, MessageSquare, Bell, X } from 'lucide-svelte';
+ import { notificacaoAtiva } from '$lib/stores/chatStore';
interface Props {
conversaId: Id<'conversas'>;
@@ -14,10 +15,45 @@
let { conversaId }: Props = $props();
const client = useConvexClient();
- const mensagens = useQuery(api.chat.obterMensagens, {
+
+ // Estados para paginação
+ let cursor = $state
- {#if mensagens?.data && mensagens.data.length > 0}
- {@const gruposPorDia = agruparMensagensPorDia(mensagens.data)}
+ {#if todasMensagens.length > 0}
+ {@const gruposPorDia = agruparMensagensPorDia(todasMensagens)}
{#each Object.entries(gruposPorDia) as [dia, mensagensDia]}
{/if}
- {:else if !mensagens?.data}
+
+
+ {#if carregandoMais}
+
@@ -512,12 +665,25 @@
cancelarEdicao();
}
}}
+ aria-label="Editar mensagem"
+ aria-describedby="edicao-help"
>
+
{:else if mensagem.deletada}
@@ -625,6 +791,7 @@
class="text-base-content/50 hover:text-primary mt-1 text-xs transition-colors"
onclick={() => responderMensagem(mensagem)}
title="Responder"
+ aria-label="Responder à mensagem de {mensagem.remetente?.nome || 'usuário'}"
>
↪️ Responder
@@ -663,6 +830,7 @@
class="text-base-content/50 hover:text-primary text-xs transition-colors"
onclick={() => editarMensagem(mensagem)}
title="Editar mensagem"
+ aria-label="Editar esta mensagem"
>
✏️
@@ -670,6 +838,7 @@
class="text-base-content/50 hover:text-error text-xs transition-colors"
onclick={() => deletarMensagem(mensagem._id, false)}
title="Deletar mensagem"
+ aria-label="Deletar esta mensagem"
>
🗑️
@@ -679,6 +848,7 @@
class="text-base-content/50 hover:text-error text-xs transition-colors"
onclick={() => deletarMensagem(mensagem._id, true)}
title="Deletar mensagem (como administrador)"
+ aria-label="Deletar esta mensagem como administrador"
>
🗑️ Admin
@@ -711,7 +881,22 @@
Pressione Ctrl+Enter para salvar ou Escape para cancelar
-
+
+ Carregando mensagens anteriores...
+
+ {/if}
+
+
+ {#if !hasMore && todasMensagens.length > 0}
+
+ Não há mais mensagens
+
+ {/if}
+ {:else if !mensagensQuery?.data && todasMensagens.length === 0}
diff --git a/apps/web/src/lib/components/chat/NotificationBell.svelte b/apps/web/src/lib/components/chat/NotificationBell.svelte
index fdbb8ec..946bc30 100644
--- a/apps/web/src/lib/components/chat/NotificationBell.svelte
+++ b/apps/web/src/lib/components/chat/NotificationBell.svelte
@@ -82,19 +82,25 @@
});
notificacoesAusencias = notifsAusencias || [];
} catch (queryError: unknown) {
- // Silenciar erro se a função não estiver disponível ainda (Convex não sincronizado)
+ // Silenciar erros de timeout e função não encontrada
const errorMessage =
queryError instanceof Error ? queryError.message : String(queryError);
- if (!errorMessage.includes('Could not find public function')) {
+ const isTimeout = errorMessage.includes('timed out') || errorMessage.includes('timeout');
+ const isFunctionNotFound = errorMessage.includes('Could not find public function');
+
+ if (!isTimeout && !isFunctionNotFound) {
console.error('Erro ao buscar notificações de ausências:', queryError);
}
notificacoesAusencias = [];
}
}
} catch (e) {
- // Erro geral - silenciar se for sobre função não encontrada
+ // Erro geral - silenciar se for sobre função não encontrada ou timeout
const errorMessage = e instanceof Error ? e.message : String(e);
- if (!errorMessage.includes('Could not find public function')) {
+ const isTimeout = errorMessage.includes('timed out') || errorMessage.includes('timeout');
+ const isFunctionNotFound = errorMessage.includes('Could not find public function');
+
+ if (!isTimeout && !isFunctionNotFound) {
console.error('Erro ao buscar notificações de ausências:', e);
}
}
diff --git a/apps/web/src/lib/components/chat/PresenceManager.svelte b/apps/web/src/lib/components/chat/PresenceManager.svelte
index 0227d5d..0c8e1ff 100644
--- a/apps/web/src/lib/components/chat/PresenceManager.svelte
+++ b/apps/web/src/lib/components/chat/PresenceManager.svelte
@@ -17,6 +17,47 @@
let heartbeatInterval: ReturnType | null = null;
let inactivityTimeout: ReturnType | null = null;
let lastActivity = Date.now();
+ let lastStatusUpdate = 0;
+ let pendingStatusUpdate: ReturnType | null = null;
+ const STATUS_UPDATE_THROTTLE = 5000; // 5 segundos entre atualizações
+
+ // Função auxiliar para atualizar status com throttle e tratamento de erro
+ async function atualizarStatusPresencaSeguro(status: 'online' | 'offline' | 'ausente' | 'externo' | 'em_reuniao') {
+ if (!usuarioAutenticado) return;
+
+ const now = Date.now();
+ // Throttle: só atualizar se passou tempo suficiente desde a última atualização
+ if (now - lastStatusUpdate < STATUS_UPDATE_THROTTLE) {
+ // Cancelar atualização pendente se houver
+ if (pendingStatusUpdate) {
+ clearTimeout(pendingStatusUpdate);
+ }
+ // Agendar atualização para depois do throttle
+ pendingStatusUpdate = setTimeout(() => {
+ atualizarStatusPresencaSeguro(status);
+ }, STATUS_UPDATE_THROTTLE - (now - lastStatusUpdate));
+ return;
+ }
+
+ // Limpar atualização pendente se houver
+ if (pendingStatusUpdate) {
+ clearTimeout(pendingStatusUpdate);
+ pendingStatusUpdate = null;
+ }
+
+ lastStatusUpdate = now;
+
+ try {
+ await client.mutation(api.chat.atualizarStatusPresenca, { status });
+ } catch (error) {
+ // Silenciar erros de timeout - não são críticos para a funcionalidade
+ const errorMessage = error instanceof Error ? error.message : String(error);
+ const isTimeout = errorMessage.includes('timed out') || errorMessage.includes('timeout');
+ if (!isTimeout) {
+ console.error('Erro ao atualizar status de presença:', error);
+ }
+ }
+ }
// Detectar atividade do usuário
function handleActivity() {
@@ -33,7 +74,7 @@
inactivityTimeout = setTimeout(
() => {
if (usuarioAutenticado) {
- client.mutation(api.chat.atualizarStatusPresenca, { status: 'ausente' });
+ atualizarStatusPresencaSeguro('ausente');
}
},
5 * 60 * 1000
@@ -45,7 +86,7 @@
if (!usuarioAutenticado) return;
// Configurar como online ao montar (apenas se autenticado)
- client.mutation(api.chat.atualizarStatusPresenca, { status: 'online' });
+ atualizarStatusPresencaSeguro('online');
// Heartbeat a cada 30 segundos (apenas se autenticado)
heartbeatInterval = setInterval(() => {
@@ -61,7 +102,7 @@
// Se houve atividade nos últimos 5 minutos, manter online
if (timeSinceLastActivity < 5 * 60 * 1000) {
- client.mutation(api.chat.atualizarStatusPresenca, { status: 'online' });
+ atualizarStatusPresencaSeguro('online');
}
}, 30 * 1000);
@@ -82,10 +123,10 @@
if (document.hidden) {
// Aba ficou inativa
- client.mutation(api.chat.atualizarStatusPresenca, { status: 'ausente' });
+ atualizarStatusPresencaSeguro('ausente');
} else {
// Aba ficou ativa
- client.mutation(api.chat.atualizarStatusPresenca, { status: 'online' });
+ atualizarStatusPresencaSeguro('online');
handleActivity();
}
}
@@ -94,9 +135,15 @@
// Cleanup
return () => {
+ // Limpar atualização pendente
+ if (pendingStatusUpdate) {
+ clearTimeout(pendingStatusUpdate);
+ pendingStatusUpdate = null;
+ }
+
// Marcar como offline ao desmontar (apenas se autenticado)
if (usuarioAutenticado) {
- client.mutation(api.chat.atualizarStatusPresenca, { status: 'offline' });
+ atualizarStatusPresencaSeguro('offline');
}
if (heartbeatInterval) {
diff --git a/apps/web/src/lib/components/chat/UserAvatar.svelte b/apps/web/src/lib/components/chat/UserAvatar.svelte
index 1774bdc..0972e06 100644
--- a/apps/web/src/lib/components/chat/UserAvatar.svelte
+++ b/apps/web/src/lib/components/chat/UserAvatar.svelte
@@ -1,13 +1,55 @@