@vinaverse/react-native 0.1.0-alpha.3 → 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();
@@ -1722,7 +1884,44 @@ function Line(props) {
     }
   );
 }
-var keyOf = (item) => item.key;
+var Welcome = memo(function Welcome2(props) {
+  const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: { padding: space2.lg, gap: space2.md },
+      testID: "vinaverse-welcome",
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              alignSelf: "flex-start",
+              maxWidth: "85%",
+              color: colors2.agentText,
+              backgroundColor: colors2.agentBubble,
+              borderRadius: radius2.lg,
+              paddingHorizontal: space2.md,
+              paddingVertical: space2.sm,
+              fontSize: font2.size.md,
+              lineHeight: font2.size.md * font2.lineHeight
+            },
+            children: props.welcome.text
+          }
+        ),
+        props.welcome.chips.length ? /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: space2.sm }, children: props.welcome.chips.map((chip) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: chip.label,
+            onPress: () => props.onChip(chip.message)
+          },
+          chip.label
+        )) }) : null
+      ]
+    }
+  );
+});
+var keyOf2 = (item) => item.key;
 function itemType(item) {
   if (item.type === "card") return `card:${item.card.kind}`;
   if (item.type === "message")
@@ -1732,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 });
@@ -1749,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,
@@ -1998,6 +2251,6 @@ function sameSlots(a, b) {
   return true;
 }
 
-export { ActivityLine, Avatar, Button, CardFrame, CardView, ChatHeader, ChatSkeleton, Composer, DefaultBubble, DefaultComposer, DefaultHeader, DefaultTurnFailed, DefaultUnavailable, DisclosureBar, FailureActionButton, InfoCard, MessageBubble, MessageList, NextStepCard, ProposalCard, QuestionCard, Row, StatusBanner, StreamingBubble, SystemRow, ThemeProvider, TimeSlotsCard, VinaverseChat, VinaverseChatProvider, announce, answerText, createTheme, defaultCard, fieldText, itemType, themeProblems, useChat, useNativeLifecycle, useReducedMotion, useTheme };
+export { ActivityLine, 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