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

package/README.md

@@ -2,12 +2,13 @@
 
 A ready, themeable conversation with your Vinaverse agent for React Native and Expo apps. Drop it into a screen,
 give it a conversation whose session comes from your backend, and it draws everything the realtime protocol defines:
-streaming replies, cards (people, services, bookings, questions, proposals, next steps), held and unsent messages, a
+streaming replies, cards (photo cards for people and places, services, bookings, questions, proposals, next steps,
+your own help pages), held and unsent messages, a
 person from your business taking over, and every way a session ends. No native module; New Architecture; FlashList 2.3.2 or later.
 
 ```tsx
 import { createConversation } from '@vinaverse/client/conversation';
-import { VinaverseChat } from '@vinaverse/react-native';
+import { CardCarousel, VinaverseChat } from '@vinaverse/react-native';
 
 // Outside the screen: it connects early and survives navigation.
 const conversation = createConversation({
@@ -15,6 +16,8 @@ const conversation = createConversation({
   locale: 'es-US',
   deepLinkPrefixes: ['yourapp://bookings/'],
 });
+// Opt-in: a turn's listing cards in one swipeable row (without it they stack). Module level: a stable object.
+const components = { CardGroup: CardCarousel };
 
 export function AgentScreen() {
   return (
@@ -22,6 +25,7 @@ export function AgentScreen() {
       conversation={conversation}
       locale="es-US"
       theme={{ light: { primary: '#7A2E8E', personBubble: '#7A2E8E' } }}
+      components={components}
       onProposal={(card, decision) => api.decideProposal(card, decision)} // your backend, the person's token
       onOpenLink={(link) => router.push(link)}
     />
@@ -65,6 +69,12 @@ kit share one copy of `@vinaverse/client`.
 - **Background**: the kit tells the conversation when the app goes to the background and comes back (`AppState`).
   By default the connection stays, without pings; `createConversation({ closeInBackground: true, refreshSecret })`
   closes it in the background and opens it again, with a fresh secret, in the foreground. Nothing typed is lost.
+- **A session's end**: pass `expires_at` on from the session your backend created. Past it (the tenant's tool token
+  with it), the person's next message gets a new session for the same conversation from `getSession`; the old one is
+  never reopened with a fresh secret. A reconnect keeps everything drawn: the session's transcript merges by id.
+- **Modes**: a customer and a professional each get their own conversation, `createConversationsByMode`, and the
+  screen draws `conversations.select(mode)`. Each mode keeps its own history on the device, and `getSession` gets the
+  `mode` so your backend creates the session for that mode's agent.
 - **Language**: the agent answers in `subject.locale`, which your backend sets when it creates the session; the kit's
   `locale` prop is only for its own words, dates and money (and is passed to `getSession` as a hint you may ignore).
 
@@ -103,6 +113,26 @@ part as `Default`. With neither, the kit draws both as before.
 | `retry` | try again, when it can be: the person's text once more, for a turn the server allows to retry (once); a new session for `unavailable`. Undefined otherwise |
 | `conversationId` | the conversation, once a session named it: for your support records |
 
+## Listings, carousels, links and the welcome
+
+- **Professionals and spaces** draw as photo cards: the hero photo (through your `Image` slot, so `expo-image`'s cache
+  applies), the name's monogram when there is none or it fails, rating with its count, "From $45" and the next open
+  time.
+- **A carousel** for the cards a turn draws together: add the kit's `CardCarousel`. Without it they draw one under
+  another; it is opt-in so an app that does not use it does not ship it.
+
+  ```tsx
+  import { CardCarousel, VinaverseChat } from '@vinaverse/react-native';
+  const components = { Image: ExpoImage, CardGroup: CardCarousel }; // module level: a stable object
+  <VinaverseChat conversation={conversation} components={components} onOpenLink={openLink} />;
+  ```
+
+- **Links**: when your scope keeps the agent from answering, it shows your own help, support, policy, contact or
+  feedback pages. Each opens through `onOpenLink` (an https page too: your in-app browser), a deep link only when it
+  passes your deep-link prefixes.
+- **The welcome**: pass `welcome` on from the session your backend created; the kit greets an empty conversation with
+  it and its chips (no model call). A chip sends its message as the person's own. An `EmptyState` slot gets both.
+
 ## The keyboard
 
 `keyboardBehavior` keeps the composer above the keyboard: `padding` on iOS by default, nothing on Android (the window

package/dist/index.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
+var flashList = require('@shopify/flash-list');
+var react$1 = require('@vinaverse/react');
 var reactNative = require('react-native');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var tokens = require('@vinaverse/tokens');
-var react$1 = require('@vinaverse/react');
 var conversation = require('@vinaverse/client/conversation');
-var flashList = require('@shopify/flash-list');
 
-// src/cards/CardFrame.tsx
+// src/cards/CardCarousel.tsx
 var ChatContext = react.createContext(null);
 function ChatContextProvider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value: props.value, children: props.children });
@@ -57,6 +57,61 @@ function ThemeProvider(props) {
 function useTheme() {
   return react.useContext(ThemeContext);
 }
+var Button = react.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__ */ jsxRuntime.jsxs(
+    reactNative.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__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: foreground }) : null,
+        props.children ?? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              color: foreground,
+              fontSize: font2.size.md,
+              fontWeight: "500",
+              ...font2.family ? { fontFamily: font2.family } : {}
+            },
+            children: props.label
+          }
+        )
+      ]
+    }
+  );
+});
 function cardOf(held) {
   return held.card;
 }
@@ -125,64 +180,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 = react.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__ */ jsxRuntime.jsxs(
-    reactNative.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__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: foreground }) : null,
-        props.children ?? /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.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 } = react$1.useCopy();
@@ -191,7 +202,7 @@ function InfoCard(props) {
   const image = safeImage(card.image_url);
   const Img = slots.Image ?? reactNative.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 ? react$1.formatMoney(money.amount, money.currency, locale) : null;
   const price = amount && !card.price ? t("priceFrom", { price: amount }) : amount;
   const when = card.starts_at ? react$1.formatTimeRange(card.starts_at, void 0, locale, timeZone) : null;
@@ -234,27 +245,32 @@ function InfoCard(props) {
           ] })
         ] }),
         card.body ? /* @__PURE__ */ jsxRuntime.jsx(Body, { children: card.body }) : null,
-        card.badges?.length ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space2.xs }, children: card.badges.map((b) => /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.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__ */ jsxRuntime.jsx(Actions, { ...props })
+        /* @__PURE__ */ jsxRuntime.jsx(Badges, { badges: card.badges }),
+        props.restored ? null : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactNative.View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space2.xs }, children: props.badges.map((b) => /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.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;
@@ -286,6 +302,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__ */ jsxRuntime.jsxs(
+    CardFrame,
+    {
+      label: [card.title, ...links.map((l) => l.label)].join(", "),
+      restored: props.restored,
+      testID: `vinaverse-card-${card.id}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Title, { children: card.title }),
+        links.map((l) => /* @__PURE__ */ jsxRuntime.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 reactNative.Linking.openURL(l.url);
+            }
+          },
+          l.url
+        ))
+      ]
+    }
+  );
+}
+function ListingCard(props) {
+  const card = cardOf(props.card);
+  const { locale, t } = react$1.useCopy();
+  const { slots, timeZone } = 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 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;
+  const price = card.price_from ? t("priceFrom", {
+    price: react$1.formatMoney(
+      card.price_from.amount,
+      card.price_from.currency,
+      locale
+    )
+  }) : null;
+  const next = card.next_available ? t("nextAvailable", {
+    time: react$1.formatTimeRange(card.next_available, void 0, locale, timeZone)
+  }) : null;
+  const photo = {
+    width: "100%",
+    aspectRatio: 1.6,
+    borderRadius: radius2.md
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    CardFrame,
+    {
+      label: [card.title, card.subtitle, rating, price, next].filter(Boolean).join(", "),
+      restored: props.restored,
+      testID: `vinaverse-card-${card.id}`,
+      children: [
+        hero ? /* @__PURE__ */ jsxRuntime.jsx(
+          Img,
+          {
+            source: { uri: hero },
+            onError: () => setFailed(hero),
+            style: { ...photo, backgroundColor: colors2.surface },
+            accessible: false,
+            testID: `vinaverse-photo-${card.id}`
+          }
+        ) : /* @__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
+        ] }),
+        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 })
+      ]
+    }
+  );
+}
+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];
@@ -1154,7 +1284,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;
@@ -1167,6 +1300,35 @@ var CardView = react.memo(function CardView2(props) {
   const own = { card, busy, restored: props.item.restored === true };
   return Custom ? /* @__PURE__ */ jsxRuntime.jsx(Custom, { ...own, Default }) : /* @__PURE__ */ jsxRuntime.jsx(Default, { ...own });
 });
+var keyOf = (item) => item.key;
+var kindOf = (item) => item.card.kind;
+function CardCarousel(props) {
+  const { width } = reactNative.useWindowDimensions();
+  const { t } = react$1.useCopy();
+  const size3 = Math.min(Math.round(width * 0.8), 360);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      accessibilityRole: "list",
+      accessibilityLabel: t("cardsInRow", {
+        count: String(props.items.length)
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        flashList.FlashList,
+        {
+          horizontal: true,
+          data: props.items,
+          keyExtractor: keyOf,
+          getItemType: kindOf,
+          renderItem: ({ item }) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { width: size3 }, children: /* @__PURE__ */ jsxRuntime.jsx(CardView, { item }) }),
+          snapToInterval: size3,
+          decelerationRate: "fast",
+          showsHorizontalScrollIndicator: false
+        }
+      )
+    }
+  );
+}
 var ActivityLine = react.memo(function ActivityLine2() {
   const { store } = useChat();
   const { t } = react$1.useCopy();
@@ -1724,7 +1886,44 @@ function Line(props) {
     }
   );
 }
