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

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

@@ -0,0 +1,196 @@
+import React, { type ReactNode, useEffect } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { callStateOf, setCallState, useCallState } from './callStates';
+import { isAwaitingApproval } from './parseMessageParts';
+import type { AIToolApprovalData, AIToolCallPart } from './types';
+
+import { useAITranslation, useTheme } from '../contexts';
+import { primitives } from '../internal/tokens';
+import { type AIToolApprover, useAIToolApprover } from '../tool-calls/AIToolApprover';
+
+/** Where the person's answer to a tool call's question is. */
+export type AIToolApprovalState = {
+  /** The answer couldn't be sent, and the person can answer again. */
+  failed: boolean;
+  /** The answer is on its way, or arrived and the call's step hasn't changed yet. */
+  isSending: boolean;
+};
+
+const idle: AIToolApprovalState = { failed: false, isSending: false };
+
+/** The agent's reason, as a sentence, then what allowing it shares. */
+export const approvalLines = (approval: AIToolApprovalData) => {
+  const lines: string[] = [];
+  const reason = approval.reason?.trim();
+  if (reason) {
+    const sentence = reason[0].toUpperCase() + reason.slice(1);
+    lines.push(/[.!?…]$/.test(sentence) ? sentence : `${sentence}.`);
+  }
+  if (approval.message) lines.push(approval.message);
+  return lines;
+};
+
+export type AIToolApprovalCardProps = {
+  approval: AIToolApprovalData;
+  /** Called with the person's answer. */
+  onDecide: (allowed: boolean) => void;
+  state?: AIToolApprovalState;
+};
+
+/**
+ * Asks the person a tool call's question, such as "Share your location?", with the agent's
+ * reason and what allowing it shares, and an Allow and a Don't Allow button. Used inline under
+ * a step by `AIToolApproval`, and on its own, such as on a voice call.
+ */
+export const AIToolApprovalCard = ({
+  approval,
+  onDecide,
+  state = idle,
+}: AIToolApprovalCardProps) => {
+  const { t } = useAITranslation();
+  const {
+    theme: { colors, messageParts },
+  } = useTheme();
+  const card = messageParts?.approvalCard;
+
+  return (
+    <View
+      accessibilityState={{ busy: state.isSending }}
+      style={[
+        styles.container,
+        { backgroundColor: colors.white, borderColor: colors.grey_gainsboro },
+        card?.container,
+      ]}
+      testID='ai-tool-approval-card'
+    >
+      <View style={styles.text}>
+        <Text style={[styles.title, { color: colors.black }, card?.title]}>{approval.title}</Text>
+        {approvalLines(approval).map((line) => (
+          <Text key={line} style={[styles.message, { color: colors.grey }, card?.message]}>
+            {line}
+          </Text>
+        ))}
+      </View>
+      <View style={styles.actions}>
+        <Pressable
+          accessibilityRole='button'
+          accessibilityState={{ disabled: state.isSending }}
+          disabled={state.isSending}
+          onPress={() => onDecide(true)}
+          style={({ pressed }) => [
+            styles.button,
+            { backgroundColor: colors.accent_blue, opacity: pressed ? 0.7 : 1 },
+            card?.allowButton,
+          ]}
+        >
+          <Text style={[styles.buttonText, { color: colors.white }, card?.allowButtonText]}>
+            {approval.allowTitle ?? t('Allow')}
+          </Text>
+        </Pressable>
+        <Pressable
+          accessibilityRole='button'
+          accessibilityState={{ disabled: state.isSending }}
+          disabled={state.isSending}
+          onPress={() => onDecide(false)}
+          style={({ pressed }) => [
+            styles.button,
+            styles.declineButton,
+            { borderColor: colors.grey_gainsboro, opacity: pressed ? 0.7 : 1 },
+            card?.declineButton,
+          ]}
+        >
+          <Text style={[styles.buttonText, { color: colors.black }, card?.declineButtonText]}>
+            {approval.declineTitle ?? t("Don't Allow")}
+          </Text>
+        </Pressable>
+        {state.isSending ? <ActivityIndicator color={colors.grey} size='small' /> : null}
+      </View>
+      {state.failed ? (
+        <Text
+          accessibilityRole='alert'
+          style={[styles.failure, { color: colors.accent_red }, card?.failure]}
+        >
+          {t("Your answer couldn't be sent. Try again.")}
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+export type AIToolApprovalProps = {
+  part: AIToolCallPart;
+  /** Who answers on this device. Defaults to the one of the nearest `AIToolApproverProvider`. */
+  approver?: AIToolApprover;
+  /** Renders the question, instead of `AIToolApprovalCard`. */
+  children?: (
+    approval: AIToolApprovalData,
+    state: AIToolApprovalState,
+    decide: (allowed: boolean) => void,
+  ) => ReactNode;
+};
+
+/**
+ * Asks the question of a tool call that waits for this person on this device, and sends their
+ * answer with `approver.decide`. Until the call's step changes the buttons wait; a failed send
+ * lets them answer again. Renders nothing for a call that does not wait for them here.
+ */
+export const AIToolApproval = ({ approver: approverProp, children, part }: AIToolApprovalProps) => {
+  const approver = useAIToolApprover(approverProp);
+  // Kept by call, not by view: a list that reuses or remounts the row keeps the answer sent.
+  const key = `approval:${part.id}`;
+  const state = useCallState(key, idle);
+  const isWaiting =
+    !!approver && !!part.approval && isAwaitingApproval(part, approver.userId, approver.clientId);
+  // Once the call's step changes, there is nothing left to keep.
+  useEffect(() => {
+    if (!isWaiting) setCallState(key, idle, idle);
+  }, [isWaiting, key]);
+
+  if (!approver || !part.approval || !isWaiting) return null;
+
+  const decide = (allowed: boolean) => {
+    // Read where it stands now: a second tap in the same frame must not answer twice.
+    if (callStateOf(key, idle).isSending) return;
+    setCallState(key, { failed: false, isSending: true }, idle);
+    approver
+      .decide(part, allowed)
+      .catch(() => setCallState(key, { failed: true, isSending: false }, idle));
+  };
+
+  return (
+    <>
+      {children ? (
+        children(part.approval, state, decide)
+      ) : (
+        <AIToolApprovalCard approval={part.approval} onDecide={decide} state={state} />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  actions: { alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+  button: {
+    alignItems: 'center',
+    borderRadius: 9999,
+    justifyContent: 'center',
+    minHeight: 36,
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+  },
+  buttonText: { fontSize: primitives.typographyFontSizeSm, fontWeight: '600' },
+  container: { borderRadius: 16, borderWidth: 1, gap: 12, padding: 12 },
+  declineButton: { borderWidth: 1 },
+  failure: { fontSize: primitives.typographyFontSizeXs },
+  message: {
+    fontSize: primitives.typographyFontSizeXs,
+    lineHeight: primitives.typographyLineHeightNormal,
+  },
+  text: { gap: 4 },
+  title: {
+    fontSize: primitives.typographyFontSizeSm,
+    fontWeight: '600',
+    lineHeight: primitives.typographyLineHeightNormal,
+  },
+});

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

@@ -0,0 +1,279 @@
+import React, { type ReactNode, useEffect } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { callStateOf, setCallState, useCallState } from './callStates';
+import { isAuthorizationExpired, isAwaitingAuthorization } from './parseMessageParts';
+import type { AIToolAuthorizationData, AIToolCallPart } from './types';
+
+import { useAITranslation, useTheme } from '../contexts';
+import { useNow } from '../internal/format';
+import { primitives } from '../internal/tokens';
+import {
+  type AIToolApprover,
+  type AIToolAuthorizer,
+  useAIToolApprover,
+} from '../tool-calls/AIToolApprover';
+
+/** Where the person's answer to a sign-in is. */
+export type AIToolAuthorizationState = {
+  /** The sign-in couldn't be opened, and the person can try again. */
+  connectFailed: boolean;
+  /** Their "not now" couldn't be sent, and the person can answer again. */
+  declineFailed: boolean;
+  /** The sign-in is open, or done and the call's step hasn't changed yet. */
+  isConnecting: boolean;
+  /** Their "not now" is on its way, or arrived and the call's step hasn't changed yet. */
+  isDeclining: boolean;
+};
+
+const idle: AIToolAuthorizationState = {
+  connectFailed: false,
+  declineFailed: false,
+  isConnecting: false,
+  isDeclining: false,
+};
+
+export type AIToolAuthorizationCardProps = {
+  authorization: AIToolAuthorizationData;
+  onConnect: () => void;
+  onDecline: () => void;
+  state?: AIToolAuthorizationState;
+};
+
+/**
+ * Asks the person to sign in at a provider a tool call needs, such as "Connect Linear", with a
+ * Connect and a Not now button. Once the sign-in is over it says how it ended (connected,
+ * declined, expired or failed), and a sign-in past its expiry can no longer be opened.
+ */
+export const AIToolAuthorizationCard = ({
+  authorization,
+  onConnect,
+  onDecline,
+  state = idle,
+}: AIToolAuthorizationCardProps) => {
+  const { t } = useAITranslation();
+  const {
+    theme: { colors, messageParts },
+  } = useTheme();
+  const card = messageParts?.authorizationCard;
+  const open = authorization.status === undefined;
+  // Re-checked every few seconds while it is open, so it turns expired on its own.
+  const now = useNow(open && authorization.expiresAt !== undefined, 5000);
+  const expired = isAuthorizationExpired(authorization, now);
+  const provider = authorization.providerName ?? authorization.provider;
+  const busy = state.isConnecting || state.isDeclining;
+
+  const outcome = (() => {
+    if (expired) return t('This sign-in has expired.');
+    switch (authorization.status) {
+      case undefined:
+        return undefined;
+      case 'connected':
+        return t('Connected to {{ provider }}', { provider });
+      case 'declined':
+        return t('Not connected');
+      default:
+        return t("The sign-in didn't complete.");
+    }
+  })();
+
+  const failure = (() => {
+    if (state.connectFailed) return t("The sign-in couldn't be opened. Try again.");
+    if (state.declineFailed) return t("Your answer couldn't be sent. Try again.");
+    return undefined;
+  })();
+
+  return (
+    <View
+      accessibilityState={{ busy }}
+      style={[
+        styles.container,
+        { backgroundColor: colors.white, borderColor: colors.grey_gainsboro },
+        card?.container,
+      ]}
+      testID='ai-tool-authorization-card'
+    >
+      <View style={styles.text}>
+        <Text style={[styles.title, { color: colors.black }, card?.title]}>
+          {authorization.title}
+        </Text>
+        {authorization.message ? (
+          <Text style={[styles.message, { color: colors.grey }, card?.message]}>
+            {authorization.message}
+          </Text>
+        ) : null}
+      </View>
+      {outcome ? (
+        <Text style={[styles.message, { color: colors.grey }, card?.outcome]}>{outcome}</Text>
+      ) : null}
+      {open ? (
+        <View style={styles.actions}>
+          {!expired ? (
+            <Pressable
+              accessibilityRole='button'
+              accessibilityState={{ disabled: busy }}
+              disabled={busy}
+              onPress={onConnect}
+              style={({ pressed }) => [
+                styles.button,
+                { backgroundColor: colors.accent_blue, opacity: pressed ? 0.7 : 1 },
+                card?.connectButton,
+              ]}
+            >
+              <Text style={[styles.buttonText, { color: colors.white }, card?.connectButtonText]}>
+                {state.isConnecting ? t('Connecting...') : t('Connect')}
+              </Text>
+            </Pressable>
+          ) : null}
+          {/* Left enabled while the sign-in is open, so one that never comes back leaves a way out. */}
+          <Pressable
+            accessibilityRole='button'
+            accessibilityState={{ disabled: state.isDeclining }}
+            disabled={state.isDeclining}
+            onPress={onDecline}
+            style={({ pressed }) => [
+              styles.button,
+              styles.declineButton,
+              { borderColor: colors.grey_gainsboro, opacity: pressed ? 0.7 : 1 },
+              card?.declineButton,
+            ]}
+          >
+            <Text style={[styles.buttonText, { color: colors.black }, card?.declineButtonText]}>
+              {t('Not now')}
+            </Text>
+          </Pressable>
+          {busy ? <ActivityIndicator color={colors.grey} size='small' /> : null}
+        </View>
+      ) : null}
+      {failure ? (
+        <Text
+          accessibilityRole='alert'
+          style={[styles.failure, { color: colors.accent_red }, card?.failure]}
+        >
+          {failure}
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+/**
+ * The sign-in this person is asked for on `call` here: one the call waits for them to finish,
+ * of a kind this device opens, and only when they can sign in on it.
+ */
+export const signInFor = (call: AIToolCallPart, approver: AIToolApprover | undefined) => {
+  if (!approver?.authorizer || !isAwaitingAuthorization(call, approver.userId)) return;
+  return call.authorization?.type === 'oauth' ? call.authorization : undefined;
+};
+
+export type AIToolAuthorizationProps = {
+  part: AIToolCallPart;
+  /** Who answers on this device, with the `authorizer` the sign-in needs. Defaults to the one of the nearest `AIToolApproverProvider`. */
+  approver?: AIToolApprover;
+  /** Renders the sign-in, instead of `AIToolAuthorizationCard`. */
+  children?: (
+    authorization: AIToolAuthorizationData,
+    state: AIToolAuthorizationState,
+    actions: { connect: () => void; decline: () => void },
+  ) => ReactNode;
+};
+
+/**
+ * Asks for the sign-in of a tool call that waits for this person, and runs it with
+ * `approver.authorizer`. Renders nothing for a call that does not wait for them, or without an
+ * authorizer.
+ */
+export const AIToolAuthorization = ({
+  approver: approverProp,
+  children,
+  part,
+}: AIToolAuthorizationProps) => {
+  const approver = useAIToolApprover(approverProp);
+  // Kept by call, not by view: a list that reuses or remounts the row keeps the sign-in going.
+  const key = `authorization:${part.id}`;
+  const state = useCallState(key, idle);
+  const authorization = signInFor(part, approver);
+  const authorizer = approver?.authorizer;
+  const isWaiting = !!authorization && !!authorizer;
+  // Once the call's step changes, there is nothing left to keep.
+  useEffect(() => {
+    if (!isWaiting) setCallState(key, idle, idle);
+  }, [isWaiting, key]);
+
+  if (!authorization || !authorizer) return null;
+
+  const update = (next: AIToolAuthorizationState) => setCallState(key, next, idle);
+
+  const sendDecline = (signIn: AIToolAuthorizer) => {
+    update({ ...idle, isDeclining: true });
+    signIn.decline(part).catch(() => update({ ...idle, declineFailed: true }));
+  };
+
+  const connect = (signIn: AIToolAuthorizer) => {
+    // Read where it stands now: a second tap in the same frame must not open it twice.
+    const now = callStateOf(key, idle);
+    if (now.isConnecting || now.isDeclining) return;
+    update({ ...idle, isConnecting: true });
+    signIn.connect(part).then(
+      // Your backend has the provider's answer before the sign-in comes back, and its change to
+      // the step hides this. Until then it says it is connecting, unless the provider did not
+      // connect them. A sign-in the person closed can't be opened again, so it declines.
+      (connected) => {
+        if (connected === 'closed') sendDecline(signIn);
+        else if (!connected) update(idle);
+      },
+      () => update({ ...idle, connectFailed: true }),
+    );
+  };
+
+  const decline = (signIn: AIToolAuthorizer) => {
+    if (callStateOf(key, idle).isDeclining) return;
+    sendDecline(signIn);
+  };
+
+  const actions = {
+    connect: () => connect(authorizer),
+    decline: () => decline(authorizer),
+  };
+
+  return (
+    <>
+      {children ? (
+        children(authorization, state, actions)
+      ) : (
+        <AIToolAuthorizationCard
+          authorization={authorization}
+          onConnect={actions.connect}
+          onDecline={actions.decline}
+          state={state}
+        />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  actions: { alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+  button: {
+    alignItems: 'center',
+    borderRadius: 9999,
+    justifyContent: 'center',
+    minHeight: 36,
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+  },
+  buttonText: { fontSize: primitives.typographyFontSizeSm, fontWeight: '600' },
+  container: { borderRadius: 16, borderWidth: 1, gap: 12, padding: 12 },
+  declineButton: { borderWidth: 1 },
+  failure: { fontSize: primitives.typographyFontSizeXs },
+  message: {
+    fontSize: primitives.typographyFontSizeXs,
+    lineHeight: primitives.typographyLineHeightNormal,
+  },
+  text: { gap: 4 },
+  title: {
+    fontSize: primitives.typographyFontSizeSm,
+    fontWeight: '600',
+    lineHeight: primitives.typographyLineHeightNormal,
+  },
+});

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+
+import { isDeclined, isToolCallFinished } from './parseMessageParts';
+import type { AIToolCallPart } from './types';
+
+import { useAITranslation, useTheme } from '../contexts';
+import { useAIIcons } from '../icons';
+import { formatCallDuration } from '../internal/format';
+import { Shimmer } from '../internal/Shimmer';
+import { primitives } from '../internal/tokens';
+
+export type AIToolCallProps = {
+  part: AIToolCallPart;
+};
+
+/**
+ * One tool call of a reply: what it is doing (its `displayTitle`, else its name), how it is
+ * going, and how long it took once it is done.
+ */
+export const AIToolCall = ({ part }: AIToolCallProps) => {
+  const { t, userLanguage } = useAITranslation();
+  const {
+    theme: { colors, messageParts },
+  } = useTheme();
+  const { Cancelled, Check, Device, Failed, HandRaised, Key } = useAIIcons();
+
+  const title = part.displayTitle ?? part.name.replace(/_/g, ' ');
+  const detail = (() => {
+    if (isDeclined(part)) return part.summary ?? t('Declined');
+    switch (part.status) {
+      case 'awaiting_approval':
+        return part.summary ?? t('Waiting for approval');
+      case 'awaiting_authorization':
+        return part.summary ?? t('Waiting for you to sign in');
+      case 'awaiting_client':
+        return part.summary ?? t('Waiting for the device');
+      case 'failed':
+        return part.summary ?? t("Didn't complete");
+      case 'cancelled':
+        return part.summary ?? t('Cancelled');
+      default:
+        return part.summary;
+    }
+  })();
+
+  // A status this SDK doesn't know reads as still in progress.
+  const icon = (() => {
+    switch (part.status) {
+      case 'awaiting_approval':
+        return <HandRaised color={colors.accent_blue} />;
+      case 'awaiting_authorization':
+        return <Key color={colors.accent_blue} />;
+      case 'awaiting_client':
+        return <Device color={colors.accent_blue} />;
+      case 'completed':
+        return <Check color={messageParts?.successColor ?? colors.accent_blue} />;
+      case 'failed':
+        return <Failed color={colors.accent_red} />;
+      case 'cancelled':
+        return <Cancelled color={colors.grey} />;
+      default:
+        return <ActivityIndicator color={colors.accent_blue} size='small' style={styles.spinner} />;
+    }
+  })();
+
+  const finished = isToolCallFinished(part.status);
+  const waiting = part.status.startsWith('awaiting_');
+
+  return (
+    <View style={[styles.container, messageParts?.toolCall?.container]} testID='ai-tool-call'>
+      <View style={styles.icon}>{icon}</View>
+      <View style={styles.text}>
+        <Shimmer active={waiting} style={styles.titleShimmer}>
+          <Text style={[styles.title, { color: colors.black }, messageParts?.toolCall?.title]}>
+            {title}
+          </Text>
+        </Shimmer>
+        {detail ? (
+          <Text
+            numberOfLines={2}
+            style={[styles.detail, { color: colors.grey }, messageParts?.toolCall?.detail]}
+          >
+            {detail}
+          </Text>
+        ) : null}
+      </View>
+      {finished && part.durationMs !== undefined ? (
+        <Text style={[styles.duration, { color: colors.grey }, messageParts?.toolCall?.duration]}>
+          {formatCallDuration(part.durationMs / 1000, userLanguage)}
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { alignItems: 'flex-start', flexDirection: 'row', gap: 8 },
+  detail: {
+    fontSize: primitives.typographyFontSizeXs,
+    lineHeight: primitives.typographyLineHeightTight,
+  },
+  duration: {
+    fontSize: primitives.typographyFontSizeXs,
+    fontVariant: ['tabular-nums'],
+    lineHeight: primitives.typographyLineHeightNormal,
+  },
+  icon: { marginTop: 2 },
+  // The platform spinner, sized to the 16 the icons are drawn at.
+  spinner: { height: 16, transform: [{ scale: 0.8 }], width: 16 },
+  text: { flex: 1, gap: 2, minWidth: 0 },
+  title: {
+    fontSize: primitives.typographyFontSizeSm,
+    lineHeight: primitives.typographyLineHeightNormal,
+  },
+  titleShimmer: { alignSelf: 'flex-start' },
+});

package/src/ai-components/message-parts/callStates.ts

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+
+import { StateStore } from '@stream-io/state-store';
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+type CallStates = { calls: Readonly<Record<string, unknown>> };
+
+// Where each call's question stands on this device, such as an answer on its way, kept apart from
+// the views that show it: a list that reuses or remounts a row must neither hand a question's
+// buttons back while its answer is on its way, nor show one call's state on another call.
+const callStates = new StateStore<CallStates>({ calls: {} });
+
+/** Where the question `key` names stands, or `initial` when nothing happened to it here. */
+export const callStateOf = <T>(key: string, initial: T): T => {
+  const { calls } = callStates.getLatestValue();
+  return key in calls ? (calls[key] as T) : initial;
+};
+
+/** Sets where the question `key` names stands. `initial` forgets it. */
+export const setCallState = <T>(key: string, next: T, initial: T) => {
+  const { calls } = callStates.getLatestValue();
+  if (next === initial) {
+    if (!(key in calls)) return;
+    const { [key]: _forgotten, ...rest } = calls;
+    callStates.partialNext({ calls: rest });
+  } else {
+    callStates.partialNext({ calls: { ...calls, [key]: next } });
+  }
+};
+
+/** Where the question `key` names stands, following it, whichever view shows it. */
+export const useCallState = <T>(key: string, initial: T): T => {
+  const selector = useMemo(
+    () =>
+      ({ calls }: CallStates) => ({
+        state: (key in calls ? calls[key] : initial) as T,
+      }),
+    [initial, key],
+  );
+  return useStateStore(callStates, selector).state;
+};
+
+/** Forgets every question's state, for tests that reuse calls. */
+export const forgetCallStates = () => callStates.next({ calls: {} });

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

@@ -0,0 +1,6 @@
+export * from './types';
+export * from './parseMessageParts';
+export * from './AIMessageParts';
+export * from './AIToolApproval';
+export * from './AIToolCall';
+export * from './AIToolAuthorization';