feat: theming support & modernized AITypingIndicatorView (#9)

This PR mainly introduces theming support for the React Native SDK.

It also takes care of:

- Renaming the exported components to be in line with the other SDKs
- Implementing a modernized `AITypingIndicatorView` with a shimmer
effect (that can be included anywhere)
- Quality of life improvements of the sample app
- Exports the speech-to-text button as a standalone component
- Exports some missing services/contexts from the SDK

Author: isekovanic

examples/ReactNativeChatGPTSample/App.tsx

@@ -11,7 +11,6 @@ import {
   View,
   Text,
   Alert,
-  Dimensions,
 } from 'react-native';
 import {
   SafeAreaProvider,
@@ -22,7 +21,6 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import React, { useCallback, useMemo } from 'react';
 import {
   AIStates,
-  AITypingIndicatorView,
   Channel,
   ChannelList,
   ChannelPreviewMessengerProps,
@@ -37,7 +35,6 @@ import {
   MessageList,
   MessageProps,
   OverlayProvider,
-  ThemeProvider,
   useAIState,
   useChannelContext,
   useChannelsContext,
@@ -47,6 +44,8 @@ import {
   useMessageInputContext,
   useStableCallback,
   useTheme,
+  ThemeProvider,
+  isLocalUrl,
 } from 'stream-chat-react-native';
 import { AppProvider, useAppContext } from './contexts/AppContext.tsx';
 import {
@@ -62,9 +61,11 @@ import {
 } from 'stream-chat';
 import { startAI } from './http/requests.ts';
 import {
-  MarkdownRichText,
-  AIMessageComposer,
-  AIMessageComposerProps,
+  StreamingMessageView,
+  ComposerView,
+  StreamTheme,
+  AITypingIndicatorView,
+  type ComposerViewProps,
 } from '@stream-io/ai-components-react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 
@@ -88,19 +89,21 @@ function App() {
   return (
     <SafeAreaProvider>
       <AppProvider client={chatClient}>
-        <GestureHandlerRootView style={{ flex: 1 }}>
-          <OverlayProvider value={{ style: chatTheme }}>
-            <Chat
-              client={chatClient}
-              isMessageAIGenerated={isMessageAIGenerated}
-              enableOfflineSupport={false}
-            >
-              <NavigationContainer>
-                <DrawerNavigator />
-              </NavigationContainer>
-            </Chat>
-          </OverlayProvider>
-        </GestureHandlerRootView>
+        <StreamTheme>
+          <GestureHandlerRootView style={{ flex: 1 }}>
+            <OverlayProvider value={{ style: chatTheme }}>
+              <Chat
+                client={chatClient}
+                isMessageAIGenerated={isMessageAIGenerated}
+                enableOfflineSupport={false}
+              >
+                <NavigationContainer>
+                  <DrawerNavigator />
+                </NavigationContainer>
+              </Chat>
+            </OverlayProvider>
+          </GestureHandlerRootView>
+        </StreamTheme>
       </AppProvider>
     </SafeAreaProvider>
   );
@@ -177,21 +180,18 @@ const DrawerNavigator = () => (
   </Drawer.Navigator>
 );
 
+const additionalFlatListProps = {
+  maintainVisibleContentPosition: {
+    minIndexForVisible: 0,
+    autoscrollToTopThreshold: 0,
+  },
+  ListHeaderComponent: null,
+};
+
 const AppContent = () => {
   const { channel } = useAppContext();
   const { bottom } = useSafeAreaInsets();
 
-  const safeAreaInsets = useSafeAreaInsets();
-  const insets = useMemo(
-    () => ({
-      ...safeAreaInsets,
-      bottom:
-        safeAreaInsets.bottom +
-        (Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) * 2 : 0),
-    }),
-    [safeAreaInsets],
-  );
-
   const preSendMessageRequest = useStableCallback(async ({ localMessage }) => {
     if (!channel) {
       return;
@@ -201,6 +201,7 @@ const AppContent = () => {
       await channel.watch({
         created_by_id: localMessage.user_id,
       });
+      await channel.update({ name: localMessage.text });
     }
 
     if (
@@ -229,7 +230,7 @@ const AppContent = () => {
         initializeOnMount={false}
         // @ts-expect-error This will be fixed upstream, the type is wrong
         preSendMessageRequest={preSendMessageRequest}
-        StreamingMessageView={StreamingMessageView}
+        StreamingMessageView={CustomStreamingMessageView}
         Message={CustomMessage}
         enableSwipeToReply={false}
         EmptyStateIndicator={EmptyStateIndicator}
@@ -238,15 +239,8 @@ const AppContent = () => {
         MessageAvatar={RenderNull}
         MessageFooter={RenderNull}
       >
-        <MessageList
-          additionalFlatListProps={{
-            maintainVisibleContentPosition: {
-              minIndexForVisible: 0,
-              autoscrollToTopThreshold: 0,
-            },
-          }}
-        />
-        <AITypingIndicatorView />
+        <MessageList additionalFlatListProps={additionalFlatListProps} />
+        <AIThinkingIndicatorView />
         <MessageComposerAI bottomSheetOptions={bottomSheetOptions} />
       </Channel>
     </Animated.View>
@@ -286,13 +280,58 @@ const bottomSheetOptions = [
   },
 ];
 
+const AIThinkingIndicatorView = () => {
+  const { channel } = useChannelContext();
+  const { aiState } = useAIState(channel);
+
+  const allowedStates = {
+    [AIStates.Thinking]: 'Thinking about the question...',
+    [AIStates.Generating]: 'Generating a response...',
+    [AIStates.ExternalSources]: 'Checking external sources...',
+  };
+
+  if (aiState === AIStates.Idle || aiState === AIStates.Error) {
+    return null;
+  }
+
+  return (
+    <View
+      style={{
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+      }}
+    >
+      <AITypingIndicatorView text={allowedStates[aiState]} />
+    </View>
+  );
+};
+
 const CustomMessage = (props: MessageProps) => {
   const { theme } = useTheme();
-  const isFromBot = props.message.ai_generated;
+  const { message } = props;
+  const isFromBot = message.ai_generated;
+  const hasPendingAttachments = useMemo(
+    () =>
+      (message.attachments ?? []).some(
+        (attachment) =>
+          (attachment.image_url && isLocalUrl(attachment.image_url)) ||
+          (attachment.asset_url && isLocalUrl(attachment.asset_url)),
+      ),
+    [message.attachments],
+  );
 
   const modifiedTheme = useMemo(() => {
     if (!isFromBot) {
-      return theme;
+      return mergeThemes({
+        theme,
+        style: {
+          messageSimple: {
+            wrapper: {
+              opacity: hasPendingAttachments ? 0.5 : 1,
+            },
+          },
+        },
+      });
     }
 
     return mergeThemes({
@@ -310,27 +349,26 @@ const CustomMessage = (props: MessageProps) => {
         },
       },
     });
-  }, [theme, isFromBot]);
+  }, [theme, isFromBot, hasPendingAttachments]);
+
   return (
     <ThemeProvider mergedStyle={modifiedTheme}>
       <Message {...props} />
     </ThemeProvider>
   );
 };
 
-const w = Dimensions.get('window').width - 32;
-
-const StreamingMessageView = () => {
+const CustomStreamingMessageView = () => {
   const { message } = useMessageContext();
   return (
-    <View style={{ width: w, paddingLeft: 16 }}>
-      <MarkdownRichText text={message.text ?? ''} />
+    <View style={{ width: '100%', paddingHorizontal: 16 }}>
+      <StreamingMessageView text={message.text ?? ''} />
     </View>
   );
 };
 
 const MessageComposerAI = (
-  props: Pick<AIMessageComposerProps, 'bottomSheetOptions'>,
+  props: Pick<ComposerViewProps, 'bottomSheetOptions'>,
 ) => {
   const messageComposer = useMessageComposer();
   const { sendMessage } = useMessageInputContext();
@@ -342,10 +380,22 @@ const MessageComposerAI = (
     () => channel?.stopAIResponse(),
     [channel],
   );
+
   const isGenerating = [AIStates.Thinking, AIStates.Generating].includes(
     aiState,
   );
 
+  const safeAreaInsets = useSafeAreaInsets();
+  const insets = useMemo(
+    () => ({
+      ...safeAreaInsets,
+      bottom:
+        safeAreaInsets.bottom +
+        (Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) * 2 : 0),
+    }),
+    [safeAreaInsets],
+  );
+
   const serializeToMessage = useStableCallback(
     async ({ text, attachments }: { text: string; attachments?: any[] }) => {
       messageComposer.textComposer.setText(text);
@@ -363,8 +413,9 @@ const MessageComposerAI = (
   );
 
   return (
-    <AIMessageComposer
+    <ComposerView
       {...props}
+      bottomSheetInsets={insets}
       onSendMessage={serializeToMessage}
       isGenerating={isGenerating}
       stopGenerating={stopGenerating}

examples/ReactNativeChatGPTSample/contexts/AppContext.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactNode, useMemo, useState } from 'react';
+import React, { PropsWithChildren, useMemo, useState } from 'react';
 import { Channel, StreamChat } from 'stream-chat';
 import { chatUserId } from '../chatConfig.ts';
 
@@ -12,8 +12,6 @@ export const AppContext = React.createContext<AppContextValue>({
   channel: undefined,
 });
 
-// nanoid.ts
-
 // Same alphabet nanoid uses (URL-safe)
 const ALPHABET =
   '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz-';

examples/ReactNativeChatGPTSample/http/requests.ts

@@ -1,15 +1,15 @@
 import { post } from './api.ts';
 
-// export const startAI = async (channelId: string) =>
-//   post('http://localhost:3000/start-ai-agent', { channel_id: channelId });
-// export const stopAI = async (channelId: string) =>
-//   post('http://localhost:3000/stop-ai-agent', { channel_id: channelId });
-
 export const startAI = async (channelId: string) =>
-  post('https://stream-nodejs-ai-e5d85ed5ce6f.herokuapp.com/start-ai-agent', {
-    channel_id: channelId,
-  });
+  post('http://192.168.1.218:3000/start-ai-agent', { channel_id: channelId });
 export const stopAI = async (channelId: string) =>
-  post('https://stream-nodejs-ai-e5d85ed5ce6f.herokuapp.com/stop-ai-agent', {
-    channel_id: channelId,
-  });
+  post('http://192.168.1.218:3000/stop-ai-agent', { channel_id: channelId });
+
+// export const startAI = async (channelId: string) =>
+//   post('https://stream-nodejs-ai-e5d85ed5ce6f.herokuapp.com/start-ai-agent', {
+//     channel_id: channelId,
+//   });
+// export const stopAI = async (channelId: string) =>
+//   post('https://stream-nodejs-ai-e5d85ed5ce6f.herokuapp.com/stop-ai-agent', {
+//     channel_id: channelId,
+//   });

examples/ReactNativeChatGPTSample/ios/ReactNativeChatGPTSample/Info.plist

@@ -38,13 +38,13 @@
 	<key>RCTNewArchEnabled</key>
 	<true/>
 	<key>NSPhotoLibraryUsageDescription</key>
-    <string>$(PRODUCT_NAME) would like access to your photo gallery to share image in a message.</string>
+    <string>$(PRODUCT_NAME) would like access to your photo gallery to share an image in a message.</string>
     <key>NSCameraUsageDescription</key>
-    <string>$(PRODUCT_NAME) would like to use your camera to share image in a message.</string>
+    <string>$(PRODUCT_NAME) would like to use your camera to share an image in a message.</string>
     <key>NSMicrophoneUsageDescription</key>
-    <string>We need access to your microphone to capture your voice.</string>
+    <string>$(PRODUCT_NAME) would like to access your microphone to capture your voice.</string>
     <key>NSSpeechRecognitionUsageDescription</key>
-    <string>We need access to speech recognition to transcribe your voice.</string>
+    <string>$(PRODUCT_NAME) would like to access speech recognition to transcribe your voice.</string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>

packages/react-native-sdk/package.json

@@ -86,13 +86,14 @@
     "vitest": "catalog:"
   },
   "peerDependencies": {
-    "expo": ">=51.0.0",
+    "expo": ">=52.0.0",
     "react": ">=17.0.0",
-    "react-native": ">=0.73.0",
+    "react-native": ">=0.76.0",
     "react-native-gesture-handler": ">=2.18.0",
     "react-native-reanimated": ">=3.16.0",
     "react-native-svg": ">=15.8.0",
-    "react-syntax-highlighter": ">=15.0.0",
+    "victory-native": ">=41.0.0",
+    "@shopify/react-native-skia": ">=2.0.0",
     "react-native-image-picker": ">=7.1.2",
     "@react-native-clipboard/clipboard": ">=1.14.1",
     "expo-image-picker": "*",

packages/react-native-sdk/src/AITypingIndicatorView.tsx

@@ -0,0 +1,34 @@
+import { ShimmeringView } from './components';
+import { StyleSheet, Text } from 'react-native';
+import { useTheme } from './contexts';
+import { useMemo } from 'react';
+
+export const AITypingIndicatorView = ({ text }: { text: string }) => {
+  const {
+    theme: {
+      colors: { shimmer },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  return (
+    <ShimmeringView shimmerColor={shimmer}>
+      <Text style={styles.text}>{text}</Text>
+    </ShimmeringView>
+  );
+};
+
+const useStyles = () => {
+  const { theme } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        text: {
+          fontSize: 16,
+          color: theme.colors.grey_dark,
+        },
+      }),
+    [theme],
+  );
+};