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

package/src/ai-components/icons.ts

@@ -0,0 +1,101 @@
+import { type ComponentType, useMemo } from 'react';
+
+import { useTheme } from './contexts/theme-context';
+import {
+  ArchiveIcon,
+  ArrowDownIcon,
+  AudioIcon,
+  CancelledIcon,
+  CheckIcon,
+  ChevronIcon,
+  CopiedIcon,
+  CopyIcon,
+  DeviceIcon,
+  EditIcon,
+  FailedIcon,
+  FileIcon,
+  HandRaisedIcon,
+  ImageIcon,
+  InfoIcon,
+  KeyIcon,
+  PdfIcon,
+  ReasoningIcon,
+  RegenerateIcon,
+  ShareIcon,
+  ThumbsDownFilledIcon,
+  ThumbsDownIcon,
+  ThumbsUpFilledIcon,
+  ThumbsUpIcon,
+  VideoIcon,
+} from './internal/icons/AgentIcons';
+
+/**
+ * What an icon of the agent replies' views is drawn with. An icon is decorative (the text or
+ * label beside it says what it means), so one of your own hides itself from screen readers, and
+ * one that points somewhere, such as `Chevron`, mirrors itself in a right-to-left layout.
+ */
+export type AIIconProps = { color: string; size?: number };
+
+export type AIIcon = ComponentType<AIIconProps>;
+
+/** The icons of the agent replies' views, by what they stand for. */
+export const defaultAIIcons = {
+  /** A file of an archive type, such as ZIP, on its attachment. */
+  Archive: ArchiveIcon,
+  /** The button back to the latest message of a conversation. */
+  ArrowDown: ArrowDownIcon,
+  /** An audio file, on its attachment. */
+  Audio: AudioIcon,
+  /** A tool call that was cancelled or declined. */
+  Cancelled: CancelledIcon,
+  /** A tool call that completed. */
+  Check: CheckIcon,
+  /** A reasoning step's fold. */
+  Chevron: ChevronIcon,
+  /** The copy action, for a moment after it copied. */
+  Copied: CopiedIcon,
+  /** The copy action. */
+  Copy: CopyIcon,
+  /** A tool call that waits for the person's device. */
+  Device: DeviceIcon,
+  /** The edit action on the person's message. */
+  Edit: EditIcon,
+  /** A tool call that didn't complete. */
+  Failed: FailedIcon,
+  /** A file of a type without an icon of its own, on its attachment. */
+  File: FileIcon,
+  /** A tool call that waits for the person's approval. */
+  HandRaised: HandRaisedIcon,
+  /** An image shown as a file, such as one without a URL, on its attachment. */
+  Image: ImageIcon,
+  /** A step this version can't show. */
+  Info: InfoIcon,
+  /** A tool call that waits for the person to sign in. */
+  Key: KeyIcon,
+  /** A PDF, on its attachment. */
+  Pdf: PdfIcon,
+  /** A reasoning step. */
+  Reasoning: ReasoningIcon,
+  /** The regenerate action. */
+  Regenerate: RegenerateIcon,
+  /** The share action. */
+  Share: ShareIcon,
+  /** The bad response rating, and the same once chosen. */
+  ThumbsDown: ThumbsDownIcon,
+  ThumbsDownFilled: ThumbsDownFilledIcon,
+  /** The good response rating, and the same once chosen. */
+  ThumbsUp: ThumbsUpIcon,
+  ThumbsUpFilled: ThumbsUpFilledIcon,
+  /** A video, on its attachment. */
+  Video: VideoIcon,
+} satisfies Record<string, AIIcon>;
+
+export type AIIcons = Record<keyof typeof defaultAIIcons, AIIcon>;
+
+/** The icons to draw with: the theme's `icons`, over the defaults. */
+export const useAIIcons = (): AIIcons => {
+  const {
+    theme: { icons },
+  } = useTheme();
+  return useMemo(() => ({ ...defaultAIIcons, ...icons }), [icons]);
+};

package/src/ai-components/index.ts

@@ -7,6 +7,16 @@ export * from './StreamingMessageView';
 export * from './AITypingIndicatorView';
 export * from './voice-visualization';
 