-var keyOf = (item) => item.key;
+var Welcome = react.memo(function Welcome2(props) {
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: { padding: space2.lg, gap: space2.md },
+      testID: "vinaverse-welcome",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.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__ */ jsxRuntime.jsx(reactNative.View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space2.sm }, children: props.welcome.chips.map((chip) => /* @__PURE__ */ jsxRuntime.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")
@@ -1734,8 +1933,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 = react.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__ */ jsxRuntime.jsx(Group, { items: props.run });
   if (item.type === "card") return /* @__PURE__ */ jsxRuntime.jsx(CardView, { item });
   if (item.type === "system") return /* @__PURE__ */ jsxRuntime.jsx(SystemRow, { item });
   return item.state === "streaming" ? /* @__PURE__ */ jsxRuntime.jsx(StreamingBubble, { item, showAuthor: props.showAuthor }) : /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { item, showAuthor: props.showAuthor });
@@ -1751,26 +1981,49 @@ var MessageList = react.memo(function MessageList2() {
     (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);
   useAnnounceReplies(items);
+  const Group = slots.CardGroup;
+  const runsRef = react.useRef(/* @__PURE__ */ new Map());
+  const grouping = react.useMemo(
+    () => Group ? carousels(items, runsRef.current) : null,
+    [items, Group]
+  );
+  runsRef.current = grouping?.runs ?? /* @__PURE__ */ new Map();
   const itemsRef = react.useRef(items);
   itemsRef.current = items;
+  const groupingRef = react.useRef(grouping);
+  groupingRef.current = grouping;
   const renderItem = react.useCallback(
     ({ item, index }) => /* @__PURE__ */ jsxRuntime.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 = react.useCallback(
+    (message) => void store.send(message),
+    [store]
+  );
   const Empty = slots.EmptyState;
-  const empty = opening ? /* @__PURE__ */ jsxRuntime.jsx(ChatSkeleton, {}) : Empty ? /* @__PURE__ */ jsxRuntime.jsx(Empty, { agentName: agentName ?? t("agentFallbackName") }) : null;
+  const empty = opening ? /* @__PURE__ */ jsxRuntime.jsx(ChatSkeleton, {}) : Empty ? /* @__PURE__ */ jsxRuntime.jsx(
+    Empty,
+    {
+      agentName: agentName ?? t("agentFallbackName"),
+      welcome,
+      onChip
+    }
+  ) : welcome ? /* @__PURE__ */ jsxRuntime.jsx(Welcome, { welcome, onChip }) : null;
   const props = react.useMemo(
     () => ({
       data: items,
       renderItem,
-      keyExtractor: keyOf,
+      keyExtractor: keyOf2,
       getItemType: itemType,
       maintainVisibleContentPosition: {
         startRenderingFromBottom: true,
@@ -2003,6 +2256,8 @@ function sameSlots(a, b) {
 exports.ActivityLine = ActivityLine;
 exports.Avatar = Avatar;
 exports.Button = Button;
+exports.CardActions = CardActions;
+exports.CardCarousel = CardCarousel;
 exports.CardFrame = CardFrame;
 exports.CardView = CardView;
 exports.ChatHeader = ChatHeader;
@@ -2016,6 +2271,8 @@ exports.DefaultUnavailable = DefaultUnavailable;
 exports.DisclosureBar = DisclosureBar;
 exports.FailureActionButton = FailureActionButton;
 exports.InfoCard = InfoCard;
+exports.LinksCard = LinksCard;
+exports.ListingCard = ListingCard;
 exports.MessageBubble = MessageBubble;
 exports.MessageList = MessageList;
 exports.NextStepCard = NextStepCard;
@@ -2029,12 +2286,16 @@ exports.ThemeProvider = ThemeProvider;
 exports.TimeSlotsCard = TimeSlotsCard;
 exports.VinaverseChat = VinaverseChat;
 exports.VinaverseChatProvider = VinaverseChatProvider;
+exports.Welcome = Welcome;
 exports.announce = announce;
 exports.answerText = answerText;
+exports.carousels = carousels;
 exports.createTheme = createTheme;
 exports.defaultCard = defaultCard;
 exports.fieldText = fieldText;
 exports.itemType = itemType;
+exports.monogram = monogram;
+exports.ratingText = ratingText;
 exports.themeProblems = themeProblems;
 exports.useChat = useChat;
 exports.useNativeLifecycle = useNativeLifecycle;