stream-chat-react-native-core 6.0.0-rc.8 → 6.0.0

package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts

@@ -0,0 +1,138 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import throttle from 'lodash/throttle';
+import type { Channel, ChannelState, Event, MessageResponse, StreamChat } from 'stream-chat';
+
+import { useIsChannelMuted } from './useIsChannelMuted';
+
+import { useLatestMessagePreview } from './useLatestMessagePreview';
+
+import { useChannelsContext } from '../../../contexts';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+
+export const useChannelPreviewData = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  channel: Channel<StreamChatGenerics>,
+  client: StreamChat<StreamChatGenerics>,
+  forceUpdateOverride?: number,
+) => {
+  const [forceUpdate, setForceUpdate] = useState(0);
+  const [lastMessage, setLastMessage] = useState<
+    | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
+    | MessageResponse<StreamChatGenerics>
+  >(channel.state.messages[channel.state.messages.length - 1]);
+  const [unread, setUnread] = useState(channel.countUnread());
+  const { muted } = useIsChannelMuted(channel);
+  const { forceUpdate: contextForceUpdate } = useChannelsContext<StreamChatGenerics>();
+  const channelListForceUpdate = forceUpdateOverride ?? contextForceUpdate;
+
+  const channelLastMessage = channel.lastMessage();
+  const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;
+
+  useEffect(() => {
+    const { unsubscribe } = client.on('notification.mark_read', () => {
+      setUnread(channel.countUnread());
+    });
+    return unsubscribe;
+  }, [channel, client]);
+
+  useEffect(() => {
+    if (
+      channelLastMessage &&
+      (channelLastMessage.id !== lastMessage?.id ||
+        channelLastMessage.updated_at !== lastMessage?.updated_at)
+    ) {
+      setLastMessage(channelLastMessage);
+    }
+    const newUnreadCount = channel.countUnread();
+    setUnread(newUnreadCount);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [channel, channelLastMessageString, channelListForceUpdate]);
+
+  /**
+   * This effect listens for the `notification.mark_read` event and sets the unread count to 0
+   */
+  useEffect(() => {
+    const handleReadEvent = (event: Event) => {
+      if (!event.cid) return;
+      if (channel.cid !== event.cid) return;
+      if (event?.user?.id === client.userID) {
+        setUnread(0);
+      } else if (event?.user?.id) {
+        setForceUpdate((prev) => prev + 1);
+      }
+    };
+    const { unsubscribe } = client.on('message.read', handleReadEvent);
+    return unsubscribe;
+  }, [client, channel]);
+
+  /**
+   * This effect listens for the `notification.mark_unread` event and updates the unread count
+   */
+  useEffect(() => {
+    const handleUnreadEvent = (event: Event) => {
+      if (!event.cid) return;
+      if (channel.cid !== event.cid) return;
+      if (event.user?.id !== client.user?.id) return;
+      setUnread(channel.countUnread());
+    };
+    const { unsubscribe } = client.on('notification.mark_unread', handleUnreadEvent);
+    return unsubscribe;
+  }, [client, channel]);
+
+  const refreshUnreadCount = useMemo(
+    () =>
+      throttle(() => {
+        if (muted) {
+          setUnread(0);
+        } else {
+          setUnread(channel.countUnread());
+        }
+      }, 400),
+    [channel, muted],
+  );
+
+  /**
+   * This effect listens for the `message.new`, `message.updated`, `message.deleted`, `message.undeleted`, and `channel.truncated` events
+   */
+  useEffect(() => {
+    refreshUnreadCount();
+
+    const handleEvent = () => {
+      setLastMessage(channel.state.latestMessages[channel.state.latestMessages.length - 1]);
+      refreshUnreadCount();
+    };
+
+    const handleNewMessageEvent = (event: Event<StreamChatGenerics>) => {
+      const message = event.message;
+      if (message && (!message.parent_id || message.show_in_channel)) {
+        setLastMessage(message);
+        setUnread(channel.countUnread());
+      }
+    };
+
+    const handleUpdatedOrDeletedMessage = (event: Event<StreamChatGenerics>) => {
+      setLastMessage((prevLastMessage) => {
+        if (prevLastMessage?.id === event.message?.id) {
+          return event.message;
+        }
+        return prevLastMessage;
+      });
+    };
+
+    const listeners = [
+      channel.on('message.new', handleNewMessageEvent),
+      channel.on('message.updated', handleUpdatedOrDeletedMessage),
+      channel.on('message.deleted', handleUpdatedOrDeletedMessage),
+      channel.on('message.undeleted', handleEvent),
+      channel.on('channel.truncated', handleEvent),
+    ];
+
+    return () => listeners.forEach((l) => l.unsubscribe());
+  }, [channel, refreshUnreadCount, forceUpdate, channelListForceUpdate]);
+
+  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, lastMessage);
+
+  return { latestMessagePreview, muted, unread };
+};

