feat: unify channel and thread display titles (#2998)

BREAKING CHANGE: useChannelPreviewInfo now always returns a defined
`groupChannelDisplayInfo` (object with `members` and `overflowCount`).
For 1:1 or ≤2 members it returns `{ members: [], overflowCount:
undefined }`. Code that treated `groupChannelDisplayInfo == null` as
“not a group” should use e.g. `groupChannelDisplayInfo.members.length >=
2` instead.

Author: MartinCupela

examples/vite/src/App.tsx

@@ -341,7 +341,9 @@ const App = () => {
             <ThreadStateSync />
             <ThreadList />
             <ChatView.ThreadAdapter>
-              <Thread virtualized />
+              <WithDragAndDropUpload className='str-chat__dropzone-root--thread'>
+                <Thread virtualized />
+              </WithDragAndDropUpload>
             </ChatView.ThreadAdapter>
           </ChatView.Threads>
         </ChatView>

src/components/Avatar/ChannelAvatar.tsx

@@ -2,22 +2,28 @@ import React from 'react';
 
 import { Avatar, GroupAvatar } from './';
 import type { AvatarProps, GroupAvatarProps } from './';
+import type { GroupAvatarMember } from './GroupAvatar';
 
 export type ChannelAvatarProps = Partial<Omit<GroupAvatarProps & AvatarProps, 'size'>> & {
   size: GroupAvatarProps['size'];
+  /** When set with length >= 2, GroupAvatar is used. */
+  displayMembers?: GroupAvatarMember[];
+  overflowCount?: number;
 };
 
 export const ChannelAvatar = ({
-  groupChannelDisplayInfo,
+  displayMembers,
   imageUrl,
+  overflowCount,
   size,
   userName,
   ...sharedProps
 }: ChannelAvatarProps) => {
-  if (groupChannelDisplayInfo) {
+  if ((displayMembers?.length ?? 0) >= 2) {
     return (
       <GroupAvatar
-        groupChannelDisplayInfo={groupChannelDisplayInfo}
+        displayMembers={displayMembers}
+        overflowCount={overflowCount}
         size={size}
         {...sharedProps}
       />

src/components/Avatar/GroupAvatar.tsx

@@ -1,33 +1,38 @@
 import clsx from 'clsx';
 import React, { type ComponentPropsWithoutRef } from 'react';
 import { Avatar, type AvatarProps } from './Avatar';
-import type { GroupChannelDisplayInfo } from '../ChannelPreview';
+
+export type GroupAvatarMember = {
+  imageUrl?: string;
+  userName?: string;
+};
 
 export type GroupAvatarProps = ComponentPropsWithoutRef<'div'> & {
-  /** Mapping of image URLs to names which initials will be used as fallbacks in case image assets fail to load. */
-  groupChannelDisplayInfo: GroupChannelDisplayInfo;
+  /** List of members to show as avatars; at most 2 when overflowCount is set, otherwise 4. Defaults to [] when omitted. */
+  displayMembers?: GroupAvatarMember[];
+  /** Optional count for the "+N" badge when there are more members than shown. */
+  overflowCount?: number;
   size: '2xl' | 'xl' | 'lg' | null;
   isOnline?: boolean;
-  overflowCount?: number;
 };
 
 /**
- * Avatar component to display multiple users' avatars in a group channel, with a maximum of 4 avatars shown.
- * Renders a single Avatar if only one user is provided.
+ * Avatar component to display multiple users' avatars in a group.
+ * Renders a single Avatar if fewer than 2 members. Otherwise, renders up to 2 avatars (when overflowCount is set) or 4, plus an optional +N badge.
  */
 // TODO: rename to AvatarGroup
 export const GroupAvatar = ({
   className,
-  groupChannelDisplayInfo,
+  displayMembers = [],
   isOnline,
   overflowCount,
   size,
   ...rest
 }: GroupAvatarProps) => {
   const displayCountBadge = typeof overflowCount === 'number' && overflowCount > 0;
 
-  if (!groupChannelDisplayInfo || groupChannelDisplayInfo.length < 2) {
-    const [firstUser] = groupChannelDisplayInfo || [];
+  if (displayMembers.length < 2) {
+    const firstUser = displayMembers[0];
 
     return (
       <Avatar
@@ -64,7 +69,7 @@ export const GroupAvatar = ({
       role='button'
       {...rest}
     >
-      {groupChannelDisplayInfo
+      {displayMembers
         .slice(0, displayCountBadge ? 2 : 4)
         .map(({ imageUrl, userName }, index) => (
           <Avatar

src/components/ChannelHeader/ChannelHeader.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { IconLayoutAlignLeft } from '../Icons/icons';
-import type { ChannelAvatarProps } from '../Avatar';
-import { Avatar as DefaultAvatar } from '../Avatar';
+import { type ChannelAvatarProps, ChannelAvatar as DefaultAvatar } from '../Avatar';
 import { useChannelHeaderOnlineStatus } from './hooks/useChannelHeaderOnlineStatus';
 import { useChannelPreviewInfo } from '../ChannelPreview/hooks/useChannelPreviewInfo';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
@@ -33,7 +32,7 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
   } = props;
 
   const { channel } = useChannelStateContext();
-  const { navOpen } = useChatContext('ChannelHeader');
+  const { navOpen } = useChatContext();
   const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
     channel,
     overrideImage,
@@ -60,8 +59,9 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
       </div>
       <Avatar
         className='str-chat__avatar--channel-header'
-        groupChannelDisplayInfo={groupChannelDisplayInfo}
+        displayMembers={groupChannelDisplayInfo?.members}
         imageUrl={displayImage}
+        overflowCount={groupChannelDisplayInfo?.overflowCount}
         size='lg'
         userName={displayTitle}
       />

src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -66,8 +66,9 @@ const UnMemoizedChannelPreviewMessenger = (props: ChannelPreviewUIComponentProps
         role='option'
       >
         <Avatar
-          groupChannelDisplayInfo={groupChannelDisplayInfo}
+          displayMembers={groupChannelDisplayInfo?.members}
           imageUrl={displayImage}
+          overflowCount={groupChannelDisplayInfo?.overflowCount}
           size='xl'
           userName={avatarName}
         />

src/components/ChannelPreview/__tests__/utils.test.js

@@ -14,7 +14,11 @@ import {
   useMockedApis,
 } from 'mock-builders';
 
-import { getDisplayImage, getDisplayTitle, getLatestMessagePreview } from '../utils';
+import {
+  getChannelDisplayImage,
+  getGroupChannelDisplayInfo,
+  getLatestMessagePreview,
+} from '../utils';
 import { generateStaticLocationResponse } from '../../../mock-builders';
 import { render } from '@testing-library/react';
 
@@ -107,7 +111,7 @@ describe('ChannelPreview utils', () => {
         generateChannel({ channel: { name } }),
       );
 
-      expect(getDisplayTitle(channel, chatClient.user)).toBe(name);
+      expect(channel.getDisplayName()).toBe(name);
     });
 
     it('should return name of other member of conversation if only 2 members and channel name doesnot exist', async () => {
@@ -120,7 +124,7 @@ describe('ChannelPreview utils', () => {
           ],
         }),
       );
-      expect(getDisplayTitle(channel, chatClient.user)).toBe(otherUser.name);
+      expect(channel.getDisplayName()).toBe(otherUser.name);
     });
   });
 
@@ -131,10 +135,10 @@ describe('ChannelPreview utils', () => {
         generateChannel({ channel: { image } }),
       );
 
-      expect(getDisplayImage(channel, chatClient.user)).toBe(image);
+      expect(channel.getDisplayImage()).toBe(image);
     });
 
-    it('should return picture of other member of conversation if only 2 members and channel name doesnot exist', async () => {
+    it('should return null when no image is available (image fallback removed)', async () => {
       const otherUser = generateUser();
       const channel = await getQueriedChannelInstance(
         generateChannel({
@@ -144,7 +148,74 @@ describe('ChannelPreview utils', () => {
           ],
         }),
       );
-      expect(getDisplayImage(channel, chatClient.user)).toBe(otherUser.image);
+      // getDisplayImage no longer falls back to member image, only channel.data.image
+      expect(channel.getDisplayImage()).toBeNull();
+    });
+  });
+
+  describe('getChannelDisplayImage (utils)', () => {
+    it('returns channel.data.image when set', async () => {
+      const image = nanoid();
+      const channel = await getQueriedChannelInstance(
+        generateChannel({ channel: { image } }),
+      );
+      expect(getChannelDisplayImage(channel)).toBe(image);
+    });
+
+    it('returns other member user.image for DM (2 members) when channel has no image', async () => {
+      const otherUser = generateUser({ image: 'https://other-avatar.jpg' });
+      const channel = await getQueriedChannelInstance(
+        generateChannel({
+          members: [
+            generateMember({ user: otherUser }),
+            generateMember({ user: clientUser }),
+          ],
+        }),
+      );
+      expect(getChannelDisplayImage(channel)).toBe('https://other-avatar.jpg');
+    });
+
+    it('returns undefined for DM when other member has no image', async () => {
+      const otherUser = generateUser({ image: undefined });
+      const channel = await getQueriedChannelInstance(
+        generateChannel({
+          members: [
+            generateMember({ user: otherUser }),
+            generateMember({ user: clientUser }),
+          ],
+        }),
+      );
+      expect(getChannelDisplayImage(channel)).toBeUndefined();
+    });
+  });
+
+  describe('getGroupChannelDisplayInfo (utils)', () => {
+    it('returns undefined for 2 or fewer members', async () => {
+      const channel = await getQueriedChannelInstance(
+        generateChannel({
+          members: [
+            generateMember({ user: generateUser() }),
+            generateMember({ user: clientUser }),
+          ],
+        }),
+      );
+      expect(getGroupChannelDisplayInfo(channel)).toBeUndefined();
+    });
+
+    it('returns members and overflowCount for 3+ members', async () => {
+      const channel = await getQueriedChannelInstance(
+        generateChannel({
+          members: [
+            generateMember({ user: generateUser({ image: 'a.jpg', name: 'A' }) }),
+            generateMember({ user: generateUser({ image: 'b.jpg', name: 'B' }) }),
+            generateMember({ user: clientUser }),
+          ],
+        }),
+      );
+      const info = getGroupChannelDisplayInfo(channel);
+      expect(info).toBeDefined();
+      expect(info.members.length).toBeGreaterThanOrEqual(2);
+      expect(info.members.every((m) => 'imageUrl' in m && 'userName' in m)).toBe(true);
     });
   });
 });