@vinaverse/react-native 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/index.js

@@ -1,12 +1,15 @@
-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 { useAgentRuntime, useAgentConversation, useAgentName, useAgentLauncher, useAgentFeatures } from '@vinaverse/react/agent';
+export { AgentRuntimeProvider, greetedKey, useAgentConversation, useAgentFeatures, useAgentLauncher, useAgentName, useAgentProfile, useAgentRuntime, useAgentStatus } from '@vinaverse/react/agent';
+import { FlashList } from '@shopify/flash-list';
+import { useCopy, useConversationSelector, useStreamingText, formatMoney, formatTimeRange, formatDate, bannedWordsIn, CopyProvider } from '@vinaverse/react';
+import { Pressable, ActivityIndicator, Text, View, Image, TextInput, AccessibilityInfo, Linking, useColorScheme, useWindowDimensions, AppState, Platform, KeyboardAvoidingView, Keyboard, Animated } from 'react-native';
+import { readCard } from '@vinaverse/client/agent';
+import { createContext, memo, useMemo, useCallback, useState, useRef, 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
+// src/index.ts
 var ChatContext = createContext(null);
 function ChatContextProvider(props) {
   return /* @__PURE__ */ jsx(ChatContext.Provider, { value: props.value, children: props.children });
@@ -55,6 +58,61 @@ function ThemeProvider(props) {
 function useTheme() {
   return useContext(ThemeContext);
 }
+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 cardOf(held) {
   return held.card;
 }
@@ -123,64 +181,26 @@ function useLink(link, held) {
   if (!link || !store.checkLink(link)) return null;
   return () => handlers.current?.onOpenLink?.(link, held);
 }
+function ratingText(valuePpm, locale) {
+  const value = valuePpm / 1e6;
+  try {
+    return new Intl.NumberFormat(locale, {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1
+    }).format(value);
+  } catch {
+    return value.toFixed(1);
+  }
+}
+function allowedImage(url, hosts) {
+  const safe = safeImage(url);
+  if (safe === null || !hosts) return safe;
+  const host = /^https:\/\/([^/:?#]+)/i.exec(safe)?.[1]?.toLowerCase();
+  return host && hosts.some((h) => h.toLowerCase() === host) ? safe : null;
+}
 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();
@@ -189,7 +209,7 @@ function InfoCard(props) {
   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 rating = card.rating ? ratingText(card.rating.value_ppm, locale) : 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;
@@ -232,27 +252,32 @@ function InfoCard(props) {
           ] })
         ] }),
         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 })
+        /* @__PURE__ */ jsx(Badges, { badges: card.badges }),
+        props.restored ? null : /* @__PURE__ */ jsx(CardActions, { ...props })
       ]
     }
   );
 }
-function Actions(props) {
+function Badges(props) {
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  if (!props.badges?.length) return null;
+  return /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space2.xs }, children: props.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
+  )) });
+}
+function CardActions(props) {
   const card = cardOf(props.card);
   const { space: space2 } = useTheme();
   if (!card.actions?.length) return null;
@@ -284,6 +309,139 @@ function Action(props) {
     }
   );
 }