package/src/components/ChannelPreview/hooks/useIsChannelMuted.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+import type { Channel } from 'stream-chat';
+
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+
+export const useIsChannelMuted = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  channel: Channel<StreamChatGenerics>,
+) => {
+  const { client } = useChatContext<StreamChatGenerics>();
+  const initialized = channel?.initialized;
+
+  const [muted, setMuted] = useState(() => initialized && channel.muteStatus());
+
+  useEffect(() => {
+    const handleEvent = () => {
+      setMuted(initialized && channel.muteStatus());
+    };
+
+    client.on('notification.channel_mutes_updated', handleEvent);
+    return () => client.off('notification.channel_mutes_updated', handleEvent);
+  }, [channel, client, initialized, muted]);
+
+  return muted || { createdAt: null, expiresAt: null, muted: false };
+};

package/src/components/Chat/Chat.tsx

@@ -35,7 +35,7 @@ init();
 export type ChatProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
-  Partial<Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'>> & {
+  Partial<Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent' | 'isMessageAIGenerated'>> & {
     /**
      * When false, ws connection won't be disconnection upon backgrounding the app.
      * To receive push notifications, its necessary that user doesn't have active
@@ -99,6 +99,12 @@ export type ChatProps<
      * ```
      */
     i18nInstance?: Streami18n;
