stream-chat-react 12.5.1 → 12.6.0

package/dist/assets/icons/stream-chat-icons.svg

@@ -26,8 +26,6 @@
 
 <glyph glyph-name="delivered" unicode="&#xe809;" d="M375 175l-175 175-58-58 233-234 500 500-58 59-442-442z" horiz-adv-x="1000" />
 
-<glyph glyph-name="play" unicode="&#xe80a;" d="M271 642v-584l458 292-458 292z" horiz-adv-x="1000" />
-
 <glyph glyph-name="reaction" unicode="&#xe80b;" d="M500 767c-230 0-417-187-417-417 0-230 187-417 417-417 230 0 417 187 417 417 0 230-187 417-417 417z m0-750c-184 0-333 149-333 333 0 184 149 333 333 333 184 0 333-149 333-333 0-184-149-333-333-333z m146 375c34 0 62 28 62 62 0 35-28 63-62 63-35 0-63-28-63-63 0-34 28-62 63-62z m-292 0c35 0 63 28 63 62 0 35-28 63-63 63-34 0-62-28-62-63 0-34 28-62 62-62z m146-271c97 0 180 61 213 146h-426c33-85 116-146 213-146z" horiz-adv-x="1000" />
 
 <glyph glyph-name="error" unicode="&#xe80c;" d="M500 767c-230 0-417-187-417-417 0-230 187-417 417-417 230 0 417 187 417 417 0 230-187 417-417 417z m42-625h-84v83h84v-83z m0 166h-84v250h84v-250z" horiz-adv-x="1000" />
@@ -45,6 +43,8 @@
 <glyph glyph-name="mic" unicode="&#xe812;" d="M350 225c83 0 150 67 150 150v300c0 83-67 150-150 150-83 0-150-67-150-150v-300c0-83 67-150 150-150z m250 150c0-138-112-250-250-250-138 0-250 112-250 250h-100c0-176 131-321 300-346v-154h100v154c170 25 300 170 300 346h-100z" horiz-adv-x="700" />
 
 <glyph glyph-name="bin" unicode="&#xe813;" d="M250 58c0-45 38-83 83-83h334c46 0 83 38 83 83v417c0 46-37 83-83 83h-334c-45 0-83-37-83-83v-417z m500 625h-104l-30 30c-7 7-18 12-29 12h-174c-11 0-22-5-29-12l-30-30h-104c-23 0-42-18-42-41 0-23 19-42 42-42h500c23 0 42 19 42 42 0 23-19 41-42 41z" horiz-adv-x="1000" />
+
+<glyph glyph-name="play" unicode="&#xe814;" d="M398 640c-28 19-65-1-65-34v-511c0-34 37-54 65-35l383 255c25 17 25 53 0 70l-383 255z" horiz-adv-x="1000" />
 </font>
 </defs>
 </svg>

package/dist/components/Avatar/Avatar.d.ts

@@ -2,15 +2,15 @@ import React from 'react';
 import type { UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export type AvatarProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** Custom class that will be merged with the default class */
+    /** Custom root element class that will be merged with the default class */
     className?: string;
     /** Image URL or default is an image of the first initial of the name if there is one  */
     image?: string | null;
     /** Name of the image, used for title tag fallback */
     name?: string;
-    /** click event handler */
+    /** click event handler attached to the component root element */
     onClick?: (event: React.BaseSyntheticEvent) => void;
-    /** mouseOver event handler */
+    /** mouseOver event handler attached to the component root element */
     onMouseOver?: (event: React.BaseSyntheticEvent) => void;
     /** The entire user object for the chat user displayed in the component */
     user?: UserResponse<StreamChatGenerics>;

package/dist/components/Avatar/ChannelAvatar.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { AvatarProps, GroupAvatarProps } from './index';
+import type { DefaultStreamChatGenerics } from '../../types';
+export type ChannelAvatarProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<GroupAvatarProps> & AvatarProps<StreamChatGenerics>;
+export declare const ChannelAvatar: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ groupChannelDisplayInfo, image, name, user, ...sharedProps }: ChannelAvatarProps<StreamChatGenerics>) => React.JSX.Element;

package/dist/components/Avatar/ChannelAvatar.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Avatar, GroupAvatar } from './index';
+export const ChannelAvatar = ({ groupChannelDisplayInfo, image, name, user, ...sharedProps }) => {
+    if (groupChannelDisplayInfo) {
+        return React.createElement(GroupAvatar, { groupChannelDisplayInfo: groupChannelDisplayInfo, ...sharedProps });
+    }
+    return React.createElement(Avatar, { image: image, name: name, user: user, ...sharedProps });
+};

