feat: implement StreamingMessageView and add hook

Author: isekovanic

examples/vite/src/index.scss

@@ -30,6 +30,10 @@ body,
     flex-shrink: 0;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
 
+    .str-chat__channel-preview-messenger {
+      max-width: 1000px;
+    }
+
     &--open {
       width: 30%;
       position: fixed;

examples/vite/yarn.lock

@@ -77,7 +77,9 @@ export const getLatestMessagePreview = <
   }
 
   if (previewTextToRender) {
-    return renderPreviewText(previewTextToRender);
+    return latestMessage.ai_generated
+      ? previewTextToRender
+      : renderPreviewText(previewTextToRender);
   }
 
   if (latestMessage.command) {

src/components/ChannelPreview/utils.tsx

@@ -34,6 +34,7 @@ import { MessageEditedTimestamp } from './MessageEditedTimestamp';
 
 import type { MessageUIComponentProps } from './types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import { StreamingMessageView } from './StreamingMessageView';
 
 type MessageSimpleWithContextProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -185,7 +186,11 @@ const MessageSimpleWithContext = <
               {message.attachments?.length && !message.quoted_message ? (
                 <Attachment actionHandler={handleAction} attachments={message.attachments} />
               ) : null}
-              <MessageText message={message} renderText={renderText} />
+              {message.ai_generated ? (
+                <StreamingMessageView message={message} renderText={renderText} />
+              ) : (
+                <MessageText message={message} renderText={renderText} />
+              )}
               {message.mml && (
                 <MML
                   actionHandler={handleAction}

src/components/Message/MessageSimple.tsx

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

src/components/Message/StreamingMessageView.tsx

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

src/components/Message/hooks/index.ts

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from 'react';
+
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { StreamingMessageViewProps } from '../StreamingMessageView';
+
+export type UseStreamingMessageProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+> = Pick<
+  StreamingMessageViewProps<StreamChatGenerics>,
+  'letterInterval' | 'renderingLetterCount'
+> & { text: string };
+
+const DEFAULT_LETTER_INTERVAL = 30;
+const DEFAULT_RENDERING_LETTER_COUNT = 2;
+
+export const useStreamingMessage = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>({
+  letterInterval = DEFAULT_LETTER_INTERVAL,
+  renderingLetterCount = DEFAULT_RENDERING_LETTER_COUNT,
+  text,
+}: UseStreamingMessageProps<StreamChatGenerics>) => {
+  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 };
+};

src/components/Message/hooks/useStreamingMessage.ts

@@ -35,6 +35,13 @@ export const defaultAllowedTagNames: Array<keyof JSX.IntrinsicElements | 'emoji'
   // custom types (tagNames)
   'emoji',
   'mention',
+  'table',
+  'thead',
+  'tbody',
+  'th',
+  'tr',
+  'td',
+  'tfoot',
 ];
 
 function formatUrlForDisplay(url: string) {