+    /**
+     * Custom loading indicator component to be used to represent the loading state of the chat.
+     *
+     * This can be used during the phase when db is not initialised.
+     */
+    LoadingIndicator?: React.ComponentType | null;
     /**
      * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/themeContext/utils/theme.ts)
      *
@@ -142,6 +148,8 @@ const ChatWithContext = <
     enableOfflineSupport = false,
     i18nInstance,
     ImageComponent = Image,
+    isMessageAIGenerated,
+    LoadingIndicator = null,
     style,
   } = props;
 
@@ -254,6 +262,7 @@ const ChatWithContext = <
     connectionRecovering,
     enableOfflineSupport,
     ImageComponent,
+    isMessageAIGenerated,
     isOnline,
     mutedUsers,
     setActiveChannel,
@@ -267,7 +276,7 @@ const ChatWithContext = <
 
   if (userID && enableOfflineSupport && !initialisedDatabase) {
     // if user id has been set and offline support is enabled, we need to wait for database to be initialised
-    return null;
+    return LoadingIndicator ? <LoadingIndicator /> : null;
   }
 
   return (

package/src/components/Chat/hooks/__tests__/useAppSettings.test.tsx

@@ -18,6 +18,7 @@ describe('useAppSettings', () => {
               auto_translation_enabled: true,
             }),
           ),
+          userID: 'some-user-id',
         } as unknown as StreamChat,
         isOnline,
         false,

package/src/components/Chat/hooks/useAppSettings.ts

@@ -22,6 +22,8 @@ export const useAppSettings = <
      * Fetches app settings from the backend when offline support is disabled.
      */
     const enforceAppSettingsWithoutOfflineSupport = async () => {
+      if (!client.userID) return;
+
       try {
         const appSettings = await client.getAppSettings();
         if (isMounted.current) {

package/src/components/Chat/hooks/useCreateChatContext.ts

@@ -12,6 +12,7 @@ export const useCreateChatContext = <
   connectionRecovering,
   enableOfflineSupport,
   ImageComponent,
+  isMessageAIGenerated,
   isOnline,
   mutedUsers,
   setActiveChannel,
@@ -32,6 +33,7 @@ export const useCreateChatContext = <
       connectionRecovering,
       enableOfflineSupport,
       ImageComponent,
+      isMessageAIGenerated,
       isOnline,
       mutedUsers,
       setActiveChannel,

package/src/components/Chat/hooks/useIsOnline.ts

@@ -29,11 +29,6 @@ export const useIsOnline = <
   const onBackground = useCallback(() => {
     if (!closeConnectionOnBackground || !clientExists) return;
 
-    for (const cid in client.activeChannels) {
-      const channel = client.activeChannels[cid];
-      channel?.state.setIsUpToDate(false);
-    }
-
     client.closeConnection();
     setIsOnline(false);
   }, [closeConnectionOnBackground, client, clientExists]);

package/src/components/ImageGallery/ImageGallery.tsx

@@ -610,6 +610,7 @@ export const ImageGallery = <
               {...imageGalleryCustomComponents?.gridHandle}
             />
           )}
+          // @ts-ignore
           handleHeight={imageGalleryGridHandleHeight}
           index={0}
           onChange={(index: number) => setCurrentBottomSheetIndex(index)}

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -154,14 +154,14 @@ export const ImageGalleryFooterWithContext = <
   };
 
   return (
-    <View
+    <SafeAreaView
       accessibilityLabel={accessibilityLabel}
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
       style={styles.wrapper}
     >
       <Animated.View style={footerStyle}>
-        <SafeAreaView style={[{ backgroundColor: white }, container]}>
+        <View style={[{ backgroundColor: white }, container]}>
           {photo.type === FileTypes.Video ? (
             videoControlElement ? (
               videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
@@ -175,37 +175,37 @@ export const ImageGalleryFooterWithContext = <
               />
             )
           ) : null}
-          <View style={[styles.innerContainer, { backgroundColor: white }, innerContainer]}>
-            {leftElement ? (
-              leftElement({ openGridView, photo, share, shareMenuOpen })
-            ) : (
-              <ShareButton share={share} ShareIcon={ShareIcon} shareMenuOpen={shareMenuOpen} />
-            )}
-            {centerElement ? (
-              centerElement({ openGridView, photo, share, shareMenuOpen })
-            ) : (
-              <View style={[styles.centerContainer, centerContainer]}>
-                <Text style={[styles.imageCountText, { color: black }, imageCountText]}>
-                  {t<string>('{{ index }} of {{ photoLength }}', {
-                    index: photoLength - selectedIndex,
-                    photoLength,
-                  })}
-                </Text>
+        </View>
+        <View style={[styles.innerContainer, { backgroundColor: white }, innerContainer]}>
+          {leftElement ? (
+            leftElement({ openGridView, photo, share, shareMenuOpen })
+          ) : (
+            <ShareButton share={share} ShareIcon={ShareIcon} shareMenuOpen={shareMenuOpen} />
+          )}
+          {centerElement ? (
+            centerElement({ openGridView, photo, share, shareMenuOpen })
+          ) : (
+            <View style={[styles.centerContainer, centerContainer]}>
+              <Text style={[styles.imageCountText, { color: black }, imageCountText]}>
+                {t<string>('{{ index }} of {{ photoLength }}', {
+                  index: photoLength - selectedIndex,
+                  photoLength,
+                })}
+              </Text>
+            </View>
+          )}
+          {rightElement ? (
+            rightElement({ openGridView, photo, share, shareMenuOpen })
+          ) : (
+            <TouchableOpacity onPress={openGridView}>
+              <View style={[styles.rightContainer, rightContainer]}>
+                {GridIcon ? GridIcon : <GridIconDefault />}
               </View>
-            )}
-            {rightElement ? (
-              rightElement({ openGridView, photo, share, shareMenuOpen })
-            ) : (
-              <TouchableOpacity onPress={openGridView}>
-                <View style={[styles.rightContainer, rightContainer]}>
-                  {GridIcon ? GridIcon : <GridIconDefault />}
-                </View>
-              </TouchableOpacity>
-            )}
-          </View>
-        </SafeAreaView>
+            </TouchableOpacity>
+          )}
+        </View>
       </Animated.View>
-    </View>
+    </SafeAreaView>
   );
 };
 
