feat(web): replace placeholder avatars with minidenticon-based UserAvatar (#1072)

* feat(web): replace placeholder avatars with minidenticon-based UserAvatar component

Adds the minidenticons library and a new UserAvatar component that generates
deterministic avatar icons from email addresses. Replaces all placeholder avatar
usage across chat, settings, and redeem pages with this unified component.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: add CHANGELOG entry for minidenticon avatars (#1072)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(web): use placeholder avatar for org icon in accept invite card

The org avatar should use the placeholder image, not a minidenticon
generated from the org name.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat(web): add /api/minidenticon endpoint for email avatar fallbacks

Replace placeholder avatars in email templates with dynamically generated
minidenticon PNGs. The new endpoint converts minidenticon SVGs to PNGs
via sharp, making them compatible with email clients that don't support
data URIs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* plumb avatar url for join requests

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: brendan-kellam

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+- Replaced placeholder avatars with deterministic minidenticon-based avatars generated from email addresses [#1072](https://github.com/sourcebot-dev/sourcebot/pull/1072)
+
 ## [4.16.4] - 2026-04-01
 
 ### Added

packages/web/package.json

@@ -151,6 +151,7 @@
     "linguist-languages": "^9.3.1",
     "lucide-react": "^0.517.0",
     "micromatch": "^4.0.8",
+    "minidenticons": "^4.2.1",
     "next": "16.1.6",
     "next-auth": "^5.0.0-beta.30",
     "next-navigation-guard": "^0.2.0",
@@ -195,7 +196,7 @@
   "devDependencies": {
     "@asteasolutions/zod-to-openapi": "7.3.4",
     "@eslint/eslintrc": "^3",
-    "@react-email/preview-server": "5.2.8",
+    "@react-email/preview-server": "5.2.10",
     "@react-grab/mcp": "^0.1.23",
     "@tanstack/eslint-plugin-query": "^5.74.7",
     "@testing-library/dom": "^10.4.1",
@@ -218,7 +219,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8",
     "raw-loader": "^4.0.2",
-    "react-email": "^5.1.0",
+    "react-email": "^5.2.10",
     "react-grab": "^0.1.23",
     "react-scan": "^0.5.3",
     "tailwindcss": "^3.4.1",

packages/web/src/actions.ts

@@ -723,6 +723,7 @@ export const createInvites = async (emails: string[]): Promise<{ success: boolea
                     const inviteLink = `${env.AUTH_URL}/redeem?invite_id=${invite.id}`;
                     const transport = createTransport(smtpConnectionUrl);
                     const html = await render(InviteUserEmail({
+                        baseUrl: env.AUTH_URL,
                         host: {
                             name: user.name ?? undefined,
                             email: user.email!,
@@ -999,6 +1000,7 @@ export const getOrgAccountRequests = async () => sew(() =>
             email: request.requestedBy.email!,
             createdAt: request.createdAt,
             name: request.requestedBy.name ?? undefined,
+            image: request.requestedBy.image ?? undefined,
         }));
     }));
 

packages/web/src/app/[domain]/chat/[id]/opengraph-image.tsx

@@ -4,6 +4,7 @@ import { prisma } from '@/prisma';
 import { getOrgFromDomain } from '@/data/org';
 import { ChatVisibility } from '@sourcebot/db';
 import { env } from "@sourcebot/shared";
+import { minidenticon } from 'minidenticons';
 
 export const runtime = 'nodejs';
 export const alt = 'Sourcebot Chat';
@@ -37,6 +38,7 @@ export default async function Image({ params }: ImageProps) {
             createdBy: {
                 select: {
                     name: true,
+                    email: true,
                     image: true,
                 },
             },
@@ -53,7 +55,9 @@ export default async function Image({ params }: ImageProps) {
     const chatName = rawChatName.length > MAX_CHAT_NAME_LENGTH
         ? rawChatName.substring(0, MAX_CHAT_NAME_LENGTH).trim() + '...'
         : rawChatName;
-    const creatorImage = chat.createdBy?.image;
+    const creatorEmail = chat.createdBy?.email;
+    const creatorImage = chat.createdBy?.image
+        ?? (creatorEmail ? 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(creatorEmail, 50, 50)) : undefined);
 
     return new ImageResponse(
         (

packages/web/src/app/[domain]/chat/components/shareChatPopover/ee/invitePanel.tsx

@@ -3,13 +3,12 @@
 import { searchChatShareableMembers } from "@/app/api/(client)/client";
 import { SearchChatShareableMembersResponse } from "@/app/api/(server)/ee/chat/[chatId]/searchMembers/route";
 import { SessionUser } from "@/auth";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { LoadingButton } from "@/components/ui/loading-button";
 import { Separator } from "@/components/ui/separator";
 import { unwrapServiceError } from "@/lib/utils";
-import placeholderAvatar from "@/public/placeholder_avatar.png";
+import { UserAvatar } from "@/components/userAvatar";
 import { useQuery } from "@tanstack/react-query";
 import { useDebounce } from "@uidotdev/usehooks";
 import { ChevronLeft, Circle, CircleCheck, Loader2, X } from "lucide-react";
@@ -33,17 +32,6 @@ export const InvitePanel = ({
     const resultsRef = useRef<HTMLDivElement>(null);
     const inputRef = useRef<HTMLInputElement>(null);
 
-    const getInitials = (name?: string, email?: string) => {
-        if (name) {
-            return name.split(' ').map((n) => n[0]).join('').toUpperCase().slice(0, 2);
-        }
-        if (email) {
-            return email[0].toUpperCase();
-        }
-        return '?';
-    };
-
-
     const debouncedSearchQuery = useDebounce(searchQuery, 100);
 
     const { data: searchResults, isPending, isError } = useQuery<SearchChatShareableMembersResponse>({
@@ -157,10 +145,11 @@ export const InvitePanel = ({
                                         ) : (
                                             <Circle className="h-5 w-5 text-muted-foreground shrink-0" />
                                         )}
-                                        <Avatar className="h-8 w-8 ml-2">
-                                            <AvatarImage src={user.image ?? placeholderAvatar.src} />
-                                            <AvatarFallback>{getInitials(user.name ?? undefined, user.email ?? undefined)}</AvatarFallback>
-                                        </Avatar>
+                                        <UserAvatar
+                                            email={user.email}
+                                            imageUrl={user.image}
+                                            className="h-8 w-8 ml-2"
+                                        />
                                         <div className="flex flex-col items-start ml-1">
                                             <span className="text-sm font-medium">{user.name || user.email}</span>
                                             {user.name && (

packages/web/src/app/[domain]/chat/components/shareChatPopover/shareSettings.tsx

@@ -2,7 +2,6 @@
 
 import { SessionUser } from "@/auth";
 import { useToast } from "@/components/hooks/use-toast";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
     Select,
@@ -13,7 +12,7 @@ import {
 } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
-import placeholderAvatar from "@/public/placeholder_avatar.png";
+import { UserAvatar } from "@/components/userAvatar";
 import { ChatVisibility } from "@sourcebot/db";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Info, Link2Icon, Loader2, Lock, X } from "lucide-react";
@@ -69,16 +68,6 @@ export const ShareSettings = ({
         }
     }, [chatId, visibility, toast]);
 
-    const getInitials = (name?: string | null, email?: string | null) => {
-        if (name) {
-            return name.split(' ').map((n) => n[0]).join('').toUpperCase().slice(0, 2);
-        }
-        if (email) {
-            return email[0].toUpperCase();
-        }
-        return '?';
-    };
-
     return (
         <div className="flex flex-col py-3 px-4">
             <p className="text-sm font-medium">Share</p>
@@ -113,10 +102,11 @@ export const ShareSettings = ({
                             {currentUser && (
                                 <div className="flex items-center justify-between py-2">
                                     <div className="flex items-center gap-3">
-                                        <Avatar className="h-8 w-8">
-                                            <AvatarImage src={currentUser.image ?? placeholderAvatar.src} />
-                                            <AvatarFallback>{getInitials(currentUser.name, currentUser.email)}</AvatarFallback>
-                                        </Avatar>
+                                        <UserAvatar
+                                            email={currentUser.email}
+                                            imageUrl={currentUser.image}
+                                            className="h-8 w-8"
+                                        />
                                         <div className="flex flex-col">
                                             <span className="text-sm font-medium">
                                                 {currentUser.name || currentUser.email}
@@ -134,10 +124,11 @@ export const ShareSettings = ({
                             {sharedWithUsers.map((user) => (
                                 <div key={user.id} className="flex items-center justify-between py-2">
                                     <div className="flex items-center gap-3">
-                                        <Avatar className="h-8 w-8">
-                                            <AvatarImage src={user.image ?? placeholderAvatar.src} />
-                                            <AvatarFallback>{getInitials(user.name, user.email)}</AvatarFallback>
-                                        </Avatar>
+                                        <UserAvatar
+                                            email={user.email}
+                                            imageUrl={user.image}
+                                            className="h-8 w-8"
+                                        />
                                         <div className="flex flex-col">
                                             <span className="text-sm font-medium">{user.name || user.email}</span>
                                             {user.name && (

packages/web/src/app/[domain]/components/meControlDropdownMenu.tsx

@@ -13,13 +13,12 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { cn } from "@/lib/utils"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { signOut } from "next-auth/react"
 import posthog from "posthog-js";
 import { useDomain } from "@/hooks/useDomain";
 import { Session } from "next-auth";
 import { AppearanceDropdownMenuGroup } from "./appearanceDropdownMenuGroup";
-import placeholderAvatar from "@/public/placeholder_avatar.png";
+import { UserAvatar } from "@/components/userAvatar";
 
 interface MeControlDropdownMenuProps {
     menuButtonClassName?: string;
@@ -35,24 +34,20 @@ export const MeControlDropdownMenu = ({
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Avatar className={cn("h-8 w-8 cursor-pointer", menuButtonClassName)}>
-                    <AvatarImage src={session.user.image ?? placeholderAvatar.src} />
-                    <AvatarFallback className="bg-primary/10 text-primary font-semibold text-sm">
-                        {session.user.name && session.user.name.length > 0 ? session.user.name[0].toUpperCase() : 'U'}
-                    </AvatarFallback>
-                </Avatar>
+                <UserAvatar
+                    email={session.user.email}
+                    imageUrl={session.user.image}
+                    className={cn("h-8 w-8 cursor-pointer", menuButtonClassName)}
+                />
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-64" align="end" sideOffset={5}>
                 <DropdownMenuGroup>
                     <div className="flex flex-row items-center gap-3 px-3 py-3">
-                        <Avatar className="h-10 w-10 flex-shrink-0">
-                            <AvatarImage
-                                src={session.user.image ?? placeholderAvatar.src}
-                            />
-                            <AvatarFallback className="bg-primary/10 text-primary font-semibold">
-                                {session.user.name && session.user.name.length > 0 ? session.user.name[0].toUpperCase() : 'U'}
-                            </AvatarFallback>
-                        </Avatar>
+                        <UserAvatar
+                            email={session.user.email}
+                            imageUrl={session.user.image}
+                            className="h-10 w-10 flex-shrink-0"
+                        />
                         <div className="flex flex-col flex-1 min-w-0">
                             <p className="text-sm font-semibold truncate">{session.user.name ?? "User"}</p>
                             {session.user.email && (

packages/web/src/app/[domain]/settings/members/components/invitesList.tsx

@@ -3,13 +3,12 @@
 import { OrgRole } from "@sourcebot/db";
 import { useToast } from "@/components/hooks/use-toast";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { createPathWithQueryParams, isServiceError } from "@/lib/utils";
-import placeholderAvatar from "@/public/placeholder_avatar.png";
+import { UserAvatar } from "@/components/userAvatar";
 import { Copy, MoreVertical, Search } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 import { cancelInvite } from "@/actions";
@@ -107,9 +106,7 @@ export const InvitesList = ({ invites, currentUserRole }: InviteListProps) => {
                         filteredInvites.map((invite) => (
                             <div key={invite.id} className="p-4 flex items-center justify-between bg-background">
                                 <div className="flex items-center gap-3">
-                                    <Avatar>
-                                        <AvatarImage src={placeholderAvatar.src} />
-                                    </Avatar>
+                                    <UserAvatar email={invite.email} />
                                     <div>
                                         <div className="text-sm text-muted-foreground">{invite.email}</div>
                                     </div>

packages/web/src/app/[domain]/settings/members/components/membersList.tsx

@@ -3,12 +3,11 @@
 import { Input } from "@/components/ui/input";
 import { Search, MoreVertical } from "lucide-react";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import { useCallback, useMemo, useState } from "react";
 import { OrgRole } from "@prisma/client";
-import placeholderAvatar from "@/public/placeholder_avatar.png";
+import { UserAvatar } from "@/components/userAvatar";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
 import { promoteToOwner, demoteToMember } from "@/ee/features/userManagement/actions";
 import { leaveOrg, removeMemberFromOrg } from "@/features/userManagement/actions";
@@ -200,9 +199,10 @@ export const MembersList = ({ members, currentUserId, currentUserRole, orgName,
                             filteredMembers.map((member) => (
                                 <div key={member.id} className="p-4 flex items-center justify-between bg-background">
                                     <div className="flex items-center gap-3">
-                                        <Avatar>
-                                            <AvatarImage src={member.avatarUrl ?? placeholderAvatar.src} />
-                                        </Avatar>
+                                        <UserAvatar
+                                            email={member.email}
+                                            imageUrl={member.avatarUrl}
+                                        />
                                         <div>
                                             <div className="font-medium">{member.name}</div>
                                             <div className="text-sm text-muted-foreground">{member.email}</div>

packages/web/src/app/[domain]/settings/members/components/requestsList.tsx

@@ -3,12 +3,11 @@
 import { OrgRole } from "@sourcebot/db";
 import { useToast } from "@/components/hooks/use-toast";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { isServiceError } from "@/lib/utils";
-import placeholderAvatar from "@/public/placeholder_avatar.png";
+import { UserAvatar } from "@/components/userAvatar";
 import { CheckCircle, Search, XCircle } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 import { approveAccountRequest, rejectAccountRequest } from "@/actions";
@@ -20,6 +19,7 @@ interface Request {
     email: string;
     createdAt: Date;
     name?: string;
+    image?: string;
 }
 
 interface RequestsListProps {
@@ -130,9 +130,7 @@ export const RequestsList = ({ requests, currentUserRole }: RequestsListProps) =
                         filteredRequests.map((request) => (
                             <div key={request.id} className="p-4 flex items-center justify-between bg-background">
                                 <div className="flex items-center gap-3">
-                                    <Avatar>
-                                        <AvatarImage src={placeholderAvatar.src} />
-                                    </Avatar>
+                                    <UserAvatar email={request.email} imageUrl={request.image} />
                                     <div>
                                         <div className="font-medium">{request.name || request.email}</div>
                                         <div className="text-sm text-muted-foreground">{request.email}</div>