stream-chat-react 12.6.1 → 12.7.0

package/dist/components/AIStateIndicator/AIStateIndicator.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Channel } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+export type AIStateIndicatorProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    channel?: Channel<StreamChatGenerics>;
+};
+export declare const AIStateIndicator: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channel: channelFromProps, }: AIStateIndicatorProps<StreamChatGenerics>) => React.JSX.Element | null;

package/dist/components/AIStateIndicator/AIStateIndicator.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AIStates, useAIState } from './hooks/useAIState';
+import { useChannelStateContext, useTranslationContext } from '../../context';
+export const AIStateIndicator = ({ channel: channelFromProps, }) => {
+    const { t } = useTranslationContext();
+    const { channel: channelFromContext } = useChannelStateContext('AIStateIndicator');
+    const channel = channelFromProps || channelFromContext;
+    const { aiState } = useAIState(channel);
+    const allowedStates = {
+        [AIStates.Thinking]: t('Thinking...'),
+        [AIStates.Generating]: t('Generating...'),
+    };
+    return aiState in allowedStates ? (React.createElement("div", { className: 'str-chat__ai-state-indicator-container' },
+        React.createElement("p", { className: 'str-chat__ai-state-indicator-text' }, allowedStates[aiState]))) : null;
+};

package/dist/components/AIStateIndicator/hooks/useAIState.d.ts

@@ -0,0 +1,17 @@
+import { AIState, Channel } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+export declare const AIStates: {
+    Error: string;
+    ExternalSources: string;
+    Generating: string;
+    Idle: string;
+    Thinking: string;
+};
+/**
+ * A hook that returns the current state of the AI.
+ * @param {Channel} channel - The channel for which we want to know the AI state.
+ * @returns {{ aiState: AIState }} The current AI state for the given channel.
+ */
+export declare const useAIState: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel?: Channel<StreamChatGenerics>) => {
+    aiState: AIState;
+};

package/dist/components/AIStateIndicator/hooks/useAIState.js

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+export const AIStates = {
+    Error: 'AI_STATE_ERROR',
+    ExternalSources: 'AI_STATE_EXTERNAL_SOURCES',
+    Generating: 'AI_STATE_GENERATING',
+    Idle: 'AI_STATE_IDLE',
+    Thinking: 'AI_STATE_THINKING',
+};
+/**
+ * A hook that returns the current state of the AI.
+ * @param {Channel} channel - The channel for which we want to know the AI state.
+ * @returns {{ aiState: AIState }} The current AI state for the given channel.
+ */
+export const useAIState = (channel) => {
+    const [aiState, setAiState] = useState(AIStates.Idle);
+    useEffect(() => {
+        if (!channel) {
+            return;
+        }
+        const indicatorChangedListener = channel.on('ai_indicator.update', (event) => {
+            const { cid } = event;
+            const state = event.ai_state;
+            if (channel.cid === cid) {
+                setAiState(state);
+            }
+        });
+        const indicatorClearedListener = channel.on('ai_indicator.clear', (event) => {
+            const { cid } = event;
+            if (channel.cid === cid) {
+                setAiState(AIStates.Idle);
+            }
+        });
+        return () => {
+            indicatorChangedListener.unsubscribe();
+            indicatorClearedListener.unsubscribe();
+        };
+    }, [channel]);
+    return { aiState };
+};

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

@@ -0,0 +1,2 @@
+export * from './AIStateIndicator';
+export * from './hooks/useAIState';

package/dist/components/AIStateIndicator/index.js

@@ -0,0 +1,2 @@
+export * from './AIStateIndicator';
+export * from './hooks/useAIState';

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

@@ -6,7 +6,7 @@ import { ComponentContextValue, StreamMessage } from '../../context';
 import type { MessageInputProps } from '../MessageInput';
 import type { ChannelUnreadUiState, CustomTrigger, DefaultStreamChatGenerics, GiphyVersions, ImageAttachmentSizeHandler, SendMessageOptions, UpdateMessageOptions, VideoAttachmentSizeHandler } from '../../types/types';
 import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
