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

package/src/components/Channel/Channel.tsx

@@ -135,6 +135,7 @@ import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/
 import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/MessageStatus';
 import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageSimple/MessageTimestamp';
 import { ReactionList as ReactionListDefault } from '../Message/MessageSimple/ReactionList';
+import { StreamingMessageView as DefaultStreamingMessageView } from '../Message/MessageSimple/StreamingMessageView';
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
 import { AudioRecorder as AudioRecorderDefault } from '../MessageInput/components/AudioRecorder/AudioRecorder';
@@ -154,6 +155,7 @@ import { MoreOptionsButton as MoreOptionsButtonDefault } from '../MessageInput/M
 import { SendButton as SendButtonDefault } from '../MessageInput/SendButton';
 import { SendMessageDisallowedIndicator as SendMessageDisallowedIndicatorDefault } from '../MessageInput/SendMessageDisallowedIndicator';
 import { ShowThreadMessageInChannelButton as ShowThreadMessageInChannelButtonDefault } from '../MessageInput/ShowThreadMessageInChannelButton';
+import { StopMessageStreamingButton as DefaultStopMessageStreamingButton } from '../MessageInput/StopMessageStreamingButton';
 import { UploadProgressIndicator as UploadProgressIndicatorDefault } from '../MessageInput/UploadProgressIndicator';
 import { DateHeader as DateHeaderDefault } from '../MessageList/DateHeader';
 import type { MessageType } from '../MessageList/hooks/useMessageList';
@@ -333,6 +335,7 @@ export type ChannelPropsWithContext<
       | 'VideoThumbnail'
       | 'PollContent'
       | 'hasCreatePoll'
+      | 'StreamingMessageView'
     >
   > &
   Partial<Pick<ThreadContextValue<StreamChatGenerics>, 'allowThreadMessagesInChannel'>> & {
@@ -420,7 +423,12 @@ export type ChannelPropsWithContext<
      * Tells if channel is rendering a thread list
      */
     threadList?: boolean;
-  } & Partial<Pick<InputMessageInputContextValue, 'openPollCreationDialog' | 'CreatePollContent'>>;
+  } & Partial<
+    Pick<
+      InputMessageInputContextValue,
+      'openPollCreationDialog' | 'CreatePollContent' | 'StopMessageStreamingButton'
+    >
+  >;
 
 const ChannelWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -544,7 +552,15 @@ const ChannelWithContext = <
     MessageAvatar = MessageAvatarDefault,
     MessageBounce = MessageBounceDefault,
     MessageContent = MessageContentDefault,
-    messageContentOrder = ['quoted_reply', 'gallery', 'files', 'poll', 'text', 'attachments'],
+    messageContentOrder = [
+      'quoted_reply',
+      'gallery',
+      'files',
+      'poll',
+      'ai_text',
+      'text',
+      'attachments',
+    ],
     MessageDeleted = MessageDeletedDefault,
     MessageEditedTimestamp = MessageEditedTimestampDefault,
     MessageError = MessageErrorDefault,
@@ -596,6 +612,8 @@ const ChannelWithContext = <
     StartAudioRecordingButton = AudioRecordingButtonDefault,
     stateUpdateThrottleInterval = defaultThrottleInterval,
     StickyHeader = StickyHeaderDefault,
+    StopMessageStreamingButton: StopMessageStreamingButtonOverride,
+    StreamingMessageView = DefaultStreamingMessageView,
     supportedReactions = reactionData,
     t,
     thread: threadFromProps,
@@ -612,6 +630,10 @@ const ChannelWithContext = <
   } = props;
 
   const { thread: threadProps, threadInstance } = threadFromProps;
+  const StopMessageStreamingButton =
+    StopMessageStreamingButtonOverride === undefined
+      ? DefaultStopMessageStreamingButton
+      : StopMessageStreamingButtonOverride;
 
   const {
     theme: {
@@ -2338,6 +2360,7 @@ const ChannelWithContext = <
     setQuotedMessageState,
     ShowThreadMessageInChannelButton,
     StartAudioRecordingButton,
+    StopMessageStreamingButton,
     UploadProgressIndicator,
   });
 
@@ -2439,6 +2462,7 @@ const ChannelWithContext = <
     setEditingState,
     setQuotedMessageState,
     shouldShowUnreadUnderlay,
+    StreamingMessageView,
     supportedReactions,
     targetedMessage,
     TypingIndicator,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -64,6 +64,7 @@ export const useCreateInputMessageInputContext = <
   showPollCreationDialog,
   ShowThreadMessageInChannelButton,
   StartAudioRecordingButton,
+  StopMessageStreamingButton,
   UploadProgressIndicator,
 }: InputMessageInputContextValue<StreamChatGenerics> & {
   /**
@@ -137,6 +138,7 @@ export const useCreateInputMessageInputContext = <
       showPollCreationDialog,
       ShowThreadMessageInChannelButton,
       StartAudioRecordingButton,
+      StopMessageStreamingButton,
       UploadProgressIndicator,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -88,6 +88,7 @@ export const useCreateMessagesContext = <
   setEditingState,
   setQuotedMessageState,
   shouldShowUnreadUnderlay,
+  StreamingMessageView,
   supportedReactions,
   targetedMessage,
   TypingIndicator,
@@ -189,6 +190,7 @@ export const useCreateMessagesContext = <
       setEditingState,
       setQuotedMessageState,
       shouldShowUnreadUnderlay,
+      StreamingMessageView,
       supportedReactions,
       targetedMessage,
       TypingIndicator,

package/src/components/Message/Message.tsx

@@ -456,6 +456,8 @@ const MessageWithContext = <
         return !!attachments.images.length || !!attachments.videos.length;
       case 'poll':
         return !!message.poll_id;
+      case 'ai_text':
+        return !!message.ai_generated;
       case 'text':
       default:
         return !!message.text;
@@ -863,7 +865,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.text === nextMessage.text &&
     prevMessage.pinned === nextMessage.pinned &&
     `${prevMessage?.updated_at}` === `${nextMessage?.updated_at}` &&
-    prevMessage.i18n === nextMessage.i18n;
+    prevMessage.i18n === nextMessage.i18n &&
+    prevMessage.ai_generated === nextMessage.ai_generated;
 
   if (!messageEqual) return false;
 

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 };
+};