@marktiderman/genesis-chat 0.2.2 → 0.3.0

package/dist/native.js

@@ -1,11 +1,11 @@
-import { cardTitle, callAttachmentKind, attachmentPreview, messagePreview } from './chunk-AZS3HNLM.js';
-export { attachmentPreview, cardTitle, messagePreview } from './chunk-AZS3HNLM.js';
+import { cardTitle, attachmentPreview, callAttachmentKind, ChatErrorBoundary, messagePreview } from './chunk-IEFULAC2.js';
+export { attachmentPreview, cardTitle, messagePreview } from './chunk-IEFULAC2.js';
 import { isHttpsUrl, extractLinks, scheduleLabel, scheduleQuickPicks, isSchedulable, topicKey, snippetParts } from './chunk-BJCE5O7V.js';
-import { useChat, useInbox, usePeople, chatKeys, useScheduled, useAvailability, useTopics, useConversation, usePins, useMessageActions, useFileUrls, useLinkPreviews, useStartConversation, useBroadcast, useSearch } from './chunk-JU2FAPBI.js';
-import { summarizeReactions, previewText, parseMentions, startsDay, dayLabel, itemTime, itemSender, startsGroup, activityLine } from './chunk-A4YJX7KT.js';
+import { useChat, useInbox, usePeople, chatKeys, useScheduled, useAvailability, useTopics, useConversation, usePins, useMessageActions, useFileUrls, useLinkPreviews, useStartConversation, useBroadcast, useSearch } from './chunk-XQ2ULNHV.js';
+import { summarizeReactions, parseMentions, startsDay, dayLabel, itemTime, itemSender, startsGroup, activityLine } from './chunk-A4YJX7KT.js';
 import { formatDuration, nextPlaybackRate, ChatError, CHAT_LIMITS, fileExtension, isAllowedExtension, attachmentKindFor, awaySummary, WEEKDAYS, minutesOf, waveformFromMetering, recordingLimitMs, CHAT_BUCKET, randomId } from './chunk-GBJ3YI4E.js';
-export { CHAT_MARK_READ_ACTION, CHAT_PUSH_CATEGORY, CHAT_REPLY_ACTION, PUSH_REPLY_WAIT_MS, chatNotificationActions, chatPath, chatPushCategory, chatPushCopy, chatPushPayload, chatThreadMatch, conversationIdFromData, failedReply, handleChatPushResponse, registerChatNotificationActions, replyClientId, replyClientIdFor } from './chunk-VEPZROQB.js';
-import { createContext, memo, useMemo, useRef, useContext, useSyncExternalStore, useState, useEffect, useCallback, useReducer } from 'react';
+export { CHAT_MARK_READ_ACTION, CHAT_PUSH_CATEGORY, CHAT_REPLY_ACTION, PUSH_REPLY_WAIT_MS, chatNotificationActions, chatPath, chatPushCategory, chatPushCopy, chatPushPayload, chatThreadMatch, conversationIdFromData, failedReply, handleChatPushResponse, registerChatNotificationActions, replyClientId, replyClientIdFor } from './chunk-BTG4JWLF.js';
+import { createContext, memo, useMemo, useState, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect, useEffect, useReducer } from 'react';
 import { NativeText, NativeAvatar, NativeImage, NativeIcon, NativeButton, NativeProgress, useToast, NativeSheet, NativeDatePicker, NativeTimePicker, NativeListItem, NativeSkeleton, NativeEmptyState, NativeTextarea, NativeSwitch, NativeCombobox, NativeChipGroup, NativeChip, NativeInput, NativeSearchBar, NativeInlineAlert, NativeFullScreenModal, FULL_SCREEN_DARK, useGenesisModules, NativeSheetScrollView, NativeCheckbox, NativeBadge } from '@marktiderman/genesis-ui-native/components';
 import { InboxPage, SettingsSubPage, getThreadPageStackOptions, formatInboxTime } from '@marktiderman/genesis-ui-native/layouts';
 import { Pressable, Animated, PanResponder, View, Linking, useWindowDimensions, ActivityIndicator, AppState, Modal, AccessibilityInfo, ScrollView, FlatList, TextInput, Platform, KeyboardAvoidingView, Alert } from 'react-native';
@@ -195,6 +195,12 @@ var 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\u2026",
+  transcriptLabel: "Transcript: {text}",
+  showMore: "Show more",
+  showLess: "Show less",
   openImage: "Open photo",
   closeViewer: "Close",
   photoOf: "Photo {n} of {count}",
@@ -281,11 +287,15 @@ var MEDIA_SCRIM = "rgba(0,0,0,0.5)";
 var MEDIA_SCRIM_LIGHT = "rgba(0,0,0,0.35)";
 var ON_TINT_FILL = "rgba(255,255,255,0.16)";
 var ON_TINT_FILL_STRONG = "rgba(255,255,255,0.2)";