-type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ComponentContextValue<StreamChatGenerics>, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'SendButton' | 'StartRecordingAudioButton' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TriggerProvider' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage'>;
+type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ComponentContextValue<StreamChatGenerics>, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'SendButton' | 'StartRecordingAudioButton' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TriggerProvider' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
 export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = ChannelPropsForwardedToComponentContext<StreamChatGenerics> & {
     /** List of accepted file types */
     acceptedFiles?: string[];

package/dist/components/Channel/Channel.js

@@ -782,6 +782,8 @@ const ChannelInner = (props) => {
         ReactionsList: props.ReactionsList,
         SendButton: props.SendButton,
         StartRecordingAudioButton: props.StartRecordingAudioButton,
+        StopAIGenerationButton: props.StopAIGenerationButton,
+        StreamedMessageText: props.StreamedMessageText,
         ThreadHead: props.ThreadHead,
         ThreadHeader: props.ThreadHeader,
         ThreadStart: props.ThreadStart,
@@ -847,6 +849,8 @@ const ChannelInner = (props) => {
         props.UnreadMessagesNotification,
         props.UnreadMessagesSeparator,
         props.VirtualMessage,
+        props.StopAIGenerationButton,
+        props.StreamedMessageText,
         props.emojiSearchIndex,
         props.reactionOptions,
     ]);

package/dist/components/ChannelPreview/utils.js

@@ -47,7 +47,9 @@ export const getLatestMessagePreview = (channel, t, userLanguage = 'en') => {
         }
     }
     if (previewTextToRender) {
-        return renderPreviewText(previewTextToRender);
+        return latestMessage.ai_generated
+            ? previewTextToRender
+            : renderPreviewText(previewTextToRender);
     }
     if (latestMessage.command) {
         return `/${latestMessage.command}`;

package/dist/components/Chat/hooks/useChat.js

@@ -27,8 +27,8 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
         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'
-            // __STREAM_CHAT_REACT_VERSION__ is replaced during the build process with the current version
-            client.setUserAgent(`stream-chat-react-__STREAM_CHAT_REACT_VERSION__-${userAgent}`);
+            // the upper-case text between double underscores is replaced with the actual semantic version of the library
+            client.setUserAgent(`stream-chat-react-12.7.0-${userAgent}`);
         }
         client.threads.registerSubscriptions();
         client.polls.registerSubscriptions();

package/dist/components/Message/MessageSimple.js

@@ -22,6 +22,7 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useChatContext, useTranslationContext } from '../../context';
 import { MessageEditedTimestamp } from './MessageEditedTimestamp';
+import { StreamedMessageText as DefaultStreamedMessageText } from './StreamedMessageText';
 const MessageSimpleWithContext = (props) => {
     const { additionalMessageInputProps, clearEditingState, editing, endOfGroup, firstOfGroup, groupedByUser, handleAction, handleOpenThread, handleRetry, highlighted, isMyMessage, message, onUserClick, onUserHover, renderText, threadList, } = props;
     const { client } = useChatContext('MessageSimple');
@@ -31,7 +32,7 @@ const MessageSimpleWithContext = (props) => {
     const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, EditMessageInput = DefaultEditMessageForm, MessageOptions = DefaultMessageOptions, 
     // TODO: remove this "passthrough" in the next
     // major release and use the new default instead
-    MessageActions = MessageOptions, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, PinIndicator, } = useComponentContext('MessageSimple');
+    MessageActions = MessageOptions, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, StreamedMessageText = DefaultStreamedMessageText, PinIndicator, } = useComponentContext('MessageSimple');
     const hasAttachment = messageHasAttachments(message);
     const hasReactions = messageHasReactions(message);
     if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
@@ -84,7 +85,7 @@ const MessageSimpleWithContext = (props) => {
                 React.createElement("div", { className: 'str-chat__message-bubble' },
                     poll && React.createElement(Poll, { poll: poll }),
                     message.attachments?.length && !message.quoted_message ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
-                    React.createElement(MessageText, { message: message, renderText: renderText }),
+                    message.ai_generated ? (React.createElement(StreamedMessageText, { message: message, renderText: renderText })) : (React.createElement(MessageText, { message: message, renderText: renderText })),
                     message.mml && (React.createElement(MML, { actionHandler: handleAction, align: isMyMessage() ? 'right' : 'left', source: message.mml })),
                     React.createElement(MessageErrorIcon, null))),
             showReplyCountButton && (React.createElement(MessageRepliesCountButton, { onClick: handleOpenThread, reply_count: message.reply_count })),

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MessageTextProps } from './MessageText';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+export type StreamedMessageTextProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageTextProps<StreamChatGenerics>, 'message' | 'renderText'> & {
+    renderingLetterCount?: number;
+    streamingLetterIntervalMs?: number;
+};
+export declare const StreamedMessageText: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: StreamedMessageTextProps<StreamChatGenerics>) => React.JSX.Element;

