@vvedantb/native-ui 0.12.0 → 0.13.0

package/README.md

@@ -21,6 +21,7 @@ Peers the app must already have (Expo SDK 57 / RN 0.76+):
 
 Optional, only if you import those components:
 
+- `@rn-primitives/portal` — `Select`. Mount one `<PortalHost />` from this package at the app root (for example in the root layout), outside any `Modal`. The package does not re-export it, so install it with `@rn-primitives/select`.
 - `@gorhom/bottom-sheet` — `BottomSheetContainer`
 - `@react-native-community/datetimepicker` and `dayjs` — `DateTimeField`
 - `@clerk/clerk-expo`, `convex`, `expo-auth-session`, `expo-web-browser` and `expo-router` — `@vvedantb/native-ui/auth` (0.7.0). `expo-router` also for `@vvedantb/native-ui/expo-web-root`.
@@ -513,13 +514,17 @@ import {
 | 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. |
+| `Message`, `MessageContent`, `MessageActionsBar`, `MessageAction` | (0.13.0: `Message` `onLongPress`, `actions`, `highlighted`; `MessageContent` `quote`; the `reply` kind.) 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}`. |
-| `PromptInput layout="inline"` | One row, as the web `Composer layout="inline"` (Eva's chat pill): `leading` (such as a + button), the field (one line to start, then it grows), `toolbar`, then send, in a 20-radius field with `p-1.5`. 44 high on one line. |
+| `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 (auto-grow in both layouts from 0.12.1; send resets the height). 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}`. |
+| `MessageActionSheet`, `ReplyQuoteChip`, `MessageQuote` (0.13.0) | Quoted replies. Long-press a `Message` with `actions` to open the sheet; Reply first, then Copy. Pass `<ReplyQuoteChip author text onDismiss />` as `PromptInput` `replyTo`; send the reply with a `MessageQuote` in `MessageContent` `quote`. See [Quoted replies](#quoted-replies-0130). |
+| `ToolApprovalCard`, `ToolDraftCard` (0.13.0) | A pending tool call: name, cut args summary, Deny and Approve (`ToolDraftCard` adds Edit). `onDecide("approve" \| "deny" \| "edit")`; `pending` or `disabled` turns the buttons off. |
+| `SubagentRunCard`, `SubagentResultCard` (0.13.0) | A subagent run (title, status pill, elapsed, Cancel while `running`) and its result (summary, detail in a fold). |
+| `MessageBotLabel`, `Message` `bot` (0.13.0) | Which bot sent an assistant message, for group chats: `bot={{ name, avatar }}`, or render `MessageBotLabel` above `MessageContent`. |
+| `PromptInput layout="inline"` | One row, as the web `Composer layout="inline"` (Eva's chat pill): `leading` (such as a + button), the field (one line to start, then it grows from 0.12.1), `toolbar`, then send, in a 20-radius field with `p-1.5`. 44 high on one line. |
 | `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. |
@@ -541,9 +546,47 @@ Every control has a role, an accessible name and a 44 pt target. Folds report `e
 
 `@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.
 
