@vvedantb/native-ui 0.12.0 → 0.13.0

package/src/ai/message.tsx

@@ -1,6 +1,8 @@
-import { createContext, useContext, type ComponentType, type ReactNode } from "react";
-import { Text, View, type ViewProps } from "react-native";
+import { createContext, useContext, useEffect, useState, type ComponentType, type ReactNode } from "react";
+import { Pressable, StyleSheet, Text, View, type ViewProps } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import {
+  IconArrowBackUp,
   IconCopy,
   IconRefresh,
   IconThumbDown,
@@ -8,13 +10,15 @@ import {
   type IconProps,
 } from "@tabler/icons-react-native";
 import { cn } from "../cn";
-import { sizeStyle } from "../controlStyles";
+import { sizeStyle, typeStyle } from "../controlStyles";
 import { palette, withAlpha } from "../palette";
 import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
 import { useScheme } from "../useScheme";
 import { chatTextSize } from "./chat-text";
 import { ChatIconButton } from "./icon-button";
+import { MessageActionSheet, type MessageSheetAction } from "./message-action-sheet";
 import { ChatTextColorContext, ResponseText } from "./response-text";
 
 export type MessageRole = "user" | "assistant" | "system";
@@ -24,25 +28,140 @@ const MessageContext = createContext<MessageRole>("assistant");
 export type MessageProps = ViewProps & {
   from: MessageRole;
   className?: string;
+  /**
+   * Called on a long press of the message. Without it (and without `actions`)
+   * the message is a plain `View`, as before.
+   */
+  onLongPress?: () => void;
+  /**
+   * Actions for a `MessageActionSheet` that opens on a long press, such as
+   * Reply and Copy. `onLongPress` also runs, before the sheet opens.
+   */
+  actions?: MessageSheetAction[];
+  /** Title of the action sheet. Default "Message actions". */
+  actionSheetTitle?: string;
+  /**
+   * True while the message is the target of a quote tap: a primary wash that
+   * fades over about 1.4 seconds, and a ring while it stays true. Set it back
+   * to `false` after the scroll, about 1.5 seconds later.
+   */
+  highlighted?: boolean;
+  /**
+   * For group chats: which bot sent this message. Draws a `MessageBotLabel`
+   * (avatar and name) above the content. Only when set; assistant messages only.
+   */
+  bot?: MessageBot;
 };
 
+/** The bot behind an incoming message in a group chat. */
+export type MessageBot = { name: string; avatar?: ReactNode };
+
+/** How long the highlight wash takes to fade, in milliseconds. */
+export const MESSAGE_HIGHLIGHT_MS = 1400;
+
+/** Peak opacity of the highlight wash (the primary colour). */
+const HIGHLIGHT_WASH = 0.18;
+
+function MessageHighlight() {
+  const scheme = useScheme();
+  const reduceMotion = useReduceMotion();
+  const wash = useSharedValue(reduceMotion ? 0.5 : 1);
+  useEffect(() => {
+    if (reduceMotion) {
+      wash.value = 0.5;
+      return;
+    }
+    wash.value = 1;
+    wash.value = withTiming(0, { duration: MESSAGE_HIGHLIGHT_MS });
+  }, [wash, reduceMotion]);
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: wash.value }));
+  return (
+    <Animated.View
+      testID="message-highlight"
+      pointerEvents="none"
+      style={[
+        StyleSheet.absoluteFill,
+        {
+          borderRadius: tokens.radius.lg,
+          borderWidth: 1.5,
+          borderColor: withAlpha(palette.primary[scheme], 0.5),
+          backgroundColor: withAlpha(palette.primary[scheme], HIGHLIGHT_WASH),
+        },
+        animatedStyle,
+      ]}
+    />
+  );
+}
+
 /**
  * One message: the web `w-full max-w-[95%] flex-col gap-2`. A user message
  * sits at the end of the row with its parts at the end; an assistant message
  * at the start, its parts full width.
+ *
+ * With `onLongPress` or `actions` the message is a `Pressable` (same layout,
+ * `className`, `style` and view props) and a long press opens the
+ * `MessageActionSheet`. It stays a non-accessible container so its buttons and
+ * links keep their own focus: also offer the actions in a `MessageActionsBar`
+ * for screen reader users. `highlighted` draws the quote-jump highlight.
  */
