stream-chat-react 13.7.0 → 13.8.0

package/dist/components/Channel/Channel.d.ts

@@ -5,7 +5,7 @@ import type { OnMentionAction } from './hooks/useMentionsHandlers';
 import type { LoadingErrorIndicatorProps } from '../Loading';
 import type { ComponentContextValue } from '../../context';
 import type { ChannelUnreadUiState, GiphyVersions, ImageAttachmentSizeHandler, VideoAttachmentSizeHandler } from '../../types/types';
-type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'ShareLocationDialog' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageIsThreadReplyInChannelButtonIndicator' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'Modal' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'ReminderNotification' | 'SendButton' | 'SendToChannelCheckbox' | 'StartRecordingAudioButton' | 'TextareaComposer' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
+type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EditMessageModal' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'ShareLocationDialog' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageIsThreadReplyInChannelButtonIndicator' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'Modal' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'ReminderNotification' | 'SendButton' | 'SendToChannelCheckbox' | 'StartRecordingAudioButton' | 'TextareaComposer' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
 export type ChannelProps = ChannelPropsForwardedToComponentContext & {
     /** Custom handler function that runs when the active channel has unread messages and the app is running on a separate browser tab */
     activeUnreadHandler?: (unread: number, documentTitle: string) => void;

package/dist/components/Channel/Channel.js

@@ -724,6 +724,7 @@ const ChannelInner = (props) => {
         CustomMessageActionsList: props.CustomMessageActionsList,
         DateSeparator: props.DateSeparator,
         EditMessageInput: props.EditMessageInput,
+        EditMessageModal: props.EditMessageModal,
         EmojiPicker: props.EmojiPicker,
         emojiSearchIndex: props.emojiSearchIndex,
         EmptyStateIndicator: props.EmptyStateIndicator,
@@ -791,6 +792,7 @@ const ChannelInner = (props) => {
         props.CustomMessageActionsList,
         props.DateSeparator,
         props.EditMessageInput,
+        props.EditMessageModal,
         props.EmojiPicker,
         props.emojiSearchIndex,
         props.EmptyStateIndicator,

package/dist/components/ChannelPreview/ChannelPreview.js

@@ -15,6 +15,7 @@ export const ChannelPreview = (props) => {
         channel,
     });
     const [lastMessage, setLastMessage] = useState(channel.state.messages[channel.state.messages.length - 1]);
+    const [latestMessagePreview, setLatestMessagePreview] = useState(() => getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated));
     const [unread, setUnread] = useState(0);
     const { messageDeliveryStatus } = useMessageDeliveryStatus({
         channel,
@@ -55,11 +56,13 @@ export const ChannelPreview = (props) => {
     }, 400), [channel, muted]);
     useEffect(() => {
         refreshUnreadCount();
+        setLatestMessagePreview(getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated));
         const handleEvent = (event) => {
             const deletedMessagesInAnotherChannel = event.type === 'user.messages.deleted' && event.cid && event.cid !== channel.cid;
             if (deletedMessagesInAnotherChannel)
                 return;
             setLastMessage(channel.state.latestMessages[channel.state.latestMessages.length - 1]);
+            setLatestMessagePreview(getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated));
             refreshUnreadCount();
         };
         channel.on('message.new', handleEvent);
@@ -76,9 +79,17 @@ export const ChannelPreview = (props) => {
             channel.off('message.undeleted', handleEvent);
             channel.off('channel.truncated', handleEvent);
         };
-    }, [channel, client, refreshUnreadCount, channelUpdateCount]);
+    }, [
+        channel,
+        client,
+        refreshUnreadCount,
+        channelUpdateCount,
+        getLatestMessagePreview,
+        t,
+        userLanguage,
+        isMessageAIGenerated,
+    ]);
     if (!Preview)
         return null;
-    const latestMessagePreview = getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated);
     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/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.7.0";
+        const version = "13.8.0";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/Message/MessageSimple.js

