stream-chat-react-native-core 5.43.3-beta.2 → 5.44.0

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -100,6 +100,7 @@ export type MessageContentPropsWithContext<
     | 'myMessageTheme'
     | 'onPressInMessage'
     | 'Reply'
+    | 'StreamingMessageView'
   > &
   Pick<TranslationContextValue, 't'> & {
     setMessageContentWidth: React.Dispatch<React.SetStateAction<number>>;
@@ -142,6 +143,7 @@ const MessageContentWithContext = <
     Reply,
     setMessageContentWidth,
     showMessageStatus,
+    StreamingMessageView,
     threadList,
   } = props;
   const { client } = useChatContext();
@@ -393,9 +395,16 @@ const MessageContentWithContext = <
                   />
                 ) : null;
               }
+              case 'ai_text':
+                return message.ai_generated ? (
+                  <StreamingMessageView
+                    key={`ai_message_text_container_${messageContentOrderIndex}`}
+                  />
+                ) : null;
               case 'text':
               default:
-                return otherAttachments.length && otherAttachments[0].actions ? null : (
+                return (otherAttachments.length && otherAttachments[0].actions) ||
+                  message.ai_generated ? null : (
                   <MessageTextContainer<StreamChatGenerics>
                     key={`message_text_container_${messageContentOrderIndex}`}
                   />
@@ -484,7 +493,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
     prevMessage.pinned === nextMessage.pinned &&
-    prevMessage.i18n === nextMessage.i18n;
+    prevMessage.i18n === nextMessage.i18n &&
+    prevMessage.ai_generated === nextMessage.ai_generated;
   if (!messageEqual) return false;
 
   const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';
@@ -597,6 +607,7 @@ export const MessageContent = <
     MessageStatus,
     myMessageTheme,
     Reply,
+    StreamingMessageView,
   } = useMessagesContext<StreamChatGenerics>();
   const { t } = useTranslationContext();
 
@@ -635,6 +646,7 @@ export const MessageContent = <
         preventPress,
         Reply,
         showMessageStatus,
+        StreamingMessageView,
         t,
         threadList,
       }}

package/src/components/Message/MessageSimple/MessageFooter.tsx

@@ -129,6 +129,8 @@ const MessageFooterWithContext = <
     return null;
   }
 
+  const isEdited = isEditedMessage(message);
+
   return (
     <>
       <View style={[styles.container, metaContainer]} testID='message-status-time'>
@@ -141,7 +143,7 @@ const MessageFooterWithContext = <
         {showMessageStatus && <MessageStatus />}
         <MessageTimestamp formattedDate={formattedDate} timestamp={date} />
 
-        {isEditedMessage(message) && !isEditedMessageOpen && (
+        {isEdited && !isEditedMessageOpen ? (
           <>
             <Text
               style={[
@@ -159,11 +161,11 @@ const MessageFooterWithContext = <
               {t<string>('Edited')}
             </Text>
           </>
-        )}
+        ) : null}
       </View>
-      {isEditedMessageOpen && (
+      {isEdited && isEditedMessageOpen ? (
         <MessageEditedTimestamp message={message} MessageTimestamp={MessageTimestamp} />
-      )}
+      ) : null}
     </>
   );
 };

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -154,7 +154,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
-    prevMessage.i18n === nextMessage.i18n;
+    prevMessage.i18n === nextMessage.i18n &&
+    prevMessage.pinned === nextMessage.pinned &&
+    prevMessage.ai_generated === nextMessage.ai_generated;
   if (!messageEqual) return false;
 
   const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';

package/src/components/Message/MessageSimple/StreamingMessageView.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { MessageTextContainer, MessageTextContainerProps } from './MessageTextContainer';
+
+import { useMessageContext } from '../../../contexts';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { useStreamingMessage } from '../hooks/useStreamingMessage';
+
+export type StreamingMessageViewProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageTextContainerProps<StreamChatGenerics>, 'message'> & {
+  letterInterval?: number;
+  renderingLetterCount?: number;
+};
+
+export const StreamingMessageView = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: StreamingMessageViewProps<StreamChatGenerics>,
+) => {
+  const { letterInterval, message: messageFromProps, renderingLetterCount } = props;
+  const { message: messageFromContext } = useMessageContext<StreamChatGenerics>();
+  const message = messageFromProps || messageFromContext;
+  const { text = '' } = message;
+  const { streamedMessageText } = useStreamingMessage({
+    letterInterval,
+    renderingLetterCount,
+    text,
+  });
+
+  return <MessageTextContainer message={{ ...message, text: streamedMessageText }} />;
+};
+
+StreamingMessageView.displayName = 'StreamingMessageView{messageSimple{content}}';