package/dist/components/Message/StreamedMessageText.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MessageText } from './MessageText';
+import { useMessageContext } from '../../context';
+import { useMessageTextStreaming } from './hooks';
+export const StreamedMessageText = (props) => {
+    const { message: messageFromProps, renderingLetterCount, renderText, streamingLetterIntervalMs, } = props;
+    const { message: messageFromContext } = useMessageContext('StreamedMessageText');
+    const message = messageFromProps || messageFromContext;
+    const { text = '' } = message;
+    const { streamedMessageText } = useMessageTextStreaming({
+        renderingLetterCount,
+        streamingLetterIntervalMs,
+        text,
+    });
+    return (React.createElement(MessageText, { message: { ...message, text: streamedMessageText }, renderText: renderText }));
+};

package/dist/components/Message/hooks/index.d.ts

@@ -12,3 +12,4 @@ export * from './useRetryHandler';
 export * from './useUserHandler';
 export * from './useUserRole';
 export * from './useReactionsFetcher';
+export * from './useMessageTextStreaming';

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

@@ -12,3 +12,4 @@ export * from './useRetryHandler';
 export * from './useUserHandler';
 export * from './useUserRole';
 export * from './useReactionsFetcher';
+export * from './useMessageTextStreaming';

package/dist/components/Message/hooks/useMessageTextStreaming.d.ts

@@ -0,0 +1,16 @@
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { StreamedMessageTextProps } from '../StreamedMessageText';
+export type UseMessageTextStreamingProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<StreamedMessageTextProps<StreamChatGenerics>, 'streamingLetterIntervalMs' | 'renderingLetterCount'> & {
+    text: string;
+};
+/**
+ * A hook that returns text in a streamed, typewriter fashion. The speed of streaming is
+ * configurable.
+ * @param {number} [streamingLetterIntervalMs=30] - The timeout between each typing animation in milliseconds.
+ * @param {number} [renderingLetterCount=2] - The number of letters to be rendered each time we update.
+ * @param {string} text - The text that we want to render in a typewriter fashion.
+ * @returns {{ streamedMessageText: string }} - A substring of the text property, up until we've finished rendering the typewriter animation.
+ */
+export declare const useMessageTextStreaming: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ streamingLetterIntervalMs, renderingLetterCount, text, }: UseMessageTextStreamingProps<StreamChatGenerics>) => {
+    streamedMessageText: string;
+};

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

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from 'react';
+const DEFAULT_LETTER_INTERVAL = 30;
+const DEFAULT_RENDERING_LETTER_COUNT = 2;
+/**
+ * A hook that returns text in a streamed, typewriter fashion. The speed of streaming is
+ * configurable.
+ * @param {number} [streamingLetterIntervalMs=30] - The timeout between each typing animation in milliseconds.
+ * @param {number} [renderingLetterCount=2] - The number of letters to be rendered each time we update.
+ * @param {string} text - The text that we want to render in a typewriter fashion.
+ * @returns {{ streamedMessageText: string }} - A substring of the text property, up until we've finished rendering the typewriter animation.
+ */
+export const useMessageTextStreaming = ({ streamingLetterIntervalMs = DEFAULT_LETTER_INTERVAL, renderingLetterCount = DEFAULT_RENDERING_LETTER_COUNT, text, }) => {
+    const [streamedMessageText, setStreamedMessageText] = useState(text);
+    const textCursor = useRef(text.length);
+    useEffect(() => {
+        const textLength = text.length;
+        const interval = setInterval(() => {
+            if (!text || textCursor.current >= textLength) {
+                clearInterval(interval);
+            }
+            const newCursorValue = textCursor.current + renderingLetterCount;
+            const newText = text.substring(0, newCursorValue);
+            textCursor.current += newText.length - textCursor.current;
+            setStreamedMessageText(newText);
+        }, streamingLetterIntervalMs);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [streamingLetterIntervalMs, renderingLetterCount, text]);
+    return { streamedMessageText };
+};

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

@@ -13,4 +13,5 @@ export * from './QuotedMessage';
 export * from './renderText';
 export * from './types';
 export * from './utils';
+export * from './StreamedMessageText';
 export type { TimestampProps } from './Timestamp';

package/dist/components/Message/index.js

@@ -13,3 +13,4 @@ export * from './QuotedMessage';
 export * from './renderText';
 export * from './types';
 export * from './utils';
+export * from './StreamedMessageText';

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

@@ -23,6 +23,13 @@ export const defaultAllowedTagNames = [
     'pre',
     'blockquote',
     'del',
+    'table',
+    'thead',
+    'tbody',
+    'th',
+    'tr',
+    'td',
+    'tfoot',
     // custom types (tagNames)
     'emoji',
     'mention',

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

@@ -77,4 +77,4 @@ 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' | 'moderation_details'>) => boolean;
-export declare const isMessageEdited: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: Pick<StreamMessage<StreamChatGenerics>, 'message_text_updated_at'>) => boolean;
+export declare const isMessageEdited: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: Pick<StreamMessage<StreamChatGenerics>, 'message_text_updated_at'> & Partial<Pick<StreamMessage<StreamChatGenerics>, 'ai_generated'>>) => boolean;

