@vvedantb/native-ui 0.3.17 → 0.4.0

package/README.md

@@ -73,8 +73,12 @@ The root entry exports everything. It still imports `BottomSheetContainer` and `
 | `@vvedantb/native-ui/blur`, `/haptics` | the loaders | `expo-blur`, `expo-haptics` (loaders) |
 | `@vvedantb/native-ui/bottom-sheet` | `BottomSheetContainer` | `@gorhom/bottom-sheet` (import), `expo-blur` (loader) |
 | `@vvedantb/native-ui/date-time` | `DateTimeField` | `@react-native-community/datetimepicker`, `dayjs` (import) |
+| `@vvedantb/native-ui/ai` | The AI chat parts (from 0.4.0): `Conversation`, `Message`, `Reasoning`, `AgentTrace`, `ChainOfThought`, `ActivityStep`, `PromptInput`, `Suggestions`, `Sources`, `FileChip`, `Attachments`, `CodeBlock`, `ResponseText`, `Shimmer`, `Collapsible`, `useStreamingDisclosure` and their parts. See [AI chat](#ai-chat-040). Not on the root entry. | none |
+| `@vvedantb/native-ui/ai-gallery` | `AiChatGallery`, `AiChatSamples` (from 0.4.0) | none |
 
-"Loader" means the `require` inside `try` described above, so the entry bundles and runs without that peer. `@vvedantb/native-ui/gallery` imports the root entry.
+"Loader" means the `require` inside `try` described above, so the entry bundles and runs without that peer. `@vvedantb/native-ui/gallery` imports the root entry; `@vvedantb/native-ui/ai-gallery` imports `/ai` only.
+
+The AI chat parts are only on `/ai`. Metro does not tree-shake by default, so on the root entry they would bundle into every app, with or without a chat.
 
 ```tsx
 import { FloatingTabBar } from "@vvedantb/native-ui/tab-bar";
@@ -193,6 +197,76 @@ From 0.3.12 a toast looks like the web `SonnerToaster` at its default density wi
 
 `@vvedantb/native-ui/gallery` exports `ParityGallery`, a screen that renders these components. Put it in a dev-only route to check them on a device.
 
