stream-chat-react 12.6.2 → 12.7.1

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/ChannelList/ChannelList.d.ts

@@ -5,6 +5,7 @@ import { ChannelPreviewUIComponentProps } from '../ChannelPreview/ChannelPreview
 import { ChannelSearchProps } from '../ChannelSearch/ChannelSearch';
 import { EmptyStateIndicatorProps } from '../EmptyStateIndicator';
 import { LoadMorePaginatorProps } from '../LoadMore/LoadMorePaginator';
+import { ChatContextValue } from '../../context';
 import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from 'stream-chat';
 import type { ChannelAvatarProps } from '../Avatar';
 import type { TranslationContextValue } from '../../context/TranslationContext';
@@ -34,7 +35,7 @@ export type ChannelListProps<StreamChatGenerics extends DefaultStreamChatGeneric
     /** 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;
+    getLatestMessagePreview?: (channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage'], isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated']) => 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/ChannelPreview/ChannelPreview.js

@@ -9,7 +9,7 @@ import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 export const ChannelPreview = (props) => {
     const { channel, Preview = ChannelPreviewMessenger, channelUpdateCount, getLatestMessagePreview = defaultGetLatestMessagePreview, } = props;
-    const { channel: activeChannel, client, setActiveChannel } = useChatContext('ChannelPreview');
+    const { channel: activeChannel, client, isMessageAIGenerated, setActiveChannel, } = useChatContext('ChannelPreview');
     const { t, userLanguage } = useTranslationContext('ChannelPreview');
     const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
         channel,
@@ -75,6 +75,6 @@ export const ChannelPreview = (props) => {
     }, [channel, refreshUnreadCount, channelUpdateCount]);
     if (!Preview)
         return null;
-    const latestMessagePreview = getLatestMessagePreview(channel, t, userLanguage);
+    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.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 import type { Channel, UserResponse } from 'stream-chat';
 import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import { ChatContextValue } from '../../context';
 export declare const renderPreviewText: (text: string) => React.JSX.Element;
-export declare const getLatestMessagePreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage?: TranslationContextValue['userLanguage']) => string | JSX.Element;
+export declare const getLatestMessagePreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage?: TranslationContextValue['userLanguage'], isMessageAIGenerated?: ChatContextValue<StreamChatGenerics>['isMessageAIGenerated']) => string | JSX.Element;
 export type GroupChannelDisplayInfo = {
     image?: string;
     name?: string;

package/dist/components/ChannelPreview/utils.js

@@ -12,7 +12,7 @@ const getLatestPollVote = (latestVotesByOption) => {
     }
     return latestVote;
 };
-export const getLatestMessagePreview = (channel, t, userLanguage = 'en') => {
+export const getLatestMessagePreview = (channel, t, userLanguage = 'en', isMessageAIGenerated) => {
     const latestMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
     const previewTextToRender = latestMessage?.i18n?.[`${userLanguage}_text`] ||
         latestMessage?.text;
@@ -47,7 +47,9 @@ export const getLatestMessagePreview = (channel, t, userLanguage = 'en') => {
         }
     }
     if (previewTextToRender) {
-        return renderPreviewText(previewTextToRender);
+        return isMessageAIGenerated?.(latestMessage)
+            ? previewTextToRender
+            : renderPreviewText(previewTextToRender);
     }
     if (latestMessage.command) {
         return `/${latestMessage.command}`;

package/dist/components/Chat/Chat.d.ts

@@ -4,6 +4,7 @@ import type { StreamChat } from 'stream-chat';
 import type { SupportedTranslations } from '../../i18n/types';
 import type { Streami18n } from '../../i18n/Streami18n';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { MessageContextValue } from '../../context';
 export type ChatProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     /** The StreamChat client object */
     client: StreamChat<StreamChatGenerics>;
@@ -25,7 +26,7 @@ export type ChatProps<StreamChatGenerics extends DefaultStreamChatGenerics = Def
      * Note: requires importing `stream-chat-react/css/v2/emoji-replacement.css` style sheet
      */
     useImageFlagEmojisOnWindows?: boolean;