@@ -17,7 +17,7 @@ import { useMessageReminder } from './hooks';
 import { areMessageUIPropsEqual, isMessageBlocked, isMessageBounced, isMessageEdited, messageHasAttachments, messageHasReactions, } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { Attachment as DefaultAttachment } from '../Attachment';
-import { EditMessageModal } from '../MessageInput';
+import { EditMessageModal as DefaultEditMessageModal } from '../MessageInput';
 import { Poll } from '../Poll';
 import { ReactionsList as DefaultReactionList } from '../Reactions';
 import { MessageBounceModal } from '../MessageBounce/MessageBounceModal';
@@ -32,7 +32,7 @@ const MessageSimpleWithContext = (props) => {
     const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
     const [isEditedTimestampOpen, setEditedTimestampOpen] = useState(false);
     const reminder = useMessageReminder(message.id);
-    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, MessageOptions = DefaultMessageOptions, 
+    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, EditMessageModal = DefaultEditMessageModal, MessageOptions = DefaultMessageOptions, 
     // TODO: remove this "passthrough" in the next
     // major release and use the new default instead
     MessageActions = MessageOptions, MessageBlocked = DefaultMessageBlocked, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageDeleted = DefaultMessageDeleted, MessageIsThreadReplyInChannelButtonIndicator = DefaultMessageIsThreadReplyInChannelButtonIndicator, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, ReminderNotification = DefaultReminderNotification, StreamedMessageText = DefaultStreamedMessageText, PinIndicator, } = useComponentContext('MessageSimple');

package/dist/components/Message/QuotedMessage.js

@@ -9,12 +9,14 @@ import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
 import { renderText as defaultRenderText } from './renderText';
+import { useActionHandler } from './';
 export const QuotedMessage = ({ renderText: propsRenderText }) => {
     const { Attachment = DefaultAttachment, Avatar: ContextAvatar } = useComponentContext('QuotedMessage');
     const { client } = useChatContext();
     const { isMyMessage, message, renderText: contextRenderText, } = useMessageContext('QuotedMessage');
     const { t, userLanguage } = useTranslationContext('QuotedMessage');
     const { jumpToMessage } = useChannelActionContext('QuotedMessage');
+    const actionHandler = useActionHandler(message);
     const renderText = propsRenderText ?? contextRenderText ?? defaultRenderText;
     const Avatar = ContextAvatar || DefaultAvatar;
     const { quoted_message } = message;
@@ -42,5 +44,5 @@ export const QuotedMessage = ({ renderText: propsRenderText }) => {
             React.createElement("div", { className: 'str-chat__quoted-message-bubble', "data-testid": 'quoted-message-contents' }, poll ? (React.createElement(Poll, { isQuoted: true, poll: poll })) : (React.createElement(React.Fragment, null,
                 quotedMessageAttachment && (React.createElement(Attachment, { attachments: [quotedMessageAttachment], isQuoted: true })),
                 React.createElement("div", { className: 'str-chat__quoted-message-bubble__text', "data-testid": 'quoted-message-text' }, renderedText))))),
-        message.attachments?.length ? (React.createElement(Attachment, { attachments: message.attachments })) : null));
+        message.attachments?.length ? (React.createElement(Attachment, { actionHandler: actionHandler, attachments: message.attachments })) : null));
 };

package/dist/components/Message/hooks/useActionHandler.js

@@ -1,18 +1,19 @@
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
 import { useChannelStateContext } from '../../../context/ChannelStateContext';
