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

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>

packages/web/src/app/api/minidenticon/route.ts

@@ -0,0 +1,29 @@
+'use server';
+
+import { minidenticon } from 'minidenticons';
+import sharp from 'sharp';
+import { NextRequest } from 'next/server';
+import { apiHandler } from '@/lib/apiHandler';
+
+// Generates a minidenticon avatar PNG from an email address.
+// Used as a fallback avatar in emails where data URIs aren't supported.
+export const GET = apiHandler(async (request: NextRequest) => {
+ const email = request.nextUrl.searchParams.get('email');
+ if (!email) {
+ return new Response('Missing email parameter', { status: 400 });
+ }
+
+ const svg = minidenticon(email, 50, 50);
+ const png = await sharp(Buffer.from(svg))
+ .flatten({ background: { r: 241, g: 245, b: 249 } })
+ .resize(128, 128)
+ .png()
+ .toBuffer();
+
+ return new Response(new Uint8Array(png), {
+ headers: {
+ 'Content-Type': 'image/png',
+ 'Cache-Control': 'public, max-age=31536000, immutable',
+ },
+ });
+}, { track: false });