-};
+} & Partial<Pick<MessageContextValue<StreamChatGenerics>, 'isMessageAIGenerated'>>;
 /**
  * Wrapper component for a StreamChat application. Chat needs to be placed around any other chat components
  * as it provides the ChatContext.

package/dist/components/Chat/Chat.js

@@ -9,7 +9,7 @@ import { TranslationProvider } from '../../context/TranslationContext';
  * as it provides the ChatContext.
  */
 export const Chat = (props) => {
-    const { children, client, customClasses, defaultLanguage, i18nInstance, initialNavOpen = true, theme = 'messaging light', useImageFlagEmojisOnWindows = false, } = props;
+    const { children, client, customClasses, defaultLanguage, i18nInstance, initialNavOpen = true, isMessageAIGenerated, theme = 'messaging light', useImageFlagEmojisOnWindows = false, } = props;
     const { channel, closeMobileNav, getAppSettings, latestMessageDatesByChannels, mutes, navOpen, openMobileNav, setActiveChannel, translators, } = useChat({ client, defaultLanguage, i18nInstance, initialNavOpen });
     const channelsQueryState = useChannelsQueryState();
     const chatContextValue = useCreateChatContext({
@@ -19,6 +19,7 @@ export const Chat = (props) => {
         closeMobileNav,
         customClasses,
         getAppSettings,
+        isMessageAIGenerated,
         latestMessageDatesByChannels,
         mutes,
         navOpen,

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

@@ -28,7 +28,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
             // the upper-case text between double underscores is replaced with the actual semantic version of the library
-            client.setUserAgent(`stream-chat-react-12.6.2-${userAgent}`);
+            client.setUserAgent(`stream-chat-react-12.7.1-${userAgent}`);
         }
         client.threads.registerSubscriptions();
         client.polls.registerSubscriptions();

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 export const useCreateChatContext = (value) => {
-    const { channel, channelsQueryState, client, closeMobileNav, customClasses, getAppSettings, latestMessageDatesByChannels, mutes, navOpen, openMobileNav, setActiveChannel, theme, useImageFlagEmojisOnWindows, } = value;
+    const { channel, channelsQueryState, client, closeMobileNav, customClasses, getAppSettings, isMessageAIGenerated, latestMessageDatesByChannels, mutes, navOpen, openMobileNav, setActiveChannel, theme, useImageFlagEmojisOnWindows, } = value;
     const channelCid = channel?.cid;
     const channelsQueryError = channelsQueryState.error;
     const channelsQueryInProgress = channelsQueryState.queryInProgress;
@@ -14,6 +14,7 @@ export const useCreateChatContext = (value) => {
         closeMobileNav,
         customClasses,
         getAppSettings,
+        isMessageAIGenerated,
         latestMessageDatesByChannels,
         mutes,
         navOpen,
@@ -31,6 +32,7 @@ export const useCreateChatContext = (value) => {
         getAppSettings,
         mutedUsersLength,
         navOpen,
+        isMessageAIGenerated,
     ]);
     return chatContext;
 };

package/dist/components/Message/Message.js

@@ -5,7 +5,7 @@ import { MessageProvider, useChannelActionContext, useChannelStateContext, useCh
 import { MessageSimple as DefaultMessage } from './MessageSimple';
 const MessageWithContext = (props) => {
     const { canPin, groupedByUser, Message: propMessage, message, messageActions = Object.keys(MESSAGE_ACTIONS), onUserClick: propOnUserClick, onUserHover: propOnUserHover, userRoles, } = props;
-    const { client } = useChatContext('Message');
+    const { client, isMessageAIGenerated } = useChatContext('Message');
     const { read } = useChannelStateContext('Message');
     const { Message: contextMessage } = useComponentContext('Message');
     const actionsEnabled = message.type === 'regular' && message.status === 'received';
@@ -58,6 +58,7 @@ const MessageWithContext = (props) => {
         editing,
         getMessageActions: messageActionsHandler,
         handleEdit: setEdit,
+        isMessageAIGenerated,
         isMyMessage: () => isMyMessage,
         messageIsUnread,
         onUserClick,

package/dist/components/Message/MessageSimple.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import clsx from 'clsx';
 import { MessageErrorIcon } from './icons';
 import { MessageBouncePrompt as DefaultMessageBouncePrompt } from '../MessageBounce';
@@ -22,8 +22,9 @@ 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 { additionalMessageInputProps, clearEditingState, editing, endOfGroup, firstOfGroup, groupedByUser, handleAction, handleOpenThread, handleRetry, highlighted, isMessageAIGenerated, isMyMessage, message, onUserClick, onUserHover, renderText, threadList, } = props;
     const { client } = useChatContext('MessageSimple');
     const { t } = useTranslationContext('MessageSimple');
     const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
@@ -31,9 +32,13 @@ 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);
+    const isAIGenerated = useMemo(() => isMessageAIGenerated?.(message), [
+        isMessageAIGenerated,
+        message,
+    ]);
     if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
         return null;
     }
@@ -44,7 +49,7 @@ const MessageSimpleWithContext = (props) => {
     const showReplyCountButton = !threadList && !!message.reply_count;
     const allowRetry = message.status === 'failed' && message.errorStatusCode !== 403;
     const isBounced = isMessageBounced(message);
-    const isEdited = isMessageEdited(message);
+    const isEdited = isMessageEdited(message) && !isAIGenerated;
     let handleClick = undefined;
     if (allowRetry) {
         handleClick = () => handleRetry(message);
@@ -84,7 +89,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 }),
+                    isAIGenerated ? (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/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/ChatContext.d.ts

@@ -36,7 +36,7 @@ export type ChatContextValue<StreamChatGenerics extends DefaultStreamChatGeneric
      */
     customClasses?: CustomClasses;
     navOpen?: boolean;
-} & Required<Pick<ChatProps<StreamChatGenerics>, 'theme' | 'client'>>;
+} & Partial<Pick<ChatProps<StreamChatGenerics>, 'isMessageAIGenerated'>> & Required<Pick<ChatProps<StreamChatGenerics>, 'theme' | 'client'>>;
 export declare const ChatContext: React.Context<ChatContextValue<DefaultStreamChatGenerics> | undefined>;
 export declare const ChatProvider: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ children, value, }: PropsWithChildren<{
     value: ChatContextValue<StreamChatGenerics>;

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

package/dist/context/MessageContext.d.ts

@@ -86,6 +86,10 @@ export type MessageContextValue<StreamChatGenerics extends DefaultStreamChatGene
     highlighted?: boolean;
     /** Whether the threaded message is the first in the thread list */
     initialMessage?: boolean;
+    /**
+     * A factory function that determines whether a message is AI generated or not.
+     */
+    isMessageAIGenerated?: (message: StreamMessage<StreamChatGenerics>) => boolean;
     /** Latest message id on current channel */
     lastReceivedId?: string | null;
     /** DOMRect object for parent MessageList component */