@@ -300,7 +300,7 @@ const styles = StyleSheet.create({
   },
   innerContainer: {
     flexDirection: 'row',
-    height: 56,
+    paddingVertical: 4,
   },
   leftContainer: {
     flex: 1,

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -93,12 +93,12 @@ export const ImageGalleryHeader = <
   };
 
   return (
-    <View
+    <SafeAreaView
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
     >
       <Animated.View style={headerStyle}>
-        <SafeAreaView style={[styles.container, { backgroundColor: white }, container]}>
+        <View style={[styles.container, { backgroundColor: white }, container]}>
           {leftElement ? (
             leftElement({ hideOverlay, photo })
           ) : (
@@ -123,9 +123,9 @@ export const ImageGalleryHeader = <
           ) : (
             <View style={[styles.rightContainer, rightContainer]} />
           )}
-        </SafeAreaView>
+        </View>
       </Animated.View>
-    </View>
+    </SafeAreaView>
   );
 };
 
@@ -140,12 +140,11 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    paddingVertical: 4,
+    paddingVertical: 8,
   },
   date: {
     fontSize: 12,
     fontWeight: '500',
-    marginBottom: 8,
     opacity: 0.5,
   },
   leftContainer: {

package/src/components/ImageGallery/hooks/useAnimatedGalleryStyle.tsx

@@ -72,12 +72,12 @@ export const useAnimatedGalleryStyle = ({
         { scaleX: -1 },
         { translateY: yScaleOffset },
         {
-          translateX: -translateX.value - xScaleOffset,
+          translateX: -xScaleOffset,
         },
         { scale: oneEighth },
       ],
     };
-  }, []);
+  }, [index]);
 
   return [animatedGalleryStyle, animatedStyles];
 };

package/src/components/Message/Message.tsx

@@ -125,9 +125,15 @@ export type MessagePropsWithContext<
 > = Pick<ChannelContextValue<StreamChatGenerics>, 'channel' | 'enforceUniqueReaction' | 'members'> &
   Pick<KeyboardContextValue, 'dismissKeyboard'> &
   Partial<
-    Omit<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'handleReaction' | 'message'>
+    Omit<
+      MessageContextValue<StreamChatGenerics>,
+      'groupStyles' | 'handleReaction' | 'message' | 'isMessageAIGenerated'
+    >
+  > &
+  Pick<
+    MessageContextValue<StreamChatGenerics>,
+    'groupStyles' | 'message' | 'isMessageAIGenerated'
   > &
-  Pick<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'> &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
     | 'sendReaction'
@@ -254,6 +260,11 @@ const MessageWithContext = <
     threadList = false,
     updateMessage,
   } = props;
+  const isMessageAIGenerated = messagesContext.isMessageAIGenerated;
+  const isAIGenerated = useMemo(
+    () => isMessageAIGenerated(message),
+    [message, isMessageAIGenerated],
+  );
   const isMessageTypeDeleted = message.type === 'deleted';
   const { client } = chatContext;
   const {
@@ -418,6 +429,8 @@ const MessageWithContext = <
         return !!attachments.images.length || !!attachments.videos.length;
       case 'poll':
         return !!message.poll_id;
+      case 'ai_text':
+        return isAIGenerated;
       case 'text':
       default:
         return !!message.text;
@@ -590,6 +603,7 @@ const MessageWithContext = <
     hasReactions,
     images: attachments.images,
     isEditedMessageOpen,
+    isMessageAIGenerated,
     isMyMessage,
     lastGroupMessage: groupStyles?.[0] === 'single' || groupStyles?.[0] === 'bottom',
     lastReceivedId,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   AnimatableNumericValue,
   ColorValue,
@@ -80,6 +80,7 @@ export type MessageContentPropsWithContext<
   | 'otherAttachments'
   | 'preventPress'
   | 'threadList'
+  | 'isMessageAIGenerated'
 > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
@@ -91,6 +92,7 @@ export type MessageContentPropsWithContext<
     | 'MessageError'
     | 'myMessageTheme'
     | 'Reply'
+    | 'StreamingMessageView'
   > &
   Pick<TranslationContextValue, 't'> & {
     setMessageContentWidth: React.Dispatch<React.SetStateAction<number>>;
@@ -120,6 +122,7 @@ const MessageContentWithContext = <
     FileAttachmentGroup,
     Gallery,
     groupStyles,
+    isMessageAIGenerated,
     isMyMessage,
     message,
     messageContentOrder,
@@ -132,6 +135,7 @@ const MessageContentWithContext = <
     preventPress,
     Reply,
     setMessageContentWidth,
+    StreamingMessageView,
     threadList,
   } = props;
   const { client } = useChatContext();
@@ -169,6 +173,11 @@ const MessageContentWithContext = <
     setMessageContentWidth(width);
   };
 