-function splitCardAttachments(attachments, kinds) {
-  if (!kinds) return { cards: [], rest: [...attachments] };
+var BUILT_IN_KINDS = /* @__PURE__ */ new Set(["image", "voice", "video", "file", "link"]);
+function attachmentKindOf(kinds, kind) {
+  return kinds && Object.prototype.hasOwnProperty.call(kinds, kind) ? kinds[kind] : void 0;
+}
+function splitCardAttachments(attachments, kinds, slot = false) {
+  if (!kinds && !slot) return { cards: [], rest: [...attachments] };
   const cards = [];
   const rest = [];
-  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 };
 }
 function isOpenableHref(href) {
@@ -310,7 +320,63 @@ function cardAction(kind, attachment, message, onOpenAttachment, ctx = { mine: f
   const run = onPress ? onPress : onOpenAttachment ? () => onOpenAttachment(attachment, message) : href ? () => void Linking.openURL(href).catch(() => void 0) : null;
   return run ? { label: action.label, run } : null;
 }
-function ChatAttachmentCard({ attachment, message, kind, mine = false, onOpenAttachment, testID = "chat-attachment-card" }) {
+var IDLE = { pending: false, error: null };
+var CARD_ACTION_TIMEOUT_MS = 3e4;
+function useCardRuns(options) {
+  const { failedText, timedOutText = failedText, timeoutMs = CARD_ACTION_TIMEOUT_MS } = typeof options === "string" ? { failedText: options } : options;
+  const [states, setStates] = useState({});
+  const busy = useRef(/* @__PURE__ */ new Set());
+  const run = useCallback(
+    async (id, task) => {
+      if (busy.current.has(id)) return;
+      const failed = (e, 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;
+      try {
+        result = task();
+      } catch (e) {
+        failed(e);
+        return;
+      }
+      if (!result || typeof result.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 = /* @__PURE__ */ Symbol("timed out");
+      let timer;
+      const limit = timeoutMs > 0 ? new Promise((resolve) => timer = setTimeout(() => resolve(TIMED_OUT), timeoutMs)) : null;
+      try {
+        const settled = await (limit ? Promise.race([result, limit]) : result);
+        if (settled === TIMED_OUT) {
+          failed(new Error(`timed out after ${timeoutMs} ms`), timedOutText);
+          void Promise.resolve(result).catch(() => void 0);
+        } else setStates((s) => ({ ...s, [id]: IDLE }));
+      } catch (e) {
+        failed(e);
+      } finally {
+        if (timer !== void 0) clearTimeout(timer);
+        busy.current.delete(id);
+      }
+    },
+    [failedText, timedOutText, timeoutMs]
+  );
+  const stateOf = useCallback((id) => states[id] ?? IDLE, [states]);
+  return { stateOf, run };
+}
+function slotUrl(url) {
+  if (!url) return null;
+  try {
+    const u = new URL(url);
+    return (u.protocol === "https:" || u.protocol === "http:") && u.hostname ? url : null;
+  } catch {
+    return null;
+  }
+}
+function ChatAttachmentCard({ attachment, message, kind, mine = false, onOpenAttachment, run, state = IDLE, testID = "chat-attachment-card" }) {
   const { copy } = useChatNative();
   const colors = useThemeRoles();
   let title = "";
@@ -325,31 +391,82 @@ function ChatAttachmentCard({ attachment, message, kind, mine = false, onOpenAtt
   title = title || attachment.name || attachment.kind;
   const action = cardAction(kind, attachment, message, onOpenAttachment, ctx);
   const fg = mine ? "text-primary-foreground" : void 0;
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      testID,
-      style: { flexDirection: "row", alignItems: "center", gap: 10, padding: 10, borderRadius: 12, minWidth: 220, backgroundColor: mine ? ON_TINT_FILL : colors.groupedBackground },
-      children: [
-        /* @__PURE__ */ jsxs(
-          View,
-          {
-            accessible: true,
-            accessibilityLabel: subtitle ? fill(copy.attachmentCard, { title, subtitle }) : title,
-            style: { flexDirection: "row", alignItems: "center", gap: 10, flex: 1 },
-            children: [
-              /* @__PURE__ */ jsx(View, { style: { width: 40, height: 40, borderRadius: 10, alignItems: "center", justifyContent: "center", backgroundColor: mine ? ON_TINT_FILL_STRONG : colors.fill }, children: /* @__PURE__ */ jsx(NativeIcon, { name: "file", size: 20, color: mine ? colors.surface : colors.tint }) }),
-              /* @__PURE__ */ jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx(NativeText, { numberOfLines: 1, className: fg, style: mine ? { fontWeight: "600", fontSize: 15 } : { fontWeight: "600", fontSize: 15, color: colors.label }, children: title }),
-                subtitle ? /* @__PURE__ */ jsx(NativeText, { preset: "caption", numberOfLines: 1, className: fg, style: mine ? { opacity: 0.85 } : { color: colors.secondaryLabel }, children: subtitle }) : null
-              ] })
-            ]
-          }
-        ),
-        action ? /* @__PURE__ */ jsx(NativeButton, { testID: `${testID}-action`, variant: mine ? "secondary" : "default", onPress: action.run, children: action.label }) : null
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(View, { testID, style: { gap: 4, minWidth: 220 }, children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: { flexDirection: "row", alignItems: "center", gap: 10, padding: 10, borderRadius: 12, backgroundColor: mine ? ON_TINT_FILL : colors.groupedBackground },
+        children: [
+          /* @__PURE__ */ jsxs(
+            View,
+            {
+              accessible: true,
+              accessibilityLabel: subtitle ? fill(copy.attachmentCard, { title, subtitle }) : title,
+              style: { flexDirection: "row", alignItems: "center", gap: 10, flex: 1 },
+              children: [
+                /* @__PURE__ */ jsx(View, { style: { width: 40, height: 40, borderRadius: 10, alignItems: "center", justifyContent: "center", backgroundColor: mine ? ON_TINT_FILL_STRONG : colors.fill }, children: /* @__PURE__ */ jsx(NativeIcon, { name: "file", size: 20, color: mine ? colors.surface : colors.tint }) }),
+                /* @__PURE__ */ jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx(NativeText, { numberOfLines: 1, className: fg, style: mine ? { fontWeight: "600", fontSize: 15 } : { fontWeight: "600", fontSize: 15, color: colors.label }, children: title }),
+                  subtitle ? /* @__PURE__ */ jsx(NativeText, { preset: "caption", numberOfLines: 1, className: fg, style: mine ? { opacity: 0.85 } : { color: colors.secondaryLabel }, children: subtitle }) : null
+                ] })
+              ]
+            }
+          ),
+          action ? /* @__PURE__ */ jsx(
+            NativeButton,
+            {
+              testID: `${testID}-action`,
+              variant: mine ? "secondary" : "default",
+              className: "h-11",
+              loading: state.pending,
+              onPress: () => run ? run(action.run) : action.run(),
+              children: action.label
+            }
+          ) : null
+        ]
+      }
+    ),
+    state.error ? /* @__PURE__ */ jsx(CardError, { text: state.error, mine, testID: `${testID}-error` }) : null
+  ] });
+}
+function CardError({ text, mine, testID }) {
+  const colors = useThemeRoles();
+  return /* @__PURE__ */ jsx(NativeText, { testID, preset: "caption", accessibilityLiveRegion: "polite", className: mine ? "text-primary-foreground" : void 0, style: mine ? { paddingHorizontal: 4 } : { paddingHorizontal: 4, color: colors.destructive }, children: text });
+}
+function AppAttachment({ attachment, message, kind, url, mine, slot, onOpenAttachment, onEmpty, run, state, testID }) {
+  const hidden = slot === null && !kind;
+  useLayoutEffect(() => {
+    if (slot === null || slot === void 0) onEmpty?.(attachment.id, hidden);
+  }, [slot, hidden, attachment.id, onEmpty]);
+  const fallback = /* @__PURE__ */ jsx(ChatAttachmentCard, { attachment, message, kind, mine, onOpenAttachment, run, state, testID });
+  if (slot === void 0) 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 = { attachment, message, url: slotUrl(url), mine, kind, action, run, pending: state.pending, error: state.error, fallback, testID };
+  return /* @__PURE__ */ jsx(ChatErrorBoundary, { fallback: /* @__PURE__ */ jsx(Reported, { id: attachment.id, empty: false, onEmpty, children: fallback }), resetKeys: [attachment, message, kind, slot], children: /* @__PURE__ */ jsx(SlotProbe, { slot, props, onEmpty }, slotKey(slot)) });
+}
+var slotKeys = /* @__PURE__ */ new WeakMap();
+var nextSlotKey = 0;
+function slotKey(slot) {
+  let k = slotKeys.get(slot);
+  if (k === void 0) slotKeys.set(slot, k = ++nextSlotKey);
+  return k;
+}
+function isPlainFunction(slot) {
+  return typeof slot === "function" && !slot.prototype?.isReactComponent;
+}
+function SlotProbe({ slot, props, onEmpty }) {
+  const Slot = slot;
+  const out = isPlainFunction(slot) ? slot(props) : /* @__PURE__ */ jsx(Slot, { ...props });
+  const empty = out === null || out === void 0 || out === false;
+  return /* @__PURE__ */ jsx(Reported, { id: props.attachment.id, empty, onEmpty, children: empty ? null : out });
+}
+function Reported({ id, empty, onEmpty, children }) {
+  useLayoutEffect(() => {
+    onEmpty?.(id, empty);
+  }, [id, empty, onEmpty]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function linkHost(url) {
   try {
@@ -941,7 +1058,9 @@ function fromServer(a, urls) {
     provider: a.provider,
     playbackId: a.playbackId,
     status: a.status,
-    posterUri: a.posterPath ? urls[a.posterPath] ?? null : null
+    posterUri: a.posterPath ? urls[a.posterPath] ?? null : null,
+    transcript: a.transcript,
+    transcriptStatus: a.transcriptStatus
   };
 }
 function fromPending(clientId, index2, file, preview) {
@@ -1013,7 +1132,10 @@ function MessageAttachments({ attachments, mine, onOpenImage, testID }) {
       );
     }) }) : null,
     others.map(
-      (a, i) => a.kind === "voice" ? /* @__PURE__ */ jsx(VoiceNotePlayer, { id: a.key, uri: a.uri, durationMs: a.durationMs, waveform: a.waveform, mine, testID: `${testID}-voice-${i}` }, a.key) : a.kind === "video" && modules.video ? /* @__PURE__ */ jsx(
+      (a, i) => a.kind === "voice" ? /* @__PURE__ */ jsxs(View, { style: { gap: 2 }, children: [
+        /* @__PURE__ */ jsx(VoiceNotePlayer, { id: a.key, uri: a.uri, durationMs: a.durationMs, waveform: a.waveform, mine, testID: `${testID}-voice-${i}` }),
+        /* @__PURE__ */ jsx(VoiceTranscript, { transcript: a.transcript, status: a.transcriptStatus, mine, testID: `${testID}-voice-${i}-transcript` })
+      ] }, a.key) : a.kind === "video" && modules.video ? /* @__PURE__ */ jsx(
         ChatVideoPlayer,
         {
           id: a.key,
@@ -1046,6 +1168,53 @@ function MessageAttachments({ attachments, mine, onOpenImage, testID }) {
     )
   ] });
 }
