feat: implement comprehensive chat system with user presence management, notification handling, and avatar integration; enhance UI components for improved user experience

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { getAvatarUrl as generateAvatarUrl } from "$lib/utils/avatarGenerator";
+  
+  interface Props {
+    avatar?: string;
+    fotoPerfilUrl?: string | null;
+    nome: string;
+    size?: "xs" | "sm" | "md" | "lg";
+  }
+
+  let { avatar, fotoPerfilUrl, nome, size = "md" }: Props = $props();
+
+  const sizeClasses = {
+    xs: "w-8 h-8",
+    sm: "w-10 h-10",
+    md: "w-12 h-12",
+    lg: "w-16 h-16",
+  };
+
+  function getAvatarUrl(avatarId: string): string {
+    // Usar gerador local ao invés da API externa
+    return generateAvatarUrl(avatarId);
+  }
+
+  const avatarUrlToShow = $derived(() => {
+    if (fotoPerfilUrl) return fotoPerfilUrl;
+    if (avatar) return getAvatarUrl(avatar);
+    return getAvatarUrl(nome); // Fallback usando o nome
+  });
+</script>
+
+<div class="avatar">
+  <div class={`${sizeClasses[size]} rounded-full bg-base-200 overflow-hidden`}>
+    <img 
+      src={avatarUrlToShow()} 
+      alt={`Avatar de ${nome}`}
+      class="w-full h-full object-cover"
+    />
+  </div>
+</div>
+