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

package/dist/index.cjs

@@ -1,14 +1,16 @@
 'use strict';
 
+var agent = require('@vinaverse/react/agent');
 var flashList = require('@shopify/flash-list');
 var react$1 = require('@vinaverse/react');
 var reactNative = require('react-native');
+var agent$1 = require('@vinaverse/client/agent');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var tokens = require('@vinaverse/tokens');
 var conversation = require('@vinaverse/client/conversation');
 
-// src/cards/CardCarousel.tsx
+// src/index.ts
 var ChatContext = react.createContext(null);
 function ChatContextProvider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value: props.value, children: props.children });
@@ -191,6 +193,12 @@ function ratingText(valuePpm, locale) {
     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;
 }
@@ -338,10 +346,13 @@ function LinksCard(props) {
 function ListingCard(props) {
   const card = cardOf(props.card);
   const { locale, t } = react$1.useCopy();
-  const { slots, timeZone } = useChat();
+  const { slots, timeZone, handlers, imagePolicy } = useChat();
   const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
   const [failed, setFailed] = react.useState(null);
-  const photoUrl = safeImage(card.images?.[0]?.url ?? card.image_url);
+  const photoUrl = allowedImage(
+    card.images?.[0]?.url ?? card.image_url,
+    imagePolicy?.hosts
+  );
   const hero = photoUrl === failed ? null : photoUrl;
   const Img = slots.Image ?? reactNative.Image;
   const rating = card.rating ? `\u2605 ${ratingText(card.rating.value_ppm, locale)} (${card.rating.count})` : null;
@@ -355,11 +366,55 @@ function ListingCard(props) {
   const next = card.next_available ? t("nextAvailable", {
     time: react$1.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: 1.6,
+    aspectRatio: imagePolicy?.aspectRatio ?? 1.6,
     borderRadius: radius2.md
   };
+  const top = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    hero ? /* @__PURE__ */ jsxRuntime.jsx(
+      Img,
+      {
+        source: { uri: hero },
+        onError: () => setFailed(hero),
+        style: { ...photo, backgroundColor: colors2.surface },
+        accessible: false,
+        testID: `vinaverse-photo-${card.id}`
+      }
+    ) : imagePolicy?.Placeholder ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: photo, testID: `vinaverse-placeholder-${card.id}`, children: /* @__PURE__ */ jsxRuntime.jsx(imagePolicy.Placeholder, { title: card.title }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        accessible: false,
+        importantForAccessibility: "no-hide-descendants",
+        testID: `vinaverse-monogram-${card.id}`,
+        style: {
+          ...photo,
+          backgroundColor: colors2.surface,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              color: colors2.textMuted,
+              fontSize: font2.size.xl,
+              fontWeight: "600"
+            },
+            children: monogram(card.title)
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { gap: space2.xxs }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Title, { numberOfLines: 2, children: card.title }),
+      card.subtitle ? /* @__PURE__ */ jsxRuntime.jsx(Body, { muted: true, children: card.subtitle }) : null,
+      rating || price ? /* @__PURE__ */ jsxRuntime.jsx(Body, { muted: true, children: [rating, price].filter(Boolean).join(" \xB7 ") }) : null
+    ] })
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     CardFrame,
     {
@@ -367,45 +422,17 @@ function ListingCard(props) {
       restored: props.restored,
       testID: `vinaverse-card-${card.id}`,
       children: [
-        hero ? /* @__PURE__ */ jsxRuntime.jsx(
-          Img,
+        open ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
           {
-            source: { uri: hero },
-            onError: () => setFailed(hero),
-            style: { ...photo, backgroundColor: colors2.surface },
-            accessible: false,
-            testID: `vinaverse-photo-${card.id}`
+            accessibilityRole: "link",
+            accessibilityLabel: card.title,
+            onPress: open,
+            style: { gap: space2.sm },
+            testID: `vinaverse-open-${card.id}`,
+            children: top
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.View,
-          {
-            accessible: false,
-            importantForAccessibility: "no-hide-descendants",
-            testID: `vinaverse-monogram-${card.id}`,
-            style: {
-              ...photo,
-              backgroundColor: colors2.surface,
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.Text,
-              {
-                style: {
-                  color: colors2.textMuted,
-                  fontSize: font2.size.xl,
-                  fontWeight: "600"
-                },
-                children: monogram(card.title)
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { gap: space2.xxs }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Title, { numberOfLines: 2, children: card.title }),
-          card.subtitle ? /* @__PURE__ */ jsxRuntime.jsx(Body, { muted: true, children: card.subtitle }) : null,
-          rating || price ? /* @__PURE__ */ jsxRuntime.jsx(Body, { muted: true, children: [rating, price].filter(Boolean).join(" \xB7 ") }) : null
-        ] }),
+        ) : top,
         card.body ? /* @__PURE__ */ jsxRuntime.jsx(Body, { children: card.body }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(Badges, { badges: next ? [next, ...card.badges ?? []] : card.badges }),
         props.restored ? null : /* @__PURE__ */ jsxRuntime.jsx(CardActions, { ...props })
@@ -1297,7 +1324,8 @@ var CardView = react.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 = react.useMemo(() => agent$1.readCard(card.card), [card]);
+  const own = { card, read, busy, restored: props.item.restored === true };
   return Custom ? /* @__PURE__ */ jsxRuntime.jsx(Custom, { ...own, Default }) : /* @__PURE__ */ jsxRuntime.jsx(Default, { ...own });
 });
 var keyOf = (item) => item.key;
@@ -1351,6 +1379,38 @@ var ActivityLine = react.memo(function ActivityLine2() {
     }
   );
 });
+function useNativeLifecycle(store) {
+  react.useEffect(() => {
+    const apply = (state) => store.setForeground(state === "active");
+    apply(reactNative.AppState.currentState);
+    const subscription = reactNative.AppState.addEventListener("change", apply);
+    return () => subscription.remove();
+  }, [store]);
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = react.useState(false);
+  react.useEffect(() => {
+    let live = true;
+    reactNative.AccessibilityInfo.isReduceMotionEnabled().then(
+      (value) => {
+        if (live) setReduced(value);
+      },
+      () => void 0
+    );
+    const subscription = reactNative.AccessibilityInfo.addEventListener(
+      "reduceMotionChanged",
+      setReduced
+    );
+    return () => {
+      live = false;
+      subscription.remove();
+    };
+  }, []);
+  return reduced;
+}
+function announce(text) {
+  if (text) reactNative.AccessibilityInfo.announceForAccessibility(text);
+}
 var Avatar = react.memo(function Avatar2(props) {
   const { colors: colors2, size: size3, font: font2 } = useTheme();
   const { slots } = useChat();
@@ -1463,37 +1523,6 @@ var ChatHeader = react.memo(function ChatHeader2() {
   };
   return Header ? /* @__PURE__ */ jsxRuntime.jsx(Header, { ...props, Default: DefaultHeader }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultHeader, { ...props });
 });
-var ChatSkeleton = react.memo(function ChatSkeleton2() {
-  const { colors: colors2, radius: radius2, space: space2 } = useTheme();
-  const row = (width, end) => /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.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__ */ jsxRuntime.jsxs(
-    reactNative.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 } = react$1.useCopy();
   const { colors: colors2, radius: radius2, space: space2, font: font2, size: size3 } = useTheme();
@@ -1635,23 +1664,37 @@ var DisclosureBar = react.memo(function DisclosureBar2() {
     }
   );
 });
-function FailureActionButton(props) {
-  const { handlers, failureAction } = useChat();
-  const { t } = react$1.useCopy();
-  if (!failureAction) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
+var ChatSkeleton = react.memo(function ChatSkeleton2() {
+  const { colors: colors2, radius: radius2, space: space2 } = useTheme();
+  const row = (width, end) => /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.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__ */ jsxRuntime.jsx(Slot, { state, Default }) : /* @__PURE__ */ jsxRuntime.jsx(Default, { state });
-}
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.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;
@@ -1773,37 +1816,22 @@ function Frame(props) {
     }
   );
 }
-function useNativeLifecycle(store) {
-  react.useEffect(() => {
-    const apply = (state) => store.setForeground(state === "active");
-    apply(reactNative.AppState.currentState);
-    const subscription = reactNative.AppState.addEventListener("change", apply);
-    return () => subscription.remove();
-  }, [store]);
-}
-function useReducedMotion() {
-  const [reduced, setReduced] = react.useState(false);
-  react.useEffect(() => {
-    let live = true;
-    reactNative.AccessibilityInfo.isReduceMotionEnabled().then(
-      (value) => {
-        if (live) setReduced(value);
-      },
-      () => void 0
-    );
-    const subscription = reactNative.AccessibilityInfo.addEventListener(
-      "reduceMotionChanged",
-      setReduced
-    );
-    return () => {
-      live = false;
-      subscription.remove();
-    };
-  }, []);
-  return reduced;
+function FailureActionButton(props) {
+  const { handlers, failureAction } = useChat();
+  const { t } = react$1.useCopy();
+  if (!failureAction) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      label: failureAction.label ?? t("talkToPerson"),
+      variant: "text",
+      onPress: () => handlers.current.failureAction?.onPress(props.state)
+    }
+  );
 }
-function announce(text) {
-  if (text) reactNative.AccessibilityInfo.announceForAccessibility(text);
+function FailureSlot(props) {
+  const { slot: Slot, state, Default } = props;
+  return Slot ? /* @__PURE__ */ jsxRuntime.jsx(Slot, { state, Default }) : /* @__PURE__ */ jsxRuntime.jsx(Default, { state });
 }
 var SystemRow = react.memo(function SystemRow2(props) {
   const { t } = react$1.useCopy();
@@ -1971,17 +1999,27 @@ var Row = react.memo(function Row2(props) {
   return item.state === "streaming" ? /* @__PURE__ */ jsxRuntime.jsx(StreamingBubble, { item, showAuthor: props.showAuthor }) : /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { item, showAuthor: props.showAuthor });
 });
 var MessageList = react.memo(function MessageList2() {
-  const { store, slots } = useChat();
+  const { store, slots, starters, handlers, imagePolicy } = useChat();
   const { t } = react$1.useCopy();
   const { space: space2 } = useTheme();
   const reducedMotion = useReducedMotion();
   const items = react$1.useConversationSelector(store, (v) => v.items);
+  usePrefetchPhotos(items, handlers.current?.prefetchImage, imagePolicy?.hosts);
   const opening = react$1.useConversationSelector(
     store,
     (v) => v.status === "starting" || v.status === "connecting"
   );
   const agentName = react$1.useConversationSelector(store, (v) => v.agent.name);
-  const welcome = react$1.useConversationSelector(store, (v) => v.welcome);
+  const served = react$1.useConversationSelector(store, (v) => v.welcome);
+  const welcome = react.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 = react.useRef(/* @__PURE__ */ new Map());
@@ -2007,8 +2045,12 @@ var MessageList = react.memo(function MessageList2() {
     []
   );
   const onChip = react.useCallback(
-    (message) => void store.send(message),
-    [store]
+    (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__ */ jsxRuntime.jsx(ChatSkeleton, {}) : Empty ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -2040,10 +2082,25 @@ var MessageList = react.memo(function MessageList2() {
   const List = slots.ListComponent;
   return List ? /* @__PURE__ */ jsxRuntime.jsx(List, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(flashList.FlashList, { ...props });
 });
+function usePrefetchPhotos(items, prefetch, hosts) {
+  const done = react.useRef(/* @__PURE__ */ new Set());
+  react.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 = react.useRef(void 0);
   const { t } = react$1.useCopy();
-  const { store } = useChat();
+  const { store, handlers } = useChat();
   react.useEffect(() => {
     const last = items.at(-1);
     if (seen.current === void 0) {
@@ -2056,8 +2113,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 = tokens.motion.bannerDelay;
 var StatusBanner = react.memo(function StatusBanner2() {
@@ -2158,7 +2215,14 @@ function Banner(props) {
   );
 }
 function VinaverseChatProvider(props) {
-  const { conversation, components, agentAvatar, timeZone } = props;
+  const {
+    conversation,
+    components,
+    agentAvatar,
+    timeZone,
+    starters,
+    imagePolicy
+  } = props;
   const handlers = react.useRef(props);
   handlers.current = props;
   const slots = useStableSlots(components);
@@ -2175,9 +2239,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);
   react.useEffect(() => {
@@ -2203,7 +2277,9 @@ function VinaverseChat(props) {
       keyboardVerticalOffset: props.keyboardVerticalOffset ?? 0,
       keyboardBehavior: props.keyboardBehavior ?? (reactNative.Platform.OS === "ios" ? "padding" : "none"),
       style: props.style,
-      onError: props.onWarning
+      onError: props.onWarning,
+      suggestion: props.suggestion ?? null,
+      footer: props.footer
     }
   ) });
 }
@@ -2229,11 +2305,27 @@ function Layout(props) {
         /* @__PURE__ */ jsxRuntime.jsx(DisclosureBar, {}),
         /* @__PURE__ */ jsxRuntime.jsx(StatusBanner, {}),
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(MessageList, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Composer, { ...reportError ? { onError: reportError } : {} })
+        props.suggestion ? /* @__PURE__ */ jsxRuntime.jsx(Suggestion, { chip: props.suggestion }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(Composer, { ...reportError ? { onError: reportError } : {} }),
+        props.footer
       ]
     }
   );
 }
+function Suggestion(props) {
+  const { store, handlers } = useChat();
+  const { space: space2 } = useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { paddingHorizontal: space2.lg, alignItems: "flex-start" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      label: props.chip.label,
+      onPress: () => {
+        store.send(props.chip.message);
+        handlers.current?.onChip?.(props.chip);
+      }
+    }
+  ) });
+}
 function useStableSlots(slots) {
   const held = react.useRef({});
   const next = slots ?? {};
@@ -2252,8 +2344,631 @@ function sameSlots(a, b) {
   }
   return true;
 }
+function AgentChat(props) {
+  const {
+    agentKey,
+    place,
+    entryPoint,
+    askAbout,
+    onContact,
+    onOpenPrivacy,
+    components,
+    agentName,
+    opener,
+    ...chat
+  } = props;
+  const runtime = agent.useAgentRuntime();
+  const { conversation, state, startNew } = agent.useAgentConversation(agentKey, {
+    place: place ?? null,
+    entryPoint: entryPoint ?? null
+  });
+  const store = conversation.store;
+  const spoke = react$1.useConversationSelector(
+    store,
+    (v) => v.items.some((i) => i.type === "message" && i.role === "person")
+  );
+  const { Ended, Unreachable, UnavailableScreen, Footer, ...slots } = components ?? {};
+  const copy = react.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__ */ jsxRuntime.jsx(VinaverseChatProvider, { ...shared, children: /* @__PURE__ */ jsxRuntime.jsx(Centered, { children: Ended ? /* @__PURE__ */ jsxRuntime.jsx(
+      Ended,
+      {
+        onStartNew: startNew,
+        code: state.code,
+        Default: DefaultEnded
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(DefaultEnded, { onStartNew: startNew, code: state.code }) }) });
+  if (state.failure === "unreachable")
+    return /* @__PURE__ */ jsxRuntime.jsx(VinaverseChatProvider, { ...shared, children: /* @__PURE__ */ jsxRuntime.jsx(Centered, { children: Unreachable ? /* @__PURE__ */ jsxRuntime.jsx(
+      Unreachable,
+      {
+        onRetry: conversation.retry,
+        reason: state.reason,
+        Default: DefaultUnreachable
+      }
+    ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(VinaverseChatProvider, { ...shared, children: /* @__PURE__ */ jsxRuntime.jsx(Centered, { children: UnavailableScreen ? /* @__PURE__ */ jsxRuntime.jsx(UnavailableScreen, { ...own, Default: DefaultUnavailableScreen }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultUnavailableScreen, { ...own }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    VinaverseChat,
+    {
+      ...shared,
+      suggestion: opener && !spoke ? opener : state.moved && askAbout ? { label: askAbout, message: askAbout } : null,
+      footer: Footer === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+        FooterFor,
+        {
+          store,
+          state,
+          rate: conversation.rate,
+          Footer,
+          onOpenPrivacy
+        }
+      )
+    }
+  );
+}
+function FooterFor(props) {
+  const turnId = react$1.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__ */ jsxRuntime.jsx(Footer, { ...own, Default: AgentFooter }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    reactNative.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__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      accessibilityRole: "alert",
+      style: { alignItems: "center", gap: space2.md },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              color: colors2.text,
+              fontSize: font2.size.lg,
+              fontWeight: "600",
+              textAlign: "center"
+            },
+            children: props.title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              color: colors2.textMuted,
+              fontSize: font2.size.md,
+              textAlign: "center"
+            },
+            children: props.body
+          }
+        ),
+        props.action && props.onPress ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            label: props.action,
+            variant: "primary",
+            onPress: props.onPress
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function DefaultEnded(props) {
+  const { t } = react$1.useCopy();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Notice,
+    {
+      title: t("agentEnded"),
+      body: t("agentEndedBody"),
+      action: t("agentStartOver"),
+      onPress: props.onStartNew
+    }
+  );
+}
+function DefaultUnavailableScreen(props) {
+  const { t } = react$1.useCopy();
+  const name = agent.useAgentName(t("agentFallbackName"));
+  const title = t("agentOff", { agent: name });
+  return /* @__PURE__ */ jsxRuntime.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 } = react$1.useCopy();
+  const name = agent.useAgentName(t("agentFallbackName"));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Notice,
+    {
+      title: t("agentUnreachable", { agent: name }),
+      body: t("agentUnreachableBody"),
+      action: t("tryAgain"),
+      onPress: props.onRetry
+    }
+  );
+}
+function AgentFooter(props) {
+  const { t } = react$1.useCopy();
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  const muted = { color: colors2.textMuted, fontSize: font2.size.sm };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: space2.xs,
+        paddingHorizontal: space2.lg
+      },
+      children: [
+        props.turnId === null ? null : props.rating ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: muted, children: t("helpfulThanks") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: muted, children: t("helpful") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              label: t("helpfulYes"),
+              variant: "text",
+              onPress: () => props.onRate("up")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              label: t("helpfulNo"),
+              variant: "text",
+              onPress: () => props.onRate("down")
+            }
+          )
+        ] }),
+        props.onOpenPrivacy ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            label: t("privacy"),
+            variant: "text",
+            role: "link",
+            onPress: props.onOpenPrivacy
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var LAUNCHER_SIZE = 56;
+function AgentLauncher(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.CopyProvider, { locale: props.locale, copy: props.copy, children: /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { theme: props.theme, colorScheme: props.colorScheme, children: /* @__PURE__ */ jsxRuntime.jsx(Launcher, { ...props }) }) });
+}
+function useKeyboardShown() {
+  const [shown, setShown] = react.useState(false);
+  react.useEffect(() => {
+    const show = reactNative.Keyboard.addListener("keyboardDidShow", () => setShown(true));
+    const hide = reactNative.Keyboard.addListener("keyboardDidHide", () => setShown(false));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+  return shown;
+}
+function Launcher(props) {
+  const { t } = react$1.useCopy();
+  const name = agent.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 = agent.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 = react.useRef(false);
+  react.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__ */ jsxRuntime.jsx(
+    Entrance,
+    {
+      part,
+      reducedMotion,
+      Default: LauncherEntrance,
+      children
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(LauncherEntrance, { part, reducedMotion, children });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.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__ */ jsxRuntime.jsx(Greeting, { ...greeting, Default: LauncherGreeting }) : /* @__PURE__ */ jsxRuntime.jsx(LauncherGreeting, { ...greeting })
+        ) : null,
+        enter(
+          "button",
+          Button3 ? /* @__PURE__ */ jsxRuntime.jsx(Button3, { ...button, Default: LauncherButton }) : /* @__PURE__ */ jsxRuntime.jsx(LauncherButton, { ...button })
+        )
+      ]
+    }
+  );
+}
+function LauncherEntrance(props) {
+  const { motion: motion3 } = useTheme();
+  const shown = react.useRef(new reactNative.Animated.Value(props.reducedMotion ? 1 : 0)).current;
+  react.useEffect(() => {
+    if (props.reducedMotion) {
+      shown.setValue(1);
+      return;
+    }
+    const run = reactNative.Animated.timing(shown, {
+      toValue: 1,
+      duration: motion3.normal,
+      useNativeDriver: true
+    });
+    run.start();
+    return () => run.stop();
+  }, [shown, props.reducedMotion, motion3.normal]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.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__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: {
+        maxWidth: 296,
+        flexDirection: "row",
+        alignItems: "flex-start",
+        borderRadius: radius2.lg,
+        backgroundColor: colors2.text
+      },
+      testID: "vinaverse-launcher-greeting",
+      children: [
+        props.tail ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.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__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: props.text,
+            onPress: props.onOpen,
+            style: {
+              flexShrink: 1,
+              paddingVertical: space2.sm,
+              paddingLeft: space2.md
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors2.background, fontSize: font2.size.md }, children: props.text })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: props.closeLabel,
+            onPress: props.onClose,
+            style: {
+              minWidth: 44,
+              minHeight: 44,
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            testID: "vinaverse-launcher-close",
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.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__ */ jsxRuntime.jsx(
+    reactNative.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__ */ jsxRuntime.jsx(Mark, { size: 34, color: colors2.onPrimary }) : /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            color: colors2.onPrimary,
+            fontSize: font2.size.lg,
+            fontWeight: "600"
+          },
+          children: (props.name.trim()[0] ?? "?").toUpperCase()
+        }
+      )
+    }
+  );
+}
+function AskAboutRow(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.CopyProvider, { locale: props.locale, copy: props.copy, children: /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { theme: props.theme, colorScheme: props.colorScheme, children: /* @__PURE__ */ jsxRuntime.jsx(Row3, { ...props }) }) });
+}
+function Row3(props) {
+  const { t } = react$1.useCopy();
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  const name = agent.useAgentName(t("agentFallbackName"));
+  const { available } = agent.useAgentFeatures();
+  const [shows, setShows] = react.useState(null);
+  if (shows === null && available) setShows(true);
+  if (!shows) return null;
+  const { Mark } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.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__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: {
+              width: 36,
+              height: 36,
+              borderRadius: 18,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: colors2.primary
+            },
+            children: Mark ? /* @__PURE__ */ jsxRuntime.jsx(Mark, { size: 22, color: colors2.onPrimary }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors2.onPrimary, fontWeight: "600" }, children: (name.trim()[0] ?? "?").toUpperCase() })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flex: 1, gap: space2.xxs }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              style: {
+                color: colors2.text,
+                fontSize: font2.size.md,
+                fontWeight: "600"
+              },
+              children: props.title
+            }
+          ),
+          props.body ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors2.textMuted, fontSize: font2.size.sm }, children: props.body }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors2.textMuted, fontSize: font2.size.lg }, children: "\u203A" })
+      ]
+    }
+  );
+}
 