+
+### Quoted replies (0.13.0)
+
+Building blocks only: the app owns the reply state and the scroll. No new dependency. `expo-haptics` (optional peer) gives a selection haptic when the sheet opens.
+
+```tsx
+import {
+  Message, MessageContent, MessageQuote, PromptInput, ReplyQuoteChip, MESSAGE_ACTIONS,
+} from "@vvedantb/native-ui/ai";
+
+<Message
+  from="user"
+  highlighted={highlightedId === item.id}
+  actions={[
+    { key: "reply", label: "Reply", icon: MESSAGE_ACTIONS.reply.icon, onPress: () => setReplyTo(item) },
+    { key: "copy", label: "Copy", icon: MESSAGE_ACTIONS.copy.icon, onPress: () => copy(item.text) },
+    { key: "delete", label: "Delete", destructive: true, onPress: () => remove(item) },
+  ]}
+>
+  <MessageContent
+    quote={item.quoted ? <MessageQuote author={item.quoted.author} text={item.quoted.text} onPress={() => jumpTo(item.quoted.id)} /> : undefined}
+  >
+    {item.text}
+  </MessageContent>
+</Message>
+
+<PromptInput
+  onSubmit={send}
+  replyTo={replyTo ? <ReplyQuoteChip author={replyTo.author} text={replyTo.text} onDismiss={() => setReplyTo(null)} /> : undefined}
+/>
+```
+
+- `Message`: `onLongPress`, `actions` (`{ key, label, icon?, destructive?, onPress }[]`), `actionSheetTitle`, `highlighted`. With neither `onLongPress` nor `actions` it is the same `View` as before. With either it is a `Pressable` with the same layout and view props, and it stays a non-accessible container so inner buttons keep focus: also offer Reply in a `MessageActionsBar` for screen reader users. `highlighted` draws a primary wash that fades over 1.4 seconds (`MESSAGE_HIGHLIGHT_MS`) and a ring while true; with Reduce Motion it holds still. Set it back to `false` after the scroll.
+- `MessageActionSheet` (`open`, `onClose`, `actions`, `title`, `cancelLabel`, `testID`): an RN `Modal` bottom sheet, no `@gorhom/bottom-sheet`. Closes on the backdrop, Cancel, Android back and after an action. Destructive rows use the danger colour. Rows are 48 high (56 with larger text).
+- `ReplyQuoteChip` (`author`, `text`, `onDismiss`, `dismissLabel`, `accessibilityLabel`, `testID`): author and up to two lines of text, with an X (44 point target, "Dismiss reply quote"). Labelled "Replying to {author}". `PromptInput` `replyTo` draws it above `header`; passing it as `header` works too.
+- `MessageQuote` (`author`, `text`, `onPress`, `accessibilityLabel`, `testID`): a left border, the author and up to two lines. With `onPress` it is a button.
+- Bot label in a group chat (0.13.0): `<Message from="assistant" bot={{ name: "Planner", avatar: <Avatar size="xs" /> }}>`. Or leave `Message` alone and render `<MessageBotLabel name="Planner" />` above `MessageContent` in `ChatThread` `renderMessage`. `ChatThread` needs no change.
+
 ## DropdownMenu (Unreleased)
 