+## AI chat (0.4.0)
+
+`@vvedantb/native-ui/ai` ports the `@vvedantb/ui` AI elements for touch: the thread, messages, reasoning and agent trace folds, the composer, suggestions, sources, attachments and code. They are generic (no model names, no app logic) and say "the AI", "Thinking…", "Thought for 12s" and "Worked for 12s". They add no package.
+
+```tsx
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+  Message,
+  MessageAction,
+  MessageActionsBar,
+  MessageContent,
+  PromptInput,
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger,
+  ResponseText,
+} from "@vvedantb/native-ui/ai";
+
+<View className="flex-1">
+  <Conversation>
+    <ConversationContent>
+      <Message from="user">
+        <MessageContent>{question}</MessageContent>
+      </Message>
+      <Message from="assistant">
+        <MessageContent>
+          <Reasoning isStreaming={status === "streaming"}>
+            <ReasoningTrigger />
+            <ReasoningContent>{reasoning}</ReasoningContent>
+          </Reasoning>
+          <ResponseText>{answer}</ResponseText>
+        </MessageContent>
+        <MessageActionsBar>
+          <MessageAction kind="copy" onPress={() => copy(answer)} />
+          <MessageAction kind="retry" onPress={retry} />
+        </MessageActionsBar>
+      </Message>
+    </ConversationContent>
+    <ConversationScrollButton />
+  </Conversation>
+  <PromptInput onSubmit={send} status={status} onStop={stop} />
+</View>
+```
+
+| Part | Notes |
+| --- | --- |
+| `Conversation`, `ConversationContent`, `ConversationEmptyState`, `ConversationScrollButton`, `useConversation` | A `ScrollView` that sticks to the bottom: while the reader is within 70 of the end, new and growing messages stay in view. Once they drag up it stops following, and the scroll button shows: a round outline arrow (40, slop to 48), 16 above the bottom, with an opaque fill and no shadow. Pressing it scrolls down (a jump with Reduce Motion). For very long threads, drive a `FlatList` with `useConversation`. |
+| `Message`, `MessageContent`, `MessageActionsBar`, `MessageAction` | A user message is the web primary bubble (radius 16, bottom-right 14, `px-4 py-3`) at the end of the row; an assistant message has no fill. `MessageAction` is a ghost icon button at the web `icon-sm` size (32, slop to 44). `kind` gives the icon and label: "Copy", "Retry", "Good response", "Bad response". `selected` marks chosen feedback. |
+| `Reasoning`, `ReasoningTrigger`, `ReasoningContent`, `useReasoning` | Opens when streaming starts, times the stream and closes once, a second after it stops. The trigger shows a brain, the shimmering "Thinking…", then "Thought for 12s", and a chevron. The content is muted monospace text on the web `bg-surface-secondary/40` panel. Unlike the web, a reader can close it while it streams. |
+| `AgentTrace`, `AgentTraceLine`, `AgentTraceIcon`, `AgentTraceTitle`, `AgentTraceDescription`, `AgentTraceCollapsible*` | One step per line, with an optional fold behind a rail. `AgentTraceTitle shimmer` pulses a running step. Spread `useStreamingDisclosure(isStreaming)` on `AgentTraceCollapsible` to open it while a step streams. |
+| `ActivityStep` | One tool step as a trace line: icon, label, a spinner while `running`, a check when `complete`, a warning on `error`, and a description such as `` `Worked for ${formatElapsed(12)}` ``. |
+| `ChainOfThought` and its parts | Simplified: header, steps with a rail, search-result chips. |
+| `PromptInput`, `PromptInputButton`, `PromptInputSubmit` | The web field surface with a `header` slot (attachments), a field, a `toolbar` slot and the send button. The field grows from one line to 160 high (about 6 lines), then scrolls. Send is primary with text and disabled without. While `status` is `submitted` or `streaming` it is a "Stop" square that calls `onStop`. It sits in a `KeyboardAvoidingView` (padding, on iOS and Android) and pads the safe-area insets: put it last in a full-height column. Under a navigation header, pass the header height as `keyboardVerticalOffset`; above a tab bar, pass `safeBottom={false}`. |
+| `Suggestions`, `Suggestion` | A horizontal row of round chips (or `orientation="vertical"`). `onPress` gets the suggestion text. |
+| `Sources`, `SourcesTrigger`, `SourcesContent`, `Source` | A fold of link rows. A row opens its address with `Linking.openURL`, or hands it to `onPress`. |
+| `FileChip`, `Attachments`, `Attachment` | A monospace file chip (a button with `onOpenFile`), and attachment chips with a media icon or image thumbnail and a labelled remove button. No hover cards and no grid previews. |
+| `CodeBlock`, `CodeBlockCopyButton` | Plain monospace code on the flat panel, scrolling sideways, with the language and a copy button in a header. No highlighting. |
+| `ResponseText` | Plain, selectable reply text with newlines kept. It takes the colour of the `MessageContent` it is in. |
+| `Shimmer` | "Live" text: the foreground fades to 0.45 and back on the UI thread. With Reduce Motion it holds still, muted. |
+
+**Markdown.** There is no markdown renderer: `ResponseText` draws the text as it is. To render markdown, an app can add one of these and use it in place of `ResponseText`: `react-native-markdown-display`, `@ronradtke/react-native-markdown-display` (a maintained fork) or `react-native-marked`.
+
+**Clipboard.** React Native's own `Clipboard` is deprecated (moved out of core), and the package adds no clipboard package. `MessageAction kind="copy"` calls your `onPress`, and `CodeBlock` shows its copy button when given `onCopy(code)`. Pass your own clipboard call, for example `expo-clipboard`'s `setStringAsync`.
+
+Every control has a role, an accessible name and a 44 pt target. Folds report `expanded`, feedback actions `selected`, and the send button `disabled`. Type and icons step up with larger text. Colours come from `palette` and `tokens` as styles, in light and dark.
+
+`@vvedantb/native-ui/ai-gallery` exports `AiChatGallery`, a full chat screen with a sample thread: a user message, a finished assistant message with folded reasoning and trace, code, sources and actions, and a second answer that streams with its reasoning open until you press Stop. It also has suggestions and the composer with sample attachments. Put it in a dev-only route with a `SafeAreaProvider` above it. `ParityGallery` shows the same thread (`AiChatSamples`) in its "AI chat" section.
+
 ## Phones and accessibility
 
 The components keep the web sizes on screen and reach a 44 pt touch target with `hitSlop` (`touchSlop` in `src/controlStyles.ts`): `Checkbox` (16), `Switch` (36 × 20), tab triggers (30 high), the `Select` trigger (40 high), the `SearchInput` clear button (24), the `UpgradeToProCard` pill (32 high, slop 8) and `Button` (the slop brings each size to at least 48). Controls set their role and state for VoiceOver and TalkBack: `Button` (`disabled`, `busy` while loading), `Checkbox` (`checked`, `mixed`), `Switch` (`checked`), `Tabs` and `PillTabs` (`tablist`, `tab`, `selected`) and the `Select` trigger (`combobox`, with an `accessibilityLabel` prop). Give a `Button` with no text child an `accessibilityLabel`.

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.3.17",
+  "version": "0.4.0",
   "license": "MIT",
