feat: add support for ai generated messages

examples/vite/src/App.tsx

@@ -1,5 +1,6 @@
 import { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 import {
+  AITypingIndicatorView,
   Channel,
   ChannelAvatar,
   ChannelHeader,
@@ -13,7 +14,8 @@ import {
   ThreadList,
   ChatView,
 } from 'stream-chat-react';
-import 'stream-chat-react/css/v2/index.css';
+// import 'stream-chat-react/css/v2/index.css';
+import '@stream-io/stream-chat-css/dist/v2/css/index.css';
 
 const params = (new Proxy(new URLSearchParams(window.location.search), {
   get: (searchParams, property) => searchParams.get(property as string),
@@ -88,6 +90,7 @@ const App = () => {
             <Window>
               <ChannelHeader Avatar={ChannelAvatar} />
               <MessageList returnAllReadData />
+              <AITypingIndicatorView />
               <MessageInput focus />
             </Window>
             <Thread virtualized />

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;

src/components/AITypingIndicatorView/AITypingIndicatorView.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Channel } from 'stream-chat';
+
+import { AIStates, useAIState } from './hooks/useAIState';
+
+import { useChannelStateContext, useTranslationContext } from '../../context';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+export type AITypingIndicatorViewProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+> = {
+  channel?: Channel<StreamChatGenerics>;
+};
+
+export const AITypingIndicatorView = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>({
+  channel: channelFromProps,
+}: AITypingIndicatorViewProps<StreamChatGenerics>) => {
+  const { t } = useTranslationContext();
+  const { channel: channelFromContext } = useChannelStateContext<StreamChatGenerics>(
+    'AITypingIndicatorView',
+  );
+  const channel = channelFromProps || channelFromContext;
+  const { aiState } = useAIState(channel);
+  const allowedStates = {
+    [AIStates.Thinking]: t('Thinking...'),
+    [AIStates.Generating]: t('Generating...'),
+  };
+
+  return aiState in allowedStates ? (
+    <div className='str-chat__ai-typing-indicator-container'>
+      <p className='str-chat__ai-typing-indicator-text'>{allowedStates[aiState]}</p>
+    </div>
+  ) : null;
+};

src/components/AITypingIndicatorView/hooks/useAIState.ts

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+
+import { Channel, Event } from 'stream-chat';
+
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+
+export type AIStateType =
+  | 'AI_STATE_ERROR'
+  | 'AI_STATE_EXTERNAL_SOURCES'
+  | 'AI_STATE_GENERATING'
+  | 'AI_STATE_IDLE'
+  | 'AI_STATE_THINKING'
+  | string;
+
+export const AIStates = {
+  Error: 'AI_STATE_ERROR',
+  ExternalSources: 'AI_STATE_EXTERNAL_SOURCES',
+  Generating: 'AI_STATE_GENERATING',
+  Idle: 'AI_STATE_IDLE',
+  Thinking: 'AI_STATE_THINKING',
+};
+
+export const useAIState = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>(
+  channel?: Channel<StreamChatGenerics>,
+) => {
+  const [aiState, setAiState] = useState<AIStateType>(AIStates.Idle);
+
+  useEffect(() => {
+    if (!channel) {
+      return;
+    }
+
+    const indicatorChangedListener = channel.on(
+      'ai_indicator.update',
+      (event: Event<StreamChatGenerics>) => {
+        const { cid } = event;
+        const state = event.ai_state as AIStateType;
+        if (channel.cid === cid) {
+          setAiState(state);
+        }
+      },
+    );
+
+    const indicatorClearedListener = channel.on('ai_indicator.clear', (event) => {
+      const { cid } = event;
+      if (channel.cid === cid) {
+        setAiState(AIStates.Idle);
+      }
+    });
+
+    return () => {
+      indicatorChangedListener.unsubscribe();
+      indicatorClearedListener.unsubscribe();
+    };
+  }, [channel]);
+
+  return { aiState };
+};

src/components/AITypingIndicatorView/index.ts

@@ -0,0 +1,2 @@
+export * from './AITypingIndicatorView';
+export * from './hooks/useAIState';

src/components/ChannelPreview/utils.tsx

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

src/components/Message/MessageSimple.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}
@@ -211,10 +216,12 @@ const MessageSimpleWithContext = <
                 </span>
               )}
               <MessageTimestamp customClass='str-chat__message-simple-timestamp' />
-              {isEdited && (
+              {isEdited && !message.ai_generated && (
                 <span className='str-chat__mesage-simple-edited'>{t<string>('Edited')}</span>
               )}
-              {isEdited && <MessageEditedTimestamp calendar open={isEditedTimestampOpen} />}
+              {isEdited && !message.ai_generated && (
+                <MessageEditedTimestamp calendar open={isEditedTimestampOpen} />
+              )}
             </div>
           )}
         </div>

src/components/Message/StreamingMessageView.tsx

@@ -0,0 +1,33 @@
+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} />
+  );
+};

src/components/Message/hooks/index.ts

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

src/components/Message/hooks/useStreamingMessage.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/index.ts

@@ -13,4 +13,5 @@ export * from './QuotedMessage';
 export * from './renderText';
 export * from './types';
 export * from './utils';
+export * from './StreamingMessageView';
 export type { TimestampProps } from './Timestamp';

src/components/Message/renderText/renderText.tsx

@@ -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) {