-export function Message({ from, className, style, ...props }: MessageProps) {
+export function Message({
+  from,
+  className,
+  style,
+  onLongPress,
+  actions,
+  actionSheetTitle,
+  highlighted = false,
+  bot,
+  children,
+  ...props
+}: MessageProps) {
   const user = from === "user";
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const hasActions = actions != null && actions.length > 0;
+  const longPressable = onLongPress != null || hasActions;
+  const layout = [
+    { alignSelf: user ? "flex-end" : "flex-start", alignItems: user ? "flex-end" : "stretch" },
+    style,
+  ] as const;
+  const merged = cn("w-full max-w-[95%] gap-2", className);
+  const parts = (
+    <>
+      {bot && !user ? <MessageBotLabel name={bot.name} avatar={bot.avatar} /> : null}
+      {children}
+      {highlighted ? <MessageHighlight /> : null}
+    </>
+  );
   return (
     <MessageContext.Provider value={from}>
-      <View
-        className={cn("w-full max-w-[95%] gap-2", className)}
-        style={[
-          { alignSelf: user ? "flex-end" : "flex-start", alignItems: user ? "flex-end" : "stretch" },
-          style,
-        ]}
-        {...props}
-      />
+      {longPressable ? (
+        <>
+          <Pressable
+            accessible={false}
+            className={merged}
+            style={layout as never}
+            onLongPress={() => {
+              onLongPress?.();
+              if (hasActions) setSheetOpen(true);
+            }}
+            {...props}
+          >
+            {parts}
+          </Pressable>
+          {hasActions ? (
+            <MessageActionSheet
+              open={sheetOpen}
+              onClose={() => setSheetOpen(false)}
+              actions={actions}
+              title={actionSheetTitle}
+            />
+          ) : null}
+        </>
+      ) : (
+        <View className={merged} style={layout} {...props}>
+          {parts}
+        </View>
+      )}
     </MessageContext.Provider>
   );
 }
@@ -75,9 +194,47 @@ export function tintBubbleStyle(scheme: "light" | "dark") {
   };
 }
 
+export type MessageBotLabelProps = {
+  name: string;
+  /** An avatar node, such as `<Avatar size="xs" />`. Drawn before the name. */
+  avatar?: ReactNode;
+  className?: string;
+  testID?: string;
+};
+
+/**
+ * Which bot sent a message, for group chats: an optional avatar and the name
+ * in the caption size. `Message` draws it for its `bot` prop. To compose it
+ * yourself, render it above `MessageContent` (for example in `renderMessage`).
+ */
+export function MessageBotLabel({ name, avatar, className, testID = "message-bot-label" }: MessageBotLabelProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("caption", largerText);
+  return (
+    <View
+      testID={testID}
+      accessible
+      accessibilityLabel={`From ${name}`}
+      className={cn("flex-row items-center gap-1.5", className)}
+    >
+      {avatar}
+      <Text
+        numberOfLines={1}
+        className={cn(size, "font-instrument-sans-semibold")}
+        style={[sizeStyle(size), typeStyle("semibold"), { color: tokens.color.muted[scheme] }]}
+      >
+        {name}
+      </Text>
+    </View>
+  );
+}
+
 export type MessageContentProps = ViewProps & {
   /** User messages only. Default `"primary"`. */
   bubble?: MessageBubble;
+  /** A `MessageQuote` drawn above the content, inside the bubble. */
+  quote?: ReactNode;
   className?: string;
 };
 
