@vinaverse/react-native 0.0.0-stage → 0.1.0-alpha.11

package/dist/chunk-2J2LIJLW.js

@@ -0,0 +1,624 @@
+import { Button, useChat, FailureSlot, FailureActionButton, ChatContextProvider, ChatHeader, DisclosureBar, MessageList } from './chunk-KSHDF3MG.js';
+import { useTheme, useNativeLifecycle, themeProblems, ThemeProvider, useAgentSweep } from './chunk-EFEXTVIT.js';
+import { useAgentRuntime, useAgentConversation, useAgentName } from '@vinaverse/react/agent';
+export { AgentRuntimeProvider, forgetGreeting, greetedKey, useAgentConversation, useAgentFeatures, useAgentLauncher, useAgentName, useAgentProfile, useAgentRuntime, useAgentStatus, useAgentStatusState } from '@vinaverse/react/agent';
+import { useCopy, useConversationSelector, bannedWordsIn, CopyProvider } from '@vinaverse/react';
+import { useState, memo, useCallback, useMemo, useEffect, useRef } from 'react';
+import { View, TextInput, Text, Platform, KeyboardAvoidingView } from 'react-native';
+import { codePoints, MAX_TEXT } from '@vinaverse/client/conversation';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { motion } from '@vinaverse/tokens';
+
+function DefaultComposer(props) {
+  const { t, direction } = useCopy();
+  const { colors, radius, space, font, size } = useTheme();
+  const [text, setText] = useState("");
+  const length = codePoints(text);
+  const canSend = text.trim().length > 0 && length <= MAX_TEXT;
+  const send = () => {
+    if (!canSend) return;
+    props.onSend(text);
+    setText("");
+  };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "flex-end",
+        gap: space.sm,
+        paddingHorizontal: space.lg,
+        paddingVertical: space.sm,
+        borderTopWidth: 1,
+        borderTopColor: colors.divider,
+        backgroundColor: colors.background
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: text,
+            onChangeText: setText,
+            placeholder: props.placeholder,
+            placeholderTextColor: colors.textMuted,
+            accessibilityLabel: props.placeholder,
+            multiline: true,
+            maxLength: MAX_TEXT * 2,
+            testID: "vinaverse-composer-input",
+            style: {
+              flex: 1,
+              minHeight: size.touchTarget,
+              maxHeight: 140,
+              paddingHorizontal: space.md,
+              paddingVertical: space.sm,
+              borderRadius: radius.lg,
+              borderWidth: 1,
+              borderColor: colors.border,
+              color: colors.text,
+              backgroundColor: colors.surface,
+              fontSize: font.size.md,
+              textAlign: direction === "rtl" ? "right" : "left",
+              writingDirection: direction,
+              ...font.family ? { fontFamily: font.family } : {}
+            }
+          }
+        ),
+        props.responding && !text ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: t("stop"),
+            onPress: props.onStop,
+            testID: "vinaverse-stop"
+          }
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: t("send"),
+            variant: "primary",
+            disabled: !canSend,
+            onPress: send,
+            testID: "vinaverse-send"
+          }
+        )
+      ]
+    }
+  );
+}
+var Composer = /* @__PURE__ */ memo(function Composer2(props) {
+  const { store, slots } = useChat();
+  const { t } = useCopy();
+  const takeover = useConversationSelector(store, (v) => v.takeover);
+  const name = useConversationSelector(store, (v) => v.agent.name);
+  const responding = useConversationSelector(store, (v) => v.responding);
+  const { onError } = props;
+  const onSend = useCallback(
+    (text) => {
+      try {
+        store.send(text);
+      } catch (error) {
+        onError?.(error);
+      }
+    },
+    [store, onError]
+  );
+  const onStop = useCallback(() => store.cancel(), [store]);
+  const placeholder = takeover ? t("composerPlaceholderTakeover", {
+    by: takeover.by || t("staffFallbackRole")
+  }) : t("composerPlaceholder", { agent: name ?? t("agentFallbackName") });
+  const Slot = slots.Composer;
+  const own = { placeholder, responding, onSend, onStop };
+  return Slot ? /* @__PURE__ */ jsx(Slot, { ...own, Default: DefaultComposer }) : /* @__PURE__ */ jsx(DefaultComposer, { ...own });
+});
+var CONNECTING_DELAY = motion.bannerDelay;
+var StatusBanner = /* @__PURE__ */ memo(function StatusBanner2() {
+  const { store, slots } = useChat();
+  const { t } = useCopy();
+  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);
+    if (banner !== "connecting") return;
+    const timer = setTimeout(() => setLate(true), CONNECTING_DELAY);
+    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")
+  }[banner];
+  const action = banner === "continued_elsewhere" ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      label: t("continueHere"),
+      variant: "text",
+      onPress: () => void store.continueHere()
+    }
+  ) : banner === "offline" ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      label: t("tryAgain"),
+      variant: "text",
+      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, space, font } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityLiveRegion: "polite",
+      accessibilityRole: "alert",
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: space.sm,
+        paddingHorizontal: space.lg,
+        paddingVertical: space.xs,
+        backgroundColor: colors.surface,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.divider
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: { color: colors.text, fontSize: font.size.sm, flexShrink: 1 },
+            children: props.text
+          }
+        ),
+        props.children
+      ]
+    }
+  );
+}
+function VinaverseChatProvider(props) {
+  const {
+    conversation,
+    components,
+    agentAvatar,
+    timeZone,
+    starters,
+    imagePolicy
+  } = 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,
+      failureAction,
+      starters,
+      imagePolicy
+    }),
+    [
+      conversation,
+      slots,
+      agentAvatar,
+      timeZone,
+      failureAction,
+      starters,
+      imagePolicy
+    ]
+  );
+  useNativeLifecycle(conversation);
+  useEffect(() => {
+    conversation.start();
+  }, [conversation]);
+  const { onWarning, theme, copy } = props;
+  useEffect(() => {
+    if (!onWarning) return;
+    for (const problem of themeProblems(theme))
+      onWarning(`Vinaverse theme: ${problem}`, { code: "theme" });
+    for (const key of bannedWordsIn(copy ?? {}))
+      onWarning(
+        `Vinaverse copy: "${key}" says assistant, bot or crew; the copy says agent.`,
+        { code: "copy" }
+      );
+  }, [onWarning, theme, copy]);
+  return /* @__PURE__ */ jsx(CopyProvider, { locale: props.locale, copy: props.copy, children: /* @__PURE__ */ jsx(ThemeProvider, { theme: props.theme, colorScheme: props.colorScheme, children: /* @__PURE__ */ jsx(ChatContextProvider, { value, children: props.children }) }) });
+}
+function VinaverseChat(props) {
+  return /* @__PURE__ */ jsx(VinaverseChatProvider, { ...props, children: /* @__PURE__ */ jsx(
+    Layout,
+    {
+      hideHeader: props.hideHeader === true,
+      keyboardVerticalOffset: props.keyboardVerticalOffset ?? 0,
+      keyboardBehavior: props.keyboardBehavior ?? (Platform.OS === "ios" ? "padding" : "none"),
+      style: props.style,
+      onError: props.onWarning,
+      suggestion: props.suggestion ?? null,
+      suggestionTestID: props.suggestionTestID ?? "vinaverse-suggestion",
+      footer: props.footer
+    }
+  ) });
+}
+function Layout(props) {
+  const { colors } = useTheme();
+  const { direction } = useCopy();
+  const { onError } = props;
+  const reportError = useMemo(
+    () => onError ? (e) => onError(String(e), { code: "send_failed" }) : void 0,
+    [onError]
+  );
+  return /* @__PURE__ */ jsxs(
+    KeyboardAvoidingView,
+    {
+      ...props.keyboardBehavior === "none" ? { enabled: false } : { behavior: props.keyboardBehavior },
+      keyboardVerticalOffset: props.keyboardVerticalOffset,
+      style: [
+        { flex: 1, backgroundColor: colors.background, direction },
+        props.style
+      ],
+      children: [
+        props.hideHeader ? null : /* @__PURE__ */ jsx(ChatHeader, {}),
+        /* @__PURE__ */ jsx(DisclosureBar, {}),
+        /* @__PURE__ */ jsx(StatusBanner, {}),
+        /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(MessageList, {}) }),
+        props.suggestion ? /* @__PURE__ */ jsx(Suggestion, { chip: props.suggestion, testID: props.suggestionTestID }) : null,
+        /* @__PURE__ */ jsx(Composer, { ...reportError ? { onError: reportError } : {} }),
+        props.footer
+      ]
+    }
+  );
+}
+function Suggestion(props) {
+  const { store, handlers } = useChat();
+  const { space } = useTheme();
+  return /* @__PURE__ */ jsx(View, { style: { paddingHorizontal: space.lg, alignItems: "flex-start" }, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      label: props.chip.label,
+      testID: props.testID,
+      onPress: () => {
+        store.send(props.chip.message);
+        handlers.current?.onChip?.(props.chip);
+      }
+    }
+  ) });
+}
+function useStableSlots(slots) {
+  const held = useRef({});
+  const next = slots ?? {};
+  if (!sameSlots(held.current, next)) held.current = next;
+  return held.current;
+}
+function sameSlots(a, b) {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const key of keys) {
+    if (key === "cards") {
+      const ca = a.cards ?? {};
+      const cb = b.cards ?? {};
+      const kinds = /* @__PURE__ */ new Set([...Object.keys(ca), ...Object.keys(cb)]);
+      for (const kind of kinds) if (ca[kind] !== cb[kind]) return false;
+    } else if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+function AgentChat(props) {
+  const {
+    agentKey,
+    place,
+    entryPoint,
+    askAbout,
+    onContact,
+    onOpenPrivacy,
+    components,
+    agentName,
+    opener,
+    openerTestID,
+    ...chat
+  } = props;
+  const runtime = useAgentRuntime();
+  useAgentSweep(runtime);
+  const { conversation, state, startNew } = useAgentConversation(agentKey, {
+    place: place ?? null,
+    entryPoint: entryPoint ?? null
+  });
+  const store = conversation.store;
+  const spoke = useConversationSelector(
+    store,
+    (v) => v.items.some((i) => i.type === "message" && i.role === "person")
+  );
+  const { Ended, Unreachable, UnavailableScreen, Footer, ...slots } = components ?? {};
+  const copy = useMemo(
+    () => agentName ? { ...props.copy, agentFallbackName: agentName } : props.copy,
+    [agentName, props.copy]
+  );
+  const events = {
+    onOpenTarget: chat.onOpenTarget ? (target, card) => {
+      runtime.emit({
+        type: "target_opened",
+        key: conversation.key,
+        cardId: card.id,
+        kind: target.type
+      });
+      chat.onOpenTarget?.(target, card);
+    } : void 0,
+    onOpenLink: chat.onOpenLink ? (link, card) => {
+      runtime.emit({
+        type: "link_opened",
+        key: conversation.key,
+        cardId: card.id,
+        kind: card.kind
+      });
+      chat.onOpenLink?.(link, card);
+    } : void 0,
+    onChip: (chip) => {
+      runtime.emit({ type: "chip_tapped", key: conversation.key });
+      chat.onChip?.(chip);
+    }
+  };
+  const shared = {
+    ...chat,
+    ...events.onOpenTarget ? { onOpenTarget: events.onOpenTarget } : {},
+    ...events.onOpenLink ? { onOpenLink: events.onOpenLink } : {},
+    onChip: events.onChip,
+    ...copy ? { copy } : {},
+    ...onContact && !chat.failureAction ? { failureAction: { onPress: () => onContact() } } : {},
+    conversation: store,
+    components: slots
+  };
+  if (state.failure === "ended") {
+    const own = {
+      onStartNew: startNew,
+      reason: state.reason,
+      code: state.code,
+      onContact
+    };
+    return /* @__PURE__ */ jsx(VinaverseChatProvider, { ...shared, children: /* @__PURE__ */ jsx(Centered, { children: Ended ? /* @__PURE__ */ jsx(Ended, { ...own, Default: DefaultEnded }) : /* @__PURE__ */ jsx(DefaultEnded, { ...own }) }) });
+  }
+  if (state.failure === "unreachable") {
+    const own = {
+      onRetry: conversation.retry,
+      reason: state.reason,
+      onContact
+    };
+    return /* @__PURE__ */ jsx(VinaverseChatProvider, { ...shared, children: /* @__PURE__ */ jsx(Centered, { children: Unreachable ? /* @__PURE__ */ jsx(Unreachable, { ...own, Default: DefaultUnreachable }) : /* @__PURE__ */ jsx(DefaultUnreachable, { ...own }) }) });
+  }
+  if (state.failure === "unavailable") {
+    const own = {
+      reason: state.reason,
+      code: state.code,
+      onContact,
+      onRetry: conversation.retry
+    };
+    return /* @__PURE__ */ jsx(VinaverseChatProvider, { ...shared, children: /* @__PURE__ */ jsx(Centered, { children: UnavailableScreen ? /* @__PURE__ */ jsx(UnavailableScreen, { ...own, Default: DefaultUnavailableScreen }) : /* @__PURE__ */ jsx(DefaultUnavailableScreen, { ...own }) }) });
+  }
+  const offered = opener && !spoke ? opener : null;
+  return /* @__PURE__ */ jsx(
+    VinaverseChat,
+    {
+      ...shared,
+      suggestion: offered ?? (state.moved && askAbout ? { label: askAbout, message: askAbout } : null),
+      ...offered ? { suggestionTestID: openerTestID ?? "vinaverse-opener" } : {},
+      footer: Footer === null ? null : /* @__PURE__ */ jsx(
+        FooterFor,
+        {
+          store,
+          state,
+          rate: conversation.rate,
+          canRate: conversation.canRate,
+          Footer,
+          onOpenPrivacy
+        }
+      )
+    }
+  );
+}
+function FooterFor(props) {
+  const newest = useConversationSelector(props.store, newestWholeReply);
+  const turnId = newest && props.canRate(newest) ? newest : null;
+  const own = {
+    turnId,
+    rating: turnId ? props.state.ratings.get(turnId) : void 0,
+    onRate: (rating) => {
+      if (turnId) props.rate(turnId, rating);
+    },
+    onOpenPrivacy: props.onOpenPrivacy
+  };
+  const { Footer } = props;
+  return Footer ? /* @__PURE__ */ jsx(Footer, { ...own, Default: AgentFooter }) : /* @__PURE__ */ jsx(AgentFooter, { ...own });
+}
+function newestWholeReply(view) {
+  for (let i = view.items.length - 1; i >= 0; i--) {
+    const item = view.items[i];
+    if (item?.type !== "message" || item.role !== "agent") continue;
+    const whole = item.state === "sent" && !item.partial && !item.refusal && item.key.startsWith("a:");
+    return whole ? item.key.slice(2) : null;
+  }
+  return null;
+}
+function Centered(props) {
+  const { colors, space } = useTheme();
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: space.xl,
+        backgroundColor: colors.background
+      },
+      children: props.children
+    }
+  );
+}
+function Notice(props) {
+  const { colors, space, font } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "alert",
+      style: { alignItems: "center", gap: space.md },
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: colors.text,
+              fontSize: font.size.lg,
+              fontWeight: "600",
+              textAlign: "center"
+            },
+            children: props.title
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: colors.textMuted,
+              fontSize: font.size.md,
+              textAlign: "center"
+            },
+            children: props.body
+          }
+        ),
+        props.action && props.onPress ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: props.action,
+            variant: "primary",
+            onPress: props.onPress
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function DefaultEnded(props) {
+  const { t } = useCopy();
+  return /* @__PURE__ */ jsx(
+    Notice,
+    {
+      title: t("agentEnded"),
+      body: t("agentEndedBody"),
+      action: t("agentStartOver"),
+      onPress: props.onStartNew
+    }
+  );
+}
+function DefaultUnavailableScreen(props) {
+  const { t } = useCopy();
+  const name = useAgentName(t("agentFallbackName"));
+  const title = t("agentOff", { agent: name });
+  return /* @__PURE__ */ jsx(
+    Notice,
+    {
+      title: title.charAt(0).toUpperCase() + title.slice(1),
+      body: t("agentOffBody"),
+      ...props.onContact ? { action: t("talkToPerson"), onPress: props.onContact } : {}
+    }
+  );
+}
+function DefaultUnreachable(props) {
+  const { t } = useCopy();
+  const name = useAgentName(t("agentFallbackName"));
+  return /* @__PURE__ */ jsx(
+    Notice,
+    {
+      title: t("agentUnreachable", { agent: name }),
+      body: t("agentUnreachableBody"),
+      action: t("tryAgain"),
+      onPress: props.onRetry
+    }
+  );
+}
+function AgentFooter(props) {
+  const { t } = useCopy();
+  const { colors, space, font } = useTheme();
+  const muted = { color: colors.textMuted, fontSize: font.size.sm };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: space.xs,
+        paddingHorizontal: space.lg
+      },
+      children: [
+        props.turnId === null ? null : props.rating ? /* @__PURE__ */ jsx(Text, { style: muted, children: t("helpfulThanks") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { style: muted, children: t("helpful") }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              label: t("helpfulYes"),
+              variant: "text",
+              onPress: () => props.onRate("up")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              label: t("helpfulNo"),
+              variant: "text",
+              onPress: () => props.onRate("down")
+            }
+          )
+        ] }),
+        props.onOpenPrivacy ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: t("privacy"),
+            variant: "text",
+            role: "link",
+            onPress: props.onOpenPrivacy
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+export { AgentChat, AgentFooter, Composer, DefaultComposer, DefaultEnded, DefaultUnavailable, DefaultUnavailableScreen, DefaultUnreachable, StatusBanner, VinaverseChat, VinaverseChatProvider, newestWholeReply };
+//# sourceMappingURL=chunk-2J2LIJLW.js.map
+//# sourceMappingURL=chunk-2J2LIJLW.js.map