feat: ai chat bot poc

examples/SampleApp/src/hooks/useStreamChatTheme.ts

@@ -17,6 +17,7 @@ const getChatStyle = (colorScheme: ColorSchemeName): DeepPartial<Theme> => ({
           border: '#141924',
           button_background: '#FFFFFF',
           button_text: '#005FFF',
+          code_block: '#222222',
           grey: '#7A7A7A',
           grey_gainsboro: '#2D2F2F',
           grey_whisper: '#1C1E22',

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>

examples/SampleApp/yarn.lock

@@ -6837,10 +6837,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-[email protected].1:
-  version "5.43.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.43.1.tgz#ec0d5a06e329c8991c46cff5bd0211bc94d2b26f"
-  integrity sha512-qj/WfjFeCCP2wcp1YZGFJgRYGdSWXd0maG3hn3oURgFR6p/BmO6lDL2g3jnLq0SEkD8x+KZeNBS9cs1gW5Gblw==
+[email protected].2:
+  version "5.43.2"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.43.2.tgz#b16add60d231509f864d7301ae281c4b4681ff7a"
+  integrity sha512-pdSaqw1aPHtxH0md7nnw/TLWPIqsb5TKFzGoWYd/cKRAw4pVDvxolSlha8vYSCwz7MmlarfsJPB0TlS9WcGsDQ==
   dependencies:
     "@gorhom/bottom-sheet" "^4.6.4"
     dayjs "1.10.5"
@@ -6878,6 +6878,21 @@ [email protected]:
     jsonwebtoken "~9.0.0"
     ws "^7.5.10"
 
+[email protected]:
+  version "8.46.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.46.0.tgz#416b325e05b144d0937a3527d1e622463113d605"
+  integrity sha512-HQVCRVldrfQFAvsBOHiHR0TKYf+wpsg/cAzRojeZY+buy1vG6eoqk09h6Fl4k2eG3zFLoA0G9W6o7o45jyFE1g==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@types/jsonwebtoken" "~9.0.0"
+    "@types/ws" "^7.4.0"
+    axios "^1.6.0"
+    base64-js "^1.5.1"
+    form-data "^4.0.0"
+    isomorphic-ws "^4.0.1"
+    jsonwebtoken "~9.0.0"
+    ws "^7.5.10"
+
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"

package/expo-package/yarn.lock

@@ -2929,10 +2929,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
 
-[email protected].1:
-  version "5.43.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.43.1.tgz#ec0d5a06e329c8991c46cff5bd0211bc94d2b26f"
-  integrity sha512-qj/WfjFeCCP2wcp1YZGFJgRYGdSWXd0maG3hn3oURgFR6p/BmO6lDL2g3jnLq0SEkD8x+KZeNBS9cs1gW5Gblw==
+[email protected].2:
+  version "5.43.2"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.43.2.tgz#b16add60d231509f864d7301ae281c4b4681ff7a"
+  integrity sha512-pdSaqw1aPHtxH0md7nnw/TLWPIqsb5TKFzGoWYd/cKRAw4pVDvxolSlha8vYSCwz7MmlarfsJPB0TlS9WcGsDQ==
   dependencies:
     "@gorhom/bottom-sheet" "^4.6.4"
     dayjs "1.10.5"

package/native-package/yarn.lock

@@ -4244,10 +4244,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-[email protected].1:
-  version "5.43.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.43.1.tgz#ec0d5a06e329c8991c46cff5bd0211bc94d2b26f"
-  integrity sha512-qj/WfjFeCCP2wcp1YZGFJgRYGdSWXd0maG3hn3oURgFR6p/BmO6lDL2g3jnLq0SEkD8x+KZeNBS9cs1gW5Gblw==
+[email protected].2:
+  version "5.43.2"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.43.2.tgz#b16add60d231509f864d7301ae281c4b4681ff7a"
+  integrity sha512-pdSaqw1aPHtxH0md7nnw/TLWPIqsb5TKFzGoWYd/cKRAw4pVDvxolSlha8vYSCwz7MmlarfsJPB0TlS9WcGsDQ==
   dependencies:
     "@gorhom/bottom-sheet" "^4.6.4"
     dayjs "1.10.5"

package/package.json

@@ -78,7 +78,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "8.45.1"
+    "stream-chat": "8.46.0"
   },
   "peerDependencies": {
     "react-native-quick-sqlite": ">=5.1.0",

package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Channel } from 'stream-chat';
+
+import { AIStates, useAIState } from './hooks/useAIState';
+
+import { useChannelContext, useTheme, useTranslationContext } from '../../contexts';
+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 } = useChannelContext<StreamChatGenerics>();
+  const channel = channelFromProps || channelFromContext;
+  const { aiState } = useAIState(channel);
+  const allowedStates = {
+    [AIStates.Thinking]: t('Thinking...'),
+    [AIStates.Generating]: t('Generating...'),
+  };
+
+  const {
+    theme: {
+      aiTypingIndicatorView: { container, text },
+      colors: { black, grey_gainsboro },
+    },
+  } = useTheme();
+
+  return aiState in allowedStates ? (
+    <View style={[styles.container, { backgroundColor: grey_gainsboro }, container]}>
+      <Text style={[{ color: black }, text]}>{allowedStates[aiState]}</Text>
+    </View>
+  ) : null;
+};
+
+AITypingIndicatorView.displayName = 'AITypingIndicatorView{messageSimple{content}}';
+
+const styles = StyleSheet.create({
+  container: { paddingHorizontal: 16, paddingVertical: 18 },
+});

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

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+
+import { AIState, Channel, Event } from 'stream-chat';
+
+import { useChatContext } from '../../../contexts';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { useIsOnline } from '../../Chat/hooks/useIsOnline';
+
+export const AIStates = {
+  Error: 'AI_STATE_ERROR',
+  ExternalSources: 'AI_STATE_EXTERNAL_SOURCES',
+  Generating: 'AI_STATE_GENERATING',
+  Idle: 'AI_STATE_IDLE',
+  Thinking: 'AI_STATE_THINKING',
+};
+
+/**
+ * A hook that returns the current state of the AI.
+ * @param {Channel} channel - The channel for which we want to know the AI state.
+ * @returns {{ aiState: AIState }} The current AI state for the given channel.
+ */
+export const useAIState = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  channel?: Channel<StreamChatGenerics>,
+): { aiState: AIState } => {
+  const { client } = useChatContext<StreamChatGenerics>();
+  const { isOnline } = useIsOnline<StreamChatGenerics>(client);
+
+  const [aiState, setAiState] = useState<AIState>(AIStates.Idle);
+
+  useEffect(() => {
+    if (!isOnline) {
+      setAiState(AIStates.Idle);
+    }
+  }, [isOnline]);
+
+  useEffect(() => {
+    if (!channel) {
+      return;
+    }
+
+    const indicatorChangedListener = channel.on(
+      'ai_indicator.update',
+      (event: Event<StreamChatGenerics>) => {
+        const { cid } = event;
+        const state = event.ai_state as AIState;
+        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 };
+};

package/src/components/AITypingIndicatorView/index.ts

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

package/src/components/Channel/Channel.tsx

@@ -135,6 +135,7 @@ import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/
 import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/MessageStatus';
 import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageSimple/MessageTimestamp';
 import { ReactionList as ReactionListDefault } from '../Message/MessageSimple/ReactionList';
+import { StreamingMessageView as DefaultStreamingMessageView } from '../Message/MessageSimple/StreamingMessageView';
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
 import { AudioRecorder as AudioRecorderDefault } from '../MessageInput/components/AudioRecorder/AudioRecorder';
@@ -154,6 +155,7 @@ import { MoreOptionsButton as MoreOptionsButtonDefault } from '../MessageInput/M
 import { SendButton as SendButtonDefault } from '../MessageInput/SendButton';
 import { SendMessageDisallowedIndicator as SendMessageDisallowedIndicatorDefault } from '../MessageInput/SendMessageDisallowedIndicator';
 import { ShowThreadMessageInChannelButton as ShowThreadMessageInChannelButtonDefault } from '../MessageInput/ShowThreadMessageInChannelButton';
+import { StopMessageStreamingButton as DefaultStopMessageStreamingButton } from '../MessageInput/StopMessageStreamingButton';
 import { UploadProgressIndicator as UploadProgressIndicatorDefault } from '../MessageInput/UploadProgressIndicator';
 import { DateHeader as DateHeaderDefault } from '../MessageList/DateHeader';
 import type { MessageType } from '../MessageList/hooks/useMessageList';
@@ -333,6 +335,7 @@ export type ChannelPropsWithContext<
       | 'VideoThumbnail'
       | 'PollContent'
       | 'hasCreatePoll'
+      | 'StreamingMessageView'
     >
   > &
   Partial<Pick<ThreadContextValue<StreamChatGenerics>, 'allowThreadMessagesInChannel'>> & {
@@ -420,7 +423,12 @@ export type ChannelPropsWithContext<
      * Tells if channel is rendering a thread list
      */
     threadList?: boolean;
-  } & Partial<Pick<InputMessageInputContextValue, 'openPollCreationDialog' | 'CreatePollContent'>>;
+  } & Partial<
+    Pick<
+      InputMessageInputContextValue,
+      'openPollCreationDialog' | 'CreatePollContent' | 'StopMessageStreamingButton'
+    >
+  >;
 
 const ChannelWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -544,7 +552,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,
@@ -596,6 +612,8 @@ const ChannelWithContext = <
     StartAudioRecordingButton = AudioRecordingButtonDefault,
     stateUpdateThrottleInterval = defaultThrottleInterval,
     StickyHeader = StickyHeaderDefault,
+    StopMessageStreamingButton: StopMessageStreamingButtonOverride,
+    StreamingMessageView = DefaultStreamingMessageView,
     supportedReactions = reactionData,
     t,
     thread: threadFromProps,
@@ -612,6 +630,10 @@ const ChannelWithContext = <
   } = props;
 
   const { thread: threadProps, threadInstance } = threadFromProps;
+  const StopMessageStreamingButton =
+    StopMessageStreamingButtonOverride === undefined
+      ? DefaultStopMessageStreamingButton
+      : StopMessageStreamingButtonOverride;
 
   const {
     theme: {
@@ -2338,6 +2360,7 @@ const ChannelWithContext = <
     setQuotedMessageState,
     ShowThreadMessageInChannelButton,
     StartAudioRecordingButton,
+    StopMessageStreamingButton,
     UploadProgressIndicator,
   });
 
@@ -2439,6 +2462,7 @@ const ChannelWithContext = <
     setEditingState,
     setQuotedMessageState,
     shouldShowUnreadUnderlay,
+    StreamingMessageView,
     supportedReactions,
     targetedMessage,
     TypingIndicator,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -64,6 +64,7 @@ export const useCreateInputMessageInputContext = <
   showPollCreationDialog,
   ShowThreadMessageInChannelButton,
   StartAudioRecordingButton,
+  StopMessageStreamingButton,
   UploadProgressIndicator,
 }: InputMessageInputContextValue<StreamChatGenerics> & {
   /**
@@ -137,6 +138,7 @@ export const useCreateInputMessageInputContext = <
       showPollCreationDialog,
       ShowThreadMessageInChannelButton,
       StartAudioRecordingButton,
+      StopMessageStreamingButton,
       UploadProgressIndicator,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -88,6 +88,7 @@ export const useCreateMessagesContext = <
   setEditingState,
   setQuotedMessageState,
   shouldShowUnreadUnderlay,
+  StreamingMessageView,
   supportedReactions,
   targetedMessage,
   TypingIndicator,
@@ -189,6 +190,7 @@ export const useCreateMessagesContext = <
       setEditingState,
       setQuotedMessageState,
       shouldShowUnreadUnderlay,
+      StreamingMessageView,
       supportedReactions,
       targetedMessage,
       TypingIndicator,

package/src/components/Message/Message.tsx

@@ -456,6 +456,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;
@@ -863,7 +865,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;