[CLNP-6032]Display members' name instead of default AI chatbot channel name (#1287)

https://sendbird.atlassian.net/browse/CLNP-6032

### Changelog
* Display members' name instead of default AI chatbot channel name, like
the `Group Channel` does.

Author: git-babel

src/modules/ChannelSettings/components/ChannelProfile/index.tsx

@@ -13,6 +13,7 @@ import Label, {
 } from '../../../../ui/Label';
 
 import EditDetailsModal from '../EditDetailsModal';
+import { isDefaultChannelName } from '../../../../utils';
 
 const ChannelProfile: React.FC = () => {
   const state = useSendbirdStateContext();
@@ -28,14 +29,11 @@ const ChannelProfile: React.FC = () => {
   const channel = channelSettingStore?.channel;
 
   const channelName = useMemo(() => {
-    if (channel?.name && channel.name !== 'Group Channel') {
-      return channel.name;
-    }
-    if (channel?.name === 'Group Channel' || !channel?.name) {
-      return (channel?.members || []).map((member) => member.nickname || stringSet.NO_NAME).join(', ');
-    }
+    if (!channel?.name && !channel?.members) return stringSet.NO_TITLE;
 
-    return stringSet.NO_TITLE;
+    if (isDefaultChannelName(channel)) return (channel?.members || []).map((member) => member.nickname || stringSet.NO_NAME).join(', ');
+
+    return channel.name;
   }, [channel?.name, channel?.joinedMemberCount]);
 
   return (

src/modules/ChannelSettings/components/LeaveChannel/index.tsx

@@ -15,6 +15,7 @@ import Label, {
   LabelTypography,
   LabelColors,
 } from '../../../../ui/Label';
+import { isDefaultChannelName } from '../../../../utils';
 
 export type LeaveChannelProps = {
   onSubmit: () => void;
@@ -34,14 +35,11 @@ const LeaveChannel: React.FC<LeaveChannelProps> = (props: LeaveChannelProps) =>
   const isOnline = state?.config?.isOnline;
   const { isMobile } = useMediaQueryContext();
   const getChannelName = (channel: GroupChannel | null) => {
-    if (channel?.name && channel?.name !== 'Group Channel') {
-      return channel.name;
-    }
-    if (channel?.name === 'Group Channel' || !channel?.name) {
-      return (channel?.members || []).map((member) => member.nickname || stringSet.NO_NAME).join(', ');
-    }
+    if (!channel?.name && !channel?.members) return stringSet.NO_TITLE;
 
-    return stringSet.NO_TITLE;
+    if (isDefaultChannelName(channel)) return (channel?.members || []).map((member) => member.nickname || stringSet.NO_NAME).join(', ');
+
+    return channel.name;
   };
   if (isMobile) {
     return (

src/modules/GroupChannel/components/GroupChannelHeader/utils.ts

@@ -1,5 +1,6 @@
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import { LabelStringSet } from '../../../../ui/Label';
+import { isDefaultChannelName } from '../../../../utils';
 
 export const getChannelTitle = (
   channel: GroupChannel,
@@ -10,7 +11,7 @@ export const getChannelTitle = (
   if (!channel?.name && !channel?.members) {
     return LABEL_STRING_SET.NO_TITLE;
   }
-  if (channel?.name && channel.name !== 'Group Channel') {
+  if (!isDefaultChannelName(channel)) {
     return channel.name;
   }
 

src/modules/GroupChannelList/components/GroupChannelListItem/utils.ts

@@ -3,14 +3,22 @@ import isToday from 'date-fns/isToday';
 import format from 'date-fns/format';
 import isThisYear from 'date-fns/isThisYear';
 import isYesterday from 'date-fns/isYesterday';
-import { isAudio, isGif, isImage, isTemplateMessage, isVideo, isVoiceMessageMimeType } from '../../../../utils';
+import {
+  isAudio,
+  isDefaultChannelName,
+  isGif,
+  isImage,
+  isTemplateMessage,
+  isVideo,
+  isVoiceMessageMimeType,
+} from '../../../../utils';
 import { LabelStringSet } from '../../../../ui/Label';
 
 export const getChannelTitle = (channel?: GroupChannel, currentUserId?: string, stringSet = LabelStringSet) => {
   if (!channel?.name && !channel?.members) {
     return stringSet.NO_TITLE;
   }
-  if (channel?.name && channel.name !== 'Group Channel') {
+  if (!isDefaultChannelName(channel)) {
     return channel.name;
   }
   if (channel?.members?.length === 1) {

src/modules/MessageSearch/components/MessageSearchUI/index.tsx

@@ -9,6 +9,7 @@ import MessageSearchItem from '../../../../ui/MessageSearchItem';
 import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
 import MessageSearchFileItem from '../../../../ui/MessageSearchFileItem';
 import { ClientSentMessages } from '../../../../types';
+import { isDefaultChannelName } from '../../../../utils';
 
 export interface MessageSearchUIProps {
   renderPlaceHolderError?: (props: void) => React.ReactElement;
@@ -75,13 +76,13 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
   };
 
   const getChannelName = () => {
-    if (currentChannel && currentChannel?.name && currentChannel?.name !== 'Group Channel') {
-      return currentChannel?.name;
+    if (!currentChannel?.name && !currentChannel?.members) {
+      return stringSet.NO_TITLE;
     }
-    if (currentChannel && (currentChannel?.name === 'Group Channel' || !currentChannel?.name)) {
-      return currentChannel.members.map((member) => member.nickname || stringSet.NO_NAME).join(', ');
-    }
-    return stringSet.NO_TITLE;
+
+    if (isDefaultChannelName(currentChannel)) return currentChannel.members.map((member) => member.nickname || stringSet.NO_NAME).join(', ');
+
+    return currentChannel?.name;
   };
 
   if (isInvalid && searchString && requestString) {

src/utils/__tests__/utils.spec.ts

@@ -3,11 +3,12 @@ import {
   isFileMessage,
   isUrl,
   isUserMessage,
-  isMultipleFilesMessage,
+  isMultipleFilesMessage, isDefaultChannelName, DEFAULT_GROUP_CHANNEL_NAME, DEFAULT_AI_CHATBOT_CHANNEL_NAME,
 } from '../index';
 import { AdminMessage, FileMessage, MultipleFilesMessage, UserMessage } from '@sendbird/chat/message';
 import { deleteNullish } from '../utils';
 import { isMobileIOS } from '../browser';
+import { GroupChannel } from '@sendbird/chat/groupChannel';
 
 describe('Global-utils: verify message type util functions', () => {
   it('should return true for each message', () => {
@@ -234,3 +235,51 @@ describe('deleteNullish', () => {
     expect(component({ a: null, b: '3', c: 4 })).toEqual({ a: 1, b: '3', c: 4 });
   });
 });
+
+describe('isDefaultChannelName', () => {
+  it('return true if channel is undefined', () => {
+    const result = isDefaultChannelName(undefined);
+
+    expect(result).toBe(true);
+  });
+
+  it('return true if channel name is undefined', () => {
+    const channel = {
+      name: undefined,
+    } as GroupChannel;
+
+    const result = isDefaultChannelName(channel);
+
+    expect(result).toBe(true);
+  });
+
+  it('return true if channel name is the default group channel name', () => {
+    const channel = {
+      name: DEFAULT_GROUP_CHANNEL_NAME,
+    } as GroupChannel;
+
+    const result = isDefaultChannelName(channel);
+
+    expect(result).toBe(true);
+  });
+
+  it('return true if channel name is the default AI chatbot channel name', () => {
+    const channel = {
+      name: DEFAULT_AI_CHATBOT_CHANNEL_NAME,
+    } as GroupChannel;
+
+    const result = isDefaultChannelName(channel);
+
+    expect(result).toBe(true);
+  });
+
+  it('return false if channel name is not default', () => {
+    const channel = {
+      name: 'test-channel-name',
+    } as GroupChannel;
+
+    const result = isDefaultChannelName(channel);
+
+    expect(result).toBe(false);
+  });
+});

src/utils/index.ts

@@ -994,3 +994,15 @@ export const isChannelJustCreated = (channel: GroupChannel): boolean => {
 export const getHTMLTextDirection = (direction: HTMLTextDirection, forceLeftToRightMessageLayout: boolean): string => {
   return forceLeftToRightMessageLayout ? 'ltr' : direction;
 };
+
+export const DEFAULT_GROUP_CHANNEL_NAME = 'Group Channel';
+
+export const DEFAULT_AI_CHATBOT_CHANNEL_NAME = 'AI Chatbot Widget Channel';
+
+export const isDefaultChannelName = (channel: GroupChannel) => {
+  return (
+    !channel?.name
+    || channel.name === DEFAULT_GROUP_CHANNEL_NAME
+    || channel.name === DEFAULT_AI_CHATBOT_CHANNEL_NAME
+  );
+};