package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts

@@ -33,7 +33,11 @@ export const generateMarkdownText = (text?: string) => {
     resultText = resultText.replace(mentionsRegex, `@${displayLink}`);
   }
 
-  resultText = resultText.replace(/[<"'>]/g, '\\$&');
+  // Escape the " and ' characters, except in code blocks where we deem this allowed.
+  resultText = resultText.replace(/(```[\s\S]*?```|`.*?`)|[<"'>]/g, (match, code) => {
+    if (code) return code;
+    return `\\${match}`;
+  });
 
   // Remove whitespaces that come directly after newlines except in code blocks where we deem this allowed.
   resultText = resultText.replace(/(```[\s\S]*?```|`.*?`)|\n[ ]{2,}/g, (_, code) => {
@@ -41,5 +45,9 @@ export const generateMarkdownText = (text?: string) => {
     return '\n';
   });
 
+  // Always replace \n``` with \n\n``` to force the markdown state machine to treat it as a separate block. Otherwise, code blocks inside of list
+  // items for example were broken. We clean up the code block closing state within the rendering itself.
+  resultText = resultText.replace(/\n```/g, '\n\n```');
+
   return resultText;
 };

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -1,8 +1,18 @@
-import React, { PropsWithChildren } from 'react';
-import { GestureResponderEvent, Linking, Text, TextProps, View, ViewProps } from 'react-native';
-
+import React, { PropsWithChildren, ReactNode, useCallback, useMemo } from 'react';
+import {
+  GestureResponderEvent,
+  Linking,
+  Platform,
+  Text,
+  TextProps,
+  View,
+  ViewProps,
+} from 'react-native';
+
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 // @ts-expect-error
 import Markdown from 'react-native-markdown-package';
+import Animated, { clamp, scrollTo, useAnimatedRef, useSharedValue } from 'react-native-reanimated';
 
 import {
   DefaultRules,
@@ -26,7 +36,64 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { escapeRegExp } from '../../../../utils/utils';
 import type { MessageType } from '../../../MessageList/hooks/useMessageList';
 
+export const MarkdownReactiveScrollView = ({ children }: { children: ReactNode }) => {
+  const scrollViewRef = useAnimatedRef<Animated.ScrollView>();
+  const contentWidth = useSharedValue(0);
+  const visibleContentWidth = useSharedValue(0);
+  const offsetBeforeScroll = useSharedValue(0);
+
+  const panGesture = Gesture.Pan()
+    .activeOffsetX([-5, 5])
+    .onUpdate((event) => {
+      const { translationX } = event;
+
+      scrollTo(scrollViewRef, offsetBeforeScroll.value - translationX, 0, false);
+    })
+    .onEnd((event) => {
+      const { translationX } = event;
+
+      const velocityEffect = event.velocityX * 0.3;
+
+      const finalPosition = clamp(
+        offsetBeforeScroll.value - translationX - velocityEffect,
+        0,
+        contentWidth.value - visibleContentWidth.value,
+      );
+
+      offsetBeforeScroll.value = finalPosition;
+
+      scrollTo(scrollViewRef, finalPosition, 0, true);
+    });
+
+  return (
+    <View style={{ width: '100%' }}>
+      <GestureDetector gesture={panGesture}>
+        <Animated.ScrollView
+          contentContainerStyle={{ flexGrow: 1 }}
+          horizontal
+          nestedScrollEnabled={true}
+          onContentSizeChange={(width) => {
+            contentWidth.value = width;
+          }}
+          onLayout={(e) => {
+            visibleContentWidth.value = e.nativeEvent.layout.width;
+          }}
+          ref={scrollViewRef}
+          scrollEnabled={false}
+        >
+          {children}
+        </Animated.ScrollView>
+      </GestureDetector>
+    </View>
+  );
+};
+
 const defaultMarkdownStyles: MarkdownStyle = {
+  codeBlock: {
+    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'Monospace',
+    fontWeight: '500',
+    marginVertical: 8,
+  },
   inlineCode: {
     fontSize: 13,
     padding: 3,
@@ -60,6 +127,26 @@ const defaultMarkdownStyles: MarkdownStyle = {
     marginBottom: 8,
     marginTop: 8,
   },
+  table: {
+    borderRadius: 3,
+    borderWidth: 1,
+    flex: 1,
+    flexDirection: 'row',
+  },
+  tableHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  tableHeaderCell: {
+    fontWeight: '500',
+  },
+  tableRow: {
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  tableRowCell: {
+    flex: 1,
+  },
 };
 
 const mentionsParseFunction: ParseFunction = (capture, parse, state) => ({
@@ -113,6 +200,13 @@ export const renderText = <
       color: colors.accent_blue,
       ...markdownStyles?.autolink,
     },
+    codeBlock: {
+      ...defaultMarkdownStyles.codeBlock,
+      backgroundColor: colors.code_block,
+      color: colors.black,
+      padding: 8,
+      ...markdownStyles?.codeBlock,
+    },
     inlineCode: {
       ...defaultMarkdownStyles.inlineCode,
       backgroundColor: colors.white_smoke,
@@ -125,6 +219,35 @@ export const renderText = <
       color: colors.accent_blue,
       ...markdownStyles?.mentions,
     },
+    table: {
+      ...defaultMarkdownStyles.table,
+      borderColor: colors.grey_dark,
+      marginVertical: 8,
+      ...markdownStyles?.table,
+    },
+    tableHeader: {
+      ...defaultMarkdownStyles.tableHeader,
+      backgroundColor: colors.grey,
+      ...markdownStyles?.tableHeader,
+    },
+    tableHeaderCell: {
+      ...defaultMarkdownStyles.tableHeaderCell,
+      padding: 5,
+      ...markdownStyles?.tableHeaderCell,
+    },
+    tableRow: {
+      ...defaultMarkdownStyles.tableRow,
+      ...markdownStyles?.tableRow,
+    },
+    tableRowCell: {
+      ...defaultMarkdownStyles.tableRowCell,
+      borderColor: colors.grey_dark,
+      padding: 5,
+      ...markdownStyles?.tableRowCell,
+    },
+    tableRowLast: {
+      ...markdownStyles?.tableRowLast,
+    },
     text: {
       ...defaultMarkdownStyles.text,
       color: colors.black,
@@ -263,6 +386,18 @@ export const renderText = <
     />
   );
 
+  const codeBlockReact: ReactNodeOutput = (node, _, state) => (
+    <MarkdownReactiveScrollView key={state.key}>
+      <Text style={styles.codeBlock}>{node?.content?.trim()}</Text>
+    </MarkdownReactiveScrollView>
+  );
+
+  const tableReact: ReactNodeOutput = (node, output, state) => (
+    <MarkdownReactiveScrollView key={state.key}>
+      <MarkdownTable node={node} output={output} state={state} styles={styles} />
+    </MarkdownReactiveScrollView>
+  );
+
   const customRules = {
     // do not render images, we will scrape them out of the message and show on attachment card component
     image: { match: () => null },
@@ -283,6 +418,8 @@ export const renderText = <
           },
         }
       : {}),
+    codeBlock: { react: codeBlockReact },
+    table: { react: tableReact },
   };
 
   return (
@@ -373,3 +510,70 @@ const ListRow = ({ children, style }: PropsWithChildren<ViewProps>) => (
 const ListItem = ({ children, style }: PropsWithChildren<TextProps>) => (
   <Text style={style}>{children}</Text>
 );
+
+export type MarkdownTableProps = {
+  node: SingleASTNode;
+  output: ReactOutput;
+  state: State;
+  styles: Partial<MarkdownStyle>;
+};
+
+const transpose = (matrix: SingleASTNode[][]) =>
+  matrix[0].map((_, colIndex) => matrix.map((row) => row[colIndex]));
+
+const MarkdownTable = ({ node, output, state, styles }: MarkdownTableProps) => {
+  const content = useMemo(() => {
+    const nodeContent = [node?.header, ...node?.cells];
+    return transpose(nodeContent);
+  }, [node?.cells, node?.header]);
+  const columns = content?.map((column, idx) => (
+    <MarkdownTableColumn
+      items={column}
+      key={`column-${idx}`}
+      output={output}
+      state={state}
+      styles={styles}
+    />
+  ));
+
+  return (
+    <View key={state.key} style={styles.table}>
+      {columns}
+    </View>
+  );
+};
+
+export type MarkdownTableRowProps = {
+  items: SingleASTNode[];
+  output: ReactOutput;
+  state: State;
+  styles: Partial<MarkdownStyle>;
+};
+
+const MarkdownTableColumn = ({ items, output, state, styles }: MarkdownTableRowProps) => {
+  const [headerCellContent, ...columnCellContents] = items;
+
+  const ColumnCell = useCallback(
+    ({ content }: { content: SingleASTNode }) =>
+      content ? (
+        <View style={styles.tableRow}>
+          <View style={styles.tableRowCell}>{output(content, state)}</View>
+        </View>
+      ) : null,
+    [output, state, styles],
+  );
+
+  return (
+    <View style={{ flex: 1, flexDirection: 'column' }}>
+      {headerCellContent ? (
+        <View key={-1} style={styles.tableHeader}>
+          <Text style={styles.tableHeaderCell}>{output(headerCellContent, state)}</Text>
+        </View>
+      ) : null}
+      {columnCellContents &&
+        columnCellContents.map((content, idx) => (
+          <ColumnCell content={content} key={`cell-${idx}`} />
+        ))}
+    </View>
+  );
+};

package/src/components/Message/hooks/useStreamingMessage.ts

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react';
+
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { StreamingMessageViewProps } from '../MessageSimple/StreamingMessageView';
+
+export type UseStreamingMessageProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  StreamingMessageViewProps<StreamChatGenerics>,
+  'letterInterval' | 'renderingLetterCount'
+> & { text: string };
+
+const DEFAULT_LETTER_INTERVAL = 0;
+const DEFAULT_RENDERING_LETTER_COUNT = 2;
+
+/**
+ * A hook that returns text in a streamed, typewriter fashion. The speed of streaming is
+ * configurable.
+ * @param {number} [letterInterval=0] - 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 useStreamingMessage = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  letterInterval = DEFAULT_LETTER_INTERVAL,
+  renderingLetterCount = DEFAULT_RENDERING_LETTER_COUNT,
+  text,
+}: UseStreamingMessageProps<StreamChatGenerics>): { streamedMessageText: string } => {
+  const [streamedMessageText, setStreamedMessageText] = useState<string>(text);
+  const textCursor = useRef<number>(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;
+      const codeBlockCounts = (newText.match(/```/g) || []).length;
+      const shouldOptimisticallyCloseCodeBlock = codeBlockCounts > 0 && codeBlockCounts % 2 > 0;
+      setStreamedMessageText(shouldOptimisticallyCloseCodeBlock ? newText + '```' : newText);
+    }, letterInterval);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [letterInterval, renderingLetterCount, text]);
+
+  return { streamedMessageText };
+};

package/src/components/MessageInput/MessageInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Modal,
   NativeSyntheticEvent,
@@ -58,6 +58,7 @@ import {
 
 import { isImageMediaLibraryAvailable, triggerHaptic } from '../../native';
 import type { Asset, DefaultStreamChatGenerics } from '../../types/types';
+import { AIStates, useAIState } from '../AITypingIndicatorView';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
 
@@ -159,6 +160,7 @@ type MessageInputPropsWithContext<
     | 'showPollCreationDialog'
     | 'sendMessage'
     | 'CreatePollContent'
+    | 'StopMessageStreamingButton'
   > &
   Pick<MessagesContextValue<StreamChatGenerics>, 'Reply'> &
   Pick<
@@ -228,6 +230,7 @@ const MessageInputWithContext = <
     showPollCreationDialog,
     ShowThreadMessageInChannelButton,
     StartAudioRecordingButton,
+    StopMessageStreamingButton,
     suggestions,
     text,
     thread,
@@ -728,6 +731,13 @@ const MessageInputWithContext = <
     })),
   };
 
+  const { channel } = useChannelContext<StreamChatGenerics>();
+  const { aiState } = useAIState(channel);
+
+  const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
+  const shouldDisplayStopAIGeneration =
+    [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopMessageStreamingButton;
+
   return (
     <>
       <View
@@ -833,7 +843,10 @@ const MessageInputWithContext = <
                 </>
               )}
 
-              {isSendingButtonVisible() &&
+              {shouldDisplayStopAIGeneration ? (
+                <StopMessageStreamingButton onPress={stopGenerating} />
+              ) : (
+                isSendingButtonVisible() &&
                 (cooldownRemainingSeconds ? (
                   <CooldownTimer seconds={cooldownRemainingSeconds} />
                 ) : (
@@ -842,7 +855,8 @@ const MessageInputWithContext = <
                       disabled={sending.current || !isValidMessage() || (giphyActive && !isOnline)}
                     />
                   </View>
-                ))}
+                ))
+              )}
               {audioRecordingEnabled && !micLocked && (
                 <GestureDetector gesture={panGestureMic}>
                   <Animated.View
@@ -1144,6 +1158,7 @@ export const MessageInput = <
     showPollCreationDialog,
     ShowThreadMessageInChannelButton,
     StartAudioRecordingButton,
+    StopMessageStreamingButton,
     text,
     uploadNewFile,
     uploadNewImage,
@@ -1233,6 +1248,7 @@ export const MessageInput = <
         showPollCreationDialog,
         ShowThreadMessageInChannelButton,
         StartAudioRecordingButton,
+        StopMessageStreamingButton,
         suggestions,
         t,
         text,

package/src/components/MessageInput/StopMessageStreamingButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { CircleStop } from '../../icons';
+
+export type StopMessageStreamingButtonProps = {
+  /** Function that opens attachment options bottom sheet */
+  onPress?: () => void;
+};
+
+export const StopMessageStreamingButton = (props: StopMessageStreamingButtonProps) => {
+  const { onPress } = props;
+
+  const {
+    theme: {
+      colors: { accent_blue },
+      messageInput: { stopMessageStreamingButton, stopMessageStreamingIcon },
+    },
+  } = useTheme();
+
+  return (
+    <Pressable
+      hitSlop={{ bottom: 15, left: 15, right: 15, top: 15 }}
+      onPress={onPress}
+      style={[stopMessageStreamingButton]}
+      testID='more-options-button'
+    >
+      <CircleStop fill={accent_blue} size={32} {...stopMessageStreamingIcon} />
+    </Pressable>
+  );
+};
+
+StopMessageStreamingButton.displayName = 'StopMessageStreamingButton{messageInput}';

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -45,6 +45,7 @@ import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContex
 import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
+import { StreamingMessageView } from '../Message/MessageSimple/StreamingMessageView';
 import { OverlayReactions as DefaultOverlayReactions } from '../MessageOverlay/OverlayReactions';
 import type { ReplyProps } from '../Reply/Reply';
 
@@ -451,9 +452,17 @@ const MessageOverlayWithContext = <
                           </OwnCapabilitiesProvider>
                         ) : null;
                       }
+                      case 'ai_text':
+                        return (
+                          <StreamingMessageView
+                            key={`ai_message_text_container_${messageContentOrderIndex}`}
+                            message={message}
+                          />
+                        );
                       case 'text':
                       default:
-                        return otherAttachments?.length && otherAttachments[0].actions ? null : (
+                        return (otherAttachments?.length && otherAttachments[0].actions) ||
+                          message.ai_generated ? null : (
                           <MessageTextContainer<StreamChatGenerics>
                             key={`message_text_container_${messageContentOrderIndex}`}
                             message={message}

package/src/components/index.ts

@@ -97,6 +97,7 @@ export * from './KeyboardCompatibleView/KeyboardCompatibleView';
 export * from './Message/hooks/useCreateMessageContext';
 export * from './Message/hooks/useMessageActions';
 export * from './Message/hooks/useMessageActionHandlers';
+export * from './Message/hooks/useStreamingMessage';
 export * from './Message/Message';
 export * from './Message/MessageSimple/MessageAvatar';
 export * from './Message/MessageSimple/MessageBounce';
@@ -132,6 +133,7 @@ export * from './MessageInput/InputButtons';
 export * from './MessageInput/MessageInput';
 export * from './MessageInput/MoreOptionsButton';
 export * from './MessageInput/SendButton';
+export * from './MessageInput/StopMessageStreamingButton';
 export * from './MessageInput/ShowThreadMessageInChannelButton';
 export * from './MessageInput/UploadProgressIndicator';
 
@@ -172,3 +174,6 @@ export * from './Spinner/Spinner';
 export * from './Thread/Thread';
 export * from './Thread/components/ThreadFooterComponent';
 export * from './ThreadList/ThreadList';
+
+export * from './Message/MessageSimple/StreamingMessageView';
+export * from './AITypingIndicatorView';

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -29,7 +29,7 @@ import { useMessageDetailsForState } from './hooks/useMessageDetailsForState';
 
 import { isUploadAllowed, MAX_FILE_SIZE_TO_UPLOAD, prettifyFileSize } from './utils/utils';
 
-import { PollContentProps } from '../../components';
+import { PollContentProps, StopMessageStreamingButtonProps } from '../../components';
 import { AudioAttachmentProps } from '../../components/Attachment/AudioAttachment';
 import { parseLinksFromText } from '../../components/Message/MessageSimple/utils/parseLinks';
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
@@ -385,6 +385,7 @@ export type InputMessageInputContextValue<
    * Defaults to and accepts same props as: [AudioRecordingButton](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx)
    */
   StartAudioRecordingButton: React.ComponentType<AudioRecordingButtonProps<StreamChatGenerics>>;
+  StopMessageStreamingButton: React.ComponentType<StopMessageStreamingButtonProps>;
   /**
    * Custom UI component to render upload progress indicator on attachment preview.
    *
@@ -586,7 +587,9 @@ export const MessageInputProvider = <
     editing,
     initialValue,
     openPollCreationDialog: openPollCreationDialogFromContext,
+    StopMessageStreamingButton,
   } = value;
+
   const {
     fileUploads,
     imageUploads,
@@ -1481,6 +1484,7 @@ export const MessageInputProvider = <
     openPollCreationDialog,
     sendMessage, // overriding the originally passed in sendMessage
     showPollCreationDialog,
+    StopMessageStreamingButton,
   });
   return (
     <MessageInputContext.Provider