+// agent replies
+export * from './conversation';
+export * from './generative-ui';
+export * from './icons';
+export * from './message';
+export * from './message-parts';
+export * from './reasoning';
+export * from './suggestions';
+export * from './tool-calls';
+
 // components
 export * from './components';
 

package/src/ai-components/internal/Shimmer.tsx

@@ -0,0 +1,40 @@
+import React, { type PropsWithChildren } from 'react';
+import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
+
+import { NativeShimmerView } from '../../components/UIComponents/NativeShimmerView';
+import { useTheme } from '../contexts';
+
+type ShimmerProps = PropsWithChildren<{ active?: boolean; style?: StyleProp<ViewStyle> }>;
+
+/**
+ * Sweeps the native shimmer across its content while `active`, for something still in progress.
+ * The native shimmer paints behind its children, so it is laid over the content instead, with a
+ * transparent base: the highlight has to cross the glyphs, which would otherwise hide it.
+ */
+export const Shimmer = ({ active = true, children, style }: ShimmerProps) => {
+  const {
+    theme: {
+      colors: { shimmer },
+    },
+  } = useTheme();
+
+  return (
+    <View style={style}>
+      {children}
+      {active ? (
+        <NativeShimmerView
+          baseColor='transparent'
+          duration={1200}
+          gradientColor={shimmer}
+          pointerEvents='none'
+          style={[StyleSheet.absoluteFill, styles.shimmer]}
+        />
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  // The native highlight band is soft and wide, so it is kept fairly strong over the text.
+  shimmer: { opacity: 0.8 },
+});

package/src/ai-components/internal/format.ts

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+
+// Hermes on iOS formats units with Foundation, which ignores the narrow width ("1 sec"), so
+// there the units are written the way they are without Intl.
+const honoursNarrowUnits = (() => {
+  try {
+    return (
+      new Intl.NumberFormat('en', { style: 'unit', unit: 'second', unitDisplay: 'narrow' }).format(
+        1,
+      ) === '1s'
+    );
+  } catch {
+    return false;
+  }
+})();
+
+// One formatter per locale and unit: making one costs far more than formatting, and every step of
+// every reply formats its duration each time it renders.
+const formatters = new Map<string, Intl.NumberFormat | null>();
+const formatterFor = (locale: string, name: 'minute' | 'second') => {
+  const key = `${locale}:${name}`;
+  let formatter = formatters.get(key);
+  if (formatter === undefined) {
+    try {
+      formatter = new Intl.NumberFormat(locale, {
+        style: 'unit',
+        unit: name,
+        unitDisplay: 'narrow',
+      });
+    } catch {
+      formatter = null;
+    }
+    formatters.set(key, formatter);
+  }
+  return formatter;
+};
+
+const unit = (locale: string, value: number, name: 'minute' | 'second') => {
+  const formatter = honoursNarrowUnits ? formatterFor(locale, name) : null;
+  return formatter ? formatter.format(value) : `${value}${name === 'minute' ? 'm' : 's'}`;
+};
+
+/** A whole number of seconds as minutes and seconds, in narrow units: "7s", "1m 5s". */
+export const formatMinutesAndSeconds = (totalSeconds: number, locale = 'en') => {
+  const seconds = Math.max(0, Math.floor(totalSeconds));
+  const minutes = Math.floor(seconds / 60);
+  const rest = seconds % 60;
+  if (minutes === 0) return unit(locale, rest, 'second');
+  if (rest === 0) return unit(locale, minutes, 'minute');
+  return `${unit(locale, minutes, 'minute')} ${unit(locale, rest, 'second')}`;
+};
+
+/** A tool call's duration: tenths below a second ("0.4s"), then minutes and seconds. */
+export const formatCallDuration = (durationSeconds: number, locale = 'en') =>
+  durationSeconds < 1
+    ? unit(locale, Math.round(durationSeconds * 10) / 10, 'second')
+    : formatMinutesAndSeconds(Math.round(durationSeconds), locale);
+
+/** `Date.now()`, refreshed every `intervalMs` while `active`. */
+export const useNow = (active: boolean, intervalMs = 1000) => {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!active) return;
+    setNow(Date.now());
+    const timer = setInterval(() => setNow(Date.now()), intervalMs);
+    return () => clearInterval(timer);
+  }, [active, intervalMs]);
+  return now;
+};

