feat: add StreamingMessageView to kick off ai feature

Author: isekovanic

package/src/components/Channel/Channel.tsx

@@ -566,7 +566,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,

package/src/components/Message/Message.tsx

@@ -765,7 +765,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

@@ -10,6 +10,8 @@ import {
 
 import { MessageTextContainer } from './MessageTextContainer';
 
+import { StreamingMessageView } from './StreamingMessageView';
+
 import { useChatContext } from '../../../contexts';
 import {
   MessageContextValue,
@@ -215,6 +217,8 @@ const MessageContentWithContext = <
     return bordersFromTheme;
   };
 
+  console.log('ISE: NEW: ', message.ai_generated, message.id);
+
   return (
     <Pressable
       disabled={preventPress}
@@ -312,9 +316,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}`}
                   />
@@ -381,7 +392,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';

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

@@ -306,7 +306,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
     prevMessage.i18n === nextMessage.i18n &&
-    prevMessage.pinned === nextMessage.pinned;
+    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/MessageTextContainer.tsx

@@ -83,7 +83,7 @@ const MessageTextContainerWithContext = <
     message,
   ) as MessageType<StreamChatGenerics>;
 
-  if (!message.text) return null;
+  if (!message.text && !message.ai_generated) return null;
 
   const markdownStyles = { ...markdown, ...markdownStylesProp };
 

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

@@ -0,0 +1,34 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { MessageTextContainer, MessageTextContainerProps } from './MessageTextContainer';
+
+import { useMessageContext } from '../../../contexts';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+
+export const StreamingMessageView = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageTextContainerProps<StreamChatGenerics>,
+) => {
+  const { message } = useMessageContext<StreamChatGenerics>();
+  const { text } = message;
+  const [streamedMessageText, setStreamedMessageText] = useState<string>(text || '');
+  const textCursor = useRef<number>(text?.length || 0);
+
+  useEffect(() => {
+    if (!text || textCursor.current >= text.length) {
+      return;
+    }
+    // TODO: make this configurable maybe
+    const newCursorValue = textCursor.current + 1;
+    const newBatch = text?.substring(textCursor.current, newCursorValue);
+    setTimeout(() => {
+      setStreamedMessageText((prevStreamedMessageText) => prevStreamedMessageText.concat(newBatch));
+    }, 0);
+    textCursor.current = newCursorValue;
+  }, [streamedMessageText, text]);
+
+  return <MessageTextContainer message={{ ...message, text: streamedMessageText }} {...props} />;
+};
+
+StreamingMessageView.displayName = 'MessageTextContainer{messageSimple{content}}';

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

@@ -33,6 +33,7 @@ export const generateMarkdownText = (text?: string) => {
     resultText = resultText.replace(mentionsRegex, `@${displayLink}`);
   }
 
+  // FIXME: Should not happen within codeblocks.
   resultText = resultText.replace(/[<"'>]/g, '\\$&');
 
   // Remove whitespaces that come directly after newlines except in code blocks where we deem this allowed.

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -75,6 +75,7 @@ export type MessageContentType =
   | 'gallery'
   | 'quoted_reply'
   | 'poll'
+  | 'ai_text'
   | 'text';
 export type DeletedMessagesVisibilityType = 'always' | 'never' | 'receiver' | 'sender';