@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/chunk-SKWO3SZF.js

@@ -0,0 +1,2284 @@
+import { useThinkingPulse, Thinking } from './chunk-W74TXYFB.js';
+import { Markdown } from './chunk-SWS5JQIF.js';
+import { CopyButton } from './chunk-C6APNDVA.js';
+import { Skeleton } from './chunk-PNF3NKB5.js';
+import { useFormFactor } from './chunk-AWKQIE5I.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { springConfig, BREAKAWAY, resist, rubberband, useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React6 from 'react';
+import { Platform, UIManager, Animated, View, TextInput, Text, Pressable, Image, I18nManager, PanResponder, LayoutAnimation, Easing, ScrollView, AccessibilityInfo, KeyboardAvoidingView } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/chat/chat-labels.ts
+function formatChatDuration(ms) {
+  if (ms < 1e3) return `${Math.round(ms)}ms`;
+  const s = ms / 1e3;
+  if (s < 60) return `${s < 10 ? s.toFixed(1) : Math.round(s)}s`;
+  const m = Math.floor(s / 60);
+  return `${m}m ${String(Math.round(s % 60)).padStart(2, "0")}s`;
+}
+function formatChatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+var DEFAULT_CHAT_LABELS = {
+  chat: "Chat",
+  messages: "Messages",
+  emptyTitle: "How can I help?",
+  placeholder: "Send a message\u2026",
+  composer: "Message",
+  assistant: "Assistant",
+  you: "You",
+  attachFiles: "Attach files",
+  attachments: "Attachments",
+  dropFiles: "Drop files to attach",
+  send: "Send",
+  stop: "Stop",
+  replyingTo: (author) => `Replying to ${author}`,
+  cancelReply: "Cancel reply",
+  removeAttachment: (name) => `Remove ${name}`,
+  uploading: "Uploading\u2026",
+  uploadFailed: "Upload failed",
+  file: "File",
+  duration: formatChatDuration,
+  bytes: formatChatBytes,
+  elapsed: (s) => `${s}s`,
+  saidBy: (name) => `${name} said`,
+  responding: (name) => `${name} is responding\u2026`,
+  said: (name, text) => `${name} said: ${text}`,
+  stoppedAnnouncement: (name, text) => `${name} stopped. ${text}`,
+  stopped: "Stopped",
+  loadEarlier: "Load earlier messages",
+  loadingEarlier: "Loading earlier messages",
+  writing: "Writing\u2026",
+  newMessages: "New messages",
+  jumpToLatest: "Jump to latest",
+  followUps: "Suggested follow-ups",
+  copyMessage: "Copy message",
+  copy: "Copy",
+  copyResponse: "Copy response",
+  editMessage: "Edit message",
+  editNote: "Sending replaces this message and everything after it.",
+  editHint: "Long-press to edit",
+  reply: "Reply",
+  regenerate: "Regenerate",
+  retry: "Retry",
+  notSent: "Not sent.",
+  cancel: "Cancel",
+  goodResponse: "Good response",
+  badResponse: "Bad response",
+  feedbackTitle: "What went wrong?",
+  feedbackReasons: [
+    "Not accurate",
+    "Not helpful",
+    "Too long",
+    "Didn\u2019t follow instructions",
+    "Something else"
+  ],
+  feedbackNote: "Tell us more (optional)",
+  sendFeedback: "Send feedback",
+  thanks: "Thanks for the feedback.",
+  thinking: "Thinking\u2026",
+  reasoning: "Reasoning",
+  thoughtFor: (d) => `Thought for ${d}`,
+  steps: (n) => `${n} ${n === 1 ? "step" : "steps"}`,
+  working: (n) => `Working \xB7 ${n} ${n === 1 ? "step" : "steps"}`,
+  usedTools: (n, failed) => `Used ${n} ${n === 1 ? "tool" : "tools"}${failed ? ` \xB7 ${failed} failed` : ""}`,
+  toolRunning: "running",
+  toolDone: "done",
+  toolFailed: "failed",
+  moreSuggestions: "More suggestions",
+  previousSuggestions: "Previous suggestions",
+  suggestionsPage: (p, n) => `Suggestions page ${p} of ${n}`,
+  suggestionsPageOf: (p, n) => `Page ${p} of ${n}`,
+  loadingSuggestions: "Loading suggestions",
+  notUseful: "Not useful",
+  notUsefulFor: (label) => `Not useful: ${label}`,
+  why: (r) => `Why: ${r}`
+};
+if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+function useArrival(enabled, kind = "in", delayMs = 0) {
+  const theme = useLoamTheme("chat");
+  const [run] = React6.useState(enabled);
+  const p = React6.useRef(new Animated.Value(run ? 0 : 1)).current;
+  React6.useEffect(() => {
+    if (!run) return;
+    if (theme.reduceMotion) {
+      Animated.timing(p, { toValue: 1, duration: theme.duration.fast, delay: delayMs, useNativeDriver: true }).start();
+      return;
+    }
+    Animated.sequence([
+      Animated.delay(delayMs),
+      Animated.spring(p, { ...springConfig(theme, "ds"), toValue: 1, useNativeDriver: true })
+    ]).start();
+  }, [run, p, delayMs, theme]);
+  if (!run) return void 0;
+  if (theme.reduceMotion) return { opacity: p };
+  const rise = 8;
+  const scale = kind === "sent" ? 0.96 : kind === "card" ? 0.985 : 1;
+  return {
+    opacity: p.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: "clamp" }),
+    transform: [
+      { translateY: p.interpolate({ inputRange: [0, 1], outputRange: [rise, 0] }) },
+      { scale: p.interpolate({ inputRange: [0, 1], outputRange: [scale, 1] }) }
+    ]
+  };
+}
+function useAutoDisclosure(live, animate) {
+  const theme = useLoamTheme("chat");
+  const [open, setOpen] = React6.useState(live);
+  const owned = React6.useRef(false);
+  const ease = React6.useCallback(() => {
+    if (!animate) return;
+    const duration = theme.motion.expand.duration;
+    LayoutAnimation.configureNext({
+      duration,
+      update: { type: LayoutAnimation.Types.easeInEaseOut },
+      create: { type: LayoutAnimation.Types.easeInEaseOut, property: LayoutAnimation.Properties.opacity, duration },
+      delete: { type: LayoutAnimation.Types.easeInEaseOut, property: LayoutAnimation.Properties.opacity, duration }
+    });
+  }, [animate, theme.motion.expand.duration]);
+  React6.useEffect(() => {
+    if (owned.current) return;
+    ease();
+    setOpen(live);
+  }, [live, ease]);
+  const toggle = React6.useCallback(() => {
+    owned.current = true;
+    ease();
+    setOpen((o) => !o);
+  }, [ease]);
+  return [open, toggle];
+}
+function Disclosure({
+  open,
+  onToggle,
+  summary,
+  icon,
+  shimmer,
+  children
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("chat");
+  const pulse = useThinkingPulse(shimmer);
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        role: "button",
+        accessibilityRole: "button",
+        accessibilityLabel: summary,
+        ...expandedProps(open),
+        accessibilityState: { expanded: open },
+        onPress: onToggle,
+        hitSlop: theme.space[2],
+        style: styles.summary,
+        children: [
+          icon,
+          /* @__PURE__ */ jsx(Animated.Text, { style: [styles.summaryText, pulse], children: summary }),
+          /* @__PURE__ */ jsx(View, { style: { transform: [{ rotate: open ? "90deg" : "0deg" }] }, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.xs, color: theme.color.text3 }) })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(View, { style: styles.panel, children }) : null
+  ] });
+}
+function ReasoningView({
+  part,
+  live,
+  animate,
+  labels: labelsProp
+}) {
+  const labels = useLabels("chat", DEFAULT_CHAT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("chat");
+  const [open, toggle] = useAutoDisclosure(live, animate);
+  const summary = live ? labels.thinking : part.durationMs != null ? labels.thoughtFor(labels.duration(part.durationMs)) : labels.reasoning;
+  return /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      open,
+      onToggle: toggle,
+      summary,
+      shimmer: live && animate,
+      icon: /* @__PURE__ */ jsx(Icon, { name: "brain", size: theme.icon.sm, color: theme.color.text3 }),
+      children: /* @__PURE__ */ jsx(View, { style: styles.rail, children: /* @__PURE__ */ jsx(Text, { style: styles.reasoning, children: part.text }) })
+    }
+  );
+}
+function ToolMark({ status, animate }) {
+  const theme = useLoamTheme("chat");
+  const pop = React6.useRef(new Animated.Value(status === "running" || !animate ? 1 : 0)).current;
+  const prev = React6.useRef(status);
+  React6.useEffect(() => {
+    if (prev.current === "running" && status !== "running" && animate) {
+      pop.setValue(0);
+      Animated.spring(pop, { toValue: 1, useNativeDriver: true, speed: 18, bounciness: 10 }).start();
+    }
+    prev.current = status;
+  }, [status, animate, pop]);
+  if (status === "running") {
+    return /* @__PURE__ */ jsx(Thinking, { label: "", size: "sm", announce: false, motion: animate ? "full" : "none" });
+  }
+  return /* @__PURE__ */ jsx(Animated.View, { style: { opacity: pop, transform: [{ scale: pop.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] }) }] }, children: /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: status === "error" ? "x" : "check",
+      size: theme.icon.xs,
+      color: status === "error" ? theme.color.danger : theme.color.good
+    }
+  ) });
+}
+function ToolGroupView({
+  tools,
+  animate,
+  labels: labelsProp
+}) {
+  const labels = useLabels("chat", DEFAULT_CHAT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("chat");
+  const running = tools.some((t) => t.status === "running");
+  const failed = tools.filter((t) => t.status === "error").length;
+  const [open, toggle] = useAutoDisclosure(running, animate);
+  const n = tools.length;
+  const summary = running ? labels.working(n) : labels.usedTools(n, failed);
+  return /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      open,
+      onToggle: toggle,
+      summary,
+      shimmer: running && animate,
+      icon: /* @__PURE__ */ jsx(Icon, { name: "wrench", size: theme.icon.sm, color: theme.color.text3 }),
+      children: /* @__PURE__ */ jsx(View, { accessibilityRole: "list", children: tools.map((tool, i) => /* @__PURE__ */ jsxs(View, { role: "listitem", style: styles.step, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.nodeCol, children: [
+          i > 0 ? /* @__PURE__ */ jsx(View, { style: [styles.line, styles.lineTop] }) : null,
+          i < n - 1 ? /* @__PURE__ */ jsx(View, { style: [styles.line, styles.lineBottom] }) : null,
+          /* @__PURE__ */ jsx(View, { style: styles.node, children: /* @__PURE__ */ jsx(Icon, { name: tool.icon ?? "wrench", size: theme.icon.xs, color: theme.color.text3 }) })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.stepBody, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.stepHead, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.stepTitle, numberOfLines: 2, children: tool.title }),
+            /* @__PURE__ */ jsx(ToolMark, { status: tool.status, animate }),
+            tool.durationMs != null && tool.status !== "running" ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: labels.duration(tool.durationMs) }) : null
+          ] }),
+          tool.detail ? /* @__PURE__ */ jsx(Text, { style: styles.meta, numberOfLines: 2, children: tool.detail }) : null
+        ] })
+      ] }, tool.id)) })
+    }
+  );
+}
+function WorkingIndicator({
+  phase: phaseProp,
+  startedAt,
+  animate,
+  labels: labelsProp
+}) {
+  const labels = useLabels("chat", DEFAULT_CHAT_LABELS, labelsProp);
+  const phase = phaseProp ?? labels.thinking;
+  const { styles } = useStyles(sheet);
+  const pulse = useThinkingPulse(animate);
+  const [now, setNow] = React6.useState(() => Date.now());
+  React6.useEffect(() => {
+    if (startedAt == null) return;
+    const id = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(id);
+  }, [startedAt]);
+  const elapsed = startedAt != null ? Math.max(0, Math.floor((now - startedAt) / 1e3)) : null;
+  return /* @__PURE__ */ jsxs(View, { style: styles.working, role: "status", accessibilityLabel: phase, children: [
+    /* @__PURE__ */ jsx(Thinking, { label: "", size: "sm", announce: false, motion: animate ? "full" : "none" }),
+    /* @__PURE__ */ jsx(Animated.Text, { style: [styles.summaryText, pulse], children: phase }),
+    elapsed != null && elapsed > 0 ? /* @__PURE__ */ jsxs(Text, { style: styles.meta, children: [
+      "\xB7 ",
+      labels.elapsed(elapsed)
+    ] }) : null
+  ] });
+}
+function AttachmentChip({
+  attachment,
+  onRemove,
+  labels: labelsProp
+}) {
+  const labels = useLabels("chat", DEFAULT_CHAT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("chat");
+  const status = attachment.status ?? "done";
+  const image = attachment.type?.startsWith("image/") && attachment.previewUrl;
+  const sub = status === "uploading" ? labels.uploading : status === "error" ? labels.uploadFailed : attachment.size != null ? labels.bytes(attachment.size) : void 0;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.chip, status === "error" && styles.chipError], children: [
+    image ? /* @__PURE__ */ jsx(Image, { source: { uri: attachment.previewUrl }, style: styles.thumb, accessibilityIgnoresInvertColors: true }) : /* @__PURE__ */ jsx(View, { style: styles.fileIcon, children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        name: status === "uploading" ? "loader" : "file",
+        size: theme.icon.sm,
+        color: theme.color.text2
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(View, { style: styles.chipText, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.chipName, numberOfLines: 1, children: attachment.name }),
+      sub ? /* @__PURE__ */ jsx(Text, { style: [styles.meta, status === "error" && { color: theme.color.danger }], children: sub }) : null
+    ] }),
+    onRemove ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.removeAttachment(attachment.name),
+        onPress: onRemove,
+        hitSlop: theme.space[3],
+        style: styles.remove,
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.xs, color: theme.color.text3 })
+      }
+    ) : null
+  ] });
+}
+var NODE = 24;
+var sheet = createStyleSheet((theme) => ({
+  summary: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: theme.space.s2,
+    paddingVertical: theme.space[2]
+  },
+  summaryText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  panel: { paddingTop: theme.space.s2 },
+  rail: {
+    borderLeftWidth: theme.borderWidth.base,
+    borderLeftColor: theme.color.border,
+    paddingLeft: theme.space.s3,
+    marginLeft: theme.space[6]
+  },
+  reasoning: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  step: { flexDirection: "row", gap: theme.space.s3, paddingVertical: theme.space[6] },
+  nodeCol: { width: NODE, alignItems: "center" },
+  line: {
+    position: "absolute",
+    width: theme.borderWidth.base,
+    backgroundColor: theme.color.border,
+    left: (NODE - theme.borderWidth.base) / 2
+  },
+  lineTop: { top: -theme.space[6], height: theme.space[6] + theme.space[2] },
+  lineBottom: { top: theme.space[2] + NODE, bottom: -theme.space[6] },
+  node: {
+    marginTop: theme.space[2],
+    width: NODE,
+    height: NODE,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  stepBody: { flex: 1, minWidth: 0, gap: theme.space[2], paddingTop: theme.space[4] },
+  stepHead: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  stepTitle: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  meta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  working: { flexDirection: "row", alignItems: "center", gap: theme.space.s2, minHeight: theme.ctl.sm },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    maxWidth: theme.ctl.sm * 7,
+    padding: theme.space.s1,
+    paddingRight: theme.space.s2,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  chipError: { borderColor: theme.color.danger },
+  thumb: { width: theme.ctl.sm, height: theme.ctl.sm, borderRadius: theme.radius.sm },
+  fileIcon: {
+    width: theme.ctl.sm,
+    height: theme.ctl.sm,
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.color.surface2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  chipText: { flexShrink: 1, minWidth: 0 },
+  chipName: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text
+  },
+  remove: { padding: theme.space[4], borderRadius: theme.radius.full }
+}));
+function ChatComposer({
+  onSend,
+  replyTo,
+  onCancelReply,
+  running = false,
+  onStop,
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  placeholder: placeholderProp,
+  label: labelProp,
+  attachments = [],
+  onAttachPress,
+  onRemoveAttachment,
+  toolbar,
+  hint,
+  disabled = false,
+  inputRef,
+  motion = "full",
+  style,
+  labels: labelsProp
+}) {
+  const labels = useLabels("chat", DEFAULT_CHAT_LABELS, labelsProp);
+  const placeholder = placeholderProp ?? labels.placeholder;
+  const label = labelProp ?? labels.composer;
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme("chat");
+  const animate = useResolvedMotion(motion, "chat") === "full";
+  const [inner, setInner] = React6.useState(defaultValue);
+  const value = valueProp ?? inner;
+  const setValue = (next) => {
+    if (valueProp === void 0) setInner(next);
+    onValueChange?.(next);
+  };
+  const [focused, setFocused] = React6.useState(false);
+  const uploading = attachments.some((a) => a.status === "uploading");
+  const canSend = !disabled && !running && !uploading && (value.trim() !== "" || attachments.length > 0);
+  const showStop = running && !!onStop;
+  const swap = React6.useRef(new Animated.Value(showStop ? 1 : 0)).current;
+  React6.useEffect(() => {
+    Animated.timing(swap, {
+      toValue: showStop ? 1 : 0,
+      duration: animate ? theme.motion.swap.duration : 0,
+      easing: Easing.bezier(...theme.motion.swap.easing),
+      useNativeDriver: true
+    }).start();
+  }, [showStop, animate, swap, theme.motion.swap]);
+  const send = () => {
+    if (!canSend) return;
+    onSend(value.trim(), attachments);
+    setValue("");
+  };
+  const active = showStop || canSend;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles.box, focused && styles.boxFocused, disabled && styles.disabled], children: [
+      replyTo ? /* @__PURE__ */ jsx(
+        ReplyBar,
+        {
+          reply: replyTo,
+          animate,
+          onCancel: onCancelReply,
+          labels
+        },
+        replyTo.text
+      ) : null,
+      attachments.length > 0 ? /* @__PURE__ */ jsx(
+        ScrollView,
+        {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          contentContainerStyle: styles.chips,
+          children: attachments.map((a) => /* @__PURE__ */ jsx(
+            AttachmentChip,
+            {
+              attachment: a,
+              onRemove: onRemoveAttachment ? () => onRemoveAttachment(a.id) : void 0,
+              labels
+            },
+            a.id
+          ))
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          ref: inputRef,
+          accessibilityLabel: label,
+          placeholder,
+          placeholderTextColor: theme.color.text3,
+          editable: !disabled,
+          accessibilityState: { disabled: !!disabled },
+          "aria-disabled": disabled || void 0,
+          multiline: true,
+          value,
+          onChangeText: setValue,
+          onFocus: () => setFocused(true),
+          onBlur: () => setFocused(false),
+          style: styles.input
+        }
+      ),
+      /* @__PURE__ */ jsxs(View, { style: styles.bar, children: [
+        onAttachPress ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: labels.attachFiles,
+            disabled,
+            onPress: onAttachPress,
+            hitSlop: theme.space[6],
+            style: ({ pressed }) => [styles.tool, pressed && styles.toolDown],
+            children: /* @__PURE__ */ jsx(Icon, { name: "paperclip", size: theme.icon.sm, color: theme.color.text2 })
+          }
+        ) : null,
+        toolbar,
+        /* @__PURE__ */ jsx(View, { style: styles.spacer }),
+        /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: showStop ? labels.stop : labels.send,
+            accessibilityState: { disabled: !active },
+            disabled: !active,
+            onPress: showStop ? onStop : send,
+            hitSlop: theme.space[6],
+            style: [styles.send, !active && styles.sendIdle],
+            children: [
+              /* @__PURE__ */ jsx(
+                Animated.View,
+                {
+                  style: [
+                    styles.glyph,
+                    {
+                      opacity: swap.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }),
+                      transform: [
+                        { scale: swap.interpolate({ inputRange: [0, 1], outputRange: [1, 0.5] }) }
+                      ]
+                    }
+                  ],
+                  children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: "arrow-up",
+                      size: theme.icon.sm,
+                      color: active ? theme.color.accentInk : theme.color.text3
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Animated.View,
+                {
+                  style: [
+                    styles.glyph,
+                    {
+                      opacity: swap,
+                      transform: [
+                        { scale: swap.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] }) }
+                      ]
+                    }
+                  ],
+                  children: /* @__PURE__ */ jsx(Icon, { name: "stop", size: theme.icon.xs, color: theme.color.accentInk })
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ] }),
+    hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) : null
+  ] });
+}
+function ReplyBar({
+  reply,
+  animate,
+  onCancel,
+  labels
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme("chat");
+  const arrival = useArrival(animate, "card");
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      style: [styles.reply, arrival],
+      role: "group",
+      accessibilityLabel: labels.replyingTo(reply.author),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "undo", size: theme.icon.xs, color: theme.color.text3 }),
+        /* @__PURE__ */ jsxs(View, { style: styles.replyBody, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.replyAuthor, children: labels.replyingTo(reply.author) }),
+          /* @__PURE__ */ jsx(Text, { style: styles.replyText, numberOfLines: 1, children: reply.text })
+        ] }),
+        onCancel ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: labels.cancelReply,
+            onPress: onCancel,
+            hitSlop: theme.space[8],
+            style: styles.tool,
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.text3 })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var sheet2 = createStyleSheet((theme) => ({
+  root: { gap: theme.space.s2 },
+  reply: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    marginHorizontal: theme.space.s2,
+    marginBottom: theme.space.s1,
+    paddingStart: theme.space.s3,
+    paddingVertical: theme.space[6],
+    borderRadius: theme.radius.lg,
+    borderStartWidth: theme.borderWidth.strong,
+    borderStartColor: theme.color.accent,
+    backgroundColor: theme.color.surface3
+  },
+  replyBody: { flex: 1, minWidth: 0 },
+  replyAuthor: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  replyText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  box: {
+    borderRadius: theme.radius.xl,
+    borderWidth: theme.borderWidth.strong,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface2,
+    paddingTop: theme.space.s2
+  },
+  boxFocused: { borderColor: theme.focus.ringColor, backgroundColor: theme.color.surface },
+  disabled: { opacity: theme.state.disabledOpacity },
+  chips: { gap: theme.space.s2, paddingHorizontal: theme.space.s3, paddingBottom: theme.space.s1 },
+  input: {
+    minHeight: theme.ctl.md,
+    maxHeight: theme.type.body.lineHeight * 8,
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text,
+    textAlignVertical: "top"
+  },
+  bar: { flexDirection: "row", alignItems: "center", gap: theme.space.s1, padding: theme.space.s2 },
+  spacer: { flex: 1 },
+  tool: {
+    width: theme.ctl.iconBtnSm,
+    height: theme.ctl.iconBtnSm,
+    borderRadius: theme.radius.md,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  toolDown: { backgroundColor: theme.state.pressed },
+  send: {
+    width: theme.ctl.iconBtnSm,
+    height: theme.ctl.iconBtnSm,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  sendIdle: { backgroundColor: theme.color.surface3 },
+  glyph: { position: "absolute" },
+  hint: {
+    textAlign: "center",
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  }
+}));
+
+// src/chat/chat-types.ts
+function chatMessageText(message) {
+  return message.parts.filter((p) => p.kind === "text").map((p) => p.text).join("\n\n").trim();
+}
+function AssistantMark() {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("chat");
+  return /* @__PURE__ */ jsx(View, { style: styles.mark, children: /* @__PURE__ */ jsx(Icon, { name: "sparkle", size: theme.icon.sm, color: theme.color.accentOnSoft }) });
+}
+function segment(parts) {
+  const out = [];
+  for (const part of parts) {
+    const last = out[out.length - 1];
+    if (part.kind === "tool") {
+      if (last?.kind === "tools") last.tools.push(part);
+      else out.push({ kind: "tools", id: part.id, tools: [part] });
+    } else out.push({ kind: "part", part });
+  }
+  return out;
+}
+function Action({
+  label,
+  icon,
+  onPress,
+  pressed
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("chat");
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: pressed != null ? { selected: pressed } : void 0,
+      "aria-pressed": pressed,
+      onPress,
+      hitSlop: theme.space[6],
+      style: ({ pressed: down }) => [styles.action, down && styles.actionDown],
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: icon,
+          size: theme.icon.sm,
+          color: pressed ? theme.color.text : theme.color.text3
+        }
+      )
+    }
+  );
+}
+var REPLY_ARM = 56;
+function useSwipeReply(onReply, animate) {
+  const theme = useLoamTheme("chat");
+  const tx = React6.useRef(new Animated.Value(0)).current;
+  const live = React6.useRef({ onReply, animate, theme });
+  live.current = { onReply, animate, theme };
+  const state = React6.useRef({ armed: false, broke: false });
+  const sign = I18nManager.isRTL ? -1 : 1;
+  const pan = React6.useRef(
+    // One horizontal pull on a bubble inside a vertical list; no gesture
+    // library is allowed on native, so `PanResponder`, as `Toast` does.
+    // eslint-disable-next-line loam/no-pan-responder
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_e, g) => !!live.current.onReply && g.dx * sign > 8 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
+      onPanResponderGrant: () => {
+        tx.stopAnimation();
+        state.current = { armed: false, broke: false };
+      },
+      onPanResponderMove: (_e, g) => {
+        const a = Math.max(0, g.dx * sign);
+        const s = state.current;
+        const armed = a >= REPLY_ARM;
+        if (armed && !s.armed) haptics.selection();
+        s.armed = armed;
+        if (a < BREAKAWAY && !s.broke) return tx.setValue(sign * resist(a));
+        const target = sign * (armed ? REPLY_ARM + rubberband(a - REPLY_ARM, REPLY_ARM * 4) : a);
+        if (!s.broke && live.current.animate) {
+          s.broke = true;
+          Animated.spring(tx, {
+            toValue: target,
+            ...springConfig(live.current.theme, "fs"),
+            useNativeDriver: true
+          }).start();
+          return;
+        }
+        s.broke = true;
+        tx.setValue(target);
+      },
+      onPanResponderRelease: (_e, g) => {
+        const { onReply: reply, animate: anim, theme: th } = live.current;
+        if (anim) {
+          Animated.spring(tx, {
+            toValue: 0,
+            ...springConfig(th, "fs", { velocity: g.vx }),
+            useNativeDriver: true
+          }).start();
+        } else tx.setValue(0);
+        if (state.current.armed) reply?.();
+        state.current.armed = false;
+      },
+      onPanResponderTerminate: () => {
+        state.current.armed = false;
+        tx.setValue(0);
+      }
+    })
+  ).current;
+  const reveal = tx.interpolate({
+    inputRange: sign > 0 ? [0, REPLY_ARM] : [-REPLY_ARM, 0],
+    outputRange: sign > 0 ? [0, 1] : [1, 0],
+    extrapolate: "clamp"
+  });
+  const cueScale = tx.interpolate({
+    inputRange: sign > 0 ? [0, REPLY_ARM - 0.01, REPLY_ARM] : [-REPLY_ARM, -REPLY_ARM + 0.01, 0],
+    outputRange: sign > 0 ? [0.5, 0.9, 1] : [1, 0.9, 0.5],
+    extrapolate: "clamp"
+  });
+  return { tx, panHandlers: onReply ? pan.panHandlers : {}, reveal, cueScale };
+}
+function SwipeReply({
+  onReply,
+  animate,
+  style,
+  children
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("chat");
+  const swipe = useSwipeReply(onReply, animate);
+  return /* @__PURE__ */ jsxs(View, { style, children: [
+    onReply ? /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        pointerEvents: "none",
+        importantForAccessibility: "no-hide-descendants",
+        accessibilityElementsHidden: true,
+        style: [
+          styles.replyCue,
+          { opacity: swipe.reveal, transform: [{ scale: swipe.cueScale }] }
+        ],
+        children: /* @__PURE__ */ jsx(Icon, { name: "undo", size: theme.icon.xs, color: theme.color.text2 })
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        testID: "chat-swipe-reply",
+        style: { transform: [{ translateX: swipe.tx }] },
+        ...swipe.panHandlers,
+        children
+      }
+    )
+  ] });
+}
+var ChatMessageRow = React6.memo(function ChatMessageRow2(props) {
+  return props.message.role === "user" ? /* @__PURE__ */ jsx(UserRow, { ...props }) : /* @__PURE__ */ jsx(AssistantRow, { ...props });
+});
+function UserRow({
+  message,
+  appearing,
+  animate,
+  user,
+  running,
+  onEdit,
+  onRetry,
+  onCopy,
+  onReply,
+  labels: labelsProp
+}) {
+  const labels = useLabels("chat", DEFAULT_CHAT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("chat");
+  const arrival = useArrival(appearing && animate, "sent");
+  const [editing, setEditing] = React6.useState(false);
+  const text = chatMessageText(message);
+  const [draft, setDraft] = React6.useState(text);
+  const status = message.status ?? "done";
+  const failed = status === "failed";
+  const canEdit = !!onEdit && !running && status === "done" && !!text;
+  const reply = onReply && status === "done" && !editing ? () => onReply(message) : void 0;
+  const save = () => {
+    const t = draft.trim();
+    setEditing(false);
+    if (t && t !== text) onEdit?.(message, t);
+  };
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      role: "group",
+      accessibilityLabel: labels.saidBy(user?.name ?? labels.you),
+      accessibilityActions: reply ? [{ name: "reply", label: labels.reply }] : void 0,
+      onAccessibilityAction: reply ? (e) => e.nativeEvent.actionName === "reply" && reply() : void 0,
+      style: [styles.userRow, arrival],
+      children: [
+        message.attachments?.length ? /* @__PURE__ */ jsx(View, { style: styles.userAttachments, children: message.attachments.map((a) => /* @__PURE__ */ jsx(AttachmentChip, { attachment: a, labels }, a.id)) }) : null,
+        editing ? /* @__PURE__ */ jsxs(View, { style: styles.edit, children: [
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              accessibilityLabel: labels.editMessage,
+              value: draft,
+              onChangeText: setDraft,
+              multiline: true,
+              autoFocus: true,
+              style: styles.editInput,
+              placeholderTextColor: theme.color.text3
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: styles.meta, children: labels.editNote }),
+          /* @__PURE__ */ jsxs(View, { style: styles.editActions, children: [
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: () => setEditing(false), children: labels.cancel }),
+            /* @__PURE__ */ jsx(Button, { size: "sm", onPress: save, disabled: !draft.trim(), children: labels.send })
+          ] })
+        ] }) : text ? /* @__PURE__ */ jsx(SwipeReply, { onReply: reply, animate, style: styles.userSwipe, children: /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityHint: canEdit ? labels.editHint : void 0,
+            accessibilityActions: canEdit ? [{ name: "edit", label: labels.editMessage }] : void 0,
+            onAccessibilityAction: canEdit ? (e) => {
+              if (e.nativeEvent.actionName !== "edit") return;
+              setDraft(text);
+              setEditing(true);
+            } : void 0,
+            onLongPress: canEdit ? () => {
+              setDraft(text);
+              setEditing(true);
+            } : void 0,
+            style: [
+              styles.bubble,
+              styles.bubbleFill,
+              (failed || status === "sending") && styles.faded
+            ],
+            children: /* @__PURE__ */ jsx(Text, { style: styles.bubbleText, selectable: true, children: text })
+          }
+        ) }) : null,
+        failed ? /* @__PURE__ */ jsxs(View, { style: styles.failed, accessibilityRole: "alert", children: [
+          /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.xs, color: theme.color.danger }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.meta, { color: theme.color.danger }], children: labels.notSent }),
+          onRetry ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              onPress: () => onRetry(message),
+              hitSlop: theme.space[8],
+              children: /* @__PURE__ */ jsx(Text, { style: styles.retry, children: labels.retry })
+            }
+          ) : null
+        ] }) : !editing ? /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
+          message.time ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: message.time }) : null,
+          text && onCopy ? /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              value: text,
+              size: "sm",
+              accessibilityLabel: labels.copyMessage,
+              onCopy: () => onCopy(message, text)
+            }
+          ) : null,
+          canEdit ? /* @__PURE__ */ jsx(
+            Action,
+            {
+              label: labels.editMessage,
+              icon: "edit",
+              onPress: () => {
+                setDraft(text);
+                setEditing(true);
+              }
+            }
+          ) : null,
+          reply ? /* @__PURE__ */ jsx(Action, { label: labels.reply, icon: "undo", onPress: reply }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+function FeedbackPanel({
+  reasons,
+  animate,
+  onSubmit,
+  onCancel,
+  labels
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("chat");
+  const arrival = useArrival(animate, "card");
+  const [reason, setReason] = React6.useState();
+  const [note, setNote] = React6.useState("");
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      style: [styles.feedback, arrival],
+      role: "group",
+      accessibilityLabel: labels.feedbackTitle,
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.feedbackTitle, children: labels.feedbackTitle }),
+        /* @__PURE__ */ jsx(View, { style: styles.chips, children: reasons.map((r) => {
+          const on = reason === r;
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityState: { selected: on },
+              "aria-pressed": on,
+              onPress: () => setReason(on ? void 0 : r),
+              style: [styles.reason, on && styles.reasonOn],
+              children: /* @__PURE__ */ jsx(Text, { style: [styles.reasonText, on && { color: theme.color.accentOnSoft }], children: r })
+            },
+            r
+          );
+        }) }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            accessibilityLabel: labels.feedbackNote,
+            placeholder: labels.feedbackNote,
+            placeholderTextColor: theme.color.text3,
+            value: note,
+            onChangeText: setNote,
+            multiline: true,
+            style: styles.note
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: styles.editActions, children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onCancel, children: labels.cancel }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              disabled: !reason && !note.trim(),
+              onPress: () => onSubmit(reason, note.trim()),
+              children: labels.sendFeedback
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function AssistantRow({
+  message,
+  latest,
+  appearing,
+  animate,
+  assistant,
+  feedbackReasons,
+  running,
+  onRegenerate,
+  onFeedback,
+  onCopy,
+  onReply,
+  onLinkPress,
+  labels: labelsProp
+}) {
+  const labels = useLabels("chat", DEFAULT_CHAT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("chat");
+  const arrival = useArrival(appearing && animate, "in");
+  const status = message.status ?? "done";
+  const streaming = status === "streaming";
+  const text = chatMessageText(message);
+  const reply = onReply && !streaming && text ? () => onReply(message) : void 0;
+  const [feedback, setFeedback] = React6.useState(message.feedback);
+  const [asking, setAsking] = React6.useState(false);
+  const [thanked, setThanked] = React6.useState(false);
+  React6.useEffect(() => setFeedback(message.feedback), [message.feedback]);
+  const lastPart = message.parts[message.parts.length - 1];
+  const hasVisible = message.parts.some((p) => p.kind !== "text" || p.text.trim() !== "");
+  const showWorking = streaming && (!hasVisible || lastPart?.kind === "tool" && lastPart.status !== "running");
+  const rate = (value) => {
+    if (feedback === value) return;
+    setFeedback(value);
+    if (value === "up") {
+      setAsking(false);
+      setThanked(true);
+      onFeedback?.(message, { value });
+    } else {
+      setThanked(false);
+      setAsking(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      role: "group",
+      accessibilityLabel: labels.saidBy(assistant.name),
+      "aria-busy": streaming || void 0,
+      accessibilityActions: reply ? [{ name: "reply", label: labels.reply }] : void 0,
+      onAccessibilityAction: reply ? (e) => e.nativeEvent.actionName === "reply" && reply() : void 0,
+      style: [styles.assistantRow, arrival],
+      children: [
+        /* @__PURE__ */ jsx(View, { importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: assistant.avatar ?? /* @__PURE__ */ jsx(AssistantMark, {}) }),
+        /* @__PURE__ */ jsxs(View, { style: styles.assistantBody, children: [
+          /* @__PURE__ */ jsx(SwipeReply, { onReply: reply, animate, children: /* @__PURE__ */ jsxs(View, { style: styles.assistantParts, children: [
+            segment(message.parts).map((seg) => {
+              if (seg.kind === "tools")
+                return /* @__PURE__ */ jsx(ToolGroupView, { tools: seg.tools, animate, labels }, seg.id);
+              const part = seg.part;
+              switch (part.kind) {
+                case "text":
+                  return /* @__PURE__ */ jsx(
+                    Markdown,
+                    {
+                      content: part.text,
+                      streaming: streaming && part === lastPart,
+                      motion: animate ? "full" : "none",
+                      onLinkPress
+                    },
+                    part.id
+                  );
+                case "reasoning":
+                  return /* @__PURE__ */ jsx(
+                    ReasoningView,
+                    {
+                      part,
+                      live: streaming && part === lastPart,
+                      animate,
+                      labels
+                    },
+                    part.id
+                  );
+                case "error":
+                  return /* @__PURE__ */ jsxs(View, { style: styles.error, accessibilityRole: "alert", children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        name: "alert-circle",
+                        size: theme.icon.sm,
+                        color: theme.color.dangerOnSoft
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Text, { style: styles.errorText, children: part.message })
+                  ] }, part.id);
+                case "custom":
+                  return /* @__PURE__ */ jsx(CustomPart, { animate, children: part.content }, part.id);
+                default:
+                  return null;
+              }
+            }),
+            showWorking ? /* @__PURE__ */ jsx(
+              WorkingIndicator,
+              {
+                phase: message.phase,
+                startedAt: message.startedAt,
+                animate,
+                labels
+              }
+            ) : null
+          ] }) }),
+          !streaming ? /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
+            status === "stopped" ? /* @__PURE__ */ jsxs(View, { style: styles.stopped, children: [
+              /* @__PURE__ */ jsx(Icon, { name: "stop", size: theme.icon.xs, color: theme.color.text3 }),
+              /* @__PURE__ */ jsx(Text, { style: styles.meta, children: labels.stopped })
+            ] }) : null,
+            text && onCopy ? /* @__PURE__ */ jsx(
+              CopyButton,
+              {
+                value: text,
+                size: "sm",
+                accessibilityLabel: labels.copyResponse,
+                onCopy: () => onCopy(message, text)
+              }
+            ) : null,
+            onFeedback && text ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: labels.goodResponse,
+                  icon: "thumbs-up",
+                  pressed: feedback === "up",
+                  onPress: () => rate("up")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Action,
+                {
+                  label: labels.badResponse,
+                  icon: "thumbs-down",
+                  pressed: feedback === "down",
+                  onPress: () => rate("down")
+                }
+              )
+            ] }) : null,
+            latest && onRegenerate && !running ? /* @__PURE__ */ jsx(Action, { label: labels.regenerate, icon: "refresh", onPress: () => onRegenerate(message) }) : null,
+            reply ? /* @__PURE__ */ jsx(Action, { label: labels.reply, icon: "undo", onPress: reply }) : null,
+            message.meta || message.time ? /* @__PURE__ */ jsxs(Text, { style: styles.meta, children: [
+              message.meta,
+              message.meta && message.time ? " \xB7 " : null,
+              message.time
+            ] }) : null,
+            thanked ? /* @__PURE__ */ jsx(Text, { style: styles.meta, accessibilityLiveRegion: "polite", role: "status", children: labels.thanks }) : null
+          ] }) : null,
+          asking ? /* @__PURE__ */ jsx(
+            FeedbackPanel,
+            {
+              reasons: feedbackReasons,
+              animate,
+              labels,
+              onCancel: () => {
+                setAsking(false);
+                setFeedback(message.feedback);
+              },
+              onSubmit: (reason, note) => {
+                setAsking(false);
+                setThanked(true);
+                onFeedback?.(message, { value: "down", reason, note: note || void 0 });
+              }
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function CustomPart({ animate, children }) {
+  const arrival = useArrival(animate, "card");
+  return /* @__PURE__ */ jsx(Animated.View, { style: arrival, children });
+}
+var sheet3 = createStyleSheet((theme) => ({
+  mark: {
+    width: theme.ctl.sm,
+    height: theme.ctl.sm,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.accentSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  userRow: { alignItems: "flex-end", gap: theme.space[6] },
+  userAttachments: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "flex-end",
+    gap: theme.space.s2
+  },
+  bubble: {
+    maxWidth: "85%",
+    backgroundColor: theme.color.surface3,
+    borderRadius: theme.radius.xl,
+    borderBottomRightRadius: theme.radius.xs,
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space[10]
+  },
+  // Sending / failed: a hint of "not yet delivered", never `disabledOpacity`
+  // — at 0.38 the message itself fell to ~2:1 and could not be read back.
+  // Same 0.72 as the web bubble.
+  faded: { opacity: theme.opacity[72] },
+  bubbleText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text
+  },
+  failed: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  retry: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.danger,
+    textDecorationLine: "underline"
+  },
+  edit: { alignSelf: "stretch", gap: theme.space.s2 },
+  editInput: {
+    minHeight: theme.ctl.lg * 2,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text,
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.strong,
+    borderColor: theme.focus.ringColor,
+    borderRadius: theme.radius.md,
+    padding: theme.space.s3,
+    textAlignVertical: "top"
+  },
+  editActions: { flexDirection: "row", justifyContent: "flex-end", gap: theme.space.s2 },
+  actions: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: theme.space.s1 },
+  action: {
+    width: theme.ctl.iconBtnSm,
+    height: theme.ctl.iconBtnSm,
+    borderRadius: theme.radius.md,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  actionDown: { backgroundColor: theme.state.pressed },
+  meta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  stopped: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[6],
+    marginRight: theme.space.s2
+  },
+  assistantRow: { flexDirection: "row", gap: theme.space.s3 },
+  assistantBody: { flex: 1, minWidth: 0, gap: theme.space.s2 },
+  assistantParts: { gap: theme.space.s2 },
+  userSwipe: { maxWidth: "85%" },
+  bubbleFill: { maxWidth: "100%" },
+  replyCue: {
+    position: "absolute",
+    start: -theme.ctl.sm,
+    top: "50%",
+    marginTop: -theme.icon.sm,
+    width: theme.icon.sm * 2,
+    height: theme.icon.sm * 2,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  error: {
+    flexDirection: "row",
+    gap: theme.space.s2,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.danger,
+    backgroundColor: theme.color.dangerSoft
+  },
+  errorText: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.dangerOnSoft
+  },
+  feedback: {
+    gap: theme.space.s3,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  feedbackTitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text
+  },
+  chips: { flexDirection: "row", flexWrap: "wrap", gap: theme.space.s2 },
+  reason: {
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space[6],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  reasonOn: { backgroundColor: theme.color.accentSoft, borderColor: theme.edge.accent },
+  reasonText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.text2
+  },
+  note: {
+    minHeight: theme.ctl.lg * 1.5,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text,
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.borderStrong,
+    borderRadius: theme.radius.md,
+    padding: theme.space.s3,
+    textAlignVertical: "top"
+  }
+}));
+var keyOf = (s) => s.id ?? s.label;
+function paginate(list, perPage) {
+  if (list.some((s) => s.page !== void 0)) {
+    const by = /* @__PURE__ */ new Map();
+    for (const s of list) {
+      const p = s.page ?? 0;
+      by.set(p, [...by.get(p) ?? [], s]);
+    }
+    return [...by.keys()].sort((a, b) => a - b).map((p) => by.get(p));
+  }
+  const size = Math.max(1, perPage);
+  const out = [];
+  for (let i = 0; i < list.length; i += size) out.push(list.slice(i, i + size));
+  return out;
+}
+function sectionsOf(page) {
+  const out = [];
+  for (const s of page) {
+    const hit = out.find((g) => g.title === s.group);
+    if (hit) hit.items.push(s);
+    else out.push({ title: s.group, items: [s] });
+  }
+  return out;
+}
+function ChatSuggestions({
+  suggestions,
+  perPage,
+  onPick,
+  onDismiss,
+  loading = false,
+  animate,
+  labels: labelsProp
+}) {
+  const labels = useLabels("chat", DEFAULT_CHAT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet4);
+  const theme = useLoamTheme("chat");
+  const [hidden, setHidden] = React6.useState(() => /* @__PURE__ */ new Set());
+  const pages = React6.useMemo(
+    () => paginate(suggestions.filter((s) => !hidden.has(keyOf(s))), perPage),
+    [suggestions, hidden, perPage]
+  );
+  const [index, setIndex] = React6.useState(0);
+  const [visit, setVisit] = React6.useState(0);
+  const current = Math.min(index, Math.max(0, pages.length - 1));
+  const [width, setWidth] = React6.useState(0);
+  const scroller = React6.useRef(null);
+  const settle = (next) => {
+    if (next === current) return;
+    setIndex(next);
+    setVisit((v) => v + 1);
+  };
+  const goTo = (next) => {
+    const clamped = Math.max(0, Math.min(pages.length - 1, next));
+    scroller.current?.scrollTo({ x: clamped * width, animated: animate });
+    settle(clamped);
+  };
+  const onScrollEnd = (e) => {
+    if (width > 0) settle(Math.round(e.nativeEvent.contentOffset.x / width));
+  };
+  const dismiss = (s) => {
+    if (animate) {
+      LayoutAnimation.configureNext(
+        LayoutAnimation.create(theme.motion.collapse.duration, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity)
+      );
+    }
+    setHidden((prev) => new Set(prev).add(keyOf(s)));
+    onDismiss?.(s);
+  };
+  if (loading) {
+    return (
+      // One "Loading" for the whole card (the SkeletonText pattern); the bones
+      // are decorative, or a screen reader says "Loading" a dozen times.
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          style: styles.card,
+          accessible: true,
+          accessibilityRole: "image",
+          accessibilityLabel: labels.loadingSuggestions,
+          accessibilityState: { busy: true },
+          children: Array.from({ length: Math.min(perPage, 4) }, (_, i) => /* @__PURE__ */ jsxs(View, { style: styles.skeletonRow, children: [
+            /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                variant: "rect",
+                width: theme.icon.sm,
+                height: theme.icon.sm,
+                radius: "sm",
+                decorative: true
+              }
+            ),
+            /* @__PURE__ */ jsxs(View, { style: styles.rowText, children: [
+              /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: theme.ctl.md * 4, decorative: true }),
+              /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: theme.ctl.md * 2.5, decorative: true })
+            ] })
+          ] }, i))
+        }
+      )
+    );
+  }
+  if (pages.length === 0) return null;
+  return /* @__PURE__ */ jsxs(View, { style: styles.card, onLayout: (e) => setWidth(e.nativeEvent.layout.width - theme.space.s2 * 2), children: [
+    /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        ref: scroller,
+        horizontal: true,
+        pagingEnabled: true,
+        scrollEnabled: pages.length > 1,
+        showsHorizontalScrollIndicator: false,
+        onMomentumScrollEnd: onScrollEnd,
+        children: pages.map((page, p) => /* @__PURE__ */ jsx(
+          View,
+          {
+            style: width ? { width } : styles.fill,
+            accessibilityElementsHidden: p !== current,
+            importantForAccessibility: p === current ? "auto" : "no-hide-descendants",
+            children: /* @__PURE__ */ jsx(
+              Page,
+              {
+                page,
+                animate: animate && p === current,
+                onPick,
+                onDismiss: onDismiss ? dismiss : void 0,
+                labels
+              }
+            )
+          },
+          p === current ? `on-${visit}` : `off-${p}`
+        ))
+      }
+    ),
+    pages.length > 1 ? /* @__PURE__ */ jsxs(View, { style: styles.pager, role: "group", accessibilityLabel: labels.moreSuggestions, children: [
+      /* @__PURE__ */ jsx(PagerButton, { icon: "chevron-left", label: labels.previousSuggestions, disabled: current === 0, onPress: () => goTo(current - 1) }),
+      /* @__PURE__ */ jsx(View, { style: styles.dots, children: pages.map((_, p) => /* @__PURE__ */ jsx(
+        Dot,
+        {
+          index: p,
+          count: pages.length,
+          active: p === current,
+          animate,
+          onPress: () => goTo(p),
+          labels
+        },
+        p
+      )) }),
+      /* @__PURE__ */ jsx(
+        PagerButton,
+        {
+          icon: "chevron-right",
+          label: labels.moreSuggestions,
+          disabled: current === pages.length - 1,
+          onPress: () => goTo(current + 1)
+        }
+      )
+    ] }) : null
+  ] });
+}
+function Page({
+  page,
+  animate,
+  onPick,
+  onDismiss,
+  labels
+}) {
+  const { styles } = useStyles(sheet4);
+  let n = 0;
+  return /* @__PURE__ */ jsx(View, { children: sectionsOf(page).map((section, si) => /* @__PURE__ */ jsxs(View, { style: si > 0 ? styles.sectionRule : void 0, children: [
+    section.title ? /* @__PURE__ */ jsx(Rise, { i: n, animate, children: /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.sectionTitle, children: section.title }) }) : null,
+    section.items.map((s) => /* @__PURE__ */ jsx(Rise, { i: ++n, animate, children: /* @__PURE__ */ jsx(Row, { suggestion: s, onPick, onDismiss, labels }) }, keyOf(s)))
+  ] }, section.title ?? `untitled-${si}`)) });
+}
+function Rise({ i, animate, children }) {
+  const theme = useLoamTheme("chat");
+  const style = useArrival(animate, "in", i * theme.duration.fast * 0.27);
+  return /* @__PURE__ */ jsx(Animated.View, { style, children });
+}
+function Row({
+  suggestion: s,
+  onPick,
+  onDismiss,
+  labels
+}) {
+  const { styles } = useStyles(sheet4);
+  const theme = useLoamTheme("chat");
+  const tone = {
+    neutral: theme.color.text3,
+    accent: theme.color.accent,
+    good: theme.color.good,
+    warn: theme.color.warn,
+    danger: theme.color.danger
+  };
+  const swap = React6.useRef(new Animated.Value(0)).current;
+  const fade = React6.useRef(new Animated.Value(1)).current;
+  const to = (v) => Animated.timing(swap, {
+    toValue: v,
+    duration: theme.motion.swap.duration,
+    easing: Easing.bezier(...theme.motion.swap.easing),
+    useNativeDriver: true
+  }).start();
+  const lift = theme.space[3];
+  const leave = () => {
+    Animated.timing(fade, {
+      toValue: 0,
+      duration: theme.motion.exit.duration,
+      easing: Easing.bezier(...theme.motion.exit.easing),
+      useNativeDriver: true
+    }).start(() => onDismiss?.(s));
+  };
+  return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.row, { opacity: fade }], children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: s.label,
+        accessibilityHint: [s.description, s.reason && labels.why(s.reason)].filter(Boolean).join(". ") || void 0,
+        onPress: () => onPick(s),
+        onPressIn: s.reason ? () => to(1) : void 0,
+        onPressOut: s.reason ? () => to(0) : void 0,
+        style: ({ pressed }) => [styles.rowPress, pressed && styles.rowPressed],
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: s.icon ?? "sparkle", size: theme.icon.xs, color: tone[s.tone ?? "neutral"] }),
+          /* @__PURE__ */ jsxs(View, { style: styles.rowText, children: [
+            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.label, children: s.label }),
+            s.description || s.reason ? /* @__PURE__ */ jsxs(View, { children: [
+              /* @__PURE__ */ jsx(
+                Animated.Text,
+                {
+                  numberOfLines: 1,
+                  style: [
+                    styles.meta,
+                    s.reason && {
+                      opacity: swap.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }),
+                      transform: [{ translateY: swap.interpolate({ inputRange: [0, 1], outputRange: [0, -lift] }) }]
+                    }
+                  ],
+                  children: s.description ?? " "
+                }
+              ),
+              s.reason ? /* @__PURE__ */ jsx(
+                Animated.Text,
+                {
+                  numberOfLines: 1,
+                  importantForAccessibility: "no",
+                  accessibilityElementsHidden: true,
+                  style: [
+                    styles.meta,
+                    styles.reason,
+                    {
+                      opacity: swap,
+                      transform: [{ translateY: swap.interpolate({ inputRange: [0, 1], outputRange: [lift, 0] }) }]
+                    }
+                  ],
+                  children: s.reason
+                }
+              ) : null
+            ] }) : null
+          ] })
+        ]
+      }
+    ),
+    onDismiss ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.notUsefulFor(s.label),
+        onPress: leave,
+        hitSlop: theme.space[8],
+        style: ({ pressed }) => [styles.dismiss, pressed && styles.rowPressed],
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.xs, color: theme.color.text3 })
+      }
+    ) : null
+  ] });
+}
+function Dot({
+  index,
+  count,
+  active,
+  animate,
+  onPress,
+  labels
+}) {
+  const { styles } = useStyles(sheet4);
+  const theme = useLoamTheme("chat");
+  const p = React6.useRef(new Animated.Value(active ? 1 : 0)).current;
+  React6.useEffect(() => {
+    Animated.timing(p, {
+      toValue: active ? 1 : 0,
+      duration: animate ? theme.motion.indicator.duration : 0,
+      easing: Easing.bezier(...theme.motion.indicator.easing),
+      useNativeDriver: false
+    }).start();
+  }, [active, animate, p, theme.motion.indicator]);
+  const dot = theme.space[6];
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: labels.suggestionsPage(index + 1, count),
+      accessibilityState: { selected: active },
+      onPress,
+      hitSlop: theme.space[8],
+      children: /* @__PURE__ */ jsx(
+        Animated.View,
+        {
+          style: [
+            styles.dot,
+            {
+              width: p.interpolate({ inputRange: [0, 1], outputRange: [dot, dot * 2.67] }),
+              backgroundColor: p.interpolate({ inputRange: [0, 1], outputRange: [theme.color.borderStrong, theme.color.accent] })
+            }
+          ]
+        }
+      )
+    }
+  );
+}
+function PagerButton({
+  icon,
+  label,
+  disabled,
+  onPress
+}) {
+  const { styles } = useStyles(sheet4);
+  const theme = useLoamTheme("chat");
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: { disabled },
+      disabled,
+      onPress,
+      hitSlop: theme.space[8],
+      style: ({ pressed }) => [styles.pagerButton, pressed && styles.rowPressed, disabled && styles.disabled],
+      children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: theme.color.text3 })
+    }
+  );
+}
+var sheet4 = createStyleSheet((theme) => ({
+  card: {
+    alignSelf: "stretch",
+    padding: theme.space.s2,
+    borderRadius: theme.radius.xl,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden"
+  },
+  fill: { flex: 1 },
+  sectionRule: {
+    marginTop: theme.space.s1,
+    paddingTop: theme.space.s1,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  sectionTitle: {
+    paddingHorizontal: theme.space.s3,
+    paddingTop: theme.space.s2,
+    paddingBottom: theme.space.s1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text3
+  },
+  row: { flexDirection: "row", alignItems: "center", borderRadius: theme.radius.lg },
+  rowPress: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.ctl.md,
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s2,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: "transparent"
+  },
+  rowPressed: { backgroundColor: theme.color.accentSoft, borderColor: theme.edge.accent },
+  rowText: { flex: 1, gap: theme.space[2] },
+  label: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text
+  },
+  meta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  reason: { position: "absolute", left: 0, right: 0, top: 0, color: theme.color.accent },
+  dismiss: {
+    width: theme.ctl.iconBtnSm,
+    height: theme.ctl.iconBtnSm,
+    borderRadius: theme.radius.md,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  skeletonRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s3, padding: theme.space.s3 },
+  pager: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: theme.space.s1,
+    paddingTop: theme.space.s1,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  pagerButton: {
+    width: theme.ctl.iconBtnSm,
+    height: theme.ctl.iconBtnSm,
+    borderRadius: theme.radius.md,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  disabled: { opacity: theme.state.disabledOpacity },
+  dots: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  dot: { height: theme.space[6], borderRadius: theme.radius.full }
+}));
+function useChatScroll({ threshold = 32 } = {}) {
+  const ref = React6.useRef(null);
+  const pinnedRef = React6.useRef(true);
+  const [pinned, setPinnedState] = React6.useState(true);
+  const driving = React6.useRef({ drag: false, momentum: false });
+  const setPinned = React6.useCallback((next) => {
+    if (pinnedRef.current === next) return;
+    pinnedRef.current = next;
+    setPinnedState(next);
+  }, []);
+  const scrollToBottom = React6.useCallback(
+    (animated = true) => {
+      setPinned(true);
+      ref.current?.scrollToEnd({ animated });
+    },
+    [setPinned]
+  );
+  const follow = React6.useCallback(() => {
+    if (pinnedRef.current) ref.current?.scrollToEnd({ animated: false });
+  }, []);
+  const scrollProps = React6.useMemo(
+    () => ({
+      ref,
+      scrollEventThrottle: 16,
+      onScroll: (e) => {
+        const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
+        const distance = contentSize.height - contentOffset.y - layoutMeasurement.height;
+        if (distance <= threshold) setPinned(true);
+        else if (driving.current.drag || driving.current.momentum) setPinned(false);
+      },
+      onScrollBeginDrag: () => {
+        driving.current.drag = true;
+      },
+      onScrollEndDrag: () => {
+        driving.current.drag = false;
+      },
+      onMomentumScrollBegin: () => {
+        driving.current.momentum = true;
+      },
+      onMomentumScrollEnd: () => {
+        driving.current.momentum = false;
+      },
+      onContentSizeChange: follow,
+      onLayout: follow
+    }),
+    [follow, setPinned, threshold]
+  );
+  return { pinned, scrollToBottom, scrollProps };
+}
+var CHAT_FEEDBACK_REASONS = DEFAULT_CHAT_LABELS.feedbackReasons;
+function useArrivals(messages) {
+  const seen = React6.useRef(null);
+  const prevLast = React6.useRef(void 0);
+  if (seen.current === null) {
+    seen.current = new Set(messages.map((m) => m.id));
+    prevLast.current = messages[messages.length - 1]?.id;
+  }
+  const boundary = prevLast.current ? messages.findIndex((m) => m.id === prevLast.current) : -1;
+  const arriving = /* @__PURE__ */ new Set();
+  messages.forEach((m, i) => {
+    if (!seen.current.has(m.id) && i > boundary) arriving.add(m.id);
+  });
+  React6.useEffect(() => {
+    for (const m of messages) seen.current.add(m.id);
+    prevLast.current = messages[messages.length - 1]?.id;
+  }, [messages]);
+  return (id) => arriving.has(id);
+}
+function Staggered({
+  i,
+  animate,
+  children
+}) {
+  const theme = useLoamTheme("chat");
+  const style = useArrival(animate, "in", i * theme.duration.fast * 0.27);
+  return /* @__PURE__ */ jsx(Animated.View, { style, children });
+}
+function Chat({
+  messages,
+  running = false,
+  onSend,
+  onStop,
+  onRegenerate,
+  onEdit,
+  onRetry,
+  onFeedback,
+  onCopy,
+  onReply,
+  feedbackReasons: feedbackReasonsProp,
+  assistant: assistantProp,
+  user,
+  suggestions,
+  suggestionAction = "send",
+  suggestionsPerPage = 4,
+  suggestionsLoading = false,
+  onDismissSuggestion,
+  followUps,
+  emptyTitle: emptyTitleProp,
+  emptyDescription,
+  emptyState,
+  hasOlder = false,
+  loadingOlder = false,
+  onLoadOlder,
+  draft: draftProp,
+  onDraftChange,
+  placeholder,
+  attachments,
+  onAttachPress,
+  onRemoveAttachment,
+  composerToolbar,
+  disclaimer,
+  disabled,
+  header,
+  onLinkPress,
+  keyboardOffset = 0,
+  label: labelProp,
+  motion = "full",
+  style,
+  labels: labelsProp
+}) {
+  const labels = useLabels("chat", DEFAULT_CHAT_LABELS, labelsProp);
+  const assistant = React6.useMemo(
+    () => assistantProp ?? { name: labels.assistant },
+    [assistantProp, labels.assistant]
+  );
+  const feedbackReasons = feedbackReasonsProp ?? labels.feedbackReasons;
+  const emptyTitle = emptyTitleProp ?? labels.emptyTitle;
+  const label = labelProp ?? labels.chat;
+  const { styles } = useStyles(sheet5);
+  const theme = useLoamTheme("chat");
+  const animate = useResolvedMotion(motion, "chat") === "full";
+  const { pinned, scrollToBottom, scrollProps } = useChatScroll();
+  const { readingMeasure } = useFormFactor();
+  const column = {
+    width: "100%",
+    maxWidth: readingMeasure + theme.ctl.sm + theme.space.s3 + theme.space.s4 * 2,
+    alignSelf: "center"
+  };
+  const isArriving = useArrivals(messages);
+  const inputRef = React6.useRef(null);
+  const [innerDraft, setInnerDraft] = React6.useState("");
+  const draft = draftProp ?? innerDraft;
+  const setDraft = (next) => {
+    if (draftProp === void 0) setInnerDraft(next);
+    onDraftChange?.(next);
+  };
+  const last = messages[messages.length - 1];
+  const latestAssistantId = [...messages].reverse().find((m) => m.role === "assistant")?.id;
+  const [replyingTo, setReplyingTo] = React6.useState(null);
+  const reply = onReply ? (m) => {
+    setReplyingTo(m);
+    onReply(m);
+    inputRef.current?.focus();
+  } : void 0;
+  const send = (text, files) => {
+    if (replyingTo) onSend(text, files, replyingTo);
+    else onSend(text, files);
+    setReplyingTo(null);
+    scrollToBottom();
+  };
+  const pick = (s) => {
+    const prompt = s.prompt ?? s.label;
+    if (suggestionAction === "fill") {
+      setDraft(prompt);
+      inputRef.current?.focus();
+    } else send(prompt, []);
+  };
+  const [unseen, setUnseen] = React6.useState(false);
+  const prevCount = React6.useRef(messages.length);
+  React6.useEffect(() => {
+    if (pinned) setUnseen(false);
+    else if (messages.length > prevCount.current) setUnseen(true);
+    prevCount.current = messages.length;
+  }, [messages.length, pinned]);
+  const pillLabel = running ? labels.writing : unseen ? labels.newMessages : labels.jumpToLatest;
+  const pill = React6.useRef(new Animated.Value(pinned ? 0 : 1)).current;
+  React6.useEffect(() => {
+    Animated.timing(pill, {
+      toValue: pinned ? 0 : 1,
+      duration: animate ? theme.motion.enter.duration : 0,
+      useNativeDriver: true
+    }).start();
+  }, [pinned, animate, pill, theme.motion.enter.duration]);
+  const streamingId = messages.find((m) => m.status === "streaming")?.id;
+  const prevStreaming = React6.useRef(streamingId);
+  const prevRunning = React6.useRef(running);
+  React6.useEffect(() => {
+    if (running && !prevRunning.current) {
+      AccessibilityInfo.announceForAccessibility?.(labels.responding(assistant.name));
+    }
+    if (prevStreaming.current && prevStreaming.current !== streamingId) {
+      const m = messages.find((x) => x.id === prevStreaming.current);
+      if (m)
+        AccessibilityInfo.announceForAccessibility?.(labels.said(assistant.name, chatMessageText(m)));
+    }
+    prevStreaming.current = streamingId;
+    prevRunning.current = running;
+  }, [running, streamingId, messages, assistant.name, labels]);
+  const pendingReply = running && last?.role === "user";
+  const showFollowUps = !running && !!followUps?.length && last?.role === "assistant" && (last.status ?? "done") === "done";
+  return /* @__PURE__ */ jsxs(
+    KeyboardAvoidingView,
+    {
+      accessibilityLabel: label,
+      behavior: Platform.OS === "ios" ? "padding" : void 0,
+      keyboardVerticalOffset: keyboardOffset,
+      style: [styles.root, style],
+      children: [
+        header,
+        /* @__PURE__ */ jsxs(View, { style: styles.stage, children: [
+          /* @__PURE__ */ jsxs(
+            ScrollView,
+            {
+              ...scrollProps,
+              accessibilityLabel: labels.messages,
+              keyboardShouldPersistTaps: "handled",
+              keyboardDismissMode: "interactive",
+              contentContainerStyle: [styles.content, column],
+              onScroll: (e) => {
+                scrollProps.onScroll(e);
+                if (hasOlder && !loadingOlder && e.nativeEvent.contentOffset.y < theme.space.s8)
+                  onLoadOlder?.();
+              },
+              children: [
+                hasOlder ? /* @__PURE__ */ jsx(View, { style: styles.older, children: loadingOlder ? /* @__PURE__ */ jsx(Thinking, { label: labels.loadingEarlier, size: "sm", motion }) : /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "button",
+                    onPress: onLoadOlder,
+                    hitSlop: theme.space[8],
+                    children: /* @__PURE__ */ jsx(Text, { style: styles.olderText, children: labels.loadEarlier })
+                  }
+                ) }) : null,
+                messages.length === 0 ? emptyState ?? /* @__PURE__ */ jsxs(View, { style: styles.empty, children: [
+                  /* @__PURE__ */ jsx(Staggered, { i: 0, animate, children: /* @__PURE__ */ jsxs(View, { style: styles.emptyHead, children: [
+                    /* @__PURE__ */ jsx(AssistantMark, {}),
+                    /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.emptyTitle, children: emptyTitle }),
+                    emptyDescription ? /* @__PURE__ */ jsx(Text, { style: styles.emptyText, children: emptyDescription }) : null
+                  ] }) }),
+                  suggestionsLoading || suggestions?.length ? /* @__PURE__ */ jsx(Staggered, { i: 2, animate, children: /* @__PURE__ */ jsx(
+                    ChatSuggestions,
+                    {
+                      suggestions: suggestions ?? [],
+                      perPage: suggestionsPerPage,
+                      loading: suggestionsLoading,
+                      onPick: pick,
+                      onDismiss: onDismissSuggestion,
+                      animate,
+                      labels
+                    }
+                  ) }) : null
+                ] }) : messages.map((m, i) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+                  m.day && m.day !== messages[i - 1]?.day ? /* @__PURE__ */ jsxs(View, { style: styles.day, accessibilityRole: "header", accessibilityLabel: m.day, children: [
+                    /* @__PURE__ */ jsx(View, { style: styles.dayLine }),
+                    /* @__PURE__ */ jsx(Text, { style: styles.dayText, children: m.day }),
+                    /* @__PURE__ */ jsx(View, { style: styles.dayLine })
+                  ] }) : null,
+                  /* @__PURE__ */ jsx(
+                    ChatMessageRow,
+                    {
+                      message: m,
+                      latest: m.id === latestAssistantId,
+                      appearing: isArriving(m.id),
+                      animate,
+                      assistant,
+                      user,
+                      feedbackReasons,
+                      running,
+                      onRegenerate,
+                      onEdit,
+                      onRetry,
+                      onFeedback,
+                      onCopy,
+                      onReply: reply,
+                      onLinkPress,
+                      labels
+                    }
+                  )
+                ] }, m.id)),
+                pendingReply ? /* @__PURE__ */ jsxs(View, { style: styles.pending, children: [
+                  assistant.avatar ?? /* @__PURE__ */ jsx(AssistantMark, {}),
+                  /* @__PURE__ */ jsx(WorkingIndicator, { animate, labels })
+                ] }) : null,
+                showFollowUps ? /* @__PURE__ */ jsx(View, { style: styles.followUps, role: "group", accessibilityLabel: labels.followUps, children: followUps.map((s, i) => /* @__PURE__ */ jsx(Staggered, { i, animate, children: /* @__PURE__ */ jsxs(
+                  Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: s.label,
+                    onPress: () => send(s.prompt ?? s.label, []),
+                    style: ({ pressed }) => [styles.followUp, pressed && styles.pressed],
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          name: s.icon ?? "arrow-right",
+                          size: theme.icon.xs,
+                          color: theme.color.text3
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Text, { style: styles.followUpText, children: s.label })
+                    ]
+                  }
+                ) }, s.id ?? s.label)) }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              pointerEvents: pinned ? "none" : "box-none",
+              importantForAccessibility: pinned ? "no-hide-descendants" : "auto",
+              accessibilityElementsHidden: pinned,
+              style: [
+                styles.pillWrap,
+                {
+                  opacity: pill,
+                  transform: [
+                    {
+                      translateY: pill.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [theme.space[8], 0]
+                      })
+                    }
+                  ]
+                }
+              ],
+              children: /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: pillLabel,
+                  onPress: () => scrollToBottom(),
+                  style: styles.pill,
+                  children: [
+                    running ? /* @__PURE__ */ jsx(Thinking, { label: "", size: "sm", announce: false, motion }) : /* @__PURE__ */ jsx(Icon, { name: "arrow-down", size: theme.icon.xs, color: theme.color.text }),
+                    /* @__PURE__ */ jsx(Text, { style: styles.pillText, children: pillLabel })
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          ChatComposer,
+          {
+            inputRef,
+            value: draft,
+            onValueChange: setDraft,
+            onSend: send,
+            replyTo: replyingTo ? {
+              author: replyingTo.role === "user" ? user?.name ?? labels.you : assistant.name,
+              text: chatMessageText(replyingTo)
+            } : null,
+            onCancelReply: () => setReplyingTo(null),
+            running,
+            onStop,
+            placeholder,
+            attachments,
+            onAttachPress,
+            onRemoveAttachment,
+            toolbar: composerToolbar,
+            hint: disclaimer,
+            disabled,
+            motion,
+            labels,
+            style: [styles.composer, column]
+          }
+        )
+      ]
+    }
+  );
+}
+var sheet5 = createStyleSheet((theme) => ({
+  root: { flex: 1, backgroundColor: theme.color.surface },
+  stage: { flex: 1 },
+  content: { flexGrow: 1, gap: theme.space.s6, padding: theme.space.s4 },
+  older: { alignItems: "center" },
+  olderText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.text3
+  },
+  empty: {
+    flex: 1,
+    justifyContent: "center",
+    gap: theme.space.s2,
+    paddingVertical: theme.space.s8
+  },
+  emptyHead: { alignItems: "center", gap: theme.space.s3, marginBottom: theme.space.s4 },
+  emptyTitle: {
+    fontFamily: theme.font.display,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  emptyText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  pressed: { backgroundColor: theme.state.pressed },
+  meta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  day: { flexDirection: "row", alignItems: "center", gap: theme.space.s3 },
+  dayLine: { flex: 1, height: theme.borderWidth.base, backgroundColor: theme.color.border },
+  dayText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text3
+  },
+  pending: { flexDirection: "row", gap: theme.space.s3, alignItems: "center" },
+  followUps: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: theme.space.s2,
+    paddingLeft: theme.ctl.sm + theme.space.s3
+  },
+  followUp: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[6],
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s2,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  followUpText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text2
+  },
+  pillWrap: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: theme.space.s3,
+    alignItems: "center"
+  },
+  pill: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[6],
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s2,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.md
+  },
+  pillText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text
+  },
+  composer: { paddingHorizontal: theme.space.s4, paddingBottom: theme.space.s4 }
+}));
+
+export { CHAT_FEEDBACK_REASONS, Chat, ChatComposer, chatMessageText };