package/src/ai-components/internal/hooks/useBottomSafeArea.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+
+/** The bottom safe area, or 0 without a `SafeAreaProvider` (where `useSafeAreaInsets` throws). */
+export const useBottomSafeArea = () => useContext(SafeAreaInsetsContext)?.bottom ?? 0;

package/src/ai-components/internal/icons/AgentIcons.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { I18nManager } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+// The agent replies' icons, on a 20 × 20 grid with a 1.5 stroke. Decorative: the text beside each
+// one, or its button's label, says what it means.
+
+export type AgentIconProps = { color: string; size?: number };
+
+const circle =
+  'M17.5 10C17.5 14.14 14.14 17.5 10 17.5C5.86 17.5 2.5 14.14 2.5 10C2.5 5.86 5.86 2.5 10 2.5C14.14 2.5 17.5 5.86 17.5 10Z';
+
+type StrokeIconOptions = {
+  /** Filled with its colour as well as drawn, such as a chosen rating. */
+  filled?: boolean;
+  /** Flipped in a right-to-left layout, for one that points somewhere. */
+  mirrorsInRTL?: boolean;
+  /** Turned around the grid's centre, in degrees. */
+  rotation?: number;
+};
+
+const strokeIcon = (
+  d: string,
+  { filled = false, mirrorsInRTL = false, rotation }: StrokeIconOptions = {},
+) => {
+  const Icon = ({ color, size = 16 }: AgentIconProps) => (
+    <Svg
+      accessibilityElementsHidden
+      height={size}
+      importantForAccessibility='no-hide-descendants'
+      viewBox='0 0 20 20'
+      width={size}
+    >
+      <Path
+        d={d}
+        fill={filled ? color : 'none'}
+        stroke={color}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.5}
+        transform={
+          mirrorsInRTL && I18nManager.isRTL
+            ? 'matrix(-1 0 0 1 20 0)'
+            : rotation
+              ? `rotate(${rotation} 10 10)`
+              : undefined
+        }
+      />
+    </Svg>
+  );
+  return Icon;
+};
+
+export const ReasoningIcon = strokeIcon(
+  'M7.5 15.625H12.5M8.125 18.125H11.875M10 1.875C6.89 1.875 4.375 4.39 4.375 7.5C4.375 9.53 5.45 11.31 7.06 12.3C7.33 12.47 7.5 12.76 7.5 13.08V13.75H12.5V13.08C12.5 12.76 12.67 12.47 12.94 12.3C14.55 11.31 15.625 9.53 15.625 7.5C15.625 4.39 13.11 1.875 10 1.875Z',
+);
+
+// Points down in either direction, so it isn't mirrored.
+export const ArrowDownIcon = strokeIcon('M10 3.75V16.25M4.375 10.625L10 16.25L15.625 10.625');
+
+export const ChevronIcon = strokeIcon('M7.5 4.375L13.125 10L7.5 15.625', { mirrorsInRTL: true });
+
+export const CheckIcon = strokeIcon('M4.375 10.625L8.125 14.375L15.625 5.625');
+
+export const FailedIcon = strokeIcon(`M10 6.25V10.625M10 13.75H10.006${circle}`);
+
+export const CancelledIcon = strokeIcon(`M6.875 10H13.125${circle}`);
+
+export const InfoIcon = strokeIcon(`M10 9.375V13.75M10 6.25H10.006${circle}`);
+
+export const HandRaisedIcon = strokeIcon(
+  'M10 5V9.375M10 5C10 4.31 10.56 3.75 11.25 3.75C11.94 3.75 12.5 4.31 12.5 5V9.375M10 5V3.75C10 3.06 9.44 2.5 8.75 2.5C8.06 2.5 7.5 3.06 7.5 3.75V5M12.5 6.25C12.5 5.56 13.06 5 13.75 5C14.44 5 15 5.56 15 6.25V11.875C15 15.03 12.84 17.5 10 17.5C7.82 17.5 6.43 16.37 5.42 14.43L3.92 11.53C3.6 10.92 3.84 10.17 4.45 9.86C5 9.58 5.67 9.73 6.04 10.23L7.5 12.19V5M7.5 5V9.375',
+);
+
+export const KeyIcon = strokeIcon(
+  'M12.5 5.625C13.19 5.625 13.75 6.185 13.75 6.875M16.875 6.875C16.875 9.635 14.635 11.875 11.875 11.875C11.37 11.875 10.88 11.8 10.42 11.66L8.75 13.125H7.5V14.375H6.25V15.625H5V16.875H3.125V14.88L8.34 9.66C8.2 9.2 8.125 8.71 8.125 8.125C8.125 4.94 10.37 1.875 13.75 2.5C15.63 2.85 16.875 4.69 16.875 6.875Z',
+);
+
+export const DeviceIcon = strokeIcon(
+  'M8.125 15H11.875M6.25 18.125H13.75C14.44 18.125 15 17.565 15 16.875V3.125C15 2.435 14.44 1.875 13.75 1.875H6.25C5.56 1.875 5 2.435 5 3.125V16.875C5 17.565 5.56 18.125 6.25 18.125Z',
+);
+
+// A message's actions.
+
+export const CopyIcon = strokeIcon(
+  'M13.125 13.125H16.875V3.125H6.875V6.875M3.125 6.875H13.125V16.875H3.125V6.875Z',
+);
+
+export const CopiedIcon = strokeIcon('M3.125 11.25L7.5 15.625L17.5 5.625');
+
+export const ShareIcon = strokeIcon(
+  'M13.125 6.25L10 3.125M10 3.125L6.875 6.25M10 3.125V12.5M6.875 8.75H5C4.31 8.75 3.75 9.31 3.75 10V15.625C3.75 16.315 4.31 16.875 5 16.875H15C15.69 16.875 16.25 16.315 16.25 15.625V10C16.25 9.31 15.69 8.75 15 8.75H13.125',
+);
+
+export const RegenerateIcon = strokeIcon(
+  'M13.125 7.5H16.875M16.875 7.5V3.75M16.875 7.5L14.67 5.29C13.39 4.01 11.65 3.29 9.84 3.28C8.03 3.27 6.29 3.97 5 5.23M6.875 12.5H3.125M3.125 12.5V16.25M3.125 12.5L5.33 14.71C6.61 15.99 8.35 16.71 10.16 16.72C11.97 16.73 13.71 16.03 15 14.77',
+);
+
+export const EditIcon = strokeIcon(
+  'M10.625 5L15 9.375M7.24 16.875H3.75C3.58 16.875 3.43 16.81 3.31 16.69C3.19 16.57 3.125 16.42 3.125 16.25V12.76C3.125 12.59 3.19 12.43 3.31 12.32L12.94 2.68C13.06 2.57 13.22 2.5 13.38 2.5C13.55 2.5 13.71 2.57 13.83 2.68L17.32 6.17C17.43 6.29 17.5 6.45 17.5 6.61C17.5 6.78 17.43 6.94 17.32 7.06L7.68 16.69C7.57 16.81 7.41 16.875 7.24 16.875Z',
+);
+
+export const FileIcon = strokeIcon(
+  'M11.875 2.5H4.375C4.21 2.5 4.05 2.57 3.93 2.68C3.82 2.8 3.75 2.96 3.75 3.125V16.875C3.75 17.04 3.82 17.2 3.93 17.32C4.05 17.43 4.21 17.5 4.375 17.5H15.625C15.79 17.5 15.95 17.43 16.07 17.32C16.18 17.2 16.25 17.04 16.25 16.875V6.875M11.875 2.5L16.25 6.875M11.875 2.5V6.875H16.25',
+);
+
+const thumb =
+  'M5.625 8.75V16.25M5.625 8.75H3.75C3.405 8.75 3.125 9.03 3.125 9.375V15.625C3.125 15.97 3.405 16.25 3.75 16.25H5.625M5.625 8.75L8.75 2.5C9.44 2.5 10.1 2.77 10.59 3.26C11.08 3.75 11.25 4.41 11.25 5.1V6.875H15.94C16.12 6.875 16.29 6.91 16.45 6.99C16.61 7.06 16.75 7.17 16.86 7.3C16.98 7.43 17.06 7.59 17.11 7.75C17.16 7.92 17.17 8.09 17.15 8.27L16.21 15.77C16.17 16.07 16.03 16.34 15.8 16.54C15.58 16.74 15.29 16.85 14.99 16.85H5.625';
+
+export const ThumbsUpIcon = strokeIcon(thumb);
+
+export const ThumbsUpFilledIcon = strokeIcon(thumb, { filled: true });
+
+export const ThumbsDownIcon = strokeIcon(thumb, { rotation: 180 });
+
+export const ThumbsDownFilledIcon = strokeIcon(thumb, { filled: true, rotation: 180 });
+
+// A file's type, on its attachment's tile.
+
+export const PdfIcon = strokeIcon(
+  'M11.875 2.5H4.375C4.21 2.5 4.05 2.57 3.93 2.68C3.82 2.8 3.75 2.96 3.75 3.125V16.875C3.75 17.04 3.82 17.2 3.93 17.32C4.05 17.43 4.21 17.5 4.375 17.5H15.625C15.79 17.5 15.95 17.43 16.07 17.32C16.18 17.2 16.25 17.04 16.25 16.875V6.875M11.875 2.5L16.25 6.875M11.875 2.5V6.875H16.25M6.875 10.625H13.125M6.875 13.75H13.125',
+);
+
+export const ImageIcon = strokeIcon(
+  'M4.43 16.875L13 8.31C13.05 8.25 13.12 8.2 13.2 8.17C13.27 8.14 13.36 8.125 13.44 8.125C13.52 8.125 13.6 8.14 13.68 8.17C13.75 8.2 13.82 8.25 13.88 8.31L16.875 11.3M3.75 3.125H16.25C16.6 3.125 16.875 3.4 16.875 3.75V16.25C16.875 16.6 16.6 16.875 16.25 16.875H3.75C3.4 16.875 3.125 16.6 3.125 16.25V3.75C3.125 3.4 3.4 3.125 3.75 3.125ZM8.75 7.5C8.75 8.19 8.19 8.75 7.5 8.75C6.81 8.75 6.25 8.19 6.25 7.5C6.25 6.81 6.81 6.25 7.5 6.25C8.19 6.25 8.75 6.81 8.75 7.5Z',
+);
+
+export const AudioIcon = strokeIcon(
+  'M3.75 8.125V11.875M6.875 5.625V14.375M10 3.125V16.875M13.125 6.875V13.125M16.25 8.75V11.25',
+);
+
+export const VideoIcon = strokeIcon(
+  'M15.625 8.75L19.375 6.25V13.75L15.625 11.25M2.5 5H15C15.35 5 15.625 5.28 15.625 5.625V14.375C15.625 14.72 15.35 15 15 15H2.5C2.15 15 1.875 14.72 1.875 14.375V5.625C1.875 5.28 2.15 5 2.5 5Z',
+);
+
+export const ArchiveIcon = strokeIcon(
+  'M16.875 7.5V15C16.875 15.17 16.81 15.32 16.69 15.44C16.57 15.56 16.42 15.625 16.25 15.625H3.75C3.58 15.625 3.43 15.56 3.31 15.44C3.19 15.32 3.125 15.17 3.125 15V7.5M8.125 10.625H11.875M2.5 4.375H17.5C17.85 4.375 18.125 4.65 18.125 5V6.875C18.125 7.22 17.85 7.5 17.5 7.5H2.5C2.15 7.5 1.875 7.22 1.875 6.875V5C1.875 4.65 2.15 4.375 2.5 4.375Z',
+);