+Object.defineProperty(exports, "AgentRuntimeProvider", {
+  enumerable: true,
+  get: function () { return agent.AgentRuntimeProvider; }
+});
+Object.defineProperty(exports, "greetedKey", {
+  enumerable: true,
+  get: function () { return agent.greetedKey; }
+});
+Object.defineProperty(exports, "useAgentConversation", {
+  enumerable: true,
+  get: function () { return agent.useAgentConversation; }
+});
+Object.defineProperty(exports, "useAgentFeatures", {
+  enumerable: true,
+  get: function () { return agent.useAgentFeatures; }
+});
+Object.defineProperty(exports, "useAgentLauncher", {
+  enumerable: true,
+  get: function () { return agent.useAgentLauncher; }
+});
+Object.defineProperty(exports, "useAgentName", {
+  enumerable: true,
+  get: function () { return agent.useAgentName; }
+});
+Object.defineProperty(exports, "useAgentProfile", {
+  enumerable: true,
+  get: function () { return agent.useAgentProfile; }
+});
+Object.defineProperty(exports, "useAgentRuntime", {
+  enumerable: true,
+  get: function () { return agent.useAgentRuntime; }
+});
+Object.defineProperty(exports, "useAgentStatus", {
+  enumerable: true,
+  get: function () { return agent.useAgentStatus; }
+});
 exports.ActivityLine = ActivityLine;
