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

package/dist/index.js

@@ -1,12 +1,12 @@
-import { Pressable, ActivityIndicator, Text, View, Image, TextInput, AccessibilityInfo, useColorScheme, AppState, Platform, KeyboardAvoidingView } from 'react-native';
+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 } from 'react-native';
 import { createContext, memo, useCallback, useState, useRef, useMemo, useEffect, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { contrastRatio, colors, size, motion, radius, space, font, contrastProblems } from '@vinaverse/tokens';
-import { useCopy, useConversationSelector, useStreamingText, formatTimeRange, formatMoney, formatDate, bannedWordsIn, CopyProvider } from '@vinaverse/react';
 import { codePoints, MAX_TEXT, answerProblem } from '@vinaverse/client/conversation';
-import { FlashList } from '@shopify/flash-list';
 
-// src/cards/CardFrame.tsx
+// src/cards/CardCarousel.tsx
 var ChatContext = createContext(null);
 function ChatContextProvider(props) {
   return /* @__PURE__ */ jsx(ChatContext.Provider, { value: props.value, children: props.children });
@@ -55,6 +55,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 +178,20 @@ 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 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 +200,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 +243,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 +300,120 @@ 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 } = useChat();
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  const [failed, setFailed] = useState(null);
+  const photoUrl = safeImage(card.images?.[0]?.url ?? card.image_url);
+  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 photo = {
+    width: "100%",
+    aspectRatio: 1.6,
+    borderRadius: radius2.md
+  };
+  return /* @__PURE__ */ jsxs(
+    CardFrame,
+    {
+      label: [card.title, card.subtitle, rating, price, next].filter(Boolean).join(", "),
+      restored: props.restored,
+      testID: `vinaverse-card-${card.id}`,
+      children: [
+        hero ? /* @__PURE__ */ jsx(
+          Img,
+          {
+            source: { uri: hero },
+            onError: () => setFailed(hero),
+            style: { ...photo, backgroundColor: colors2.surface },
+            accessible: false,
+            testID: `vinaverse-photo-${card.id}`
+          }
+        ) : /* @__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
+        ] }),
+        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 +1282,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;
@@ -1165,6 +1298,35 @@ var CardView = memo(function CardView2(props) {
   const own = { card, 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();
@@ -1471,6 +1633,23 @@ var DisclosureBar = memo(function DisclosureBar2() {
     }
   );
 });
+function FailureActionButton(props) {
+  const { handlers, failureAction } = useChat();
+  const { t } = useCopy();
+  if (!failureAction) return null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      label: failureAction.label ?? t("talkToPerson"),
+      variant: "text",
+      onPress: () => handlers.current.failureAction?.onPress(props.state)
+    }
+  );
+}
+function FailureSlot(props) {
+  const { slot: Slot, state, Default } = props;
+  return Slot ? /* @__PURE__ */ jsx(Slot, { state, Default }) : /* @__PURE__ */ jsx(Default, { state });
+}
 function DefaultBubble(props) {
   const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
   const role = props.item.role;
@@ -1626,9 +1805,29 @@ function announce(text) {
 }
 var SystemRow = memo(function SystemRow2(props) {
   const { t } = useCopy();
-  const { store } = useChat();
-  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  const { store, slots } = useChat();
+  const conversationId = useConversationSelector(
+    store,
+    (v) => v.conversationId
+  );
   const { event, data } = props.item;
+  if (event === "turn_failed") {
+    const key = props.item.key;
+    const state = {
+      kind: "turn_failed",
+      reason: typeof data.code === "string" ? data.code : null,
+      retry: data.retry === true ? () => void store.retryTurn(key) : void 0,
+      conversationId
+    };
+    return /* @__PURE__ */ jsx(
+      FailureSlot,
+      {
+        slot: slots.Error,
+        state,
+        Default: DefaultTurnFailed
+      }
+    );
+  }
   const agent = store.getSnapshot().agent.name ?? t("agentFallbackName");
   const text = (() => {
     switch (event) {
@@ -1642,18 +1841,30 @@ var SystemRow = memo(function SystemRow2(props) {
         return data.expected_response ? t("handoffCreated", { expected: data.expected_response }) : t("handoffCreatedNoTime");
       case "flow_completed":
         return data.result === "ok" ? t("flowSent") : data.result === "failed" ? t("flowNotSent") : null;
-      case "turn_failed":
-        return t("turnFailed");
       default:
         return null;
     }
   })();
   if (!text) return null;
+  return /* @__PURE__ */ jsx(Line, { text });
+});
+function DefaultTurnFailed(props) {
+  const { t } = useCopy();
+  const { failureAction } = useChat();
+  const text = t("turnFailed");
+  if (!failureAction) return /* @__PURE__ */ jsx(Line, { text, danger: true });
+  return /* @__PURE__ */ jsxs(View, { style: { alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(Line, { text, danger: true }),
+    /* @__PURE__ */ jsx(FailureActionButton, { state: props.state })
+  ] });
+}
+function Line(props) {
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
   return /* @__PURE__ */ jsx(
     View,
     {
       accessible: true,
-      accessibilityLabel: text,
+      accessibilityLabel: props.text,
       style: {
         alignItems: "center",
         paddingHorizontal: space2.xl,
@@ -1663,17 +1874,54 @@ var SystemRow = memo(function SystemRow2(props) {
         Text,
         {
           style: {
-            color: event === "turn_failed" ? colors2.danger : colors2.textMuted,
+            color: props.danger ? colors2.danger : colors2.textMuted,
             fontSize: font2.size.sm,
             textAlign: "center"
           },
-          children: text
+          children: props.text
         }
       )
     }
   );
+}
+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 keyOf = (item) => item.key;
+var keyOf2 = (item) => item.key;
 function itemType(item) {
   if (item.type === "card") return `card:${item.card.kind}`;
   if (item.type === "message")
@@ -1683,8 +1931,39 @@ 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 });
@@ -1700,26 +1979,49 @@ var MessageList = memo(function MessageList2() {
     (v) => v.status === "starting" || v.status === "connecting"
   );
   const agentName = useConversationSelector(store, (v) => v.agent.name);
+  const welcome = useConversationSelector(store, (v) => v.welcome);
   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) => void store.send(message),
+    [store]
+  );
   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,
@@ -1757,10 +2059,23 @@ function useAnnounceReplies(items) {
 }
 var CONNECTING_DELAY = motion.bannerDelay;
 var StatusBanner = memo(function StatusBanner2() {
-  const { store } = useChat();
+  const { store, slots } = useChat();
   const { t } = useCopy();
-  const { colors: colors2, space: space2, font: font2 } = useTheme();
   const banner = useConversationSelector(store, (v) => v.banner);
+  const status = useConversationSelector(store, (v) => v.status);
+  const conversationId = useConversationSelector(
+    store,
+    (v) => v.conversationId
+  );
+  const unavailable = useMemo(
+    () => ({
+      kind: "unavailable",
+      reason: status,
+      retry: () => store.start(),
+      conversationId
+    }),
+    [store, status, conversationId]
+  );
   const [late, setLate] = useState(false);
   useEffect(() => {
     setLate(false);
@@ -1769,12 +2084,20 @@ var StatusBanner = memo(function StatusBanner2() {
     return () => clearTimeout(timer);
   }, [banner]);
   if (banner === null || banner === "connecting" && !late) return null;
+  if (banner === "unavailable")
+    return /* @__PURE__ */ jsx(
+      FailureSlot,
+      {
+        slot: slots.Unavailable,
+        state: unavailable,
+        Default: DefaultUnavailable
+      }
+    );
   const text = {
     connecting: t("bannerConnecting"),
     reconnecting: t("bannerReconnecting"),
     offline: t("bannerOffline"),
-    continued_elsewhere: t("bannerContinuedElsewhere"),
-    unavailable: t("bannerUnavailable")
+    continued_elsewhere: t("bannerContinuedElsewhere")
   }[banner];
   const action = banner === "continued_elsewhere" ? /* @__PURE__ */ jsx(
     Button,
@@ -1783,7 +2106,7 @@ var StatusBanner = memo(function StatusBanner2() {
       variant: "text",
       onPress: () => void store.continueHere()
     }
-  ) : banner === "offline" || banner === "unavailable" ? /* @__PURE__ */ jsx(
+  ) : banner === "offline" ? /* @__PURE__ */ jsx(
     Button,
     {
       label: t("tryAgain"),
@@ -1791,6 +2114,18 @@ var StatusBanner = memo(function StatusBanner2() {
       onPress: () => store.start()
     }
   ) : null;
+  return /* @__PURE__ */ jsx(Banner, { text, children: action });
+});
+function DefaultUnavailable(props) {
+  const { t } = useCopy();
+  const { retry } = props.state;
+  return /* @__PURE__ */ jsxs(Banner, { text: t("bannerUnavailable"), children: [
+    retry ? /* @__PURE__ */ jsx(Button, { label: t("tryAgain"), variant: "text", onPress: retry }) : null,
+    /* @__PURE__ */ jsx(FailureActionButton, { state: props.state })
+  ] });
+}
+function Banner(props) {
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -1812,22 +2147,35 @@ var StatusBanner = memo(function StatusBanner2() {
           Text,
           {
             style: { color: colors2.text, fontSize: font2.size.sm, flexShrink: 1 },
-            children: text
+            children: props.text
           }
         ),
-        action
+        props.children
       ]
     }
   );
-});
+}
 function VinaverseChatProvider(props) {
   const { conversation, components, agentAvatar, timeZone } = props;
   const handlers = useRef(props);
   handlers.current = props;
   const slots = useStableSlots(components);
+  const hasAction = props.failureAction !== void 0;
+  const actionLabel = props.failureAction?.label;
+  const failureAction = useMemo(
+    () => hasAction ? { label: actionLabel } : null,
+    [hasAction, actionLabel]
+  );
   const value = useMemo(
-    () => ({ store: conversation, handlers, slots, agentAvatar, timeZone }),
-    [conversation, slots, agentAvatar, timeZone]
+    () => ({
+      store: conversation,
+      handlers,
+      slots,
+      agentAvatar,
+      timeZone,
+      failureAction
+    }),
+    [conversation, slots, agentAvatar, timeZone, failureAction]
   );
   useNativeLifecycle(conversation);
   useEffect(() => {
@@ -1903,6 +2251,6 @@ function sameSlots(a, b) {
   return true;
 }
 
-export { ActivityLine, Avatar, Button, CardFrame, CardView, ChatHeader, ChatSkeleton, Composer, DefaultBubble, DefaultComposer, DefaultHeader, DisclosureBar, 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, Avatar, Button, CardActions, CardCarousel, CardFrame, CardView, ChatHeader, ChatSkeleton, Composer, DefaultBubble, DefaultComposer, DefaultHeader, DefaultTurnFailed, DefaultUnavailable, DisclosureBar, FailureActionButton, InfoCard, LinksCard, ListingCard, MessageBubble, MessageList, NextStepCard, ProposalCard, QuestionCard, Row, StatusBanner, StreamingBubble, SystemRow, ThemeProvider, TimeSlotsCard, VinaverseChat, VinaverseChatProvider, Welcome, announce, answerText, carousels, createTheme, defaultCard, fieldText, itemType, monogram, ratingText, themeProblems, useChat, useNativeLifecycle, useReducedMotion, useTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map