package/src/ai-components/internal/tokens.ts

@@ -0,0 +1,4 @@
+// The chat SDK's design tokens, as the AI components read them. Straight from the generated file
+// rather than through `theme/index.ts`, which reaches more of the SDK than the AI entry point may.
+// Metro picks the platform's tokens (`StreamTokens.{ios,android,web}.ts`).
+export { primitives } from '../../theme/generated/light/StreamTokens';

package/src/ai-components/internal/uuid.ts

@@ -0,0 +1,17 @@
+// Hermes has no `crypto.randomUUID`. Ported from stream-chat-js's `generateUUIDv4`.
+export const generateUUIDv4 = () => {
+  const bytes = new Uint8Array(16);
+  const crypto = (globalThis as { crypto?: { getRandomValues?: (array: Uint8Array) => void } })
+    .crypto;
+  if (crypto?.getRandomValues) {
+    crypto.getRandomValues(bytes);
+  } else {
+    for (let index = 0; index < bytes.length; index++) {
+      bytes[index] = Math.floor(Math.random() * 256);
+    }
+  }
+  bytes[6] = 0x40 + (bytes[6] % 0x10);
+  bytes[8] = 0x80 + (bytes[8] % 0x40);
+  const hex = Array.from(bytes, (byte) => byte.toString(16).padStart(2, '0')).join('');
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+};

