diff --git a/src/renderer/components/team/MemberBadge.tsx b/src/renderer/components/team/MemberBadge.tsx
index fb5981c2..942c6022 100644
--- a/src/renderer/components/team/MemberBadge.tsx
+++ b/src/renderer/components/team/MemberBadge.tsx
@@ -26,6 +26,8 @@ interface MemberBadgeProps {
teamName?: string;
/** Avatar + badge size variant */
size?: 'xs' | 'sm' | 'md';
+ /** Pre-resolved avatar URL from a caller that already owns the member roster. */
+ avatarUrl?: string;
/** Hide the avatar icon, show only the name badge */
hideAvatar?: boolean;
onClick?: (name: string) => void;
@@ -59,6 +61,7 @@ export const MemberBadge = memo(
color,
teamName,
size = 'sm',
+ avatarUrl,
hideAvatar,
onClick,
disableHoverCard,
@@ -66,7 +69,7 @@ export const MemberBadge = memo(
const colors = getTeamColorSet(color ?? '');
const { isLight } = useTheme();
const effectiveAvatarTeamName = useStore((s) =>
- hideAvatar ? null : (teamName ?? s.selectedTeamName)
+ hideAvatar || avatarUrl != null ? null : (teamName ?? s.selectedTeamName)
);
const teamMembers = useStore((s) =>
effectiveAvatarTeamName
@@ -87,7 +90,7 @@ export const MemberBadge = memo(
const avatar = (
buildMemberColorMap(members), [members]);
+ const avatarMap = useMemo(() => buildMemberAvatarMap(members), [members]);
const mentionSuggestions = useMemo(
() =>
@@ -1129,6 +1130,7 @@ export const MessageComposer = ({
name={recipient}
color={selectedResolvedColor}
size="sm"
+ avatarUrl={avatarMap.get(recipient)}
hideAvatar={recipient === 'user'}
disableHoverCard
/>
@@ -1207,6 +1209,7 @@ export const MessageComposer = ({
name={m.name}
color={resolvedColor}
size="sm"
+ avatarUrl={avatarMap.get(m.name)}
hideAvatar={m.name === 'user'}
disableHoverCard
/>