+  const isAIGenerated = useMemo(
+    () => isMessageAIGenerated(message),
+    [message, isMessageAIGenerated],
+  );
+
   const { hasThreadReplies, isMessageErrorType, isMessageReceivedOrErrorType } = useMessageData({});
 
   const repliesCurveColor = !isMessageReceivedOrErrorType ? backgroundColor : light_gray;
@@ -312,9 +321,16 @@ const MessageContentWithContext = <
                   />
                 ) : null;
               }
+              case 'ai_text':
+                return isAIGenerated ? (
+                  <StreamingMessageView
+                    key={`ai_message_text_container_${messageContentOrderIndex}`}
+                  />
+                ) : null;
               case 'text':
               default:
-                return otherAttachments.length && otherAttachments[0].actions ? null : (
+                return (otherAttachments.length && otherAttachments[0].actions) ||
+                  isAIGenerated ? null : (
                   <MessageTextContainer<StreamChatGenerics>
                     key={`message_text_container_${messageContentOrderIndex}`}
                   />
@@ -463,6 +479,7 @@ export const MessageContent = <
     goToMessage,
     groupStyles,
     isEditedMessageOpen,
+    isMessageAIGenerated,
     isMyMessage,
     lastReceivedId,
     message,
@@ -483,6 +500,7 @@ export const MessageContent = <
     MessageError,
     myMessageTheme,
     Reply,
+    StreamingMessageView,
   } = useMessagesContext<StreamChatGenerics>();
   const { t } = useTranslationContext();
 
@@ -498,6 +516,7 @@ export const MessageContent = <
         groupStyles,
         isAttachmentEqual,
         isEditedMessageOpen,
+        isMessageAIGenerated,
         isMyMessage,
         lastReceivedId,
         message,
@@ -510,6 +529,7 @@ export const MessageContent = <
         otherAttachments,
         preventPress,
         Reply,
+        StreamingMessageView,
         t,
         threadList,
       }}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
@@ -41,6 +41,7 @@ type MessageFooterPropsWithContext<
   | 'otherAttachments'
   | 'showMessageStatus'
   | 'lastGroupMessage'
+  | 'isMessageAIGenerated'
 > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
@@ -94,6 +95,7 @@ const MessageFooterWithContext = <
     formattedDate,
     isDeleted,
     isEditedMessageOpen,
+    isMessageAIGenerated,
     lastGroupMessage,
     members,
     message,
@@ -114,6 +116,11 @@ const MessageFooterWithContext = <
   } = useTheme();
   const { t } = useTranslationContext();
 
+  const isAIGenerated = useMemo(
+    () => isMessageAIGenerated(message),
+    [message, isMessageAIGenerated],
+  );
+
   if (isDeleted) {
     return (
       <View style={[styles.container, metaContainer]}>
@@ -129,6 +136,8 @@ const MessageFooterWithContext = <
     return null;
   }
 
+  const isEdited = isEditedMessage(message) && !isAIGenerated;
+
   return (
     <>
       <View style={[styles.container, metaContainer]} testID='message-status-time'>
@@ -141,7 +150,7 @@ const MessageFooterWithContext = <
         {showMessageStatus && <MessageStatus />}
         <MessageTimestamp formattedDate={formattedDate} timestamp={date} />
 
-        {isEditedMessage(message) && !isEditedMessageOpen && (
+        {isEdited && !isEditedMessageOpen ? (
           <>
             <Text
               style={[
@@ -159,11 +168,11 @@ const MessageFooterWithContext = <
               {t<string>('Edited')}
             </Text>
           </>
-        )}
+        ) : null}
       </View>
-      {isEditedMessageOpen && (
+      {isEdited && isEditedMessageOpen ? (
         <MessageEditedTimestamp message={message} MessageTimestamp={MessageTimestamp} />
-      )}
+      ) : null}
     </>
   );
 };
@@ -265,6 +274,7 @@ export const MessageFooter = <
   const {
     alignment,
     isEditedMessageOpen,
+    isMessageAIGenerated,
     lastGroupMessage,
     members,
     message,
@@ -281,6 +291,7 @@ export const MessageFooter = <
         alignment,
         deletedMessagesVisibilityType,
         isEditedMessageOpen,
+        isMessageAIGenerated,
         lastGroupMessage,
         members,
         message,

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