package/dist/components/Avatar/GroupAvatar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AvatarProps } from './Avatar';
+import { GroupChannelDisplayInfo } from '../ChannelPreview';
+export type GroupAvatarProps = Pick<AvatarProps, 'className' | 'onClick' | 'onMouseOver'> & {
+    /** Mapping of image URLs to names which initials will be used as fallbacks in case image assets fail to load. */
+    groupChannelDisplayInfo: GroupChannelDisplayInfo;
+};
+export declare const GroupAvatar: ({ className, groupChannelDisplayInfo, onClick, onMouseOver, }: GroupAvatarProps) => React.JSX.Element;

package/dist/components/Avatar/GroupAvatar.js

@@ -0,0 +1,6 @@
+import clsx from 'clsx';
+import React from 'react';
+import { Avatar } from './Avatar';
+export const GroupAvatar = ({ className, groupChannelDisplayInfo, onClick, onMouseOver, }) => (React.createElement("div", { className: clsx(`str-chat__avatar-group`, { 'str-chat__avatar-group--three-part': groupChannelDisplayInfo.length === 3 }, className), "data-testid": 'group-avatar', onClick: onClick, onMouseOver: onMouseOver, role: 'button' }, groupChannelDisplayInfo.slice(0, 4).map(({ image, name }, i) => (React.createElement(Avatar, { className: clsx({
+        'str-chat__avatar--single': groupChannelDisplayInfo.length === 3 && i === 0,
+    }), image: image, key: `${name}-${image}-${i}`, name: name })))));

package/dist/components/Avatar/index.d.ts

@@ -1 +1,3 @@
 export * from './Avatar';
+export * from './ChannelAvatar';
+export * from './GroupAvatar';

package/dist/components/Avatar/index.js

@@ -1 +1,3 @@
 export * from './Avatar';
+export * from './ChannelAvatar';
+export * from './GroupAvatar';

