stream-chat-react 12.2.0 → 12.2.2

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

@@ -7,6 +7,7 @@ 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 { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics, PaginatorProps } from '../../types/types';
 export type ChannelListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     /** Additional props for underlying ChannelSearch component and channel search controller, [available props](https://getstream.io/chat/docs/sdk/react/utility-components/channel_search/#props) */
@@ -32,6 +33,8 @@ export type ChannelListProps<StreamChatGenerics extends DefaultStreamChatGeneric
     EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>;
     /** An object containing channel query filters */
     filters?: ChannelFilters<StreamChatGenerics>;
+    /** Custom function that generates the message preview in ChannelPreview component */
+    getLatestMessagePreview?: (channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage']) => string | JSX.Element;
     /** Custom UI component to display the container for the queried channels, defaults to and accepts same props as: [ChannelListMessenger](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListMessenger.tsx) */
     List?: React.ComponentType<ChannelListMessengerProps<StreamChatGenerics>>;
     /** Custom UI component to display the loading error indicator, defaults to component that renders null */

package/dist/components/ChannelList/ChannelList.js

@@ -28,7 +28,7 @@ const DEFAULT_FILTERS = {};
 const DEFAULT_OPTIONS = {};
 const DEFAULT_SORT = {};
 const UnMemoizedChannelList = (props) => {
-    const { additionalChannelSearchProps, Avatar = DefaultAvatar, allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn, ChannelSearch = DefaultChannelSearch, customActiveChannel, customQueryChannels, EmptyStateIndicator = DefaultEmptyStateIndicator, filters, LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels, List = ChannelListMessenger, lockChannelOrder, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, options, Paginator = LoadMorePaginator, Preview, recoveryThrottleIntervalMs, renderChannels, sendChannelsToList = false, setActiveChannelOnMount = true, showChannelSearch = false, sort = DEFAULT_SORT, watchers = {}, } = props;
+    const { additionalChannelSearchProps, Avatar = DefaultAvatar, allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn, ChannelSearch = DefaultChannelSearch, customActiveChannel, customQueryChannels, EmptyStateIndicator = DefaultEmptyStateIndicator, filters, getLatestMessagePreview, LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels, List = ChannelListMessenger, lockChannelOrder, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, options, Paginator = LoadMorePaginator, Preview, recoveryThrottleIntervalMs, renderChannels, sendChannelsToList = false, setActiveChannelOnMount = true, showChannelSearch = false, sort = DEFAULT_SORT, watchers = {}, } = props;
     const { channel, channelsQueryState, client, closeMobileNav, customClasses, navOpen = false, setActiveChannel, theme, useImageFlagEmojisOnWindows, } = useChatContext('ChannelList');
     const channelListRef = useRef(null);
     const [channelUpdateCount, setChannelUpdateCount] = useState(0);
@@ -119,6 +119,7 @@ const UnMemoizedChannelList = (props) => {
             channel: item,
             // forces the update of preview component on channel update
             channelUpdateCount,
+            getLatestMessagePreview,
             key: item.cid,
             Preview,
             setActiveChannel,

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

@@ -4,6 +4,7 @@ import { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 import type { Channel } from 'stream-chat';
 import type { AvatarProps } from '../Avatar/Avatar';
 import type { StreamMessage } from '../../context/ChannelStateContext';
+import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export type ChannelPreviewUIComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ChannelPreviewProps<StreamChatGenerics> & {
     /** If the component's channel is the active (selected) Channel */
@@ -14,8 +15,10 @@ export type ChannelPreviewUIComponentProps<StreamChatGenerics extends DefaultStr
     displayTitle?: string;
     /** The last message received in a channel */
     lastMessage?: StreamMessage<StreamChatGenerics>;
-    /** Latest message preview to display, will be a string or JSX element supporting markdown. */
+    /** @deprecated Use latestMessagePreview prop instead. */
     latestMessage?: string | JSX.Element;
+    /** Latest message preview to display, will be a string or JSX element supporting markdown. */
+    latestMessagePreview?: string | JSX.Element;
     /** Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. */
     messageDeliveryStatus?: MessageDeliveryStatus;
     /** Number of unread Messages */
@@ -32,6 +35,8 @@ export type ChannelPreviewProps<StreamChatGenerics extends DefaultStreamChatGene
     channelUpdateCount?: number;
     /** Custom class for the channel preview root */
     className?: string;
+    /** Custom function that generates the message preview in ChannelPreview component */
+    getLatestMessagePreview?: (channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage']) => string | JSX.Element;
     key?: string;
     /** Custom ChannelPreview click handler function */
     onSelect?: (event: React.MouseEvent) => void;

package/dist/components/ChannelPreview/ChannelPreview.js

@@ -3,12 +3,12 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { ChannelPreviewMessenger } from './ChannelPreviewMessenger';
 import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 import { useChannelPreviewInfo } from './hooks/useChannelPreviewInfo';
-import { getLatestMessagePreview } from './utils';
+import { getLatestMessagePreview as defaultGetLatestMessagePreview } from './utils';
 import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 export const ChannelPreview = (props) => {
-    const { channel, Preview = ChannelPreviewMessenger, channelUpdateCount } = 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 });
@@ -54,23 +54,25 @@ export const ChannelPreview = (props) => {
     }, 400), [channel, muted]);
     useEffect(() => {
         refreshUnreadCount();
-        const handleEvent = (event) => {
-            if (event.message)
-                setLastMessage(event.message);
+        const handleEvent = () => {
+            setLastMessage(channel.state.latestMessages[channel.state.latestMessages.length - 1]);
             refreshUnreadCount();
         };
         channel.on('message.new', handleEvent);
         channel.on('message.updated', handleEvent);
         channel.on('message.deleted', handleEvent);
+        channel.on('message.undeleted', handleEvent);
+        channel.on('channel.truncated', handleEvent);
         return () => {
             channel.off('message.new', handleEvent);
             channel.off('message.updated', handleEvent);
             channel.off('message.deleted', handleEvent);
+            channel.off('message.undeleted', handleEvent);
+            channel.off('channel.truncated', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [refreshUnreadCount, channelUpdateCount]);
+    }, [channel, refreshUnreadCount, channelUpdateCount]);
     if (!Preview)
         return null;
-    const latestMessage = getLatestMessagePreview(channel, t, userLanguage);
-    return (React.createElement(Preview, { ...props, active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, messageDeliveryStatus: messageDeliveryStatus, setActiveChannel: setActiveChannel, unread: unread }));
+    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 }));
 };

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, latestMessage, onSelect: customOnSelectChannel, setActiveChannel, unread, watchers, } = props;
+    const { active, Avatar = DefaultAvatar, channel, className: customClassName = '', displayImage, displayTitle, 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) => {
@@ -24,7 +24,7 @@ const UnMemoizedChannelPreviewMessenger = (props) => {
                 React.createElement("div", { className: 'str-chat__channel-preview-messenger--name' },
                     React.createElement("span", null, displayTitle)),
                 !!unread && (React.createElement("div", { className: 'str-chat__channel-preview-unread-badge', "data-testid": 'unread-badge' }, unread))),
-            React.createElement("div", { className: 'str-chat__channel-preview-messenger--last-message' }, latestMessage))));
+            React.createElement("div", { className: 'str-chat__channel-preview-messenger--last-message' }, latestMessagePreview))));
 };
 /**
  * Used as preview component for channel item in [ChannelList](#channellist) component.

package/dist/components/ChannelPreview/utils.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactMarkdown from 'react-markdown';
 export const renderPreviewText = (text) => React.createElement(ReactMarkdown, { skipHtml: true }, text);
 export const getLatestMessagePreview = (channel, t, userLanguage = 'en') => {
-    const latestMessage = channel.state.messages[channel.state.messages.length - 1];
+    const latestMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
     const previewTextToRender = latestMessage?.i18n?.[`${userLanguage}_text`] ||
         latestMessage?.text;
     if (!latestMessage) {
@@ -12,8 +12,7 @@ export const getLatestMessagePreview = (channel, t, userLanguage = 'en') => {
         return t('Message deleted');
     }
     if (previewTextToRender) {
-        const renderedText = renderPreviewText(previewTextToRender);
-        return renderedText;
+        return renderPreviewText(previewTextToRender);
     }
     if (latestMessage.command) {
         return `/${latestMessage.command}`;

package/dist/components/MessageList/MessageList.js

@@ -125,9 +125,12 @@ const MessageListWithContext = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [highlightedMessageId]);
     const showEmptyStateIndicator = elements.length === 0 && !threadList;
+    const dialogManagerId = threadList
+        ? 'message-list-dialog-manager-thread'
+        : 'message-list-dialog-manager';
     return (React.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } },
         React.createElement(MessageListMainPanel, null,
-            React.createElement(DialogManagerProvider, { id: 'message-list-dialog-manager' },
+            React.createElement(DialogManagerProvider, { id: dialogManagerId },
                 !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
                 React.createElement("div", { className: clsx(messageListClass, customClasses?.threadList), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React.createElement(EmptyStateIndicator, { listType: threadList ? 'thread' : 'message' })) : (React.createElement(InfiniteScroll, { className: 'str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React.createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React.createElement(LoadingIndicator, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore, threshold: loadMoreScrollThreshold, ...restInternalInfiniteScrollProps },
                     React.createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -189,9 +189,12 @@ const VirtualizedMessageListWithContext = (props) => {
     }, [highlightedMessageId, processedMessages]);
     if (!processedMessages)
         return null;
+    const dialogManagerId = threadList
+        ? 'virtualized-message-list-dialog-manager-thread'
+        : 'virtualized-message-list-dialog-manager';
     return (React.createElement(React.Fragment, null,
         React.createElement(MessageListMainPanel, null,
-            React.createElement(DialogManagerProvider, { id: 'virtualized-message-list-dialog-manager' },
+            React.createElement(DialogManagerProvider, { id: dialogManagerId },
                 !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
                 React.createElement("div", { className: customClasses?.virtualizedMessageList || 'str-chat__virtual-list' },
                     React.createElement(Virtuoso, { atBottomStateChange: atBottomStateChange, atBottomThreshold: 100, atTopStateChange: atTopStateChange, atTopThreshold: 100, className: 'str-chat__message-list-scroll', components: {

package/dist/index.browser.cjs

@@ -39019,7 +39019,7 @@ var UnMemoizedChannelPreviewMessenger = (props) => {
     className: customClassName = "",
     displayImage,
     displayTitle,
-    latestMessage,
+    latestMessagePreview,
     onSelect: customOnSelectChannel,
     setActiveChannel,
     unread,
@@ -39061,7 +39061,7 @@ var UnMemoizedChannelPreviewMessenger = (props) => {
         name: avatarName
       }
     )),
-    /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-end" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-end-first-row" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-messenger--name" }, /* @__PURE__ */ import_react83.default.createElement("span", null, displayTitle)), !!unread && /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-unread-badge", "data-testid": "unread-badge" }, unread)), /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-messenger--last-message" }, latestMessage))
+    /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-end" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-end-first-row" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-messenger--name" }, /* @__PURE__ */ import_react83.default.createElement("span", null, displayTitle)), !!unread && /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-unread-badge", "data-testid": "unread-badge" }, unread)), /* @__PURE__ */ import_react83.default.createElement("div", { className: "str-chat__channel-preview-messenger--last-message" }, latestMessagePreview))
   );
 };
 var ChannelPreviewMessenger = import_react83.default.memo(
@@ -39088,7 +39088,7 @@ var import_react86 = require("react");
 var import_react85 = __toESM(require("react"));
 var renderPreviewText = (text6) => /* @__PURE__ */ import_react85.default.createElement(ReactMarkdown, { skipHtml: true }, text6);
 var getLatestMessagePreview = (channel, t2, userLanguage = "en") => {
-  const latestMessage = channel.state.messages[channel.state.messages.length - 1];
+  const latestMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
   const previewTextToRender = latestMessage?.i18n?.[`${userLanguage}_text`] || latestMessage?.text;
   if (!latestMessage) {
     return t2("Nothing yet...");
@@ -39097,8 +39097,7 @@ var getLatestMessagePreview = (channel, t2, userLanguage = "en") => {
     return t2("Message deleted");
   }
   if (previewTextToRender) {
-    const renderedText = renderPreviewText(previewTextToRender);
-    return renderedText;
+    return renderPreviewText(previewTextToRender);
   }
   if (latestMessage.command) {
     return `/${latestMessage.command}`;
@@ -39206,7 +39205,12 @@ var useMessageDeliveryStatus = ({
 
 // src/components/ChannelPreview/ChannelPreview.tsx
 var ChannelPreview = (props) => {
-  const { channel, Preview = ChannelPreviewMessenger, channelUpdateCount } = props;
+  const {
+    channel,
+    Preview = ChannelPreviewMessenger,
+    channelUpdateCount,
+    getLatestMessagePreview: getLatestMessagePreview2 = getLatestMessagePreview
+  } = props;
   const { channel: activeChannel, client, setActiveChannel } = useChatContext(
     "ChannelPreview"
   );
@@ -39253,21 +39257,25 @@ var ChannelPreview = (props) => {
   );
   (0, import_react88.useEffect)(() => {
     refreshUnreadCount();
-    const handleEvent = (event) => {
-      if (event.message) setLastMessage(event.message);
+    const handleEvent = () => {
+      setLastMessage(channel.state.latestMessages[channel.state.latestMessages.length - 1]);
       refreshUnreadCount();
     };
     channel.on("message.new", handleEvent);
     channel.on("message.updated", handleEvent);
     channel.on("message.deleted", handleEvent);
+    channel.on("message.undeleted", handleEvent);
+    channel.on("channel.truncated", handleEvent);
     return () => {
       channel.off("message.new", handleEvent);
       channel.off("message.updated", handleEvent);
       channel.off("message.deleted", handleEvent);
+      channel.off("message.undeleted", handleEvent);
+      channel.off("channel.truncated", handleEvent);
     };
-  }, [refreshUnreadCount, channelUpdateCount]);
+  }, [channel, refreshUnreadCount, channelUpdateCount]);
   if (!Preview) return null;
-  const latestMessage = getLatestMessagePreview(channel, t2, userLanguage);
+  const latestMessagePreview = getLatestMessagePreview2(channel, t2, userLanguage);
   return /* @__PURE__ */ import_react88.default.createElement(
     Preview,
     {
@@ -39276,7 +39284,8 @@ var ChannelPreview = (props) => {
       displayImage,
       displayTitle,
       lastMessage,
-      latestMessage,
+      latestMessage: latestMessagePreview,
+      latestMessagePreview,
       messageDeliveryStatus,
       setActiveChannel,
       unread
@@ -44258,7 +44267,8 @@ var MessageListWithContext = (props) => {
     }
   }, [highlightedMessageId]);
   const showEmptyStateIndicator = elements.length === 0 && !threadList;
-  return /* @__PURE__ */ import_react176.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react176.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react176.default.createElement(DialogManagerProvider, { id: "message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react176.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react176.default.createElement(
+  const dialogManagerId = threadList ? "message-list-dialog-manager-thread" : "message-list-dialog-manager";
+  return /* @__PURE__ */ import_react176.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react176.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react176.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react176.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react176.default.createElement(
     "div",
     {
       className: (0, import_clsx38.default)(messageListClass, customClasses?.threadList),
@@ -44971,7 +44981,8 @@ var VirtualizedMessageListWithContext = (props) => {
     };
   }, [highlightedMessageId, processedMessages]);
   if (!processedMessages) return null;
-  return /* @__PURE__ */ import_react186.default.createElement(import_react186.default.Fragment, null, /* @__PURE__ */ import_react186.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react186.default.createElement(DialogManagerProvider, { id: "virtualized-message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react186.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react186.default.createElement("div", { className: customClasses?.virtualizedMessageList || "str-chat__virtual-list" }, /* @__PURE__ */ import_react186.default.createElement(
+  const dialogManagerId = threadList ? "virtualized-message-list-dialog-manager-thread" : "virtualized-message-list-dialog-manager";
+  return /* @__PURE__ */ import_react186.default.createElement(import_react186.default.Fragment, null, /* @__PURE__ */ import_react186.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react186.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react186.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react186.default.createElement("div", { className: customClasses?.virtualizedMessageList || "str-chat__virtual-list" }, /* @__PURE__ */ import_react186.default.createElement(
     import_react_virtuoso3.Virtuoso,
     {
       atBottomStateChange,
@@ -47272,6 +47283,7 @@ var UnMemoizedChannelList = (props) => {
     customQueryChannels,
     EmptyStateIndicator: EmptyStateIndicator2 = EmptyStateIndicator,
     filters,
+    getLatestMessagePreview: getLatestMessagePreview2,
     LoadingErrorIndicator: LoadingErrorIndicator2 = NullComponent,
     LoadingIndicator: LoadingIndicator2 = LoadingChannels,
     List: List2 = ChannelListMessenger,
@@ -47404,6 +47416,7 @@ var UnMemoizedChannelList = (props) => {
       channel: item2,
       // forces the update of preview component on channel update
       channelUpdateCount,
+      getLatestMessagePreview: getLatestMessagePreview2,
       key: item2.cid,
       Preview,
       setActiveChannel,