+function LinksCard(props) {
+  const card = cardOf(props.card);
+  const { store, handlers } = useChat();
+  const links = (card.links ?? []).filter(
+    (l) => /^https:\/\//i.test(l.url) || store.checkLink(l.url)
+  );
+  return /* @__PURE__ */ jsxs(
+    CardFrame,
+    {
+      label: [card.title, ...links.map((l) => l.label)].join(", "),
+      restored: props.restored,
+      testID: `vinaverse-card-${card.id}`,
+      children: [
+        /* @__PURE__ */ jsx(Title, { children: card.title }),
+        links.map((l) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: l.label,
+            role: "link",
+            variant: "secondary",
+            disabled: props.restored,
+            onPress: () => {
+              const open = handlers.current?.onOpenLink;
+              if (open) open(l.url, props.card);
+              else void Linking.openURL(l.url);
+            }
+          },
+          l.url
+        ))
+      ]
+    }
+  );
+}
+function ListingCard(props) {
+  const card = cardOf(props.card);
+  const { locale, t } = useCopy();
+  const { slots, timeZone, handlers, imagePolicy } = useChat();
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  const [failed, setFailed] = useState(null);
+  const photoUrl = allowedImage(
+    card.images?.[0]?.url ?? card.image_url,
+    imagePolicy?.hosts
+  );
+  const hero = photoUrl === failed ? null : photoUrl;
+  const Img = slots.Image ?? Image;
+  const rating = card.rating ? `\u2605 ${ratingText(card.rating.value_ppm, locale)} (${card.rating.count})` : null;
+  const price = card.price_from ? t("priceFrom", {
+    price: formatMoney(
+      card.price_from.amount,
+      card.price_from.currency,
+      locale
+    )
+  }) : null;
+  const next = card.next_available ? t("nextAvailable", {
+    time: formatTimeRange(card.next_available, void 0, locale, timeZone)
+  }) : null;
+  const ref = card.ref;
+  const onOpenTarget = handlers.current?.onOpenTarget;
+  const open = ref && onOpenTarget && !props.restored ? () => onOpenTarget({ type: ref.type, id: ref.id }, props.card) : null;
+  const photo = {
+    width: "100%",
+    aspectRatio: imagePolicy?.aspectRatio ?? 1.6,
+    borderRadius: radius2.md
+  };
+  const top = /* @__PURE__ */ jsxs(Fragment, { children: [
+    hero ? /* @__PURE__ */ jsx(
+      Img,
+      {
+        source: { uri: hero },
+        onError: () => setFailed(hero),
+        style: { ...photo, backgroundColor: colors2.surface },
+        accessible: false,
+        testID: `vinaverse-photo-${card.id}`
+      }
+    ) : imagePolicy?.Placeholder ? /* @__PURE__ */ jsx(View, { style: photo, testID: `vinaverse-placeholder-${card.id}`, children: /* @__PURE__ */ jsx(imagePolicy.Placeholder, { title: card.title }) }) : /* @__PURE__ */ jsx(
+      View,
+      {
+        accessible: false,
+        importantForAccessibility: "no-hide-descendants",
+        testID: `vinaverse-monogram-${card.id}`,
+        style: {
+          ...photo,
+          backgroundColor: colors2.surface,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: colors2.textMuted,
+              fontSize: font2.size.xl,
+              fontWeight: "600"
+            },
+            children: monogram(card.title)
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(View, { style: { gap: space2.xxs }, children: [
+      /* @__PURE__ */ jsx(Title, { numberOfLines: 2, children: card.title }),
+      card.subtitle ? /* @__PURE__ */ jsx(Body, { muted: true, children: card.subtitle }) : null,
+      rating || price ? /* @__PURE__ */ jsx(Body, { muted: true, children: [rating, price].filter(Boolean).join(" \xB7 ") }) : null
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    CardFrame,
+    {
+      label: [card.title, card.subtitle, rating, price, next].filter(Boolean).join(", "),
+      restored: props.restored,
+      testID: `vinaverse-card-${card.id}`,
+      children: [
+        open ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "link",
+            accessibilityLabel: card.title,
+            onPress: open,
+            style: { gap: space2.sm },
+            testID: `vinaverse-open-${card.id}`,
+            children: top
+          }
+        ) : top,
+        card.body ? /* @__PURE__ */ jsx(Body, { children: card.body }) : null,
+        /* @__PURE__ */ jsx(Badges, { badges: next ? [next, ...card.badges ?? []] : card.badges }),
+        props.restored ? null : /* @__PURE__ */ jsx(CardActions, { ...props })
+      ]
+    }
+  );
+}
+function monogram(title) {
+  return title.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => [...w][0]?.toUpperCase() ?? "").join("");
+}
 function NextStepCard(props) {
   const card = cardOf(props.card);
   const action = card.actions?.[0];
@@ -1152,7 +1310,10 @@ var DEFAULTS = {
   proposal: ProposalCard,
   question: QuestionCard,
   next_step: NextStepCard,
-  time_slots: TimeSlotsCard
+  time_slots: TimeSlotsCard,
+  professional: ListingCard,
+  workspace: ListingCard,
+  links: LinksCard
 };
 function defaultCard(kind) {
   return DEFAULTS[kind] ?? InfoCard;
@@ -1162,9 +1323,39 @@ var CardView = memo(function CardView2(props) {
   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 };
+  const read = useMemo(() => readCard(card.card), [card]);
+  const own = { card, read, busy, restored: props.item.restored === true };
   return Custom ? /* @__PURE__ */ jsx(Custom, { ...own, Default }) : /* @__PURE__ */ jsx(Default, { ...own });
 });
+var keyOf = (item) => item.key;
+var kindOf = (item) => item.card.kind;
+function CardCarousel(props) {
+  const { width } = useWindowDimensions();
+  const { t } = useCopy();
+  const size3 = Math.min(Math.round(width * 0.8), 360);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "list",
+      accessibilityLabel: t("cardsInRow", {
+        count: String(props.items.length)
+      }),
+      children: /* @__PURE__ */ jsx(
+        FlashList,
+        {
+          horizontal: true,
+          data: props.items,
+          keyExtractor: keyOf,
+          getItemType: kindOf,
+          renderItem: ({ item }) => /* @__PURE__ */ jsx(View, { style: { width: size3 }, children: /* @__PURE__ */ jsx(CardView, { item }) }),
+          snapToInterval: size3,
+          decelerationRate: "fast",
+          showsHorizontalScrollIndicator: false
+        }
+      )
+    }
+  );
+}
 var ActivityLine = memo(function ActivityLine2() {
   const { store } = useChat();
   const { t } = useCopy();
@@ -1187,6 +1378,38 @@ var ActivityLine = memo(function ActivityLine2() {
     }
   );
 });
+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 Avatar = memo(function Avatar2(props) {
   const { colors: colors2, size: size3, font: font2 } = useTheme();
   const { slots } = useChat();
@@ -1299,37 +1522,6 @@ var ChatHeader = memo(function ChatHeader2() {
   };
   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();
@@ -1471,23 +1663,37 @@ var DisclosureBar = memo(function DisclosureBar2() {
     }
   );
 });
-function FailureActionButton(props) {
-  const { handlers, failureAction } = useChat();
-  const { t } = useCopy();
-  if (!failureAction) return null;
-  return /* @__PURE__ */ jsx(
-    Button,
+var ChatSkeleton = memo(function ChatSkeleton2() {
+  const { colors: colors2, radius: radius2, space: space2 } = useTheme();
+  const row = (width, end) => /* @__PURE__ */ jsx(
+    View,
     {
-      label: failureAction.label ?? t("talkToPerson"),
-      variant: "text",
-      onPress: () => handlers.current.failureAction?.onPress(props.state)
+      style: {
+        alignSelf: end ? "flex-end" : "flex-start",
+        width,
+        height: 40,
+        borderRadius: radius2.lg,
+        backgroundColor: colors2.surface,
+        marginHorizontal: space2.lg,
+        marginTop: space2.md
+      }
     }
   );
-}
-function FailureSlot(props) {
-  const { slot: Slot, state, Default } = props;
-  return Slot ? /* @__PURE__ */ jsx(Slot, { state, Default }) : /* @__PURE__ */ jsx(Default, { state });
-}
+  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 DefaultBubble(props) {
   const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
   const role = props.item.role;
@@ -1609,37 +1815,22 @@ function Frame(props) {
     }
   );
 }
-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 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 announce(text) {
-  if (text) AccessibilityInfo.announceForAccessibility(text);
+function FailureSlot(props) {
+  const { slot: Slot, state, Default } = props;
+  return Slot ? /* @__PURE__ */ jsx(Slot, { state, Default }) : /* @__PURE__ */ jsx(Default, { state });
 }
 var SystemRow = memo(function SystemRow2(props) {
   const { t } = useCopy();
@@ -1722,7 +1913,44 @@ function Line(props) {
     }
   );
 }
-var keyOf = (item) => item.key;
+var Welcome = memo(function Welcome2(props) {
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: { padding: space2.lg, gap: space2.md },
+      testID: "vinaverse-welcome",
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              alignSelf: "flex-start",
+              maxWidth: "85%",
+              color: colors2.agentText,
+              backgroundColor: colors2.agentBubble,
+              borderRadius: radius2.lg,
+              paddingHorizontal: space2.md,
+              paddingVertical: space2.sm,
+              fontSize: font2.size.md,
+              lineHeight: font2.size.md * font2.lineHeight
+            },
+            children: props.welcome.text
+          }
+        ),
+        props.welcome.chips.length ? /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space2.sm }, children: props.welcome.chips.map((chip) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: chip.label,
+            onPress: () => props.onChip(chip.message)
+          },
+          chip.label
+        )) }) : null
+      ]
+    }
+  );
+});
+var keyOf2 = (item) => item.key;
 function itemType(item) {
   if (item.type === "card") return `card:${item.card.kind}`;
   if (item.type === "message")
@@ -1732,43 +1960,111 @@ function itemType(item) {
 function authorOf(item) {
   return item?.type === "message" ? item.role : null;
 }
+function carousels(items, previous) {
+  const runs = /* @__PURE__ */ new Map();
+  const inside = /* @__PURE__ */ new Set();
+  const groupOf = (item) => {
+    if (item?.type !== "card") return null;
+    const group = item.card.card.group;
+    return group?.layout === "carousel" && typeof group.id === "string" ? group.id : null;
+  };
+  for (let i = 0; i < items.length; i++) {
+    const id = groupOf(items[i]);
+    if (id === null) continue;
+    let end = i + 1;
+    while (end < items.length && groupOf(items[end]) === id) end++;
+    if (end - i > 1) {
+      const run = items.slice(i, end);
+      const key = run[0]?.key;
+      const before = previous.get(key);
+      runs.set(
+        key,
+        before && before.length === run.length && before.every((c, n) => c === run[n]) ? before : run
+      );
+      for (const card of run.slice(1)) inside.add(card.key);
+    }
+    i = end - 1;
+  }
+  return { runs, inside };
+}
 var Row = memo(function Row2(props) {
   const { item } = props;
+  const { slots } = useChat();
+  const Group = slots.CardGroup;
+  if (props.inside) return null;
+  if (props.run && Group) return /* @__PURE__ */ jsx(Group, { items: props.run });
   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 { store, slots, starters, handlers, imagePolicy } = useChat();
   const { t } = useCopy();
   const { space: space2 } = useTheme();
   const reducedMotion = useReducedMotion();
   const items = useConversationSelector(store, (v) => v.items);
+  usePrefetchPhotos(items, handlers.current?.prefetchImage, imagePolicy?.hosts);
   const opening = useConversationSelector(
     store,
     (v) => v.status === "starting" || v.status === "connecting"
   );
   const agentName = useConversationSelector(store, (v) => v.agent.name);
+  const served = useConversationSelector(store, (v) => v.welcome);
+  const welcome = useMemo(
+    () => served ?? (starters?.length ? {
+      text: t("welcomeFallback", {
+        agent: agentName ?? t("agentFallbackName")
+      }),
+      chips: [...starters]
+    } : null),
+    [served, starters, t, agentName]
+  );
   useAnnounceReplies(items);
+  const Group = slots.CardGroup;
+  const runsRef = useRef(/* @__PURE__ */ new Map());
+  const grouping = useMemo(
+    () => Group ? carousels(items, runsRef.current) : null,
+    [items, Group]
+  );
+  runsRef.current = grouping?.runs ?? /* @__PURE__ */ new Map();
   const itemsRef = useRef(items);
   itemsRef.current = items;
+  const groupingRef = useRef(grouping);
+  groupingRef.current = grouping;
   const renderItem = useCallback(
     ({ item, index }) => /* @__PURE__ */ jsx(
       Row,
       {
         item,
-        showAuthor: authorOf(item) !== authorOf(itemsRef.current[index - 1])
+        showAuthor: authorOf(item) !== authorOf(itemsRef.current[index - 1]),
+        run: groupingRef.current?.runs.get(item.key),
+        inside: groupingRef.current?.inside.has(item.key) === true
       }
     ),
     []
   );
+  const onChip = useCallback(
+    (message) => {
+      store.send(message);
+      const chip = welcome?.chips.find((c) => c.message === message);
+      if (chip) handlers.current?.onChip?.(chip);
+    },
+    [store, welcome, handlers]
+  );
   const Empty = slots.EmptyState;
-  const empty = opening ? /* @__PURE__ */ jsx(ChatSkeleton, {}) : Empty ? /* @__PURE__ */ jsx(Empty, { agentName: agentName ?? t("agentFallbackName") }) : null;
+  const empty = opening ? /* @__PURE__ */ jsx(ChatSkeleton, {}) : Empty ? /* @__PURE__ */ jsx(
+    Empty,
+    {
+      agentName: agentName ?? t("agentFallbackName"),
+      welcome,
+      onChip
+    }
+  ) : welcome ? /* @__PURE__ */ jsx(Welcome, { welcome, onChip }) : null;
   const props = useMemo(
     () => ({
       data: items,
       renderItem,
-      keyExtractor: keyOf,
+      keyExtractor: keyOf2,
       getItemType: itemType,
       maintainVisibleContentPosition: {
         startRenderingFromBottom: true,
@@ -1785,10 +2081,25 @@ var MessageList = memo(function MessageList2() {
   const List = slots.ListComponent;
   return List ? /* @__PURE__ */ jsx(List, { ...props }) : /* @__PURE__ */ jsx(FlashList, { ...props });
 });
+function usePrefetchPhotos(items, prefetch, hosts) {
+  const done = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    if (!prefetch) return;
+    for (const item of items) {
+      if (item.type !== "card") continue;
+      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);
+        prefetch(url);
+      }
+    }
+  }, [items, prefetch, hosts]);
+}
 function useAnnounceReplies(items) {
   const seen = useRef(void 0);
   const { t } = useCopy();
-  const { store } = useChat();
+  const { store, handlers } = useChat();
   useEffect(() => {
     const last = items.at(-1);
     if (seen.current === void 0) {
@@ -1801,8 +2112,8 @@ function useAnnounceReplies(items) {
     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]);
+    (handlers.current?.announce ?? announce)(`${author}: ${last.text}`);
+  }, [items, t, store, handlers]);
 }
 var CONNECTING_DELAY = motion.bannerDelay;
 var StatusBanner = memo(function StatusBanner2() {
@@ -1903,7 +2214,14 @@ function Banner(props) {
   );
 }
 function VinaverseChatProvider(props) {
-  const { conversation, components, agentAvatar, timeZone } = props;
+  const {
+    conversation,
+    components,
+    agentAvatar,
+    timeZone,
+    starters,
+    imagePolicy
+  } = props;
   const handlers = useRef(props);
   handlers.current = props;
   const slots = useStableSlots(components);
@@ -1920,9 +2238,19 @@ function VinaverseChatProvider(props) {
       slots,
       agentAvatar,
       timeZone,
-      failureAction
+      failureAction,
+      starters,
+      imagePolicy
     }),
-    [conversation, slots, agentAvatar, timeZone, failureAction]
+    [
+      conversation,
+      slots,
+      agentAvatar,
+      timeZone,
+      failureAction,
+      starters,
+      imagePolicy
+    ]
   );
   useNativeLifecycle(conversation);
   useEffect(() => {
@@ -1948,7 +2276,9 @@ function VinaverseChat(props) {
       keyboardVerticalOffset: props.keyboardVerticalOffset ?? 0,
       keyboardBehavior: props.keyboardBehavior ?? (Platform.OS === "ios" ? "padding" : "none"),
       style: props.style,
-      onError: props.onWarning
+      onError: props.onWarning,
+      suggestion: props.suggestion ?? null,
+      footer: props.footer
     }
   ) });
 }
@@ -1974,11 +2304,27 @@ function Layout(props) {
         /* @__PURE__ */ jsx(DisclosureBar, {}),
         /* @__PURE__ */ jsx(StatusBanner, {}),
         /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(MessageList, {}) }),
-        /* @__PURE__ */ jsx(Composer, { ...reportError ? { onError: reportError } : {} })
+        props.suggestion ? /* @__PURE__ */ jsx(Suggestion, { chip: props.suggestion }) : null,
+        /* @__PURE__ */ jsx(Composer, { ...reportError ? { onError: reportError } : {} }),
+        props.footer
       ]
     }
   );
 }