package/dist/components/ChannelHeader/ChannelHeader.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { AvatarProps } from '../Avatar';
+import { ChannelAvatarProps } from '../Avatar';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export type ChannelHeaderProps = {
-    /** 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<AvatarProps>;
+    /** UI component to display an avatar, defaults to [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) component and accepts the same props as: [ChannelAvatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/ChannelAvatar.tsx) */
+    Avatar?: React.ComponentType<ChannelAvatarProps>;
     /** Manually set the image to render, defaults to the Channel image */
     image?: string;
     /** Show a little indicator that the Channel is live right now */

package/dist/components/ChannelHeader/ChannelHeader.js

@@ -13,7 +13,7 @@ export const ChannelHeader = (props) => {
     const { channel, watcher_count } = useChannelStateContext('ChannelHeader');
     const { openMobileNav } = useChatContext('ChannelHeader');
     const { t } = useTranslationContext('ChannelHeader');
-    const { displayImage, displayTitle } = useChannelPreviewInfo({
+    const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
         channel,
         overrideImage,
         overrideTitle,
@@ -22,7 +22,7 @@ export const ChannelHeader = (props) => {
     return (React.createElement("div", { className: 'str-chat__channel-header' },
         React.createElement("button", { "aria-label": t('aria/Menu'), className: 'str-chat__header-hamburger', onClick: openMobileNav },
             React.createElement(MenuIcon, null)),
-        React.createElement(Avatar, { className: 'str-chat__avatar--channel-header', image: displayImage, name: displayTitle }),
+        React.createElement(Avatar, { className: 'str-chat__avatar--channel-header', groupChannelDisplayInfo: groupChannelDisplayInfo, image: displayImage, name: displayTitle }),
         React.createElement("div", { className: 'str-chat__channel-header-end' },
             React.createElement("p", { className: 'str-chat__channel-header-title' },
                 displayTitle,

package/dist/components/ChannelList/ChannelList.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ChannelListMessengerProps } from './ChannelListMessenger';
 import { CustomQueryChannelsFn } from './hooks/usePaginatedChannels';
-import { AvatarProps } from '../Avatar/Avatar';
 import { ChannelPreviewUIComponentProps } from '../ChannelPreview/ChannelPreview';
 import { ChannelSearchProps } from '../ChannelSearch/ChannelSearch';
 import { EmptyStateIndicatorProps } from '../EmptyStateIndicator';
 import { LoadMorePaginatorProps } from '../LoadMore/LoadMorePaginator';
 import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from 'stream-chat';
+import type { ChannelAvatarProps } from '../Avatar';
 import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics, PaginatorProps } from '../../types/types';
 export type ChannelListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
@@ -19,8 +19,8 @@ export type ChannelListProps<StreamChatGenerics extends DefaultStreamChatGeneric
      * to false, which will prevent channels not in the list from incrementing the list. The default is true.
      */
     allowNewMessagesFromUnfilteredChannels?: boolean;
-    /** Custom UI component to display user 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<AvatarProps>;
+    /** UI component to display an avatar, defaults to [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) component and accepts the same props as: [ChannelAvatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/ChannelAvatar.tsx) */
+    Avatar?: React.ComponentType<ChannelAvatarProps>;
     /** Optional function to filter channels prior to loading in the DOM. Do not use any complex or async logic that would delay the loading of the ChannelList. We recommend using a pure function with array methods like filter/sort/reduce. */
     channelRenderFilterFn?: (channels: Array<Channel<StreamChatGenerics>>) => Array<Channel<StreamChatGenerics>>;
     /** Custom UI component to display search results, defaults to and accepts same props as: [ChannelSearch](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelSearch/ChannelSearch.tsx) */

package/dist/components/ChannelList/ChannelList.js

@@ -15,7 +15,7 @@ import { useNotificationRemovedFromChannelListener } from './hooks/useNotificati
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
 import { useUserPresenceChangedListener } from './hooks/useUserPresenceChangedListener';
 import { MAX_QUERY_CHANNELS_LIMIT, moveChannelUp } from './utils';
-import { Avatar as DefaultAvatar } from '../Avatar/Avatar';
+import { Avatar as DefaultAvatar } from '../Avatar';
 import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
 import { ChannelSearch as DefaultChannelSearch, } from '../ChannelSearch/ChannelSearch';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator, } from '../EmptyStateIndicator';

package/dist/components/ChannelPreview/ChannelPreview.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import { ChatContextValue } from '../../context/ChatContext';
 import { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 import type { Channel } from 'stream-chat';
-import type { AvatarProps } from '../Avatar/Avatar';
+import type { ChannelAvatarProps } from '../Avatar/ChannelAvatar';
+import type { GroupChannelDisplayInfo } from './utils';
 import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -13,6 +14,8 @@ export type ChannelPreviewUIComponentProps<StreamChatGenerics extends DefaultStr
     displayImage?: string;
     /** Title of Channel to display */
     displayTitle?: string;
+    /** Title of Channel to display */
+    groupChannelDisplayInfo?: GroupChannelDisplayInfo;
     /** The last message received in a channel */
     lastMessage?: StreamMessage<StreamChatGenerics>;
     /** @deprecated Use latestMessagePreview prop instead. */
@@ -29,8 +32,8 @@ export type ChannelPreviewProps<StreamChatGenerics extends DefaultStreamChatGene
     channel: Channel<StreamChatGenerics>;
     /** Current selected channel object */
     activeChannel?: Channel<StreamChatGenerics>;
-    /** Custom UI component to display user 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<AvatarProps>;
+    /** UI component to display an avatar, defaults to [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) component and accepts the same props as: [ChannelAvatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/ChannelAvatar.tsx) */
+    Avatar?: React.ComponentType<ChannelAvatarProps<StreamChatGenerics>>;
     /** Forces the update of preview component on channel update */
     channelUpdateCount?: number;
     /** Custom class for the channel preview root */

package/dist/components/ChannelPreview/ChannelPreview.js

@@ -11,7 +11,9 @@ export const ChannelPreview = (props) => {
     const { channel, Preview = ChannelPreviewMessenger, channelUpdateCount, getLatestMessagePreview = defaultGetLatestMessagePreview, } = props;
     const { channel: activeChannel, client, setActiveChannel } = useChatContext('ChannelPreview');
     const { t, userLanguage } = useTranslationContext('ChannelPreview');
-    const { displayImage, displayTitle } = useChannelPreviewInfo({ channel });
+    const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
+        channel,
+    });
     const [lastMessage, setLastMessage] = useState(channel.state.messages[channel.state.messages.length - 1]);
     const [unread, setUnread] = useState(0);
     const { messageDeliveryStatus } = useMessageDeliveryStatus({
@@ -74,5 +76,5 @@ export const ChannelPreview = (props) => {
     if (!Preview)
         return null;
     const latestMessagePreview = getLatestMessagePreview(channel, t, userLanguage);
-    return (React.createElement(Preview, { ...props, active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessagePreview, latestMessagePreview: latestMessagePreview, messageDeliveryStatus: messageDeliveryStatus, setActiveChannel: setActiveChannel, unread: unread }));
+    return (React.createElement(Preview, { ...props, active: isActive, displayImage: displayImage, displayTitle: displayTitle, groupChannelDisplayInfo: groupChannelDisplayInfo, lastMessage: lastMessage, latestMessage: latestMessagePreview, latestMessagePreview: latestMessagePreview, messageDeliveryStatus: messageDeliveryStatus, setActiveChannel: setActiveChannel, unread: unread }));
 };

package/dist/components/ChannelPreview/ChannelPreviewMessenger.js

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { Avatar as DefaultAvatar } from '../Avatar';
 const UnMemoizedChannelPreviewMessenger = (props) => {
-    const { active, Avatar = DefaultAvatar, channel, className: customClassName = '', displayImage, displayTitle, latestMessagePreview, onSelect: customOnSelectChannel, setActiveChannel, unread, watchers, } = props;
+    const { active, Avatar = DefaultAvatar, channel, className: customClassName = '', displayImage, displayTitle, groupChannelDisplayInfo, latestMessagePreview, onSelect: customOnSelectChannel, setActiveChannel, unread, watchers, } = props;
     const channelPreviewButton = useRef(null);
     const avatarName = displayTitle || channel.state.messages[channel.state.messages.length - 1]?.user?.id;
     const onSelectChannel = (e) => {
@@ -18,7 +18,7 @@ const UnMemoizedChannelPreviewMessenger = (props) => {
     };
     return (React.createElement("button", { "aria-label": `Select Channel: ${displayTitle || ''}`, "aria-selected": active, className: clsx(`str-chat__channel-preview-messenger str-chat__channel-preview`, active && 'str-chat__channel-preview-messenger--active', unread && unread >= 1 && 'str-chat__channel-preview-messenger--unread', customClassName), "data-testid": 'channel-preview-button', onClick: onSelectChannel, ref: channelPreviewButton, role: 'option' },
         React.createElement("div", { className: 'str-chat__channel-preview-messenger--left' },
-            React.createElement(Avatar, { className: 'str-chat__avatar--channel-preview', image: displayImage, name: avatarName })),
+            React.createElement(Avatar, { className: 'str-chat__avatar--channel-preview', groupChannelDisplayInfo: groupChannelDisplayInfo, image: displayImage, name: avatarName })),
         React.createElement("div", { className: 'str-chat__channel-preview-end' },
             React.createElement("div", { className: 'str-chat__channel-preview-end-first-row' },
                 React.createElement("div", { className: 'str-chat__channel-preview-messenger--name' },

package/dist/components/ChannelPreview/hooks/useChannelPreviewInfo.d.ts

@@ -10,4 +10,5 @@ export type ChannelPreviewInfoParams<StreamChatGenerics extends DefaultStreamCha
 export declare const useChannelPreviewInfo: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ChannelPreviewInfoParams<StreamChatGenerics>) => {
     displayImage: string | undefined;
     displayTitle: string | undefined;
+    groupChannelDisplayInfo: import("../utils").GroupChannelDisplayInfo | undefined;
 };

package/dist/components/ChannelPreview/hooks/useChannelPreviewInfo.js

@@ -1,28 +1,32 @@
 import { useEffect, useState } from 'react';
-import { getDisplayImage, getDisplayTitle } from '../utils';
+import { getDisplayImage, getDisplayTitle, getGroupChannelDisplayInfo } from '../utils';
 import { useChatContext } from '../../../context';
 export const useChannelPreviewInfo = (props) => {
     const { channel, overrideImage, overrideTitle } = props;
     const { client } = useChatContext('useChannelPreviewInfo');
     const [displayTitle, setDisplayTitle] = useState(() => overrideTitle || getDisplayTitle(channel, client.user));
     const [displayImage, setDisplayImage] = useState(() => overrideImage || getDisplayImage(channel, client.user));
+    const [groupChannelDisplayInfo, setGroupDisplayChannelInfo] = useState(() => getGroupChannelDisplayInfo(channel));
     useEffect(() => {
         if (overrideTitle && overrideImage)
             return;
-        const updateTitles = () => {
+        const updateInfo = () => {
             if (!overrideTitle)
                 setDisplayTitle(getDisplayTitle(channel, client.user));
-            if (!overrideImage)
+            if (!overrideImage) {
                 setDisplayImage(getDisplayImage(channel, client.user));
+                setGroupDisplayChannelInfo(getGroupChannelDisplayInfo(channel));
+            }
         };
-        updateTitles();
-        client.on('user.updated', updateTitles);
+        updateInfo();
+        client.on('user.updated', updateInfo);
         return () => {
-            client.off('user.updated', updateTitles);
+            client.off('user.updated', updateInfo);
         };
     }, [channel, channel.data, client, overrideImage, overrideTitle]);
     return {
         displayImage: overrideImage || displayImage,
         displayTitle: overrideTitle || displayTitle,
+        groupChannelDisplayInfo,
     };
 };

package/dist/components/ChannelPreview/utils.d.ts

@@ -4,5 +4,10 @@ import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare const renderPreviewText: (text: string) => React.JSX.Element;
 export declare const getLatestMessagePreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage?: TranslationContextValue['userLanguage']) => string | JSX.Element;
+export type GroupChannelDisplayInfo = {
+    image?: string;
+    name?: string;
+}[];
+export declare const getGroupChannelDisplayInfo: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>) => GroupChannelDisplayInfo | undefined;
 export declare const getDisplayTitle: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>, currentUser?: UserResponse<StreamChatGenerics>) => string | undefined;
 export declare const getDisplayImage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>, currentUser?: UserResponse<StreamChatGenerics>) => string | undefined;

package/dist/components/ChannelPreview/utils.js

@@ -57,6 +57,21 @@ export const getLatestMessagePreview = (channel, t, userLanguage = 'en') => {
     }
     return t('Empty message...');
 };
+export const getGroupChannelDisplayInfo = (channel) => {
+    const members = Object.values(channel.state.members);
+    if (members.length <= 2)
+        return;
+    const info = [];
+    for (let i = 0; i < members.length; i++) {
+        const { user } = members[i];
+        if (!user?.name && !user?.image)
+            continue;
+        info.push({ image: user.image, name: user.name });
+        if (info.length === 4)
+            break;
+    }
+    return info;
+};
 const getChannelDisplayInfo = (info, channel, currentUser) => {
     if (channel.data?.[info])
         return channel.data[info];

package/dist/components/ChatAutoComplete/ChatAutoComplete.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import type { CommandResponse, UserResponse } from 'stream-chat';
 import type { TriggerSettings } from '../MessageInput/DefaultTriggerProvider';
 import type { CustomTrigger, DefaultStreamChatGenerics, UnknownType } from '../../types/types';
-import type { EmojiSearchIndex } from '../MessageInput';
+import { EmojiSearchIndex, EmojiSearchIndexResult } from '../MessageInput';
 type ObjectUnion<T> = T[keyof T];
 export type SuggestionCommand<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = CommandResponse<StreamChatGenerics>;
 export type SuggestionUser<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = UserResponse<StreamChatGenerics>;
-export type SuggestionEmoji<T extends UnknownType = UnknownType> = Awaited<ReturnType<EmojiSearchIndex<T>['search']>>;
+export type SuggestionEmoji<T extends UnknownType = UnknownType> = EmojiSearchIndexResult & T;
 export type SuggestionItem<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, T extends UnknownType = UnknownType> = SuggestionUser<StreamChatGenerics> | SuggestionCommand<StreamChatGenerics> | SuggestionEmoji<T>;
 export type SuggestionItemProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, T extends UnknownType = UnknownType> = {
     className: string;

package/dist/components/Message/utils.d.ts

@@ -76,5 +76,5 @@ export interface TooltipUsernameMapper {
 export declare const mapToUserNameOrId: TooltipUsernameMapper;
 export declare const getReadByTooltipText: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(users: UserResponse<StreamChatGenerics>[], t: TFunction, client: StreamChat<StreamChatGenerics>, tooltipUserNameMapper: TooltipUsernameMapper) => string;
 export declare const isOnlyEmojis: (text?: string) => boolean;
-export declare const isMessageBounced: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: Pick<StreamMessage<StreamChatGenerics>, 'type' | 'moderation_details'>) => boolean;
+export declare const isMessageBounced: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: Pick<StreamMessage<StreamChatGenerics>, 'type' | 'moderation' | 'moderation_details'>) => boolean;
 export declare const isMessageEdited: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: Pick<StreamMessage<StreamChatGenerics>, 'message_text_updated_at'>) => boolean;

package/dist/components/Message/utils.js

@@ -308,5 +308,6 @@ export const isOnlyEmojis = (text) => {
     return !noSpace;
 };
 export const isMessageBounced = (message) => message.type === 'error' &&
-    message.moderation_details?.action === 'MESSAGE_RESPONSE_ACTION_BOUNCE';
+    (message.moderation_details?.action === 'MESSAGE_RESPONSE_ACTION_BOUNCE' ||
+        message.moderation?.action === 'bounce');
 export const isMessageEdited = (message) => !!message.message_text_updated_at;