@@ -88,13 +245,14 @@ export type MessageContentProps = ViewProps & {
  * no fill and the foreground colour. A string child is drawn as
  * `ResponseText`, and `ResponseText` inside takes the colour.
  */
-export function MessageContent({ children, bubble = "primary", className, style, ...props }: MessageContentProps) {
+export function MessageContent({ children, bubble = "primary", quote, className, style, ...props }: MessageContentProps) {
   const from = useContext(MessageContext);
   const scheme = useScheme();
   const user = from === "user";
   const tint = user && bubble === "tint";
   const color = user && !tint ? palette.primaryForeground[scheme] : tokens.color.foreground[scheme];
   const bubbleStyle = !user ? null : tint ? tintBubbleStyle(scheme) : userBubbleStyle(scheme);
+  const body = typeof children === "string" ? <ResponseText>{children}</ResponseText> : children;
   return (
     <ChatTextColorContext.Provider value={color}>
       <View
@@ -102,7 +260,14 @@ export function MessageContent({ children, bubble = "primary", className, style,
         style={[bubbleStyle, style]}
         {...props}
       >
-        {typeof children === "string" ? <ResponseText>{children}</ResponseText> : children}
+        {quote ? (
+          <>
+            {quote}
+            {body}
+          </>
+        ) : (
+          body
+        )}
       </View>
     </ChatTextColorContext.Provider>
   );
@@ -138,6 +303,7 @@ export function MessageActionsBar({ className, ...props }: MessageActionsBarProp
 
 /** The usual actions, with their icons and accessibility labels. */
 export const MESSAGE_ACTIONS = {
+  reply: { icon: IconArrowBackUp, label: "Reply" },
   copy: { icon: IconCopy, label: "Copy" },
   retry: { icon: IconRefresh, label: "Retry" },
   like: { icon: IconThumbUp, label: "Good response" },

package/src/ai/prompt-input.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import { KeyboardAvoidingView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { IconArrowUp, IconPlayerStopFilled } from "@tabler/icons-react-native";
@@ -89,6 +89,12 @@ export type PromptInputProps = {
   placeholder?: string;
   /** Names the field for VoiceOver and TalkBack. Default "Message". */
   accessibilityLabel?: string;
+  /**
+   * A pending reply above the field and above `header`: a `ReplyQuoteChip`.
+   * Clear it in the app with the chip's `onDismiss`. A `ReplyQuoteChip` as
+   * `header` works as well, beside any attachments.
+   */
+  replyTo?: ReactNode;
   /** Above the field, such as `Attachments`. */
   header?: ReactNode;
   /** Before the send button, such as `PromptInputButton`s. */
@@ -134,6 +140,7 @@ export function PromptInput({
   onStop,
   placeholder = "What would you like to know?",
   accessibilityLabel = "Message",
+  replyTo,
   header,
   toolbar,
   layout = "stacked",
@@ -151,11 +158,18 @@ export function PromptInput({
   const message = text.trim();
   const canSubmit = message.length > 0 && !disabled && !isGenerating(status);
   const bottom = safeBottom ? insets.bottom : 0;
+  // The field grows with its content up to `maxHeight`, then scrolls. A fixed
+  // `numberOfLines` would lock the line count on Android, so neither layout sets it.
+  const [contentHeight, setContentHeight] = useState(0);
+  const maxHeight = largerText ? MAX_FIELD_HEIGHT.larger : MAX_FIELD_HEIGHT.regular;
+  const growStyle = contentHeight > 0 ? { height: Math.min(contentHeight, maxHeight) } : null;
+  const scrollEnabled = contentHeight > maxHeight;
 
   const submit = () => {
     if (!canSubmit) return;
     onSubmit(message);
     setText("");
+    setContentHeight(0);
   };
 
   return (
@@ -173,6 +187,7 @@ export function PromptInput({
         {layout === "inline" ? (
           // Web `Composer` inline: `rounded-[1.25rem]` and a `p-1.5` row, items at the bottom as the field grows.
           <View className="border" style={[fieldStyle(scheme), { borderRadius: INLINE_RADIUS }]}>
+            {replyTo ? <View className="px-1.5 pt-1.5">{replyTo}</View> : null}
             {header ? <View className="flex-row flex-wrap gap-1 px-1.5 pt-1.5">{header}</View> : null}
             <View className="flex-row items-end gap-1 p-1.5">
               {leading ? <View className="shrink-0 flex-row items-center gap-1">{leading}</View> : null}
@@ -184,8 +199,8 @@ export function PromptInput({
                 accessibilityLabel={accessibilityLabel}
                 editable={!disabled}
                 textAlignVertical="center"
-                // One line to start (a multiline field is two rows on react-native-web); it grows from there.
-                numberOfLines={1}
+                scrollEnabled={scrollEnabled}
+                onContentSizeChange={(e) => setContentHeight(e.nativeEvent.contentSize.height)}
                 className={cn(
                   "min-h-8 flex-1 border-0 px-2 py-1 text-base font-instrument-sans",
                   largerText && "min-h-11 py-2 text-xl font-instrument-sans-medium",
@@ -195,7 +210,8 @@ export function PromptInput({
                   largerText ? typeStyle("medium") : null,
                   {
                     backgroundColor: "transparent",
-                    maxHeight: largerText ? MAX_FIELD_HEIGHT.larger : MAX_FIELD_HEIGHT.regular,
+                    maxHeight,
+                    ...growStyle,
                   },
                 ]}
               />
@@ -207,6 +223,7 @@ export function PromptInput({
           </View>
         ) : (
           <View className="border" style={fieldStyle(scheme)}>
+            {replyTo ? <View className="px-2 pt-2">{replyTo}</View> : null}
             {header ? <View className="flex-row flex-wrap gap-1 px-2 pt-2">{header}</View> : null}
             {/* The `Textarea` field without its `numberOfLines` (default 4), which on Android sets the line count: this one starts at one line and grows. */}
             <FieldInput
@@ -217,6 +234,8 @@ export function PromptInput({
               accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               textAlignVertical="top"
+              scrollEnabled={scrollEnabled}
+              onContentSizeChange={(e) => setContentHeight(e.nativeEvent.contentSize.height)}
               className={cn(
                 "min-h-11 border-0 px-3.5 py-2.5 text-base font-instrument-sans",
                 largerText && "min-h-14 px-4 py-3 text-xl font-instrument-sans-medium",
@@ -226,7 +245,8 @@ export function PromptInput({
                 largerText ? typeStyle("medium") : null,
                 {
                   backgroundColor: "transparent",
-                  maxHeight: largerText ? MAX_FIELD_HEIGHT.larger : MAX_FIELD_HEIGHT.regular,
+                  maxHeight,
+                  ...growStyle,
                 },
               ]}
             />

package/src/ai/reply-quote-chip.tsx

@@ -0,0 +1,90 @@
+import { Pressable, Text, View } from "react-native";
+import { IconX } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, fieldStyle, sizeStyle, textStyle, touchSlop, typeStyle } from "../controlStyles";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+export type ReplyQuoteChipProps = {
+  /** Who wrote the message being replied to. */
+  author: string;
+  /** Its text. Shown on up to two lines. */
+  text: string;
+  /** Called when the X is pressed. Clear the reply in the app. */
+  onDismiss?: () => void;
+  /** Default "Replying to {author}". */
+  accessibilityLabel?: string;
+  /** Names the X button. Default "Dismiss reply quote". */
+  dismissLabel?: string;
+  className?: string;
+  testID?: string;
+};
+
+/**
+ * The chip above the composer while a reply is pending: a field-style
+ * surface with a primary accent bar, the author, up to two lines of the
+ * message and an X (44 point target). Pass it as `PromptInput` `replyTo`, or
+ * as `header`.
+ */
+export function ReplyQuoteChip({
+  author,
+  text,
+  onDismiss,
+  accessibilityLabel,
+  dismissLabel = "Dismiss reply quote",
+  className,
+  testID,
+}: ReplyQuoteChipProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const caption = chatTextSize("caption", largerText);
+  const body = chatTextSize("small", largerText);
+  return (
+    <View
+      testID={testID}
+      accessible
+      accessibilityLabel={accessibilityLabel ?? `Replying to ${author}`}
+      accessibilityHint={text}
+      className={cn("w-full flex-row items-center rounded-field border pl-3", className)}
+      style={[
+        fieldStyle(scheme),
+        { backgroundColor: tokens.color.surfaceSecondary[scheme] },
+      ]}
+    >
+      <View
+        className="mr-2.5 self-stretch rounded-full"
+        style={{ width: 3, marginVertical: 8, backgroundColor: palette.primary[scheme] }}
+      />
+      <View className="min-w-0 flex-1 py-2">
+        <Text
+          numberOfLines={1}
+          className={cn(caption, "font-instrument-sans-semibold")}
+          style={[sizeStyle(caption), typeStyle("semibold"), textStyle("muted", scheme)]}
+        >
+          {author}
+        </Text>
+        <Text
+          numberOfLines={2}
+          className={cn(body, "font-instrument-sans")}
+          style={[sizeStyle(body), textStyle("foreground", scheme)]}
+        >
+          {text}
+        </Text>
+      </View>
+      <Pressable
+        testID={testID ? `${testID}-dismiss` : undefined}
+        accessibilityRole="button"
+        accessibilityLabel={dismissLabel}
+        onPress={onDismiss}
+        hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+        className="items-center justify-center"
+        style={{ width: MIN_TOUCH_TARGET, height: MIN_TOUCH_TARGET }}
+      >
+        <IconX size={largerText ? 20 : 16} color={tokens.color.muted[scheme]} />
+      </Pressable>
+    </View>
+  );
+}

package/src/ai/subagent-cards.tsx

@@ -0,0 +1,209 @@
+import { Text, View } from "react-native";
+import { IconRobot } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { cardStyle, sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { palette, withAlpha } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { CardButton } from "./card-button";
+import { chatTextSize, formatElapsed } from "./chat-text";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  useCollapsible,
+} from "./collapsible";
+import { ResponseText } from "./response-text";
+
+export type SubagentStatus = "running" | "done" | "failed" | "cancelled";
+
+const STATUS_LABEL: Record<SubagentStatus, string> = {
+  running: "Running",
+  done: "Done",
+  failed: "Failed",
+  cancelled: "Cancelled",
+};
+
+/** Pill colours per status. Text and border share one hue, the fill is a wash of it. */
+export function subagentStatusColors(status: SubagentStatus, scheme: "light" | "dark") {
+  const hex =
+    status === "running"
+      ? palette.primary[scheme]
+      : status === "done"
+        ? palette.success[scheme]
+        : status === "failed"
+          ? palette.danger[scheme]
+          : tokens.color.muted[scheme];
+  return { color: hex, borderColor: withAlpha(hex, 0.25), backgroundColor: withAlpha(hex, 0.12) };
+}
+
+function StatusPill({ status, testID }: { status: SubagentStatus; testID: string }) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const caption = chatTextSize("caption", largerText);
+  const colors = subagentStatusColors(status, scheme);
+  return (
+    <View
+      testID={testID}
+      accessible
+      accessibilityLabel={`Status: ${STATUS_LABEL[status]}`}
+      className="rounded-full border px-2.5 py-0.5"
+      style={{ borderColor: colors.borderColor, backgroundColor: colors.backgroundColor }}
+    >
+      <Text className={cn(caption, "font-instrument-sans-semibold")} style={[sizeStyle(caption), typeStyle("semibold"), { color: colors.color }]}>
+        {STATUS_LABEL[status]}
+      </Text>
+    </View>
+  );
+}
+
+export type SubagentRunCardProps = {
+  title: string;
+  status: SubagentStatus;
+  /** Whole seconds the run has taken. Shown as "12s" or "1m 5s". */
+  elapsedSeconds?: number;
+  /** Shows a Cancel button while `status` is `running`. */
+  onCancel?: () => void;
+  className?: string;
+  /** Default `subagent-run-card`. Parts add `-status`, `-elapsed` and `-cancel`. */
+  testID?: string;
+};
+
+/** A subagent run: title, status pill, elapsed time, and Cancel while it runs. */
+export function SubagentRunCard({
+  title,
+  status,
+  elapsedSeconds,
+  onCancel,
+  className,
+  testID = "subagent-run-card",
+}: SubagentRunCardProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const body = chatTextSize("body", largerText);
+  const small = chatTextSize("small", largerText);
+  const elapsed = elapsedSeconds == null ? null : formatElapsed(elapsedSeconds);
+  return (
+    <View
+      testID={testID}
+      accessible={false}
+      accessibilityLabel={`Subagent ${title}, ${STATUS_LABEL[status]}`}
+      className={cn("w-full gap-3 p-4", className)}
+      style={cardStyle(scheme)}
+    >
+      <View className="flex-row items-center gap-2">
+        <IconRobot size={largerText ? 22 : 18} color={tokens.color.muted[scheme]} />
+        <Text
+          numberOfLines={2}
+          className={cn(body, "min-w-0 flex-1 font-instrument-sans-semibold")}
+          style={[sizeStyle(body), typeStyle("semibold"), textStyle("foreground", scheme)]}
+        >
+          {title}
+        </Text>
+        <StatusPill status={status} testID={`${testID}-status`} />
+      </View>
+      <View className="flex-row flex-wrap items-center justify-between gap-2">
+        {elapsed ? (
+          <Text
+            testID={`${testID}-elapsed`}
+            accessibilityLabel={`Elapsed ${elapsed}`}
+            className={small}
+            style={[sizeStyle(small), textStyle("muted", scheme), { fontVariant: ["tabular-nums"] }]}
+          >
+            {elapsed}
+          </Text>
+        ) : (
+          <View />
+        )}
+        {status === "running" && onCancel ? (
+          <CardButton
+            testID={`${testID}-cancel`}
+            label="Cancel"
+            accessibilityLabel={`Cancel ${title}`}
+            variant="outline"
+            onPress={onCancel}
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+export type SubagentResultCardProps = {
+  title: string;
+  /** The short result, always shown. */
+  summary: string;
+  /** The full result, shown when the card is open. No fold without it. */
+  detail?: string;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  /** Default `subagent-result-card`. Parts add `-trigger` and `-detail`. */
+  testID?: string;
+};
+
+/** A subagent's result: the summary, and the detail behind a "Show details" fold. */
+export function SubagentResultCard({
+  title,
+  summary,
+  detail,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  className,
+  testID = "subagent-result-card",
+}: SubagentResultCardProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const body = chatTextSize("body", largerText);
+  const small = chatTextSize("small", largerText);
+  return (
+    <Collapsible
+      testID={testID}
+      defaultOpen={defaultOpen}
+      open={open}
+      onOpenChange={onOpenChange}
+      className={cn("w-full gap-2 p-4", className)}
+      style={cardStyle(scheme)}
+    >
+      <Text
+        numberOfLines={2}
+        className={cn(body, "font-instrument-sans-semibold")}
+        style={[sizeStyle(body), typeStyle("semibold"), textStyle("foreground", scheme)]}
+      >
+        {title}
+      </Text>
+      <ResponseText>{summary}</ResponseText>
+      {detail ? (
+        <>
+          <CollapsibleTrigger
+            testID={`${testID}-trigger`}
+            accessibilityLabel={`Details for ${title}`}
+            className="min-h-11 flex-row items-center gap-1.5 self-start"
+          >
+            <ToggleLabel small={small} />
+          </CollapsibleTrigger>
+          <CollapsibleContent testID={`${testID}-detail`}>
+            <ResponseText>{detail}</ResponseText>
+          </CollapsibleContent>
+        </>
+      ) : null}
+    </Collapsible>
+  );
+}
+
+function ToggleLabel({ small }: { small: ReturnType<typeof chatTextSize> }) {
+  const { open } = useCollapsible();
+  const scheme = useScheme();
+  return (
+    <>
+      <Text className={cn(small, "font-instrument-sans")} style={[sizeStyle(small), textStyle("muted", scheme)]}>
+        {open ? "Hide details" : "Show details"}
+      </Text>
+      <CollapsibleChevron open={open} size={14} color={tokens.color.muted[scheme]} />
+    </>
+  );
+}