@marktiderman/genesis-chat 0.2.2 → 0.3.0

package/src/native/attachment-cards.tsx

@@ -8,9 +8,16 @@
  *
  * The kind's `title`, `subtitle` and `action` get a second argument, `{ mine }` (`ChatCardContext`):
  * true on the sender's own card, so a kind can drop its button there (you don't answer your own
- * check-in). Previews (the inbox, the long-press sheet) name a card by its kind's `label`, else
- * its title, not "Attachment".
+ * check-in). Previews (the inbox, the long-press sheet, a reply's quote) name a card by its kind's
+ * `label`, else its title, not "Attachment".
+ *
+ * For more than a card (a task with a checkbox, a worksheet with its progress) the app draws its
+ * kinds itself through the `attachment` slot (`ChatThreadScreen slots`, `MessageBubble
+ * attachmentSlot`), the native twin of the web slot: the same props (`attachment`, `message`,
+ * `url`, `mine`) plus the kind, its action, `run` for the app's own actions with `pending` and
+ * `error`, and `fallback` (the card it would have been). A slot that throws shows the fallback.
  */
+import { useCallback, useLayoutEffect, useRef, useState, type ComponentType, type ReactElement, type ReactNode } from "react";
 import { Linking, View } from "react-native";
 import { NativeButton, NativeIcon, NativeText } from "@marktiderman/genesis-ui-native/components";
 import { useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
@@ -20,18 +27,31 @@ import { attachmentPreview, callAttachmentKind as call, cardTitle, messagePrevie
 
 export type { ChatCardContext };
 export { attachmentPreview, cardTitle, messagePreview };
+import { ChatErrorBoundary } from "../react/error-boundary";
 import { fill } from "./copy";
 import { useChatNative } from "./context";
 import { ON_TINT_FILL, ON_TINT_FILL_STRONG } from "./media-colors";
 
 export type OpenAttachment = (attachment: ChatAttachment, message: ChatMessage) => void;
 
-/** A message's attachments split into the app's cards and the rest (photos, voice, video, files). */
-export function splitCardAttachments<T extends { kind: string }>(attachments: readonly T[], kinds: Record<string, ChatAttachmentKind> | undefined): { cards: T[]; rest: T[] } {
-  if (!kinds) return { cards: [], rest: [...attachments] };
+/** The kinds the package draws itself; every other kind is the app's. */
+export const BUILT_IN_KINDS: ReadonlySet<string> = new Set(["image", "voice", "video", "file", "link"]);
+
+/** The app's registered kind for this attachment kind (own keys only, never `constructor` and the like). */
+export function attachmentKindOf(kinds: Record<string, ChatAttachmentKind> | undefined, kind: string): ChatAttachmentKind | undefined {
+  return kinds && Object.prototype.hasOwnProperty.call(kinds, kind) ? kinds[kind] : undefined;
+}
+
+/**
+ * A message's attachments split into the app's cards and the rest (photos, voice, video, files).
+ * A card is a registered kind; with `slot` (the app draws its kinds) also any kind the package
+ * doesn't draw itself, as on the web.
+ */
+export function splitCardAttachments<T extends { kind: string }>(attachments: readonly T[], kinds: Record<string, ChatAttachmentKind> | undefined, slot = false): { cards: T[]; rest: T[] } {
+  if (!kinds && !slot) return { cards: [], rest: [...attachments] };
   const cards: T[] = [];
   const rest: T[] = [];
-  for (const a of attachments) (Object.prototype.hasOwnProperty.call(kinds, a.kind) ? cards : rest).push(a);
+  for (const a of attachments) (attachmentKindOf(kinds, a.kind) || (slot && !BUILT_IN_KINDS.has(a.kind)) ? cards : rest).push(a);
   return { cards, rest };
 }
 
@@ -71,16 +91,143 @@ export function cardAction(
   return run ? { label: action.label, run } : null;
 }
 
+/** Where one card's app action stands: running, or failed with a short message. */
+export interface CardRunState {
+  pending: boolean;
+  error: string | null;
+}
+
+const IDLE: CardRunState = { pending: false, error: null };
+
+/** How long a card's action may run before it reads as failed (`useCardRuns`, `cardActionTimeoutMs`). */
+export const CARD_ACTION_TIMEOUT_MS = 30_000;
+
+export interface CardRunOptions {
+  /** The error once an action threw or rejected (copy `cardActionFailed`). */
+  failedText: string;
+  /** The error once an action ran longer than `timeoutMs` (copy `cardActionTimedOut`). */
+  timedOutText?: string;
+  /** Milliseconds before a running action reads as failed; 30 s by default, 0 for never. */
+  timeoutMs?: number;
+}
+
+/**
+ * Runs the app's actions for a message's cards (tick a task, answer a check-in) and keeps each
+ * card's state by attachment id: `pending` until the action settles, then `error` (the copy's
+ * `cardActionFailed`) if it threw or rejected. Only a promise makes a card busy; a second run
+ * while one is pending is ignored. One that hasn't settled after `timeoutMs` (30 s) stops being
+ * busy and reads as failed (`cardActionTimedOut`); what it settles to later is ignored.
+ */
+export function useCardRuns(options: CardRunOptions | string): { stateOf(id: string): CardRunState; run(id: string, task: () => unknown): Promise<void> } {
+  const { failedText, timedOutText = failedText, timeoutMs = CARD_ACTION_TIMEOUT_MS } = typeof options === "string" ? { failedText: options } : options;
+  const [states, setStates] = useState<Record<string, CardRunState>>({});
+  const busy = useRef(new Set<string>());
+  const run = useCallback(
+    async (id: string, task: () => unknown) => {
+      if (busy.current.has(id)) return;
+      const failed = (e: unknown, text = failedText) => {
+        if (typeof __DEV__ !== "undefined" && __DEV__) console.warn("[genesis-chat] an attachment card's action failed:", e);
+        setStates((s) => ({ ...s, [id]: { pending: false, error: text } }));
+      };
+      let result: unknown;
+      try {
+        result = task();
+      } catch (e) {
+        failed(e);
+        return;
+      }
+      // Only an action that returns a promise is busy; a plain handler is done when it returns.
+      if (!result || typeof (result as PromiseLike<unknown>).then !== "function") {
+        setStates((s) => (s[id] ? { ...s, [id]: IDLE } : s));
+        return;
+      }
+      busy.current.add(id);
+      setStates((s) => ({ ...s, [id]: { pending: true, error: null } }));
+      const TIMED_OUT = Symbol("timed out");
+      let timer: ReturnType<typeof setTimeout> | undefined;
+      const limit = timeoutMs > 0 ? new Promise<typeof TIMED_OUT>((resolve) => (timer = setTimeout(() => resolve(TIMED_OUT), timeoutMs))) : null;
+      try {
+        const settled = await (limit ? Promise.race([result as PromiseLike<unknown>, limit]) : result);
+        if (settled === TIMED_OUT) {
+          failed(new Error(`timed out after ${timeoutMs} ms`), timedOutText);
+          // Swallow what the abandoned action settles to.
+          void Promise.resolve(result).catch(() => undefined);
+        } else setStates((s) => ({ ...s, [id]: IDLE }));
+      } catch (e) {
+        failed(e);
+      } finally {
+        if (timer !== undefined) clearTimeout(timer);
+        busy.current.delete(id);
+      }
+    },
+    [failedText, timedOutText, timeoutMs],
+  );
+  const stateOf = useCallback((id: string) => states[id] ?? IDLE, [states]);
+  return { stateOf, run };
+}
+
+/**
+ * What the `attachment` slot gets: the web slot's props (`attachment`, `message`, `url`, `mine`)
+ * and what a native card needs besides. The bubble is one VoiceOver element, so a control drawn
+ * here (a checkbox) is reached through the kind's `action`, which the bubble offers as its own
+ * action: give the kind one, and call `action.run` from the control so both stay the same.
+ */
+export interface ChatAttachmentSlotProps {
+  attachment: ChatAttachment;
+  message: ChatMessage;
+  /**
+   * Its signed URL when it has a file (else its `url`), only when it is http(s): the attachment's
+   * `url` is whatever the sender put there, so any other scheme (javascript:, file:) is null.
+   */
+  url: string | null;
+  /** On a message you sent (drawn on the tint). */
+  mine: boolean;
+  /** The app's kind for it (`ChatProvider attachmentKinds`), when registered. */
+  kind: ChatAttachmentKind | undefined;
+  /** The kind's `action`, ready to call: it runs through `run`, so `pending` and `error` follow it. Null without one. */
+  action: { label: string; run: () => void } | null;
+  /** Runs an app action (tick a task): `pending` until it settles, `error` if it throws or rejects. */
+  run(task: () => unknown): void;
+  pending: boolean;
+  /** A short message once an action failed; cleared by the next run. */
+  error: string | null;
+  /** The card the package would draw: return it for kinds the slot doesn't draw. */
+  fallback: ReactElement;
+  testID: string;
+}
+
+/**
+ * Draws the app's own attachment kinds; `null` hides the kinds that aren't registered. A slot that
+ * returns null draws nothing for that attachment (a bubble left with nothing is not shown).
+ */
+export type ChatAttachmentSlot = ComponentType<ChatAttachmentSlotProps>;
+
+/** A URL a slot may be given: http or https only, else null. */
+export function slotUrl(url: string | null | undefined): string | null {
+  if (!url) return null;
+  try {
+    const u = new URL(url);
+    return (u.protocol === "https:" || u.protocol === "http:") && u.hostname ? url : null;
+  } catch {
+    return null;
+  }
+}
+
 export interface ChatAttachmentCardProps {
   attachment: ChatAttachment;
   message: ChatMessage;
-  kind: ChatAttachmentKind;
+  /** The app's kind; without one the card shows the attachment's name (or kind) and no button. */
+  kind?: ChatAttachmentKind;
   mine?: boolean;
   onOpenAttachment?: OpenAttachment;
+  /** Runs the button's action (the bubble passes its own, for busy and error state); calls it straight away by default. */
+  run?: (task: () => unknown) => void;
+  /** Busy while the action runs; the error under the card once it failed. */
+  state?: CardRunState;
   testID?: string;
 }
 
-export function ChatAttachmentCard({ attachment, message, kind, mine = false, onOpenAttachment, testID = "chat-attachment-card" }: ChatAttachmentCardProps) {
+export function ChatAttachmentCard({ attachment, message, kind, mine = false, onOpenAttachment, run, state = IDLE, testID = "chat-attachment-card" }: ChatAttachmentCardProps) {
   const { copy } = useChatNative();
   const colors = useThemeRoles();
   let title = "";
@@ -97,9 +244,9 @@ export function ChatAttachmentCard({ attachment, message, kind, mine = false, on
   const action = cardAction(kind, attachment, message, onOpenAttachment, ctx);
   const fg = mine ? "text-primary-foreground" : undefined;
   return (
+    <View testID={testID} style={{ gap: 4, minWidth: 220 }}>
     <View
-      testID={testID}
-      style={{ flexDirection: "row", alignItems: "center", gap: 10, padding: 10, borderRadius: 12, minWidth: 220, backgroundColor: mine ? ON_TINT_FILL : colors.groupedBackground }}
+      style={{ flexDirection: "row", alignItems: "center", gap: 10, padding: 10, borderRadius: 12, backgroundColor: mine ? ON_TINT_FILL : colors.groupedBackground }}
     >
       <View
         accessible
@@ -121,12 +268,103 @@ export function ChatAttachmentCard({ attachment, message, kind, mine = false, on
         </View>
       </View>
       {action ? (
-        <NativeButton testID={`${testID}-action`} variant={mine ? "secondary" : "default"} onPress={action.run}>
+        <NativeButton
+          testID={`${testID}-action`}
+          variant={mine ? "secondary" : "default"}
+          className="h-11"
+          loading={state.pending}
+          onPress={() => (run ? run(action.run) : action.run())}
+        >
           {action.label}
         </NativeButton>
       ) : null}
     </View>
+      {state.error ? <CardError text={state.error} mine={mine} testID={`${testID}-error`} /> : null}
+    </View>
+  );
+}
+
+/** The line under a card whose action failed. */
+export function CardError({ text, mine, testID }: { text: string; mine: boolean; testID?: string }) {
+  const colors = useThemeRoles();
+  return (
+    <NativeText testID={testID} preset="caption" accessibilityLiveRegion="polite" className={mine ? "text-primary-foreground" : undefined} style={mine ? { paddingHorizontal: 4 } : { paddingHorizontal: 4, color: colors.destructive }}>
+      {text}
+    </NativeText>
   );
 }
 
+export interface AppAttachmentProps {
+  attachment: ChatAttachment;
+  message: ChatMessage;
+  kind: ChatAttachmentKind | undefined;
+  url: string | null;
+  mine: boolean;
+  /** The app's slot: a component draws it, `null` hides an unregistered kind, undefined draws the card. */
+  slot?: ChatAttachmentSlot | null;
+  /** Told whether it drew nothing (the slot returned null, or hid the kind), so the bubble can leave it out. */
+  onEmpty?: (id: string, empty: boolean) => void;
+  onOpenAttachment?: OpenAttachment;
+  run: (task: () => unknown) => void;
+  state: CardRunState;
+  testID: string;
+}
+
+/** One app attachment in a bubble: through the app's slot when there is one, else the card. */
+export function AppAttachment({ attachment, message, kind, url, mine, slot, onOpenAttachment, onEmpty, run, state, testID }: AppAttachmentProps) {
+  const hidden = slot === null && !kind;
+  useLayoutEffect(() => {
+    if (slot === null || slot === undefined) onEmpty?.(attachment.id, hidden);
+  }, [slot, hidden, attachment.id, onEmpty]);
+  const fallback = <ChatAttachmentCard attachment={attachment} message={message} kind={kind} mine={mine} onOpenAttachment={onOpenAttachment} run={run} state={state} testID={testID} />;
+  if (slot === undefined) return fallback;
+  if (slot === null) return hidden ? null : fallback;
+  const found = cardAction(kind, attachment, message, onOpenAttachment, { mine });
+  const action = found ? { label: found.label, run: () => run(found.run) } : null;
+  const props: ChatAttachmentSlotProps = { attachment, message, url: slotUrl(url), mine, kind, action, run, pending: state.pending, error: state.error, fallback, testID };
+  // The slot draws sender-controlled data: if it throws, the card stands in until what it draws changes.
+  return (
+    <ChatErrorBoundary fallback={<Reported id={attachment.id} empty={false} onEmpty={onEmpty}>{fallback}</Reported>} resetKeys={[attachment, message, kind, slot]}>
+      <SlotProbe key={slotKey(slot)} slot={slot} props={props} onEmpty={onEmpty} />
+    </ChatErrorBoundary>
+  );
+}
+
+const slotKeys = new WeakMap<object, number>();
+let nextSlotKey = 0;
+/** A stable key per slot component, so a new slot starts a new probe (its hooks start over). */
+function slotKey(slot: ChatAttachmentSlot): number {
+  let k = slotKeys.get(slot);
+  if (k === undefined) slotKeys.set(slot, (k = ++nextSlotKey));
+  return k;
+}
+
+/** A component React lets us call as a function (not a class, not a memo or forwardRef object). */
+function isPlainFunction(slot: ChatAttachmentSlot): slot is (props: ChatAttachmentSlotProps) => ReactNode {
+  return typeof slot === "function" && !(slot.prototype as { isReactComponent?: unknown } | undefined)?.isReactComponent;
+}
+
+/**
+ * Draws the slot and tells the bubble when it drew nothing. A plain function slot is called here,
+ * so its hooks are this component's (always the same slot: the probe is keyed on it); a
+ * class or memo slot renders as an element and counts as drawn.
+ */
+function SlotProbe({ slot, props, onEmpty }: { slot: ChatAttachmentSlot; props: ChatAttachmentSlotProps; onEmpty?: (id: string, empty: boolean) => void }) {
+  const Slot = slot;
+  const out: ReactNode = isPlainFunction(slot) ? slot(props) : <Slot {...props} />;
+  const empty = out === null || out === undefined || out === false;
+  return (
+    <Reported id={props.attachment.id} empty={empty} onEmpty={onEmpty}>
+      {empty ? null : out}
+    </Reported>
+  );
+}
+
+function Reported({ id, empty, onEmpty, children }: { id: string; empty: boolean; onEmpty?: (id: string, empty: boolean) => void; children: ReactNode }) {
+  useLayoutEffect(() => {
+    onEmpty?.(id, empty);
+  }, [id, empty, onEmpty]);
+  return <>{children}</>;
+}
+
 declare const __DEV__: boolean | undefined;

package/src/native/copy.ts

@@ -104,6 +104,15 @@ export interface ChatNativeCopy extends ChatOrganiseCopy {
   /** The bubble's VoiceOver action for its link preview. */
   openLinkAction: string;
   attachmentCard: string;
+  /** Under an attachment card whose action failed (ticking a task offline). */
+  cardActionFailed: string;
+  /** Under an attachment card whose action ran too long (`cardActionTimeoutMs`). */
+  cardActionTimedOut: string;
+  /** A voice note's transcript: still being made, its VoiceOver label, and the toggle for a long one. */
+  transcribing: string;
+  transcriptLabel: string;
+  showMore: string;
+  showLess: string;
   openImage: string;
   closeViewer: string;
   photoOf: string;
@@ -239,6 +248,12 @@ export const chatNativeCopy: ChatNativeCopy = {
   openLink: "Opens the link",
   openLinkAction: "Open link",
   attachmentCard: "{title}, {subtitle}",
+  cardActionFailed: "That didn't work. Try again.",
+  cardActionTimedOut: "That's taking too long. Try again.",
+  transcribing: "Transcribing…",
+  transcriptLabel: "Transcript: {text}",
+  showMore: "Show more",
+  showLess: "Show less",
   openImage: "Open photo",
   closeViewer: "Close",
   photoOf: "Photo {n} of {count}",

package/src/native/index.ts

@@ -16,7 +16,8 @@
  * Video messages: `ChatVideoRecorder` (expo-camera), `ChatVideoPlayer`
  * (expo-video, HLS), uploads through `ChatProvider videoUpload` with
  * `chunkedPut`; link previews (`ChatLinkPreviewCard`) and the app's own
- * attachment cards (`ChatAttachmentCard`).
+ * attachment cards (`ChatAttachmentCard`), or their own drawing through the
+ * `attachment` slot (`ChatThreadScreen slots`).
  *
  * Optional peers, passed in rather than imported: expo-audio,
  * expo-image-picker, expo-haptics, expo-clipboard, expo-camera, expo-video,
@@ -26,14 +27,14 @@
  * @stability Beta
  */
 export { ChatInboxScreen, inboxRow, type ChatInboxScreenProps } from "./inbox-screen";
-export { ChatThreadScreen, threadListMode, nearBottom, AT_BOTTOM_POINTS, type ChatThreadScreenProps } from "./thread-screen";
+export { ChatThreadScreen, threadListMode, nearBottom, AT_BOTTOM_POINTS, type ChatThreadScreenProps, type ChatThreadScreenSlots } from "./thread-screen";
 export { chatThreadStackOptions, useChatThreadStackOptions, type ChatThreadStackOptionsProps } from "./stack-options";
 export { ChatStartSheet, ChatStartButton, type ChatStartPerson, type ChatStartSheetProps } from "./start-sheet";
 export { ChatComposer, type ChatComposerProps } from "./composer";
 export { MessageBubble, displayBody, formatClock, type MessageBubbleProps } from "./message-bubble";
 export { MessageActionsSheet, type MessageActionsSheetProps } from "./message-actions-sheet";
 export { VoiceNotePlayer, claimPlayback, releasePlayback, pauseChatPlayback, activePlaybackId, toggleVoiceNote, cycleVoiceNoteRate, usePlayingVoiceNote, scrubSeconds, waveformBars, barsThatFit, type VoiceNotePlayerProps } from "./voice-player";
-export { MessageAttachments, attachmentPaths, type BubbleAttachment } from "./media";
+export { MessageAttachments, attachmentPaths, VoiceTranscript, transcriptIsLong, TRANSCRIPT_LINES, type BubbleAttachment, type VoiceTranscriptProps } from "./media";
 export {
   ChatMediaViewer,
   ChatPhotoViewer,
@@ -72,7 +73,30 @@ export { ChatVideoPlayer, videoState, videoSource, muxStreamUrl, muxPosterUrl, t
 export { chunkedPut, fileSource, nextOffset, createVideoUploads, videoUploads, type VideoUploadError, type MintedUpload, useVideoUploads, recordedVideoFile, VIDEO_CHUNK_BYTES, type ByteSource, type ChunkedPutOptions, type RecordedVideo, type VideoUploadTask, type VideoUploads, type StartVideoInput, type OutboxSend } from "./video-upload";
 export { VideoUploadTray, type VideoUploadTrayProps } from "./video-upload-tray";
 export { ChatLinkPreviewCard, previewToShow, linkPreviewIds, openChatLink, linkHost, type ChatLinkPreviewCardProps } from "./link-preview";
-export { ChatAttachmentCard, splitCardAttachments, isOpenableHref, cardAction, cardTitle, attachmentPreview, messagePreview, type ChatAttachmentCardProps, type ChatCardContext, type OpenAttachment } from "./attachment-cards";
+export {
+  ChatAttachmentCard,
+  AppAttachment,
+  CardError,
+  useCardRuns,
+  slotUrl,
+  CARD_ACTION_TIMEOUT_MS,
+  type CardRunOptions,
+  splitCardAttachments,
+  attachmentKindOf,
+  BUILT_IN_KINDS,
+  isOpenableHref,
+  cardAction,
+  cardTitle,
+  attachmentPreview,
+  messagePreview,
+  type ChatAttachmentCardProps,
+  type ChatAttachmentSlot,
+  type ChatAttachmentSlotProps,
+  type AppAttachmentProps,
+  type CardRunState,
+  type ChatCardContext,
+  type OpenAttachment,
+} from "./attachment-cards";
 export { ChatNativeProvider, useChatNative, initials, type ChatNativeProviderProps, type ChatNativeContextValue, type ChatPerson } from "./context";
 export { chatNativeCopy, resolveChatCopy, fill, type ChatNativeCopy, type ChatNativeCopyOverrides } from "./copy";
 export {

package/src/native/media.tsx

@@ -3,8 +3,10 @@
  * Pictures and files in a message: photos as a grid of NativeImage (expo-image
  * when the app gave it) over signed links from `useFileUrls`, a local preview
  * while one still uploads, a tap opening the full-screen viewer (photo-viewer.tsx); voice notes
- * as VoiceNotePlayer; other files as a row with their name.
+ * as VoiceNotePlayer with their transcript under them (three lines, then "Show more"), as on the
+ * web; other files as a row with their name.
  */
+import { useState } from "react";
 import { Pressable, View, useWindowDimensions } from "react-native";
 import { NativeIcon, NativeImage, NativeText } from "@marktiderman/genesis-ui-native/components";
 import { useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
@@ -33,6 +35,9 @@ export interface BubbleAttachment {
   posterUri?: string | null;
   /** Still on its way from this phone. */
   uploading?: boolean;
+  /** A voice note's (or video's) transcript, and whether one is still being made. */
+  transcript?: string | null;
+  transcriptStatus?: ChatAttachment["transcriptStatus"];
 }
 
 export function fromServer(a: ChatAttachment, urls: Record<string, string>): BubbleAttachment {
@@ -50,6 +55,8 @@ export function fromServer(a: ChatAttachment, urls: Record<string, string>): Bub
     playbackId: a.playbackId,
     status: a.status,
     posterUri: a.posterPath ? (urls[a.posterPath] ?? null) : null,
+    transcript: a.transcript,
+    transcriptStatus: a.transcriptStatus,
   };
 }
 
@@ -149,7 +156,10 @@ export function MessageAttachments({ attachments, mine, onOpenImage, testID }: A
       ) : null}
       {others.map((a, i) =>
         a.kind === "voice" ? (
-          <VoiceNotePlayer key={a.key} id={a.key} uri={a.uri} durationMs={a.durationMs} waveform={a.waveform} mine={mine} testID={`${testID}-voice-${i}`} />
+          <View key={a.key} style={{ gap: 2 }}>
+            <VoiceNotePlayer id={a.key} uri={a.uri} durationMs={a.durationMs} waveform={a.waveform} mine={mine} testID={`${testID}-voice-${i}`} />
+            <VoiceTranscript transcript={a.transcript} status={a.transcriptStatus} mine={mine} testID={`${testID}-voice-${i}-transcript`} />
+          </View>
         ) : a.kind === "video" && modules.video ? (
           <ChatVideoPlayer
             key={a.key}
@@ -185,3 +195,80 @@ export function MessageAttachments({ attachments, mine, onOpenImage, testID }: A
 }
 
 // ChatMediaViewer (one picture) is in photo-viewer.tsx, over the full-screen ChatPhotoViewer.
+
+/** Lines a transcript shows before "Show more". */
+export const TRANSCRIPT_LINES = 3;
+
+/**
+ * Whether a transcript folds behind "Show more": by its laid-out line count once measured. Before
+ * any layout (unit tests, where nothing is laid out) a rough guess from its length stands in.
+ */
+export function transcriptIsLong(text: string, measuredLines?: number | null): boolean {
+  if (typeof measuredLines === "number") return measuredLines > TRANSCRIPT_LINES;
+  return text.length > 140 || text.split("\n").length > TRANSCRIPT_LINES;
+}
+
+export interface VoiceTranscriptProps {
+  transcript: string | null | undefined;
+  status: ChatAttachment["transcriptStatus"] | undefined;
+  mine: boolean;
+  testID: string;
+}
+
+/**
+ * A voice note's transcript under the player: "Transcribing…" while it is made, then the text,
+ * folded to three lines with "Show more" when it is longer. The bubble reads the whole transcript
+ * to VoiceOver, so the toggle is for sight only.
+ */
+export function VoiceTranscript({ transcript, status, mine, testID }: VoiceTranscriptProps) {
+  const { copy } = useChatNative();
+  const colors = useThemeRoles();
+  const [open, setOpen] = useState(false);
+  // Lines the whole transcript takes at this width, from an unclamped copy laid out out of sight
+  // (a clamped Text reports only its visible lines on Android).
+  const [lines, setLines] = useState<number | null>(null);
+  const fg = mine ? "text-primary-foreground" : undefined;
+  const text = transcript?.trim();
+  if (status === "pending" && !text) {
+    return (
+      <NativeText testID={testID} preset="caption" className={fg} style={mine ? { fontStyle: "italic", opacity: 0.85, paddingHorizontal: 8 } : { fontStyle: "italic", color: colors.secondaryLabel, paddingHorizontal: 8 }}>
+        {copy.transcribing}
+      </NativeText>
+    );
+  }
+  if (!text) return null;
+  const long = transcriptIsLong(text, lines);
+  const textStyle = mine ? { fontSize: 15, lineHeight: 20 } : { fontSize: 15, lineHeight: 20, color: colors.label };
+  return (
+    <View testID={testID} style={{ paddingHorizontal: 8, alignItems: "flex-start" }}>
+      <NativeText testID={`${testID}-text`} className={fg} numberOfLines={open || !long ? undefined : TRANSCRIPT_LINES} style={textStyle}>
+        {text}
+      </NativeText>
+      <NativeText
+        testID={`${testID}-measure`}
+        aria-hidden
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        onTextLayout={(e: { nativeEvent: { lines: unknown[] } }) => setLines(e.nativeEvent.lines.length)}
+        style={[textStyle, { position: "absolute", left: 8, right: 8, top: 0, opacity: 0 }]}
+        pointerEvents="none"
+      >
+        {text}
+      </NativeText>
+      {long ? (
+        <Pressable
+          testID={`${testID}-toggle`}
+          accessibilityRole="button"
+          accessibilityState={{ expanded: open }}
+          onPress={() => setOpen((o) => !o)}
+          hitSlop={{ top: 8, bottom: 8 }}
+          style={{ minHeight: 44, minWidth: 44, justifyContent: "center" }}
+        >
+          <NativeText preset="caption" className={fg} style={mine ? { fontWeight: "600" } : { fontWeight: "600", color: colors.tint }}>
+            {open ? copy.showLess : copy.showMore}
+          </NativeText>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}