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

package/README.md

@@ -76,8 +76,33 @@ kit share one copy of `@vinaverse/client`.
 | `onOpenLink(link, card)` | a card's link (it already passed the deep-link rule): route by the page it names |
 | `onCardAction(card, action)` | a card action without a link (also sent to the session) |
 | `onPickPhoto(question, card)` | a photo question: pick, upload to your backend, return `{ upload_ref }` |
+| `failureAction` | `{ label?, onPress(state) }`: a way out on a failed turn and on "couldn't connect" ([When the agent fails](#when-the-agent-fails)) |
 | `onWarning(message)` | development warnings: a hard-to-read theme, copy that says "assistant" |
 
+## When the agent fails
+
+Two failures need a way out for the person: a turn that failed before any reply ("Something went wrong.") and no
+session to talk to ("Couldn't connect.", with "Try again"). Give one action for both, drawn as a button by the kit's
+own parts, so a person is always the way out:
+
+```tsx
+<VinaverseChat
+  conversation={conversation}
+  failureAction={{ onPress: (state) => openSupport(state.conversationId) }} // "Talk to a person", in the person's language
+/>
+```
+
+`label` replaces "Talk to a person" (the copy's `talkToPerson`, which `copy` can also change). Or replace either part:
+`components.Error` (the failed turn) and `components.Unavailable` (the banner) each get the `state` and the kit's own
+part as `Default`. With neither, the kit draws both as before.
+
+| `state` | |
+|---|---|
+| `kind` | `turn_failed` or `unavailable` |
+| `reason` | the turn's error code (`internal`, `timeout`, …), or `unavailable` / `unauthorized` |
+| `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 |
+
 ## The keyboard
 
 `keyboardBehavior` keeps the composer above the keyboard: `padding` on iOS by default, nothing on Android (the window

package/dist/index.cjs

@@ -1473,6 +1473,23 @@ var DisclosureBar = react.memo(function DisclosureBar2() {
     }
   );
 });
+function FailureActionButton(props) {
+  const { handlers, failureAction } = useChat();
+  const { t } = react$1.useCopy();
+  if (!failureAction) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      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__ */ jsxRuntime.jsx(Slot, { state, Default }) : /* @__PURE__ */ jsxRuntime.jsx(Default, { state });
+}
 function DefaultBubble(props) {
   const { colors: colors2, radius: radius2, space: space2, font: font2 } = useTheme();
   const role = props.item.role;
@@ -1628,9 +1645,29 @@ function announce(text) {
 }
 var SystemRow = react.memo(function SystemRow2(props) {
   const { t } = react$1.useCopy();
-  const { store } = useChat();
-  const { colors: colors2, space: space2, font: font2 } = useTheme();
+  const { store, slots } = useChat();
+  const conversationId = react$1.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__ */ jsxRuntime.jsx(
+      FailureSlot,
+      {
+        slot: slots.Error,
+        state,
+        Default: DefaultTurnFailed
+      }
+    );
+  }
   const agent = store.getSnapshot().agent.name ?? t("agentFallbackName");
   const text = (() => {
     switch (event) {
@@ -1644,18 +1681,30 @@ var SystemRow = react.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__ */ jsxRuntime.jsx(Line, { text });
+});
+function DefaultTurnFailed(props) {
+  const { t } = react$1.useCopy();
+  const { failureAction } = useChat();
+  const text = t("turnFailed");
+  if (!failureAction) return /* @__PURE__ */ jsxRuntime.jsx(Line, { text, danger: true });
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Line, { text, danger: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(FailureActionButton, { state: props.state })
+  ] });
+}
+function Line(props) {
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
       accessible: true,
-      accessibilityLabel: text,
+      accessibilityLabel: props.text,
       style: {
         alignItems: "center",
         paddingHorizontal: space2.xl,
@@ -1665,16 +1714,16 @@ var SystemRow = react.memo(function SystemRow2(props) {
         reactNative.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 keyOf = (item) => item.key;
 function itemType(item) {
   if (item.type === "card") return `card:${item.card.kind}`;
@@ -1759,10 +1808,23 @@ function useAnnounceReplies(items) {
 }
 var CONNECTING_DELAY = tokens.motion.bannerDelay;
 var StatusBanner = react.memo(function StatusBanner2() {
-  const { store } = useChat();
+  const { store, slots } = useChat();
   const { t } = react$1.useCopy();
-  const { colors: colors2, space: space2, font: font2 } = useTheme();
   const banner = react$1.useConversationSelector(store, (v) => v.banner);
+  const status = react$1.useConversationSelector(store, (v) => v.status);
+  const conversationId = react$1.useConversationSelector(
+    store,
+    (v) => v.conversationId
+  );
+  const unavailable = react.useMemo(
+    () => ({
+      kind: "unavailable",
+      reason: status,
+      retry: () => store.start(),
+      conversationId
+    }),
+    [store, status, conversationId]
+  );
   const [late, setLate] = react.useState(false);
   react.useEffect(() => {
     setLate(false);
@@ -1771,12 +1833,20 @@ var StatusBanner = react.memo(function StatusBanner2() {
     return () => clearTimeout(timer);
   }, [banner]);
   if (banner === null || banner === "connecting" && !late) return null;
+  if (banner === "unavailable")
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     Button,
@@ -1785,7 +1855,7 @@ var StatusBanner = react.memo(function StatusBanner2() {
       variant: "text",
       onPress: () => void store.continueHere()
     }
-  ) : banner === "offline" || banner === "unavailable" ? /* @__PURE__ */ jsxRuntime.jsx(
+  ) : banner === "offline" ? /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
       label: t("tryAgain"),
@@ -1793,6 +1863,18 @@ var StatusBanner = react.memo(function StatusBanner2() {
       onPress: () => store.start()
     }
   ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(Banner, { text, children: action });
+});
+function DefaultUnavailable(props) {
+  const { t } = react$1.useCopy();
+  const { retry } = props.state;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Banner, { text: t("bannerUnavailable"), children: [
+    retry ? /* @__PURE__ */ jsxRuntime.jsx(Button, { label: t("tryAgain"), variant: "text", onPress: retry }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(FailureActionButton, { state: props.state })
+  ] });
+}
+function Banner(props) {
+  const { colors: colors2, space: space2, font: font2 } = useTheme();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
@@ -1814,22 +1896,35 @@ var StatusBanner = react.memo(function StatusBanner2() {
           reactNative.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 = react.useRef(props);
   handlers.current = props;
   const slots = useStableSlots(components);
+  const hasAction = props.failureAction !== void 0;
+  const actionLabel = props.failureAction?.label;
+  const failureAction = react.useMemo(
+    () => hasAction ? { label: actionLabel } : null,
+    [hasAction, actionLabel]
+  );
   const value = react.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);
   react.useEffect(() => {
@@ -1916,7 +2011,10 @@ exports.Composer = Composer;
 exports.DefaultBubble = DefaultBubble;
 exports.DefaultComposer = DefaultComposer;
 exports.DefaultHeader = DefaultHeader;
+exports.DefaultTurnFailed = DefaultTurnFailed;
+exports.DefaultUnavailable = DefaultUnavailable;
 exports.DisclosureBar = DisclosureBar;
+exports.FailureActionButton = FailureActionButton;
 exports.InfoCard = InfoCard;
 exports.MessageBubble = MessageBubble;
 exports.MessageList = MessageList;