+function Suggestion(props) {
+  const { store, handlers } = useChat();
+  const { space: space2 } = useTheme();
+  return /* @__PURE__ */ jsx(View, { style: { paddingHorizontal: space2.lg, alignItems: "flex-start" }, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      label: props.chip.label,
+      onPress: () => {
+        store.send(props.chip.message);
+        handlers.current?.onChip?.(props.chip);
+      }
+    }
+  ) });
+}
 function useStableSlots(slots) {
   const held = useRef({});
   const next = slots ?? {};
@@ -1997,7 +2343,590 @@ function sameSlots(a, b) {
   }
   return true;
 }
+function AgentChat(props) {
+  const {
+    agentKey,
+    place,
+    entryPoint,
+    askAbout,
+    onContact,
+    onOpenPrivacy,
+    components,
+    agentName,
+    opener,
+    ...chat
+  } = props;
+  const runtime = useAgentRuntime();
+  const { conversation, state, startNew } = useAgentConversation(agentKey, {
+    place: place ?? null,
+    entryPoint: entryPoint ?? null
+  });
+  const store = conversation.store;
+  const spoke = useConversationSelector(
+    store,
+    (v) => v.items.some((i) => i.type === "message" && i.role === "person")
+  );
+  const { Ended, Unreachable, UnavailableScreen, Footer, ...slots } = components ?? {};
+  const copy = useMemo(
+    () => agentName ? { ...props.copy, agentFallbackName: agentName } : props.copy,
+    [agentName, props.copy]
+  );
+  const events = {
+    onOpenTarget: chat.onOpenTarget ? (target, card) => {
+      runtime.emit({
+        type: "target_opened",
+        key: conversation.key,
+        cardId: card.id,
+        kind: target.type
+      });
+      chat.onOpenTarget?.(target, card);
+    } : void 0,
+    onOpenLink: chat.onOpenLink ? (link, card) => {
+      runtime.emit({
+        type: "link_opened",
+        key: conversation.key,
+        cardId: card.id,
+        kind: card.kind
+      });
+      chat.onOpenLink?.(link, card);
+    } : void 0,
+    onChip: (chip) => {
+      runtime.emit({ type: "chip_tapped", key: conversation.key });
+      chat.onChip?.(chip);
+    }
+  };
+  const shared = {
+    ...chat,
+    ...events.onOpenTarget ? { onOpenTarget: events.onOpenTarget } : {},
+    ...events.onOpenLink ? { onOpenLink: events.onOpenLink } : {},
+    onChip: events.onChip,
+    ...copy ? { copy } : {},
+    ...onContact && !chat.failureAction ? { failureAction: { onPress: () => onContact() } } : {},
+    conversation: store,
+    components: slots
+  };
+  if (state.failure === "ended")
+    return /* @__PURE__ */ jsx(VinaverseChatProvider, { ...shared, children: /* @__PURE__ */ jsx(Centered, { children: Ended ? /* @__PURE__ */ jsx(
+      Ended,
+      {
+        onStartNew: startNew,
+        code: state.code,
+        Default: DefaultEnded
+      }
+    ) : /* @__PURE__ */ jsx(DefaultEnded, { onStartNew: startNew, code: state.code }) }) });
+  if (state.failure === "unreachable")
+    return /* @__PURE__ */ jsx(VinaverseChatProvider, { ...shared, children: /* @__PURE__ */ jsx(Centered, { children: Unreachable ? /* @__PURE__ */ jsx(
+      Unreachable,
+      {
+        onRetry: conversation.retry,
+        reason: state.reason,
+        Default: DefaultUnreachable
+      }
+    ) : /* @__PURE__ */ jsx(
+      DefaultUnreachable,
+      {
+        onRetry: conversation.retry,
+        reason: state.reason
+      }
+    ) }) });
+  if (state.failure === "unavailable") {
+    const own = {
+      reason: state.reason,
+      code: state.code,
+      onContact,
+      onRetry: conversation.retry
+    };
+    return /* @__PURE__ */ jsx(VinaverseChatProvider, { ...shared, children: /* @__PURE__ */ jsx(Centered, { children: UnavailableScreen ? /* @__PURE__ */ jsx(UnavailableScreen, { ...own, Default: DefaultUnavailableScreen }) : /* @__PURE__ */ jsx(DefaultUnavailableScreen, { ...own }) }) });
+  }
+  return /* @__PURE__ */ jsx(
+    VinaverseChat,
+    {
+      ...shared,
+      suggestion: opener && !spoke ? opener : state.moved && askAbout ? { label: askAbout, message: askAbout } : null,
+      footer: Footer === null ? null : /* @__PURE__ */ jsx(
+        FooterFor,
+        {
+          store,
+          state,
+          rate: conversation.rate,
+          Footer,
+          onOpenPrivacy
+        }
+      )
+    }
+  );
+}
+function FooterFor(props) {
+  const turnId = useConversationSelector(props.store, newestWholeReply);
+  const own = {
+    turnId,
+    rating: turnId ? props.state.ratings.get(turnId) : void 0,
+    onRate: (rating) => {
+      if (turnId) props.rate(turnId, rating);
+    },
+    onOpenPrivacy: props.onOpenPrivacy
+  };
+  const { Footer } = props;
+  return Footer ? /* @__PURE__ */ jsx(Footer, { ...own, Default: AgentFooter }) : /* @__PURE__ */ jsx(AgentFooter, { ...own });
+}
+function newestWholeReply(view) {
+  for (let i = view.items.length - 1; i >= 0; i--) {
+    const item = view.items[i];
+    if (item?.type !== "message" || item.role !== "agent") continue;
+    const whole = item.state === "sent" && !item.partial && !item.refusal && item.key.startsWith("a:");
+    return whole ? item.key.slice(2) : null;
+  }
+  return null;
+}
+function Centered(props) {
+  const { colors: colors2, space: space2 } = useTheme();
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: space2.xl,
+        backgroundColor: colors2.background
+      },
+      children: props.children
+    }
+  );
+}
+function Notice(props) {
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "alert",
+      style: { alignItems: "center", gap: space2.md },
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: colors2.text,
+              fontSize: font2.size.lg,
+              fontWeight: "600",
+              textAlign: "center"
+            },
+            children: props.title
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: colors2.textMuted,
+              fontSize: font2.size.md,
+              textAlign: "center"
+            },
+            children: props.body
+          }
+        ),
+        props.action && props.onPress ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: props.action,
+            variant: "primary",
+            onPress: props.onPress
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function DefaultEnded(props) {
+  const { t } = useCopy();
+  return /* @__PURE__ */ jsx(
+    Notice,
+    {
+      title: t("agentEnded"),
+      body: t("agentEndedBody"),
+      action: t("agentStartOver"),
+      onPress: props.onStartNew
+    }
+  );
+}
+function DefaultUnavailableScreen(props) {
+  const { t } = useCopy();
+  const name = useAgentName(t("agentFallbackName"));
+  const title = t("agentOff", { agent: name });
+  return /* @__PURE__ */ jsx(
+    Notice,
+    {
+      title: title.charAt(0).toUpperCase() + title.slice(1),
+      body: t("agentOffBody"),
+      ...props.onContact ? { action: t("talkToPerson"), onPress: props.onContact } : {}
+    }
+  );
+}
+function DefaultUnreachable(props) {
+  const { t } = useCopy();
+  const name = useAgentName(t("agentFallbackName"));
+  return /* @__PURE__ */ jsx(
+    Notice,
+    {
+      title: t("agentUnreachable", { agent: name }),
+      body: t("agentUnreachableBody"),
+      action: t("tryAgain"),
+      onPress: props.onRetry
+    }
+  );
+}
+function AgentFooter(props) {
+  const { t } = useCopy();
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  const muted = { color: colors2.textMuted, fontSize: font2.size.sm };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: space2.xs,
+        paddingHorizontal: space2.lg
+      },
+      children: [
+        props.turnId === null ? null : props.rating ? /* @__PURE__ */ jsx(Text, { style: muted, children: t("helpfulThanks") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { style: muted, children: t("helpful") }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              label: t("helpfulYes"),
+              variant: "text",
+              onPress: () => props.onRate("up")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              label: t("helpfulNo"),
+              variant: "text",
+              onPress: () => props.onRate("down")
+            }
+          )
+        ] }),
+        props.onOpenPrivacy ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: t("privacy"),
+            variant: "text",
+            role: "link",
+            onPress: props.onOpenPrivacy
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var LAUNCHER_SIZE = 56;
+function AgentLauncher(props) {
+  return /* @__PURE__ */ jsx(CopyProvider, { locale: props.locale, copy: props.copy, children: /* @__PURE__ */ jsx(ThemeProvider, { theme: props.theme, colorScheme: props.colorScheme, children: /* @__PURE__ */ jsx(Launcher, { ...props }) }) });
+}
+function useKeyboardShown() {
+  const [shown, setShown] = useState(false);
+  useEffect(() => {
+    const show = Keyboard.addListener("keyboardDidShow", () => setShown(true));
+    const hide = Keyboard.addListener("keyboardDidHide", () => setShown(false));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+  return shown;
+}
+function Launcher(props) {
+  const { t } = useCopy();
+  const name = useAgentName(t("agentFallbackName"));
+  const keyboard = useKeyboardShown();
+  const reducedMotion = useReducedMotion();
+  const { route = null, routes, mode } = props;
+  const visible = props.hidden !== true && !(keyboard && props.hideWithKeyboard !== false) && (!routes || route !== null && routes.includes(route));
+  const launcher = useAgentLauncher({
+    subject: props.subject,
+    mode,
+    visible,
+    onOpen: () => props.onOpen({ route, mode }),
+    ...props.storage ? { storage: props.storage } : {},
+    ...props.storageKey ? { storageKey: props.storageKey } : {},
+    ...props.delayMs === void 0 ? {} : { delayMs: props.delayMs }
+  });
+  const text = typeof props.greeting === "function" ? props.greeting(mode) : props.greeting ?? t("launcherGreeting", { agent: name });
+  const say = props.announce ?? announce;
+  const said = useRef(false);
+  useEffect(() => {
+    if (!launcher.greets) {
+      said.current = false;
+      return;
+    }
+    if (said.current) return;
+    said.current = true;
+    say(text);
+  }, [launcher.greets, text, say]);
+  if (!launcher.shows) return null;
+  const edge = props.placement?.edge ?? "right";
+  const look = props.appearance ?? {};
+  const greeting = {
+    text,
+    closeLabel: t("close"),
+    onOpen: launcher.open,
+    onClose: launcher.dismiss,
+    tail: look.tail !== false,
+    edge
+  };
+  const button = {
+    label: t("launcherOpen", { agent: name }),
+    name,
+    onPress: launcher.open,
+    Mark: props.Mark,
+    ring: look.ring ?? null,
+    shadow: look.shadow !== false
+  };
+  const { Greeting, Button: Button3, Entrance } = props.components ?? {};
+  const enter = (part, children) => Entrance ? /* @__PURE__ */ jsx(
+    Entrance,
+    {
+      part,
+      reducedMotion,
+      Default: LauncherEntrance,
+      children
+    }
+  ) : /* @__PURE__ */ jsx(LauncherEntrance, { part, reducedMotion, children });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      pointerEvents: "box-none",
+      style: [
+        {
+          position: "absolute",
+          bottom: props.placement?.bottom ?? 16,
+          [edge]: props.placement?.inset ?? 16,
+          alignItems: edge === "right" ? "flex-end" : "flex-start",
+          gap: 8
+        },
+        props.style
+      ],
+      testID: "vinaverse-launcher",
+      children: [
+        launcher.greets ? enter(
+          "greeting",
+          Greeting ? /* @__PURE__ */ jsx(Greeting, { ...greeting, Default: LauncherGreeting }) : /* @__PURE__ */ jsx(LauncherGreeting, { ...greeting })
+        ) : null,
+        enter(
+          "button",
+          Button3 ? /* @__PURE__ */ jsx(Button3, { ...button, Default: LauncherButton }) : /* @__PURE__ */ jsx(LauncherButton, { ...button })
+        )
+      ]
+    }
+  );
+}
+function LauncherEntrance(props) {
+  const { motion: motion3 } = useTheme();
+  const shown = useRef(new Animated.Value(props.reducedMotion ? 1 : 0)).current;
+  useEffect(() => {
+    if (props.reducedMotion) {
+      shown.setValue(1);
+      return;
+    }
+    const run = Animated.timing(shown, {
+      toValue: 1,
+      duration: motion3.normal,
+      useNativeDriver: true
+    });
+    run.start();
+    return () => run.stop();
+  }, [shown, props.reducedMotion, motion3.normal]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      pointerEvents: "box-none",
+      style: {
+        opacity: shown,
+        transform: [
+          {
+            scale: shown.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0.9, 1]
+            })
+          }
+        ]
+      },
+      testID: `vinaverse-launcher-entrance-${props.part}`,
+      children: props.children
+    }
+  );
+}
+function LauncherGreeting(props) {
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        maxWidth: 296,
+        flexDirection: "row",
+        alignItems: "flex-start",
+        borderRadius: radius2.lg,
+        backgroundColor: colors2.text
+      },
+      testID: "vinaverse-launcher-greeting",
+      children: [
+        props.tail ? /* @__PURE__ */ jsx(
+          View,
+          {
+            accessible: false,
+            style: {
+              position: "absolute",
+              bottom: -5,
+              [props.edge]: LAUNCHER_SIZE / 2 - 6,
+              width: 12,
+              height: 12,
+              backgroundColor: colors2.text,
+              transform: [{ rotate: "45deg" }]
+            },
+            testID: "vinaverse-launcher-tail"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: props.text,
+            onPress: props.onOpen,
+            style: {
+              flexShrink: 1,
+              paddingVertical: space2.sm,
+              paddingLeft: space2.md
+            },
+            children: /* @__PURE__ */ jsx(Text, { style: { color: colors2.background, fontSize: font2.size.md }, children: props.text })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: props.closeLabel,
+            onPress: props.onClose,
+            style: {
+              minWidth: 44,
+              minHeight: 44,
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            testID: "vinaverse-launcher-close",
+            children: /* @__PURE__ */ jsx(Text, { style: { color: colors2.background, fontSize: font2.size.md }, children: "\xD7" })
+          }
+        )
+      ]
+    }
+  );
+}
+function LauncherButton(props) {
+  const { colors: colors2, font: font2 } = useTheme();
+  const { Mark, ring } = props;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: props.label,
+      onPress: props.onPress,
+      style: ({ pressed }) => ({
+        width: LAUNCHER_SIZE,
+        height: LAUNCHER_SIZE,
+        borderRadius: LAUNCHER_SIZE / 2,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: colors2.primary,
+        opacity: pressed ? 0.85 : 1,
+        ...ring ? { borderWidth: ring.width, borderColor: ring.color } : {},
+        ...props.shadow ? {
+          elevation: 6,
+          shadowColor: "#000",
+          shadowOpacity: 0.2,
+          shadowRadius: 8,
+          shadowOffset: { width: 0, height: 3 }
+        } : {}
+      }),
+      testID: "vinaverse-launcher-button",
+      children: Mark ? /* @__PURE__ */ jsx(Mark, { size: 34, color: colors2.onPrimary }) : /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: {
+            color: colors2.onPrimary,
+            fontSize: font2.size.lg,
+            fontWeight: "600"
+          },
+          children: (props.name.trim()[0] ?? "?").toUpperCase()
+        }
+      )
+    }
+  );
+}
+function AskAboutRow(props) {
+  return /* @__PURE__ */ jsx(CopyProvider, { locale: props.locale, copy: props.copy, children: /* @__PURE__ */ jsx(ThemeProvider, { theme: props.theme, colorScheme: props.colorScheme, children: /* @__PURE__ */ jsx(Row3, { ...props }) }) });
+}
+function Row3(props) {
+  const { t } = useCopy();
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  const name = useAgentName(t("agentFallbackName"));
+  const { available } = useAgentFeatures();
+  const [shows, setShows] = useState(null);
+  if (shows === null && available) setShows(true);
+  if (!shows) return null;
+  const { Mark } = props;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: props.body ? `${props.title}. ${props.body}` : props.title,
+      onPress: props.onPress,
+      style: ({ pressed }) => ({
+        flexDirection: "row",
+        alignItems: "center",
+        gap: space2.md,
+        padding: space2.md,
+        borderRadius: radius2.lg,
+        backgroundColor: colors2.surface,
+        opacity: pressed ? 0.85 : 1
+      }),
+      testID: "vinaverse-ask-about",
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: 36,
+              height: 36,
+              borderRadius: 18,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: colors2.primary
+            },
+            children: Mark ? /* @__PURE__ */ jsx(Mark, { size: 22, color: colors2.onPrimary }) : /* @__PURE__ */ jsx(Text, { style: { color: colors2.onPrimary, fontWeight: "600" }, children: (name.trim()[0] ?? "?").toUpperCase() })
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: { flex: 1, gap: space2.xxs }, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                color: colors2.text,
+                fontSize: font2.size.md,
+                fontWeight: "600"
+              },
+              children: props.title
+            }
+          ),
+          props.body ? /* @__PURE__ */ jsx(Text, { style: { color: colors2.textMuted, fontSize: font2.size.sm }, children: props.body }) : null
+        ] }),
+        /* @__PURE__ */ jsx(Text, { style: { color: colors2.textMuted, fontSize: font2.size.lg }, children: "\u203A" })
+      ]
+    }
+  );
+}
 
-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 };
+export { ActivityLine, AgentChat, AgentFooter, AgentLauncher, AskAboutRow, Avatar, Button, CardActions, CardCarousel, CardFrame, CardView, ChatHeader, ChatSkeleton, Composer, DefaultBubble, DefaultComposer, DefaultEnded, DefaultHeader, DefaultTurnFailed, DefaultUnavailable, DefaultUnavailableScreen, DefaultUnreachable, DisclosureBar, FailureActionButton, InfoCard, LAUNCHER_SIZE, LauncherButton, LauncherEntrance, LauncherGreeting, LinksCard, ListingCard, MessageBubble, MessageList, NextStepCard, ProposalCard, QuestionCard, Row, StatusBanner, StreamingBubble, SystemRow, ThemeProvider, TimeSlotsCard, VinaverseChat, VinaverseChatProvider, Welcome, allowedImage, announce, answerText, carousels, createTheme, defaultCard, fieldText, itemType, monogram, newestWholeReply, ratingText, themeProblems, useChat, useKeyboardShown, useNativeLifecycle, useReducedMotion, useTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map