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

package/dist/index.d.cts

@@ -107,6 +107,30 @@ interface ListProps {
     readonly keyboardShouldPersistTaps: 'handled';
     readonly contentContainerStyle: object;
 }
+/** A failure the person needs a way out of: a turn that failed before any reply, or no session to talk to. */
+interface FailureState {
+    /** `turn_failed`: a turn failed before any of its reply; `unavailable`: the backend gave no session, or none it could use. */
+    readonly kind: 'turn_failed' | 'unavailable';
+    /** Why: the turn's error `code` (`internal`, `timeout`, …), or the conversation's status (`unavailable`, `unauthorized`). */
+    readonly reason: string | null;
+    /** Try again, when it can be: the person's text again for a turn the server allows to retry, a new session otherwise. */
+    readonly retry: (() => void) | undefined;
+    /** The conversation, once a session named it: for your support records. */
+    readonly conversationId: string | null;
+}
+/** A slot for a failure (`components.Error`, `components.Unavailable`): the state, and the kit's own part to wrap. */
+interface FailureProps {
+    readonly state: FailureState;
+    readonly Default: ComponentType<{
+        readonly state: FailureState;
+    }>;
+}
+/** One action on every failure, drawn as a button by the kit's own parts: a person is always the way out. */
+interface FailureAction {
+    /** Default: the copy's `talkToPerson` ("Talk to a person"), in the person's language. */
+    readonly label?: string;
+    readonly onPress: (state: FailureState) => void;
+}
 
 declare function DefaultHeader(props: Omit<HeaderProps, 'Default'>): react.JSX.Element;
 declare const ChatHeader: react.NamedExoticComponent<object>;
