@guideai/react-native 0.0.0-stage → 0.2.0

package/dist/ui.mjs

@@ -0,0 +1,1525 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useRef, useState, useEffect, useCallback, useMemo, useContext, createContext } from "react";
+import { View, StyleSheet, Text, ScrollView, Linking, KeyboardAvoidingView, Pressable, Alert, FlatList, ActivityIndicator, TextInput, Platform, StatusBar, Animated, Easing, Dimensions, PanResponder, Modal } from "react-native";
+import { r as requireConfigured, b as useGuideAI, c as useOnboarding, E as EP } from "./useOnboarding-DAEGoYSs.js";
+function parseInline(text) {
+  const spans = [];
+  const pattern = /(`[^`]+`)|(\*\*[^*]+\*\*)|(__[^_]+__)|(\*[^*\n]+\*)|(_[^_\n]+_)|(\[[^\]]+\]\([^)]+\))/g;
+  let cursor = 0;
+  let match;
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > cursor) {
+      spans.push({ text: text.slice(cursor, match.index) });
+    }
+    const token = match[0];
+    if (token.startsWith("`")) {
+      spans.push({ text: token.slice(1, -1), code: true });
+    } else if (token.startsWith("**") || token.startsWith("__")) {
+      spans.push({ text: token.slice(2, -2), bold: true });
+    } else if (token.startsWith("[")) {
+      const split = token.indexOf("](");
+      spans.push({
+        text: token.slice(1, split),
+        href: token.slice(split + 2, -1)
+      });
+    } else {
+      spans.push({ text: token.slice(1, -1), italic: true });
+    }
+    cursor = match.index + token.length;
+  }
+  if (cursor < text.length) spans.push({ text: text.slice(cursor) });
+  return spans.length ? spans : [{ text }];
+}
+function tableCells(line) {
+  return line.replace(/^\s*\|/, "").replace(/\|\s*$/, "").split("|").map((cell) => parseInline(cell.trim()));
+}
+const TABLE_DIVIDER = /^\s*\|?[\s:-]*-[\s|:-]*\|?\s*$/;
+function parseMarkdown(source) {
+  var _a, _b;
+  const blocks = [];
+  const lines = source.replace(/\r\n/g, "\n").split("\n");
+  let index = 0;
+  while (index < lines.length) {
+    const line = lines[index];
+    const trimmed = line.trim();
+    if (!trimmed) {
+      index += 1;
+      continue;
+    }
+    const fence = /^```(\w+)?/.exec(trimmed);
+    if (fence) {
+      const language = fence[1];
+      const body = [];
+      index += 1;
+      while (index < lines.length && !lines[index].trim().startsWith("```")) {
+        body.push(lines[index]);
+        index += 1;
+      }
+      index += 1;
+      blocks.push({ type: "code", text: body.join("\n"), language });
+      continue;
+    }
+    if (trimmed.includes("|") && index + 1 < lines.length && TABLE_DIVIDER.test(lines[index + 1])) {
+      const header = tableCells(trimmed);
+      const rows = [];
+      index += 2;
+      while (index < lines.length && lines[index].includes("|") && lines[index].trim()) {
+        rows.push(tableCells(lines[index]));
+        index += 1;
+      }
+      blocks.push({ type: "table", header, rows });
+      continue;
+    }
+    const heading = /^(#{1,6})\s+(.*)$/.exec(trimmed);
+    if (heading) {
+      const level = Math.min(heading[1].length, 3);
+      blocks.push({ type: "heading", level, spans: parseInline(heading[2]) });
+      index += 1;
+      continue;
+    }
+    if (/^(\*\s*){3,}$|^(-\s*){3,}$|^(_\s*){3,}$/.test(trimmed)) {
+      blocks.push({ type: "rule" });
+      index += 1;
+      continue;
+    }
+    const quote = /^>\s?(.*)$/.exec(trimmed);
+    if (quote) {
+      blocks.push({ type: "quote", spans: parseInline(quote[1]) });
+      index += 1;
+      continue;
+    }
+    const indent = (_b = (_a = /^(\s*)/.exec(line)) == null ? void 0 : _a[1].length) != null ? _b : 0;
+    const depth = Math.floor(indent / 2);
+    const bullet = /^[-*+]\s+(.*)$/.exec(trimmed);
+    if (bullet) {
+      blocks.push({ type: "bullet", spans: parseInline(bullet[1]), depth });
+      index += 1;
+      continue;
+    }
+    const ordered = /^(\d+)[.)]\s+(.*)$/.exec(trimmed);
+    if (ordered) {
+      blocks.push({
+        type: "ordered",
+        spans: parseInline(ordered[2]),
+        index: Number(ordered[1]),
+        depth
+      });
+      index += 1;
+      continue;
+    }
+    const paragraph = [trimmed];
+    index += 1;
+    while (index < lines.length) {
+      const nextLine = lines[index].trim();
+      if (!nextLine || /^(#{1,6})\s/.test(nextLine) || /^[-*+]\s/.test(nextLine) || /^\d+[.)]\s/.test(nextLine) || nextLine.startsWith("```") || nextLine.startsWith(">") || nextLine.includes("|")) break;
+      paragraph.push(nextLine);
+      index += 1;
+    }
+    blocks.push({ type: "paragraph", spans: parseInline(paragraph.join(" ")) });
+  }
+  return blocks;
+}
+function Spans({ spans, style, accentColor }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: spans.map((span, index) => {
+    if (span.href) {
+      return /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [style, { color: accentColor, textDecorationLine: "underline" }],
+          onPress: () => {
+            void Linking.openURL(span.href);
+          },
+          accessibilityRole: "link",
+          children: span.text
+        },
+        index
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [
+          style,
+          span.bold ? styles$3.bold : null,
+          span.italic ? styles$3.italic : null,
+          span.code ? styles$3.inlineCode : null
+        ],
+        children: span.text
+      },
+      index
+    );
+  }) });
+}
+function Markdown({
+  children,
+  color = "#0f172a",
+  accentColor = "#2563eb",
+  fontSize = 15
+}) {
+  const blocks = React.useMemo(() => parseMarkdown(children), [children]);
+  const body = { color, fontSize, lineHeight: fontSize * 1.45 };
+  return /* @__PURE__ */ jsx(View, { style: styles$3.container, children: blocks.map((block, index) => /* @__PURE__ */ jsx(
+    Block,
+    {
+      block,
+      body,
+      color,
+      accentColor,
+      fontSize
+    },
+    index
+  )) });
+}
+function Block({ block, body, color, accentColor, fontSize }) {
+  switch (block.type) {
+    case "heading": {
+      const sizes = { 1: fontSize + 6, 2: fontSize + 3, 3: fontSize + 1 };
+      return /* @__PURE__ */ jsx(Text, { style: [styles$3.heading, { color, fontSize: sizes[block.level] }], children: /* @__PURE__ */ jsx(
+        Spans,
+        {
+          spans: block.spans,
+          accentColor,
+          style: { color, fontSize: sizes[block.level], fontWeight: "700" }
+        }
+      ) });
+    }
+    case "paragraph":
+      return /* @__PURE__ */ jsx(Text, { style: styles$3.paragraph, children: /* @__PURE__ */ jsx(Spans, { spans: block.spans, style: body, accentColor }) });
+    case "bullet":
+      return /* @__PURE__ */ jsxs(View, { style: [styles$3.listRow, { marginLeft: block.depth * 14 }], children: [
+        /* @__PURE__ */ jsx(Text, { style: [body, { color: accentColor }], children: "•" }),
+        /* @__PURE__ */ jsx(Text, { style: styles$3.listText, children: /* @__PURE__ */ jsx(Spans, { spans: block.spans, style: body, accentColor }) })
+      ] });
+    case "ordered":
+      return /* @__PURE__ */ jsxs(View, { style: [styles$3.listRow, { marginLeft: block.depth * 14 }], children: [
+        /* @__PURE__ */ jsxs(Text, { style: [body, { color: accentColor, fontVariant: ["tabular-nums"] }], children: [
+          block.index,
+          "."
+        ] }),
+        /* @__PURE__ */ jsx(Text, { style: styles$3.listText, children: /* @__PURE__ */ jsx(Spans, { spans: block.spans, style: body, accentColor }) })
+      ] });
+    case "code":
+      return /* @__PURE__ */ jsx(View, { style: styles$3.codeBlock, children: /* @__PURE__ */ jsx(Text, { style: [styles$3.codeText, { fontSize: fontSize - 2 }], children: block.text }) });
+    case "quote":
+      return /* @__PURE__ */ jsx(View, { style: [styles$3.quote, { borderLeftColor: accentColor }], children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(
+        Spans,
+        {
+          spans: block.spans,
+          accentColor,
+          style: { ...body, color: "#475569", fontStyle: "italic" }
+        }
+      ) }) });
+    case "rule":
+      return /* @__PURE__ */ jsx(View, { style: styles$3.rule });
+    case "table": {
+      const columns = Math.max(block.header.length, ...block.rows.map((r) => r.length), 1);
+      const scrolls = columns > 3;
+      const table = /* @__PURE__ */ jsxs(View, { style: [styles$3.table, scrolls ? { minWidth: columns * 116 } : null], children: [
+        /* @__PURE__ */ jsx(View, { style: [styles$3.tableRow, styles$3.tableHeaderRow], children: block.header.map((cell, index) => /* @__PURE__ */ jsx(View, { style: styles$3.tableCell, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(
+          Spans,
+          {
+            spans: cell,
+            accentColor,
+            style: { ...body, fontWeight: "700", fontSize: fontSize - 1 }
+          }
+        ) }) }, index)) }),
+        block.rows.map((row, rowIndex) => /* @__PURE__ */ jsx(View, { style: styles$3.tableRow, children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx(View, { style: styles$3.tableCell, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(
+          Spans,
+          {
+            spans: cell,
+            accentColor,
+            style: { ...body, fontSize: fontSize - 1 }
+          }
+        ) }) }, cellIndex)) }, rowIndex))
+      ] });
+      return scrolls ? /* @__PURE__ */ jsx(
+        ScrollView,
+        {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          alwaysBounceHorizontal: false,
+          children: table
+        }
+      ) : table;
+    }
+    default:
+      return null;
+  }
+}
+const mono = { fontFamily: "Menlo" };
+const styles$3 = StyleSheet.create({
+  container: { gap: 6 },
+  heading: { fontWeight: "700", marginTop: 4 },
+  paragraph: {},
+  listRow: { flexDirection: "row", gap: 8, alignItems: "flex-start" },
+  listText: { flex: 1 },
+  bold: { fontWeight: "700" },
+  italic: { fontStyle: "italic" },
+  inlineCode: {
+    ...mono,
+    backgroundColor: "rgba(100,116,139,0.14)",
+    color: "#0f172a"
+  },
+  codeBlock: {
+    backgroundColor: "#0f172a",
+    borderRadius: 10,
+    padding: 12,
+    marginVertical: 2
+  },
+  codeText: { ...mono, color: "#e2e8f0" },
+  quote: { borderLeftWidth: 3, paddingLeft: 10, paddingVertical: 2 },
+  rule: { height: StyleSheet.hairlineWidth, backgroundColor: "#cbd5e1", marginVertical: 6 },
+  table: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#cbd5e1",
+    borderRadius: 8,
+    overflow: "hidden"
+  },
+  tableRow: {
+    flexDirection: "row",
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#e2e8f0"
+  },
+  tableHeaderRow: { backgroundColor: "rgba(100,116,139,0.10)" },
+  tableCell: { flex: 1, padding: 8 }
+});
+const darkTheme = {
+  background: "#0B0713",
+  surface: "rgba(255,255,255,0.06)",
+  surfaceRaised: "#1C1626",
+  text: "#F5F3FF",
+  textMuted: "#8B85A0",
+  accent: "#7C5CFF",
+  onAccent: "#FFFFFF",
+  userBubble: "#7C5CFF",
+  onUserBubble: "#FFFFFF",
+  error: "rgba(248,113,113,0.16)",
+  border: "rgba(255,255,255,0.10)",
+  radius: 22,
+  fontSize: 15
+};
+const lightTheme = {
+  background: "#FFFFFF",
+  surface: "#F1F5F9",
+  surfaceRaised: "#FFFFFF",
+  text: "#0F172A",
+  textMuted: "#64748B",
+  accent: "#7C5CFF",
+  onAccent: "#FFFFFF",
+  userBubble: "#7C5CFF",
+  onUserBubble: "#FFFFFF",
+  error: "#FEE2E2",
+  border: "#E2E8F0",
+  radius: 22,
+  fontSize: 15
+};
+function resolveTheme(overrides, base = lightTheme) {
+  return overrides ? { ...base, ...overrides } : base;
+}
+function PersonIcon({ color }) {
+  return /* @__PURE__ */ jsxs(View, { style: styles$2.iconWrap, children: [
+    /* @__PURE__ */ jsx(View, { style: [styles$2.iconBand, { borderColor: color }] }),
+    /* @__PURE__ */ jsx(View, { style: [styles$2.iconCup, styles$2.iconCupLeft, { backgroundColor: color }] }),
+    /* @__PURE__ */ jsx(View, { style: [styles$2.iconCup, styles$2.iconCupRight, { backgroundColor: color }] })
+  ] });
+}
+function Orb({ theme, active }) {
+  const pulse = useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    if (!active) {
+      pulse.stopAnimation();
+      Animated.timing(pulse, { toValue: 0, duration: 240, useNativeDriver: true }).start();
+      return;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, {
+          toValue: 1,
+          duration: 900,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: true
+        }),
+        Animated.timing(pulse, {
+          toValue: 0,
+          duration: 900,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: true
+        })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [active, pulse]);
+  const scale = pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 1.18] });
+  const glow = pulse.interpolate({ inputRange: [0, 1], outputRange: [0.35, 0.7] });
+  return /* @__PURE__ */ jsxs(View, { style: styles$2.orbWrap, children: [
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [
+          styles$2.orbGlow,
+          { backgroundColor: theme.accent, opacity: glow, transform: [{ scale }] }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { style: [styles$2.orbCore, { backgroundColor: theme.accent }] })
+  ] });
+}
+function Bubble$1({ message, theme, onTalkToHuman }) {
+  if (message.role === "user") {
+    return /* @__PURE__ */ jsx(View, { style: [styles$2.row, styles$2.rowUser], children: /* @__PURE__ */ jsx(View, { style: [
+      styles$2.bubble,
+      { backgroundColor: theme.userBubble, borderRadius: theme.radius },
+      message.error ? { backgroundColor: theme.error } : null
+    ], children: /* @__PURE__ */ jsx(Text, { style: {
+      color: theme.onUserBubble,
+      fontSize: theme.fontSize,
+      lineHeight: theme.fontSize * 1.4
+    }, children: message.content }) }) });
+  }
+  return /* @__PURE__ */ jsx(View, { style: [styles$2.row, styles$2.rowAssistant], children: /* @__PURE__ */ jsxs(View, { style: [
+    styles$2.assistantBody,
+    message.error ? { backgroundColor: theme.error, borderRadius: theme.radius, padding: 12 } : null
+  ], children: [
+    message.content ? /* @__PURE__ */ jsx(Markdown, { color: theme.text, accentColor: theme.accent, fontSize: theme.fontSize, children: message.content }) : (
+      // A streaming message with no text yet would be an empty box.
+      /* @__PURE__ */ jsx(Text, { style: { color: theme.textMuted, fontSize: theme.fontSize }, children: message.streaming ? "…" : "" })
+    ),
+    message.error && onTalkToHuman ? /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        onPress: onTalkToHuman,
+        accessibilityRole: "button",
+        accessibilityLabel: "Talk to a person",
+        style: [styles$2.errorAction, { borderColor: theme.accent }],
+        hitSlop: 6,
+        children: [
+          /* @__PURE__ */ jsx(PersonIcon, { color: theme.accent }),
+          /* @__PURE__ */ jsx(Text, { style: [styles$2.humanText, {
+            color: theme.accent,
+            fontSize: theme.fontSize - 1
+          }], children: "Talk to a human" })
+        ]
+      }
+    ) : null
+  ] }) });
+}
+function resolveTopInset(explicit) {
+  var _a;
+  if (explicit !== void 0) return explicit;
+  if (Platform.OS === "android") return (_a = StatusBar.currentHeight) != null ? _a : 24;
+  return 8;
+}
+function useHumanHandover(onTalkToHuman, available) {
+  const [reachable, setReachable] = useState(false);
+  useEffect(() => {
+    if (!onTalkToHuman || available !== void 0) return;
+    let cancelled = false;
+    void (async () => {
+      try {
+        const { api } = requireConfigured();
+        const status = await api.get(
+          EP.supportStatus()
+        );
+        if (!cancelled) setReachable(!!(status == null ? void 0 : status.enabled));
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [onTalkToHuman, available]);
+  if (!onTalkToHuman) return false;
+  return available != null ? available : reachable;
+}
+function GuideAIChat({
+  theme: overrides,
+  placeholder = "Ask me anything",
+  greeting = "Ask me anything",
+  emptyState,
+  showMic = false,
+  leadingAccessory,
+  title,
+  onClose,
+  onTalkToHuman,
+  humanHandoverAvailable,
+  topInset
+}) {
+  const { harness, debug } = requireConfigured();
+  const {
+    messages,
+    input,
+    setInput,
+    send,
+    busy,
+    canSend,
+    status
+  } = useGuideAI({ harness, trace: debug });
+  const theme = resolveTheme(overrides);
+  const listRef = useRef(null);
+  const showHuman = useHumanHandover(onTalkToHuman, humanHandoverAvailable);
+  const { checklist, dismiss } = useOnboarding();
+  const nextSetupStep = checklist == null ? void 0 : checklist.steps.find((step) => step.state === "available");
+  const headerTop = resolveTopInset(topInset);
+  const submit = () => {
+    void send();
+  };
+  return /* @__PURE__ */ jsxs(
+    KeyboardAvoidingView,
+    {
+      style: [styles$2.container, { backgroundColor: theme.background }],
+      behavior: Platform.OS === "ios" ? "padding" : void 0,
+      children: [
+        title || onClose || showHuman ? /* @__PURE__ */ jsxs(View, { style: [
+          styles$2.header,
+          { borderBottomColor: theme.border, paddingTop: headerTop + 14 }
+        ], children: [
+          /* @__PURE__ */ jsx(View, { style: styles$2.headerSide, children: title ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              numberOfLines: 1,
+              style: [styles$2.title, { color: theme.text, fontSize: theme.fontSize + 1 }],
+              children: title
+            }
+          ) : null }),
+          /* @__PURE__ */ jsxs(View, { style: styles$2.headerActions, children: [
+            showHuman ? /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                onPress: onTalkToHuman,
+                accessibilityRole: "button",
+                accessibilityLabel: "Talk to a person",
+                style: [styles$2.human, {
+                  backgroundColor: theme.surface,
+                  borderColor: theme.border
+                }],
+                hitSlop: 8,
+                children: [
+                  /* @__PURE__ */ jsx(PersonIcon, { color: theme.accent }),
+                  /* @__PURE__ */ jsx(Text, { style: [styles$2.humanText, {
+                    color: theme.accent,
+                    fontSize: theme.fontSize - 2
+                  }], children: "Talk to human" })
+                ]
+              }
+            ) : null,
+            onClose ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: onClose,
+                accessibilityRole: "button",
+                accessibilityLabel: "Close assistant",
+                style: [styles$2.close, { backgroundColor: theme.surface }],
+                hitSlop: 10,
+                children: /* @__PURE__ */ jsx(Text, { style: [styles$2.closeIcon, { color: theme.text }], children: "✕" })
+              }
+            ) : null
+          ] })
+        ] }) : null,
+        checklist && !checklist.completed && !checklist.dismissed ? /* @__PURE__ */ jsxs(View, { style: { margin: 14, padding: 14, borderRadius: 12, borderWidth: 1, borderColor: theme.border, backgroundColor: theme.surface }, accessibilityLabel: "Setup checklist", children: [
+          /* @__PURE__ */ jsx(Text, { style: { color: theme.text, fontWeight: "700", fontSize: theme.fontSize + 2 }, children: checklist.title }),
+          /* @__PURE__ */ jsx(Text, { style: { color: theme.textMuted, marginTop: 3 }, children: checklist.goal }),
+          /* @__PURE__ */ jsxs(Text, { style: { color: theme.textMuted, marginTop: 8 }, children: [
+            checklist.completed_required,
+            " of ",
+            checklist.total_required,
+            " required steps complete"
+          ] }),
+          checklist.steps.map((step) => /* @__PURE__ */ jsxs(Text, { style: { color: step.state === "locked" ? theme.textMuted : theme.text, marginTop: 5 }, children: [
+            step.state === "complete" ? "✓" : step.state === "locked" ? "–" : "○",
+            " ",
+            step.title
+          ] }, step.id)),
+          nextSetupStep ? /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Help with ${nextSetupStep.title}`, onPress: () => void send(`Help me with ${nextSetupStep.title}`), style: { alignSelf: "flex-start", marginTop: 10, padding: 10, borderRadius: 8, backgroundColor: theme.accent }, children: /* @__PURE__ */ jsx(Text, { style: { color: theme.onAccent, fontWeight: "600" }, children: "Continue setup" }) }) : null,
+          checklist.allow_dismissal ? /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "I don't need this setup", onPress: () => Alert.alert("Stop showing setup?", "This checklist will not appear again on future visits.", [
+            { text: "Keep setup", style: "cancel" },
+            { text: "I don't need it", onPress: () => {
+              void dismiss().catch(() => Alert.alert("Could not dismiss setup", "Please try again."));
+            } }
+          ]), style: { alignSelf: "flex-start", marginTop: 10, padding: 10 }, children: /* @__PURE__ */ jsx(Text, { style: { color: theme.textMuted, textDecorationLine: "underline" }, children: "I don't need this setup" }) }) : null
+        ] }) : null,
+        messages.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles$2.empty, children: emptyState != null ? emptyState : /* @__PURE__ */ jsxs(View, { style: styles$2.greetingRow, children: [
+          /* @__PURE__ */ jsx(Orb, { theme, active: busy }),
+          /* @__PURE__ */ jsx(Text, { style: [
+            styles$2.greeting,
+            { color: theme.textMuted, fontSize: theme.fontSize + 3 }
+          ], children: greeting })
+        ] }) }) : /* @__PURE__ */ jsx(
+          FlatList,
+          {
+            ref: listRef,
+            data: messages,
+            keyExtractor: (message) => message.id,
+            renderItem: ({ item }) => /* @__PURE__ */ jsx(Bubble$1, { message: item, theme, onTalkToHuman }),
+            contentContainerStyle: styles$2.list,
+            onContentSizeChange: () => {
+              var _a;
+              return (_a = listRef.current) == null ? void 0 : _a.scrollToEnd({ animated: true });
+            },
+            keyboardShouldPersistTaps: "handled"
+          }
+        ),
+        status ? /* @__PURE__ */ jsxs(View, { style: styles$2.status, children: [
+          /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.accent }),
+          /* @__PURE__ */ jsx(Text, { style: { color: theme.textMuted, fontSize: theme.fontSize - 2 }, children: status })
+        ] }) : null,
+        /* @__PURE__ */ jsxs(View, { style: styles$2.composerRow, children: [
+          /* @__PURE__ */ jsxs(View, { style: [
+            styles$2.composer,
+            {
+              backgroundColor: theme.surface,
+              borderRadius: theme.radius + 6,
+              borderColor: theme.border
+            }
+          ], children: [
+            leadingAccessory ? /* @__PURE__ */ jsx(View, { style: styles$2.leading, children: leadingAccessory }) : null,
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                style: [styles$2.input, { color: theme.text, fontSize: theme.fontSize }],
+                value: input,
+                onChangeText: setInput,
+                placeholder: checklist && !checklist.completed && checklist.chat_policy === "setup_only" ? "Ask about your setup" : placeholder,
+                placeholderTextColor: theme.textMuted,
+                editable: !busy,
+                onSubmitEditing: submit,
+                returnKeyType: "send",
+                multiline: true,
+                accessibilityLabel: placeholder
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: submit,
+                disabled: !canSend,
+                accessibilityRole: "button",
+                accessibilityLabel: "Send",
+                style: [styles$2.send, { backgroundColor: canSend ? theme.accent : theme.border }],
+                hitSlop: 6,
+                children: /* @__PURE__ */ jsx(Text, { style: [
+                  styles$2.sendIcon,
+                  { color: canSend ? theme.onAccent : theme.textMuted }
+                ], children: "↑" })
+              }
+            )
+          ] }),
+          showMic ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: "Voice input",
+              style: [styles$2.mic, { backgroundColor: theme.surface, borderColor: theme.border }],
+              children: /* @__PURE__ */ jsx(Text, { style: { color: theme.textMuted, fontSize: 18 }, children: "🎤" })
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+const styles$2 = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    // paddingTop is set inline from the status-bar inset; only the
+    // bottom half of the navbar's breathing room lives here.
+    paddingHorizontal: 16,
+    paddingBottom: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  headerSide: { flex: 1, minWidth: 0 },
+  headerActions: { flexDirection: "row", alignItems: "center", gap: 8 },
+  title: { fontWeight: "600" },
+  human: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 999,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  humanText: { fontWeight: "600" },
+  errorAction: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    alignSelf: "flex-start",
+    marginTop: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+    borderRadius: 999,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  iconWrap: { width: 14, height: 14, alignItems: "center", justifyContent: "center" },
+  iconBand: {
+    position: "absolute",
+    top: 1,
+    width: 12,
+    height: 9,
+    borderWidth: 1.6,
+    borderBottomWidth: 0,
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6
+  },
+  iconCup: { position: "absolute", bottom: 1, width: 3.5, height: 6, borderRadius: 1.5 },
+  iconCupLeft: { left: 0 },
+  iconCupRight: { right: 0 },
+  close: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  closeIcon: { fontSize: 15, fontWeight: "600", lineHeight: 18 },
+  list: { padding: 16, paddingBottom: 8, gap: 14 },
+  empty: {
+    // Centred, not pinned near the top: before the first message the
+    // greeting is the only thing on screen, and hanging it under the
+    // navbar leaves the rest of the display empty.
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 24,
+    paddingBottom: 24
+  },
+  greetingRow: { flexDirection: "row", alignItems: "center", gap: 14 },
+  greeting: { fontWeight: "400", textAlign: "center", flexShrink: 1 },
+  orbWrap: { width: 34, height: 34, alignItems: "center", justifyContent: "center" },
+  orbGlow: { position: "absolute", width: 34, height: 34, borderRadius: 17 },
+  orbCore: { width: 20, height: 20, borderRadius: 10 },
+  row: { flexDirection: "row" },
+  rowUser: { justifyContent: "flex-end" },
+  rowAssistant: { justifyContent: "flex-start" },
+  // The user's bubble hugs its text: a three-word question drawn as a
+  // full-width block reads as a paragraph, not a chat message. It is
+  // capped at 80% so a long one still leaves the reply side legible.
+  bubble: { maxWidth: "80%", paddingHorizontal: 16, paddingVertical: 11 },
+  // The assistant's body does NOT hug its content, and that is the whole
+  // point of `width` here rather than `maxWidth` alone.
+  //
+  // A View with only maxWidth shrink-wraps — React Native's equivalent of
+  // width: fit-content. For a paragraph that looks fine, because the text
+  // fills the measure anyway. For anything that lays itself out against
+  // its parent — a table whose cells are `flex: 1`, a fenced code block,
+  // a numbered list — the parent has collapsed to nothing by the time the
+  // child is measured, so the table renders as an empty sliver and every
+  // reply ends up a different width.
+  //
+  // Fixing it here rather than on the table keeps every block type
+  // consistent: one column, the same measure for prose, code and tables.
+  assistantBody: { width: "80%" },
+  status: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 22,
+    paddingBottom: 8
+  },
+  composerRow: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 10,
+    paddingHorizontal: 14,
+    paddingBottom: Platform.OS === "ios" ? 10 : 14,
+    paddingTop: 4
+  },
+  composer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingLeft: 8,
+    paddingRight: 6,
+    paddingVertical: 6,
+    borderWidth: StyleSheet.hairlineWidth,
+    gap: 6
+  },
+  leading: { paddingLeft: 4 },
+  input: {
+    flex: 1,
+    paddingHorizontal: 8,
+    paddingVertical: Platform.OS === "ios" ? 8 : 4,
+    maxHeight: 120
+  },
+  send: { width: 34, height: 34, borderRadius: 17, alignItems: "center", justifyContent: "center" },
+  sendIcon: { fontSize: 17, fontWeight: "700", lineHeight: 20 },
+  mic: {
+    width: 46,
+    height: 46,
+    borderRadius: 23,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: StyleSheet.hairlineWidth
+  }
+});
+const POLL_INTERVAL_MS = 3e3;
+const CONVERSATION_KEY = "guideai_support_conversation";
+function useStoredConversation() {
+  const { runtime } = requireConfigured();
+  const [id, setId] = useState(() => {
+    try {
+      return runtime.storage.getItem(CONVERSATION_KEY);
+    } catch {
+      return null;
+    }
+  });
+  const persist = useCallback((next) => {
+    setId(next);
+    try {
+      if (next) runtime.storage.setItem(CONVERSATION_KEY, next);
+      else runtime.storage.removeItem(CONVERSATION_KEY);
+    } catch {
+    }
+  }, [runtime]);
+  return [id, persist];
+}
+function Bubble({ message, theme }) {
+  if (message.sender === "system") {
+    return /* @__PURE__ */ jsx(Text, { style: [styles$1.systemNote, {
+      color: theme.textMuted,
+      fontSize: theme.fontSize - 2
+    }], children: message.body });
+  }
+  const fromVisitor = message.sender === "visitor";
+  return /* @__PURE__ */ jsx(View, { style: [styles$1.row, fromVisitor ? styles$1.rowUser : styles$1.rowAgent], children: /* @__PURE__ */ jsxs(View, { style: styles$1.column, children: [
+    !fromVisitor && message.sender_name ? /* @__PURE__ */ jsx(Text, { style: [styles$1.senderName, {
+      color: theme.textMuted,
+      fontSize: theme.fontSize - 3
+    }], children: message.sender_name }) : null,
+    /* @__PURE__ */ jsx(View, { style: [
+      styles$1.bubble,
+      {
+        borderRadius: theme.radius,
+        backgroundColor: fromVisitor ? theme.userBubble : theme.surface
+      }
+    ], children: /* @__PURE__ */ jsx(Text, { style: {
+      color: fromVisitor ? theme.onUserBubble : theme.text,
+      fontSize: theme.fontSize,
+      lineHeight: theme.fontSize * 1.4
+    }, children: message.body }) })
+  ] }) });
+}
+function GuideAISupportChat({
+  theme: overrides,
+  onClose,
+  onBackToAssistant,
+  topInset,
+  openingContext
+}) {
+  var _a;
+  const { api } = requireConfigured();
+  const theme = resolveTheme(overrides);
+  const headerTop = topInset != null ? topInset : Platform.OS === "android" ? (_a = StatusBar.currentHeight) != null ? _a : 24 : 8;
+  const [conversationId, setConversationId] = useStoredConversation();
+  const [messages, setMessages] = useState([]);
+  const [agentsOnline, setAgentsOnline] = useState(null);
+  const [input, setInput] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [issue, setIssue] = useState("");
+  const listRef = useRef(null);
+  const cursor = useRef(null);
+  const seenIds = useRef(/* @__PURE__ */ new Set());
+  const mounted = useRef(true);
+  useEffect(() => () => {
+    mounted.current = false;
+  }, []);
+  const poll = useCallback(async (id) => {
+    var _a2;
+    try {
+      const path = EP.supportMsgs(id);
+      const result = await api.get(
+        cursor.current ? `${path}?since=${encodeURIComponent(cursor.current)}` : path
+      );
+      if (!mounted.current) return;
+      setAgentsOnline(result.agents_online);
+      const fresh = ((_a2 = result.messages) != null ? _a2 : []).filter((m) => !seenIds.current.has(m.id));
+      if (fresh.length === 0) return;
+      for (const message of fresh) {
+        seenIds.current.add(message.id);
+        if (!cursor.current || message.created_at > cursor.current) {
+          cursor.current = message.created_at;
+        }
+      }
+      setMessages((previous) => [...previous, ...fresh]);
+    } catch {
+    }
+  }, [api]);
+  useEffect(() => {
+    if (!conversationId) return;
+    void poll(conversationId);
+    const timer = setInterval(() => {
+      void poll(conversationId);
+    }, POLL_INTERVAL_MS);
+    return () => clearInterval(timer);
+  }, [conversationId, poll]);
+  const startConversation = useCallback(async () => {
+    const text = issue.trim();
+    if (!text || busy) return;
+    setBusy(true);
+    setFailed(false);
+    try {
+      const result = await api.post(
+        EP.supportConvs(),
+        {
+          message: openingContext ? `${text}
+
+---
+${openingContext}` : text,
+          visitor_name: name.trim() || void 0,
+          visitor_email: email.trim() || void 0
+        }
+      );
+      if (!mounted.current) return;
+      setAgentsOnline(result.agents_online);
+      setConversationId(result.conversation_id);
+    } catch {
+      if (mounted.current) setFailed(true);
+    } finally {
+      if (mounted.current) setBusy(false);
+    }
+  }, [api, busy, email, issue, name, openingContext, setConversationId]);
+  const send = useCallback(async () => {
+    const text = input.trim();
+    if (!text || !conversationId || busy) return;
+    setInput("");
+    setBusy(true);
+    try {
+      await api.post(EP.supportMsgs(conversationId), { body: text });
+      await poll(conversationId);
+    } catch {
+      if (mounted.current) {
+        setInput(text);
+        setFailed(true);
+      }
+    } finally {
+      if (mounted.current) setBusy(false);
+    }
+  }, [api, busy, conversationId, input, poll]);
+  const presence = agentsOnline === null ? "Connecting…" : agentsOnline > 0 ? `${agentsOnline} agent${agentsOnline === 1 ? "" : "s"} online` : "No agents online — leave a message and we will reply by email";
+  return /* @__PURE__ */ jsxs(
+    KeyboardAvoidingView,
+    {
+      style: [styles$1.container, { backgroundColor: theme.background }],
+      behavior: Platform.OS === "ios" ? "padding" : "height",
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: [
+          styles$1.header,
+          { borderBottomColor: theme.border, paddingTop: headerTop + 14 }
+        ], children: [
+          /* @__PURE__ */ jsxs(View, { style: styles$1.headerSide, children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                numberOfLines: 1,
+                style: [styles$1.title, { color: theme.text, fontSize: theme.fontSize + 1 }],
+                children: "Support"
+              }
+            ),
+            /* @__PURE__ */ jsxs(View, { style: styles$1.presenceRow, children: [
+              /* @__PURE__ */ jsx(View, { style: [styles$1.presenceDot, {
+                backgroundColor: agentsOnline ? "#22c55e" : theme.textMuted
+              }] }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  numberOfLines: 1,
+                  style: { color: theme.textMuted, fontSize: theme.fontSize - 3 },
+                  children: presence
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(View, { style: styles$1.headerActions, children: [
+            onBackToAssistant ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: onBackToAssistant,
+                accessibilityRole: "button",
+                accessibilityLabel: "Back to the assistant",
+                style: [styles$1.backBtn, { borderColor: theme.border }],
+                hitSlop: 8,
+                children: /* @__PURE__ */ jsx(Text, { style: { color: theme.accent, fontSize: theme.fontSize - 2, fontWeight: "600" }, children: "Assistant" })
+              }
+            ) : null,
+            onClose ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: onClose,
+                accessibilityRole: "button",
+                accessibilityLabel: "Close support",
+                style: [styles$1.close, { backgroundColor: theme.surface }],
+                hitSlop: 10,
+                children: /* @__PURE__ */ jsx(Text, { style: [styles$1.closeIcon, { color: theme.text }], children: "✕" })
+              }
+            ) : null
+          ] })
+        ] }),
+        !conversationId ? (
+          // ── Intake ──
+          // Name and email are optional; the issue is not. Asking for
+          // everything before a visitor may speak is how support forms lose
+          // people who just want to ask something.
+          /* @__PURE__ */ jsxs(
+            ScrollView,
+            {
+              style: styles$1.intakeScroll,
+              contentContainerStyle: styles$1.intake,
+              keyboardShouldPersistTaps: "handled",
+              children: [
+                /* @__PURE__ */ jsx(Text, { style: [styles$1.intakeTitle, { color: theme.text, fontSize: theme.fontSize + 2 }], children: "Talk to a person" }),
+                /* @__PURE__ */ jsx(Text, { style: { color: theme.textMuted, fontSize: theme.fontSize - 1, lineHeight: 20 }, children: "Tell us what you need and we will connect you with someone." }),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    style: [styles$1.field, {
+                      color: theme.text,
+                      borderColor: theme.border,
+                      backgroundColor: theme.surface,
+                      fontSize: theme.fontSize
+                    }],
+                    value: name,
+                    onChangeText: setName,
+                    placeholder: "Your name (optional)",
+                    placeholderTextColor: theme.textMuted,
+                    autoCapitalize: "words"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    style: [styles$1.field, {
+                      color: theme.text,
+                      borderColor: theme.border,
+                      backgroundColor: theme.surface,
+                      fontSize: theme.fontSize
+                    }],
+                    value: email,
+                    onChangeText: setEmail,
+                    placeholder: "Email (optional)",
+                    placeholderTextColor: theme.textMuted,
+                    autoCapitalize: "none",
+                    keyboardType: "email-address"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    style: [styles$1.field, styles$1.fieldMultiline, {
+                      color: theme.text,
+                      borderColor: theme.border,
+                      backgroundColor: theme.surface,
+                      fontSize: theme.fontSize
+                    }],
+                    value: issue,
+                    onChangeText: setIssue,
+                    placeholder: "How can we help?",
+                    placeholderTextColor: theme.textMuted,
+                    multiline: true
+                  }
+                ),
+                failed ? /* @__PURE__ */ jsx(Text, { style: { color: theme.textMuted, fontSize: theme.fontSize - 2 }, children: "We could not start the conversation. Please try again." }) : null,
+                /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    onPress: () => {
+                      void startConversation();
+                    },
+                    disabled: !issue.trim() || busy,
+                    accessibilityRole: "button",
+                    style: [styles$1.primaryBtn, {
+                      backgroundColor: issue.trim() && !busy ? theme.accent : theme.border
+                    }],
+                    children: busy ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.onAccent }) : /* @__PURE__ */ jsx(Text, { style: {
+                      color: issue.trim() ? theme.onAccent : theme.textMuted,
+                      fontSize: theme.fontSize,
+                      fontWeight: "700"
+                    }, children: "Start conversation" })
+                  }
+                )
+              ]
+            }
+          )
+        ) : (
+          // ── Thread ──
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              FlatList,
+              {
+                ref: listRef,
+                style: styles$1.list,
+                data: messages,
+                keyExtractor: (message) => message.id,
+                renderItem: ({ item }) => /* @__PURE__ */ jsx(Bubble, { message: item, theme }),
+                contentContainerStyle: [
+                  styles$1.listContent,
+                  // Centre the waiting state instead of pinning it under the
+                  // header: an empty thread is most of the screen.
+                  messages.length === 0 ? styles$1.listContentEmpty : null
+                ],
+                onContentSizeChange: () => {
+                  var _a2;
+                  return (_a2 = listRef.current) == null ? void 0 : _a2.scrollToEnd({ animated: true });
+                },
+                keyboardShouldPersistTaps: "handled",
+                ListEmptyComponent: (
+                  // This is most of the screen while a visitor waits, so it
+                  // says what is happening and what to expect rather than
+                  // leaving them looking at one grey line.
+                  /* @__PURE__ */ jsxs(View, { style: styles$1.waiting, children: [
+                    /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.accent }),
+                    /* @__PURE__ */ jsx(Text, { style: [styles$1.waitingTitle, {
+                      color: theme.text,
+                      fontSize: theme.fontSize
+                    }], children: agentsOnline ? "Connecting you to an agent…" : "Message sent" }),
+                    /* @__PURE__ */ jsx(Text, { style: [styles$1.waitingBody, {
+                      color: theme.textMuted,
+                      fontSize: theme.fontSize - 2
+                    }], children: agentsOnline ? "Someone will be with you shortly. You can keep typing in the meantime." : "Nobody is online right now, but your message is saved and we will reply by email." })
+                  ] })
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(View, { style: [styles$1.composerRow, { borderTopColor: theme.border }], children: /* @__PURE__ */ jsxs(View, { style: [styles$1.composer, {
+              backgroundColor: theme.surface,
+              borderRadius: theme.radius + 6,
+              borderColor: theme.border
+            }], children: [
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  style: [styles$1.input, { color: theme.text, fontSize: theme.fontSize }],
+                  value: input,
+                  onChangeText: setInput,
+                  placeholder: "Write a message",
+                  placeholderTextColor: theme.textMuted,
+                  onSubmitEditing: () => {
+                    void send();
+                  },
+                  returnKeyType: "send",
+                  multiline: true
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  onPress: () => {
+                    void send();
+                  },
+                  disabled: !input.trim() || busy,
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Send",
+                  style: [styles$1.send, {
+                    backgroundColor: input.trim() && !busy ? theme.accent : theme.border
+                  }],
+                  hitSlop: 6,
+                  children: /* @__PURE__ */ jsx(Text, { style: [styles$1.sendIcon, {
+                    color: input.trim() && !busy ? theme.onAccent : theme.textMuted
+                  }], children: "↑" })
+                }
+              )
+            ] }) })
+          ] })
+        )
+      ]
+    }
+  );
+}
+const styles$1 = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingBottom: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  headerSide: { flex: 1, minWidth: 0 },
+  headerActions: { flexDirection: "row", alignItems: "center", gap: 8 },
+  title: { fontWeight: "600" },
+  presenceRow: { flexDirection: "row", alignItems: "center", gap: 6, marginTop: 3 },
+  presenceDot: { width: 7, height: 7, borderRadius: 4 },
+  backBtn: {
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+    borderRadius: 999,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  close: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  closeIcon: { fontSize: 15, fontWeight: "600", lineHeight: 18 },
+  // The form has to own the space under the header — without flex it sits
+  // jammed at the top with the rest of the sheet blank — and it has to
+  // scroll, or the keyboard buries the button on a short phone.
+  intakeScroll: { flex: 1 },
+  intake: { padding: 20, gap: 14, paddingBottom: 32 },
+  intakeTitle: { fontWeight: "700" },
+  field: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    // 48pt tall: a text field below the 44pt touch minimum is hard to hit
+    // and reads as disabled.
+    minHeight: 48,
+    paddingVertical: Platform.OS === "ios" ? 14 : 10
+  },
+  fieldMultiline: { minHeight: 110, textAlignVertical: "top", paddingTop: 14 },
+  primaryBtn: {
+    borderRadius: 999,
+    minHeight: 50,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 6
+  },
+  // `style` fills the sheet; `contentContainerStyle` lays out the rows.
+  // Putting padding on the container and nothing on the list is what left
+  // the composer floating in the middle of the screen.
+  list: { flex: 1 },
+  listContent: { padding: 16, paddingBottom: 12, gap: 14 },
+  listContentEmpty: { flexGrow: 1, justifyContent: "center" },
+  row: { flexDirection: "row" },
+  rowUser: { justifyContent: "flex-end" },
+  rowAgent: { justifyContent: "flex-start" },
+  // ONE width cap, on the column. It used to be here and on the bubble
+  // too, and nested percentages multiply: an agent's reply was 80% of 80%
+  // — 64% of the sheet — while the visitor's own messages ran to 80%.
+  column: { maxWidth: "82%" },
+  bubble: { paddingHorizontal: 15, paddingVertical: 11 },
+  senderName: { marginBottom: 4, marginLeft: 8, fontWeight: "600" },
+  systemNote: { textAlign: "center", marginVertical: 6, paddingHorizontal: 24 },
+  waiting: { alignItems: "center", gap: 10, paddingHorizontal: 32 },
+  waitingTitle: { fontWeight: "600", marginTop: 4 },
+  waitingBody: { textAlign: "center", lineHeight: 19 },
+  composerRow: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 10,
+    paddingHorizontal: 14,
+    paddingBottom: Platform.OS === "ios" ? 12 : 14,
+    paddingTop: 10,
+    // A hairline above the composer: without it the input floats against
+    // the last message with nothing marking where the thread ends.
+    borderTopWidth: StyleSheet.hairlineWidth
+  },
+  composer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "flex-end",
+    paddingLeft: 10,
+    paddingRight: 6,
+    paddingVertical: 5,
+    borderWidth: StyleSheet.hairlineWidth,
+    gap: 6
+  },
+  input: {
+    flex: 1,
+    paddingHorizontal: 6,
+    minHeight: 38,
+    maxHeight: 120,
+    paddingVertical: Platform.OS === "ios" ? 9 : 6
+  },
+  // 38pt, matching the input's resting height so the two line up, and
+  // paired with hitSlop to clear the 44pt touch minimum.
+  send: { width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center" },
+  sendIcon: { fontSize: 18, fontWeight: "700", lineHeight: 21 }
+});
+const SheetContext = createContext(null);
+function useGuideAISheet() {
+  const controls = useContext(SheetContext);
+  if (!controls) {
+    throw new Error(
+      "useGuideAISheet() must be used inside <GuideAILauncher>. Mount it once at your app root, above your navigator."
+    );
+  }
+  return controls;
+}
+function Nudge({ text, side, bottom, horizontal, theme, onDismiss }) {
+  const enter = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(enter, {
+      toValue: 1,
+      duration: 260,
+      easing: Easing.out(Easing.back(1.4)),
+      useNativeDriver: true
+    }).start();
+  }, [enter]);
+  const translate = enter.interpolate({
+    inputRange: [0, 1],
+    // Slides in from the button it belongs to, so the eye is led to it.
+    outputRange: [side === "right" ? 14 : -14, 0]
+  });
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      pointerEvents: "box-none",
+      style: [
+        styles.nudge,
+        {
+          bottom: bottom + 14,
+          backgroundColor: theme.surfaceRaised,
+          borderColor: theme.border,
+          opacity: enter,
+          transform: [{ translateX: translate }]
+        },
+        side === "right" ? { right: horizontal + 64 } : { left: horizontal + 64 }
+      ],
+      children: /* @__PURE__ */ jsx(Pressable, { onPress: onDismiss, accessibilityRole: "button", accessibilityLabel: text, children: /* @__PURE__ */ jsx(Text, { style: [styles.nudgeText, { color: theme.text, fontSize: theme.fontSize - 1 }], children: text }) })
+    }
+  );
+}
+function GuideAILauncher({
+  hideButton = false,
+  position = "bottom-right",
+  offset,
+  icon,
+  label = "Open assistant",
+  draggable = true,
+  nudge = "Need a hand? Ask me anything",
+  nudgeDelay = 1200,
+  nudgeDuration = 5e3,
+  children,
+  ...chatProps
+}) {
+  var _a, _b, _c;
+  const [isOpen, setIsOpen] = useState(false);
+  const { checklist } = useOnboarding();
+  const autoOpenedFor = useRef(null);
+  const [view, setView] = useState("assistant");
+  const theme = resolveTheme(chatProps.theme);
+  useEffect(() => {
+    if (checklist && !checklist.completed && !checklist.dismissed && checklist.start_mode === "automatic" && autoOpenedFor.current !== checklist.id) {
+      autoOpenedFor.current = checklist.id;
+      setIsOpen(true);
+    }
+  }, [checklist == null ? void 0 : checklist.id, checklist == null ? void 0 : checklist.completed, checklist == null ? void 0 : checklist.dismissed, checklist == null ? void 0 : checklist.start_mode]);
+  const effectiveNudge = checklist && !checklist.completed && !checklist.dismissed ? `Setup: ${checklist.total_required - checklist.completed_required} required steps remaining` : nudge;
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+  const toggle = useCallback(() => setIsOpen((previous) => !previous), []);
+  const controls = useMemo(
+    () => ({ open, close, toggle, isOpen }),
+    [open, close, toggle, isOpen]
+  );
+  const bottom = (_a = offset == null ? void 0 : offset.bottom) != null ? _a : 28;
+  const horizontal = (_b = offset == null ? void 0 : offset.horizontal) != null ? _b : 20;
+  const FAB_SIZE = 56;
+  const screen = Dimensions.get("window");
+  const pan = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const panValue = useRef({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+  useEffect(() => {
+    const id = pan.addListener((value) => {
+      panValue.current = value;
+    });
+    return () => pan.removeListener(id);
+  }, [pan]);
+  const responder = useMemo(() => PanResponder.create({
+    // Claim the gesture only once it is clearly a drag, so a tap still
+    // reaches the button's onPress.
+    onMoveShouldSetPanResponder: (_event, gesture) => draggable && (Math.abs(gesture.dx) > 4 || Math.abs(gesture.dy) > 4),
+    onPanResponderGrant: () => {
+      setDragging(true);
+      pan.setOffset({ ...panValue.current });
+      pan.setValue({ x: 0, y: 0 });
+    },
+    onPanResponderMove: Animated.event(
+      [null, { dx: pan.x, dy: pan.y }],
+      // PanResponder has no native-driver equivalent; the values feed a
+      // transform, which stays smooth enough for one small view.
+      { useNativeDriver: false }
+    ),
+    onPanResponderRelease: () => {
+      pan.flattenOffset();
+      setDragging(false);
+      const restingX = position === "bottom-right" ? screen.width - horizontal - FAB_SIZE : horizontal;
+      const currentX = restingX + panValue.current.x;
+      screen.height - bottom - FAB_SIZE + panValue.current.y;
+      const snapLeft = currentX + FAB_SIZE / 2 < screen.width / 2;
+      const targetX = (snapLeft ? horizontal : screen.width - horizontal - FAB_SIZE) - restingX;
+      const minY = -(screen.height - bottom - FAB_SIZE - 60);
+      const maxY = bottom - 12;
+      const targetY = Math.min(Math.max(panValue.current.y, minY), maxY);
+      Animated.spring(pan, {
+        toValue: { x: targetX, y: targetY },
+        useNativeDriver: false,
+        friction: 7,
+        tension: 60
+      }).start();
+    }
+  }), [draggable, pan, position, screen.width, screen.height, horizontal, bottom]);
+  const [nudgeVisible, setNudgeVisible] = useState(false);
+  const nudgeShown = useRef(false);
+  useEffect(() => {
+    if (!effectiveNudge || hideButton || nudgeShown.current) return;
+    const show = setTimeout(() => {
+      nudgeShown.current = true;
+      setNudgeVisible(true);
+    }, nudgeDelay);
+    return () => clearTimeout(show);
+  }, [effectiveNudge, hideButton, nudgeDelay]);
+  useEffect(() => {
+    if (!nudgeVisible) return;
+    const hide = setTimeout(() => setNudgeVisible(false), nudgeDuration);
+    return () => clearTimeout(hide);
+  }, [nudgeVisible, nudgeDuration]);
+  useEffect(() => {
+    if (isOpen) setNudgeVisible(false);
+  }, [isOpen]);
+  useEffect(() => {
+    if (dragging) setNudgeVisible(false);
+  }, [dragging]);
+  return /* @__PURE__ */ jsxs(SheetContext.Provider, { value: controls, children: [
+    children,
+    nudgeVisible && effectiveNudge && !hideButton ? /* @__PURE__ */ jsx(
+      Nudge,
+      {
+        text: effectiveNudge,
+        side: position === "bottom-right" ? "right" : "left",
+        bottom,
+        horizontal,
+        theme,
+        onDismiss: () => setNudgeVisible(false)
+      }
+    ) : null,
+    !hideButton ? /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        ...draggable ? responder.panHandlers : {},
+        style: [
+          styles.fabWrap,
+          { bottom },
+          position === "bottom-right" ? { right: horizontal } : { left: horizontal },
+          { transform: pan.getTranslateTransform() }
+        ],
+        children: /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            onPress: open,
+            accessibilityRole: "button",
+            accessibilityLabel: checklist && !checklist.completed ? `Open setup checklist, ${checklist.total_required - checklist.completed_required} steps remaining` : label,
+            style: [
+              styles.fab,
+              { backgroundColor: theme.accent },
+              // Lifts under the finger, so a drag reads as picked up.
+              dragging ? styles.fabDragging : null
+            ],
+            children: icon != null ? icon : /* @__PURE__ */ jsx(View, { style: [styles.fabOrb, { backgroundColor: theme.onAccent }] })
+          }
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        visible: isOpen,
+        animationType: "slide",
+        presentationStyle: "pageSheet",
+        statusBarTranslucent: Platform.OS === "android",
+        onRequestClose: close,
+        children: /* @__PURE__ */ jsxs(View, { style: { flex: 1, backgroundColor: theme.background }, children: [
+          /* @__PURE__ */ jsx(View, { style: view === "assistant" ? styles.pane : styles.paneHidden, children: /* @__PURE__ */ jsx(
+            GuideAIChat,
+            {
+              ...chatProps,
+              onClose: close,
+              onTalkToHuman: (_c = chatProps.onTalkToHuman) != null ? _c : (() => setView("support"))
+            }
+          ) }),
+          view === "support" ? /* @__PURE__ */ jsx(View, { style: styles.pane, children: /* @__PURE__ */ jsx(
+            GuideAISupportChat,
+            {
+              theme: chatProps.theme,
+              topInset: chatProps.topInset,
+              onClose: close,
+              onBackToAssistant: () => setView("assistant")
+            }
+          ) }) : null
+        ] })
+      }
+    )
+  ] });
+}
+function GuideAIButton({
+  icon,
+  label = "Open assistant",
+  theme: overrides,
+  size = 56
+}) {
+  const { open } = useGuideAISheet();
+  const theme = resolveTheme(overrides);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress: open,
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      style: {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: theme.accent,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: icon != null ? icon : /* @__PURE__ */ jsx(View, { style: [styles.fabOrb, { backgroundColor: theme.onAccent }] })
+    }
+  );
+}
+const styles = StyleSheet.create({
+  pane: { ...StyleSheet.absoluteFillObject },
+  paneHidden: { ...StyleSheet.absoluteFillObject, display: "none" },
+  fabWrap: { position: "absolute" },
+  fabDragging: { opacity: 0.9, transform: [{ scale: 1.08 }] },
+  fab: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    // Raised enough to read as floating above content, not part of it.
+    shadowColor: "#000",
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 6 },
+    elevation: 8
+  },
+  fabOrb: { width: 18, height: 18, borderRadius: 9 },
+  nudge: {
+    position: "absolute",
+    maxWidth: 220,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 16,
+    borderWidth: StyleSheet.hairlineWidth,
+    shadowColor: "#000",
+    shadowOpacity: 0.25,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 6
+  },
+  nudgeText: { lineHeight: 19 }
+});
+export {
+  GuideAIButton,
+  GuideAIChat,
+  GuideAILauncher,
+  GuideAISupportChat,
+  Markdown,
+  darkTheme,
+  lightTheme,
+  resolveTheme,
+  useGuideAISheet
+};
+//# sourceMappingURL=ui.mjs.map