Introduce extractDisplayInfo and apply it to AvatarStack

Author: arnautov-anton

src/components/Avatar/Avatar.tsx

@@ -13,8 +13,13 @@ export type AvatarProps = {
   FallbackIcon?: ComponentType<ComponentPropsWithoutRef<'svg'>>;
   /** URL of the avatar image */
   imageUrl?: string;
-  /** Name of the user, used for avatar image alt text and title fallback */
+  /** Name of the user (first and last name), used for avatar image alt text and title fallback */
   userName?: string;
+  /**
+   * Initials that are used directly instead of generating intials from `userName` property.
+   * @note Providing more than two characters will break the default UI.
+   */
+  initials?: string;
   /** Online status indicator, not rendered if not of type boolean */
   isOnline?: boolean;
   size: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | (string & {}) | null;
@@ -57,18 +62,18 @@ export const Avatar = ({
 
   useEffect(() => () => setError(false), [imageUrl]);
 
-  const nameString = userName?.toString() || '';
+  const nameString = userName?.toString().trim() || '';
   const avatarImageAlt = nameString.trim();
 
   const sizeAwareInitials = useMemo(() => {
-    const initials = getInitials(nameString);
+    const initials = rest.initials || getInitials(nameString);
 
     if (size === 'sm' || size === 'xs') {
       return initials.charAt(0);
     }
 
     return initials;
-  }, [nameString, size]);
+  }, [nameString, size, rest.initials]);
 
   const showImage = typeof imageUrl === 'string' && imageUrl && !error;
 

src/components/Avatar/utils.ts

@@ -0,0 +1,9 @@
+import type { ComponentContextValue } from '../../context';
+
+export const extractDisplayInfo: NonNullable<
+  ComponentContextValue['extractDisplayInfo']
+> = ({ user }) => ({
+  id: user?.id,
+  imageUrl: user?.image,
+  userName: user?.name, // || user?.id,
+});

src/components/ChannelListItem/utils.tsx

@@ -13,6 +13,7 @@ import type { PluggableList } from 'unified';
 import { htmlToTextPlugin, imageToLink, plusPlusToEmphasis } from '../Message';
 import { isMessageDeleted } from '../Message/utils';
 import remarkGfm from 'remark-gfm';
+import { extractDisplayInfo } from '../Avatar/utils';
 
 const remarkPlugins: PluggableList = [
   htmlToTextPlugin,
@@ -355,8 +356,10 @@ export const getGroupChannelDisplayInfo = (
   const memberList: GroupChannelDisplayInfoMember[] = [];
   for (const member of members) {
     const { user } = member;
+
     if (!user?.name && !user?.image) continue;
-    memberList.push({ imageUrl: user.image, userName: user.name });
+
+    memberList.push(extractDisplayInfo(member));
   }
   return {
     members: memberList,

src/components/Message/MessageRepliesCountButton.tsx

@@ -5,6 +5,7 @@ import React, { useMemo } from 'react';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useChannelStateContext, useComponentContext } from '../../context';
 import { AvatarStack as DefaultAvatarStack } from '../Avatar';
+import { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';
 
 export type MessageRepliesCountButtonProps = {
   /* If supplied, adds custom text to the end of a multiple replies message */
@@ -19,9 +20,10 @@ export type MessageRepliesCountButtonProps = {
 };
 
 function UnMemoizedMessageRepliesCountButton(props: MessageRepliesCountButtonProps) {
-  const { AvatarStack = DefaultAvatarStack } = useComponentContext(
-    MessageRepliesCountButton.name,
-  );
+  const {
+    AvatarStack = DefaultAvatarStack,
+    extractDisplayInfo = defaultExtractDisplayInfo,
+  } = useComponentContext(MessageRepliesCountButton.name);
   const {
     labelPlural,
     labelSingle,
@@ -34,12 +36,8 @@ function UnMemoizedMessageRepliesCountButton(props: MessageRepliesCountButtonPro
   const { t } = useTranslationContext('MessageRepliesCountButton');
 
   const avatarStackDisplayInfo = useMemo(
-    () =>
-      threadParticipants.slice(0, 3).map((participant) => ({
-        imageUrl: participant.image,
-        userName: participant.name || participant.id,
-      })),
-    [threadParticipants],
+    () => threadParticipants.slice(0, 3).map((user) => extractDisplayInfo({ user })),
+    [extractDisplayInfo, threadParticipants],
   );
 
   if (!replyCount) return null;

src/components/Poll/PollOptionSelector.tsx

@@ -4,6 +4,7 @@ import React, { useMemo } from 'react';
 import type { PollOption, PollState, PollVote, VotingVisibility } from 'stream-chat';
 import { isVoteAnswer } from 'stream-chat';
 import { AvatarStack as DefaultAvatarStack } from '../Avatar';
+import { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';
 import {
   useChannelStateContext,
   useComponentContext,
@@ -63,7 +64,10 @@ export const PollOptionSelector = ({
   const { t } = useTranslationContext();
   const { channelCapabilities = {} } = useChannelStateContext('PollOptionsShortlist');
   const { message } = useMessageContext();
-  const { AvatarStack = DefaultAvatarStack } = useComponentContext();
+  const {
+    AvatarStack = DefaultAvatarStack,
+    extractDisplayInfo = defaultExtractDisplayInfo,
+  } = useComponentContext();
   const { poll } = usePollContext();
   const {
     is_closed,
@@ -99,12 +103,8 @@ export const PollOptionSelector = ({
       (latest_votes_by_option[option.id] as PollVote[])
         .filter((vote) => !!vote.user && !isVoteAnswer(vote))
         .slice(0, displayAvatarCount)
-        .map(({ user }) => ({
-          id: user!.id, // eslint-disable-line @typescript-eslint/no-non-null-assertion
-          imageUrl: user!.image, // eslint-disable-line @typescript-eslint/no-non-null-assertion
-          userName: user!.name, // eslint-disable-line @typescript-eslint/no-non-null-assertion
-        })),
-    [displayAvatarCount, latest_votes_by_option, option.id],
+        .map(extractDisplayInfo),
+    [displayAvatarCount, extractDisplayInfo, latest_votes_by_option, option.id],
   );
 
   return (

src/components/Threads/ThreadList/ThreadListItemUI.tsx

@@ -5,10 +5,18 @@ import type { ThreadState } from 'stream-chat';
 import type { ComponentPropsWithoutRef } from 'react';
 
 import { Timestamp } from '../../Message/Timestamp';
-import { Avatar, type AvatarProps, AvatarStack } from '../../Avatar';
+import {
+  Avatar,
+  type AvatarProps,
+  AvatarStack as DefaultAvatarStack,
+} from '../../Avatar';
 import { useInteractionAnnouncements } from '../../Accessibility';
 import { useChannelPreviewInfo } from '../../ChannelListItem';
-import { useChatContext, useTranslationContext } from '../../../context';
+import {
+  useChatContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../../context';
 import { useThreadsViewContext } from '../../ChatView';
 import { useThreadListItemContext } from './ThreadListItem';
 import { useStateStore } from '../../../store';
@@ -21,6 +29,7 @@ import {
   composeThreadListItemAccessibleLabel,
   type ThreadListItemLabelConfig,
 } from './utils.a11y';
+import { extractDisplayInfo as defaultExtractDisplayInfo } from '../../Avatar/utils';
 
 export type ThreadListItemUIProps = ComponentPropsWithoutRef<'button'> & {
   /**
@@ -39,6 +48,10 @@ export const ThreadListItemUI = ({
   const { client, isMessageAIGenerated } = useChatContext();
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const thread = useThreadListItemContext()!;
+  const {
+    AvatarStack = DefaultAvatarStack,
+    extractDisplayInfo = defaultExtractDisplayInfo,
+  } = useComponentContext();
 
   const selector = useCallback(
     (nextValue: ThreadState) => ({
@@ -141,13 +154,8 @@ export const ThreadListItemUI = ({
   const displayInfo = useMemo(() => {
     if (!participants) return [];
 
-    return participants.slice(0, 3).map((participant) => ({
-      id: participant.user?.id ?? undefined,
-      imageUrl: participant.user?.image,
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      userName: participant.user?.name || participant.user!.id,
-    }));
-  }, [participants]);
+    return participants.slice(0, 3).map(extractDisplayInfo);
+  }, [extractDisplayInfo, participants]);
 
   useEffect(() => {
     if (!resetHighlighting) return;

src/components/Threads/ThreadList/__tests__/ThreadListItemUI.test.tsx

@@ -22,6 +22,7 @@ const mockUseChannelPreviewInfo = vi.fn();
 
 vi.mock('../../../../context', () => ({
   useChatContext: () => mockUseChatContext(),
+  useComponentContext: () => ({}),
   useTranslationContext: () => mockUseTranslationContext(),
 }));
 

src/components/TypingIndicator/TypingIndicator.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 
-import { AvatarStack } from '../Avatar';
+import { AvatarStack as DefaultAvatarStack } from '../Avatar';
 import { TypingIndicatorDots } from './TypingIndicatorDots';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
@@ -12,6 +12,8 @@ import { VisuallyHidden } from '../VisuallyHidden';
 
 import { useDebouncedTypingActive } from './hooks/useDebouncedTypingActive';
 import { getTypingStatusMessage } from './utils/getTypingStatusMessage';
+import { useComponentContext } from '../../context';
+import { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';
 
 export type TypingIndicatorProps = {
   /** When false, the indicator is not rendered (e.g. when list is not scrolled to bottom). Omit or true to show when typing. */
@@ -29,6 +31,10 @@ export type TypingIndicatorProps = {
 const UnMemoizedTypingIndicator = (props: TypingIndicatorProps) => {
   const { isMessageListScrolledToBottom = true, scrollToBottom, threadList } = props;
 
+  const {
+    AvatarStack = DefaultAvatarStack,
+    extractDisplayInfo = defaultExtractDisplayInfo,
+  } = useComponentContext();
   const { channelConfig, thread } = useChannelStateContext('TypingIndicator');
   const threadInstance = useThreadContext();
   const parentId = threadInstance?.id ?? thread?.id;
@@ -57,16 +63,8 @@ const UnMemoizedTypingIndicator = (props: TypingIndicatorProps) => {
   );
 
   const displayInfo = useMemo(
-    () =>
-      displayUsers.map(
-        ({ user }) =>
-          ({
-            id: user?.id,
-            imageUrl: user?.image,
-            userName: user?.name,
-          }) as const,
-      ),
-    [displayUsers],
+    () => displayUsers.map(extractDisplayInfo),
+    [displayUsers, extractDisplayInfo],
   );
 
   useEffect(() => {

src/components/TypingIndicator/hooks/useDebouncedTypingActive.ts

@@ -1,11 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
+import type { ChannelState } from 'stream-chat';
 
 const DEFAULT_HIDE_DELAY_MS = 2000;
 
-export type TypingEntry = {
-  user?: { id?: string; name?: string; image?: string };
-  parent_id?: string;
-};
+export type TypingEntry = ChannelState['typing'][string];
 
 /**
  * Derive a stable key from typing users so that the effect only runs when the

src/context/ComponentContext.tsx

@@ -1,5 +1,6 @@
 import type { ComponentProps, PropsWithChildren } from 'react';
 import React, { useContext } from 'react';
+import type { UserResponse } from 'stream-chat';
 
 import {
   type AttachmentPreviewListProps,
@@ -103,6 +104,9 @@ export type ComponentContextValue = {
   AutocompleteSuggestionItem?: React.ComponentType<SuggestionItemProps>;
   /** Optional UI component to override the default List component that displays suggestions, defaults to and accepts same props as: [List](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/List.js) */
   AutocompleteSuggestionList?: React.ComponentType<SuggestionListProps>;
+  extractDisplayInfo?: (_: {
+    user?: Partial<UserResponse>;
+  }) => NonNullable<AvatarStackProps['displayInfo']>[number];
   /** UI component to display a user's avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
   Avatar?: React.ComponentType<ChannelAvatarProps>;
   /** UI component to display a list of avatars stacked in a row, defaults to and accepts same props as: [AvatarStack](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/AvatarStack.tsx) */