@@ -120,6 +144,11 @@ declare const Composer: react.NamedExoticComponent<{
 
 declare const DisclosureBar: react.NamedExoticComponent<object>;
 
+/** The tenant's failure action as a button, or nothing when there is none. */
+declare function FailureActionButton(props: {
+    readonly state: FailureState;
+}): ReactNode;
+
 declare function DefaultBubble(props: Omit<MessageBubbleProps, 'Default'>): react.JSX.Element;
 declare const MessageBubble: react.NamedExoticComponent<{
     readonly item: MessageItem;
@@ -141,10 +170,18 @@ declare const Row: react.NamedExoticComponent<{
 declare const MessageList: react.NamedExoticComponent<object>;
 
 declare const StatusBanner: react.NamedExoticComponent<object>;
+/** The kit's own "Couldn't connect." banner: try again, and the tenant's failure action when there is one. */
+declare function DefaultUnavailable(props: {
+    readonly state: FailureState;
+}): ReactNode;
 
 declare const SystemRow: react.NamedExoticComponent<{
     readonly item: SystemItem;
 }>;
+/** The kit's own failed-turn row: "Something went wrong.", and the tenant's failure action when there is one. */
+declare function DefaultTurnFailed(props: {
+    readonly state: FailureState;
+}): ReactNode;
 
 type ProposalDecision = 'confirm' | 'decline';
 /** What the kit asks of the tenant's app. Only `onProposal` and `onOpenLink` are needed for the cards that use them. */
@@ -162,6 +199,11 @@ interface ChatHandlers {
     readonly onPickPhoto?: (question: Question, card: HeldCard) => Promise<{
         readonly upload_ref: string;
     } | null>;
+    /**
+     * A way out on a failed turn and on "couldn't connect": a button with your label (default "Talk to a person"),
+     * drawn by the kit's own parts when no `components.Error` or `components.Unavailable` replaces them.
+     */
+    readonly failureAction?: FailureAction;
     /** Development warnings: a theme that is hard to read, copy that says "assistant". */
     readonly onWarning?: (message: string) => void;
 }
@@ -174,6 +216,10 @@ interface ChatSlots {
     readonly Image?: ComponentType<ImageProps>;
     /** A list with FlashList's props (LegendList works). Default: FlashList. */
     readonly ListComponent?: ComponentType<ListProps>;
+    /** A turn that failed before any reply: replaces the "Something went wrong." row. */
+    readonly Error?: ComponentType<FailureProps>;
+    /** No session to talk to: replaces the "Couldn't connect." banner. */
+    readonly Unavailable?: ComponentType<FailureProps>;
     /** Card renderers by kind (`professional`, `proposal`, …). */
     readonly cards?: Readonly<Partial<Record<string, ComponentType<CardProps>>>>;
 }
@@ -183,6 +229,10 @@ interface ChatContextValue {
     readonly slots: ChatSlots;
     readonly agentAvatar: string | undefined;
     readonly timeZone: string | undefined;
+    /** The failure action's label when there is one (`label` undefined: the copy's); `onPress` is read from `handlers`. */
+    readonly failureAction: {
+        readonly label: string | undefined;
+    } | null;
 }
 /** The conversation, handlers and slots; only inside `VinaverseChat` (or `VinaverseChatProvider`). */
 declare function useChat(): ChatContextValue;
@@ -261,4 +311,4 @@ declare function useReducedMotion(): boolean;
 /** Reads a line to a screen reader, without moving focus. */
 declare function announce(text: string): void;
 
-export { ActivityLine, Avatar, Button, type ButtonProps, CardFrame, type CardProps, CardView, type ChatHandlers, ChatHeader, ChatSkeleton, type ChatSlots, type ColorSchemeSetting, Composer, type ComposerProps, DefaultBubble, DefaultComposer, DefaultHeader, DisclosureBar, type EmptyStateProps, type HeaderProps, InfoCard, type LifecycleTarget, type ListProps, MessageBubble, type MessageBubbleProps, MessageList, NextStepCard, ProposalCard, type ProposalDecision, QuestionCard, Row, StatusBanner, StreamingBubble, SystemRow, type Theme, type ThemeOverrides, ThemeProvider, TimeSlotsCard, VinaverseChat, type VinaverseChatProps, VinaverseChatProvider, announce, answerText, createTheme, defaultCard, fieldText, itemType, themeProblems, useChat, useNativeLifecycle, useReducedMotion, useTheme };
+export { ActivityLine, Avatar, Button, type ButtonProps, CardFrame, type CardProps, CardView, type ChatHandlers, ChatHeader, ChatSkeleton, type ChatSlots, type ColorSchemeSetting, Composer, type ComposerProps, DefaultBubble, DefaultComposer, DefaultHeader, DefaultTurnFailed, DefaultUnavailable, DisclosureBar, type EmptyStateProps, type FailureAction, FailureActionButton, type FailureProps, type FailureState, type HeaderProps, InfoCard, type LifecycleTarget, type ListProps, MessageBubble, type MessageBubbleProps, MessageList, NextStepCard, ProposalCard, type ProposalDecision, QuestionCard, Row, StatusBanner, StreamingBubble, SystemRow, type Theme, type ThemeOverrides, ThemeProvider, TimeSlotsCard, VinaverseChat, type VinaverseChatProps, VinaverseChatProvider, announce, answerText, createTheme, defaultCard, fieldText, itemType, themeProblems, useChat, useNativeLifecycle, useReducedMotion, useTheme };

package/dist/index.d.ts

@@ -107,6 +107,30 @@ interface ListProps {
     readonly keyboardShouldPersistTaps: 'handled';
     readonly contentContainerStyle: object;
 }
+/** A failure the person needs a way out of: a turn that failed before any reply, or no session to talk to. */
+interface FailureState {
+    /** `turn_failed`: a turn failed before any of its reply; `unavailable`: the backend gave no session, or none it could use. */
+    readonly kind: 'turn_failed' | 'unavailable';
+    /** Why: the turn's error `code` (`internal`, `timeout`, …), or the conversation's status (`unavailable`, `unauthorized`). */
+    readonly reason: string | null;
+    /** Try again, when it can be: the person's text again for a turn the server allows to retry, a new session otherwise. */
+    readonly retry: (() => void) | undefined;
+    /** The conversation, once a session named it: for your support records. */
+    readonly conversationId: string | null;
+}
+/** A slot for a failure (`components.Error`, `components.Unavailable`): the state, and the kit's own part to wrap. */
+interface FailureProps {
+    readonly state: FailureState;
+    readonly Default: ComponentType<{
+        readonly state: FailureState;
+    }>;
+}
+/** One action on every failure, drawn as a button by the kit's own parts: a person is always the way out. */
+interface FailureAction {
+    /** Default: the copy's `talkToPerson` ("Talk to a person"), in the person's language. */
+    readonly label?: string;
+    readonly onPress: (state: FailureState) => void;
+}
 
 declare function DefaultHeader(props: Omit<HeaderProps, 'Default'>): react.JSX.Element;
 declare const ChatHeader: react.NamedExoticComponent<object>;
@@ -120,6 +144,11 @@ declare const Composer: react.NamedExoticComponent<{
 
 declare const DisclosureBar: react.NamedExoticComponent<object>;
 
+/** The tenant's failure action as a button, or nothing when there is none. */
+declare function FailureActionButton(props: {
+    readonly state: FailureState;
+}): ReactNode;
+
 declare function DefaultBubble(props: Omit<MessageBubbleProps, 'Default'>): react.JSX.Element;
 declare const MessageBubble: react.NamedExoticComponent<{
     readonly item: MessageItem;
@@ -141,10 +170,18 @@ declare const Row: react.NamedExoticComponent<{
 declare const MessageList: react.NamedExoticComponent<object>;
 
 declare const StatusBanner: react.NamedExoticComponent<object>;
+/** The kit's own "Couldn't connect." banner: try again, and the tenant's failure action when there is one. */
+declare function DefaultUnavailable(props: {
+    readonly state: FailureState;
+}): ReactNode;
 
 declare const SystemRow: react.NamedExoticComponent<{
     readonly item: SystemItem;
 }>;
+/** The kit's own failed-turn row: "Something went wrong.", and the tenant's failure action when there is one. */
+declare function DefaultTurnFailed(props: {
+    readonly state: FailureState;
+}): ReactNode;
 
 type ProposalDecision = 'confirm' | 'decline';
 /** What the kit asks of the tenant's app. Only `onProposal` and `onOpenLink` are needed for the cards that use them. */
@@ -162,6 +199,11 @@ interface ChatHandlers {
     readonly onPickPhoto?: (question: Question, card: HeldCard) => Promise<{
         readonly upload_ref: string;
     } | null>;
+    /**
+     * A way out on a failed turn and on "couldn't connect": a button with your label (default "Talk to a person"),
+     * drawn by the kit's own parts when no `components.Error` or `components.Unavailable` replaces them.
+     */
+    readonly failureAction?: FailureAction;
     /** Development warnings: a theme that is hard to read, copy that says "assistant". */
     readonly onWarning?: (message: string) => void;
 }
@@ -174,6 +216,10 @@ interface ChatSlots {
     readonly Image?: ComponentType<ImageProps>;
     /** A list with FlashList's props (LegendList works). Default: FlashList. */
     readonly ListComponent?: ComponentType<ListProps>;
+    /** A turn that failed before any reply: replaces the "Something went wrong." row. */
+    readonly Error?: ComponentType<FailureProps>;
+    /** No session to talk to: replaces the "Couldn't connect." banner. */
+    readonly Unavailable?: ComponentType<FailureProps>;
     /** Card renderers by kind (`professional`, `proposal`, …). */
     readonly cards?: Readonly<Partial<Record<string, ComponentType<CardProps>>>>;
 }
@@ -183,6 +229,10 @@ interface ChatContextValue {
     readonly slots: ChatSlots;
     readonly agentAvatar: string | undefined;
     readonly timeZone: string | undefined;
+    /** The failure action's label when there is one (`label` undefined: the copy's); `onPress` is read from `handlers`. */
+    readonly failureAction: {
+        readonly label: string | undefined;
+    } | null;
 }
 /** The conversation, handlers and slots; only inside `VinaverseChat` (or `VinaverseChatProvider`). */
 declare function useChat(): ChatContextValue;
@@ -261,4 +311,4 @@ declare function useReducedMotion(): boolean;
 /** Reads a line to a screen reader, without moving focus. */
 declare function announce(text: string): void;
 
-export { ActivityLine, Avatar, Button, type ButtonProps, CardFrame, type CardProps, CardView, type ChatHandlers, ChatHeader, ChatSkeleton, type ChatSlots, type ColorSchemeSetting, Composer, type ComposerProps, DefaultBubble, DefaultComposer, DefaultHeader, DisclosureBar, type EmptyStateProps, type HeaderProps, InfoCard, type LifecycleTarget, type ListProps, MessageBubble, type MessageBubbleProps, MessageList, NextStepCard, ProposalCard, type ProposalDecision, QuestionCard, Row, StatusBanner, StreamingBubble, SystemRow, type Theme, type ThemeOverrides, ThemeProvider, TimeSlotsCard, VinaverseChat, type VinaverseChatProps, VinaverseChatProvider, announce, answerText, createTheme, defaultCard, fieldText, itemType, themeProblems, useChat, useNativeLifecycle, useReducedMotion, useTheme };
+export { ActivityLine, Avatar, Button, type ButtonProps, CardFrame, type CardProps, CardView, type ChatHandlers, ChatHeader, ChatSkeleton, type ChatSlots, type ColorSchemeSetting, Composer, type ComposerProps, DefaultBubble, DefaultComposer, DefaultHeader, DefaultTurnFailed, DefaultUnavailable, DisclosureBar, type EmptyStateProps, type FailureAction, FailureActionButton, type FailureProps, type FailureState, type HeaderProps, InfoCard, type LifecycleTarget, type ListProps, MessageBubble, type MessageBubbleProps, MessageList, NextStepCard, ProposalCard, type ProposalDecision, QuestionCard, Row, StatusBanner, StreamingBubble, SystemRow, type Theme, type ThemeOverrides, ThemeProvider, TimeSlotsCard, VinaverseChat, type VinaverseChatProps, VinaverseChatProvider, announce, answerText, createTheme, defaultCard, fieldText, itemType, themeProblems, useChat, useNativeLifecycle, useReducedMotion, useTheme };

package/dist/index.js

@@ -1471,6 +1471,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 +1643,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 +1679,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,16 +1712,16 @@ 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 keyOf = (item) => item.key;
 function itemType(item) {
   if (item.type === "card") return `card:${item.card.kind}`;
@@ -1757,10 +1806,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 +1831,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 +1853,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 +1861,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 +1894,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 +1998,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, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map