stream-chat-react-native-core 9.12.1 → 9.13.0

package/src/ai-components/message-composer/ComposerView.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { type ReactNode, useEffect, useMemo, useRef } from 'react';
 import { Platform, StyleSheet, TextInput, View } from 'react-native';
 
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import { KeyboardStickyView } from 'react-native-keyboard-controller';
+import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
 
 import type { StateStore } from '@stream-io/state-store';
 
@@ -9,17 +10,33 @@ import { ActionButton } from './ActionButton';
 import { BottomSheetContent } from './ActionSheet';
 
 import { AttachmentButton } from './AttachmentButton';
+import { type AIChatOption, SelectedChatOptionChip } from './ChatOptions';
+import { EditingMessageChip } from './EditingMessageChip';
 
 import { MediaPreviewList } from './MediaPreviewList';
 
 import { BottomSheet } from '../components/BottomSheet';
 
 import { ComposerProvider, useMessageComposerContext, useTheme } from '../contexts';
+import type {
+  AIConversationController,
+  AIConversationControllerState,
+} from '../conversation/controller/AIConversationController';
+import { isAIConversationAnswering } from '../conversation/controller/types';
+import { useAIConversationState } from '../conversation/controller/useAIConversationState';
+import { useBottomSafeArea } from '../internal/hooks/useBottomSafeArea';
+import { useStableCallback } from '../internal/hooks/useStableCallback';
+import { primitives } from '../internal/tokens';
 import type {
   AbstractMediaPickerService,
   MediaPickerState,
 } from '../services/media-picker-service/AbstractMediaPickerService';
-import { COMPOSER_DICTATION_SOURCE, useComposerText } from '../store';
+import {
+  COMPOSER_DICTATION_SOURCE,
+  useComposerChatOption,
+  useComposerIsEditing,
+  useComposerText,
+} from '../store';
 import type { ComposerState } from '../store';
 import { useDictationState } from '../store/dictation/useDictationState';
 import { useDictationTranscript } from '../store/dictation/useDictationTranscript';
