stream-chat-react 13.6.6 → 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/ChannelPreview/utils.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-import { htmlToTextPlugin } from '../Message';
+import { htmlToTextPlugin, imageToLink, plusPlusToEmphasis } from '../Message';
 import remarkGfm from 'remark-gfm';
 const remarkPlugins = [
     htmlToTextPlugin,
     [remarkGfm, { singleTilde: false }],
+    plusPlusToEmphasis,
+    imageToLink,
 ];
 export const renderPreviewText = (text) => (React.createElement(ReactMarkdown, { remarkPlugins: remarkPlugins, skipHtml: true }, text));
 const getLatestPollVote = (latestVotesByOption) => {

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.6.6";
+        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/Message/renderText/remarkPlugins/imageToLink.d.ts

@@ -0,0 +1,12 @@
+import type { Node } from 'unist';
+export type ImageToLinkPluginOptions = {
+    getTextLabelFrom?: 'alt' | 'title' | 'url';
+};
+/**
+ * Converts image Markdown links (![Minion](https://octodex.github.com/images/minion.png))
+ * to HTML <a href={url}>{url | title | alt}</a>
+ *
+ * By default, the anchor text content is the image url so that image preview can be generated / enriched on the server.
+ * @param getTextLabelFrom
+ */
+export declare function imageToLink({ getTextLabelFrom }?: ImageToLinkPluginOptions): (tree: Node) => void;

package/dist/components/Message/renderText/remarkPlugins/imageToLink.js

@@ -0,0 +1,27 @@
+import { SKIP, visit } from 'unist-util-visit';
+const text = (value) => ({ type: 'text', value });
+/**
+ * Converts image Markdown links (![Minion](https://octodex.github.com/images/minion.png))
+ * to HTML <a href={url}>{url | title | alt}</a>
+ *
+ * By default, the anchor text content is the image url so that image preview can be generated / enriched on the server.
+ * @param getTextLabelFrom
+ */
+export function imageToLink({ getTextLabelFrom = 'url' } = {}) {
+    return (tree) => {
+        const visitor = (node, index, parent) => {
+            if (parent == null || index == null)
+                return;
+            const label = node[getTextLabelFrom] ?? node.url; // node.alt || node.title || node.url;
+            const link = {
+                children: [text(label)],
+                title: node.title ?? node.alt ?? node.url,
+                type: 'link',
+                url: node.url,
+            };
+            parent.children.splice(index, 1, link);
+            return [SKIP, index + 1];
+        };
+        visit(tree, 'image', visitor);
+    };
+}

package/dist/components/Message/renderText/remarkPlugins/index.d.ts

@@ -1,2 +1,4 @@
 export * from './htmlToTextPlugin';
+export * from './imageToLink';
 export * from './keepLineBreaksPlugin';
+export * from './plusPlusToEmphasis';

package/dist/components/Message/renderText/remarkPlugins/index.js

@@ -1,2 +1,4 @@
 export * from './htmlToTextPlugin';
+export * from './imageToLink';
 export * from './keepLineBreaksPlugin';
+export * from './plusPlusToEmphasis';

package/dist/components/Message/renderText/remarkPlugins/plusPlusToEmphasis.d.ts

@@ -0,0 +1,6 @@
+import type { Plugin } from 'unified';
+/**
+ * Converts MD "++Some text++" to inserted text element rendered in HTML as <ins>Some text</ins>
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins
+ */
+export declare const plusPlusToEmphasis: Plugin<[]>;

package/dist/components/Message/renderText/remarkPlugins/plusPlusToEmphasis.js

@@ -0,0 +1,64 @@
+import { SKIP, visit } from 'unist-util-visit';
+/**
+ * \S → first char must be non-whitespace
+ * (?:...)?→ optional middle+closing when length > 1
+ * [\s\S]*?→ anything (including newlines), lazy
+ * final \S→ last char non-whitespace (only required when there’s more than 1)
+ *
+ * Matches:
+ * ++a++
+ * Does not match:
+ * ++++
+ * ++ ++
+ */
+const INS_REGEX = /\+\+(\S(?:[\s\S]*?\S)?)\+\+/g;
+const IGNORE_NODE_TYPES = new Set([
+    'code',
+    'inlineCode',
+    'link',
+    'linkReference',
+    'definition',
+    'math',
+    'inlineMath',
+]);
+/**
+ * Converts MD "++Some text++" to inserted text element rendered in HTML as <ins>Some text</ins>
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins
+ */
+export const plusPlusToEmphasis = () => {
+    const visitor = (node, index, parent) => {
+        // 1) Don’t traverse inside ignored nodes
+        if (IGNORE_NODE_TYPES.has(node.type))
+            return SKIP;
+        // 2) Only transform text nodes with a valid parent + index
+        if (node.type !== 'text' || parent == null || typeof index !== 'number')
+            return;
+        const value = node.value;
+        // Reset lastIndex to 0 per node so each node is scanned from the beginning
+        INS_REGEX.lastIndex = 0;
+        let match;
+        let last = 0;
+        const out = [];
+        while ((match = INS_REGEX.exec(value))) {
+            const [full, inner] = match;
+            const start = match.index;
+            if (start > last)
+                out.push({ type: 'text', value: value.slice(last, start) });
+            // Render as <ins>…</ins> (remark-rehype respects data.hName)
+            out.push({
+                children: [{ type: 'text', value: inner }],
+                data: { hName: 'ins' },
+                type: 'emphasis',
+            });
+            last = start + full.length;
+        }
+        if (out.length === 0)
+            return; // nothing to change
+        if (last < value.length)
+            out.push({ type: 'text', value: value.slice(last) });
+        parent.children.splice(index, 1, ...out);
+        // Skip re-visiting the replaced range; continue after inserted nodes
+        return [SKIP, index + out.length];
+    };
+    return (tree) => visit(tree, visitor);
+};

package/dist/components/Message/renderText/renderText.js

@@ -5,7 +5,7 @@ import remarkGfm from 'remark-gfm';
 import { Anchor, Emoji, Mention } from './componentRenderers';
 import { detectHttp, matchMarkdownLinks, messageCodeBlocks } from './regex';
 import { emojiMarkdownPlugin, mentionsMarkdownPlugin } from './rehypePlugins';
-import { htmlToTextPlugin, keepLineBreaksPlugin } from './remarkPlugins';
+import { htmlToTextPlugin, imageToLink, keepLineBreaksPlugin, plusPlusToEmphasis, } from './remarkPlugins';
 import { ErrorBoundary } from '../../UtilityComponents';
 export const defaultAllowedTagNames = [
     'html',
@@ -38,6 +38,7 @@ export const defaultAllowedTagNames = [
     'h4',
     'h5',
     'h6',
+    'ins',
 ];
 function formatUrlForDisplay(url) {
     try {
@@ -124,6 +125,8 @@ export const renderText = (text, mentionedUsers, { allowedTagNames = defaultAllo
         htmlToTextPlugin,
         keepLineBreaksPlugin,
         [remarkGfm, { singleTilde: false }],
+        plusPlusToEmphasis,
+        imageToLink,
     ];
     const rehypePlugins = [emojiMarkdownPlugin];
     if (mentionedUsers?.length) {

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) */