package/dist/components/Message/utils.js

@@ -310,4 +310,4 @@ export const isOnlyEmojis = (text) => {
 export const isMessageBounced = (message) => message.type === 'error' &&
     (message.moderation_details?.action === 'MESSAGE_RESPONSE_ACTION_BOUNCE' ||
         message.moderation?.action === 'bounce');
-export const isMessageEdited = (message) => !!message.message_text_updated_at;
+export const isMessageEdited = (message) => !!message.message_text_updated_at && !message.ai_generated;

package/dist/components/MessageInput/MessageInputFlat.js

@@ -5,6 +5,7 @@ import { AttachmentSelector as DefaultAttachmentSelector, SimpleAttachmentSelect
 import { AttachmentPreviewList as DefaultAttachmentPreviewList } from './AttachmentPreviewList';
 import { CooldownTimer as DefaultCooldownTimer } from './CooldownTimer';
 import { SendButton as DefaultSendButton } from './SendButton';
+import { StopAIGenerationButton as DefaultStopAIGenerationButton } from './StopAIGenerationButton';
 import { AudioRecorder as DefaultAudioRecorder, RecordingPermissionDeniedNotification as DefaultRecordingPermissionDeniedNotification, StartRecordingAudioButton as DefaultStartRecordingAudioButton, RecordingPermission, } from '../MediaRecorder';
 import { QuotedMessagePreview as DefaultQuotedMessagePreview, QuotedMessagePreviewHeader, } from './QuotedMessagePreview';
 import { LinkPreviewList as DefaultLinkPreviewList } from './LinkPreviewList';
@@ -16,13 +17,16 @@ import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
+import { AIStates, useAIState } from '../AIStateIndicator';
 export const MessageInputFlat = () => {
     const { t } = useTranslationContext('MessageInputFlat');
     const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, isUploadEnabled, linkPreviews, maxFilesLeft, message, numberOfUploads, parent, recordingController, setCooldownRemaining, text, uploadNewFiles, } = useMessageInputContext('MessageInputFlat');
-    const { AudioRecorder = DefaultAudioRecorder, AttachmentPreviewList = DefaultAttachmentPreviewList, AttachmentSelector = message ? SimpleAttachmentSelector : DefaultAttachmentSelector, CooldownTimer = DefaultCooldownTimer, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, StartRecordingAudioButton = DefaultStartRecordingAudioButton, EmojiPicker, } = useComponentContext('MessageInputFlat');
+    const { AudioRecorder = DefaultAudioRecorder, AttachmentPreviewList = DefaultAttachmentPreviewList, AttachmentSelector = message ? SimpleAttachmentSelector : DefaultAttachmentSelector, CooldownTimer = DefaultCooldownTimer, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, StartRecordingAudioButton = DefaultStartRecordingAudioButton, StopAIGenerationButton: StopAIGenerationButtonOverride, EmojiPicker, } = useComponentContext('MessageInputFlat');
     const { acceptedFiles = [], multipleUploads, quotedMessage, } = useChannelStateContext('MessageInputFlat');
     const { setQuotedMessage } = useChannelActionContext('MessageInputFlat');
     const { channel } = useChatContext('MessageInputFlat');
+    const { aiState } = useAIState(channel);
+    const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
     const [showRecordingPermissionDeniedNotification, setShowRecordingPermissionDeniedNotification,] = useState(false);
     const closePermissionDeniedNotification = useCallback(() => {
         setShowRecordingPermissionDeniedNotification(false);
@@ -64,6 +68,15 @@ export const MessageInputFlat = () => {
     const displayQuotedMessage = !message && quotedMessage && quotedMessage.parent_id === parent?.id;
     const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices); // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303
     const isRecording = !!recordingController.recordingState;
+    /* This bit here is needed to make sure that we can get rid of the default behaviour
+     * if need be. Essentially this allows us to pass StopAIGenerationButton={null} and
+     * completely circumvent the default logic if it's not what we want. We need it as a
+     * prop because there is no other trivial way to override the SendMessage button otherwise.
+     */
+    const StopAIGenerationButton = StopAIGenerationButtonOverride === undefined
+        ? DefaultStopAIGenerationButton
+        : StopAIGenerationButtonOverride;
+    const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopAIGenerationButton;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { ...getRootProps({ className: 'str-chat__message-input' }) },
             recordingEnabled &&
@@ -85,7 +98,7 @@ export const MessageInputFlat = () => {
                     React.createElement("div", { className: 'str-chat__message-textarea-with-emoji-picker' },
                         React.createElement(ChatAutoComplete, null),
                         EmojiPicker && React.createElement(EmojiPicker, null))),
-                !hideSendButton && (React.createElement(React.Fragment, null, cooldownRemaining ? (React.createElement(CooldownTimer, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining })) : (React.createElement(React.Fragment, null,
+                shouldDisplayStopAIGeneration ? (React.createElement(StopAIGenerationButton, { onClick: stopGenerating })) : (!hideSendButton && (React.createElement(React.Fragment, null, cooldownRemaining ? (React.createElement(CooldownTimer, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining })) : (React.createElement(React.Fragment, null,
                     React.createElement(SendButton, { disabled: !numberOfUploads &&
                             !text.length &&
                             attachments.length - failedUploadsCount === 0, sendMessage: handleSubmit }),
@@ -94,5 +107,5 @@ export const MessageInputFlat = () => {
                                 attachments.some((a) => a.type === RecordingAttachmentType.VOICE_RECORDING)), onClick: () => {
                             recordingController.recorder?.start();
                             setShowRecordingPermissionDeniedNotification(true);
-                        } }))))))))));
+                        } })))))))))));
 };

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export type StopAIGenerationButtonProps = React.ComponentProps<'button'>;
+export declare const StopAIGenerationButton: ({ onClick, ...restProps }: StopAIGenerationButtonProps) => React.JSX.Element;