+exports.AgentChat = AgentChat;
+exports.AgentFooter = AgentFooter;
+exports.AgentLauncher = AgentLauncher;
+exports.AskAboutRow = AskAboutRow;
 exports.Avatar = Avatar;
 exports.Button = Button;
 exports.CardActions = CardActions;
@@ -2265,12 +2980,19 @@ exports.ChatSkeleton = ChatSkeleton;
 exports.Composer = Composer;
 exports.DefaultBubble = DefaultBubble;
 exports.DefaultComposer = DefaultComposer;
+exports.DefaultEnded = DefaultEnded;
 exports.DefaultHeader = DefaultHeader;
 exports.DefaultTurnFailed = DefaultTurnFailed;
 exports.DefaultUnavailable = DefaultUnavailable;
+exports.DefaultUnavailableScreen = DefaultUnavailableScreen;
+exports.DefaultUnreachable = DefaultUnreachable;
 exports.DisclosureBar = DisclosureBar;
 exports.FailureActionButton = FailureActionButton;
 exports.InfoCard = InfoCard;
+exports.LAUNCHER_SIZE = LAUNCHER_SIZE;
+exports.LauncherButton = LauncherButton;
+exports.LauncherEntrance = LauncherEntrance;
+exports.LauncherGreeting = LauncherGreeting;
 exports.LinksCard = LinksCard;
 exports.ListingCard = ListingCard;
 exports.MessageBubble = MessageBubble;
@@ -2287,6 +3009,7 @@ exports.TimeSlotsCard = TimeSlotsCard;
 exports.VinaverseChat = VinaverseChat;
 exports.VinaverseChatProvider = VinaverseChatProvider;
 exports.Welcome = Welcome;
+exports.allowedImage = allowedImage;
 exports.announce = announce;
 exports.answerText = answerText;
 exports.carousels = carousels;
@@ -2295,9 +3018,11 @@ exports.defaultCard = defaultCard;
 exports.fieldText = fieldText;
 exports.itemType = itemType;
 exports.monogram = monogram;
+exports.newestWholeReply = newestWholeReply;
 exports.ratingText = ratingText;
 exports.themeProblems = themeProblems;
 exports.useChat = useChat;
+exports.useKeyboardShown = useKeyboardShown;
 exports.useNativeLifecycle = useNativeLifecycle;
 exports.useReducedMotion = useReducedMotion;
 exports.useTheme = useTheme;