refactor: enhance chat components with type safety and response functionality

- Updated type definitions in ChatWindow and MessageList components for better type safety.
- Improved MessageInput to handle message responses, including a preview feature for replying to messages.
- Enhanced the chat message handling logic to support message references and improve user interaction.
- Refactored notification utility functions to support push notifications and rate limiting for email sending.
- Updated backend schema to accommodate new features related to message responses and notifications.

apps/web/src/lib/components/chat/MessageList.svelte

@@ -5,6 +5,7 @@
   import { format } from "date-fns";
   import { ptBR } from "date-fns/locale";
   import { onMount, tick } from "svelte";
+  import { authStore } from "$lib/stores/auth.svelte";
 
   interface Props {
     conversaId: Id<"conversas">;
@@ -18,33 +19,43 @@
 
   let messagesContainer: HTMLDivElement;
   let shouldScrollToBottom = true;
+  let lastMessageCount = 0;
 
-  // DEBUG: Log quando mensagens mudam
-  $effect(() => {
-    console.log("💬 [MessageList] Mensagens atualizadas:", {
-      conversaId,
-      count: mensagens?.data?.length || 0,
-      mensagens: mensagens?.data,
-    });
-  });
+  // Obter ID do usuário atual
+  const usuarioAtualId = $derived(authStore.usuario?._id);
 
-  // Auto-scroll para a última mensagem
+  // Auto-scroll para a última mensagem quando novas mensagens chegam
   $effect(() => {
-    if (mensagens?.data && shouldScrollToBottom && messagesContainer) {
-      tick().then(() => {
-        messagesContainer.scrollTop = messagesContainer.scrollHeight;
-      });
+    if (mensagens?.data && messagesContainer) {
+      const currentCount = mensagens.data.length;
+      const isNewMessage = currentCount > lastMessageCount;
+      
+      if (isNewMessage || shouldScrollToBottom) {
+        // Usar requestAnimationFrame para garantir que o DOM foi atualizado
+        requestAnimationFrame(() => {
+          tick().then(() => {
+            if (messagesContainer) {
+              messagesContainer.scrollTop = messagesContainer.scrollHeight;
+            }
+          });
+        });
+      }
+      
+      lastMessageCount = currentCount;
     }
   });
 
   // Marcar como lida quando mensagens carregam
   $effect(() => {
-    if (mensagens?.data && mensagens.data.length > 0) {
+    if (mensagens?.data && mensagens.data.length > 0 && usuarioAtualId) {
       const ultimaMensagem = mensagens.data[mensagens.data.length - 1];
-      client.mutation(api.chat.marcarComoLida, {
-        conversaId,
-        mensagemId: ultimaMensagem._id as any,
-      });
+      // Só marcar como lida se não for minha mensagem
+      if (ultimaMensagem.remetente?._id !== usuarioAtualId) {
+        client.mutation(api.chat.marcarComoLida, {
+          conversaId,
+          mensagemId: ultimaMensagem._id,
+        });
+      }
     }
   });
 
@@ -64,8 +75,46 @@
     }
   }
 
-  function agruparMensagensPorDia(msgs: any[]): Record<string, any[]> {
-    const grupos: Record<string, any[]> = {};
+  interface Mensagem {
+    _id: Id<"mensagens">;
+    remetente?: {
+      _id: Id<"usuarios">;
+      nome: string;
+    } | null;
+    conteudo: string;
+    tipo: "texto" | "arquivo" | "imagem";
+    enviadaEm: number;
+    editadaEm?: number;
+    deletada?: boolean;
+    agendadaPara?: number;
+    respostaPara?: Id<"mensagens">;
+    mensagemOriginal?: {
+      _id: Id<"mensagens">;
+      conteudo: string;
+      remetente: {
+        _id: Id<"usuarios">;
+        nome: string;
+      } | null;
+      deletada: boolean;
+    } | null;
+    reagiuPor?: Array<{
+      usuarioId: Id<"usuarios">;
+      emoji: string;
+    }>;
+    arquivoUrl?: string | null;
+    arquivoNome?: string;
+    arquivoTamanho?: number;
+    linkPreview?: {
+      url: string;
+      titulo?: string;
+      descricao?: string;
+      imagem?: string;
+      site?: string;
+    } | null;
+  }
+
+  function agruparMensagensPorDia(msgs: Mensagem[]): Record<string, Mensagem[]> {
+    const grupos: Record<string, Mensagem[]> = {};
     for (const msg of msgs) {
       const dia = formatarDiaMensagem(msg.enviadaEm);
       if (!grupos[dia]) {
@@ -83,14 +132,14 @@
     shouldScrollToBottom = isAtBottom;
   }
 
-  async function handleReagir(mensagemId: string, emoji: string) {
+  async function handleReagir(mensagemId: Id<"mensagens">, emoji: string) {
     await client.mutation(api.chat.reagirMensagem, {
-      mensagemId: mensagemId as any,
+      mensagemId,
       emoji,
     });
   }
 
-  function getEmojisReacao(mensagem: any): Array<{ emoji: string; count: number }> {
+  function getEmojisReacao(mensagem: Mensagem): Array<{ emoji: string; count: number }> {
     if (!mensagem.reagiuPor || mensagem.reagiuPor.length === 0) return [];
 
     const emojiMap: Record<string, number> = {};
@@ -100,6 +149,64 @@
 
     return Object.entries(emojiMap).map(([emoji, count]) => ({ emoji, count }));
   }
+
+  let mensagemEditando: Mensagem | null = $state(null);
+  let novoConteudoEditado = $state("");
+
+  async function editarMensagem(mensagem: Mensagem) {
+    mensagemEditando = mensagem;
+    novoConteudoEditado = mensagem.conteudo;
+  }
+
+  async function salvarEdicao() {
+    if (!mensagemEditando || !novoConteudoEditado.trim()) return;
+
+    try {
+      const resultado = await client.mutation(api.chat.editarMensagem, {
+        mensagemId: mensagemEditando._id,
+        novoConteudo: novoConteudoEditado.trim(),
+      });
+
+      if (resultado.sucesso) {
+        mensagemEditando = null;
+        novoConteudoEditado = "";
+      } else {
+        alert(resultado.erro || "Erro ao editar mensagem");
+      }
+    } catch (error) {
+      console.error("Erro ao editar mensagem:", error);
+      alert("Erro ao editar mensagem");
+    }
+  }
+
+  function cancelarEdicao() {
+    mensagemEditando = null;
+    novoConteudoEditado = "";
+  }
+
+  async function deletarMensagem(mensagemId: Id<"mensagens">) {
+    if (!confirm("Tem certeza que deseja deletar esta mensagem?")) {
+      return;
+    }
+
+    try {
+      await client.mutation(api.chat.deletarMensagem, {
+        mensagemId,
+      });
+    } catch (error) {
+      console.error("Erro ao deletar mensagem:", error);
+      alert("Erro ao deletar mensagem");
+    }
+  }
+
+  // Função para responder mensagem (será passada via props ou event)
+  function responderMensagem(mensagem: Mensagem) {
+    // Disparar evento customizado para o componente pai
+    const event = new CustomEvent("responderMensagem", {
+      detail: { mensagemId: mensagem._id },
+    });
+    window.dispatchEvent(event);
+  }
 </script>
 
 <div
@@ -119,9 +226,9 @@
 
       <!-- Mensagens do dia -->
       {#each mensagensDia as mensagem (mensagem._id)}
-        {@const isMinha = mensagem.remetente?._id === mensagens.data[0]?.remetente?._id}
-        <div class={`flex mb-4 ${isMinha ? "justify-end" : "justify-start"}`}>
-          <div class={`max-w-[75%] ${isMinha ? "items-end" : "items-start"}`}>
+        {@const isMinha = mensagem.remetente?._id === usuarioAtualId}
+        <div class={`flex mb-4 w-full ${isMinha ? "justify-end" : "justify-start"}`}>
+          <div class={`flex flex-col max-w-[75%] ${isMinha ? "items-end" : "items-start"}`}>
             <!-- Nome do remetente (apenas se não for minha) -->
             {#if !isMinha}
               <p class="text-xs text-base-content/60 mb-1 px-3">
@@ -137,10 +244,92 @@
                   : "bg-base-200 text-base-content rounded-bl-sm"
               }`}
             >
-              {#if mensagem.deletada}
+              {#if mensagem.mensagemOriginal}
+                <!-- Preview da mensagem respondida -->
+                <div class="mb-2 pl-3 border-l-2 border-base-content/20 opacity-70">
+                  <p class="text-xs font-medium">
+                    {mensagem.mensagemOriginal.remetente?.nome || "Usuário"}
+                  </p>
+                  <p class="text-xs truncate">
+                    {mensagem.mensagemOriginal.deletada 
+                      ? "Mensagem deletada" 
+                      : mensagem.mensagemOriginal.conteudo}
+                  </p>
+                </div>
+              {/if}
+              {#if mensagemEditando?._id === mensagem._id}
+                <!-- Modo de edição -->
+                <div class="space-y-2">
+                  <textarea
+                    bind:value={novoConteudoEditado}
+                    class="w-full p-2 rounded-lg bg-base-100 text-base-content text-sm resize-none"
+                    rows="3"
+                    onkeydown={(e) => {
+                      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+                        salvarEdicao();
+                      } else if (e.key === "Escape") {
+                        cancelarEdicao();
+                      }
+                    }}
+                  ></textarea>
+                  <div class="flex gap-2 justify-end">
+                    <button
+                      class="btn btn-xs btn-ghost"
+                      onclick={cancelarEdicao}
+                    >
+                      Cancelar
+                    </button>
+                    <button
+                      class="btn btn-xs btn-primary"
+                      onclick={salvarEdicao}
+                    >
+                      Salvar
+                    </button>
+                  </div>
+                </div>
+              {:else if mensagem.deletada}
                 <p class="text-sm italic opacity-70">Mensagem deletada</p>
               {:else if mensagem.tipo === "texto"}
-                <p class="text-sm whitespace-pre-wrap break-words">{mensagem.conteudo}</p>
+                <div class="space-y-2">
+                  <div class="flex items-start gap-2">
+                    <p class="text-sm whitespace-pre-wrap break-words flex-1">{mensagem.conteudo}</p>
+                    {#if mensagem.editadaEm}
+                      <span class="text-xs opacity-50 italic" title="Editado">(editado)</span>
+                    {/if}
+                  </div>
+                  
+                  <!-- Preview de link -->
+                  {#if mensagem.linkPreview}
+                    <a
+                      href={mensagem.linkPreview.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="block border border-base-300 rounded-lg overflow-hidden hover:border-primary transition-colors"
+                    >
+                      {#if mensagem.linkPreview.imagem}
+                        <img
+                          src={mensagem.linkPreview.imagem}
+                          alt={mensagem.linkPreview.titulo || "Preview"}
+                          class="w-full h-48 object-cover"
+                          onerror={(e) => {
+                            (e.target as HTMLImageElement).style.display = "none";
+                          }}
+                        />
+                      {/if}
+                      <div class="p-3 bg-base-200">
+                        {#if mensagem.linkPreview.site}
+                          <p class="text-xs text-base-content/50 mb-1">{mensagem.linkPreview.site}</p>
+                        {/if}
+                        {#if mensagem.linkPreview.titulo}
+                          <p class="text-sm font-medium text-base-content mb-1">{mensagem.linkPreview.titulo}</p>
+                        {/if}
+                        {#if mensagem.linkPreview.descricao}
+                          <p class="text-xs text-base-content/70 line-clamp-2">{mensagem.linkPreview.descricao}</p>
+                        {/if}
+                      </div>
+                    </a>
+                  {/if}
+                </div>
               {:else if mensagem.tipo === "imagem"}
                 <div class="mb-2">
                   <img
@@ -198,14 +387,45 @@
                   {/each}
                 </div>
               {/if}
+
+              <!-- Botão de responder -->
+              {#if !mensagem.deletada}
+                <button
+                  class="text-xs text-base-content/50 hover:text-primary transition-colors mt-1"
+                  onclick={() => responderMensagem(mensagem)}
+                  title="Responder"
+                >
+                  ↪️ Responder
+                </button>
+              {/if}
             </div>
 
-            <!-- Timestamp -->
-            <p
-              class={`text-xs text-base-content/50 mt-1 px-3 ${isMinha ? "text-right" : "text-left"}`}
-            >
+          <!-- Timestamp e ações -->
+          <div
+            class={`flex items-center gap-2 mt-1 px-3 ${isMinha ? "justify-end" : "justify-start"}`}
+          >
+            <p class="text-xs text-base-content/50">
               {formatarDataMensagem(mensagem.enviadaEm)}
             </p>
+            {#if isMinha && !mensagem.deletada && !mensagem.agendadaPara}
+              <div class="flex gap-1">
+                <button
+                  class="text-xs text-base-content/50 hover:text-primary transition-colors"
+                  onclick={() => editarMensagem(mensagem)}
+                  title="Editar mensagem"
+                >
+                  ✏️
+                </button>
+                <button
+                  class="text-xs text-base-content/50 hover:text-error transition-colors"
+                  onclick={() => deletarMensagem(mensagem._id)}
+                  title="Deletar mensagem"
+                >
+                  🗑️
+                </button>
+              </div>
+            {/if}
+          </div>
           </div>
         </div>
       {/each}
@@ -226,7 +446,7 @@
           ></div>
         </div>
         <p class="text-xs text-base-content/60">
-          {digitando.data.map((u: any) => u.nome).join(", ")} {digitando.data.length === 1
+          {digitando.data.map((u: { nome: string }) => u.nome).join(", ")} {digitando.data.length === 1
             ? "está digitando"
             : "estão digitando"}...
         </p>