package/dist/components/MessageInput/StopAIGenerationButton.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { useTranslationContext } from '../../context';
+export const StopAIGenerationButton = ({ onClick, ...restProps }) => {
+    const { t } = useTranslationContext();
+    return (React.createElement("button", { "aria-label": t('aria/Stop AI Generation'), className: 'str-chat__stop-ai-generation-button', "data-testid": 'stop-ai-generation-button', onClick: onClick, ...restProps }));
+};

package/dist/components/index.d.ts

@@ -36,5 +36,6 @@ export * from './UserItem';
 export * from './Window';
 export * from './Threads';
 export * from './ChatView';
+export * from './AIStateIndicator';
 export { UploadButton } from './ReactFileUtilities';
 export type { UploadButtonProps } from './ReactFileUtilities';

package/dist/components/index.js

@@ -35,4 +35,5 @@ export * from './UserItem';
 export * from './Window';
 export * from './Threads';
 export * from './ChatView';
+export * from './AIStateIndicator';
 export { UploadButton } from './ReactFileUtilities';

package/dist/context/ComponentContext.d.ts

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from 'react';
-import { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LinkPreviewListProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, SuggestionItemProps, SuggestionListProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
+import { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LinkPreviewListProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, SuggestionItemProps, SuggestionListProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
 import type { CustomTrigger, DefaultStreamChatGenerics, PropsWithChildrenOnly, UnknownType } from '../types/types';
+import type { StopAIGenerationButtonProps } from '../components/MessageInput/StopAIGenerationButton';
 export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
     /** Custom UI component to display a message attachment, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) */
     Attachment?: React.ComponentType<AttachmentProps<StreamChatGenerics>>;
@@ -107,6 +108,8 @@ export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGe
     SendButton?: React.ComponentType<SendButtonProps<StreamChatGenerics>>;
     /** Custom UI component button for initiating audio recording, defaults to and accepts same props as: [StartRecordingAudioButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.tsx) */
     StartRecordingAudioButton?: React.ComponentType<StartRecordingAudioButtonProps>;
+    StopAIGenerationButton?: React.ComponentType<StopAIGenerationButtonProps> | null;
+    StreamedMessageText?: React.ComponentType<StreamedMessageTextProps>;
     /** Custom UI component that displays thread's parent or other message at the top of the `MessageList`, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
     ThreadHead?: React.ComponentType<MessageProps<StreamChatGenerics>>;
     /** Custom UI component to display the header of a `Thread`, defaults to and accepts same props as: [DefaultThreadHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */