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

package/src/ai-components/message/AIAssistantMessage.tsx

@@ -0,0 +1,99 @@
+import React, { type ComponentType } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import {
+  AIMessageAttachment,
+  type AIMessageAttachmentData,
+  type AIMessageAttachmentProps,
+} from './AIMessageAttachment';
+
+import { useTheme } from '../contexts';
+import { AIMessageParts } from '../message-parts/AIMessageParts';
+import type { AIMessagePartData } from '../message-parts/types';
+import { StreamingMessageView } from '../StreamingMessageView';
+import type { AIToolApprover } from '../tool-calls/AIToolApprover';
+
+export type AIAssistantMessageProps = {
+  /** The answer, in Markdown. */
+  text: string;
+  /**
+   * Who answers tool calls' questions and sign-ins on this device, to ask them. Defaults to the
+   * one of the nearest `AIToolApproverProvider`.
+   */
+  approver?: AIToolApprover;
+  /** Shows each attachment, instead of `AIMessageAttachment`, such as for a kind of your own. */
+  Attachment?: ComponentType<AIMessageAttachmentProps>;
+  /** What the agent sent with it, such as images and files. */
+  attachments?: AIMessageAttachmentData[];
+  /**
+   * The message's id. The steps keep their state for it, such as a reasoning step opened by
+   * hand, and start afresh for another, as when a list reuses this view for another reply,
+   * updating the views they have rather than building them again. Step ids are only unique
+   * within a message.
+   */
+  id?: string;
+  /** Whether the agent is still writing it. The text that arrives meanwhile is typed out. */
+  isGenerating?: boolean;
+  /** Opens a link in the answer, instead of the system's handler. */
+  onLink?: (url: string) => void;
+  /** Called when the answer starts or stops being typed out. */
+  onWritingChange?: (isWriting: boolean) => void;
+  /** The steps the agent took, in order, shown before the answer. */
+  parts?: AIMessagePartData[];
+  /** The whole of a reasoning step's thinking, when the app has it. */
+  reasoningText?: (stepId: string) => string | undefined;
+};
+
+/**
+ * The agent's reply: its steps (reasoning, tool calls and their questions), then its answer,
+ * typed out as it streams in, then what it sent with it.
+ */
+export const AIAssistantMessage = ({
+  approver,
+  Attachment = AIMessageAttachment,
+  attachments = [],
+  id,
+  isGenerating = false,
+  onLink,
+  onWritingChange,
+  parts = [],
+  reasoningText,
+  text,
+}: AIAssistantMessageProps) => {
+  const {
+    theme: { message },
+  } = useTheme();
+  const styles = message?.assistantMessage;
+  return (
+    <View
+      accessibilityState={{ busy: isGenerating }}
+      style={[defaultStyles.container, styles?.container]}
+      testID='ai-assistant-message'
+    >
+      {parts.length > 0 ? (
+        <AIMessageParts
+          approver={approver}
+          messageId={id}
+          parts={parts}
+          reasoningText={reasoningText}
+        />
+      ) : null}
+      {/* What arrives after mount is typed out; a reply loaded from history shows at once. */}
+      {text !== '' ? (
+        <StreamingMessageView onLink={onLink} onWritingChange={onWritingChange} text={text} />
+      ) : null}
+      {attachments.length > 0 ? (
+        <View style={[defaultStyles.attachments, styles?.attachments]}>
+          {attachments.map((attachment, index) => (
+            <Attachment attachment={attachment} key={index} role='assistant' />
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const defaultStyles = StyleSheet.create({
+  attachments: { alignItems: 'flex-start', gap: 8 },
+  container: { gap: 8 },
+});

package/src/ai-components/message/AIMessageAttachment.tsx

@@ -0,0 +1,245 @@
+import React from 'react';
+import { Image, Linking, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useAITranslation, useTheme } from '../contexts';
+import { type AIIcons, useAIIcons } from '../icons';
+import { primitives } from '../internal/tokens';
+
+/**
+ * What a message carries besides its text, such as an image or a file.
+ */
+export type AIMessageAttachmentData = {
+  /** `image` shows a thumbnail; `file` shows its name, type and size. An open set. */
+  kind: 'image' | 'file' | (string & {});
+  /** Data of its own, such as what an attachment of a kind of your own needs. */
+  extraData?: Record<string, unknown>;
+  /** Its media type, such as `application/pdf`. Without it, the type comes from its name or URL. */
+  mimeType?: string;
+  /** Its name, such as the file's. */
+  name?: string;
+  /** Its size, in bytes. */
+  size?: number;
+  /** Where it is: a web URL, or a local one of something the app holds, such as a photo just picked. */
+  url?: string;
+};
+
+/** The extension of its name, else of its URL. */
+const pathExtensionOf = (attachment: AIMessageAttachmentData) => {
+  for (const candidate of [attachment.name, attachment.url]) {
+    if (!candidate) continue;
+    const path = candidate.split(/[?#]/)[0] ?? '';
+    const file = path.split('/').pop() ?? '';
+    const dot = file.lastIndexOf('.');
+    if (dot > 0 && dot < file.length - 1) return file.slice(dot + 1);
+  }
+  return undefined;
+};
+
+const extensionOf = (attachment: AIMessageAttachmentData) =>
+  pathExtensionOf(attachment) ?? attachment.mimeType?.split('/')[1]?.split(/[+;]/)[0];
+
+const ARCHIVE_EXTENSIONS = ['7z', 'bz2', 'gz', 'rar', 'tar', 'tgz', 'xz', 'zip'];
+const ARCHIVE_SUBTYPES = [
+  'gzip',
+  'vnd.rar',
+  'x-7z-compressed',
+  'x-bzip2',
+  'x-rar-compressed',
+  'x-tar',
+  'zip',
+];
+const AUDIO_EXTENSIONS = ['aac', 'flac', 'm4a', 'mp3', 'ogg', 'opus', 'wav'];
+const IMAGE_EXTENSIONS = ['bmp', 'gif', 'heic', 'heif', 'jpeg', 'jpg', 'png', 'svg', 'webp'];
+const VIDEO_EXTENSIONS = ['avi', 'm4v', 'mkv', 'mov', 'mp4', 'webm'];
+
+/**
+ * The icon of a file's type, from its media type, else from the extension of its name or URL.
+ */
+const fileTypeIcon = (
+  attachment: AIMessageAttachmentData,
+): keyof Pick<AIIcons, 'Archive' | 'Audio' | 'File' | 'Image' | 'Pdf' | 'Video'> => {
+  const [type, subtype] = attachment.mimeType?.toLowerCase().split(';')[0]?.trim().split('/') ?? [];
+  const extension = pathExtensionOf(attachment)?.toLowerCase();
+  const is = (wanted: string, extensions: string[]) =>
+    type ? type === wanted : !!extension && extensions.includes(extension);
+  if (type ? subtype === 'pdf' : extension === 'pdf') return 'Pdf';
+  if (is('image', IMAGE_EXTENSIONS)) return 'Image';
+  if (is('audio', AUDIO_EXTENSIONS)) return 'Audio';
+  if (is('video', VIDEO_EXTENSIONS)) return 'Video';
+  if (
+    type
+      ? !!subtype && ARCHIVE_SUBTYPES.includes(subtype)
+      : !!extension && ARCHIVE_EXTENSIONS.includes(extension)
+  ) {
+    return 'Archive';
+  }
+  return !type && !extension && attachment.kind === 'image' ? 'Image' : 'File';
+};
+
+const FILE_SIZE_UNITS = ['B', 'kB', 'MB', 'GB'];
+
+/** A size in bytes to three significant digits, such as "2.34 MB", as the chat SDK writes it. */
+export const formatFileSize = (bytes: number) => {
+  const exponent =
+    bytes <= 0
+      ? 0
+      : Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), FILE_SIZE_UNITS.length - 1);
+  const mantissa = bytes / 1024 ** exponent;
+  // `toPrecision` turns exponential past three integer digits (1000–1023 of a unit).
+  const formatted = mantissa >= 1000 ? Math.round(mantissa).toString() : mantissa.toPrecision(3);
+  return `${formatted} ${FILE_SIZE_UNITS[exponent]}`;
+};
+
+/** Its type and size, such as "PDF · 2.34 MB". */
+export const attachmentDetails = (attachment: AIMessageAttachmentData) =>
+  [
+    extensionOf(attachment)?.toUpperCase(),
+    attachment.size !== undefined ? formatFileSize(attachment.size) : undefined,
+  ]
+    .filter(Boolean)
+    .join(' · ');
+
+// Only a web URL opens; anything else, such as a local file, a data URL or `javascript:`, doesn't.
+const isWebUrl = (url: string | undefined): url is string => !!url && /^https?:\/\//i.test(url);
+
+const open = (url: string) => {
+  Linking.openURL(url).catch(() => undefined);
+};
+
+export type AIMessageAttachmentProps = {
+  attachment: AIMessageAttachmentData;
+  /** Who sent it. */
+  role?: 'user' | 'assistant' | (string & {});
+};
+
+/**
+ * An image or a file on a message: an image as a thumbnail, a file with its type's icon, name, type
+ * and size. A file at a web URL opens in the browser when tapped; an image doesn't open.
+ */
+export const AIMessageAttachment = ({
+  attachment,
+  role = 'assistant',
+}: AIMessageAttachmentProps) => {
+  const { t } = useAITranslation();
+  const {
+    theme: { colors, message },
+  } = useTheme();
+  const styles = message?.attachment;
+  const icons = useAIIcons();
+  const { url } = attachment;
+  const name =
+    attachment.name ||
+    (url && !url.startsWith('data:') ? url.split(/[?#]/)[0]?.split('/').pop() : undefined) ||
+    (attachment.kind === 'image' ? t('Image') : t('File'));
+
+  if (attachment.kind === 'image' && url) {
+    return (
+      <View
+        accessibilityLabel={name}
+        accessibilityRole='image'
+        accessible
+        style={[
+          defaultStyles.image,
+          { backgroundColor: message?.attachmentImagePlaceholder ?? colors.grey_whisper },
+          styles?.image,
+        ]}
+        testID={`ai-message-attachment-${role}`}
+      >
+        <Image
+          accessibilityIgnoresInvertColors
+          resizeMode='cover'
+          source={{ uri: url }}
+          style={StyleSheet.absoluteFill}
+        />
+      </View>
+    );
+  }
+
+  const details = attachmentDetails(attachment);
+  const TypeIcon = icons[fileTypeIcon(attachment)];
+  const content = (
+    <>
+      <View
+        style={[
+          defaultStyles.fileIcon,
+          { backgroundColor: message?.attachmentIconBackground ?? colors.accent_blue },
+          styles?.fileIcon,
+        ]}
+      >
+        <TypeIcon color={message?.attachmentIcon ?? colors.white} size={20} />
+      </View>
+      <View style={defaultStyles.fileText}>
+        <Text
+          ellipsizeMode='middle'
+          numberOfLines={1}
+          style={[
+            defaultStyles.fileName,
+            { color: message?.attachmentName ?? colors.black },
+            styles?.fileName,
+          ]}
+        >
+          {name}
+        </Text>
+        {details ? (
+          <Text
+            numberOfLines={1}
+            style={[
+              defaultStyles.fileDetails,
+              { color: message?.attachmentDetails ?? colors.grey },
+              styles?.fileDetails,
+            ]}
+          >
+            {details}
+          </Text>
+        ) : null}
+      </View>
+    </>
+  );
+  const fileStyle = [
+    defaultStyles.file,
+    {
+      backgroundColor: message?.attachmentBackground ?? colors.white,
+      borderColor: message?.attachmentBorder ?? colors.grey_gainsboro,
+    },
+    styles?.file,
+  ];
+
+  return isWebUrl(url) ? (
+    <Pressable
+      accessibilityRole='link'
+      onPress={() => open(url)}
+      style={({ pressed }) => [fileStyle, { opacity: pressed ? 0.7 : 1 }]}
+      testID={`ai-message-attachment-${role}`}
+    >
+      {content}
+    </Pressable>
+  ) : (
+    <View accessible style={fileStyle} testID={`ai-message-attachment-${role}`}>
+      {content}
+    </View>
+  );
+};
+
+const defaultStyles = StyleSheet.create({
+  // A 36 tile with a 20 icon, 8 padding, 10 apart, at most 280 wide.
+  file: {
+    alignItems: 'center',
+    borderRadius: 16,
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 10,
+    maxWidth: 280,
+    padding: 8,
+  },
+  fileDetails: { fontSize: primitives.typographyFontSizeXs },
+  fileIcon: {
+    alignItems: 'center',
+    borderRadius: 8,
+    height: 36,
+    justifyContent: 'center',
+    width: 36,
+  },
+  fileName: { fontSize: primitives.typographyFontSizeSm, fontWeight: '600' },
+  fileText: { flexShrink: 1 },
+  image: { borderRadius: 16, height: 180, overflow: 'hidden', width: 180 },
+});

package/src/ai-components/message/AIReplyActions.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Pressable, Share, StyleSheet, View } from 'react-native';
+
+import { useAITranslation, useTheme } from '../contexts';
+import { type AIIcon, useAIIcons } from '../icons';
+import { setClipboardString } from '../services/clipboard-service';
+
+/** How the person rated a reply. */
+export type AIMessageRating = 'positive' | 'negative';
+
+export type AIReplyActionsProps = {
+  /** The reply's text, which copying and sharing hand on. */
+  text: string;
+  /** Rates the reply, or takes the rating back with `null`. Without it, no rating is offered. */
+  onRate?: (rating: AIMessageRating | null) => void;
+  /** Asks the agent for a new reply in its place. Without it, no regenerate button. */
+  onRegenerate?: () => void;
+  /** How the person rated the reply, if they did. */
+  rating?: AIMessageRating | null;
+};
+
+/** How long the copy button shows its check. */
+const COPIED_MS = 1500;
+
+type ActionProps = {
+  Icon: AIIcon;
+  label: string;
+  onPress: () => void;
+  selected?: boolean;
+};
+
+const Action = ({ Icon, label, onPress, selected }: ActionProps) => {
+  const {
+    theme: { colors, message },
+  } = useTheme();
+  const styles = message?.replyActions;
+  return (
+    <Pressable
+      accessibilityLabel={label}
+      accessibilityRole='button'
+      accessibilityState={selected === undefined ? undefined : { selected }}
+      onPress={onPress}
+      style={({ pressed }) => [
+        defaultStyles.button,
+        { opacity: pressed ? 0.5 : 1 },
+        styles?.button,
+      ]}
+    >
+      <Icon color={message?.messageAction ?? colors.grey_dark} size={18} />
+    </Pressable>
+  );
+};
+
+/**
+ * The actions under a finished reply: copy (when the app has a clipboard module), share through
+ * the system's share sheet, regenerate, and a thumbs up or down rating.
+ */
+export const AIReplyActions = ({ onRate, onRegenerate, rating, text }: AIReplyActionsProps) => {
+  const { t } = useAITranslation();
+  const {
+    theme: { message },
+  } = useTheme();
+  const icons = useAIIcons();
+  const [isCopied, setIsCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  // A list that reuses this view for another reply: what was copied was the other reply.
+  const [replyText, setReplyText] = useState(text);
+  if (replyText !== text) {
+    setReplyText(text);
+    setIsCopied(false);
+  }
+
+  const setString = setClipboardString;
+  const copy = setString
+    ? () => {
+        setString(text);
+        setIsCopied(true);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setIsCopied(false), COPIED_MS);
+      }
+    : undefined;
+
+  // The person closing the share sheet resolves too; there's nothing to do either way.
+  const share = () => {
+    Share.share({ message: text }).catch(() => undefined);
+  };
+
+  const positive = rating === 'positive';
+  const negative = rating === 'negative';
+
+  return (
+    <View
+      accessibilityLabel={t('Reply actions')}
+      accessibilityRole='toolbar'
+      style={[defaultStyles.container, message?.replyActions?.container]}
+      testID='ai-reply-actions'
+    >
+      {copy ? (
+        <Action
+          Icon={isCopied ? icons.Copied : icons.Copy}
+          label={isCopied ? t('Copied') : t('Copy')}
+          onPress={copy}
+        />
+      ) : null}
+      <Action Icon={icons.Share} label={t('Share')} onPress={share} />
+      {onRegenerate ? (
+        <Action Icon={icons.Regenerate} label={t('Regenerate')} onPress={onRegenerate} />
+      ) : null}
+      {onRate ? (
+        <>
+          <Action
+            Icon={positive ? icons.ThumbsUpFilled : icons.ThumbsUp}
+            label={t('Good response')}
+            onPress={() => onRate(positive ? null : 'positive')}
+            selected={positive}
+          />
+          <Action
+            Icon={negative ? icons.ThumbsDownFilled : icons.ThumbsDown}
+            label={t('Bad response')}
+            onPress={() => onRate(negative ? null : 'negative')}
+            selected={negative}
+          />
+        </>
+      ) : null}
+    </View>
+  );
+};
+
+const defaultStyles = StyleSheet.create({
+  // 40 buttons, 8 apart, with 18 icons.
+  button: {
+    alignItems: 'center',
+    height: 40,
+    justifyContent: 'center',
+    width: 40,
+  },
+  container: { alignItems: 'center', flexDirection: 'row', gap: 8 },
+});

package/src/ai-components/message/AIUserMessage.tsx

@@ -0,0 +1,121 @@
+import React, { type ComponentType } from 'react';
+import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import {
+  AIMessageAttachment,
+  type AIMessageAttachmentData,
+  type AIMessageAttachmentProps,
+} from './AIMessageAttachment';
+
+import { useAITranslation, useTheme } from '../contexts';
+import { useAIIcons } from '../icons';
+import { primitives } from '../internal/tokens';
+
+export type AIUserMessageProps = {
+  /** What the person wrote. */
+  text: string;
+  /** Shows each attachment, instead of `AIMessageAttachment`, such as for a kind of your own. */
+  Attachment?: ComponentType<AIMessageAttachmentProps>;
+  /** What they sent with it, such as images and files. */
+  attachments?: AIMessageAttachmentData[];
+  /** Edits the message, such as by putting its text back in the composer. Without it, no edit button. */
+  onEdit?: () => void;
+};
+
+/**
+ * The person's message: its attachments, then its text in a bubble on the trailing side.
+ */
+export const AIUserMessage = ({
+  Attachment = AIMessageAttachment,
+  attachments = [],
+  onEdit,
+  text,
+}: AIUserMessageProps) => {
+  const { t } = useAITranslation();
+  const {
+    theme: { colors, message },
+  } = useTheme();
+  const { Edit } = useAIIcons();
+  const styles = message?.userMessage;
+
+  return (
+    <View style={[defaultStyles.container, styles?.container]} testID='ai-user-message'>
+      {attachments.length > 0 ? (
+        <View style={[defaultStyles.attachments, styles?.attachments]}>
+          {attachments.map((attachment, index) => (
+            <Attachment attachment={attachment} key={index} role='user' />
+          ))}
+        </View>
+      ) : null}
+      {text !== '' ? (
+        <View style={defaultStyles.row}>
+          {onEdit ? (
+            <Pressable
+              accessibilityLabel={t('Edit')}
+              accessibilityRole='button'
+              hitSlop={8}
+              onPress={onEdit}
+              style={({ pressed }) => [
+                defaultStyles.editButton,
+                { opacity: pressed ? 0.5 : 1 },
+                styles?.editButton,
+              ]}
+            >
+              <Edit color={colors.grey} size={16} />
+            </Pressable>
+          ) : null}
+          <View
+            style={[
+              defaultStyles.bubble,
+              { backgroundColor: message?.userMessageBackground ?? USER_MESSAGE_BACKGROUND },
+              styles?.bubble,
+            ]}
+          >
+            <Text
+              selectable
+              style={[
+                defaultStyles.text,
+                { color: message?.userMessageText ?? USER_MESSAGE_TEXT },
+                styles?.text,
+              ]}
+            >
+              {text}
+            </Text>
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+// The design tokens' default surface and text.
+const USER_MESSAGE_BACKGROUND = '#EBEEF1';
+const USER_MESSAGE_TEXT = '#1A1B25';
+
+const defaultStyles = StyleSheet.create({
+  // One under the other.
+  attachments: { alignItems: 'flex-end', gap: 8 },
+  bubble: {
+    borderRadius: 20,
+    flexShrink: 1,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+  },
+  container: {
+    alignItems: 'flex-end',
+    gap: 8,
+    paddingStart: 48,
+  },
+  editButton: { padding: 4 },
+  row: {
+    alignItems: 'flex-end',
+    flexDirection: 'row',
+    gap: 4,
+    maxWidth: '100%',
+  },
+  text: {
+    fontSize: primitives.typographyFontSizeMd,
+    lineHeight: primitives.typographyLineHeightRelaxed,
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+  },
+});