@vinaverse/react-native 0.0.0-stage → 0.1.0-alpha.3

package/dist/index.js

@@ -0,0 +1,2003 @@
+import { Pressable, ActivityIndicator, Text, View, Image, TextInput, AccessibilityInfo, useColorScheme, AppState, Platform, KeyboardAvoidingView } from 'react-native';
+import { createContext, memo, useCallback, useState, useRef, useMemo, useEffect, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { contrastRatio, colors, size, motion, radius, space, font, contrastProblems } from '@vinaverse/tokens';
+import { useCopy, useConversationSelector, useStreamingText, formatTimeRange, formatMoney, formatDate, bannedWordsIn, CopyProvider } from '@vinaverse/react';
+import { codePoints, MAX_TEXT, answerProblem } from '@vinaverse/client/conversation';
+import { FlashList } from '@shopify/flash-list';
+
+// src/cards/CardFrame.tsx
+var ChatContext = createContext(null);
+function ChatContextProvider(props) {
+  return /* @__PURE__ */ jsx(ChatContext.Provider, { value: props.value, children: props.children });
+}
+function useChat() {
+  const value = useContext(ChatContext);
+  if (!value)
+    throw new Error(
+      "Vinaverse parts render inside <VinaverseChat> or <VinaverseChatProvider>."
+    );
+  return value;
+}
+function createTheme(scheme, overrides = {}) {
+  return {
+    scheme,
+    colors: { ...colors(scheme), ...overrides[scheme] },
+    font: {
+      ...font,
+      ...overrides.fontFamily ? { family: overrides.fontFamily } : {}
+    },
+    space: { ...space, ...overrides.space },
+    radius: { ...radius, ...overrides.radius },
+    motion,
+    size
+  };
+}
+function themeProblems(overrides = {}) {
+  return ["light", "dark"].flatMap(
+    (scheme) => contrastProblems(createTheme(scheme, overrides).colors).map(
+      (p) => `${scheme}: ${p.foreground} on ${p.background} is ${p.ratio.toFixed(2)}:1, below ${p.minimum}:1`
+    )
+  );
+}
+var ThemeContext = createContext(createTheme("light"));
+function ThemeProvider(props) {
+  const system = useColorScheme();
+  const setting = props.colorScheme ?? "system";
+  const scheme = setting === "system" ? system === "dark" ? "dark" : "light" : setting;
+  const overrides = props.theme;
+  const value = useMemo(
+    () => createTheme(scheme, overrides),
+    [scheme, overrides]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children: props.children });
+}
+function useTheme() {
+  return useContext(ThemeContext);
+}
+function cardOf(held) {
+  return held.card;
+}
+function CardFrame(props) {
+  const { colors: colors2, radius: radius2, space: space2 } = useTheme();
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityLabel: props.label,
+      ...props.restored ? {
+        pointerEvents: "none",
+        accessibilityState: { disabled: true }
+      } : {},
+      ...props.testID ? { testID: props.testID } : {},
+      style: {
+        marginHorizontal: 16,
+        marginTop: space2.sm,
+        padding: space2.md,
+        gap: space2.sm,
+        borderRadius: radius2.lg,
+        borderWidth: 1,
+        borderColor: colors2.divider,
+        backgroundColor: colors2.background,
+        opacity: props.restored ? 0.7 : 1,
+        maxWidth: 520,
+        alignSelf: "stretch"
+      },
+      children: props.children
+    }
+  );
+}
+function Title(props) {
+  const { colors: colors2, font: font2 } = useTheme();
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      accessibilityRole: "header",
+      numberOfLines: props.numberOfLines,
+      style: {
+        color: colors2.text,
+        fontSize: font2.size.md,
+        fontWeight: "600",
+        ...font2.family ? { fontFamily: font2.family } : {}
+      },
+      children: props.children
+    }
+  );
+}
+function Body(props) {
+  const { colors: colors2, font: font2 } = useTheme();
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      style: {
+        color: props.danger ? colors2.danger : props.muted ? colors2.textMuted : colors2.text,
+        fontSize: props.muted ? font2.size.sm : font2.size.md,
+        lineHeight: (props.muted ? font2.size.sm : font2.size.md) * font2.lineHeight,
+        ...font2.family ? { fontFamily: font2.family } : {}
+      },
+      children: props.children
+    }
+  );
+}
+function useLink(link, held) {
+  const { store, handlers } = useChat();
+  if (!link || !store.checkLink(link)) return null;
+  return () => handlers.current?.onOpenLink?.(link, held);
+}
+function safeImage(url) {
+  return url && /^https:\/\//i.test(url) ? url : null;
+}
+var Button = memo(function Button2(props) {
+  const { colors: colors2, radius: radius2, space: space2, size: size3, font: font2 } = useTheme();
+  const variant = props.variant ?? "secondary";
+  const inactive = props.disabled === true || props.busy === true;
+  const filled = variant === "primary" || props.selected === true;
+  const background = filled ? colors2.primary : variant === "secondary" ? colors2.surface : "transparent";
+  const foreground = filled ? colors2.onPrimary : colors2.primary;
+  const checkable = props.role === "radio" || props.role === "checkbox";
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: props.role ?? "button",
+      accessibilityLabel: props.label,
+      ...props.hint ? { accessibilityHint: props.hint } : {},
+      accessibilityState: {
+        disabled: inactive,
+        busy: props.busy === true,
+        ...checkable ? props.role === "radio" ? { selected: props.selected === true } : { checked: props.selected === true } : {}
+      },
+      disabled: inactive,
+      onPress: props.onPress,
+      ...props.testID ? { testID: props.testID } : {},
+      style: ({ pressed }) => ({
+        minHeight: size3.touchTarget,
+        minWidth: size3.touchTarget,
+        paddingHorizontal: space2.md,
+        paddingVertical: space2.sm,
+        borderRadius: radius2.md,
+        borderWidth: variant === "text" ? 0 : 1,
+        borderColor: filled ? colors2.primary : colors2.border,
+        backgroundColor: background,
+        opacity: inactive ? 0.55 : pressed ? 0.8 : 1,
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "row",
+        gap: space2.xs
+      }),
+      children: [
+        props.busy ? /* @__PURE__ */ jsx(ActivityIndicator, { color: foreground }) : null,
+        props.children ?? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: foreground,
+              fontSize: font2.size.md,
+              fontWeight: "500",
+              ...font2.family ? { fontFamily: font2.family } : {}
+            },
+            children: props.label
+          }
+        )
+      ]
+    }
+  );
+});
+function InfoCard(props) {
+  const card = cardOf(props.card);
+  const { locale, t } = useCopy();
+  const { slots, timeZone } = useChat();
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  const image = safeImage(card.image_url);
+  const Img = slots.Image ?? Image;
+  const money = card.price ?? card.price_from;
+  const rating = card.rating ? (card.rating.value_ppm / 1e6).toFixed(1) : null;
+  const amount = money ? formatMoney(money.amount, money.currency, locale) : null;
+  const price = amount && !card.price ? t("priceFrom", { price: amount }) : amount;
+  const when = card.starts_at ? formatTimeRange(card.starts_at, void 0, locale, timeZone) : null;
+  const label = [
+    card.title,
+    card.subtitle,
+    rating && `\u2605 ${rating}`,
+    price,
+    when
+  ].filter(Boolean).join(", ");
+  return /* @__PURE__ */ jsxs(
+    CardFrame,
+    {
+      label,
+      restored: props.restored,
+      testID: `vinaverse-card-${card.id}`,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: space2.md }, children: [
+          image ? /* @__PURE__ */ jsx(
+            Img,
+            {
+              source: { uri: image },
+              style: {
+                width: 64,
+                height: 64,
+                borderRadius: radius2.md,
+                backgroundColor: colors2.surface
+              },
+              accessible: false
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs(View, { style: { flex: 1, gap: space2.xxs }, children: [
+            /* @__PURE__ */ jsx(Title, { numberOfLines: 2, children: card.title }),
+            card.subtitle ? /* @__PURE__ */ jsx(Body, { muted: true, children: card.subtitle }) : null,
+            /* @__PURE__ */ jsx(Text, { style: { color: colors2.textMuted, fontSize: font2.size.sm }, children: [
+              rating && `\u2605 ${rating}${card.rating ? ` (${card.rating.count})` : ""}`,
+              price,
+              when
+            ].filter(Boolean).join(" \xB7 ") })
+          ] })
+        ] }),
+        card.body ? /* @__PURE__ */ jsx(Body, { children: card.body }) : null,
+        card.badges?.length ? /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space2.xs }, children: card.badges.map((b) => /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: colors2.text,
+              backgroundColor: colors2.surface,
+              borderRadius: radius2.pill,
+              paddingHorizontal: space2.sm,
+              paddingVertical: space2.xxs,
+              fontSize: font2.size.xs
+            },
+            children: b
+          },
+          b
+        )) }) : null,
+        props.restored ? null : /* @__PURE__ */ jsx(Actions, { ...props })
+      ]
+    }
+  );
+}
+function Actions(props) {
+  const card = cardOf(props.card);
+  const { space: space2 } = useTheme();
+  if (!card.actions?.length) return null;
+  return /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space2.sm }, children: card.actions.map((a) => /* @__PURE__ */ jsx(
+    Action,
+    {
+      held: props.card,
+      action: a.action,
+      label: a.label,
+      link: a.deep_link
+    },
+    `${a.action}:${a.label}`
+  )) });
+}
+function Action(props) {
+  const { store, handlers } = useChat();
+  const open = useLink(props.link, props.held);
+  if (props.link && !open) return null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      label: props.label,
+      role: open ? "link" : "button",
+      onPress: () => {
+        if (open) return open();
+        store.cardAction(props.held.id, props.action);
+        handlers.current?.onCardAction?.(props.held, props.action);
+      }
+    }
+  );
+}
+function NextStepCard(props) {
+  const card = cardOf(props.card);
+  const action = card.actions?.[0];
+  const open = useLink(action?.deep_link, props.card);
+  return /* @__PURE__ */ jsxs(
+    CardFrame,
+    {
+      label: [card.title, card.body].filter(Boolean).join(". "),
+      restored: props.restored,
+      testID: `vinaverse-card-${card.id}`,
+      children: [
+        /* @__PURE__ */ jsx(Title, { children: card.title }),
+        card.body ? /* @__PURE__ */ jsx(Body, { muted: true, children: card.body }) : null,
+        action && open && !props.restored ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: action.label,
+            variant: "primary",
+            role: "link",
+            onPress: open
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function fieldText(type, value, locale, timeZone) {
+  if (value === null || value === void 0) return "";
+  const v = value;
+  switch (type) {
+    case "list":
+      return Array.isArray(value) ? value.join(", ") : String(value);
+    case "time_range":
+      return formatTimeRange(
+        String(v.start ?? ""),
+        typeof v.end === "string" ? v.end : void 0,
+        locale,
+        timeZone
+      );
+    case "money_cents":
+      return formatMoney(
+        Number(v.amount ?? 0),
+        String(v.currency ?? "USD"),
+        locale
+      );
+    case "address":
+      return ["line1", "line2", "city", "region", "postal_code", "country"].map((k) => v[k]).filter((p) => typeof p === "string" && p).join(", ");
+    case "weekly_hours": {
+      const entries = Array.isArray(v.entries) ? v.entries : [];
+      return entries.map((e) => `${weekday(e.day, locale)} ${e.start}\u2013${e.end}`).join(", ");
+    }
+    default:
+      return typeof value === "object" ? JSON.stringify(value) : String(value);
+  }
+}
+var DAYS = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
+function weekday(day, locale) {
+  const i = DAYS.indexOf(day);
+  if (i < 0) return day;
+  try {
+    return new Intl.DateTimeFormat(locale, {
+      weekday: "short",
+      timeZone: "UTC"
+    }).format(new Date(Date.UTC(2024, 0, 1 + i)));
+  } catch {
+    return day;
+  }
+}
+function outcomeText(t, outcome, status) {
+  if (outcome === "confirmed") return t("proposalConfirmed");
+  if (outcome === "declined") return t("proposalDeclined");
+  if (outcome === "failed") return t("proposalFailed");
+  if (outcome === "expired") return t("proposalExpired");
+  if (status === "confirmed") return t("proposalConfirmed");
+  if (status === "declined") return t("proposalDeclined");
+  if (status === "expired") return t("proposalExpired");
+  if (status !== "pending") return t("proposalSettled");
+  return null;
+}
+function ProposalCard(props) {
+  const card = cardOf(props.card);
+  const proposal = card.proposal;
+  const { t, locale } = useCopy();
+  const { store, handlers, timeZone } = useChat();
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  const edit = useLink(proposal?.edit_deep_link, props.card);
+  if (!proposal) return null;
+  const settled = outcomeText(t, props.card.outcome, proposal.status);
+  const actionable = settled === null && !props.restored;
+  const decide = (decision) => {
+    const onProposal = handlers.current?.onProposal;
+    if (!onProposal) return;
+    store.decideProposal(
+      props.card.id,
+      () => onProposal(props.card, decision)
+    ).catch(
+      (error) => handlers.current?.onWarning?.(`Vinaverse proposal: ${String(error)}`)
+    );
+  };
+  const fields = proposal.fields.map((f) => {
+    const after = fieldText(f.type, f.after, locale, timeZone);
+    const before = f.before === void 0 || f.before === null ? null : fieldText(f.type, f.before, locale, timeZone);
+    return {
+      key: f.key,
+      label: f.label,
+      value: before !== null && before !== after ? `${before} \u2192 ${after}` : after
+    };
+  });
+  return /* @__PURE__ */ jsxs(
+    CardFrame,
+    {
+      label: [
+        proposal.title,
+        proposal.summary,
+        ...fields.map((f) => `${f.label}: ${f.value}`),
+        settled
+      ].filter(Boolean).join(". "),
+      restored: props.restored,
+      testID: `vinaverse-proposal-${card.id}`,
+      children: [
+        /* @__PURE__ */ jsx(Title, { children: proposal.title }),
+        /* @__PURE__ */ jsx(Body, { muted: true, children: proposal.summary }),
+        /* @__PURE__ */ jsx(View, { style: { gap: space2.xs }, children: fields.map((f) => /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: space2.sm }, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                color: colors2.textMuted,
+                fontSize: font2.size.sm,
+                minWidth: 72
+              },
+              children: f.label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: { color: colors2.text, fontSize: font2.size.sm, flex: 1 },
+              children: f.value
+            }
+          )
+        ] }, f.key)) }),
+        settled ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: props.card.outcome === "confirmed" || proposal.status === "confirmed" ? colors2.success : colors2.textMuted,
+              fontSize: font2.size.sm,
+              fontWeight: "600"
+            },
+            children: settled
+          }
+        ) : null,
+        actionable ? /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space2.sm }, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              label: t("proposalConfirm"),
+              variant: "primary",
+              busy: props.busy,
+              disabled: props.busy,
+              onPress: () => decide("confirm"),
+              testID: "vinaverse-proposal-confirm"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              label: t("proposalDecline"),
+              disabled: props.busy,
+              onPress: () => decide("decline"),
+              testID: "vinaverse-proposal-decline"
+            }
+          ),
+          edit ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              label: t("proposalChange"),
+              variant: "text",
+              role: "link",
+              onPress: edit
+            }
+          ) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+var KNOWN = /* @__PURE__ */ new Set([
+  "single_choice",
+  "multi_choice",
+  "image_choice",
+  "yes_no",
+  "list_choice",
+  "rate_each",
+  "short_text",
+  "long_text",
+  "date",
+  "number",
+  "scale",
+  "photo"
+]);
+var ONE_TAP = /* @__PURE__ */ new Set(["single_choice", "yes_no", "list_choice", "scale"]);
+function QuestionCard(props) {
+  const held = props.card;
+  const question = held.question;
+  const { store, handlers } = useChat();
+  const { t, locale } = useCopy();
+  const { colors: colors2, font: font2, space: space2 } = useTheme();
+  const needsSocket = useConversationSelector(
+    store,
+    (v) => v.answersNeedWebSocket
+  );
+  if (!question) return null;
+  const send = (answer, questionId = question.question_id) => {
+    try {
+      store.answer(held.id, questionId, answer);
+    } catch (error) {
+      handlers.current?.onWarning?.(`Vinaverse answer: ${String(error)}`);
+    }
+  };
+  const locked = held.locked.includes(question.question_id);
+  const state = question.state;
+  const open = state === "open" && !locked && !props.restored;
+  const summary = state === "answered" ? answerText(question, locale, t("questionOther")) : null;
+  return /* @__PURE__ */ jsxs(
+    CardFrame,
+    {
+      label: [question.prompt, summary].filter(Boolean).join(". "),
+      restored: props.restored,
+      testID: `vinaverse-question-${held.id}`,
+      children: [
+        question.progress ? /* @__PURE__ */ jsx(Text, { style: { color: colors2.textMuted, fontSize: font2.size.xs }, children: t("questionStep", {
+          step: question.progress.step,
+          total: question.progress.total
+        }) }) : null,
+        /* @__PURE__ */ jsx(Title, { children: question.prompt }),
+        question.help ? /* @__PURE__ */ jsx(Body, { muted: true, children: question.help }) : null,
+        state === "answered" ? /* @__PURE__ */ jsxs(View, { style: { gap: space2.xxs }, children: [
+          /* @__PURE__ */ jsx(Body, { muted: true, children: t("questionAnswered") }),
+          summary ? /* @__PURE__ */ jsx(Body, { children: summary }) : null
+        ] }) : state === "superseded" ? /* @__PURE__ */ jsx(Body, { muted: true, children: t("questionReplaced") }) : !KNOWN.has(question.kind) || needsSocket ? /* @__PURE__ */ jsx(Body, { muted: true, children: t("typeAnswerBelow") }) : question.kind === "rate_each" ? /* @__PURE__ */ jsx(
+          RateEach,
+          {
+            question,
+            locked: held.locked,
+            enabled: !props.restored,
+            send
+          }
+        ) : /* @__PURE__ */ jsx(
+          Answer,
+          {
+            question,
+            enabled: open,
+            send,
+            held
+          },
+          question.question_id
+        )
+      ]
+    }
+  );
+}
+function Answer(props) {
+  const { question, send, enabled } = props;
+  const { t } = useCopy();
+  const { space: space2 } = useTheme();
+  const { handlers } = useChat();
+  const [draft, setDraft] = useState({});
+  const kind = question.kind;
+  const oneTap = ONE_TAP.has(kind) && !question.allows_other;
+  const problem = answerProblem(question, draft);
+  const submit = (answer = draft) => {
+    if (answerProblem(question, answer) === null)
+      send(answer);
+  };
+  const input = (() => {
+    switch (kind) {
+      case "short_text":
+      case "long_text":
+        return /* @__PURE__ */ jsx(
+          TextAnswer,
+          {
+            question,
+            enabled,
+            value: draft.text ?? "",
+            onChange: (text) => setDraft({ text })
+          }
+        );
+      case "number":
+        return /* @__PURE__ */ jsx(
+          NumberAnswer,
+          {
+            question,
+            enabled,
+            value: draft.number,
+            onChange: (n) => setDraft({ number: n })
+          }
+        );
+      case "scale":
+        return /* @__PURE__ */ jsx(
+          ScaleAnswer,
+          {
+            question,
+            enabled,
+            onPick: (n) => submit({ number: n })
+          }
+        );
+      case "date":
+        return /* @__PURE__ */ jsx(
+          DateAnswer,
+          {
+            question,
+            enabled,
+            value: draft.date,
+            onChange: (date) => setDraft({ date })
+          }
+        );
+      case "photo":
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: t("questionAddPhoto"),
+            disabled: !enabled || !handlers.current?.onPickPhoto,
+            onPress: () => {
+              handlers.current?.onPickPhoto?.(question, props.held).then((picked) => {
+                if (picked) send({ upload_ref: picked.upload_ref });
+              }).catch(
+                (error) => handlers.current?.onWarning?.(
+                  `Vinaverse photo: ${String(error)}`
+                )
+              );
+            }
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsx(
+          ChoiceAnswer,
+          {
+            question,
+            enabled,
+            draft,
+            onChange: (next) => oneTap ? submit(next) : setDraft(next)
+          }
+        );
+    }
+  })();
+  const tapToAnswer = oneTap || kind === "scale" || kind === "photo";
+  return /* @__PURE__ */ jsxs(View, { style: { gap: space2.sm }, children: [
+    input,
+    /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space2.sm }, children: [
+      tapToAnswer ? null : /* @__PURE__ */ jsx(
+        Button,
+        {
+          label: t("questionSubmit"),
+          variant: "primary",
+          disabled: !enabled || problem !== null,
+          onPress: () => submit(),
+          testID: "vinaverse-question-submit"
+        }
+      ),
+      question.required ? null : /* @__PURE__ */ jsx(
+        Button,
+        {
+          label: t("questionSkip"),
+          variant: "text",
+          disabled: !enabled,
+          onPress: () => send({ skipped: true })
+        }
+      )
+    ] })
+  ] });
+}
+function ChoiceAnswer(props) {
+  const { question, draft, onChange, enabled } = props;
+  const { t } = useCopy();
+  const { slots } = useChat();
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  const [search, setSearch] = useState("");
+  const multi = question.kind === "multi_choice" || question.kind === "image_choice";
+  const values = draft.values ?? [];
+  const other = draft.other_text;
+  const none = question.none_of_the_above;
+  const list = question.kind === "list_choice";
+  const options = useMemo(() => {
+    const all = question.options ?? [];
+    const q = search.trim().toLowerCase();
+    return list && q ? all.filter((o) => o.label.toLowerCase().includes(q)) : all;
+  }, [question.options, search, list]);
+  const shown = list ? options.slice(0, 50) : options;
+  const pick = (value) => {
+    if (none && value === none.value) return onChange({ values: [value] });
+    const rest = values.filter((v) => v !== none?.value);
+    const next = multi ? rest.includes(value) ? rest.filter((v) => v !== value) : [...rest, value] : [value];
+    const keepOther = other !== void 0 && (multi || question.kind === "single_choice");
+    onChange({
+      ...next.length ? { values: next } : {},
+      ...keepOther ? { other_text: other } : {}
+    });
+  };
+  const Img = slots.Image ?? Image;
+  return /* @__PURE__ */ jsxs(View, { style: { gap: space2.xs }, children: [
+    list ? /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        value: search,
+        onChangeText: setSearch,
+        placeholder: t("questionSearch"),
+        placeholderTextColor: colors2.textMuted,
+        accessibilityLabel: t("questionSearch"),
+        editable: enabled,
+        style: {
+          borderWidth: 1,
+          borderColor: colors2.border,
+          borderRadius: radius2.md,
+          paddingHorizontal: space2.md,
+          minHeight: 44,
+          color: colors2.text,
+          fontSize: font2.size.md
+        }
+      }
+    ) : null,
+    shown.map((o) => {
+      const image = question.kind === "image_choice" ? safeImage(o.image_url) : null;
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          label: o.label,
+          role: multi ? "checkbox" : "radio",
+          selected: values.includes(o.value),
+          disabled: !enabled,
+          ...o.description ? { hint: o.description } : {},
+          onPress: () => pick(o.value),
+          children: image ? /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: space2.xs }, children: [
+            /* @__PURE__ */ jsx(
+              Img,
+              {
+                source: { uri: image },
+                style: { width: 96, height: 96, borderRadius: radius2.md },
+                accessible: false
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ChoiceLabel,
+              {
+                selected: values.includes(o.value),
+                text: o.label
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(ChoiceLabel, { selected: values.includes(o.value), text: o.label })
+        },
+        o.value
+      );
+    }),
+    none ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        label: none.label,
+        role: multi ? "checkbox" : "radio",
+        selected: values.includes(none.value),
+        disabled: !enabled,
+        onPress: () => pick(none.value)
+      }
+    ) : null,
+    question.allows_other ? /* @__PURE__ */ jsx(
+      OtherText,
+      {
+        max: question.other_max_length ?? 500,
+        enabled,
+        value: other,
+        onChange: (text) => {
+          const kept = values.filter((v) => v !== none?.value);
+          const withValues = question.kind === "single_choice" || multi;
+          onChange({
+            ...withValues && kept.length ? { values: question.kind === "single_choice" ? [] : kept } : {},
+            ...text === void 0 ? {} : { other_text: text }
+          });
+        }
+      }
+    ) : null
+  ] });
+}
+function ChoiceLabel(props) {
+  const { colors: colors2, font: font2 } = useTheme();
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      style: {
+        color: props.selected ? colors2.onPrimary : colors2.text,
+        fontSize: font2.size.md,
+        textAlign: "center"
+      },
+      children: props.text
+    }
+  );
+}
+function OtherText(props) {
+  const { t } = useCopy();
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  const on = props.value !== void 0;
+  return /* @__PURE__ */ jsxs(View, { style: { gap: space2.xs }, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        label: t("questionOther"),
+        role: "checkbox",
+        selected: on,
+        disabled: !props.enabled,
+        onPress: () => props.onChange(on ? void 0 : "")
+      }
+    ),
+    on ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          value: props.value,
+          onChangeText: (text) => props.onChange(text),
+          accessibilityLabel: t("questionOther"),
+          testID: "vinaverse-question-other",
+          editable: props.enabled,
+          style: {
+            borderWidth: 1,
+            borderColor: colors2.border,
+            borderRadius: radius2.md,
+            paddingHorizontal: space2.md,
+            minHeight: 44,
+            color: colors2.text,
+            fontSize: font2.size.md
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(CharactersLeft, { max: props.max, text: props.value ?? "" })
+    ] }) : null
+  ] });
+}
+function CharactersLeft(props) {
+  const { t } = useCopy();
+  const { colors: colors2, font: font2 } = useTheme();
+  const left = props.max - codePoints(props.text);
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      accessibilityLiveRegion: left < 20 ? "polite" : "none",
+      style: {
+        color: left < 0 ? colors2.danger : colors2.textMuted,
+        fontSize: font2.size.xs
+      },
+      children: t("questionCharactersLeft", { count: left })
+    }
+  );
+}
+function TextAnswer(props) {
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  const long = props.question.kind === "long_text";
+  const max = props.question.text?.max_length ?? (long ? 2e3 : 200);
+  return /* @__PURE__ */ jsxs(View, { style: { gap: space2.xs }, children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        value: props.value,
+        onChangeText: props.onChange,
+        accessibilityLabel: props.question.prompt,
+        editable: props.enabled,
+        multiline: long,
+        testID: "vinaverse-question-text",
+        style: {
+          borderWidth: 1,
+          borderColor: colors2.border,
+          borderRadius: radius2.md,
+          paddingHorizontal: space2.md,
+          paddingVertical: space2.sm,
+          minHeight: long ? 96 : 44,
+          color: colors2.text,
+          fontSize: font2.size.md,
+          textAlignVertical: long ? "top" : "center"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(CharactersLeft, { max, text: props.value })
+  ] });
+}
+function NumberAnswer(props) {
+  const range = props.question.number ?? { min: 0, max: 100, step: 1 };
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  const value = props.value ?? range.min;
+  const clamp = (n) => Math.min(range.max, Math.max(range.min, Number(n.toFixed(6))));
+  const shown = `${value}${props.question.number?.unit ? ` ${props.question.number.unit}` : ""}`;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessible: true,
+      accessibilityRole: "adjustable",
+      accessibilityLabel: props.question.prompt,
+      accessibilityValue: {
+        min: range.min,
+        max: range.max,
+        now: value,
+        text: shown
+      },
+      accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+      testID: "vinaverse-question-number",
+      onAccessibilityAction: (e) => props.onChange(
+        clamp(
+          value + (e.nativeEvent.actionName === "increment" ? range.step : -range.step)
+        )
+      ),
+      style: { flexDirection: "row", alignItems: "center", gap: space2.md },
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: "\u2212",
+            disabled: !props.enabled || value <= range.min,
+            onPress: () => props.onChange(clamp(value - range.step))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: colors2.text,
+              fontSize: font2.size.lg,
+              minWidth: 64,
+              textAlign: "center"
+            },
+            children: shown
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: "+",
+            disabled: !props.enabled || value >= range.max,
+            onPress: () => props.onChange(clamp(value + range.step))
+          }
+        )
+      ]
+    }
+  );
+}
+function ScaleAnswer(props) {
+  const scale = props.question.scale;
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  if (!scale) return null;
+  const points = [];
+  for (let n = scale.min; n <= scale.max && points.length < 21; n += scale.step)
+    points.push(n);
+  return /* @__PURE__ */ jsxs(View, { style: { gap: space2.xs }, children: [
+    /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space2.xs }, children: points.map((n) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        label: String(n),
+        role: "radio",
+        disabled: !props.enabled,
+        onPress: () => props.onPick(n)
+      },
+      n
+    )) }),
+    /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx(Text, { style: { color: colors2.textMuted, fontSize: font2.size.xs }, children: scale.min_label }),
+      /* @__PURE__ */ jsx(Text, { style: { color: colors2.textMuted, fontSize: font2.size.xs }, children: scale.max_label })
+    ] })
+  ] });
+}
+var iso = (y, m, d) => `${String(y).padStart(4, "0")}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+function DateAnswer(props) {
+  const { locale } = useCopy();
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  const bounds = props.question.date;
+  const start = props.value ?? bounds?.min ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  const [month, setMonth] = useState(() => ({
+    y: Number(start.slice(0, 4)),
+    m: Number(start.slice(5, 7)) - 1
+  }));
+  const days = new Date(Date.UTC(month.y, month.m + 1, 0)).getUTCDate();
+  const title = (() => {
+    try {
+      return new Intl.DateTimeFormat(locale, {
+        month: "long",
+        year: "numeric",
+        timeZone: "UTC"
+      }).format(new Date(Date.UTC(month.y, month.m, 1)));
+    } catch {
+      return `${month.y}-${month.m + 1}`;
+    }
+  })();
+  const move = (by) => {
+    const d = new Date(Date.UTC(month.y, month.m + by, 1));
+    setMonth({ y: d.getUTCFullYear(), m: d.getUTCMonth() });
+  };
+  const outside = (date) => bounds?.min !== void 0 && date < bounds.min || bounds?.max !== void 0 && date > bounds.max;
+  return /* @__PURE__ */ jsxs(View, { style: { gap: space2.xs }, children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              label: "\u2039",
+              variant: "text",
+              disabled: !props.enabled,
+              onPress: () => move(-1)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              accessibilityRole: "header",
+              style: { color: colors2.text, fontSize: font2.size.md },
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              label: "\u203A",
+              variant: "text",
+              disabled: !props.enabled,
+              onPress: () => move(1)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space2.xxs }, children: Array.from({ length: days }, (_, i) => {
+      const date = iso(month.y, month.m, i + 1);
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          label: String(i + 1),
+          hint: formatDate(date, locale),
+          role: "radio",
+          selected: props.value === date,
+          disabled: !props.enabled || outside(date),
+          onPress: () => props.onChange(date)
+        },
+        date
+      );
+    }) }),
+    props.value ? /* @__PURE__ */ jsx(Body, { muted: true, children: formatDate(props.value, locale) }) : null
+  ] });
+}
+function RateEach(props) {
+  const { question } = props;
+  const { t } = useCopy();
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  const answered = new Map(
+    (question.row_answers ?? []).map((r) => [
+      r.question_id,
+      (r.answer.values ?? [])[0]
+    ])
+  );
+  const open = (question.rows ?? []).filter(
+    (r) => !props.locked.includes(r.question_id)
+  );
+  return /* @__PURE__ */ jsxs(View, { style: { gap: space2.md }, children: [
+    (question.rows ?? []).map((row) => {
+      const done = props.locked.includes(row.question_id);
+      return /* @__PURE__ */ jsxs(
+        View,
+        {
+          accessibilityLabel: row.label,
+          style: { gap: space2.xs },
+          children: [
+            /* @__PURE__ */ jsx(Text, { style: { color: colors2.text, fontSize: font2.size.sm }, children: row.label }),
+            /* @__PURE__ */ jsx(
+              View,
+              {
+                style: { flexDirection: "row", flexWrap: "wrap", gap: space2.xs },
+                children: (question.options ?? []).map((o) => /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    label: o.label,
+                    role: "radio",
+                    selected: answered.get(row.question_id) === o.value,
+                    disabled: !props.enabled || done,
+                    onPress: () => props.send({ values: [o.value] }, row.question_id)
+                  },
+                  o.value
+                ))
+              }
+            )
+          ]
+        },
+        row.question_id
+      );
+    }),
+    question.required || open.length === 0 ? null : /* @__PURE__ */ jsx(
+      Button,
+      {
+        label: t("questionSkip"),
+        variant: "text",
+        disabled: !props.enabled,
+        onPress: () => {
+          for (const row of open)
+            props.send({ skipped: true }, row.question_id);
+        }
+      }
+    )
+  ] });
+}
+function answerText(question, locale, otherLabel) {
+  const answer = question.answer;
+  if (!answer || answer.skipped) return null;
+  const labels = new Map(
+    (question.options ?? []).map((o) => [o.value, o.label])
+  );
+  if (question.none_of_the_above)
+    labels.set(
+      question.none_of_the_above.value,
+      question.none_of_the_above.label
+    );
+  const parts = [
+    ...(answer.values ?? []).map((v) => labels.get(v) ?? v),
+    ...answer.other_text ? [`${otherLabel}: ${answer.other_text}`] : [],
+    ...answer.text ? [answer.text] : [],
+    ...answer.number !== void 0 ? [String(answer.number)] : [],
+    ...answer.date ? [formatDate(answer.date, locale)] : [],
+    ...answer.upload_ref ? ["\u{1F4F7}"] : []
+  ];
+  return parts.length ? parts.join(", ") : null;
+}
+function TimeSlotsCard(props) {
+  const card = cardOf(props.card);
+  const { locale } = useCopy();
+  const { timeZone } = useChat();
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  const slots = (card.slots ?? []).map(
+    (s) => formatTimeRange(s.start, s.end, locale, timeZone)
+  );
+  return /* @__PURE__ */ jsxs(
+    CardFrame,
+    {
+      label: [card.title, ...slots].join(", "),
+      restored: props.restored,
+      testID: `vinaverse-card-${card.id}`,
+      children: [
+        /* @__PURE__ */ jsx(Title, { children: card.title }),
+        /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space2.xs }, children: slots.map((s) => /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: colors2.text,
+              borderWidth: 1,
+              borderColor: colors2.border,
+              borderRadius: radius2.pill,
+              paddingHorizontal: space2.md,
+              paddingVertical: space2.xs,
+              fontSize: font2.size.sm
+            },
+            children: s
+          },
+          s
+        )) })
+      ]
+    }
+  );
+}
+var DEFAULTS = {
+  proposal: ProposalCard,
+  question: QuestionCard,
+  next_step: NextStepCard,
+  time_slots: TimeSlotsCard
+};
+function defaultCard(kind) {
+  return DEFAULTS[kind] ?? InfoCard;
+}
+var CardView = memo(function CardView2(props) {
+  const { slots } = useChat();
+  const { card, busy } = props.item;
+  const Default = defaultCard(card.kind);
+  const Custom = slots.cards?.[card.kind];
+  const own = { card, busy, restored: props.item.restored === true };
+  return Custom ? /* @__PURE__ */ jsx(Custom, { ...own, Default }) : /* @__PURE__ */ jsx(Default, { ...own });
+});
+var ActivityLine = memo(function ActivityLine2() {
+  const { store } = useChat();
+  const { t } = useCopy();
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  const activity = useConversationSelector(store, (v) => v.activity);
+  const waiting = useConversationSelector(
+    store,
+    (v) => v.responding && v.items.at(-1)?.type === "message" && v.items.at(-1).role === "person"
+  );
+  const name = useConversationSelector(store, (v) => v.agent.name);
+  const running = activity.filter((a) => a.state === "running").at(-1);
+  if (!running && !waiting) return null;
+  const text = running?.label ?? t("working", { agent: name ?? t("agentFallbackName") });
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityLiveRegion: "polite",
+      style: { paddingHorizontal: space2.lg, paddingVertical: space2.sm },
+      children: /* @__PURE__ */ jsx(Text, { style: { color: colors2.textMuted, fontSize: font2.size.sm }, children: text })
+    }
+  );
+});
+var Avatar = memo(function Avatar2(props) {
+  const { colors: colors2, size: size3, font: font2 } = useTheme();
+  const { slots } = useChat();
+  const box = {
+    width: size3.avatar,
+    height: size3.avatar,
+    borderRadius: size3.avatar / 2
+  };
+  if (props.uri && !props.person) {
+    const Img = slots.Image ?? Image;
+    return /* @__PURE__ */ jsx(
+      Img,
+      {
+        source: { uri: props.uri },
+        style: box,
+        accessibilityIgnoresInvertColors: true,
+        accessible: false,
+        importantForAccessibility: "no"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessible: false,
+      importantForAccessibility: "no-hide-descendants",
+      style: {
+        ...box,
+        backgroundColor: props.person ? colors2.staffBubble : colors2.primary,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: {
+            color: props.person ? colors2.staffText : colors2.onPrimary,
+            fontSize: font2.size.sm,
+            fontWeight: "600"
+          },
+          children: props.person ? "\u25C9" : (props.name.trim()[0] ?? "?").toUpperCase()
+        }
+      )
+    }
+  );
+});
+function DefaultHeader(props) {
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  const { t } = useCopy();
+  const person = props.takeoverBy !== null;
+  const subtitle = person ? t("staffLabel", { by: props.takeoverBy || t("staffFallbackRole") }) : t("agentLabel");
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "header",
+      accessible: true,
+      accessibilityLabel: `${props.name}, ${subtitle}`,
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: space2.sm,
+        paddingHorizontal: space2.lg,
+        paddingVertical: space2.sm,
+        backgroundColor: colors2.background,
+        borderBottomWidth: 1,
+        borderBottomColor: colors2.divider
+      },
+      children: [
+        /* @__PURE__ */ jsx(Avatar, { name: props.name, uri: props.avatarUrl, person }),
+        /* @__PURE__ */ jsxs(View, { style: { flexShrink: 1 }, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              numberOfLines: 1,
+              style: {
+                color: colors2.text,
+                fontSize: font2.size.md,
+                fontWeight: "600",
+                ...font2.family ? { fontFamily: font2.family } : {}
+              },
+              children: props.name
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              numberOfLines: 1,
+              style: {
+                color: person ? colors2.staffAccent : colors2.textMuted,
+                fontSize: font2.size.xs
+              },
+              children: subtitle
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var ChatHeader = memo(function ChatHeader2() {
+  const { store, slots, agentAvatar } = useChat();
+  const { t } = useCopy();
+  const agent = useConversationSelector(store, (v) => v.agent);
+  const takeover = useConversationSelector(store, (v) => v.takeover);
+  const Header = slots.Header;
+  const props = {
+    name: agent.name ?? t("agentFallbackName"),
+    avatarUrl: agentAvatar ?? agent.avatarUrl,
+    takeoverBy: takeover ? takeover.by ?? "" : null
+  };
+  return Header ? /* @__PURE__ */ jsx(Header, { ...props, Default: DefaultHeader }) : /* @__PURE__ */ jsx(DefaultHeader, { ...props });
+});
+var ChatSkeleton = memo(function ChatSkeleton2() {
+  const { colors: colors2, radius: radius2, space: space2 } = useTheme();
+  const row = (width, end) => /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        alignSelf: end ? "flex-end" : "flex-start",
+        width,
+        height: 40,
+        borderRadius: radius2.lg,
+        backgroundColor: colors2.surface,
+        marginHorizontal: space2.lg,
+        marginTop: space2.md
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessible: true,
+      accessibilityRole: "progressbar",
+      accessibilityState: { busy: true },
+      testID: "vinaverse-skeleton",
+      children: [
+        row("62%", false),
+        row("45%", true),
+        row("70%", false)
+      ]
+    }
+  );
+});
+function DefaultComposer(props) {
+  const { t, direction } = useCopy();
+  const { colors: colors2, radius: radius2, space: space2, font: font2, size: size3 } = useTheme();
+  const [text, setText] = useState("");
+  const length = codePoints(text);
+  const canSend = text.trim().length > 0 && length <= MAX_TEXT;
+  const send = () => {
+    if (!canSend) return;
+    props.onSend(text);
+    setText("");
+  };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "flex-end",
+        gap: space2.sm,
+        paddingHorizontal: space2.lg,
+        paddingVertical: space2.sm,
+        borderTopWidth: 1,
+        borderTopColor: colors2.divider,
+        backgroundColor: colors2.background
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: text,
+            onChangeText: setText,
+            placeholder: props.placeholder,
+            placeholderTextColor: colors2.textMuted,
+            accessibilityLabel: props.placeholder,
+            multiline: true,
+            maxLength: MAX_TEXT * 2,
+            testID: "vinaverse-composer-input",
+            style: {
+              flex: 1,
+              minHeight: size3.touchTarget,
+              maxHeight: 140,
+              paddingHorizontal: space2.md,
+              paddingVertical: space2.sm,
+              borderRadius: radius2.lg,
+              borderWidth: 1,
+              borderColor: colors2.border,
+              color: colors2.text,
+              backgroundColor: colors2.surface,
+              fontSize: font2.size.md,
+              textAlign: direction === "rtl" ? "right" : "left",
+              writingDirection: direction,
+              ...font2.family ? { fontFamily: font2.family } : {}
+            }
+          }
+        ),
+        props.responding && !text ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: t("stop"),
+            onPress: props.onStop,
+            testID: "vinaverse-stop"
+          }
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: t("send"),
+            variant: "primary",
+            disabled: !canSend,
+            onPress: send,
+            testID: "vinaverse-send"
+          }
+        )
+      ]
+    }
+  );
+}
+var Composer = memo(function Composer2(props) {
+  const { store, slots } = useChat();
+  const { t } = useCopy();
+  const takeover = useConversationSelector(store, (v) => v.takeover);
+  const name = useConversationSelector(store, (v) => v.agent.name);
+  const responding = useConversationSelector(store, (v) => v.responding);
+  const { onError } = props;
+  const onSend = useCallback(
+    (text) => {
+      try {
+        store.send(text);
+      } catch (error) {
+        onError?.(error);
+      }
+    },
+    [store, onError]
+  );
+  const onStop = useCallback(() => store.cancel(), [store]);
+  const placeholder = takeover ? t("composerPlaceholderTakeover", {
+    by: takeover.by || t("staffFallbackRole")
+  }) : t("composerPlaceholder", { agent: name ?? t("agentFallbackName") });
+  const Slot = slots.Composer;
+  const own = { placeholder, responding, onSend, onStop };
+  return Slot ? /* @__PURE__ */ jsx(Slot, { ...own, Default: DefaultComposer }) : /* @__PURE__ */ jsx(DefaultComposer, { ...own });
+});
+var DisclosureBar = memo(function DisclosureBar2() {
+  const { store } = useChat();
+  const { t } = useCopy();
+  const theme = useTheme();
+  const { space: space2, font: font2 } = theme;
+  const disclosure = useConversationSelector(store, (v) => v.disclosure);
+  const [open, setOpen] = useState(false);
+  const legible = contrastRatio(
+    theme.colors.disclosureText,
+    theme.colors.disclosureBackground
+  ) >= 4.5;
+  const pair = legible ? theme.colors : colors(theme.scheme);
+  const text = disclosure ?? t("disclosureFallback");
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "text",
+      accessibilityLabel: text,
+      onPress: () => setOpen((o) => !o),
+      testID: "vinaverse-disclosure",
+      style: {
+        backgroundColor: pair.disclosureBackground,
+        paddingHorizontal: space2.lg,
+        paddingVertical: space2.xs
+      },
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          numberOfLines: open ? void 0 : 2,
+          style: {
+            color: pair.disclosureText,
+            // never below the disclosure's minimum, whatever the tenant's type scale
+            fontSize: Math.max(font2.size.xs, size.disclosureFontMin),
+            lineHeight: Math.max(font2.size.xs, size.disclosureFontMin) * font2.lineHeight
+          },
+          children: text
+        }
+      )
+    }
+  );
+});
+function FailureActionButton(props) {
+  const { handlers, failureAction } = useChat();
+  const { t } = useCopy();
+  if (!failureAction) return null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      label: failureAction.label ?? t("talkToPerson"),
+      variant: "text",
+      onPress: () => handlers.current.failureAction?.onPress(props.state)
+    }
+  );
+}
+function FailureSlot(props) {
+  const { slot: Slot, state, Default } = props;
+  return Slot ? /* @__PURE__ */ jsx(Slot, { state, Default }) : /* @__PURE__ */ jsx(Default, { state });
+}
+function DefaultBubble(props) {
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  const role = props.item.role;
+  const [background, foreground] = role === "person" ? [colors2.personBubble, colors2.personText] : role === "staff" ? [colors2.staffBubble, colors2.staffText] : [colors2.agentBubble, colors2.agentText];
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        backgroundColor: background,
+        borderRadius: radius2.lg,
+        paddingHorizontal: space2.md,
+        paddingVertical: space2.sm
+      },
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          selectable: true,
+          style: {
+            color: foreground,
+            fontSize: font2.size.md,
+            lineHeight: font2.size.md * font2.lineHeight,
+            ...font2.family ? { fontFamily: font2.family } : {}
+          },
+          children: props.text
+        }
+      )
+    }
+  );
+}
+function useAuthor(item) {
+  const { t } = useCopy();
+  const { store } = useChat();
+  const name = store.getSnapshot().agent.name ?? t("agentFallbackName");
+  const by = store.getSnapshot().takeover?.by;
+  if (item.role === "person") return t("you");
+  if (item.role === "staff")
+    return t("staffLabel", { by: by || t("staffFallbackRole") });
+  return `${name} \xB7 ${t("agentLabel")}`;
+}
+var MessageBubble = memo(function MessageBubble2(props) {
+  const { item } = props;
+  return /* @__PURE__ */ jsx(Frame, { item, text: item.text, showAuthor: props.showAuthor });
+});
+var StreamingBubble = memo(function StreamingBubble2(props) {
+  const { store } = useChat();
+  const text = useStreamingText(store, props.item.key) ?? "";
+  return /* @__PURE__ */ jsx(Frame, { item: props.item, text, showAuthor: props.showAuthor });
+});
+function Frame(props) {
+  const { item, text } = props;
+  const { store, slots } = useChat();
+  const { t } = useCopy();
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  const author = useAuthor(item);
+  const mine = item.role === "person";
+  const status = item.state === "sending" ? t("messageSending") : item.state === "held" ? t("messageHeld") : item.state === "not_sent" ? item.rejection?.message || t("messageNotSent") : item.state === "delivered" ? t("messageDelivered") : item.partial ? t("messageCutOff") : null;
+  const Bubble = slots.MessageBubble;
+  const bubble = Bubble ? /* @__PURE__ */ jsx(Bubble, { item, text, Default: DefaultBubble }) : /* @__PURE__ */ jsx(DefaultBubble, { item, text });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessible: true,
+      accessibilityLabel: [author, text, status].filter(Boolean).join(". "),
+      style: {
+        alignSelf: mine ? "flex-end" : "flex-start",
+        maxWidth: "85%",
+        marginHorizontal: space2.lg,
+        marginTop: props.showAuthor ? space2.md : space2.xs,
+        opacity: item.state === "sending" || item.state === "held" ? 0.75 : 1
+      },
+      children: [
+        props.showAuthor && !mine ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: item.role === "staff" ? colors2.staffAccent : colors2.textMuted,
+              fontSize: font2.size.xs,
+              marginBottom: space2.xxs
+            },
+            children: author
+          }
+        ) : null,
+        bubble,
+        status ? /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: {
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: mine ? "flex-end" : "flex-start",
+              gap: space2.xs,
+              marginTop: space2.xxs
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    color: item.state === "not_sent" ? colors2.danger : colors2.textMuted,
+                    fontSize: font2.size.xs
+                  },
+                  children: status
+                }
+              ),
+              item.state === "not_sent" ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  label: t("tryAgain"),
+                  variant: "text",
+                  onPress: () => {
+                    store.retry(item.key);
+                  }
+                }
+              ) : null
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function useNativeLifecycle(store) {
+  useEffect(() => {
+    const apply = (state) => store.setForeground(state === "active");
+    apply(AppState.currentState);
+    const subscription = AppState.addEventListener("change", apply);
+    return () => subscription.remove();
+  }, [store]);
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    let live = true;
+    AccessibilityInfo.isReduceMotionEnabled().then(
+      (value) => {
+        if (live) setReduced(value);
+      },
+      () => void 0
+    );
+    const subscription = AccessibilityInfo.addEventListener(
+      "reduceMotionChanged",
+      setReduced
+    );
+    return () => {
+      live = false;
+      subscription.remove();
+    };
+  }, []);
+  return reduced;
+}
+function announce(text) {
+  if (text) AccessibilityInfo.announceForAccessibility(text);
+}
+var SystemRow = memo(function SystemRow2(props) {
+  const { t } = useCopy();
+  const { store, slots } = useChat();
+  const conversationId = useConversationSelector(
+    store,
+    (v) => v.conversationId
+  );
+  const { event, data } = props.item;
+  if (event === "turn_failed") {
+    const key = props.item.key;
+    const state = {
+      kind: "turn_failed",
+      reason: typeof data.code === "string" ? data.code : null,
+      retry: data.retry === true ? () => void store.retryTurn(key) : void 0,
+      conversationId
+    };
+    return /* @__PURE__ */ jsx(
+      FailureSlot,
+      {
+        slot: slots.Error,
+        state,
+        Default: DefaultTurnFailed
+      }
+    );
+  }
+  const agent = store.getSnapshot().agent.name ?? t("agentFallbackName");
+  const text = (() => {
+    switch (event) {
+      case "takeover_started":
+        return t("takeoverStarted", {
+          by: data.by || t("staffFallbackRole")
+        });
+      case "takeover_ended":
+        return t("takeoverEnded", { agent });
+      case "handoff_created":
+        return data.expected_response ? t("handoffCreated", { expected: data.expected_response }) : t("handoffCreatedNoTime");
+      case "flow_completed":
+        return data.result === "ok" ? t("flowSent") : data.result === "failed" ? t("flowNotSent") : null;
+      default:
+        return null;
+    }
+  })();
+  if (!text) return null;
+  return /* @__PURE__ */ jsx(Line, { text });
+});
+function DefaultTurnFailed(props) {
+  const { t } = useCopy();
+  const { failureAction } = useChat();
+  const text = t("turnFailed");
+  if (!failureAction) return /* @__PURE__ */ jsx(Line, { text, danger: true });
+  return /* @__PURE__ */ jsxs(View, { style: { alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(Line, { text, danger: true }),
+    /* @__PURE__ */ jsx(FailureActionButton, { state: props.state })
+  ] });
+}
+function Line(props) {
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessible: true,
+      accessibilityLabel: props.text,
+      style: {
+        alignItems: "center",
+        paddingHorizontal: space2.xl,
+        paddingVertical: space2.sm
+      },
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: {
+            color: props.danger ? colors2.danger : colors2.textMuted,
+            fontSize: font2.size.sm,
+            textAlign: "center"
+          },
+          children: props.text
+        }
+      )
+    }
+  );
+}
+var keyOf = (item) => item.key;
+function itemType(item) {
+  if (item.type === "card") return `card:${item.card.kind}`;
+  if (item.type === "message")
+    return item.state === "streaming" ? "streaming" : `message:${item.role}`;
+  return "system";
+}
+function authorOf(item) {
+  return item?.type === "message" ? item.role : null;
+}
+var Row = memo(function Row2(props) {
+  const { item } = props;
+  if (item.type === "card") return /* @__PURE__ */ jsx(CardView, { item });
+  if (item.type === "system") return /* @__PURE__ */ jsx(SystemRow, { item });
+  return item.state === "streaming" ? /* @__PURE__ */ jsx(StreamingBubble, { item, showAuthor: props.showAuthor }) : /* @__PURE__ */ jsx(MessageBubble, { item, showAuthor: props.showAuthor });
+});
+var MessageList = memo(function MessageList2() {
+  const { store, slots } = useChat();
+  const { t } = useCopy();
+  const { space: space2 } = useTheme();
+  const reducedMotion = useReducedMotion();
+  const items = useConversationSelector(store, (v) => v.items);
+  const opening = useConversationSelector(
+    store,
+    (v) => v.status === "starting" || v.status === "connecting"
+  );
+  const agentName = useConversationSelector(store, (v) => v.agent.name);
+  useAnnounceReplies(items);
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const renderItem = useCallback(
+    ({ item, index }) => /* @__PURE__ */ jsx(
+      Row,
+      {
+        item,
+        showAuthor: authorOf(item) !== authorOf(itemsRef.current[index - 1])
+      }
+    ),
+    []
+  );
+  const Empty = slots.EmptyState;
+  const empty = opening ? /* @__PURE__ */ jsx(ChatSkeleton, {}) : Empty ? /* @__PURE__ */ jsx(Empty, { agentName: agentName ?? t("agentFallbackName") }) : null;
+  const props = useMemo(
+    () => ({
+      data: items,
+      renderItem,
+      keyExtractor: keyOf,
+      getItemType: itemType,
+      maintainVisibleContentPosition: {
+        startRenderingFromBottom: true,
+        autoscrollToBottomThreshold: 0.2,
+        animateAutoScrollToBottom: !reducedMotion
+      },
+      ListFooterComponent: /* @__PURE__ */ jsx(ActivityLine, {}),
+      ListEmptyComponent: empty,
+      keyboardShouldPersistTaps: "handled",
+      contentContainerStyle: { paddingVertical: space2.sm }
+    }),
+    [items, renderItem, reducedMotion, empty, space2.sm]
+  );
+  const List = slots.ListComponent;
+  return List ? /* @__PURE__ */ jsx(List, { ...props }) : /* @__PURE__ */ jsx(FlashList, { ...props });
+});
+function useAnnounceReplies(items) {
+  const seen = useRef(void 0);
+  const { t } = useCopy();
+  const { store } = useChat();
+  useEffect(() => {
+    const last = items.at(-1);
+    if (seen.current === void 0) {
+      seen.current = last?.key ?? "";
+      return;
+    }
+    if (last?.type !== "message" || last.role === "person") return;
+    if (last.state !== "sent" || last.key === seen.current) return;
+    seen.current = last.key;
+    const author = last.role === "staff" ? t("staffLabel", {
+      by: store.getSnapshot().takeover?.by || t("staffFallbackRole")
+    }) : store.getSnapshot().agent.name ?? t("agentFallbackName");
+    announce(`${author}: ${last.text}`);
+  }, [items, t, store]);
+}
+var CONNECTING_DELAY = motion.bannerDelay;
+var StatusBanner = memo(function StatusBanner2() {
+  const { store, slots } = useChat();
+  const { t } = useCopy();
+  const banner = useConversationSelector(store, (v) => v.banner);
+  const status = useConversationSelector(store, (v) => v.status);
+  const conversationId = useConversationSelector(
+    store,
+    (v) => v.conversationId
+  );
+  const unavailable = useMemo(
+    () => ({
+      kind: "unavailable",
+      reason: status,
+      retry: () => store.start(),
+      conversationId
+    }),
+    [store, status, conversationId]
+  );
+  const [late, setLate] = useState(false);
+  useEffect(() => {
+    setLate(false);
+    if (banner !== "connecting") return;
+    const timer = setTimeout(() => setLate(true), CONNECTING_DELAY);
+    return () => clearTimeout(timer);
+  }, [banner]);
+  if (banner === null || banner === "connecting" && !late) return null;
+  if (banner === "unavailable")
+    return /* @__PURE__ */ jsx(
+      FailureSlot,
+      {
+        slot: slots.Unavailable,
+        state: unavailable,
+        Default: DefaultUnavailable
+      }
+    );
+  const text = {
+    connecting: t("bannerConnecting"),
+    reconnecting: t("bannerReconnecting"),
+    offline: t("bannerOffline"),
+    continued_elsewhere: t("bannerContinuedElsewhere")
+  }[banner];
+  const action = banner === "continued_elsewhere" ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      label: t("continueHere"),
+      variant: "text",
+      onPress: () => void store.continueHere()
+    }
+  ) : banner === "offline" ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      label: t("tryAgain"),
+      variant: "text",
+      onPress: () => store.start()
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx(Banner, { text, children: action });
+});
+function DefaultUnavailable(props) {
+  const { t } = useCopy();
+  const { retry } = props.state;
+  return /* @__PURE__ */ jsxs(Banner, { text: t("bannerUnavailable"), children: [
+    retry ? /* @__PURE__ */ jsx(Button, { label: t("tryAgain"), variant: "text", onPress: retry }) : null,
+    /* @__PURE__ */ jsx(FailureActionButton, { state: props.state })
+  ] });
+}
+function Banner(props) {
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityLiveRegion: "polite",
+      accessibilityRole: "alert",
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: space2.sm,
+        paddingHorizontal: space2.lg,
+        paddingVertical: space2.xs,
+        backgroundColor: colors2.surface,
+        borderBottomWidth: 1,
+        borderBottomColor: colors2.divider
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: { color: colors2.text, fontSize: font2.size.sm, flexShrink: 1 },
+            children: props.text
+          }
+        ),
+        props.children
+      ]
+    }
+  );
+}
+function VinaverseChatProvider(props) {
+  const { conversation, components, agentAvatar, timeZone } = props;
+  const handlers = useRef(props);
+  handlers.current = props;
+  const slots = useStableSlots(components);
+  const hasAction = props.failureAction !== void 0;
+  const actionLabel = props.failureAction?.label;
+  const failureAction = useMemo(
+    () => hasAction ? { label: actionLabel } : null,
+    [hasAction, actionLabel]
+  );
+  const value = useMemo(
+    () => ({
+      store: conversation,
+      handlers,
+      slots,
+      agentAvatar,
+      timeZone,
+      failureAction
+    }),
+    [conversation, slots, agentAvatar, timeZone, failureAction]
+  );
+  useNativeLifecycle(conversation);
+  useEffect(() => {
+    conversation.start();
+  }, [conversation]);
+  const { onWarning, theme, copy } = props;
+  useEffect(() => {
+    if (!onWarning) return;
+    for (const problem of themeProblems(theme))
+      onWarning(`Vinaverse theme: ${problem}`);
+    for (const key of bannedWordsIn(copy ?? {}))
+      onWarning(
+        `Vinaverse copy: "${key}" says assistant, bot or crew; the copy says agent.`
+      );
+  }, [onWarning, theme, copy]);
+  return /* @__PURE__ */ jsx(CopyProvider, { locale: props.locale, copy: props.copy, children: /* @__PURE__ */ jsx(ThemeProvider, { theme: props.theme, colorScheme: props.colorScheme, children: /* @__PURE__ */ jsx(ChatContextProvider, { value, children: props.children }) }) });
+}
+function VinaverseChat(props) {
+  return /* @__PURE__ */ jsx(VinaverseChatProvider, { ...props, children: /* @__PURE__ */ jsx(
+    Layout,
+    {
+      hideHeader: props.hideHeader === true,
+      keyboardVerticalOffset: props.keyboardVerticalOffset ?? 0,
+      keyboardBehavior: props.keyboardBehavior ?? (Platform.OS === "ios" ? "padding" : "none"),
+      style: props.style,
+      onError: props.onWarning
+    }
+  ) });
+}
+function Layout(props) {
+  const { colors: colors2 } = useTheme();
+  const { direction } = useCopy();
+  const { onError } = props;
+  const reportError = useMemo(
+    () => onError ? (e) => onError(String(e)) : void 0,
+    [onError]
+  );
+  return /* @__PURE__ */ jsxs(
+    KeyboardAvoidingView,
+    {
+      ...props.keyboardBehavior === "none" ? { enabled: false } : { behavior: props.keyboardBehavior },
+      keyboardVerticalOffset: props.keyboardVerticalOffset,
+      style: [
+        { flex: 1, backgroundColor: colors2.background, direction },
+        props.style
+      ],
+      children: [
+        props.hideHeader ? null : /* @__PURE__ */ jsx(ChatHeader, {}),
+        /* @__PURE__ */ jsx(DisclosureBar, {}),
+        /* @__PURE__ */ jsx(StatusBanner, {}),
+        /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(MessageList, {}) }),
+        /* @__PURE__ */ jsx(Composer, { ...reportError ? { onError: reportError } : {} })
+      ]
+    }
+  );
+}
+function useStableSlots(slots) {
+  const held = useRef({});
+  const next = slots ?? {};
+  if (!sameSlots(held.current, next)) held.current = next;
+  return held.current;
+}
+function sameSlots(a, b) {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const key of keys) {
+    if (key === "cards") {
+      const ca = a.cards ?? {};
+      const cb = b.cards ?? {};
+      const kinds = /* @__PURE__ */ new Set([...Object.keys(ca), ...Object.keys(cb)]);
+      for (const kind of kinds) if (ca[kind] !== cb[kind]) return false;
+    } else if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+
+export { ActivityLine, Avatar, Button, CardFrame, CardView, ChatHeader, ChatSkeleton, Composer, DefaultBubble, DefaultComposer, DefaultHeader, DefaultTurnFailed, DefaultUnavailable, DisclosureBar, FailureActionButton, InfoCard, MessageBubble, MessageList, NextStepCard, ProposalCard, QuestionCard, Row, StatusBanner, StreamingBubble, SystemRow, ThemeProvider, TimeSlotsCard, VinaverseChat, VinaverseChatProvider, announce, answerText, createTheme, defaultCard, fieldText, itemType, themeProblems, useChat, useNativeLifecycle, useReducedMotion, useTheme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map