+var TRANSCRIPT_LINES = 3;
+function transcriptIsLong(text, measuredLines) {
+  if (typeof measuredLines === "number") return measuredLines > TRANSCRIPT_LINES;
+  return text.length > 140 || text.split("\n").length > TRANSCRIPT_LINES;
+}
+function VoiceTranscript({ transcript, status, mine, testID }) {
+  const { copy } = useChatNative();
+  const colors = useThemeRoles();
+  const [open, setOpen] = useState(false);
+  const [lines, setLines] = useState(null);
+  const fg = mine ? "text-primary-foreground" : void 0;
+  const text = transcript?.trim();
+  if (status === "pending" && !text) {
+    return /* @__PURE__ */ jsx(NativeText, { testID, preset: "caption", className: fg, style: mine ? { fontStyle: "italic", opacity: 0.85, paddingHorizontal: 8 } : { fontStyle: "italic", color: colors.secondaryLabel, paddingHorizontal: 8 }, children: copy.transcribing });
+  }
+  if (!text) return null;
+  const long = transcriptIsLong(text, lines);
+  const textStyle = mine ? { fontSize: 15, lineHeight: 20 } : { fontSize: 15, lineHeight: 20, color: colors.label };
+  return /* @__PURE__ */ jsxs(View, { testID, style: { paddingHorizontal: 8, alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ jsx(NativeText, { testID: `${testID}-text`, className: fg, numberOfLines: open || !long ? void 0 : TRANSCRIPT_LINES, style: textStyle, children: text }),
+    /* @__PURE__ */ jsx(
+      NativeText,
+      {
+        testID: `${testID}-measure`,
+        "aria-hidden": true,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        onTextLayout: (e) => setLines(e.nativeEvent.lines.length),
+        style: [textStyle, { position: "absolute", left: 8, right: 8, top: 0, opacity: 0 }],
+        pointerEvents: "none",
+        children: text
+      }
+    ),
+    long ? /* @__PURE__ */ jsx(
+      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" },
+        children: /* @__PURE__ */ jsx(NativeText, { preset: "caption", className: fg, style: mine ? { fontWeight: "600" } : { fontWeight: "600", color: colors.tint }, children: open ? copy.showLess : copy.showMore })
+      }
+    ) : null
+  ] });
+}
 function moderationNote(message, opts) {
   if (!message || message.deletedAt) return null;
   if (message.moderation === "hidden") return opts.mine && !opts.observer ? "hidden-mine" : "hidden";
@@ -1087,10 +1256,23 @@ function MessageBubbleImpl(props) {
   const sender = person(row.senderId);
   const senderName = mine ? copy.you : sender?.name ?? "";
   const kinds = props.attachmentKinds;
+  const slot = props.attachmentSlot;
   const { cards, rest: plain } = useMemo(
-    () => splitCardAttachments(message && !message.deletedAt ? message.attachments : [], kinds),
-    [message, kinds]
+    () => splitCardAttachments(message && !message.deletedAt ? message.attachments : [], kinds, slot !== void 0),
+    [message, kinds, slot]
   );
+  const runs = useCardRuns({ failedText: copy.cardActionFailed, timedOutText: copy.cardActionTimedOut, timeoutMs: props.cardActionTimeoutMs });
+  const [empty, setEmpty] = useState(() => /* @__PURE__ */ new Set());
+  const onEmpty = useCallback((id, isEmpty) => {
+    setEmpty((s) => {
+      if (s.has(id) === isEmpty) return s;
+      const next = new Set(s);
+      if (isEmpty) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }, []);
+  const shownCards = cards.filter((a) => !empty.has(a.id));
   const attachments = useMemo(() => {
     if (message) return message.deletedAt ? [] : plain.map((a) => fromServer(a, urls));
     return [
@@ -1103,7 +1285,11 @@ function MessageBubbleImpl(props) {
   const photos = attachments.filter((a) => a.kind === "image" && a.uri && props.onOpenImage);
   const videos = attachments.filter((a) => a.kind === "video" && modules.video && (a.uri || a.playbackId));
   const playingVideo = usePlayingVideo(videos.map((a) => a.key));
-  const cardActions = message ? cards.map((a) => cardAction(kinds?.[a.kind], a, message, props.onOpenAttachment, { mine })) : [];
+  const cardActions = message ? cards.map((a) => {
+    if (empty.has(a.id)) return null;
+    const c = cardAction(attachmentKindOf(kinds, a.kind), a, message, props.onOpenAttachment, { mine });
+    return c ? { label: c.label, run: () => void runs.run(a.id, c.run) } : null;
+  }) : [];
   const playingVoice = usePlayingVoiceNote(voices.map((a) => a.key));
   const x = useRef(new Animated.Value(0)).current;
   const latest = useRef(props);
@@ -1144,8 +1330,13 @@ function MessageBubbleImpl(props) {
   const label = [
     senderName,
     message?.deletedAt ? copy.deleted : displayBody(body),
-    attachments.map((a) => a.kind === "image" ? copy.photo : a.kind === "voice" ? copy.voice : a.kind === "video" ? copy.video : copy.file).join(", "),
-    cards.map((a) => cardTitle(kinds?.[a.kind], a, { mine })).join(", "),
+    attachments.map(
+      (a) => a.kind === "image" ? copy.photo : a.kind === "voice" ? [copy.voice, a.transcript?.trim() ? fill(copy.transcriptLabel, { text: a.transcript.trim() }) : null].filter(Boolean).join(", ") : a.kind === "video" ? copy.video : copy.file
+    ).join(", "),
+    shownCards.map((a) => {
+      const s = runs.stateOf(a.id);
+      return [cardTitle(attachmentKindOf(kinds, a.kind), a, { mine }), s.error].filter(Boolean).join(", ");
+    }).join(", "),
     preview ? fill(copy.linkPreview, { title: preview.title?.trim() || linkHost(preview.url), site: preview.siteName?.trim() || linkHost(preview.url) }) : null,
     time,
     message?.editedAt ? copy.edited : null,
@@ -1196,94 +1387,120 @@ function MessageBubbleImpl(props) {
   };
   const quote = message?.replyToId ?? pending?.input.replyToId ?? null;
   const quoted = quote && repliedTo ? repliedTo : null;
+  const invisible = Boolean(message && !message.deletedAt && !body && !attachments.length && !preview && !quote && !moderation && cards.length && !shownCards.length);
   const bubbleColor = mine ? colors.tint : colors.surface;
   const fg = mine ? "text-primary-foreground" : void 0;
   const textStyle = mine ? { fontSize: 17, lineHeight: 22 } : { fontSize: 17, lineHeight: 22, color: colors.label };
-  return /* @__PURE__ */ jsxs(View, { testID, style: { paddingHorizontal: 8, paddingTop: row.groupStart ? 8 : 2, backgroundColor: props.highlighted ? colors.fill : void 0 }, children: [
-    row.showName && sender?.name ? /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { marginLeft: group ? 48 : 12, marginBottom: 2, color: colors.secondaryLabel }, children: sender.name }) : null,
-    /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "flex-end", justifyContent: mine ? "flex-end" : "flex-start" }, children: [
-      group && !mine ? /* @__PURE__ */ jsx(View, { style: { width: 40, alignItems: "flex-start" }, children: row.showAvatar ? /* @__PURE__ */ jsx(NativeAvatar, { size: 32, src: sender?.avatarUrl ?? null, fallback: initials(sender?.name), alt: sender?.name, recyclingKey: row.senderId ?? void 0 }) : null }) : null,
-      /* @__PURE__ */ jsx(
-        Animated.View,
-        {
-          style: { maxWidth: "80%", transform: [{ translateX: x }] },
-          ...canSwipe ? responder.panHandlers : {},
-          children: /* @__PURE__ */ jsxs(
-            Pressable,
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      accessibilityElementsHidden: invisible || void 0,
+      importantForAccessibility: invisible ? "no-hide-descendants" : void 0,
+      style: { paddingHorizontal: 8, paddingTop: row.groupStart ? 8 : 2, backgroundColor: props.highlighted ? colors.fill : void 0, display: invisible ? "none" : void 0 },
+      children: [
+        row.showName && sender?.name ? /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { marginLeft: group ? 48 : 12, marginBottom: 2, color: colors.secondaryLabel }, children: sender.name }) : null,
+        /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "flex-end", justifyContent: mine ? "flex-end" : "flex-start" }, children: [
+          group && !mine ? /* @__PURE__ */ jsx(View, { style: { width: 40, alignItems: "flex-start" }, children: row.showAvatar ? /* @__PURE__ */ jsx(NativeAvatar, { size: 32, src: sender?.avatarUrl ?? null, fallback: initials(sender?.name), alt: sender?.name, recyclingKey: row.senderId ?? void 0 }) : null }) : null,
+          /* @__PURE__ */ jsx(
+            Animated.View,
             {
-              testID: `${testID}-bubble`,
-              accessible: true,
-              accessibilityLabel: label,
-              accessibilityHint: failed ? copy.retry : void 0,
-              accessibilityActions: actions,
-              onAccessibilityAction: (e) => onAction(e.nativeEvent.actionName),
-              onLongPress: message && !message.deletedAt ? () => props.onLongPress?.(message) : void 0,
-              delayLongPress: 350,
-              style: {
-                paddingHorizontal: attachments.length && !body ? 4 : 12,
-                paddingVertical: attachments.length && !body ? 4 : 8,
-                borderRadius: 18,
-                backgroundColor: bubbleColor,
-                opacity: sending ? 0.6 : moderation === "hidden-mine" ? 0.7 : 1,
-                gap: 4
-              },
-              children: [
-                quote ? /* @__PURE__ */ jsxs(
-                  View,
-                  {
-                    testID: `${testID}-quote`,
-                    style: { borderLeftWidth: 3, borderLeftColor: mine ? colors.surface : colors.tint, paddingLeft: 8, paddingVertical: 2, opacity: 0.85 },
-                    children: [
-                      /* @__PURE__ */ jsx(NativeText, { preset: "caption", className: fg, style: mine ? { fontWeight: "600" } : { fontWeight: "600", color: colors.secondaryLabel }, children: quoted ? quoted.senderId === me ? copy.you : person(quoted.senderId)?.name ?? "" : "" }),
-                      /* @__PURE__ */ jsx(NativeText, { preset: "caption", numberOfLines: 2, className: fg, style: mine ? void 0 : { color: colors.secondaryLabel }, children: quoted ? previewText(quoted.body, quoted.attachments[0]?.kind, Boolean(quoted.deletedAt)) : "\u2026" })
-                    ]
-                  }
-                ) : null,
-                attachments.length ? /* @__PURE__ */ jsx(MessageAttachments, { attachments, mine, onOpenImage: props.onOpenImage, testID }) : null,
-                message && cards.length ? cards.map((a, i) => /* @__PURE__ */ jsx(ChatAttachmentCard, { attachment: a, message, kind: kinds[a.kind], mine, onOpenAttachment: props.onOpenAttachment, testID: `${testID}-card-${i}` }, a.id)) : null,
-                message?.deletedAt ? /* @__PURE__ */ jsx(NativeText, { className: fg, style: [textStyle, { fontStyle: "italic", opacity: 0.7 }], children: copy.deleted }) : body ? /* @__PURE__ */ jsx(NativeText, { className: fg, style: [textStyle, attachments.length ? { paddingHorizontal: 8, paddingBottom: 4 } : null], children: displayBody(body) }) : null,
-                moderation ? /* @__PURE__ */ jsx(ModerationMarker, { note: moderation, mine, testID: `${testID}-moderation` }) : null,
-                preview ? /* @__PURE__ */ jsx(ChatLinkPreviewCard, { preview, mine, images: props.linkPreviewImages, testID: `${testID}-preview` }) : null
-              ]
+              style: { maxWidth: "80%", transform: [{ translateX: x }] },
+              ...canSwipe ? responder.panHandlers : {},
+              children: /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  testID: `${testID}-bubble`,
+                  accessible: true,
+                  accessibilityLabel: label,
+                  accessibilityHint: failed ? copy.retry : void 0,
+                  accessibilityActions: actions,
+                  onAccessibilityAction: (e) => onAction(e.nativeEvent.actionName),
+                  onLongPress: message && !message.deletedAt ? () => props.onLongPress?.(message) : void 0,
+                  delayLongPress: 350,
+                  style: {
+                    paddingHorizontal: attachments.length && !body ? 4 : 12,
+                    paddingVertical: attachments.length && !body ? 4 : 8,
+                    borderRadius: 18,
+                    backgroundColor: bubbleColor,
+                    opacity: sending ? 0.6 : moderation === "hidden-mine" ? 0.7 : 1,
+                    gap: 4
+                  },
+                  children: [
+                    quote ? /* @__PURE__ */ jsxs(
+                      View,
+                      {
+                        testID: `${testID}-quote`,
+                        style: { borderLeftWidth: 3, borderLeftColor: mine ? colors.surface : colors.tint, paddingLeft: 8, paddingVertical: 2, opacity: 0.85 },
+                        children: [
+                          /* @__PURE__ */ jsx(NativeText, { preset: "caption", className: fg, style: mine ? { fontWeight: "600" } : { fontWeight: "600", color: colors.secondaryLabel }, children: quoted ? quoted.senderId === me ? copy.you : person(quoted.senderId)?.name ?? "" : "" }),
+                          /* @__PURE__ */ jsx(NativeText, { preset: "caption", numberOfLines: 2, className: fg, style: mine ? void 0 : { color: colors.secondaryLabel }, children: quoted ? attachmentPreview(displayBody(quoted.body), quoted.attachments[0], kinds, Boolean(quoted.deletedAt)) : "\u2026" })
+                        ]
+                      }
+                    ) : null,
+                    attachments.length ? /* @__PURE__ */ jsx(MessageAttachments, { attachments, mine, onOpenImage: props.onOpenImage, testID }) : null,
+                    message && cards.length ? cards.map((a, i) => /* @__PURE__ */ jsx(
+                      AppAttachment,
+                      {
+                        attachment: a,
+                        message,
+                        kind: attachmentKindOf(kinds, a.kind),
+                        url: (a.path ? urls[a.path] : null) ?? a.url ?? null,
+                        mine,
+                        slot,
+                        onOpenAttachment: props.onOpenAttachment,
+                        onEmpty,
+                        run: (task) => void runs.run(a.id, task),
+                        state: runs.stateOf(a.id),
+                        testID: `${testID}-card-${i}`
+                      },
+                      a.id
+                    )) : null,
+                    message?.deletedAt ? /* @__PURE__ */ jsx(NativeText, { className: fg, style: [textStyle, { fontStyle: "italic", opacity: 0.7 }], children: copy.deleted }) : body ? /* @__PURE__ */ jsx(NativeText, { className: fg, style: [textStyle, attachments.length ? { paddingHorizontal: 8, paddingBottom: 4 } : null], children: displayBody(body) }) : null,
+                    moderation ? /* @__PURE__ */ jsx(ModerationMarker, { note: moderation, mine, testID: `${testID}-moderation` }) : null,
+                    preview ? /* @__PURE__ */ jsx(ChatLinkPreviewCard, { preview, mine, images: props.linkPreviewImages, testID: `${testID}-preview` }) : null
+                  ]
+                }
+              )
             }
           )
-        }
-      )
-    ] }),
-    reactions.length ? /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 4, marginTop: 2, justifyContent: mine ? "flex-end" : "flex-start", marginLeft: group && !mine ? 40 : 0 }, children: reactions.map((r) => /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        testID: `${testID}-reaction-${r.emoji}`,
-        accessibilityRole: "button",
-        accessibilityState: { selected: r.mine },
-        accessibilityLabel: `${r.emoji} ${r.count}`,
-        disabled: !message || !props.onToggleReaction,
-        onPress: () => message && props.onToggleReaction?.(message, r.emoji, !r.mine),
-        hitSlop: 6,
-        style: {
-          flexDirection: "row",
-          alignItems: "center",
-          gap: 4,
-          minHeight: 32,
-          paddingHorizontal: 10,
-          borderRadius: 16,
-          backgroundColor: r.mine ? colors.fill : colors.surface,
-          borderWidth: r.mine ? 1 : 0,
-          borderColor: colors.tint
-        },
-        children: [
-          /* @__PURE__ */ jsx(NativeText, { style: { fontSize: 15 }, children: r.emoji }),
-          /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { color: colors.secondaryLabel }, children: String(r.count) })
-        ]
-      },
-      r.emoji
-    )) }) : null,
-    row.groupEnd || failed ? /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", justifyContent: mine ? "flex-end" : "flex-start", alignItems: "center", gap: 4, marginTop: 2, marginLeft: group && !mine ? 52 : 12, marginRight: 12 }, children: failed ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(NativeText, { testID: `${testID}-failed`, preset: "caption", style: { color: colors.destructive }, children: pending?.error ?? copy.notSent }),
-      lost ? props.onReattach ? /* @__PURE__ */ jsx(SmallAction, { testID: `${testID}-reattach`, label: copy.attachAgain, onPress: () => props.onReattach?.(pending.clientId, pending.files ?? []), color: colors.tint }) : null : /* @__PURE__ */ jsx(SmallAction, { testID: `${testID}-retry`, label: copy.retry, onPress: () => props.onRetry?.(pending.clientId), color: colors.tint }),
-      /* @__PURE__ */ jsx(SmallAction, { testID: `${testID}-discard`, label: copy.discard, onPress: () => props.onDiscard?.(pending.clientId), color: colors.destructive })
-    ] }) : /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { color: colors.tertiaryLabel }, children: [time, message?.editedAt ? copy.edited : null, sending ? copy.sending : null].filter(Boolean).join(" \xB7 ") }) }) : null
-  ] });
+        ] }),
+        reactions.length ? /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 4, marginTop: 2, justifyContent: mine ? "flex-end" : "flex-start", marginLeft: group && !mine ? 40 : 0 }, children: reactions.map((r) => /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            testID: `${testID}-reaction-${r.emoji}`,
+            accessibilityRole: "button",
+            accessibilityState: { selected: r.mine },
+            accessibilityLabel: `${r.emoji} ${r.count}`,
+            disabled: !message || !props.onToggleReaction,
+            onPress: () => message && props.onToggleReaction?.(message, r.emoji, !r.mine),
+            hitSlop: 6,
+            style: {
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 4,
+              minHeight: 32,
+              paddingHorizontal: 10,
+              borderRadius: 16,
+              backgroundColor: r.mine ? colors.fill : colors.surface,
+              borderWidth: r.mine ? 1 : 0,
+              borderColor: colors.tint
+            },
+            children: [
+              /* @__PURE__ */ jsx(NativeText, { style: { fontSize: 15 }, children: r.emoji }),
+              /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { color: colors.secondaryLabel }, children: String(r.count) })
+            ]
+          },
+          r.emoji
+        )) }) : null,
+        row.groupEnd || failed ? /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", justifyContent: mine ? "flex-end" : "flex-start", alignItems: "center", gap: 4, marginTop: 2, marginLeft: group && !mine ? 52 : 12, marginRight: 12 }, children: failed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(NativeText, { testID: `${testID}-failed`, preset: "caption", style: { color: colors.destructive }, children: pending?.error ?? copy.notSent }),
+          lost ? props.onReattach ? /* @__PURE__ */ jsx(SmallAction, { testID: `${testID}-reattach`, label: copy.attachAgain, onPress: () => props.onReattach?.(pending.clientId, pending.files ?? []), color: colors.tint }) : null : /* @__PURE__ */ jsx(SmallAction, { testID: `${testID}-retry`, label: copy.retry, onPress: () => props.onRetry?.(pending.clientId), color: colors.tint }),
+          /* @__PURE__ */ jsx(SmallAction, { testID: `${testID}-discard`, label: copy.discard, onPress: () => props.onDiscard?.(pending.clientId), color: colors.destructive })
+        ] }) : /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { color: colors.tertiaryLabel }, children: [time, message?.editedAt ? copy.edited : null, sending ? copy.sending : null].filter(Boolean).join(" \xB7 ") }) }) : null
+      ]
+    }
+  );
 }
 function SmallAction({ label, onPress, color, testID }) {
   return /* @__PURE__ */ jsx(Pressable, { testID, accessibilityRole: "button", accessibilityLabel: label, onPress, style: { minHeight: 44, minWidth: 44, paddingHorizontal: 8, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(NativeText, { preset: "label", style: { color }, children: label }) });
@@ -4134,6 +4351,8 @@ function ChatThreadScreen(props) {
   const { conversationId, threadRootId = null, keyboardVerticalOffset, onOpenAttachment, jumpTo, topic: topicProp, showTopics = false, scheduling = true, availability = true, focused = true, testID = "chat-thread" } = props;
   const chat = useChat();
   const { userId, videoUpload, attachmentKinds, outbox } = chat;
+  const attachmentSlot = props.slots?.attachment;
+  const cardActionTimeoutMs = props.cardActionTimeoutMs;
   const linkPreviewImages = chat.linkPreviewImages === true;
   const topicsState = useTopics(threadRootId ? null : conversationId);
   const [chosenTopic, setChosenTopic] = useState(null);
@@ -4214,9 +4433,9 @@ function ChatThreadScreen(props) {
   }, [modules.haptics, toast, copy.actionFailed]);
   const reply = useCallback(
     (m) => {
-      setReply(replyTargetFor(m, nameOf(m.senderId), previewText(displayBody(m.body), m.attachments[0]?.kind, Boolean(m.deletedAt))));
+      setReply(replyTargetFor(m, nameOf(m.senderId), attachmentPreview(displayBody(m.body), m.attachments[0], attachmentKinds, Boolean(m.deletedAt))));
     },
-    [setReply, nameOf]
+    [setReply, nameOf, attachmentKinds]
   );
   const onAction = useCallback(
     (m, action) => {
@@ -4313,7 +4532,7 @@ function ChatThreadScreen(props) {
     },
     onLanded: (id) => {
       const m = byId.get(id);
-      if (m) AccessibilityInfo.announceForAccessibility?.(fill(copy.jumpedTo, { name: nameOf(m.senderId), text: previewText(displayBody(m.body), m.attachments[0]?.kind, Boolean(m.deletedAt)) }));
+      if (m) AccessibilityInfo.announceForAccessibility?.(fill(copy.jumpedTo, { name: nameOf(m.senderId), text: attachmentPreview(displayBody(m.body), m.attachments[0], attachmentKinds, Boolean(m.deletedAt)) }));
     },
     onGone: () => {
       toast.show({ title: copy.messageGone });
@@ -4352,11 +4571,13 @@ function ChatThreadScreen(props) {
           linkPreviewImages,
           attachmentKinds,
           onOpenAttachment,
+          attachmentSlot,
+          cardActionTimeoutMs,
           testID: `${testID}-message-${m?.id ?? row.key}`
         }
       );
     },
-    [testID, copy.newMessages, userId, urls, byId, group, reducedMotion, onLongPress, allowed, reply, onSwipeReply, onRetry, onDiscard, react, onOpenImage, picker, reattachable, onReattach, previews, linkPreviewImages, attachmentKinds, onOpenAttachment, observer, highlightedId]
+    [testID, copy.newMessages, userId, urls, byId, group, reducedMotion, onLongPress, allowed, reply, onSwipeReply, onRetry, onDiscard, react, onOpenImage, picker, reattachable, onReattach, previews, linkPreviewImages, attachmentKinds, onOpenAttachment, attachmentSlot, cardActionTimeoutMs, observer, highlightedId]
   );
   const [videoOpen, setVideoOpen] = useState(false);
   const preparedVideo = useRef(null);
@@ -4949,59 +5170,61 @@ function ChatSearchScreen({ conversationId, onOpen, conversationTitle, debounceM
   useEffect(() => {
     if (announce) AccessibilityInfo.announceForAccessibility?.(announce);
   }, [announce]);
-  return /* @__PURE__ */ jsxs(SafeAreaView, { testID, edges: ["left", "right"], style: { flex: 1, backgroundColor: colors.groupedBackground }, children: [
-    /* @__PURE__ */ jsx(View, { style: { paddingHorizontal: 16, paddingVertical: 8 }, children: /* @__PURE__ */ jsx(
-      NativeSearchBar,
-      {
-        testID: `${testID}-field`,
-        value,
-        onChange: setValue,
-        placeholder: conversationId ? copy.searchThreadPlaceholder : copy.searchPlaceholder,
-        cancelLabel: copy.cancel,
-        showCancel: false
-      }
-    ) }),
-    short ? /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { paddingHorizontal: 20, color: colors.secondaryLabel }, testID: `${testID}-hint`, children: copy.searchHint }) : isSearching && hits.length === 0 ? /* @__PURE__ */ jsxs(View, { testID: `${testID}-loading`, style: { padding: 16, gap: 10 }, children: [
-      /* @__PURE__ */ jsx(NativeSkeleton, { height: 52, className: "w-full" }),
-      /* @__PURE__ */ jsx(NativeSkeleton, { height: 52, className: "w-full" })
-    ] }) : hits.length === 0 ? /* @__PURE__ */ jsx(NativeEmptyState, { variant: "no-results", title: copy.searchNoResults, body: fill(copy.searchNoResultsBody, { query }), testID: `${testID}-empty` }) : /* @__PURE__ */ jsx(
-      FlatList,
-      {
-        testID: `${testID}-results`,
-        data: hits,
-        keyExtractor: (h) => `${h.messageId}:${h.inTranscript}`,
-        keyboardShouldPersistTaps: "handled",
-        keyboardDismissMode: "on-drag",
-        renderItem: ({ item: h }) => {
-          const who = nameOf(h.senderId);
-          const where = conversationId ? null : fill(copy.searchIn, { name: titleOf(h.conversationId) });
-          const when = formatInboxTime(new Date(h.createdAt), now());
-          return /* @__PURE__ */ jsxs(
-            HitRow,
-            {
-              testID: `${testID}-hit-${h.messageId}`,
-              accessibilityLabel: [who, where, when, h.inTranscript ? copy.transcript : null, snippetText(h.snippet)].filter(Boolean).join(", "),
-              onPress: () => onOpen(h),
-              children: [
-                /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx(NativeText, { preset: "label", numberOfLines: 1, style: { flexShrink: 1 }, children: who }),
-                  where ? /* @__PURE__ */ jsx(NativeText, { preset: "caption", numberOfLines: 1, style: { flexShrink: 1, color: colors.secondaryLabel }, children: where }) : null,
-                  /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { marginLeft: "auto", color: colors.tertiaryLabel }, children: when })
-                ] }),
-                /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "flex-start", gap: 6 }, children: [
-                  h.inTranscript ? /* @__PURE__ */ jsx(NativeBadge, { variant: "muted", testID: `${testID}-transcript-${h.messageId}`, children: /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 3 }, children: [
-                    /* @__PURE__ */ jsx(NativeIcon, { name: "mic", size: 11, color: colors.secondaryLabel }),
-                    /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { color: colors.secondaryLabel }, children: copy.transcript })
-                  ] }) }) : null,
-                  /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(SearchSnippet, { snippet: h.snippet }) })
-                ] })
-              ]
-            }
-          );
-        }
+  const field = /* @__PURE__ */ jsx(View, { style: { paddingHorizontal: 16, paddingVertical: 8 }, children: /* @__PURE__ */ jsx(
+    NativeSearchBar,
+    {
+      testID: `${testID}-field`,
+      value,
+      onChange: setValue,
+      placeholder: conversationId ? copy.searchThreadPlaceholder : copy.searchPlaceholder,
+      cancelLabel: copy.cancel,
+      showCancel: false
+    }
+  ) });
+  const empty = short ? /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { paddingHorizontal: 20, color: colors.secondaryLabel }, testID: `${testID}-hint`, children: copy.searchHint }) : isSearching ? /* @__PURE__ */ jsxs(View, { testID: `${testID}-loading`, style: { padding: 16, gap: 10 }, children: [
+    /* @__PURE__ */ jsx(NativeSkeleton, { height: 52, className: "w-full" }),
+    /* @__PURE__ */ jsx(NativeSkeleton, { height: 52, className: "w-full" })
+  ] }) : /* @__PURE__ */ jsx(NativeEmptyState, { variant: "no-results", title: copy.searchNoResults, body: fill(copy.searchNoResultsBody, { query }), testID: `${testID}-empty` });
+  return /* @__PURE__ */ jsx(SafeAreaView, { testID, edges: ["left", "right"], style: { flex: 1, backgroundColor: colors.groupedBackground }, children: /* @__PURE__ */ jsx(
+    FlatList,
+    {
+      testID: `${testID}-results`,
+      data: short ? [] : hits,
+      keyExtractor: (h) => `${h.messageId}:${h.inTranscript}`,
+      contentInsetAdjustmentBehavior: "automatic",
+      keyboardShouldPersistTaps: "handled",
+      keyboardDismissMode: "on-drag",
+      ListHeaderComponent: field,
+      ListEmptyComponent: empty,
+      renderItem: ({ item: h }) => {
+        const who = nameOf(h.senderId);
+        const where = conversationId ? null : fill(copy.searchIn, { name: titleOf(h.conversationId) });
+        const when = formatInboxTime(new Date(h.createdAt), now());
+        return /* @__PURE__ */ jsxs(
+          HitRow,
+          {
+            testID: `${testID}-hit-${h.messageId}`,
+            accessibilityLabel: [who, where, when, h.inTranscript ? copy.transcript : null, snippetText(h.snippet)].filter(Boolean).join(", "),
+            onPress: () => onOpen(h),
+            children: [
+              /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [
+                /* @__PURE__ */ jsx(NativeText, { preset: "label", numberOfLines: 1, style: { flexShrink: 1 }, children: who }),
+                where ? /* @__PURE__ */ jsx(NativeText, { preset: "caption", numberOfLines: 1, style: { flexShrink: 1, color: colors.secondaryLabel }, children: where }) : null,
+                /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { marginLeft: "auto", color: colors.tertiaryLabel }, children: when })
+              ] }),
+              /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "flex-start", gap: 6 }, children: [
+                h.inTranscript ? /* @__PURE__ */ jsx(NativeBadge, { variant: "muted", testID: `${testID}-transcript-${h.messageId}`, children: /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 3 }, children: [
+                  /* @__PURE__ */ jsx(NativeIcon, { name: "mic", size: 11, color: colors.secondaryLabel }),
+                  /* @__PURE__ */ jsx(NativeText, { preset: "caption", style: { color: colors.secondaryLabel }, children: copy.transcript })
+                ] }) }) : null,
+                /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(SearchSnippet, { snippet: h.snippet }) })
+              ] })
+            ]
+          }
+        );
       }