+import { useStableCallback } from '../../../utils/useStableCallback';
 export const handleActionWarning = `Action handler was called, but it is missing one of its required arguments. 
 Make sure the ChannelAction and ChannelState contexts are properly set and the hook is initialized with a valid message.`;
 export function useActionHandler(message) {
     const { removeMessage, updateMessage } = useChannelActionContext('useActionHandler');
     const { channel } = useChannelStateContext('useActionHandler');
-    return async (dataOrName, value, event) => {
+    return useStableCallback(async (dataOrName, value, event) => {
         if (event)
             event.preventDefault();
         if (!message || !updateMessage || !removeMessage || !channel) {
             console.warn(handleActionWarning);
             return;
         }
-        const messageID = message.id;
+        const messageId = message.id;
         let formData = {};
         // deprecated: value&name should be removed in favor of data obj
         if (typeof dataOrName === 'string') {
@@ -21,8 +22,8 @@ export function useActionHandler(message) {
         else {
             formData = { ...dataOrName };
         }
-        if (messageID) {
-            const data = await channel.sendAction(messageID, formData);
+        if (messageId) {
+            const data = await channel.sendAction(messageId, formData);
             if (data?.message) {
                 updateMessage(data.message);
             }
@@ -30,5 +31,5 @@ export function useActionHandler(message) {
                 removeMessage(message);
             }
         }
-    };
+    });
 }

package/dist/components/MessageInput/EditMessageForm.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import type { MessageUIComponentProps } from '../Message';
 export declare const EditMessageForm: () => React.JSX.Element;
-export declare const EditMessageModal: ({ additionalMessageInputProps, }: Pick<MessageUIComponentProps, 'additionalMessageInputProps'>) => React.JSX.Element;
+export type EditMessageModalProps = Pick<MessageUIComponentProps, 'additionalMessageInputProps'>;
+export declare const EditMessageModal: ({ additionalMessageInputProps, }: EditMessageModalProps) => React.JSX.Element;

package/dist/components/MessageInput/hooks/useMessageComposer.js

@@ -30,8 +30,10 @@ export const useMessageComposer = () => {
         if (editing && cachedEditedMessage) {
             const tag = MessageComposer.constructTag(cachedEditedMessage);
             const cachedComposer = queueCache.get(tag);
-            if (cachedComposer)
+            if (cachedComposer) {
+                cachedComposer.editedMessage = cachedEditedMessage;
                 return cachedComposer;
+            }
             return new MessageComposer({
                 client,
                 composition: cachedEditedMessage,

package/dist/components/Poll/PollActions/PollActions.js

@@ -28,6 +28,7 @@ export const PollActions = ({ AddCommentForm = DefaultAddCommentForm, EndPollDia
     const { poll } = usePollContext();
     const { allow_answers, allow_user_suggested_options, answers_count, created_by_id, is_closed, options, ownAnswer, } = useStateStore(poll.state, pollStateSelector);
     const [modalOpen, setModalOpen] = useState();
+    const canCastVote = channelCapabilities['cast-poll-vote'] && !is_closed;
     const closeModal = useCallback(() => setModalOpen(undefined), []);
     const onUpdateAnswerClick = useCallback(() => setModalOpen('add-comment'), []);
     return (React.createElement("div", { className: 'str-chat__poll-actions' },
@@ -35,7 +36,7 @@ export const PollActions = ({ AddCommentForm = DefaultAddCommentForm, EndPollDia
                 count: options.length,
             }), closeModal: closeModal, modalClassName: COMMON_MODAL_CLASS, modalIsOpen: modalOpen === 'view-all-options', openModal: () => setModalOpen('view-all-options') },
             React.createElement(PollOptionsFullList, { close: closeModal }))),
-        !is_closed &&
+        canCastVote &&
             allow_user_suggested_options &&
             options.length < MAX_POLL_OPTIONS && (React.createElement(PollAction, { buttonText: t('Suggest an option'), closeModal: closeModal, modalClassName: clsx(COMMON_MODAL_CLASS, 'str-chat__suggest-poll-option-modal'), modalIsOpen: modalOpen === 'suggest-option', openModal: () => setModalOpen('suggest-option') },
             React.createElement(SuggestPollOptionForm, { close: closeModal, messageId: message.id }))),

package/dist/components/TextareaComposer/TextareaComposer.js

@@ -110,7 +110,9 @@ export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, co
                 });
             }
         }
-        else if (shouldSubmit(event) && textareaRef.current) {
+        else if (shouldSubmit(event) &&
+            textareaRef.current &&
+            messageComposer.hasSendableData) {
             if (event.key === 'Enter') {
                 // prevent adding newline when submitting a message with
                 event.preventDefault();
@@ -120,6 +122,7 @@ export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, co
     }, [
         focusedItemIndex,
         handleSubmit,
+        messageComposer,
         onKeyDown,
         shouldSubmit,
         suggestions,

package/dist/context/ComponentContext.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import type { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, ModalProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListModalProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, ReminderNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, TextareaComposerProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
+import type { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EditMessageModalProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, ModalProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListModalProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, ReminderNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, TextareaComposerProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
 import type { SuggestionItemProps, SuggestionListProps } from '../components/TextareaComposer';
 import type { SearchProps, SearchResultsPresearchProps, SearchSourceResultListProps } from '../experimental';
 import type { PropsWithChildrenOnly, UnknownType } from '../types/types';
@@ -35,6 +35,8 @@ export type ComponentContextValue = {
     DateSeparator?: React.ComponentType<DateSeparatorProps>;
     /** Custom UI component to override default edit message input, defaults to and accepts same props as: [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */
     EditMessageInput?: React.ComponentType<MessageInputProps>;
+    /** Custom UI component to override default EditMessageModal, defaults to and accepts same props as: [EditMessageModal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */
+    EditMessageModal?: React.ComponentType<EditMessageModalProps>;
     /** Custom UI component for rendering button with emoji picker in MessageInput */
     EmojiPicker?: React.ComponentType;
     /** Mechanism to be used with autocomplete and text replace features of the `MessageInput` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */

package/dist/experimental/index.browser.cjs

@@ -14668,6 +14668,9 @@ var ChannelPreview = (props) => {
   const [lastMessage, setLastMessage] = (0, import_react35.useState)(
     channel.state.messages[channel.state.messages.length - 1]
   );
+  const [latestMessagePreview, setLatestMessagePreview] = (0, import_react35.useState)(
+    () => getLatestMessagePreview2(channel, t, userLanguage, isMessageAIGenerated)
+  );
   const [unread, setUnread] = (0, import_react35.useState)(0);
   const { messageDeliveryStatus } = useMessageDeliveryStatus({
     channel,
@@ -14706,12 +14709,18 @@ var ChannelPreview = (props) => {
   );
   (0, import_react35.useEffect)(() => {
     refreshUnreadCount();
+    setLatestMessagePreview(
+      getLatestMessagePreview2(channel, t, userLanguage, isMessageAIGenerated)
+    );
     const handleEvent = (event) => {
       const deletedMessagesInAnotherChannel = event.type === "user.messages.deleted" && event.cid && event.cid !== channel.cid;
       if (deletedMessagesInAnotherChannel) return;
       setLastMessage(
         channel.state.latestMessages[channel.state.latestMessages.length - 1]
       );
+      setLatestMessagePreview(
+        getLatestMessagePreview2(channel, t, userLanguage, isMessageAIGenerated)
+      );
       refreshUnreadCount();
     };
     channel.on("message.new", handleEvent);
@@ -14728,14 +14737,17 @@ var ChannelPreview = (props) => {
       channel.off("message.undeleted", handleEvent);
       channel.off("channel.truncated", handleEvent);
     };
-  }, [channel, client, refreshUnreadCount, channelUpdateCount]);
-  if (!Preview) return null;
-  const latestMessagePreview = getLatestMessagePreview2(
+  }, [
     channel,
+    client,
+    refreshUnreadCount,
+    channelUpdateCount,
+    getLatestMessagePreview2,
     t,
     userLanguage,
     isMessageAIGenerated
-  );
+  ]);
+  if (!Preview) return null;
   return /* @__PURE__ */ import_react35.default.createElement(
     Preview,
     {
@@ -14779,7 +14791,10 @@ var useMessageComposer = () => {
     if (editing && cachedEditedMessage) {
       const tag = import_stream_chat2.MessageComposer.constructTag(cachedEditedMessage);
       const cachedComposer = queueCache.get(tag);
-      if (cachedComposer) return cachedComposer;
+      if (cachedComposer) {
+        cachedComposer.editedMessage = cachedEditedMessage;
+        return cachedComposer;
+      }
       return new import_stream_chat2.MessageComposer({
         client,
         composition: cachedEditedMessage,