stream-chat-react-native-core 9.12.1-beta.1 → 9.13.0

package/src/ai-components/store/composer/useComposerIsEditing.ts

@@ -0,0 +1,15 @@
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+import { type ComposerState } from './store';
+
+import { useMessageComposerContext } from '../../contexts';
+
+const selector = ({ isEditing }: ComposerState) => ({
+  isEditing: !!isEditing,
+});
+
+/** Whether the person is editing a message they sent. */
+export const useComposerIsEditing = () => {
+  const { state } = useMessageComposerContext();
+  return useStateStore(state, selector);
+};

package/src/ai-components/store/index.ts

@@ -4,7 +4,9 @@ export * from './bottom-sheet/useBottomSheetState';
 
 // message composer
 export * from './composer/store';
+export * from './composer/useComposerChatOption';
 export * from './composer/useComposerHasText';
+export * from './composer/useComposerIsEditing';
 export * from './composer/useComposerText';
 
 // dictation

package/src/ai-components/suggestions/AISuggestions.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Pressable, ScrollView, StyleSheet, Text } from 'react-native';
+
+import { useTheme } from '../contexts';
+import { primitives } from '../internal/tokens';
+
+export type AISuggestionsProps = {
+  /** Called with the suggestion the person picked, such as to send it. */
+  onSelect: (suggestion: string) => void;
+  /** Starters for a conversation, such as "What's on my calendar today?". */
+  suggestions: string[];
+};
+
+/**
+ * A row of starter chips for an empty conversation, scrolling sideways. Picking one hands its text
+ * to `onSelect`.
+ */
+export const AISuggestions = ({ onSelect, suggestions }: AISuggestionsProps) => {
+  const {
+    theme: { suggestions: theme },
+  } = useTheme();
+  if (suggestions.length === 0) return null;
+
+  return (
+    <ScrollView
+      contentContainerStyle={[styles.content, theme?.content]}
+      horizontal
+      keyboardShouldPersistTaps='handled'
+      showsHorizontalScrollIndicator={false}
+      style={[styles.container, theme?.container]}
+      testID='ai-suggestions'
+    >
+      {suggestions.map((suggestion) => (
+        <Pressable
+          accessibilityRole='button'
+          key={suggestion}
+          onPress={() => onSelect(suggestion)}
+          style={({ pressed }) => [
+            styles.item,
+            { backgroundColor: theme?.background, opacity: pressed ? 0.7 : 1 },
+            theme?.item,
+          ]}
+        >
+          <Text
+            numberOfLines={2}
+            style={[styles.itemText, { color: theme?.text }, theme?.itemText]}
+          >
+            {suggestion}
+          </Text>
+        </Pressable>
+      ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flexGrow: 0 },
+  content: {
+    gap: primitives.spacingXs,
+    paddingHorizontal: primitives.spacingMd,
+    paddingVertical: primitives.spacingXs,
+  },
+  item: {
+    borderRadius: primitives.radiusXl,
+    justifyContent: 'center',
+    maxWidth: 160,
+    padding: primitives.spacingMd,
+  },
+  itemText: {
+    fontSize: primitives.typographyFontSizeSm,
+    lineHeight: primitives.typographyLineHeightNormal,
+  },
+});

package/src/ai-components/suggestions/index.ts

@@ -0,0 +1 @@
+export * from './AISuggestions';

package/src/ai-components/syntax-highlighting/utils/flatten-nodes.ts

@@ -3,6 +3,7 @@ import { processColor } from 'react-native';
 // @ts-expect-error createStyleObject is not available in the type exports, it is still exported though
 import { createStyleObject } from 'react-syntax-highlighter/dist/esm/create-element';
 
+import { primitives } from '../../internal/tokens';
 import type { ColorRange } from '../SyntaxHighlighter';
 import type { SyntaxHighlighterStylesheet } from '../types';
 
@@ -19,7 +20,7 @@ export const flattenNodesToTextAndColorRanges = ({
   stylesheet,
   defaultColor,
   fontFamily,
-  fontSize = 13,
+  fontSize = primitives.typographyFontSizeXs,
 }: FlattenOptions): { text: string; ranges: ColorRange[] } => {
   let text = '';
   const rawRanges: { start: number; end: number; color: string | number }[] = [];

package/src/ai-components/syntax-highlighting/utils/renderer.tsx

@@ -8,6 +8,7 @@ import { createStyleObject } from 'react-syntax-highlighter/dist/esm/create-elem
 
 import { cssToRNTextStyle } from './converter';
 
+import { primitives } from '../../internal/tokens';
 import { AndroidNativeRenderer } from '../components';
 import type {
   NativeSyntaxHighlighterProps,
@@ -16,7 +17,8 @@ import type {
   SyntaxHighlighterStylesheet,
 } from '../types';
 
-export const DEFAULT_FONT_SIZE = 13;
+// Code reads at the footnote size.
+export const DEFAULT_FONT_SIZE = primitives.typographyFontSizeXs;
 
 export const generateNewStylesheet = ({
   stylesheet,
@@ -120,7 +122,7 @@ export const createNativeElement = ({
 export const nativeRenderer = ({
   defaultColor,
   fontFamily,
-  fontSize = 13,
+  fontSize = DEFAULT_FONT_SIZE,
 }: {
   defaultColor: string;
   fontFamily?: string;

package/src/ai-components/theme.ts

@@ -1,5 +1,6 @@
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 
+import type { AIIcons } from './icons';
 import type { MarkdownStyle } from './markdown';
 
 export const colors = {
@@ -29,6 +30,8 @@ export type Theme = {
     inputPillContainer: ViewStyle;
     inputPill: ViewStyle;
     textInput: TextStyle;
+    /** What `ComposerView`'s `trailing` sits in, after the message box. */
+    trailing: ViewStyle;
     roundButton: ViewStyle;
     attachIcon: TextStyle;
     mediaPreviewStyle: ViewStyle;
@@ -69,8 +72,227 @@ export type Theme = {
      */
     backdropColor?: string;
   };
+  /**
+   * The steps of an agent's reply: reasoning, tool calls and their questions. Optional, so a
+   * hand-built `Theme` without it keeps type-checking.
+   */
+  messageParts?: {
+    /** The colour of a completed tool call's check. */
+    successColor?: string;
+    container?: ViewStyle;
+    reasoning?: {
+      container?: ViewStyle;
+      rule?: ViewStyle;
+      header?: ViewStyle;
+      title?: TextStyle;
+      summary?: TextStyle;
+      panel?: ViewStyle;
+    };
+    toolCall?: {
+      container?: ViewStyle;
+      title?: TextStyle;
+      detail?: TextStyle;
+      duration?: TextStyle;
+    };
+    approvalCard?: {
+      container?: ViewStyle;
+      title?: TextStyle;
+      message?: TextStyle;
+      allowButton?: ViewStyle;
+      allowButtonText?: TextStyle;
+      declineButton?: ViewStyle;
+      declineButtonText?: TextStyle;
+      failure?: TextStyle;
+    };
+    authorizationCard?: {
+      container?: ViewStyle;
+      title?: TextStyle;
+      message?: TextStyle;
+      outcome?: TextStyle;
+      connectButton?: ViewStyle;
+      connectButtonText?: TextStyle;
+      declineButton?: ViewStyle;
+      declineButtonText?: TextStyle;
+      failure?: TextStyle;
+    };
+    unsupported?: {
+      container?: ViewStyle;
+      text?: TextStyle;
+    };
+  };
+  /**
+   * `AIConversation`: the list of turns, the spinner while older messages load, and the button back
+   * to the latest message. Optional, so a hand-built `Theme` without it keeps type-checking.
+   */
+  conversation?: {
+    /** The spinner while older messages load. */
+    loadingIndicator?: string;
+    /** The button back to the latest message. */
+    scrollButtonBackground?: string;
+    scrollButtonBorder?: string;
+    scrollButtonIcon?: string;
+    container?: ViewStyle;
+    /** The list's content: the turns, with the room around them. */
+    content?: ViewStyle;
+    /** What shows while there are no messages. */
+    empty?: ViewStyle;
+    loadingOlder?: ViewStyle;
+    scrollButton?: ViewStyle;
+    /** The view around each message, and around what ends the latest turn. */
+    row?: ViewStyle;
+  };
+  /**
+   * Icons of your own for the agent replies' views, by name, over `defaultAIIcons`. Kept as they
+   * are when themes merge.
+   */
+  icons?: Partial<AIIcons>;
+  /**
+   * The person's and the agent's messages, what they carry, and the actions under a reply.
+   * Optional, so a hand-built `Theme` without it keeps type-checking.
+   */
+  message?: {
+    /** The person's bubble. */
+    userMessageBackground?: string;
+    userMessageText?: string;
+    /** The icons of the actions under a reply. */
+    messageAction?: string;
+    /** A file's card, and the tile with its type's icon. */
+    attachmentBackground?: string;
+    attachmentBorder?: string;
+    attachmentIcon?: string;
+    attachmentIconBackground?: string;
+    attachmentName?: string;
+    attachmentDetails?: string;
+    /** What an image shows while it loads, or when it can't. */
+    attachmentImagePlaceholder?: string;
+    userMessage?: {
+      container?: ViewStyle;
+      attachments?: ViewStyle;
+      bubble?: ViewStyle;
+      text?: TextStyle;
+      editButton?: ViewStyle;
+      /** The menu a long press on the message opens, and its items. */
+      menu?: ViewStyle;
+      menuItem?: ViewStyle;
+      menuItemText?: TextStyle;
+    };
+    assistantMessage?: {
+      container?: ViewStyle;
+      attachments?: ViewStyle;
+    };
+    attachment?: {
+      image?: ImageStyle;
+      file?: ViewStyle;
+      fileIcon?: ViewStyle;
+      fileName?: TextStyle;
+      fileDetails?: TextStyle;
+    };
+    replyActions?: {
+      container?: ViewStyle;
+      button?: ViewStyle;
+    };
+  };
+  /**
+   * The composer's chat options: the menu in its sheet, and the chip of the one picked. Optional,
+   * so a hand-built `Theme` without it keeps type-checking.
+   */
+  chatOptions?: {
+    /** The picked option's chip. */
+    chipBackground?: string;
+    chipText?: string;
+    /** An option's description in the menu. */
+    descriptionText?: string;
+    /** An option's title in the menu. */
+    titleText?: string;
+    list?: ViewStyle;
+    item?: ViewStyle;
+    itemIcon?: ViewStyle;
+    itemTitle?: TextStyle;
+    itemDescription?: TextStyle;
+    chip?: ViewStyle;
+    chipIcon?: ViewStyle;
+    chipTitle?: TextStyle;
+    chipRemoveButton?: ViewStyle;
+  };
+  /** `AISuggestions`: the starters of an empty conversation. Optional, as above. */
+  suggestions?: {
+    background?: string;
+    text?: string;
+    container?: ViewStyle;
+    content?: ViewStyle;
+    item?: ViewStyle;
+    itemText?: TextStyle;
+  };
+  /** The UI the agent generates for a reply, in place of its text. Optional, as above. */
+  generatedUI?: {
+    /** What a reply's generated UI sits in, as wide as the reply. */
+    container?: ViewStyle;
+  };
+  /**
+   * A2UI's basic catalog, from the `a2ui` entry point: its colors, over ones from the theme's own,
+   * and the look of its parts. Optional, as above.
+   */
+  a2ui?: {
+    colors?: {
+      /** Primary buttons, chosen chips and tabs, links and the slider. */
+      accent?: string;
+      /** Text on the accent. */
+      onAccent?: string;
+      text?: string;
+      secondaryText?: string;
+      /** Inputs and chips. */
+      surface?: string;
+      /** Cards, default buttons and placeholders. */
+      subtleSurface?: string;
+      border?: string;
+      /** What a check found, and the border of the input it found it in. */
+      error?: string;
+    };
+    /** What a reply's surfaces sit in, one under another. */
+    surfaces?: ViewStyle;
+    card?: ViewStyle;
+    button?: ViewStyle;
+    buttonText?: TextStyle;
+    input?: TextStyle;
+    label?: TextStyle;
+    chip?: ViewStyle;
+    chipText?: TextStyle;
+    tab?: ViewStyle;
+    tabText?: TextStyle;
+    divider?: ViewStyle;
+    caption?: TextStyle;
+    image?: ImageStyle;
+  };
 };
 
+/**
+ * The colors of the conversation's parts that the design sets, each with the palette color it is
+ * drawn as. A style that changes that palette color, such as for dark mode, changes the part too,
+ * unless it sets the part's own.
+ */
+export const PALETTE_COLORED_PARTS = [
+  ['conversation', 'loadingIndicator', 'grey_dark'],
+  ['conversation', 'scrollButtonBackground', 'white'],
+  ['conversation', 'scrollButtonBorder', 'grey_gainsboro'],
+  ['conversation', 'scrollButtonIcon', 'black'],
+  ['message', 'userMessageBackground', 'grey_whisper'],
+  ['message', 'userMessageText', 'black'],
+  ['message', 'messageAction', 'grey_dark'],
+  ['message', 'attachmentBackground', 'white'],
+  ['message', 'attachmentBorder', 'grey_gainsboro'],
+  ['message', 'attachmentIcon', 'white'],
+  ['message', 'attachmentIconBackground', 'accent_blue'],
+  ['message', 'attachmentName', 'black'],
+  ['message', 'attachmentDetails', 'grey_dark'],
+  ['message', 'attachmentImagePlaceholder', 'white_smoke'],
+  ['chatOptions', 'chipBackground', 'white'],
+  ['chatOptions', 'chipText', 'accent_blue'],
+  ['chatOptions', 'descriptionText', 'grey_dark'],
+  ['chatOptions', 'titleText', 'black'],
+  ['suggestions', 'background', 'grey_whisper'],
+  ['suggestions', 'text', 'black'],
+] as const satisfies readonly (readonly [keyof Theme, string, keyof typeof colors])[];
+
 export const defaultTheme: Theme = {
   colors,
   markdown: {
@@ -121,6 +343,7 @@ export const defaultTheme: Theme = {
     inputPillContainer: {},
     inputPill: {},
     textInput: {},
+    trailing: {},
     roundButton: {},
     attachIcon: {},
     mediaPreviewStyle: {},
@@ -151,4 +374,115 @@ export const defaultTheme: Theme = {
   voiceVisualization: {
     colors: [colors.accent_blue],
   },
+  messageParts: {
+    successColor: '#20E070',
+    container: {},
+    reasoning: { container: {}, rule: {}, header: {}, title: {}, summary: {}, panel: {} },
+    toolCall: { container: {}, title: {}, detail: {}, duration: {} },
+    approvalCard: {
+      container: {},
+      title: {},
+      message: {},
+      allowButton: {},
+      allowButtonText: {},
+      declineButton: {},
+      declineButtonText: {},
+      failure: {},
+    },
+    authorizationCard: {
+      container: {},
+      title: {},
+      message: {},
+      outcome: {},
+      connectButton: {},
+      connectButtonText: {},
+      declineButton: {},
+      declineButtonText: {},
+      failure: {},
+    },
+    unsupported: { container: {}, text: {} },
+  },
+  conversation: {
+    // From the shared design tokens.
+    loadingIndicator: '#414552',
+    scrollButtonBackground: '#FFFFFF',
+    scrollButtonBorder: '#D5DBE1',
+    scrollButtonIcon: '#1A1B25',
+    container: {},
+    content: {},
+    empty: {},
+    loadingOlder: {},
+    scrollButton: {},
+    row: {},
+  },
+  message: {
+    // From the shared design tokens.
+    userMessageBackground: '#EBEEF1',
+    userMessageText: '#1A1B25',
+    messageAction: '#414552',
+    attachmentBackground: '#FFFFFF',
+    attachmentBorder: '#D5DBE1',
+    attachmentIcon: '#FFFFFF',
+    attachmentIconBackground: '#005FFF',
+    attachmentName: '#1A1B25',
+    attachmentDetails: '#414552',
+    attachmentImagePlaceholder: '#F6F8FA',
+    userMessage: {
+      container: {},
+      attachments: {},
+      bubble: {},
+      text: {},
+      editButton: {},
+      menu: {},
+      menuItem: {},
+      menuItemText: {},
+    },
+    assistantMessage: { container: {}, attachments: {} },
+    attachment: { image: {}, file: {}, fileIcon: {}, fileName: {}, fileDetails: {} },
+    replyActions: { container: {}, button: {} },
+  },
+  chatOptions: {
+    // From the shared design tokens.
+    chipBackground: '#FFFFFF',
+    chipText: '#005FFF',
+    descriptionText: '#414552',
+    titleText: '#1A1B25',
+    list: {},
+    item: {},
+    itemIcon: {},
+    itemTitle: {},
+    itemDescription: {},
+    chip: {},
+    chipIcon: {},
+    chipTitle: {},
+    chipRemoveButton: {},
+  },
+  suggestions: {
+    // From the shared design tokens.
+    background: '#EBEEF1',
+    text: '#1A1B25',
+    container: {},
+    content: {},
+    item: {},
+    itemText: {},
+  },
+  generatedUI: {
+    container: {},
+  },
+  a2ui: {
+    colors: {},
+    surfaces: {},
+    card: {},
+    button: {},
+    buttonText: {},
+    input: {},
+    label: {},
+    chip: {},
+    chipText: {},
+    tab: {},
+    tabText: {},
+    divider: {},
+    caption: {},
+    image: {},
+  },
 };

package/src/ai-components/tool-calls/AIClientIdentity.ts

@@ -0,0 +1,33 @@
+import { Platform } from 'react-native';
+
+import NativeAIAgent from '../native-specs/NativeAIAgent';
+
+// Used when the app is built without the SDK's native code, so the id still holds for as long
+// as the app runs.
+let inMemoryId: string | undefined;
+
+const randomHex = (length: number) =>
+  Array.from({ length }, () => Math.floor(Math.random() * 16).toString(16)).join('');
+
+/**
+ * A stable identifier for this install, for addressing client tool calls to it. Send it with the
+ * person's questions (`client_id`) so the agent addresses the calls it makes while answering to
+ * this install, and pass it to `AIToolApprover` as `clientId`.
+ */
+export const AIClientIdentity = {
+  /**
+   * This install's identifier, created on first use and kept until the app's data is cleared:
+   * `ios-…` in `UserDefaults`, `android-…` in a file that isn't backed up, as in the native AI
+   * SDKs. Without the SDK's native code it lives in memory, for as long as the app runs.
+   */
+  installId(): string {
+    try {
+      const saved = NativeAIAgent?.installId();
+      if (saved) return saved;
+    } catch {
+      // Falls back to an id kept in memory.
+    }
+    inMemoryId ??= `${Platform.OS}-${randomHex(32)}`;
+    return inMemoryId;
+  },
+};