@vinaverse/react-native 0.1.0-alpha.10 → 0.1.0-alpha.11

package/dist/history.js

@@ -0,0 +1,618 @@
+import { Button, ChatContextProvider, DefaultHeader, DisclosureBar, carousels, Row, itemType } from './chunk-KSHDF3MG.js';
+export { CardCarousel } from './chunk-KSHDF3MG.js';
+import { ThemeProvider, useTheme, useAgentSweep, useReducedMotion } from './chunk-EFEXTVIT.js';
+export { ThemeProvider, useTheme } from './chunk-EFEXTVIT.js';
+import { useAgentRuntime, useAgentProfile } from '@vinaverse/react/agent';
+export { AgentRuntimeProvider, useAgentConversation, useAgentFeatures, useAgentName, useAgentProfile, useAgentRuntime, useAgentStatus, useAgentStatusState } from '@vinaverse/react/agent';
+import { useAgentHistory, useAgentTranscript } from '@vinaverse/react/history';
+export { useAgentHistory, useAgentTranscript } from '@vinaverse/react/history';
+import { FlashList } from '@shopify/flash-list';
+import { CopyProvider, useCopy, formatDateTime } from '@vinaverse/react';
+import { useMemo, useState, useCallback, useRef } from 'react';
+import { View, ActivityIndicator, Pressable, Text, Alert } from 'react-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function AgentHistoryList(props) {
+  const copy = useMemo(
+    () => props.agentName ? { ...props.copy, agentFallbackName: props.agentName } : props.copy,
+    [props.agentName, props.copy]
+  );
+  return /* @__PURE__ */ jsx(CopyProvider, { locale: props.locale, copy, children: /* @__PURE__ */ jsx(ThemeProvider, { theme: props.theme, colorScheme: props.colorScheme, children: /* @__PURE__ */ jsx(HistoryList, { ...props }) }) });
+}
+function alertConfirm(t) {
+  return () => new Promise((resolve) => {
+    Alert.alert(
+      t("historyDeleteTitle"),
+      t("historyDeleteBody"),
+      [
+        { text: t("cancel"), style: "cancel", onPress: () => resolve(false) },
+        {
+          text: t("historyDelete"),
+          style: "destructive",
+          onPress: () => resolve(true)
+        }
+      ],
+      { cancelable: true, onDismiss: () => resolve(false) }
+    );
+  });
+}
+function HistoryList(props) {
+  const { t, locale, direction } = useCopy();
+  const { colors, space } = useTheme();
+  const runtime = useAgentRuntime();
+  useAgentSweep(runtime);
+  const { name } = useAgentProfile(t("agentFallbackName"));
+  const history = useAgentHistory({
+    subject: props.subject,
+    mode: props.mode,
+    scope: props.scope ?? null,
+    agent: props.agent ?? null,
+    ...props.thread === void 0 ? {} : { thread: props.thread },
+    ...props.pageSize === void 0 ? {} : { pageSize: props.pageSize }
+  });
+  const { state } = history;
+  const [deleting, setDeleting] = useState(/* @__PURE__ */ new Set());
+  const [failed, setFailed] = useState(/* @__PURE__ */ new Set());
+  const { onOpen, onContinue, onWarning, confirmDelete, timeZone } = props;
+  const confirm = useMemo(
+    () => confirmDelete ?? alertConfirm(t),
+    [confirmDelete, t]
+  );
+  const remove = useCallback(
+    async (conversation) => {
+      if (!await confirm(conversation)) return;
+      mark(setDeleting, conversation.id, true);
+      mark(setFailed, conversation.id, false);
+      try {
+        await history.remove(conversation);
+      } catch (error) {
+        mark(setFailed, conversation.id, true);
+        onWarning?.(`Vinaverse history: delete failed: ${String(error)}`, {
+          code: "delete_failed"
+        });
+      } finally {
+        mark(setDeleting, conversation.id, false);
+      }
+    },
+    [confirm, history, onWarning]
+  );
+  const slots = props.components ?? {};
+  const { Row: Row2, Empty, Failure, ListComponent } = slots;
+  const renderItem = useCallback(
+    ({ item }) => {
+      const own = {
+        conversation: item,
+        when: formatDateTime(item.last_activity_at, locale, timeZone),
+        messages: t("historyMessages", { count: item.message_count }),
+        ended: item.state === "ended",
+        onOpen: onOpen ? () => onOpen(item) : void 0,
+        onContinue: onContinue && item.state === "open" ? () => onContinue(item, history.continue(item)) : void 0,
+        onDelete: () => void remove(item),
+        deleting: deleting.has(item.id),
+        deleteFailed: failed.has(item.id)
+      };
+      return Row2 ? /* @__PURE__ */ jsx(Row2, { ...own, Default: DefaultHistoryRow }) : /* @__PURE__ */ jsx(DefaultHistoryRow, { ...own });
+    },
+    [
+      Row2,
+      locale,
+      timeZone,
+      t,
+      onOpen,
+      onContinue,
+      history,
+      remove,
+      deleting,
+      failed
+    ]
+  );
+  const empty = state.failure && state.conversations.length === 0 ? /* @__PURE__ */ jsx(Centered, { children: Failure ? /* @__PURE__ */ jsx(
+    Failure,
+    {
+      reason: state.failure,
+      onRetry: history.refresh,
+      Default: DefaultHistoryFailure
+    }
+  ) : /* @__PURE__ */ jsx(
+    DefaultHistoryFailure,
+    {
+      reason: state.failure,
+      onRetry: history.refresh
+    }
+  ) }) : state.started && !state.loading ? /* @__PURE__ */ jsx(Centered, { children: Empty ? /* @__PURE__ */ jsx(Empty, { agentName: name, Default: DefaultHistoryEmpty }) : /* @__PURE__ */ jsx(DefaultHistoryEmpty, { agentName: name }) }) : null;
+  const footer = state.loading && state.conversations.length > 0 ? /* @__PURE__ */ jsx(View, { style: { padding: space.md, alignItems: "center" }, children: /* @__PURE__ */ jsx(
+    ActivityIndicator,
+    {
+      color: colors.textMuted,
+      accessibilityLabel: t("loading")
+    }
+  ) }) : state.failure && state.conversations.length > 0 ? /* @__PURE__ */ jsx(View, { style: { padding: space.sm, alignItems: "center" }, children: /* @__PURE__ */ jsx(Button, { label: t("tryAgain"), variant: "text", onPress: history.retry }) }) : null;
+  const list = useMemo(
+    () => ({
+      data: state.conversations,
+      renderItem,
+      keyExtractor: (item) => item.id,
+      onEndReached: history.loadMore,
+      onRefresh: history.refresh,
+      refreshing: state.loading && state.conversations.length === 0,
+      ListFooterComponent: footer,
+      ListEmptyComponent: empty,
+      contentContainerStyle: { paddingVertical: space.sm }
+    }),
+    [state, renderItem, history, footer, empty, space.sm]
+  );
+  const List = ListComponent;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      testID: props.testID ?? "vinaverse-history",
+      style: [
+        { flex: 1, backgroundColor: colors.background, direction },
+        props.style
+      ],
+      children: List ? /* @__PURE__ */ jsx(List, { ...list }) : /* @__PURE__ */ jsx(FlashList, { ...list })
+    }
+  );
+}
+var mark = (set, id, on) => set((s) => {
+  const next = new Set(s);
+  if (on) next.add(id);
+  else next.delete(id);
+  return next;
+});
+function Centered(props) {
+  const { space } = useTheme();
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        alignItems: "center",
+        justifyContent: "center",
+        padding: space.xl
+      },
+      children: props.children
+    }
+  );
+}
+function DefaultHistoryRow(props) {
+  const { t } = useCopy();
+  const { colors, space, font, radius } = useTheme();
+  const { conversation } = props;
+  const detail = [
+    props.when,
+    props.messages,
+    props.ended ? t("historyEnded") : null
+  ].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        marginHorizontal: space.lg,
+        marginVertical: space.xs,
+        borderRadius: radius.lg,
+        backgroundColor: colors.surface,
+        opacity: props.deleting ? 0.6 : 1
+      },
+      testID: `vinaverse-history-${conversation.id}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: `${conversation.title}. ${detail}`,
+            accessibilityState: { disabled: !props.onOpen || props.deleting },
+            disabled: !props.onOpen || props.deleting,
+            onPress: props.onOpen,
+            style: { paddingHorizontal: space.md, paddingTop: space.md },
+            children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  numberOfLines: 2,
+                  style: {
+                    color: colors.text,
+                    fontSize: font.size.md,
+                    fontWeight: "600",
+                    ...font.family ? { fontFamily: font.family } : {}
+                  },
+                  children: conversation.title
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    color: colors.textMuted,
+                    fontSize: font.size.sm,
+                    marginTop: space.xxs
+                  },
+                  children: detail
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: {
+              flexDirection: "row",
+              alignItems: "center",
+              gap: space.xs,
+              paddingHorizontal: space.xs
+            },
+            children: [
+              props.onContinue ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  label: t("historyContinue"),
+                  variant: "text",
+                  disabled: props.deleting,
+                  onPress: props.onContinue
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  label: t("historyDelete"),
+                  variant: "text",
+                  busy: props.deleting,
+                  onPress: props.onDelete
+                }
+              ),
+              props.deleteFailed ? /* @__PURE__ */ jsx(Text, { style: { color: colors.danger, fontSize: font.size.xs }, children: t("historyDeleteFailed") }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function DefaultHistoryEmpty(props) {
+  const { t } = useCopy();
+  const { colors, space, font } = useTheme();
+  return /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: space.sm }, children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: {
+          color: colors.text,
+          fontSize: font.size.lg,
+          fontWeight: "600",
+          textAlign: "center"
+        },
+        children: t("historyEmpty")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: {
+          color: colors.textMuted,
+          fontSize: font.size.md,
+          textAlign: "center"
+        },
+        children: t("historyEmptyBody", { agent: props.agentName })
+      }
+    )
+  ] });
+}
+function DefaultHistoryFailure(props) {
+  const { t } = useCopy();
+  const { colors, space, font } = useTheme();
+  const off = props.reason === "off";
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "alert",
+      style: { alignItems: "center", gap: space.md },
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: colors.text,
+              fontSize: font.size.md,
+              textAlign: "center"
+            },
+            children: t(off ? "historyOff" : "historyFailed")
+          }
+        ),
+        off ? null : /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: t("tryAgain"),
+            variant: "primary",
+            onPress: props.onRetry
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/readOnlyStore.ts
+var none = () => () => void 0;
+function readOnlyStore(view) {
+  const snapshot = {
+    status: "ready",
+    conversationId: view.conversationId,
+    banner: null,
+    next: null,
+    agent: { name: view.agentName, avatarUrl: view.agentAvatar },
+    welcome: null,
+    disclosure: null,
+    takeover: null,
+    items: view.items,
+    activity: [],
+    responding: false,
+    openQuestion: null,
+    answersNeedWebSocket: false,
+    turnsLeft: null,
+    history: "restored"
+  };
+  return {
+    getSnapshot: () => snapshot,
+    subscribe: none,
+    getStreaming: () => null,
+    subscribeStreaming: none,
+    send: () => "",
+    retry: () => null,
+    retryTurn: () => null,
+    cancel: () => void 0,
+    answer: () => "",
+    cardAction: () => "",
+    decideProposal: () => Promise.resolve(null),
+    checkLink: () => false,
+    continueHere: () => Promise.resolve(),
+    setForeground: () => void 0,
+    start: () => void 0
+  };
+}
+function AgentTranscript(props) {
+  const copy = useMemo(
+    () => props.agentName ? { ...props.copy, agentFallbackName: props.agentName } : props.copy,
+    [props.agentName, props.copy]
+  );
+  return /* @__PURE__ */ jsx(CopyProvider, { locale: props.locale, copy, children: /* @__PURE__ */ jsx(ThemeProvider, { theme: props.theme, colorScheme: props.colorScheme, children: /* @__PURE__ */ jsx(Transcript, { ...props }) }) });
+}
+var EMPTY_SLOTS = {};
+function Transcript(props) {
+  const { t, direction } = useCopy();
+  const { colors, space } = useTheme();
+  const runtime = useAgentRuntime();
+  const profile = useAgentProfile(t("agentFallbackName"));
+  const name = profile.name;
+  const avatar = props.agentAvatar ?? profile.avatarUrl;
+  const transcript = useAgentTranscript(props.conversationId, {
+    ...props.pageSize === void 0 ? {} : { pageSize: props.pageSize }
+  });
+  const { state } = transcript;
+  const slots = props.components ?? EMPTY_SLOTS;
+  const { Header, Failure, ListComponent } = slots;
+  const chatSlots = useMemo(() => {
+    const { Header: _h, Failure: _f, ListComponent: _l, ...rest } = slots;
+    return rest;
+  }, [slots]);
+  const store = useMemo(
+    () => readOnlyStore({
+      items: state.items,
+      conversationId: props.conversationId,
+      agentName: name,
+      agentAvatar: avatar
+    }),
+    [state.items, props.conversationId, name, avatar]
+  );
+  const handlers = useRef({});
+  handlers.current = {
+    ...props.prefetchImage ? { prefetchImage: props.prefetchImage } : {}
+  };
+  const value = useMemo(
+    () => ({
+      store,
+      handlers,
+      slots: chatSlots,
+      agentAvatar: props.agentAvatar,
+      timeZone: props.timeZone,
+      failureAction: null,
+      starters: void 0,
+      imagePolicy: props.imagePolicy
+    }),
+    [store, chatSlots, props.agentAvatar, props.timeZone, props.imagePolicy]
+  );
+  const header = { name, avatarUrl: avatar, takeoverBy: null };
+  const gone = state.failure === "not_found" || state.failure === "expired" || state.failure === "ended";
+  const onContinue = props.onContinue;
+  const agentKey = props.agentKey;
+  return /* @__PURE__ */ jsx(ChatContextProvider, { value, children: /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID: props.testID ?? "vinaverse-transcript",
+      style: [
+        { flex: 1, backgroundColor: colors.background, direction },
+        props.style
+      ],
+      children: [
+        props.hideHeader ? null : Header ? /* @__PURE__ */ jsx(Header, { ...header, Default: DefaultHeader }) : /* @__PURE__ */ jsx(DefaultHeader, { ...header }),
+        /* @__PURE__ */ jsx(DisclosureBar, {}),
+        /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: state.failure && state.items.length === 0 ? /* @__PURE__ */ jsx(Centered2, { children: Failure ? /* @__PURE__ */ jsx(
+          Failure,
+          {
+            reason: state.failure,
+            gone,
+            onRetry: transcript.load,
+            Default: DefaultTranscriptFailure
+          }
+        ) : /* @__PURE__ */ jsx(
+          DefaultTranscriptFailure,
+          {
+            reason: state.failure,
+            gone,
+            onRetry: transcript.load
+          }
+        ) }) : /* @__PURE__ */ jsx(
+          TranscriptList,
+          {
+            items: state.items,
+            loading: state.loading,
+            more: !state.done && state.started && !state.loading,
+            failed: state.failure !== null,
+            onEarlier: transcript.loadEarlier,
+            onRetry: transcript.retry,
+            ListComponent,
+            grouped: chatSlots.CardGroup !== void 0
+          }
+        ) }),
+        onContinue && agentKey && !gone && props.ended !== true ? /* @__PURE__ */ jsx(View, { style: { padding: space.lg }, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: t("historyContinue"),
+            variant: "primary",
+            onPress: () => onContinue(runtime.continue(agentKey, props.conversationId))
+          }
+        ) }) : null
+      ]
+    }
+  ) });
+}
+function authorOf(item) {
+  return item?.type === "message" ? item.role : null;
+}
+function TranscriptList(props) {
+  const { t } = useCopy();
+  const { colors, space, font } = useTheme();
+  const reducedMotion = useReducedMotion();
+  const { items, grouped } = props;
+  const runsRef = useRef(/* @__PURE__ */ new Map());
+  const grouping = useMemo(
+    () => grouped ? carousels(items, runsRef.current) : null,
+    [items, grouped]
+  );
+  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]),
+        run: groupingRef.current?.runs.get(item.key),
+        inside: groupingRef.current?.inside.has(item.key) === true
+      }
+    ),
+    []
+  );
+  const header = props.loading ? /* @__PURE__ */ jsx(View, { style: { padding: space.md, alignItems: "center" }, children: /* @__PURE__ */ jsx(
+    ActivityIndicator,
+    {
+      color: colors.textMuted,
+      accessibilityLabel: t("loading")
+    }
+  ) }) : props.failed ? (
+    // Said where the earlier messages would be, with a way to ask again (the same cursor, or the newest page).
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        accessibilityRole: "alert",
+        style: {
+          padding: space.sm,
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: space.sm
+        },
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: { color: colors.textMuted, fontSize: font.size.sm }, children: t("transcriptEarlier") }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              label: t("tryAgain"),
+              hint: t("transcriptEarlier"),
+              variant: "text",
+              onPress: props.onRetry
+            }
+          )
+        ]
+      }
+    )
+  ) : props.more ? /* @__PURE__ */ jsx(View, { style: { padding: space.sm, alignItems: "center" }, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      label: t("transcriptEarlier"),
+      variant: "text",
+      onPress: props.onEarlier
+    }
+  ) }) : null;
+  const list = useMemo(
+    () => ({
+      data: items,
+      renderItem,
+      keyExtractor: (item) => item.key,
+      getItemType: itemType,
+      maintainVisibleContentPosition: {
+        startRenderingFromBottom: true,
+        animateAutoScrollToBottom: !reducedMotion
+      },
+      onStartReached: props.onEarlier,
+      ListHeaderComponent: header,
+      contentContainerStyle: { paddingVertical: space.sm }
+    }),
+    [items, renderItem, reducedMotion, props.onEarlier, header, space.sm]
+  );
+  const List = props.ListComponent;
+  return List ? /* @__PURE__ */ jsx(List, { ...list }) : /* @__PURE__ */ jsx(FlashList, { ...list });
+}
+function Centered2(props) {
+  const { space } = useTheme();
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: space.xl
+      },
+      children: props.children
+    }
+  );
+}
+function DefaultTranscriptFailure(props) {
+  const { t } = useCopy();
+  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.md,
+              textAlign: "center"
+            },
+            children: t(props.gone ? "transcriptGone" : "transcriptFailed")
+          }
+        ),
+        props.gone ? null : /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: t("tryAgain"),
+            variant: "primary",
+            onPress: props.onRetry
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { AgentHistoryList, AgentTranscript, DefaultHistoryEmpty, DefaultHistoryFailure, DefaultHistoryRow, DefaultTranscriptFailure };
+//# sourceMappingURL=history.js.map
+//# sourceMappingURL=history.js.map