@vinaverse/react-native 0.1.0-alpha.11 → 0.1.0-alpha.13

package/dist/{chunk-XAG2P447.cjs → chunk-272ACDLI.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk6QYDPGRS_cjs = require('./chunk-6QYDPGRS.cjs');
+var chunkUMCOOQT6_cjs = require('./chunk-UMCOOQT6.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactNative = require('react-native');
@@ -9,6 +9,7 @@ var conversation = require('@vinaverse/client/conversation');
 var agent = require('@vinaverse/client/agent');
 var flashList = require('@shopify/flash-list');
 var tokens = require('@vinaverse/tokens');
+var copy = require('@vinaverse/tokens/copy');
 
 var ChatContext = /* @__PURE__ */ react.createContext(
   null
@@ -25,7 +26,7 @@ function useChat() {
   return value;
 }
 var Button = /* @__PURE__ */ react.memo(function Button2(props) {
-  const { colors, radius, space, size: size2, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, radius, space, size: size2, font } = chunkUMCOOQT6_cjs.useTheme();
   const variant = props.variant ?? "secondary";
   const inactive = props.disabled === true || props.busy === true;
   const filled = variant === "primary" || props.selected === true;
@@ -83,7 +84,7 @@ function cardOf(held) {
   return held.card;
 }
 function CardFrame(props) {
-  const { colors, radius, space } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, radius, space } = chunkUMCOOQT6_cjs.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
@@ -111,7 +112,7 @@ function CardFrame(props) {
   );
 }
 function Title(props) {
-  const { colors, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, font } = chunkUMCOOQT6_cjs.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Text,
     {
@@ -128,12 +129,12 @@ function Title(props) {
   );
 }
 function Body(props) {
-  const { colors, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, font } = chunkUMCOOQT6_cjs.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Text,
     {
       style: {
-        color: props.danger ? colors.danger : props.muted ? colors.textMuted : colors.text,
+        color: props.danger ? colors.danger : props.muted ? colors.textSecondary : colors.text,
         fontSize: props.muted ? font.size.sm : font.size.md,
         lineHeight: (props.muted ? font.size.sm : font.size.md) * font.lineHeight,
         ...font.family ? { fontFamily: font.family } : {}
@@ -171,7 +172,7 @@ function InfoCard(props) {
   const card = cardOf(props.card);
   const { locale, t } = react$1.useCopy();
   const { slots, timeZone, handlers } = useChat();
-  const { colors, radius, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, radius, space, font } = chunkUMCOOQT6_cjs.useTheme();
   const image = safeImage(card.image_url);
   const Img = slots.Image ?? reactNative.Image;
   const money = card.price ?? card.price_from;
@@ -208,7 +209,7 @@ function InfoCard(props) {
     /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flex: 1, gap: space.xxs }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Title, { numberOfLines: 2, children: card.title }),
       card.subtitle ? /* @__PURE__ */ jsxRuntime.jsx(Body, { muted: true, children: card.subtitle }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors.textMuted, fontSize: font.size.sm }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors.textSecondary, fontSize: font.size.sm }, children: [
         rating && `\u2605 ${rating}${card.rating ? ` (${card.rating.count})` : ""}`,
         price,
         when
@@ -245,7 +246,7 @@ function InfoCard(props) {
   );
 }
 function Badges(props) {
-  const { colors, radius, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, radius, space, font } = chunkUMCOOQT6_cjs.useTheme();
   if (!props.badges?.length) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space.xs }, children: props.badges.map((b) => /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Text,
@@ -265,7 +266,7 @@ function Badges(props) {
 }
 function CardActions(props) {
   const card = cardOf(props.card);
-  const { space } = chunk6QYDPGRS_cjs.useTheme();
+  const { space } = chunkUMCOOQT6_cjs.useTheme();
   if (!card.actions?.length) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space.sm }, children: card.actions.map((a) => /* @__PURE__ */ jsxRuntime.jsx(
     Action,
@@ -332,7 +333,7 @@ function ListingCard(props) {
   const card = cardOf(props.card);
   const { locale, t } = react$1.useCopy();
   const { slots, timeZone, handlers, imagePolicy } = useChat();
-  const { colors, radius, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, radius, space, font } = chunkUMCOOQT6_cjs.useTheme();
   const [failed, setFailed] = react.useState(null);
   const photoUrl = allowedImage(
     card.images?.[0]?.url ?? card.image_url,
@@ -395,7 +396,7 @@ function ListingCard(props) {
           reactNative.Text,
           {
             style: {
-              color: colors.textMuted,
+              color: colors.textSecondary,
               fontSize: font.size.xl,
               fontWeight: "600"
             },
@@ -522,7 +523,7 @@ function ProposalCard(props) {
   const proposal = card.proposal;
   const { t, locale } = react$1.useCopy();
   const { store, handlers, timeZone } = useChat();
-  const { colors, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, space, font } = chunkUMCOOQT6_cjs.useTheme();
   const edit = useLink(proposal?.edit_deep_link, props.card);
   if (!proposal) return null;
   const settled = outcomeText(t, props.card.outcome, proposal.status);
@@ -567,7 +568,7 @@ function ProposalCard(props) {
             reactNative.Text,
             {
               style: {
-                color: colors.textMuted,
+                color: colors.textSecondary,
                 fontSize: font.size.sm,
                 minWidth: 72
               },
@@ -586,7 +587,7 @@ function ProposalCard(props) {
           reactNative.Text,
           {
             style: {
-              color: props.card.outcome === "confirmed" || proposal.status === "confirmed" ? colors.success : colors.textMuted,
+              color: props.card.outcome === "confirmed" || proposal.status === "confirmed" ? colors.success : colors.textSecondary,
               fontSize: font.size.sm,
               fontWeight: "600"
             },
@@ -648,7 +649,7 @@ function QuestionCard(props) {
   const question = held.question;
   const { store, handlers } = useChat();
   const { t, locale } = react$1.useCopy();
-  const { colors, font, space } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, font, space } = chunkUMCOOQT6_cjs.useTheme();
   const needsSocket = react$1.useConversationSelector(
     store,
     (v) => v.answersNeedWebSocket
@@ -674,7 +675,7 @@ function QuestionCard(props) {
       restored: props.restored,
       testID: `vinaverse-question-${held.id}`,
       children: [
-        question.progress ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors.textMuted, fontSize: font.size.xs }, children: t("questionStep", {
+        question.progress ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors.textSecondary, fontSize: font.size.xs }, children: t("questionStep", {
           step: question.progress.step,
           total: question.progress.total
         }) }) : null,
@@ -708,7 +709,7 @@ function QuestionCard(props) {
 function Answer(props) {
   const { question, send, enabled } = props;
   const { t } = react$1.useCopy();
-  const { space } = chunk6QYDPGRS_cjs.useTheme();
+  const { space } = chunkUMCOOQT6_cjs.useTheme();
   const { handlers } = useChat();
   const [draft, setDraft] = react.useState({});
   const kind = question.kind;
@@ -820,7 +821,7 @@ function ChoiceAnswer(props) {
   const { question, draft, onChange, enabled } = props;
   const { t } = react$1.useCopy();
   const { slots } = useChat();
-  const { colors, radius, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, radius, space, font } = chunkUMCOOQT6_cjs.useTheme();
   const [search, setSearch] = react.useState("");
   const multi = question.kind === "multi_choice" || question.kind === "image_choice";
   const values = draft.values ?? [];
@@ -832,7 +833,7 @@ function ChoiceAnswer(props) {
     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 shown2 = 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);
@@ -865,7 +866,7 @@ function ChoiceAnswer(props) {
         }
       }
     ) : null,
-    shown.map((o) => {
+    shown2.map((o) => {
       const image = question.kind === "image_choice" ? safeImage(o.image_url) : null;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Button,
@@ -926,7 +927,7 @@ function ChoiceAnswer(props) {
   ] });
 }
 function ChoiceLabel(props) {
-  const { colors, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, font } = chunkUMCOOQT6_cjs.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Text,
     {
@@ -941,7 +942,7 @@ function ChoiceLabel(props) {
 }
 function OtherText(props) {
   const { t } = react$1.useCopy();
-  const { colors, radius, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, radius, space, font } = chunkUMCOOQT6_cjs.useTheme();
   const on = props.value !== void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { gap: space.xs }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -980,14 +981,14 @@ function OtherText(props) {
 }
 function CharactersLeft(props) {
   const { t } = react$1.useCopy();
-  const { colors, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, font } = chunkUMCOOQT6_cjs.useTheme();
   const left = props.max - conversation.codePoints(props.text);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Text,
     {
       accessibilityLiveRegion: left < 20 ? "polite" : "none",
       style: {
-        color: left < 0 ? colors.danger : colors.textMuted,
+        color: left < 0 ? colors.danger : colors.textSecondary,
         fontSize: font.size.xs
       },
       children: t("questionCharactersLeft", { count: left })
@@ -995,7 +996,7 @@ function CharactersLeft(props) {
   );
 }
 function TextAnswer(props) {
-  const { colors, radius, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, radius, space, font } = chunkUMCOOQT6_cjs.useTheme();
   const long = props.question.kind === "long_text";
   const max = props.question.text?.max_length ?? (long ? 2e3 : 200);
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { gap: space.xs }, children: [
@@ -1026,10 +1027,10 @@ function TextAnswer(props) {
 }
 function NumberAnswer(props) {
   const range = props.question.number ?? { min: 0, max: 100, step: 1 };
-  const { colors, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, space, font } = chunkUMCOOQT6_cjs.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}` : ""}`;
+  const shown2 = `${value}${props.question.number?.unit ? ` ${props.question.number.unit}` : ""}`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
@@ -1040,7 +1041,7 @@ function NumberAnswer(props) {
         min: range.min,
         max: range.max,
         now: value,
-        text: shown
+        text: shown2
       },
       accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
       testID: "vinaverse-question-number",
@@ -1068,7 +1069,7 @@ function NumberAnswer(props) {
               minWidth: 64,
               textAlign: "center"
             },
-            children: shown
+            children: shown2
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1085,7 +1086,7 @@ function NumberAnswer(props) {
 }
 function ScaleAnswer(props) {
   const scale = props.question.scale;
-  const { colors, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, space, font } = chunkUMCOOQT6_cjs.useTheme();
   if (!scale) return null;
   const points = [];
   for (let n = scale.min; n <= scale.max && points.length < 21; n += scale.step)
@@ -1102,15 +1103,15 @@ function ScaleAnswer(props) {
       n
     )) }),
     /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "row", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors.textMuted, fontSize: font.size.xs }, children: scale.min_label }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors.textMuted, fontSize: font.size.xs }, children: scale.max_label })
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors.textSecondary, fontSize: font.size.xs }, children: scale.min_label }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors.textSecondary, fontSize: font.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 } = react$1.useCopy();
-  const { colors, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, space, font } = chunkUMCOOQT6_cjs.useTheme();
   const bounds = props.question.date;
   const start = props.value ?? bounds?.min ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
   const [month, setMonth] = react.useState(() => ({
@@ -1194,7 +1195,7 @@ function DateAnswer(props) {
 function RateEach(props) {
   const { question } = props;
   const { t } = react$1.useCopy();
-  const { colors, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, space, font } = chunkUMCOOQT6_cjs.useTheme();
   const answered = new Map(
     (question.row_answers ?? []).map((r) => [
       r.question_id,
@@ -1275,7 +1276,7 @@ function TimeSlotsCard(props) {
   const card = cardOf(props.card);
   const { locale } = react$1.useCopy();
   const { timeZone } = useChat();
-  const { colors, radius, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, radius, space, font } = chunkUMCOOQT6_cjs.useTheme();
   const slots = (card.slots ?? []).map(
     (s) => react$1.formatTimeRange(s.start, s.end, locale, timeZone)
   );
@@ -1366,7 +1367,7 @@ function CardCarousel(props) {
 var ActivityLine = /* @__PURE__ */ react.memo(function ActivityLine2() {
   const { store } = useChat();
   const { t } = react$1.useCopy();
-  const { colors, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, space, font } = chunkUMCOOQT6_cjs.useTheme();
   const activity = react$1.useConversationSelector(store, (v) => v.activity);
   const waiting = react$1.useConversationSelector(
     store,
@@ -1386,7 +1387,7 @@ var ActivityLine = /* @__PURE__ */ react.memo(function ActivityLine2() {
   );
 });
 var Avatar = /* @__PURE__ */ react.memo(function Avatar2(props) {
-  const { colors, size: size2, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, size: size2, font } = chunkUMCOOQT6_cjs.useTheme();
   const { slots } = useChat();
   const box = {
     width: size2.avatar,
@@ -1432,7 +1433,7 @@ var Avatar = /* @__PURE__ */ react.memo(function Avatar2(props) {
   );
 });
 function DefaultHeader(props) {
-  const { colors, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, space, font } = chunkUMCOOQT6_cjs.useTheme();
   const { t } = react$1.useCopy();
   const person = props.takeoverBy !== null;
   const subtitle = person ? t("staffLabel", { by: props.takeoverBy || t("staffFallbackRole") }) : t("agentLabel");
@@ -1498,9 +1499,10 @@ var ChatHeader = /* @__PURE__ */ react.memo(function ChatHeader2() {
   return Header ? /* @__PURE__ */ jsxRuntime.jsx(Header, { ...props, Default: DefaultHeader }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultHeader, { ...props });
 });
 var DisclosureBar = /* @__PURE__ */ react.memo(function DisclosureBar2() {
-  const { store } = useChat();
+  const { store, disclosure: given } = useChat();
+  const held = given && copy.isDisclosure(given) ? given : void 0;
   const { t } = react$1.useCopy();
-  const theme = chunk6QYDPGRS_cjs.useTheme();
+  const theme = chunkUMCOOQT6_cjs.useTheme();
   const { space, font } = theme;
   const disclosure = react$1.useConversationSelector(store, (v) => v.disclosure);
   const [open, setOpen] = react.useState(false);
@@ -1509,12 +1511,20 @@ var DisclosureBar = /* @__PURE__ */ react.memo(function DisclosureBar2() {
     theme.colors.disclosureBackground
   ) >= 4.5;
   const pair = legible ? theme.colors : tokens.colors(theme.scheme);
-  const text = disclosure ?? t("disclosureFallback");
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const text = disclosure ?? held ?? t("disclosureFallback");
+  const { rest, brand } = splitBrand(text);
+  const centered = {
+    color: pair.disclosureText,
+    // never below the disclosure's minimum, whatever the tenant's type scale
+    fontSize: Math.max(font.size.xs, tokens.size.disclosureFontMin),
+    lineHeight: Math.max(font.size.xs, tokens.size.disclosureFontMin) * font.lineHeight,
+    textAlign: "center"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.Pressable,
     {
       accessibilityRole: "text",
-      accessibilityLabel: text,
+      accessibilityLabel: brand ? [rest, `${brand}.`].filter(Boolean).join(" ") : text,
       onPress: () => setOpen((o) => !o),
       testID: "vinaverse-disclosure",
       style: {
@@ -1522,24 +1532,43 @@ var DisclosureBar = /* @__PURE__ */ react.memo(function DisclosureBar2() {
         paddingHorizontal: space.lg,
         paddingVertical: space.xs
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        reactNative.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(font.size.xs, tokens.size.disclosureFontMin),
-            lineHeight: Math.max(font.size.xs, tokens.size.disclosureFontMin) * font.lineHeight
-          },
-          children: text
-        }
-      )
+      children: [
+        rest ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            numberOfLines: open ? void 0 : 2,
+            style: held && !open ? [centered, { minHeight: 2 * centered.lineHeight }] : centered,
+            children: rest
+          }
+        ) : null,
+        brand ? (
+          // Its own line, one unit that never breaks ("Powered by / Vinaverse"), the brand's name in emphasis.
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            reactNative.Text,
+            {
+              numberOfLines: 1,
+              adjustsFontSizeToFit: true,
+              minimumFontScale: tokens.size.disclosureFontMin / centered.fontSize,
+              style: centered,
+              testID: "vinaverse-powered-by",
+              children: [
+                nobreak(brand.slice(0, -9)),
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontWeight: "600" }, children: "Vinaverse" })
+              ]
+            }
+          )
+        ) : null
+      ]
     }
   );
 });
+var nobreak = (s) => s.replace(/ /g, "\xA0");
+function splitBrand(text) {
+  const m = /^([\s\S]*?[.!?])?\s*([^.!?]*Vinaverse)[.!]?$/.exec(text.trim());
+  return m ? { rest: m[1] ?? "", brand: m[2].trim() } : { rest: text.trim(), brand: "" };
+}
 var ChatSkeleton = /* @__PURE__ */ react.memo(function ChatSkeleton2() {
-  const { colors, radius, space } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, radius, space } = chunkUMCOOQT6_cjs.useTheme();
   const row = (width, end) => /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
@@ -1570,7 +1599,7 @@ var ChatSkeleton = /* @__PURE__ */ react.memo(function ChatSkeleton2() {
   );
 });
 function DefaultBubble(props) {
-  const { colors, radius, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, radius, space, font } = chunkUMCOOQT6_cjs.useTheme();
   const role = props.item.role;
   const [background, foreground] = role === "person" ? [colors.personBubble, colors.personText] : role === "staff" ? [colors.staffBubble, colors.staffText] : [colors.agentBubble, colors.agentText];
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1623,10 +1652,11 @@ var StreamingBubble = /* @__PURE__ */ react.memo(
 );
 function Frame(props) {
   const { item, text } = props;
-  const { store, slots } = useChat();
-  const { t } = react$1.useCopy();
-  const { colors, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { store, slots, timeZone, messageTimes } = useChat();
+  const { t, locale } = react$1.useCopy();
+  const { colors, space, font } = chunkUMCOOQT6_cjs.useTheme();
   const author = useAuthor(item);
+  const when = item.at && messageTimes !== null ? react$1.formatDateTime(item.at, locale, timeZone) : null;
   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") : item.refusal && mine ? t("messageRefused") : null;
   const Bubble = slots.MessageBubble;
@@ -1635,7 +1665,7 @@ function Frame(props) {
     reactNative.View,
     {
       accessible: true,
-      accessibilityLabel: [author, text, status].filter(Boolean).join(". "),
+      accessibilityLabel: [author, text, status, when].filter(Boolean).join(". "),
       style: {
         alignSelf: mine ? "flex-end" : "flex-start",
         maxWidth: "85%",
@@ -1648,7 +1678,7 @@ function Frame(props) {
           reactNative.Text,
           {
             style: {
-              color: item.role === "staff" ? colors.staffAccent : colors.textMuted,
+              color: item.role === "staff" ? colors.staffAccent : colors.textSecondary,
               fontSize: font.size.xs,
               marginBottom: space.xxs
             },
@@ -1671,7 +1701,7 @@ function Frame(props) {
                 reactNative.Text,
                 {
                   style: {
-                    color: item.state === "not_sent" ? colors.danger : colors.textMuted,
+                    color: item.state === "not_sent" ? colors.danger : colors.textSecondary,
                     fontSize: font.size.xs
                   },
                   children: status
@@ -1767,7 +1797,7 @@ function DefaultTurnFailed(props) {
   ] });
 }
 function Line(props) {
-  const { colors, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, space, font } = chunkUMCOOQT6_cjs.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
@@ -1793,7 +1823,7 @@ function Line(props) {
   );
 }
 var Welcome = /* @__PURE__ */ react.memo(function Welcome2(props) {
-  const { colors, radius, space, font } = chunk6QYDPGRS_cjs.useTheme();
+  const { colors, radius, space, font } = chunkUMCOOQT6_cjs.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
@@ -1829,6 +1859,34 @@ var Welcome = /* @__PURE__ */ react.memo(function Welcome2(props) {
     }
   );
 });
+function messageTimeLabel(at, locale, timeZone, now) {
+  return Number.isNaN(Date.parse(at)) ? "" : react$1.formatDayTime(at, TODAY, locale, timeZone, now);
+}
+var TODAY = { today: "{time}", tomorrow: "" };
+var MessageTime = /* @__PURE__ */ react.memo(function MessageTime2(props) {
+  const { slots, timeZone } = useChat();
+  const { locale } = react$1.useCopy();
+  const { colors, space, font } = chunkUMCOOQT6_cjs.useTheme();
+  const label = messageTimeLabel(props.at, locale, timeZone);
+  if (!label) return null;
+  const Slot = slots.MessageTime;
+  if (Slot) return /* @__PURE__ */ jsxRuntime.jsx(Slot, { at: props.at, label });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      testID: "vinaverse-message-time",
+      style: {
+        alignSelf: "center",
+        color: colors.textSecondary,
+        fontSize: font.size.xs,
+        marginTop: space.md
+      },
+      children: label
+    }
+  );
+});
 var keyOf2 = (item) => item.key;
 function itemType(item) {
   if (item.type === "card") return `card:${item.card.kind}`;
@@ -1836,6 +1894,16 @@ function itemType(item) {
     return item.state === "streaming" ? "streaming" : `message:${item.role}`;
   return "system";
 }
+function timeOver(items, index, gap) {
+  const item = items[index];
+  if (gap === null || item?.type !== "message") return void 0;
+  let before;
+  for (let i = index - 1; i >= 0 && !before; i--) {
+    const earlier = items[i];
+    if (earlier?.type === "message") before = earlier.at;
+  }
+  return item.at && (!before || Date.parse(item.at) - Date.parse(before) > (gap ?? 10) * 6e4) ? item.at : void 0;
+}
 function authorOf(item) {
   return item?.type === "message" ? item.role : null;
 }
@@ -1872,30 +1940,79 @@ var Row = /* @__PURE__ */ react.memo(function Row2(props) {
   if (props.run && Group) return /* @__PURE__ */ jsxRuntime.jsx(Group, { items: props.run });
   if (item.type === "card") return /* @__PURE__ */ jsxRuntime.jsx(CardView, { item });
   if (item.type === "system") return /* @__PURE__ */ jsxRuntime.jsx(SystemRow, { item });
-  return item.state === "streaming" ? /* @__PURE__ */ jsxRuntime.jsx(StreamingBubble, { item, showAuthor: props.showAuthor }) : /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { item, showAuthor: props.showAuthor });
+  const bubble = item.state === "streaming" ? /* @__PURE__ */ jsxRuntime.jsx(StreamingBubble, { item, showAuthor: props.showAuthor }) : /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { item, showAuthor: props.showAuthor });
+  return props.time ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MessageTime, { at: props.time }),
+    bubble
+  ] }) : bubble;
 });
+var opened = /* @__PURE__ */ new WeakSet();
+var shown = /* @__PURE__ */ new WeakMap();
+var looked = /* @__PURE__ */ new WeakMap();
 var MessageList = /* @__PURE__ */ react.memo(function MessageList2() {
-  const { store, slots, starters, handlers, imagePolicy } = useChat();
+  const {
+    store,
+    slots,
+    starters,
+    handlers,
+    imagePolicy,
+    welcomeChips,
+    messageTimes,
+    listHeader
+  } = useChat();
   const { t } = react$1.useCopy();
-  const { space } = chunk6QYDPGRS_cjs.useTheme();
-  const reducedMotion = chunk6QYDPGRS_cjs.useReducedMotion();
+  const { space } = chunkUMCOOQT6_cjs.useTheme();
+  const reducedMotion = chunkUMCOOQT6_cjs.useReducedMotion();
   const items = react$1.useConversationSelector(store, (v) => v.items);
-  usePrefetchPhotos(items, handlers.current?.prefetchImage, imagePolicy?.hosts);
-  const opening = react$1.useConversationSelector(
+  usePrefetchPhotos(
+    store,
+    items,
+    handlers.current?.prefetchImage,
+    imagePolicy?.hosts
+  );
+  const restoring = react$1.useConversationSelector(
+    store,
+    (v) => v.history === "restoring"
+  );
+  const fetching = react$1.useConversationSelector(
+    store,
+    (v) => v.status === "starting" || v.status === "connecting" || v.status === "reconnecting"
+  );
+  const live = react$1.useConversationSelector(
+    store,
+    (v) => v.status === "ready" || v.status === "sse"
+  );
+  const over = react$1.useConversationSelector(
     store,
-    (v) => v.status === "starting" || v.status === "connecting"
+    (v) => v.status === "ended" || v.status === "closed"
   );
+  const [settled, setSettled] = react.useState(null);
+  react.useEffect(() => setSettled(store), [store]);
+  const waiting = restoring || fetching || !live && !over && settled !== store;
+  if (live) opened.add(store);
   const agentName = react$1.useConversationSelector(store, (v) => v.agent.name);
   const served = react$1.useConversationSelector(store, (v) => v.welcome);
-  const welcome = react.useMemo(
-    () => served ?? (starters?.length ? {
+  const welcome = react.useMemo(() => {
+    const w = restoring ? null : served && opened.has(store) ? served : waiting ? null : served ?? {
       text: t("welcomeFallback", {
         agent: agentName ?? t("agentFallbackName")
       }),
-      chips: [...starters]
-    } : null),
-    [served, starters, t, agentName]
-  );
+      chips: starters ? [...starters] : []
+    };
+    return w && welcomeChips === false ? { ...w, chips: [] } : w;
+  }, [
+    store,
+    live,
+    restoring,
+    served,
+    waiting,
+    starters,
+    t,
+    agentName,
+    welcomeChips
+  ]);
+  if (welcome) shown.set(store, welcome);
+  const said = welcome ?? shown.get(store) ?? null;
   useAnnounceReplies(items);
   const Group = slots.CardGroup;
   const runsRef = react.useRef(/* @__PURE__ */ new Map());
@@ -1908,6 +2025,8 @@ var MessageList = /* @__PURE__ */ react.memo(function MessageList2() {
   itemsRef.current = items;
   const groupingRef = react.useRef(grouping);
   groupingRef.current = grouping;
+  const gapRef = react.useRef(messageTimes);
+  gapRef.current = messageTimes;
   const renderItem = react.useCallback(
     ({ item, index }) => /* @__PURE__ */ jsxRuntime.jsx(
       Row,
@@ -1915,7 +2034,8 @@ var MessageList = /* @__PURE__ */ react.memo(function MessageList2() {
         item,
         showAuthor: authorOf(item) !== authorOf(itemsRef.current[index - 1]),
         run: groupingRef.current?.runs.get(item.key),
-        inside: groupingRef.current?.inside.has(item.key) === true
+        inside: groupingRef.current?.inside.has(item.key) === true,
+        time: timeOver(itemsRef.current, index, gapRef.current)
       }
     ),
     []
@@ -1923,20 +2043,23 @@ var MessageList = /* @__PURE__ */ react.memo(function MessageList2() {
   const onChip = react.useCallback(
     (message) => {
       store.send(message);
-      const chip = welcome?.chips.find((c) => c.message === message);
+      const chip = said?.chips.find((c) => c.message === message);
       if (chip) handlers.current?.onChip?.(chip);
     },
-    [store, welcome, handlers]
+    [store, said, handlers]
   );
   const Empty = slots.EmptyState;
-  const empty = opening ? /* @__PURE__ */ jsxRuntime.jsx(ChatSkeleton, {}) : Empty ? /* @__PURE__ */ jsxRuntime.jsx(
-    Empty,
-    {
-      agentName: agentName ?? t("agentFallbackName"),
-      welcome,
-      onChip
-    }
-  ) : welcome ? /* @__PURE__ */ jsxRuntime.jsx(Welcome, { welcome, onChip }) : null;
+  const empty = react.useMemo(
+    () => !said ? /* @__PURE__ */ jsxRuntime.jsx(ChatSkeleton, {}) : Empty ? /* @__PURE__ */ jsxRuntime.jsx(
+      Empty,
+      {
+        agentName: agentName ?? t("agentFallbackName"),
+        welcome: said,
+        onChip
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(Welcome, { welcome: said, onChip }),
+    [said, Empty, agentName, t, onChip]
+  );
   const props = react.useMemo(
     () => ({
       data: items,
@@ -1948,30 +2071,49 @@ var MessageList = /* @__PURE__ */ react.memo(function MessageList2() {
         autoscrollToBottomThreshold: 0.2,
         animateAutoScrollToBottom: !reducedMotion
       },
+      ListHeaderComponent: listHeader ?? null,
       ListFooterComponent: /* @__PURE__ */ jsxRuntime.jsx(ActivityLine, {}),
       ListEmptyComponent: empty,
       keyboardShouldPersistTaps: "handled",
-      contentContainerStyle: { paddingVertical: space.sm }
+      contentContainerStyle: { paddingVertical: space.sm },
+      extraData: messageTimes
     }),
-    [items, renderItem, reducedMotion, empty, space.sm]
+    [
+      items,
+      renderItem,
+      reducedMotion,
+      empty,
+      space.sm,
+      messageTimes,
+      listHeader
+    ]
   );
   const List = slots.ListComponent;
-  return List ? /* @__PURE__ */ jsxRuntime.jsx(List, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(flashList.FlashList, { ...props });
+  return react.useMemo(
+    () => List ? /* @__PURE__ */ jsxRuntime.jsx(List, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(flashList.FlashList, { ...props }),
+    [List, props]
+  );
 });
-function usePrefetchPhotos(items, prefetch, hosts) {
-  const done = react.useRef(/* @__PURE__ */ new Set());
+var PREFETCH_ON_OPENING = 3;
+function usePrefetchPhotos(store, items, prefetch, hosts) {
   react.useEffect(() => {
     if (!prefetch) return;
-    for (const item of items) {
-      if (item.type !== "card") continue;
+    const seen = looked.get(store) ?? /* @__PURE__ */ new Set();
+    looked.set(store, seen);
+    let left = seen.size ? Number.POSITIVE_INFINITY : PREFETCH_ON_OPENING;
+    for (let i = items.length - 1; i >= 0 && left > 0; i--) {
+      const item = items[i];
+      if (item?.type !== "card") continue;
+      if (seen.has(item.key)) break;
+      seen.add(item.key);
       const card = item.card.card;
       const url = allowedImage(card.images?.[0]?.url ?? card.image_url, hosts);
-      if (url && !done.current.has(url)) {
-        done.current.add(url);
+      if (url) {
         prefetch(url);
+        left--;
       }
     }
-  }, [items, prefetch, hosts]);
+  }, [store, items, prefetch, hosts]);
 }
 function useAnnounceReplies(items) {
   const seen = react.useRef(void 0);
@@ -1989,12 +2131,13 @@ function useAnnounceReplies(items) {
     const author = last.role === "staff" ? t("staffLabel", {
       by: store.getSnapshot().takeover?.by || t("staffFallbackRole")
     }) : store.getSnapshot().agent.name ?? t("agentFallbackName");
-    (handlers.current?.announce ?? chunk6QYDPGRS_cjs.announce)(`${author}: ${last.text}`);
+    (handlers.current?.announce ?? chunkUMCOOQT6_cjs.announce)(`${author}: ${last.text}`);
   }, [items, t, store, handlers]);
 }
 
 exports.ActivityLine = ActivityLine;
 exports.Avatar = Avatar;
+exports.Body = Body;
 exports.Button = Button;
 exports.CardActions = CardActions;
 exports.CardCarousel = CardCarousel;
@@ -2021,6 +2164,7 @@ exports.Row = Row;
 exports.StreamingBubble = StreamingBubble;
 exports.SystemRow = SystemRow;
 exports.TimeSlotsCard = TimeSlotsCard;
+exports.Title = Title;
 exports.Welcome = Welcome;
 exports.allowedImage = allowedImage;
 exports.answerText = answerText;
@@ -2031,5 +2175,5 @@ exports.itemType = itemType;
 exports.monogram = monogram;
 exports.ratingText = ratingText;
 exports.useChat = useChat;
-//# sourceMappingURL=chunk-XAG2P447.cjs.map
-//# sourceMappingURL=chunk-XAG2P447.cjs.map
+//# sourceMappingURL=chunk-272ACDLI.cjs.map
+//# sourceMappingURL=chunk-272ACDLI.cjs.map