package/src/ai-components/markdown/components/CodeBlock.tsx

@@ -6,16 +6,27 @@ import { parseMermaid } from '../../charts';
 import Chart from '../../charts/Chart';
 import { MarkdownReactiveScrollView } from '../../components';
 import { useStableCallback } from '../../internal/hooks/useStableCallback';
+import { primitives } from '../../internal/tokens';
 import { setClipboardString } from '../../services';
 import { SyntaxHighlighter } from '../../syntax-highlighting';
 import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
 
 export const CodeBlockCopyButton = ({ onPress }: { onPress?: PressableProps['onPress'] }) => (
   <Pressable style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })} onPress={onPress}>
-    <Text style={{ fontSize: 15 }}>{'\u29C9'}</Text>
+    <Text style={{ fontSize: primitives.typographyFontSizeSm }}>{'\u29C9'}</Text>
   </Pressable>
 );
 
+const CHART_LANGUAGES = new Set([
+  'chart',
+  'chartjs',
+  'echarts',
+  'highcharts',
+  'json',
+  'vega-lite',
+  'vegalite',
+]);
+
 const areEqual = (prev: MarkdownComponentProps, next: MarkdownComponentProps) =>
   prev.node.content === next.node.content;
 
@@ -68,7 +79,7 @@ export const CodeBlock = React.memo(({ styles, node }: MarkdownComponentProps) =
     }
   }
 