@@ -39,12 +56,41 @@ export type BottomSheetInsets = {
 };
 
 export type ComposerViewProps = {
-  onSendMessage: (opts: {
+  /**
+   * The conversation the person writes in. The composer shows its `composer` store, sends what
+   * the person writes to it, offers to stop the agent while it answers, and says when the person
+   * is editing a message. It takes the place of `onSendMessage`, `isGenerating`,
+   * `stopGenerating` and `state`.
+   */
+  conversation?: AIConversationController;
+  /** Sends what the person wrote. Required without `conversation`. */
+  onSendMessage?: (opts: {
     text: string;
     attachments?: MediaPickerState['assets'];
+    /** The chat option picked for the message. */
+    chatOption?: AIChatOption;
     custom?: Record<string, unknown>;
   }) => Promise<void>;
   bottomSheetOptions?: BottomSheetOption[];
+  /**
+   * Ways to ask, such as "Think harder", listed in the sheet under the camera and photos. The one
+   * picked shows as a chip in the composer, is sent with each message as `chatOption`, and stays
+   * picked until the person removes it. It is kept in `state`, as `chatOption`.
+   */
+  chatOptions?: AIChatOption[];
+  /** Shown above the composer, riding the keyboard with it, such as suggestions to start with. */
+  header?: ReactNode;
+  /**
+   * How far above the bottom of the screen the composer sits, such as above a tab bar: it rides
+   * the keyboard up by as much as the keyboard rises past that. Defaults to the bottom safe area,
+   * the same as `AIConversation`'s. Needs a `KeyboardProvider` from react-native-keyboard-controller
+   * above it.
+   */
+  keyboardOffset?: number;
+  /**
+   * Shown after the message box, on the same line, such as a button into voice mode.
+   */
+  trailing?: ReactNode;
   isGenerating?: boolean;
   stopGenerating?: () => Promise<void>;
   bottomSheetInsets?: BottomSheetInsets;
@@ -55,42 +101,93 @@ export type ComposerViewProps = {
 export const ComposerViewUI = ({
   bottomSheetOptions = [],
   bottomSheetInsets,
+  chatOptions,
+  header,
   isGenerating,
+  keyboardOffset,
   stopGenerating,
+  trailing,
 }: ComposerViewProps) => {
   const {
     theme: {
-      composer: { container, containerRow, inputPillContainer, inputPill },
+      composer: { container, containerRow, inputPillContainer, inputPill, trailing: trailingStyle },
     },
   } = useTheme();
   const styles = useStyles();
+  const bottomSafeArea = useBottomSafeArea();
+  const offset = useMemo(
+    () => ({ closed: 0, opened: keyboardOffset ?? bottomSafeArea }),
+    [bottomSafeArea, keyboardOffset],
+  );
 
   return (
-    <View pointerEvents={'box-none'} style={[styles.container, container]}>
-      <View style={[styles.row, containerRow]}>
-        <AttachmentButton />
-
-        <Animated.View
-          style={[styles.inputPillContainer, inputPillContainer]}
-          layout={LinearTransition.duration(150)}
-        >
-          <MediaPreviewList />
-          <View style={[styles.inputPill, inputPill]}>
-            <AIMessageInput />
-            <ActionButton isGenerating={isGenerating} stopGenerating={stopGenerating} />
+    <View pointerEvents={'box-none'}>
+      <KeyboardStickyView offset={offset} pointerEvents={'box-none'}>
+        {/* Edge to edge, as the room around the composer is its own. */}
+        {header}
+        <View style={[styles.container, container]}>
+          <View style={[styles.row, containerRow]}>
+            <AttachmentButton />
+
+            <Animated.View
+              style={[styles.inputPillContainer, inputPillContainer]}
+              layout={LinearTransition.duration(150)}
+            >
+              <MediaPreviewList />
+              <EditingChip />
+              <ChatOptionChip />
+              <View style={[styles.inputPill, inputPill]}>
+                <AIMessageInput />
+                <ActionButton isGenerating={isGenerating} stopGenerating={stopGenerating} />
+              </View>
+            </Animated.View>
+            {trailing ? <View style={[styles.trailing, trailingStyle]}>{trailing}</View> : null}
           </View>
-        </Animated.View>
-      </View>
+        </View>
+      </KeyboardStickyView>
       <BottomSheet>
         <BottomSheetContent
           bottomSheetOptions={bottomSheetOptions}
           bottomSheetInsets={bottomSheetInsets}
+          chatOptions={chatOptions}
         />
       </BottomSheet>
     </View>
   );
 };
 
+/** Says the person is editing a message they sent, with a button that cancels it. */
+const EditingChip = () => {
+  const { isEditing } = useComposerIsEditing();
+  const { state } = useMessageComposerContext();
+  if (!isEditing) return null;
+  return (
+    <Animated.View
+      entering={FadeIn.duration(150)}
+      exiting={FadeOut.duration(150)}
+      style={chipStyles.chip}
+    >
+      <EditingMessageChip onCancel={() => state.partialNext({ isEditing: false, text: '' })} />
+    </Animated.View>
+  );
+};
+
+/** The chat option picked for the next message, if any, with a button that removes it. */
+const ChatOptionChip = () => {
+  const { chatOption } = useComposerChatOption();
+  const { setChatOption } = useMessageComposerContext();
+  if (!chatOption) return null;
+  return (
+    <Animated.View
+      entering={FadeIn.duration(150)}
+      exiting={FadeOut.duration(150)}
+      style={chipStyles.chip}
+    >
+      <SelectedChatOptionChip onRemove={() => setChatOption(null)} option={chatOption} />
+    </Animated.View>
+  );
+};
+
 export const AIMessageInput = () => {
   const {
     theme: {
@@ -103,8 +200,20 @@ export const AIMessageInput = () => {
   const { error, isRecording, source } = useDictationState();
   const { text } = useComposerText();
   const { transcript } = useDictationTranscript();
+  const { isEditing } = useComposerIsEditing();
   const { setText } = useMessageComposerContext();
   const previousTranscript = useRef(transcript);
+  const inputRef = useRef<React.ComponentRef<typeof TextInput>>(null);
+
+  useEffect(() => {
+    if (isEditing) inputRef.current?.focus();
+  }, [isEditing]);
+
+  useEffect(() => {
+    if (Platform.OS === 'ios' && text === '') {
+      inputRef.current?.setNativeProps({ text: '' });
+    }
+  }, [text]);
 
   useEffect(() => {
     const transcriptChanged = transcript !== previousTranscript.current;
@@ -123,6 +232,7 @@ export const AIMessageInput = () => {
       onChangeText={setText}
       placeholder={'Ask anything'}
       placeholderTextColor={grey_neutral}
+      ref={inputRef}
       style={[styles.textInput, textInput]}
       multiline
       underlineColorAndroid={'transparent'}
@@ -130,15 +240,50 @@ export const AIMessageInput = () => {
   );
 };
 
-export const ComposerView = (props: ComposerViewProps) => (
-  <ComposerProvider
-    onSendMessage={props.onSendMessage}
-    mediaPickerService={props.mediaPickerService}
-    state={props.state}
-  >
-    <ComposerViewUI {...props} />
-  </ComposerProvider>
-);
+const statusSelector = ({ status }: AIConversationControllerState) => ({ status });
+
+const ConversationComposerView = ({
+  conversation,
+  ...props
+}: ComposerViewProps & { conversation: AIConversationController }) => {
+  const { status } = useAIConversationState(conversation, statusSelector);
+  const onSendMessage = useStableCallback((message: Parameters<SendMessage>[0]) =>
+    Promise.resolve(conversation.send(message)),
+  );
+  const stopGenerating = useStableCallback(() => Promise.resolve(conversation.stop()));
+  return (
+    <ComposerProvider
+      mediaPickerService={props.mediaPickerService}
+      onSendMessage={onSendMessage}
+      state={conversation.composer}
+    >
+      <ComposerViewUI
+        {...props}
+        isGenerating={isAIConversationAnswering(status)}
+        stopGenerating={stopGenerating}
+      />
+    </ComposerProvider>
+  );
+};
+
+type SendMessage = NonNullable<ComposerViewProps['onSendMessage']>;
+
+export const ComposerView = (props: ComposerViewProps) =>
+  props.conversation ? (
+    <ConversationComposerView {...props} conversation={props.conversation} />
+  ) : (
+    <ComposerProvider
+      onSendMessage={props.onSendMessage}
+      mediaPickerService={props.mediaPickerService}
+      state={props.state}
+    >
+      <ComposerViewUI {...props} />
+    </ComposerProvider>
+  );
+
+const chipStyles = StyleSheet.create({
+  chip: { alignSelf: 'stretch', paddingBottom: primitives.spacingXs },
+});
 
 const useStyles = () => {
   const { theme } = useTheme();
@@ -177,9 +322,14 @@ const useStyles = () => {
         shadowRadius: 4,
         elevation: 2,
       },
+      trailing: {
+        justifyContent: 'center',
+        marginStart: 8,
+        minHeight: pillHeight,
+      },
       textInput: {
         flex: 1,
-        fontSize: 16,
+        fontSize: primitives.typographyFontSizeMd,
         color: colors.black,
         paddingVertical: 0,
         paddingHorizontal: 0,

package/src/ai-components/message-composer/EditingMessageChip.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useAITranslation, useTheme } from '../contexts';
+import { useAIIcons } from '../icons';
+import { Close } from '../internal/icons/Close';
+import { primitives } from '../internal/tokens';
+
+export type EditingMessageChipProps = {
+  onCancel: () => void;
+};
+
+/** Says the person is editing a message they sent, with a button that cancels it. */
+export const EditingMessageChip = ({ onCancel }: EditingMessageChipProps) => {
+  const { t } = useAITranslation();
+  const {
+    theme: { chatOptions: theme, colors },
+  } = useTheme();
+  const { Edit } = useAIIcons();
+
+  return (
+    <View
+      style={[styles.chip, { backgroundColor: theme?.chipBackground }, theme?.chip]}
+      testID='ai-editing-message'
+    >
+      <View style={[styles.icon, theme?.chipIcon]}>
+        <Edit color={theme?.chipText ?? colors.accent_blue} size={16} />
+      </View>
+      <Text style={[styles.title, { color: theme?.chipText }, theme?.chipTitle]}>
+        {t('Editing message')}
+      </Text>
+      <Pressable
+        accessibilityLabel={t('Cancel editing')}
+        accessibilityRole='button'
+        hitSlop={8}
+        onPress={onCancel}
+        style={[styles.removeButton, theme?.chipRemoveButton]}
+      >
+        <Close height={20} pathFill={theme?.chipText} width={20} />
+      </Pressable>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  chip: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    borderRadius: primitives.radiusXl,
+    flexDirection: 'row',
+    gap: primitives.spacingXs,
+    padding: primitives.spacingXs,
+  },
+  icon: { alignItems: 'center', justifyContent: 'center' },
+  removeButton: { alignItems: 'center', justifyContent: 'center' },
+  title: {
+    fontSize: primitives.typographyFontSizeMd,
+    fontWeight: '600',
+    lineHeight: primitives.typographyLineHeightNormal,
+  },
+});

package/src/ai-components/message-composer/MediaPreviewList.tsx

@@ -1,12 +1,18 @@
 import React, { useMemo } from 'react';
-import { Image, Pressable, ScrollView, StyleSheet } from 'react-native';
+import { Image, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
 
-import { useMessageComposerContext, useTheme } from '../contexts';
+import { useAITranslation, useMessageComposerContext, useTheme } from '../contexts';
 import { Close } from '../internal/icons/Close';
+import { AIMessageAttachment } from '../message/AIMessageAttachment';
+import type { MediaAsset } from '../services/media-picker-service/AbstractMediaPickerService';
 import { useMediaPickerState } from '../services/media-picker-service/hooks/useMediaPickerState';
 
+// An asset without a type is a photo, as the pickers give them.
+const isImage = (asset: MediaAsset) => !asset.type || asset.type.startsWith('image');
+
 export const MediaPreviewList = () => {
+  const { t } = useAITranslation();
   const { mediaPickerService } = useMessageComposerContext();
   const { attachments } = useMediaPickerState({ service: mediaPickerService }) ?? {};
   const {
@@ -42,13 +48,32 @@ export const MediaPreviewList = () => {
           exiting={FadeOut.duration(150)}
           layout={LinearTransition.duration(150)}
         >
-          <Image
-            style={[styles.mediaPreviewImage, mediaPreviewImage]}
-            source={{ uri: attachment.uri }}
-            width={100}
-            height={100}
-          />
+          {isImage(attachment) ? (
+            <Image
+              style={[styles.mediaPreviewImage, mediaPreviewImage]}
+              source={{ uri: attachment.uri }}
+              width={100}
+              height={100}
+            />
+          ) : (
+            // Anything else, such as a video, can't show in an `Image`, so it shows as a file.
+            <View style={styles.mediaPreviewFile}>
+              <AIMessageAttachment
+                attachment={{
+                  kind: 'file',
+                  mimeType: attachment.type,
+                  name: attachment.name,
+                  size: attachment.size,
+                  url: attachment.uri,
+                }}
+                role='user'
+              />
+            </View>
+          )}
           <Pressable
+            accessibilityLabel={t('Remove attachment')}
+            accessibilityRole='button'
+            hitSlop={8}
             style={[styles.mediaPreviewRemoveButton, mediaPreviewRemoveButton]}
             onPress={() => mediaPickerService?.removeAsset(index)}
           >
@@ -71,6 +96,7 @@ const useStyles = () => {
         },
         mediaPreviewContentContainerStyle: { flexGrow: 1, paddingBottom: 8 },
         mediaPreviewImage: { borderRadius: 12, marginRight: 8 },
+        mediaPreviewFile: { height: 100, justifyContent: 'center', marginRight: 8, width: 220 },
         mediaPreviewRemoveButton: {
           position: 'absolute',
           top: 8,

package/src/ai-components/message-composer/index.ts

@@ -3,3 +3,4 @@ export * from './ActionButton';
 export * from './AttachmentButton';
 export * from './MediaPreviewList';
 export * from './SpeechToTextButton';
+export * from './ChatOptions';

package/src/ai-components/message-parts/AIMessageParts.tsx

@@ -0,0 +1,120 @@
+import React, { type ReactNode } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { AIToolApproval } from './AIToolApproval';
+import { AIToolAuthorization } from './AIToolAuthorization';
+import { AIToolCall } from './AIToolCall';
+import type { AIMessagePartData } from './types';
+
+import { useAITranslation, useTheme } from '../contexts';
+import { useAIIcons } from '../icons';
+import { primitives } from '../internal/tokens';
+import { AIReasoning } from '../reasoning/AIReasoning';
+import type { AIToolApprover } from '../tool-calls/AIToolApprover';
+
+export type AIMessagePartProps = {
+  part: AIMessagePartData;
+  /**
+   * Who answers tool calls' questions on this device, to ask them. Defaults to the one of the
+   * nearest `AIToolApproverProvider`.
+   */
+  approver?: AIToolApprover;
+  /** The whole of a reasoning step's thinking, when the app has it. */
+  reasoningText?: (stepId: string) => string | undefined;
+  /**
+   * Which step this is, across a conversation, such as its message's id with the step's: a view
+   * shown for another step starts afresh. Defaults to the step's id.
+   */
+  stepKey?: string;
+};
+
+/**
+ * One step of a reply: a round of reasoning (`AIReasoning`), a tool call (`AIToolCall`, with its
+ * question or sign-in when it waits for this person here), or a neutral line for a step this SDK can't
+ * show.
+ */
+export const AIMessagePart = ({ approver, part, reasoningText, stepKey }: AIMessagePartProps) => {
+  const { t } = useAITranslation();
+  const {
+    theme: { colors, messageParts },
+  } = useTheme();
+  const { Info } = useAIIcons();
+
+  if (part.reasoning) {
+    return <AIReasoning part={part.reasoning} reasoningText={reasoningText} stepKey={stepKey} />;
+  }
+  if (part.toolCall) {
+    return (
+      <View style={styles.tool}>
+        <AIToolCall part={part.toolCall} />
+        <AIToolApproval approver={approver} part={part.toolCall} />
+        <AIToolAuthorization approver={approver} part={part.toolCall} />
+      </View>
+    );
+  }
+  return (
+    <View style={[styles.unsupported, messageParts?.unsupported?.container]}>
+      <Info color={colors.grey} />
+      <Text
+        style={[styles.unsupportedText, { color: colors.grey }, messageParts?.unsupported?.text]}
+      >
+        {t("A step this app version can't show")}
+      </Text>
+    </View>
+  );
+};
+
+export type AIMessagePartsProps = Omit<AIMessagePartProps, 'part' | 'stepKey'> & {
+  parts: AIMessagePartData[];
+  /** Renders a step, instead of `AIMessagePart`. */
+  children?: (part: AIMessagePartData) => ReactNode;
+  /**
+   * The message the steps are of. Step ids are only unique within a message: with it, a view
+   * reused for another message's steps, as when a list reuses a row, updates the views it has
+   * and starts each step afresh, rather than building them again.
+   */
+  messageId?: string;
+};
+
+/** The steps of a reply, in order. */
+export const AIMessageParts = ({
+  approver,
+  children,
+  messageId,
+  parts,
+  reasoningText,
+}: AIMessagePartsProps) => {
+  const {
+    theme: { messageParts },
+  } = useTheme();
+  return (
+    <View style={[styles.parts, messageParts?.container]} testID='ai-message-parts'>
+      {parts.map((part, index) => {
+        const stepKey = messageId === undefined ? part.id : `${messageId}:${part.id}`;
+        // The default steps are kept by position and start afresh for another step themselves.
+        // Steps rendered by `children` keep their state by step, which only they can reset.
+        return (
+          <View key={children ? stepKey : index}>
+            {children ? (
+              children(part)
+            ) : (
+              <AIMessagePart
+                approver={approver}
+                part={part}
+                reasoningText={reasoningText}
+                stepKey={stepKey}
+              />
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  parts: { gap: 8, width: '100%' },
+  tool: { gap: 8 },
+  unsupported: { alignItems: 'center', flexDirection: 'row', gap: 8 },
+  unsupportedText: { flexShrink: 1, fontSize: primitives.typographyFontSizeSm },
+});