-A small menu anchored to its trigger, the native counterpart of the web `DropdownMenu`. On `/primitives` and the root.
+A small menu anchored to its trigger, the native counterpart of the web `DropdownMenu`. On `/primitives` and the root. From 0.12.1 the backdrop and menu sit in a full-size `View` inside the `Modal`, so the menu stays above tab bars and glass layers.
 
 ```tsx
 <DropdownMenu>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar, AI chat parts, the family app marks, a NativeWind preset, the Expo web root and Clerk + Convex auth screens.",
   "type": "module",

package/src/DropdownMenu.tsx

@@ -217,36 +217,41 @@ export function DropdownMenuContent({
       statusBarTranslucent
       onRequestClose={close}
     >
-      <Pressable
-        testID="DropdownMenu-backdrop"
-        accessibilityRole="button"
-        accessibilityLabel="Close menu"
-        onPress={close}
-        style={StyleSheet.absoluteFill}
-      />
-      <View
-        accessibilityRole="menu"
-        accessibilityViewIsModal
-        onAccessibilityEscape={close}
-        style={{
-          position: "absolute",
-          ...position,
-          minWidth: DROPDOWN_MENU.minWidth,
-          maxWidth: window.width - insets.left - insets.right - 2 * DROPDOWN_MENU.edge,
-        }}
-      >
-        <FloatingSurface blur={false} radius={DROPDOWN_MENU.radius} style={{ maxHeight: position.maxHeight }}>
-          <ScrollView
-            bounces={false}
-            showsVerticalScrollIndicator={false}
-            onContentSizeChange={(_width, height) => setContentHeight(height)}
-            contentContainerStyle={{ padding: DROPDOWN_MENU.padding }}
-          >
-            <View className={cn(className)} style={style} {...props}>
-              {children}
-            </View>
-          </ScrollView>
-        </FloatingSurface>
+      {/* A full-size host, as `OverlayModal` has: without it the backdrop and the
+          menu are bare Modal children with no box to size or hit-test against,
+          and the menu can stack under tab bars and glass layers. */}
+      <View style={{ flex: 1 }} pointerEvents="box-none">
+        <Pressable
+          testID="DropdownMenu-backdrop"
+          accessibilityRole="button"
+          accessibilityLabel="Close menu"
+          onPress={close}
+          style={StyleSheet.absoluteFill}
+        />
+        <View
+          accessibilityRole="menu"
+          accessibilityViewIsModal
+          onAccessibilityEscape={close}
+          style={{
+            position: "absolute",
+            ...position,
+            minWidth: DROPDOWN_MENU.minWidth,
+            maxWidth: window.width - insets.left - insets.right - 2 * DROPDOWN_MENU.edge,
+          }}
+        >
+          <FloatingSurface blur={false} radius={DROPDOWN_MENU.radius} style={{ maxHeight: position.maxHeight }}>
+            <ScrollView
+              bounces={false}
+              showsVerticalScrollIndicator={false}
+              onContentSizeChange={(_width, height) => setContentHeight(height)}
+              contentContainerStyle={{ padding: DROPDOWN_MENU.padding }}
+            >
+              <View className={cn(className)} style={style} {...props}>
+                {children}
+              </View>
+            </ScrollView>
+          </FloatingSurface>
+        </View>
       </View>
     </Modal>
   );

package/src/FloatingSurface.tsx

@@ -2,6 +2,7 @@ import { Platform, StyleSheet, View, type ViewProps } from "react-native";
 import { useColorScheme } from "nativewind";
 import { glassMode, loadBlur } from "./blur";
 import { cn } from "./cn";
+import { hasDefiniteHeight } from "./definiteSize";
 import {
   floatingFill,
   floatingHairline,
@@ -65,7 +66,7 @@ export function FloatingSurface({
             backgroundColor: mode === "blur" ? "transparent" : fill,
           },
           Platform.OS === "ios" ? styles.continuous : null,
-          style != null ? styles.fill : null,
+          hasDefiniteHeight(style) ? styles.fill : null,
         ]}
       >
         {mode === "blur" && BlurView ? (

package/src/ai/card-button.tsx

@@ -0,0 +1,49 @@
+import { Pressable, Text } from "react-native";
+import { cn } from "../cn";
+import { buttonColors, MIN_TOUCH_TARGET, sizeStyle, touchSlop, typeStyle, type ButtonVariant } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+export type CardButtonProps = {
+  label: string;
+  variant: Extract<ButtonVariant, "primary" | "outline" | "secondary" | "destructive" | "ghost">;
+  onPress?: () => void;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  testID?: string;
+};
+
+/**
+ * The compact pill button of the tool and subagent cards: at least 44 points
+ * high, label in the `small` chat size (steps up with larger text). Internal.
+ */
+export function CardButton({ label, variant, onPress, disabled, accessibilityLabel, testID }: CardButtonProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("small", largerText);
+  const colors = buttonColors(variant, scheme)!;
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{ disabled: !!disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+      className={cn("items-center justify-center rounded-full border px-4 active:opacity-70")}
+      style={{
+        minHeight: MIN_TOUCH_TARGET,
+        minWidth: MIN_TOUCH_TARGET,
+        backgroundColor: colors.backgroundColor,
+        borderColor: colors.borderColor,
+        opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      <Text className={cn(size, "font-instrument-sans-semibold")} style={[sizeStyle(size), typeStyle("semibold"), { color: colors.color }]}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}

package/src/ai/index.ts

@@ -35,7 +35,9 @@ export {
   MessageActionsBar,
   MessageAction,
   MessageMeta,
+  MessageBotLabel,
   MESSAGE_ACTIONS,
+  MESSAGE_HIGHLIGHT_MS,
   userBubbleStyle,
   tintBubbleStyle,
 } from "./message";
@@ -46,9 +48,17 @@ export type {
   MessageBubble,
   MessageActionsBarProps,
   MessageMetaProps,
+  MessageBot,
+  MessageBotLabelProps,
   MessageActionKind,
   MessageActionProps,
 } from "./message";
+export { MessageActionSheet } from "./message-action-sheet";
+export type { MessageActionSheetProps, MessageSheetAction } from "./message-action-sheet";
+export { ReplyQuoteChip } from "./reply-quote-chip";
+export type { ReplyQuoteChipProps } from "./reply-quote-chip";
+export { MessageQuote, QUOTE_MAX_LINES } from "./message-quote";
+export type { MessageQuoteProps } from "./message-quote";
 export {
   Reasoning,
   ReasoningTrigger,
@@ -136,3 +146,7 @@ export { ChoiceQuestion, choiceAnswers } from "./choice-question";
 export type { ChoiceQuestionProps, ChoiceQuestionItem } from "./choice-question";
 export { ActivityStepDetail } from "./activity-step-detail";
 export type { ActivityStepDetailProps, ActivityStepDetailStep } from "./activity-step-detail";
+export { ToolApprovalCard, ToolDraftCard, summarizeArgs, ARGS_MAX_CHARS } from "./tool-approval-card";
+export type { ToolApprovalCardProps, ToolDraftCardProps, ToolDecision } from "./tool-approval-card";
+export { SubagentRunCard, SubagentResultCard, subagentStatusColors } from "./subagent-cards";
+export type { SubagentRunCardProps, SubagentResultCardProps, SubagentStatus } from "./subagent-cards";

package/src/ai/message-action-sheet.tsx

@@ -0,0 +1,165 @@
+import { useEffect, type ComponentType } from "react";
+import { Modal, Pressable, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { IconProps } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, touchSlop, typeStyle } from "../controlStyles";
+import { selectionHaptic } from "../haptics";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+/** One row of `MessageActionSheet`. */
+export type MessageSheetAction = {
+  key: string;
+  label: string;
+  icon?: ComponentType<IconProps>;
+  /** Draws the row in the danger colour, such as Delete. */
+  destructive?: boolean;
+  onPress: () => void;
+};
+
+export type MessageActionSheetProps = {
+  open: boolean;
+  /** Called on a backdrop tap, Cancel, Android back and after an action runs. */
+  onClose: () => void;
+  actions: MessageSheetAction[];
+  /** Shown above the rows, and names the sheet for VoiceOver and TalkBack. Default "Message actions". */
+  title?: string;
+  /** Default "Cancel". */
+  cancelLabel?: string;
+  testID?: string;
+};
+
+/**
+ * The sheet that opens on a long press of a chat message: a bottom sheet in
+ * an RN `Modal` (no `@gorhom/bottom-sheet`) with one pressable row per action
+ * and a Cancel row. It closes on the backdrop, Cancel, Android back and after
+ * an action. A `selectionHaptic()` fires when it opens (`expo-haptics` is an
+ * optional peer). Row testIDs are `{testID}-action-{key}`.
+ */
+export function MessageActionSheet({
+  open,
+  onClose,
+  actions,
+  title = "Message actions",
+  cancelLabel = "Cancel",
+  testID = "message-action-sheet",
+}: MessageActionSheetProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const insets = useSafeAreaInsets();
+  const reduceMotion = useReduceMotion();
+
+  useEffect(() => {
+    if (open) selectionHaptic();
+  }, [open]);
+
+  const caption = chatTextSize("caption", largerText);
+  const body = chatTextSize("body", largerText);
+  const minHeight = largerText ? 56 : MIN_TOUCH_TARGET + 4;
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType={reduceMotion ? "none" : "fade"}
+      statusBarTranslucent
+      onRequestClose={onClose}
+    >
+      <Pressable
+        testID={`${testID}-backdrop`}
+        accessibilityRole="button"
+        accessibilityLabel="Close"
+        onPress={onClose}
+        hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+        style={[StyleSheet.absoluteFill, { backgroundColor: palette.backdrop[scheme] }]}
+      />
+      <View pointerEvents="box-none" style={styles.anchor}>
+        <View
+          testID={testID}
+          accessibilityViewIsModal
+          accessibilityLabel={title}
+          onAccessibilityEscape={onClose}
+          className="w-full self-center px-2"
+          style={{ maxWidth: 480, paddingBottom: insets.bottom + 8 }}
+        >
+          <View
+            className="overflow-hidden"
+            style={{ backgroundColor: tokens.color.surface[scheme], borderRadius: tokens.radius.card }}
+          >
+            <Text
+              accessibilityRole="header"
+              numberOfLines={1}
+              className={cn(caption, "px-4 pb-1 pt-3 font-instrument-sans-medium")}
+              style={[sizeStyle(caption), typeStyle("medium"), textStyle("muted", scheme)]}
+            >
+              {title}
+            </Text>
+            {actions.map((action, index) => {
+              const Icon = action.icon;
+              const color = action.destructive ? palette.danger[scheme] : tokens.color.foreground[scheme];
+              return (
+                <Pressable
+                  key={action.key}
+                  testID={`${testID}-action-${action.key}`}
+                  accessibilityRole="button"
+                  accessibilityLabel={action.label}
+                  hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+                  onPress={() => {
+                    onClose();
+                    action.onPress();
+                  }}
+                  className="flex-row items-center gap-3 px-4"
+                  style={[
+                    { minHeight },
+                    index > 0 && {
+                      borderTopWidth: StyleSheet.hairlineWidth,
+                      borderTopColor: tokens.color.separator[scheme],
+                    },
+                  ]}
+                >
+                  {Icon ? <Icon size={largerText ? 22 : 20} color={color} /> : null}
+                  <Text
+                    numberOfLines={1}
+                    className={cn(body, "min-w-0 flex-1 font-instrument-sans-medium")}
+                    style={[sizeStyle(body), typeStyle("medium"), { color }]}
+                  >
+                    {action.label}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </View>
+          <Pressable
+            testID={`${testID}-cancel`}
+            accessibilityRole="button"
+            accessibilityLabel={cancelLabel}
+            onPress={onClose}
+            hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+            className="mt-2 items-center justify-center"
+            style={{
+              minHeight,
+              backgroundColor: tokens.color.surface[scheme],
+              borderRadius: tokens.radius.card,
+            }}
+          >
+            <Text
+              className={cn(body, "font-instrument-sans-semibold")}
+              style={[sizeStyle(body), typeStyle("semibold"), textStyle("foreground", scheme)]}
+            >
+              {cancelLabel}
+            </Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  anchor: { flex: 1, justifyContent: "flex-end" },
+});

package/src/ai/message-quote.tsx

@@ -0,0 +1,98 @@
+import { useContext } from "react";
+import { Pressable, Text, View } from "react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, touchSlop, typeStyle } from "../controlStyles";
+import { withAlpha } from "../palette";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+import { ChatTextColorContext } from "./response-text";
+
+export type MessageQuoteProps = {
+  /** Who wrote the quoted message, such as "You" or the bot name. */
+  author: string;
+  /** The quoted text. Shown on up to two lines. */
+  text: string;
+  /** Makes the quote a button, so the app can scroll to and highlight the original. */
+  onPress?: () => void;
+  /** Names the button. Default "Go to quoted message from {author}". Used with `onPress` only. */
+  accessibilityLabel?: string;
+  className?: string;
+  testID?: string;
+};
+
+/** Lines of the quoted text before it is cut with an ellipsis. */
+export const QUOTE_MAX_LINES = 2;
+
+/**
+ * A compact quote inside a message bubble, above the message text: a left
+ * border, the author in the caption size and the quoted text on up to two
+ * lines. It takes its colour from the enclosing `MessageContent`, so it reads
+ * on the primary user bubble as well as on the tint and assistant ones. With
+ * `onPress` it is a button (44 point minimum height).
+ */
+export function MessageQuote({
+  author,
+  text,
+  onPress,
+  accessibilityLabel,
+  className,
+  testID,
+}: MessageQuoteProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const inherited = useContext(ChatTextColorContext);
+  const color = inherited ?? textStyle("foreground", scheme).color;
+  const caption = chatTextSize("caption", largerText);
+  const body = chatTextSize("small", largerText);
+  const content = (
+    <>
+      <Text
+        numberOfLines={1}
+        className={cn(caption, "font-instrument-sans-semibold")}
+        style={[sizeStyle(caption), typeStyle("semibold"), { color: withAlpha(color, 0.75) }]}
+      >
+        {author}
+      </Text>
+      <Text
+        numberOfLines={QUOTE_MAX_LINES}
+        className={cn(body, "font-instrument-sans")}
+        style={[sizeStyle(body), { color: withAlpha(color, 0.9) }]}
+      >
+        {text}
+      </Text>
+    </>
+  );
+  const style = {
+    borderLeftWidth: 3,
+    borderLeftColor: withAlpha(color, 0.45),
+    borderRadius: 4,
+  };
+  if (!onPress) {
+    return (
+      <View
+        testID={testID}
+        accessible
+        accessibilityLabel={`Quoted message from ${author}: ${text}`}
+        className={cn("min-w-0 gap-0.5 py-0.5 pl-2.5", className)}
+        style={style}
+      >
+        {content}
+      </View>
+    );
+  }
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? `Go to quoted message from ${author}`}
+      accessibilityHint={text}
+      onPress={onPress}
+      hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+      className={cn("min-h-11 min-w-0 justify-center gap-0.5 py-0.5 pl-2.5", className)}
+      style={style}
+    >
+      {content}
+    </Pressable>
+  );
+}