feat: add AITypingIndicatorView

Author: isekovanic

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -12,6 +12,7 @@ import {
   useChatContext,
   useTheme,
   useTypingString,
+  AITypingIndicatorView,
 } from 'stream-chat-react-native';
 import { Platform, StyleSheet, View } from 'react-native';
 import type { StackNavigationProp } from '@react-navigation/stack';
@@ -168,6 +169,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
             });
           }}
         />
+        <AITypingIndicatorView channel={channel} />
         <MessageInput />
       </Channel>
     </View>

package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Text, View } from 'react-native';
+
+import { Channel } from 'stream-chat';
+
+import { AIStates, useAIState } from './hooks/useAIState';
+
+import { useChannelContext } from '../../contexts';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+export const AITypingIndicatorView = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  channel: channelFromProps,
+}: {
+  channel: Channel<StreamChatGenerics>;
+}) => {
+  const { channel: channelFromContext } = useChannelContext();
+  const channel = channelFromProps || channelFromContext;
+  const { aiState } = useAIState(channel);
+  const allowedStates = {
+    [AIStates.Thinking]: 'Thinking...',
+    [AIStates.Generating]: 'Generating...',
+  };
+  return aiState in allowedStates ? (
+    <View style={{ paddingHorizontal: 16, paddingVertical: 18 }}>
+      <Text>{allowedStates[aiState]}</Text>
+    </View>
+  ) : null;
+};
+
+AITypingIndicatorView.displayName = 'AITypingIndicatorView{messageSimple{content}}';

package/src/components/AITypingIndicatorView/hooks/useAIState.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+
+import { Channel } from 'stream-chat';
+
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+
+export enum AIStatesEnum {
+  Error = 'AI_STATE_ERROR',
+  ExternalSources = 'AI_STATE_EXTERNAL_SOURCES',
+  Generating = 'AI_STATE_GENERATING',
+  Idle = 'AI_STATE_IDLE',
+  Thinking = 'AI_STATE_THINKING',
+}
+
+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<AIStatesEnum>(AIStatesEnum.Idle);
+
+  useEffect(() => {
+    const indicatorChangedListener = channel.on('ai_indicator_changed', (event) => {
+      const { cid } = event;
+      const state = event.state as AIStatesEnum;
+      if (channel.cid === cid) {
+        setAiState(state);
+      }
+    });
+
+    const indicatorClearedListener = channel.on('ai_indicator_clear', (event) => {
+      const { cid } = event;
+      if (channel.cid === cid) {
+        setAiState(AIStatesEnum.Idle);
+      }
+    });
+
+    return () => {
+      indicatorChangedListener.unsubscribe();
+      indicatorClearedListener.unsubscribe();
+    };
+  }, [channel]);
+
+  return { aiState };
+};

package/src/components/AITypingIndicatorView/index.ts

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

package/src/components/Message/Message.tsx

@@ -418,6 +418,8 @@ const MessageWithContext = <
         return !!attachments.images.length || !!attachments.videos.length;
       case 'poll':
         return !!message.poll_id;
+      case 'ai_text':
+        return !!message.ai_generated;
       case 'text':
       default:
         return !!message.text;

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

@@ -32,4 +32,4 @@ export const StreamingMessageView = <
   return <MessageTextContainer message={{ ...message, text: streamedMessageText }} {...props} />;
 };
 
-StreamingMessageView.displayName = 'MessageTextContainer{messageSimple{content}}';
+StreamingMessageView.displayName = 'StreamingMessageView{messageSimple{content}}';

package/src/components/index.ts

@@ -173,3 +173,6 @@ export * from './UIComponents/Spinner';
 export * from './Thread/Thread';
 export * from './Thread/components/ThreadFooterComponent';
 export * from './ThreadList/ThreadList';
+
+export * from './Message/MessageSimple/StreamingMessageView';
+export * from './AITypingIndicatorView';