-    )
-  ] });
+    }
+  ) });
 }
 function HitRow({ testID, accessibilityLabel, onPress, children }) {
   const colors = useThemeRoles();
@@ -5021,6 +5244,6 @@ function HitRow({ testID, accessibilityLabel, onPress, children }) {
   );
 }
 
-export { AT_BOTTOM_POINTS, ChatAccessError, ChatAttachmentCard, ChatAutoRetry, ChatAvailabilityScreen, ChatAwayLine, ChatBroadcastSheet, ChatComposer, ChatEmojiPicker, ChatEmojiPickerSheet, ChatIconButton, ChatInboxScreen, ChatLinkPreviewCard, ChatMediaViewer, ChatNativeProvider, ChatPhotoViewer, ChatScheduleSheet, ChatScheduledBar, ChatScheduledList, ChatSearchScreen, ChatStartButton, ChatStartSheet, ChatThreadScreen, ChatTopicBar, ChatVideoPlayer, ChatVideoRecorder, DISMISS_DISTANCE, DISMISS_VELOCITY, EMOJI_CATEGORIES, MAX_ZOOM, MessageActionsSheet, MessageAttachments, MessageBubble, ModerationMarker, QUICK_REACTIONS, RECENT_EMOJI_MAX, SearchSnippet, TUS_CHUNK_BYTES, VIDEO_CHUNK_BYTES, VIDEO_HOLD_MS, VIDEO_MIN_MS, VideoUploadTray, VoiceNotePlayer, activePlaybackId, attachmentPaths, availabilityInput, awayLineFor, barsThatFit, base64ToBytes, base64Utf8, broadcastOutcome, broadcastRows, buildThreadRows, canManageTopics, canReactTo, canSend, cardAction, chatNativeCopy, chatOrganiseCopy, chatThreadStackOptions, checkTopicName, chunkedPut, claimPlayback, clearDrafts, clockToDate, composerDisabledReason, composerReducer, createDraftSaver, createTusUpload, createVideoUploads, cycleVideoRate, cycleVoiceNoteRate, dateToClock, defaultScheduleAt, defaultWeek, deviceTimeZone, displayBody, draftKey, emojiEntry, emojiInCategory, emptyComposer, fileFromDataUri, fileSource, filesFromAssets, fill, forgetRecentEmoji, formFrom, formatClock, fullScreenVideo, galleryFor, haptic, hoursFromWeek, idleRecorder, inboxRow, initialVideoRecorder, initials, insertAtSelection, invertedRows, isLocalUri, isOnline, isOpenableHref, isVideoPlaying, linkHost, linkPreviewIds, liveBars, loadDraft, loadRecentEmoji, memoryDraftStorage, messageActionsFor, moderationNote, moderationText, muxPosterUrl, muxStreamUrl, nearBottom, nextOffset, openChatLink, panLimit, pauseChatPlayback, pinchScale, previewToShow, pushRecentEmoji, recentEmojiKey, recordedVideoFile, recorderStep, recordingType, releasePlayback, replyTargetFor, resolveChatCopy, rowIndexOf, rowKey, sameTimeDays, saveRecentEmoji, scheduleInputFrom, scrubSeconds, searchEmoji, shouldDismiss, snippetText, splitCardAttachments, threadListMode, timeZones, toSend, toggleVideo, toggleVideoMute, toggleVoiceNote, topicClosedFor, topicMenuFor, useAwayLine, useChatAutoRetry, useChatComposer, useChatNative, useChatThreadStackOptions, useJumpToMessage, usePlayingVideo, usePlayingVoiceNote, useScheduleSend, useVideoUploads, useVoiceRecorder, videoRecorderStep, videoSource, videoState, videoUploads, voiceNoteFile, waveformBars, weekFromHours, withDay, withTime };
+export { AT_BOTTOM_POINTS, AppAttachment, BUILT_IN_KINDS, CARD_ACTION_TIMEOUT_MS, CardError, ChatAccessError, ChatAttachmentCard, ChatAutoRetry, ChatAvailabilityScreen, ChatAwayLine, ChatBroadcastSheet, ChatComposer, ChatEmojiPicker, ChatEmojiPickerSheet, ChatIconButton, ChatInboxScreen, ChatLinkPreviewCard, ChatMediaViewer, ChatNativeProvider, ChatPhotoViewer, ChatScheduleSheet, ChatScheduledBar, ChatScheduledList, ChatSearchScreen, ChatStartButton, ChatStartSheet, ChatThreadScreen, ChatTopicBar, ChatVideoPlayer, ChatVideoRecorder, DISMISS_DISTANCE, DISMISS_VELOCITY, EMOJI_CATEGORIES, MAX_ZOOM, MessageActionsSheet, MessageAttachments, MessageBubble, ModerationMarker, QUICK_REACTIONS, RECENT_EMOJI_MAX, SearchSnippet, TRANSCRIPT_LINES, TUS_CHUNK_BYTES, VIDEO_CHUNK_BYTES, VIDEO_HOLD_MS, VIDEO_MIN_MS, VideoUploadTray, VoiceNotePlayer, VoiceTranscript, activePlaybackId, attachmentKindOf, attachmentPaths, availabilityInput, awayLineFor, barsThatFit, base64ToBytes, base64Utf8, broadcastOutcome, broadcastRows, buildThreadRows, canManageTopics, canReactTo, canSend, cardAction, chatNativeCopy, chatOrganiseCopy, chatThreadStackOptions, checkTopicName, chunkedPut, claimPlayback, clearDrafts, clockToDate, composerDisabledReason, composerReducer, createDraftSaver, createTusUpload, createVideoUploads, cycleVideoRate, cycleVoiceNoteRate, dateToClock, defaultScheduleAt, defaultWeek, deviceTimeZone, displayBody, draftKey, emojiEntry, emojiInCategory, emptyComposer, fileFromDataUri, fileSource, filesFromAssets, fill, forgetRecentEmoji, formFrom, formatClock, fullScreenVideo, galleryFor, haptic, hoursFromWeek, idleRecorder, inboxRow, initialVideoRecorder, initials, insertAtSelection, invertedRows, isLocalUri, isOnline, isOpenableHref, isVideoPlaying, linkHost, linkPreviewIds, liveBars, loadDraft, loadRecentEmoji, memoryDraftStorage, messageActionsFor, moderationNote, moderationText, muxPosterUrl, muxStreamUrl, nearBottom, nextOffset, openChatLink, panLimit, pauseChatPlayback, pinchScale, previewToShow, pushRecentEmoji, recentEmojiKey, recordedVideoFile, recorderStep, recordingType, releasePlayback, replyTargetFor, resolveChatCopy, rowIndexOf, rowKey, sameTimeDays, saveRecentEmoji, scheduleInputFrom, scrubSeconds, searchEmoji, shouldDismiss, slotUrl, snippetText, splitCardAttachments, threadListMode, timeZones, toSend, toggleVideo, toggleVideoMute, toggleVoiceNote, topicClosedFor, topicMenuFor, transcriptIsLong, useAwayLine, useCardRuns, useChatAutoRetry, useChatComposer, useChatNative, useChatThreadStackOptions, useJumpToMessage, usePlayingVideo, usePlayingVoiceNote, useScheduleSend, useVideoUploads, useVoiceRecorder, videoRecorderStep, videoSource, videoState, videoUploads, voiceNoteFile, waveformBars, weekFromHours, withDay, withTime };
 //# sourceMappingURL=native.js.map
 //# sourceMappingURL=native.js.map