@vvedantb/native-ui 0.8.0 → 0.10.0

package/src/ai/choice-question.tsx

@@ -0,0 +1,297 @@
+import { useState, type ReactNode } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { IconArrowLeft, IconArrowRight, IconCheck, IconPencil } from "@tabler/icons-react-native";
+import { Badge } from "../Badge";
+import { Button } from "../Button";
+import { Input } from "../Input";
+import { sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+/** One question, as an agent's AskUserQuestion sends it. */
+export type ChoiceQuestionItem = {
+  question: string;
+  /** Short tag shown as a badge beside the question. */
+  header: string;
+  multiSelect: boolean;
+  options: ReadonlyArray<{ label: string; description: string }>;
+};
+
+export type ChoiceQuestionProps = {
+  questions: ReadonlyArray<ChoiceQuestionItem>;
+  /**
+   * Question text to the picked label, or the typed "Other" answer.
+   * Multi-select joins labels with ", " (the shape AskUserQuestion reads).
+   */
+  onSubmit: (answers: Record<string, string>) => void | Promise<void>;
+  /** Shows a spinner on the submit button and blocks input. */
+  loading?: boolean;
+  /** Default "Other...". */
+  otherLabel?: string;
+  /** Default "Type your answer...". */
+  otherPlaceholder?: string;
+  /** Inside the web dock card (`rounded-surface bg-card p-3`, scrolling past 60% of the screen). Default `true`. */
+  framed?: boolean;
+};
+
+const LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+/** The structured answer for `onSubmit`. Exported for tests. */
+export function choiceAnswers(
+  questions: ReadonlyArray<ChoiceQuestionItem>,
+  picked: Readonly<Record<number, readonly string[]>>,
+  other: Readonly<Record<number, string>>,
+  otherOn: Readonly<Record<number, boolean>>,
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  questions.forEach((question, index) => {
+    if (otherOn[index]) {
+      result[question.question] = (other[index] ?? "").trim();
+      return;
+    }
+    const selected = picked[index] ?? [];
+    result[question.question] = question.multiSelect ? selected.join(", ") : (selected[0] ?? "");
+  });
+  return result;
+}
+
+/**
+ * An agent's blocking multiple-choice question, as the web chat's question
+ * dock (`ChatQuestionDock` + `MultipleChoiceQuestion`): the question with its
+ * header badge and step count, lettered option rows with descriptions, an
+ * "Other..." row that opens a text field, then Back and Next or Submit. One
+ * question at a time.
+ */
+export function ChoiceQuestion({
+  questions,
+  onSubmit,
+  loading = false,
+  otherLabel = "Other...",
+  otherPlaceholder = "Type your answer...",
+  framed = true,
+}: ChoiceQuestionProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const icon = largerText ? 18 : 15;
+  const [step, setStep] = useState(0);
+  const [picked, setPicked] = useState<Record<number, string[]>>({});
+  const [other, setOther] = useState<Record<number, string>>({});
+  const [otherOn, setOtherOn] = useState<Record<number, boolean>>({});
+  const question = questions[step];
+  if (!question) return null;
+
+  const total = questions.length;
+  const isLast = step === total - 1;
+  const selected = picked[step] ?? [];
+  const hasAnswer = otherOn[step] ? (other[step] ?? "").trim() !== "" : selected.length > 0;
+
+  const toggle = (label: string) => {
+    const next = question.multiSelect
+      ? selected.includes(label)
+        ? selected.filter((item) => item !== label)
+        : [...selected, label]
+      : [label];
+    setPicked({ ...picked, [step]: next });
+    setOtherOn({ ...otherOn, [step]: false });
+  };
+
+  const next = () => {
+    if (!hasAnswer || loading) return;
+    if (isLast) void onSubmit(choiceAnswers(questions, picked, other, otherOn));
+    else setStep(step + 1);
+  };
+
+  const body = (
+    <View style={{ gap: 16 }}>
+      <View className="flex-row items-center justify-between" style={{ gap: 8 }}>
+        <Text
+          className="flex-1 font-instrument-sans-semibold"
+          // Web `text-[15px] leading-snug`; larger text steps up to 18.
+          style={[{ fontSize: largerText ? 18 : 15, lineHeight: largerText ? 24 : 20 }, textStyle("foreground", scheme), typeStyle("semibold")]}
+        >
+          {question.question}
+        </Text>
+        <View className="flex-row items-center" style={{ gap: 6 }}>
+          {/* Web `text-3xs`: a compact badge beside the question. */}
+          {question.header ? (
+            <Badge variant="secondary" className="px-2 py-0.5" textClassName={largerText ? "text-sm" : "text-xs"}>
+              {question.header}
+            </Badge>
+          ) : null}
+          {total > 1 ? (
+            <Text className="font-instrument-sans-medium" style={[sizeStyle(chatTextSize("caption", largerText)), textStyle("muted", scheme), typeStyle("medium")]}>
+              {`${step + 1}/${total}`}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+
+      <View style={{ gap: 4 }}>
+        {question.options.map((option, index) => (
+          <ChoiceRow
+            key={`${option.label}-${index}`}
+            selected={!otherOn[step] && selected.includes(option.label)}
+            disabled={loading}
+            mark={LETTERS[index] ?? String(index + 1)}
+            label={option.label}
+            description={option.description}
+            onPress={() => toggle(option.label)}
+          />
+        ))}
+        <ChoiceRow
+          selected={otherOn[step] ?? false}
+          disabled={loading}
+          mark="other"
+          label={otherLabel}
+          onPress={() => {
+            setOtherOn({ ...otherOn, [step]: true });
+            setPicked({ ...picked, [step]: [] });
+          }}
+        >
+          {otherOn[step] ? (
+            <View style={{ marginTop: 8, marginLeft: 36 }}>
+              <Input
+                value={other[step] ?? ""}
+                onChangeText={(text: string) => setOther({ ...other, [step]: text })}
+                placeholder={otherPlaceholder}
+                editable={!loading}
+                autoFocus
+                onSubmitEditing={next}
+              />
+            </View>
+          ) : null}
+        </ChoiceRow>
+      </View>
+
+      <View className="flex-row items-center" style={{ gap: 8 }}>
+        {total > 1 && step > 0 ? (
+          <View className="flex-1">
+            <Button
+              variant="ghost"
+              disabled={loading}
+              onPress={() => setStep(step - 1)}
+              startContent={<IconArrowLeft size={icon} strokeWidth={2.5} color={tokens.color.foreground[scheme]} />}
+            >
+              Back
+            </Button>
+          </View>
+        ) : null}
+        <View className="flex-1">
+          <Button
+            disabled={!hasAnswer}
+            loading={loading}
+            onPress={next}
+            endContent={
+              loading ? null : <IconArrowRight size={icon} strokeWidth={2.5} color={palette.primaryForeground[scheme]} />
+            }
+          >
+            {isLast ? "Submit" : "Next"}
+          </Button>
+        </View>
+      </View>
+    </View>
+  );
+
+  if (!framed) return body;
+  return (
+    <View style={{ borderRadius: tokens.radius.lg, backgroundColor: tokens.color.surface[scheme], overflow: "hidden" }}>
+      <ScrollView style={{ maxHeight: 544 }} contentContainerStyle={{ padding: 12 }} keyboardShouldPersistTaps="handled">
+        {body}
+      </ScrollView>
+    </View>
+  );
+}
+
+/**
+ * One option row (web `Card` with `bg-secondary`, `py-2 px-2.5`, radius 16): a round 24 mark
+ * (30 with larger text; letter, or a pencil for "Other"; a check on the primary fill when picked),
+ * the label and the description. Picked: a 2-wide primary ring on the accent.
+ */
+function ChoiceRow({
+  selected,
+  disabled,
+  mark,
+  label,
+  description,
+  onPress,
+  children,
+}: {
+  selected: boolean;
+  disabled: boolean;
+  mark: string;
+  label: string;
+  description?: string;
+  onPress: () => void;
+  children?: ReactNode;
+}) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const muted = tokens.color.muted[scheme];
+  const markSize = largerText ? 30 : 24;
+  const glyph = largerText ? 16 : 13;
+  return (
+    <View
+      style={{
+        // Web `Card` (rounded-surface, 16) with `py-2 px-2.5` inside a 1 border + 1 ring.
+        borderRadius: tokens.radius.lg,
+        borderWidth: 2,
+        borderColor: selected ? palette.primary[scheme] : "transparent",
+        backgroundColor: selected ? tokens.color.background[scheme] : palette.default[scheme],
+        opacity: disabled ? 0.5 : 1,
+        paddingVertical: 8,
+        paddingHorizontal: 10,
+      }}
+    >
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        accessibilityState={{ selected, disabled }}
+        disabled={disabled}
+        onPress={onPress}
+        hitSlop={4}
+        className="flex-row"
+        style={{ gap: 12, alignItems: description ? "flex-start" : "center" }}
+      >
+        <View
+          style={{
+            width: markSize,
+            height: markSize,
+            // Web `rounded-md` (radius - 2 = 14 at the default 1rem) on a 24 box: round.
+            borderRadius: markSize / 2,
+            marginTop: description ? 2 : 0,
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: selected ? palette.primary[scheme] : palette.default[scheme],
+          }}
+        >
+          {selected ? (
+            <IconCheck size={glyph} strokeWidth={3} color={palette.primaryForeground[scheme]} />
+          ) : mark === "other" ? (
+            <IconPencil size={glyph} color={muted} />
+          ) : (
+            <Text className="font-instrument-sans-semibold" style={[typeStyle("semibold"), { fontSize: largerText ? 14 : 11, color: muted, letterSpacing: 0.4 }]}>
+              {mark}
+            </Text>
+          )}
+        </View>
+        <View className="min-w-0 flex-1">
+          <Text
+            className="font-instrument-sans-medium"
+            style={[sizeStyle(chatTextSize("small", largerText), "snug"), typeStyle("medium"), { color: selected ? palette.primary[scheme] : muted }]}
+          >
+            {label}
+          </Text>
+          {description ? (
+            <Text className="font-instrument-sans" style={[sizeStyle(chatTextSize("caption", largerText)), { color: muted, marginTop: 2 }]}>
+              {description}
+            </Text>
+          ) : null}
+        </View>
+      </Pressable>
+      {children}
+    </View>
+  );
+}

package/src/ai/code-block.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useRef, useState } from "react";
+import { Fragment, 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 { GITHUB_CODE_COLORS, codeTokenColor, loadPrismReactRenderer } from "../highlight";
 import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
@@ -54,20 +55,30 @@ export function CodeBlockCopyButton({ code, onCopy, timeout = 2000, label = "Cop
 
 export type CodeBlockProps = {
   code: string;
-  /** Shown in the header. No highlighting: native-ui has no shiki. */
+  /**
+   * Shown in the header, and the Prism language for highlighting (`tsx`,
+   * `python`, `json`…). An unknown language draws plain text.
+   */
   language?: string;
+  /**
+   * Colour the code in the GitHub light and dark colours, as the web shiki
+   * block. Default `true`. Needs the optional peer `prism-react-renderer` and a
+   * `language`; without either the code is plain.
+   */
+  highlight?: boolean;
   /** 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
+ * 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.
+ * selectable. With `prism-react-renderer` installed and a `language`, tokens
+ * take the GitHub colours of the scheme.
  */
-export function CodeBlock({ code, language, onCopy, className }: CodeBlockProps) {
+export function CodeBlock({ code, language, highlight = true, onCopy, className }: CodeBlockProps) {
   const scheme = useScheme();
   const largerText = useLargerText();
   const size = chatTextSize("small", largerText);
@@ -96,9 +107,41 @@ export function CodeBlock({ code, language, onCopy, className }: CodeBlockProps)
           className={size}
           style={[sizeStyle(size), textStyle("foreground", scheme), { fontFamily: MONO_FONT }]}
         >
-          {code}
+          {highlight && language ? <HighlightedCode code={code} language={language} scheme={scheme} /> : code}
         </Text>
       </ScrollView>
     </View>
   );
 }
+
+/**
+ * Prism tokens as nested `Text` spans, one colour each, lines joined by
+ * newlines. They inherit the size and font of the code `Text` around them.
+ * Without `prism-react-renderer` it is the plain code.
+ */
+function HighlightedCode({ code, language, scheme }: { code: string; language: string; scheme: "light" | "dark" }) {
+  const Highlight = loadPrismReactRenderer()?.Highlight;
+  if (!Highlight) return code;
+  return (
+    <Highlight
+      code={code.replace(/\n$/, "")}
+      language={language.toLowerCase()}
+      theme={{ plain: { color: GITHUB_CODE_COLORS[scheme].plain }, styles: [] }}
+    >
+      {({ tokens }) => (
+        <>
+          {tokens.map((line, lineIndex) => (
+            <Fragment key={lineIndex}>
+              {lineIndex > 0 ? "\n" : null}
+              {line.map((token, tokenIndex) => (
+                <Text key={tokenIndex} style={{ color: codeTokenColor(token.types, scheme) }}>
+                  {token.content}
+                </Text>
+              ))}
+            </Fragment>
+          ))}
+        </>
+      )}
+    </Highlight>
+  );
+}

package/src/ai/index.ts

@@ -34,14 +34,18 @@ export {
   MessageContent,
   MessageActionsBar,
   MessageAction,
+  MessageMeta,
   MESSAGE_ACTIONS,
   userBubbleStyle,
+  tintBubbleStyle,
 } from "./message";
 export type {
   MessageRole,
   MessageProps,
   MessageContentProps,
+  MessageBubble,
   MessageActionsBarProps,
+  MessageMetaProps,
   MessageActionKind,
   MessageActionProps,
 } from "./message";
@@ -62,6 +66,7 @@ export {
   AgentTraceCollapsible,
   AgentTraceCollapsibleTrigger,
   AgentTraceCollapsibleContent,
+  AgentTraceFold,
   traceLineColor,
 } from "./trace";
 export type {
@@ -70,6 +75,7 @@ export type {
   AgentTraceIconProps,
   AgentTraceTitleProps,
   AgentTraceCollapsibleTriggerProps,
+  AgentTraceFoldProps,
 } from "./trace";
 export {
   ChainOfThought,
@@ -121,3 +127,7 @@ export { CodeBlock, CodeBlockCopyButton } from "./code-block";
 export type { CodeBlockProps, CodeBlockCopyButtonProps } from "./code-block";
 export { ResponseText, ChatTextColorContext } from "./response-text";
 export type { ResponseTextProps } from "./response-text";
+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";

package/src/ai/message.tsx

@@ -1,5 +1,5 @@
-import { createContext, useContext, type ComponentType } from "react";
-import { View, type ViewProps } from "react-native";
+import { createContext, useContext, type ComponentType, type ReactNode } from "react";
+import { Text, View, type ViewProps } from "react-native";
 import {
   IconCopy,
   IconRefresh,
@@ -8,9 +8,12 @@ import {
   type IconProps,
 } from "@tabler/icons-react-native";
 import { cn } from "../cn";
-import { palette } from "../palette";
+import { sizeStyle } from "../controlStyles";
+import { palette, withAlpha } from "../palette";
+import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
 import { ChatIconButton } from "./icon-button";
 import { ChatTextColorContext, ResponseText } from "./response-text";
 
@@ -56,24 +59,47 @@ export function userBubbleStyle(scheme: "light" | "dark") {
   };
 }
 
-export type MessageContentProps = ViewProps & { className?: string };
+/**
+ * A user bubble's look. `primary` is the web default (`bg-primary` with the
+ * label colour). `tint` is the chat override Eva uses (`rounded-surface
+ * bg-primary/10 px-3 py-2 text-foreground`): a 10% wash of the primary colour
+ * with foreground text and every corner at 16.
+ */
+export type MessageBubble = "primary" | "tint";
+
+/** The `tint` bubble: the primary colour at 10% alpha, radius 16 on every corner. */
+export function tintBubbleStyle(scheme: "light" | "dark") {
+  return {
+    backgroundColor: withAlpha(palette.primary[scheme], 0.1),
+    borderRadius: tokens.radius.lg,
+  };
+}
+
+export type MessageContentProps = ViewProps & {
+  /** User messages only. Default `"primary"`. */
+  bubble?: MessageBubble;
+  className?: string;
+};
 
 /**
- * The message body. A user message is a filled bubble (`px-4 py-3`, the
- * primary fill and label colour); an assistant message has no fill and the
- * foreground colour. A string child is drawn as `ResponseText`, and
- * `ResponseText` inside takes the colour.
+ * The message body. A user message is a filled bubble: by default `px-4 py-3`
+ * with the primary fill and label colour, or with `bubble="tint"` `px-3 py-2`
+ * on a 10% primary wash with the foreground colour. An assistant message has
+ * no fill and the foreground colour. A string child is drawn as
+ * `ResponseText`, and `ResponseText` inside takes the colour.
  */
-export function MessageContent({ children, className, style, ...props }: MessageContentProps) {
+export function MessageContent({ children, bubble = "primary", className, style, ...props }: MessageContentProps) {
   const from = useContext(MessageContext);
   const scheme = useScheme();
   const user = from === "user";
-  const color = user ? palette.primaryForeground[scheme] : tokens.color.foreground[scheme];
+  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);
   return (
     <ChatTextColorContext.Provider value={color}>
       <View
-        className={cn("min-w-0 max-w-full gap-2", user && "px-4 py-3", className)}
-        style={[user ? userBubbleStyle(scheme) : null, style]}
+        className={cn("min-w-0 max-w-full gap-2", user && (tint ? "px-3 py-2" : "px-4 py-3"), className)}
+        style={[bubbleStyle, style]}
         {...props}
       >
         {typeof children === "string" ? <ResponseText>{children}</ResponseText> : children}
@@ -82,6 +108,27 @@ export function MessageContent({ children, className, style, ...props }: Message
   );
 }
 
+export type MessageMetaProps = { children: ReactNode; className?: string };
+
+/**
+ * The muted clock and duration after a message's actions, as Eva's web chat
+ * (`text-2xs tabular-nums text-muted-foreground/60`, "10:21 PM · 1m"): the
+ * caption size on phones, the muted colour at 60%, tabular figures.
+ */
+export function MessageMeta({ children, className }: MessageMetaProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("caption", largerText);
+  return (
+    <Text
+      className={cn(size, "font-instrument-sans", className)}
+      style={[sizeStyle(size), { color: withAlpha(tokens.color.muted[scheme], 0.6), fontVariant: ["tabular-nums"] }]}
+    >
+      {children}
+    </Text>
+  );
+}
+
 export type MessageActionsBarProps = ViewProps & { className?: string };
 
 /** A row of `MessageAction`s under a message, as the web `flex items-center gap-1`. */

package/src/ai/prompt-input.tsx

@@ -93,6 +93,15 @@ export type PromptInputProps = {
   header?: ReactNode;
   /** Before the send button, such as `PromptInputButton`s. */
   toolbar?: ReactNode;
+  /**
+   * `stacked` (default): the field over a footer of tools and send, the web
+   * `PromptInput`. `inline`: one row, as the web `Composer layout="inline"`
+   * (Eva's chat): `leading`, the field, `toolbar`, then send, in a 20-radius
+   * field with `p-1.5`, 44 high on one line.
+   */
+  layout?: "stacked" | "inline";
+  /** `inline` only: before the field, such as a + (attach) `PromptInputButton`. */
+  leading?: ReactNode;
   disabled?: boolean;
   /** Pad the bottom safe-area inset (home indicator). Default `true`; turn it off when a tab bar below already does. */
   safeBottom?: boolean;
@@ -102,6 +111,9 @@ export type PromptInputProps = {
   testID?: string;
 };
 
+/** The web `Composer` inline radius, `rounded-[1.25rem]`. */
+const INLINE_RADIUS = 20;
+
 /** The field grows to this height, then scrolls: about 6 lines of `text-base` (24 each, with `py-2.5`), and about 8 of `text-xl` with larger text. */
 const MAX_FIELD_HEIGHT = { regular: 160, larger: 240 } as const;
 
@@ -124,6 +136,8 @@ export function PromptInput({
   accessibilityLabel = "Message",
   header,
   toolbar,
+  layout = "stacked",
+  leading,
   disabled = false,
   safeBottom = true,
   keyboardVerticalOffset = 0,
@@ -156,35 +170,72 @@ export function PromptInput({
         className={cn("pt-2", className)}
         style={{ paddingBottom: bottom + 8, paddingLeft: insets.left + 12, paddingRight: insets.right + 12 }}
       >
-        <View className="border" style={fieldStyle(scheme)}>
-          {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
-            multiline
-            value={text}
-            onChangeText={setText}
-            placeholder={placeholder}
-            accessibilityLabel={accessibilityLabel}
-            editable={!disabled}
-            textAlignVertical="top"
-            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",
-            )}
-            style={[
-              fieldTextStyle(scheme),
-              largerText ? typeStyle("medium") : null,
-              {
-                backgroundColor: "transparent",
-                maxHeight: largerText ? MAX_FIELD_HEIGHT.larger : MAX_FIELD_HEIGHT.regular,
-              },
-            ]}
-          />
-          <View className="flex-row items-center justify-between gap-1 px-2 pb-2">
-            <View className="min-w-0 shrink flex-row items-center gap-1">{toolbar}</View>
-            <PromptInputSubmit status={status} onSubmit={submit} onStop={onStop} canSubmit={canSubmit} />
+        {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 }]}>
+            {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}
+              <FieldInput
+                multiline
+                value={text}
+                onChangeText={setText}
+                placeholder={placeholder}
+                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}
+                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",
+                )}
+                style={[
+                  fieldTextStyle(scheme),
+                  largerText ? typeStyle("medium") : null,
+                  {
+                    backgroundColor: "transparent",
+                    maxHeight: largerText ? MAX_FIELD_HEIGHT.larger : MAX_FIELD_HEIGHT.regular,
+                  },
+                ]}
+              />
+              <View className="shrink-0 flex-row items-center gap-1">
+                {toolbar}
+                <PromptInputSubmit status={status} onSubmit={submit} onStop={onStop} canSubmit={canSubmit} />
+              </View>
+            </View>
+          </View>
+        ) : (
+          <View className="border" style={fieldStyle(scheme)}>
+            {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
+              multiline
+              value={text}
+              onChangeText={setText}
+              placeholder={placeholder}
+              accessibilityLabel={accessibilityLabel}
+              editable={!disabled}
+              textAlignVertical="top"
+              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",
+              )}
+              style={[
+                fieldTextStyle(scheme),
+                largerText ? typeStyle("medium") : null,
+                {
+                  backgroundColor: "transparent",
+                  maxHeight: largerText ? MAX_FIELD_HEIGHT.larger : MAX_FIELD_HEIGHT.regular,
+                },
+              ]}
+            />
+            <View className="flex-row items-center justify-between gap-1 px-2 pb-2">
+              <View className="min-w-0 shrink flex-row items-center gap-1">{toolbar}</View>
+              <PromptInputSubmit status={status} onSubmit={submit} onStop={onStop} canSubmit={canSubmit} />
+            </View>
           </View>
-        </View>
+        )}
       </View>
     </KeyboardAvoidingView>
   );