-  if (node.lang === 'json') {
+  if (node.lang && CHART_LANGUAGES.has(node.lang.toLowerCase())) {
     try {
       const parsed = parseJsonChart(text);
       if (parsed) {

package/src/ai-components/markdown/components/InlineCode.tsx

@@ -8,6 +8,7 @@ export const InlineCode = ({ children, styles }: MarkdownComponentProps) => (
 
 export const renderInlineCode: RuleRenderFunction = ({ node, output, state, styles }) => {
   state.withinText = true;
+  state.withinInlineCode = true;
   return (
     <InlineCode key={state.key} node={node} output={output} state={state} styles={styles}>
       {output(node.content, state)}

package/src/ai-components/markdown/components/Text.tsx

@@ -1,11 +1,15 @@
 import { useMemo } from 'react';
-import { Text } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 
 import type { MarkdownComponentProps, RuleRenderFunction } from '../types';
 
 export const TextUI = ({ children, styles, state }: MarkdownComponentProps) => {
+  // Text in a heading or inline code takes that one's size rather than the body's.
+  const usesBodySize = !state.withinHeading && !state.withinInlineCode;
   const textStyle = useMemo(() => {
-    const style = [styles.text, state.style];
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- left out to inherit the wrapper's size
+    const { fontSize, lineHeight, ...unsized } = StyleSheet.flatten(styles.text) ?? {};
+    const style = [usesBodySize ? styles.text : unsized, state.style];
 
     if (state.withinQuote) {
       style.push(styles.blockQuoteText);
@@ -17,6 +21,7 @@ export const TextUI = ({ children, styles, state }: MarkdownComponentProps) => {
 
     return style;
   }, [
+    usesBodySize,
     state.style,
     state.withinLink,
     state.withinQuote,

package/src/ai-components/markdown/styles.ts

@@ -1,7 +1,18 @@
 import { Dimensions, Platform, StyleSheet } from 'react-native';
 
+import { primitives } from '../internal/tokens';
 import type { Theme } from '../theme';
 
+// The answer's text, from the design tokens: 17 on iOS and 16 on Android.
+const BODY_SIZE = primitives.typographyFontSizeMd;
+
+// A heading, scaled from the body, in semibold.
+const heading = (scale: number) => ({
+  fontSize: Math.round(BODY_SIZE * scale),
+  fontWeight: '600' as const,
+  lineHeight: Math.round(BODY_SIZE * scale * 1.25),
+});
+
 export const getLocalStyles = ({ theme }: { theme: Theme }) => {
   const colors = theme.colors;
 
@@ -40,7 +51,8 @@ export const getLocalStyles = ({ theme }: { theme: Theme }) => {
       fontWeight: '500',
       color: colors.black,
       paddingLeft: 8,
-      lineHeight: 14,
+      fontSize: primitives.typographyFontSizeXs,
+      lineHeight: primitives.typographyLineHeightTight,
     },
     codeBlockWrapper: {
       backgroundColor: colors.code_block,
@@ -58,8 +70,8 @@ export const getLocalStyles = ({ theme }: { theme: Theme }) => {
     codeBlockLineNumberCell: {
       fontFamily: Platform.OS === 'ios' ? 'Courier' : 'Monospace',
       color: colors.grey,
-      paddingVertical: 1, // should be (codeBlock.lineHeight - this.fontSize) / 2
-      fontSize: 12,
+      fontSize: primitives.typographyFontSizeXs,
+      lineHeight: primitives.typographyLineHeightTight,
     },
     codeBlockHeaderContainer: {
       flexDirection: 'row',
@@ -67,7 +79,7 @@ export const getLocalStyles = ({ theme }: { theme: Theme }) => {
       marginBottom: 8,
     },
     codeBlockHeaderTitle: {
-      fontSize: 12,
+      fontSize: primitives.typographyFontSizeXs,
       color: colors.grey,
       fontFamily: Platform.OS === 'ios' ? 'Courier' : 'Monospace',
     },
@@ -78,27 +90,13 @@ export const getLocalStyles = ({ theme }: { theme: Theme }) => {
     em: {
       fontStyle: 'italic',
     },
-    heading: {
-      fontWeight: '200',
-    },
-    heading1: {
-      fontSize: 32,
-    },
-    heading2: {
-      fontSize: 24,
-    },
-    heading3: {
-      fontSize: 18,
-    },
-    heading4: {
-      fontSize: 16,
-    },
-    heading5: {
-      fontSize: 13,
-    },
-    heading6: {
-      fontSize: 11,
-    },
+    heading: heading(1),
+    heading1: heading(2),
+    heading2: heading(1.5),
+    heading3: heading(1.17),
+    heading4: heading(1),
+    heading5: heading(0.83),
+    heading6: heading(0.67),
     hr: {
       backgroundColor: colors.grey_gainsboro,
       height: 1,
@@ -121,7 +119,7 @@ export const getLocalStyles = ({ theme }: { theme: Theme }) => {
       color: colors.accent_red,
       fontFamily: Platform.OS === 'ios' ? 'Courier' : 'Monospace',
       fontWeight: '500',
-      fontSize: 13,
+      fontSize: primitives.typographyFontSizeSm,
       padding: 3,
       paddingHorizontal: 5,
     },
@@ -134,10 +132,12 @@ export const getLocalStyles = ({ theme }: { theme: Theme }) => {
     },
     listItemBullet: {
       fontSize: 20,
-      lineHeight: 20,
+      lineHeight: primitives.typographyLineHeightRelaxed,
     },
     listItemNumber: {
+      fontSize: BODY_SIZE,
       fontWeight: '500',
+      lineHeight: primitives.typographyLineHeightRelaxed,
     },
     listItemText: {
       flex: 0,
@@ -218,6 +218,8 @@ export const getLocalStyles = ({ theme }: { theme: Theme }) => {
     },
     text: {
       color: colors.black,
+      fontSize: BODY_SIZE,
+      lineHeight: primitives.typographyLineHeightRelaxed,
     },
     textRow: {
       flexDirection: 'row',

package/src/ai-components/markdown/types.ts

@@ -48,6 +48,7 @@ export type MarkdownState = State & {
   withinText?: boolean;
   withinQuote?: boolean;
   withinHeading?: boolean;
+  withinInlineCode?: boolean;
   withinLink?: boolean;
   withinList?: boolean;
   withinParagraphWithImage?: boolean;