-  "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar and the family app marks.",
+  "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar, AI chat parts and the family app marks.",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -73,10 +73,18 @@
       "types": "./src/entries/date-time.ts",
       "default": "./src/entries/date-time.ts"
     },
+    "./ai": {
+      "types": "./src/entries/ai.ts",
+      "default": "./src/entries/ai.ts"
+    },
     "./gallery": {
       "types": "./src/examples/ParityGallery.tsx",
       "default": "./src/examples/ParityGallery.tsx"
     },
+    "./ai-gallery": {
+      "types": "./src/examples/AiChatGallery.tsx",
+      "default": "./src/examples/AiChatGallery.tsx"
+    },
     "./blur": {
       "types": "./src/blur.ts",
       "default": "./src/blur.ts"

package/src/ai/activity-step.tsx

@@ -0,0 +1,57 @@
+import type { ComponentType } from "react";
+import { IconAlertTriangle, IconCheck, type IconProps } from "@tabler/icons-react-native";
+import { Spinner } from "../Spinner";
+import { useLargerText } from "../theme";
+import { AgentTraceDescription, AgentTraceIcon, AgentTraceLine, AgentTraceTitle } from "./trace";
+
+export type ActivityStepStatus = "running" | "complete" | "error";
+
+export type ActivityStepProps = {
+  /** What the AI is doing, such as "Searching the web" or "Reading 3 files". */
+  label: string;
+  /** The tool's icon. Without one, the line shows the status icon only. */
+  icon?: ComponentType<IconProps>;
+  /** `running` pulses the label and shows a spinner; `complete` a check; `error` a warning in the danger colour. Default `complete`. */
+  status?: ActivityStepStatus;
+  /** Faded detail after the label, such as "Worked for 12s" (see `formatElapsed`). */
+  description?: string;
+  testID?: string;
+};
+
+/**
+ * One tool or activity step as a single trace line: icon, label, status and
+ * an optional description. A light stand-in for the web `ActivityTasks`, built
+ * on the `AgentTrace` parts. Its accessibility label reads the label, the
+ * status and the description.
+ */
+export function ActivityStep({
+  label,
+  icon,
+  status = "complete",
+  description,
+  testID,
+}: ActivityStepProps) {
+  const largerText = useLargerText();
+  const running = status === "running";
+  const state = running ? "in progress" : status === "error" ? "failed" : "done";
+  return (
+    <AgentTraceLine
+      testID={testID}
+      status={status === "error" ? "error" : undefined}
+      accessible
+      accessibilityLabel={[label, state, description].filter(Boolean).join(", ")}
+      accessibilityState={{ busy: running }}
+    >
+      {icon ? <AgentTraceIcon icon={icon} /> : null}
+      <AgentTraceTitle shimmer={running}>{label}</AgentTraceTitle>
+      {description ? <AgentTraceDescription>{description}</AgentTraceDescription> : null}
+      {running ? (
+        <AgentTraceIcon>
+          <Spinner size={largerText ? "md" : "sm"} decorative />
+        </AgentTraceIcon>
+      ) : (
+        <AgentTraceIcon icon={status === "error" ? IconAlertTriangle : IconCheck} />
+      )}
+    </AgentTraceLine>
+  );
+}

package/src/ai/attachments.tsx

@@ -0,0 +1,153 @@
+import { createContext, useContext, type ComponentType } from "react";
+import { Image, Pressable, View, type ViewProps } from "react-native";
+import {
+  IconFileText,
+  IconMusic,
+  IconPaperclip,
+  IconPhoto,
+  IconVideo,
+  IconWorld,
+  IconX,
+  type IconProps,
+} from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { touchSlop } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { ResponseText } from "./response-text";
+
+/**
+ * A file or source attached to a prompt or message. The fields the web reads
+ * from the `ai` SDK `FileUIPart` and `SourceDocumentUIPart`, without the SDK.
+ */
+export type AttachmentData = {
+  id: string;
+  /** `"source-document"` for a referenced source. Default a file. */
+  type?: "file" | "source-document";
+  filename?: string;
+  /** MIME type, such as `image/png`. */
+  mediaType?: string;
+  /** A local or remote URI. An image with one shows a thumbnail. */
+  url?: string;
+  /** A source document's title. */
+  title?: string;
+};
+
+export type AttachmentMediaCategory = "image" | "video" | "audio" | "document" | "source" | "unknown";
+
+const MEDIA_ICONS: Record<AttachmentMediaCategory, ComponentType<IconProps>> = {
+  audio: IconMusic,
+  document: IconFileText,
+  image: IconPhoto,
+  source: IconWorld,
+  unknown: IconPaperclip,
+  video: IconVideo,
+};
+
+/** The kind of attachment, from its type and MIME type, as on the web. */
+export function getMediaCategory(data: AttachmentData): AttachmentMediaCategory {
+  if (data.type === "source-document") return "source";
+  const mediaType = data.mediaType ?? "";
+  if (mediaType.startsWith("image/")) return "image";
+  if (mediaType.startsWith("video/")) return "video";
+  if (mediaType.startsWith("audio/")) return "audio";
+  if (mediaType.startsWith("application/") || mediaType.startsWith("text/")) return "document";
+  return "unknown";
+}
+
+/** The name to show and read, as on the web: the title or file name, else "Source", "Image" or "Attachment". */
+export function getAttachmentLabel(data: AttachmentData): string {
+  if (data.type === "source-document") return data.title || data.filename || "Source";
+  return data.filename || (getMediaCategory(data) === "image" ? "Image" : "Attachment");
+}
+
+/** `inline` (default) wraps chips in rows; `list` stacks them full width. The web `grid` previews are not ported. */
+export type AttachmentVariant = "inline" | "list";
+
+const AttachmentsContext = createContext<AttachmentVariant>("inline");
+
+export type AttachmentsProps = ViewProps & {
+  variant?: AttachmentVariant;
+  className?: string;
+};
+
+/** The attachments of a prompt or message. */
+export function Attachments({ variant = "inline", className, ...props }: AttachmentsProps) {
+  return (
+    <AttachmentsContext.Provider value={variant}>
+      <View
+        className={cn(variant === "list" ? "gap-2" : "flex-row flex-wrap items-start gap-2", className)}
+        {...props}
+      />
+    </AttachmentsContext.Provider>
+  );
+}
+
+export type AttachmentProps = {
+  data: AttachmentData;
+  /** Shows a remove button, labelled "Remove" and the attachment name. */
+  onRemove?: () => void;
+  testID?: string;
+};
+
+/** A remove cross of 20 in a 32 row: the slop brings it to 44. */
+const REMOVE_SIZE = 20;
+
+/**
+ * One attachment as a chip: a 20 thumbnail for an image with a `url`, else
+ * its media icon, then the name and an optional remove button. Flat, on the
+ * web `flatPanelSubtle` fill (`bg-surface-secondary`). No hover card.
+ */
+export function Attachment({ data, onRemove, testID }: AttachmentProps) {
+  const variant = useContext(AttachmentsContext);
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const category = getMediaCategory(data);
+  const label = getAttachmentLabel(data);
+  const Icon = MEDIA_ICONS[category];
+  const iconSize = largerText ? 20 : 16;
+  const muted = tokens.color.muted[scheme];
+  return (
+    <View
+      testID={testID}
+      className={cn(
+        "min-w-0 flex-row items-center gap-1.5 px-2",
+        largerText ? "min-h-11" : "min-h-8",
+        variant === "list" ? "w-full" : "max-w-full",
+      )}
+      style={{ borderRadius: tokens.radius.sm, backgroundColor: tokens.color.surfaceSecondary[scheme] }}
+    >
+      {category === "image" && data.url ? (
+        <Image
+          source={{ uri: data.url }}
+          resizeMode="cover"
+          style={{ width: 20, height: 20, borderRadius: 4 }}
+        />
+      ) : (
+        <Icon size={iconSize} color={muted} />
+      )}
+      <ResponseText
+        size="small"
+        selectable={false}
+        numberOfLines={1}
+        ellipsizeMode="middle"
+        className={variant === "list" ? "flex-1" : "shrink"}
+      >
+        {label}
+      </ResponseText>
+      {onRemove ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={`Remove ${label}`}
+          hitSlop={touchSlop(REMOVE_SIZE)}
+          onPress={onRemove}
+          className="items-center justify-center rounded-full active:opacity-70"
+          style={{ width: REMOVE_SIZE, height: REMOVE_SIZE }}
+        >
+          <IconX size={largerText ? 16 : 14} color={muted} />
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}

package/src/ai/chain-of-thought.tsx

@@ -0,0 +1,143 @@
+import type { ComponentType, ReactNode } from "react";
+import { Text, View, type ViewProps } from "react-native";
+import { IconBrain, IconPointFilled, type IconProps } from "@tabler/icons-react-native";
+import { badgeColors, Badge } from "../Badge";
+import { cn } from "../cn";
+import { sizeStyle } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  useCollapsible,
+  type CollapsibleProps,
+  type CollapsibleTriggerProps,
+} from "./collapsible";
+import { ResponseText } from "./response-text";
+
+// The web `ChainOfThought`, simplified: a fold of steps with search-result
+// chips. `ChainOfThoughtImage` and the step enter animation are not ported.
+
+/** Holds its open state (default closed), or takes `open` and `onOpenChange`. */
+export function ChainOfThought({ className, ...props }: CollapsibleProps) {
+  return <Collapsible className={cn("w-full gap-4", className)} {...props} />;
+}
+
+export type ChainOfThoughtHeaderProps = Omit<CollapsibleTriggerProps, "children"> & {
+  /** Default "Chain of Thought". A string, as it is also the accessibility label. */
+  children?: string;
+  icon?: ComponentType<IconProps>;
+};
+
+/** Brain icon, title and chevron: toggles the steps. */
+export function ChainOfThoughtHeader({
+  children = "Chain of Thought",
+  icon: Icon = IconBrain,
+  className,
+  ...props
+}: ChainOfThoughtHeaderProps) {
+  const { open } = useCollapsible();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const muted = tokens.color.muted[scheme];
+  const iconSize = largerText ? 20 : 16;
+  return (
+    <CollapsibleTrigger
+      accessibilityLabel={children}
+      className={cn("w-full flex-row items-center gap-2", className)}
+      {...props}
+    >
+      <Icon size={iconSize} color={muted} />
+      <ResponseText size="small" tone="muted" selectable={false} className="flex-1">
+        {children}
+      </ResponseText>
+      <CollapsibleChevron open={open} size={iconSize} color={muted} />
+    </CollapsibleTrigger>
+  );
+}
+
+/** The steps, shown while open. */
+export function ChainOfThoughtContent({ className, ...props }: ViewProps & { className?: string }) {
+  return <CollapsibleContent className={cn("gap-3", className)} {...props} />;
+}
+
+export type ChainOfThoughtStepStatus = "complete" | "active" | "pending";
+
+export type ChainOfThoughtStepProps = ViewProps & {
+  icon?: ComponentType<IconProps>;
+  label: string;
+  description?: string;
+  /** `active` is the foreground, `complete` muted, `pending` muted at half opacity, as on the web. Default `complete`. */
+  status?: ChainOfThoughtStepStatus;
+  className?: string;
+  children?: ReactNode;
+};
+
+/** One step: icon with a rail under it to the next step, label, description and any children (such as search results). */
+export function ChainOfThoughtStep({
+  icon: Icon = IconPointFilled,
+  label,
+  description,
+  status = "complete",
+  className,
+  style,
+  children,
+  ...props
+}: ChainOfThoughtStepProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const tone = status === "active" ? "foreground" : "muted";
+  return (
+    <View
+      className={cn("flex-row gap-2", className)}
+      style={[status === "pending" ? { opacity: 0.5 } : null, style]}
+      {...props}
+    >
+      <View className="mt-0.5 items-center">
+        <Icon size={largerText ? 20 : 16} color={tokens.color[tone][scheme]} />
+        <View
+          className="mt-2 w-px flex-1"
+          style={{ backgroundColor: tokens.color.separator[scheme] }}
+        />
+      </View>
+      <View className="min-w-0 flex-1 gap-2">
+        <ResponseText size="small" tone={tone}>
+          {label}
+        </ResponseText>
+        {description ? (
+          <ResponseText size="caption" tone="muted">
+            {description}
+          </ResponseText>
+        ) : null}
+        {children}
+      </View>
+    </View>
+  );
+}
+
+/** A wrapping row of `ChainOfThoughtSearchResult` chips. */
+export function ChainOfThoughtSearchResults({ className, ...props }: ViewProps & { className?: string }) {
+  return <View className={cn("flex-row flex-wrap items-center gap-2", className)} {...props} />;
+}
+
+/** One search result: a `secondary` `Badge` with regular `text-xs` type, as the web `font-normal text-xs`. */
+export function ChainOfThoughtSearchResult({ children, className }: { children: string; className?: string }) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("caption", largerText);
+  return (
+    <Badge variant="secondary" className={cn("px-2 py-0.5", className)}>
+      <Text
+        numberOfLines={1}
+        className={cn(size, "font-instrument-sans")}
+        style={[sizeStyle(size), { color: badgeColors("secondary", scheme).color }]}
+      >
+        {children}
+      </Text>
+    </Badge>
+  );
+}

package/src/ai/chat-text.ts

@@ -0,0 +1,35 @@
+/** Type and copy shared by the AI chat parts. */
+import { Platform } from "react-native";
+import type { TextSize } from "../controlStyles";
+
+export type ChatTextKind = "body" | "small" | "caption";
+
+/**
+ * `body` is message text: `text-base` (16 / 24), the phone body size (the web
+ * `MessageContent` is `text-sm`, but the web composer is 16 on phones).
+ * `small` is the secondary text of triggers, trace lines and sources:
+ * `text-sm` (14 / 20; the web sources trigger is `text-xs`). `caption` is
+ * `text-xs` (12 / 16): step descriptions, file chips and code headers. Larger
+ * text steps each up, as `Textarea` does.
+ */
+export function chatTextSize(kind: ChatTextKind, largerText: boolean): TextSize {
+  if (kind === "body") return largerText ? "text-xl" : "text-base";
+  if (kind === "small") return largerText ? "text-lg" : "text-sm";
+  return largerText ? "text-base" : "text-xs";
+}
+
+/** The system monospace face, for code and reasoning text (web `font-mono`). */
+export const MONO_FONT = Platform.select({ ios: "Menlo", default: "monospace" });
+
+/**
+ * Elapsed time for "Thought for 12s" and "Worked for 1m 5s": whole seconds
+ * under a minute, minutes and seconds above. Negative and fractional values
+ * round to whole seconds, from 0.
+ */
+export function formatElapsed(seconds: number): string {
+  const total = Math.max(0, Math.round(seconds));
+  if (total < 60) return `${total}s`;
+  const minutes = Math.floor(total / 60);
+  const rest = total % 60;
+  return rest === 0 ? `${minutes}m` : `${minutes}m ${rest}s`;
+}

package/src/ai/code-block.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from "react";
+import { ScrollView, Text, View } from "react-native";
+import { IconCheck, IconCopy } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { sizeStyle, textStyle } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { MONO_FONT, chatTextSize } from "./chat-text";
+import { ChatIconButton } from "./icon-button";
+
+export type CodeBlockCopyButtonProps = {
+  code: string;
+  /**
+   * Puts `code` on the clipboard. React Native's own `Clipboard` is
+   * deprecated, and native-ui adds no clipboard package, so the app passes its
+   * own (for example `expo-clipboard`'s `setStringAsync`). A rejected promise
+   * leaves the copy icon.
+   */
+  onCopy: (code: string) => void | Promise<void>;
+  /** Milliseconds the check shows after a copy. Default 2000, as on the web. */
+  timeout?: number;
+  /** Default "Copy code"; "Copied" while the check shows. */
+  label?: string;
+};
+
+/** Ghost copy button: the copy icon, then a check for `timeout` after a copy. */
+export function CodeBlockCopyButton({ code, onCopy, timeout = 2000, label = "Copy code" }: CodeBlockCopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<number | undefined>(undefined);
+
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  const copy = async () => {
+    // As the web: presses while the check shows do nothing.
+    if (copied) return;
+    try {
+      await onCopy(code);
+    } catch {
+      return;
+    }
+    setCopied(true);
+    timer.current = setTimeout(() => setCopied(false), timeout);
+  };
+
+  return (
+    <ChatIconButton
+      icon={copied ? IconCheck : IconCopy}
+      label={copied ? "Copied" : label}
+      onPress={() => void copy()}
+    />
+  );
+}
+
+export type CodeBlockProps = {
+  code: string;
+  /** Shown in the header. No highlighting: native-ui has no shiki. */
+  language?: string;
+  /** With it, the header has a copy button. See `CodeBlockCopyButton`. */
+  onCopy?: (code: string) => void | Promise<void>;
+  className?: string;
+};
+
+/**
+ * Plain code on the flat panel (web `flatPanelSubtle`: `bg-surface-secondary`,
+ * no border or shadow) at radius 16. A header with the language and a copy
+ * button when either is given. Long lines scroll sideways; the code is
+ * selectable.
+ */
+export function CodeBlock({ code, language, onCopy, className }: CodeBlockProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("small", largerText);
+  const caption = chatTextSize("caption", largerText);
+  const header = Boolean(language || onCopy);
+  return (
+    <View
+      className={cn("w-full overflow-hidden", className)}
+      style={{ borderRadius: tokens.radius.lg, backgroundColor: tokens.color.surfaceSecondary[scheme] }}
+    >
+      {header ? (
+        <View className="min-h-11 flex-row items-center justify-between pl-3 pr-1.5">
+          <Text className={caption} style={[sizeStyle(caption), textStyle("muted", scheme), { fontFamily: MONO_FONT }]}>
+            {language ?? ""}
+          </Text>
+          {onCopy ? <CodeBlockCopyButton code={code} onCopy={onCopy} /> : null}
+        </View>
+      ) : null}
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerClassName={header ? "px-4 pb-4" : "p-4"}
+      >
+        <Text
+          selectable
+          className={size}
+          style={[sizeStyle(size), textStyle("foreground", scheme), { fontFamily: MONO_FONT }]}
+        >
+          {code}
+        </Text>
+      </ScrollView>
+    </View>
+  );
+}