feat: add AITypingIndicatorView as well and include to Vite app

Author: isekovanic

examples/vite/src/App.tsx

@@ -1,5 +1,6 @@
 import { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 import {
+  AITypingIndicatorView,
   Channel,
   ChannelAvatar,
   ChannelHeader,
@@ -88,6 +89,7 @@ const App = () => {
             <Window>
               <ChannelHeader Avatar={ChannelAvatar} />
               <MessageList returnAllReadData />
+              <AITypingIndicatorView />
               <MessageInput focus />
             </Window>
             <Thread virtualized />

src/components/AITypingIndicatorView/AITypingIndicatorView.tsx

@@ -0,0 +1,39 @@
+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 style={{ backgroundColor: 'gainsboro', padding: '0px 8px' }}>
+      <p style={{ color: 'black' }}>{allowedStates[aiState]}</p>
+    </div>
+  ) : null;
+};
+
+AITypingIndicatorView.displayName = 'AITypingIndicatorView{messageSimple{content}}';

src/components/AITypingIndicatorView/hooks/useAIState.ts

@@ -0,0 +1,58 @@
+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(() => {
+    const indicatorChangedListener = channel.on(
+      // @ts-ignore
+      'ai_indicator_changed',
+      (event: Event<StreamChatGenerics>) => {
+        const { cid } = event;
+        const state = event.state as AIStateType;
+        if (channel.cid === cid) {
+          setAiState(state);
+        }
+      },
+    );
+
+    // @ts-ignore
+    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/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/index.ts

@@ -36,6 +36,7 @@ export * from './UserItem';
 export * from './Window';
 export * from './Threads';
 export * from './ChatView';
+export * from './AITypingIndicatorView';
 
 export { UploadButton } from './ReactFileUtilities';
 export type { UploadButtonProps } from './ReactFileUtilities';