@versini/sassysaint 8.118.4 → 8.119.1

package/dist/chunks/HistoryDataGrid.Dxc-zHra.js

@@ -0,0 +1,487 @@
+import { jsx as t, jsxs as h, Fragment as E } from "react/jsx-runtime";
+import { DataGridContext as A, useColumnMeasurement as J, getBodyClass as K, DataGridHeader as Q, DataGridRow as q, DataGridCell as d, DataGridCellSort as B, ButtonIconDelete as ee, DataGrid as te } from "./ButtonIconDelete.DLIImGjj.js";
+import { forwardRef as re, useContext as ne, useRef as D, useState as X, useCallback as P, useEffect as v, useImperativeHandle as se, useMemo as $ } from "react";
+import { CellWrapper as F, IconCloseLight as oe, ButtonIcon as U, IconRestore as le, IconStarInCircle as ae, IconStarInCircleLight as ce, CARDS as ie } from "./LogoEntry.BAI8lPSQ.js";
+import { pluralize as H, numberFormatter as me, ResponsiveTooltip as z, isProbablyMobile as ue } from "./App.YH7VhNjK.js";
+import I from "clsx";
+import { y as _, V, INFINITE_SCROLL_THRESHOLD as de, INFINITE_SCROLL_LIMIT as fe } from "./index.jtqzynwK.js";
+const xe = 20, pe = 5, he = "20px", Y = "data-row-index";
+function ge(e) {
+  let r = e.parentElement;
+  for (; r; ) {
+    const l = getComputedStyle(r).overflowY;
+    if (l === "auto" || l === "scroll")
+      return r;
+    r = r.parentElement;
+  }
+  return null;
+}
+function be({ data: e, children: r, batchSize: o = xe, threshold: l = pe, rootMargin: i = he, onVisibleCountChange: f, className: x }, g) {
+  const m = ne(A), b = D(null), y = D(null), u = D(null), s = e.length, N = Math.min(o + l, s), [a, T] = X(N), C = a < s, R = P((n) => {
+    const k = b.current;
+    if (!k)
+      return;
+    const c = k.querySelector(`[${Y}="${n}"]`);
+    if (c) {
+      const S = c.querySelector('[role="row"]');
+      S && S.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+    }
+  }, []);
+  v(() => {
+    if (u.current !== null) {
+      const n = u.current;
+      n < a && (requestAnimationFrame(() => {
+        R(n);
+      }), u.current = null);
+    }
+  }, [
+    a,
+    R
+  ]), se(g, () => ({
+    scrollToIndex: (n) => {
+      if (n < 0 || n >= s) {
+        console.warn(`scrollToIndex: index ${n} is out of bounds (0-${s - 1})`);
+        return;
+      }
+      if (n < a) {
+        R(n);
+        return;
+      }
+      const k = Math.min(n + l + 1, s);
+      u.current = n, T(k);
+    }
+  }), [
+    s,
+    a,
+    l,
+    R
+  ]), v(() => {
+    T(Math.min(o + l, s));
+  }, [
+    s,
+    o,
+    l
+  ]), v(() => {
+    f?.(a, s);
+  }, [
+    a,
+    s,
+    f
+  ]);
+  const p = P((n) => {
+    n[0]?.isIntersecting && T((c) => Math.min(c + o, s));
+  }, [
+    o,
+    s
+  ]), w = P((n) => {
+    if (y.current && (y.current.disconnect(), y.current = null), n && C) {
+      const k = ge(n);
+      y.current = new IntersectionObserver(p, {
+        root: k,
+        rootMargin: i
+      }), y.current.observe(n);
+    }
+  }, [
+    C,
+    p,
+    i
+  ]);
+  v(() => () => {
+    y.current?.disconnect();
+  }, []);
+  const M = $(() => C ? Math.max(0, a - l) : -1, [
+    C,
+    a,
+    l
+  ]), O = $(() => ({
+    ...m,
+    cellWrapper: F.BODY
+  }), [
+    m
+  ]), G = $(() => {
+    const n = [], k = Math.min(a, s) - 1;
+    for (let c = 0; c < a && c < s; c++) {
+      c === M && n.push(/* @__PURE__ */ t("div", {
+        ref: w,
+        "aria-hidden": "true",
+        style: {
+          height: "1px",
+          background: "transparent"
+        }
+      }, "__infinite-scroll-marker-inline__"));
+      const S = !C && c === k;
+      n.push(/* @__PURE__ */ t(A.Provider, {
+        value: {
+          ...O,
+          rowIndex: c,
+          isLastRow: S
+        },
+        children: /* @__PURE__ */ t("div", {
+          [Y]: c,
+          style: {
+            display: "contents"
+          },
+          children: r(e[c], c)
+        })
+      }, c));
+    }
+    return M === a && C && n.push(/* @__PURE__ */ t("div", {
+      ref: w,
+      "aria-hidden": "true",
+      style: {
+        height: "1px",
+        background: "transparent"
+      }
+    }, "__infinite-scroll-marker-end__")), n;
+  }, [
+    e,
+    a,
+    s,
+    M,
+    C,
+    r,
+    w,
+    O
+  ]);
+  J(b, G);
+  const Z = K(!!m.columns, x);
+  return /* @__PURE__ */ t(A.Provider, {
+    value: {
+      ...m,
+      cellWrapper: F.BODY
+    },
+    children: /* @__PURE__ */ t("div", {
+      ref: b,
+      role: "rowgroup",
+      className: Z,
+      children: G
+    })
+  });
+}
+const ye = /* @__PURE__ */ re(be), we = ({
+  sortDirection: e,
+  sortedCell: r,
+  onSortChange: o,
+  caption: l,
+  isSearchActive: i = !1,
+  showTokenUsage: f = !0
+}) => {
+  const x = (g) => {
+    o(g);
+  };
+  return /* @__PURE__ */ t(Q, { caption: l, children: /* @__PURE__ */ h(q, { children: [
+    /* @__PURE__ */ t(d, { className: "invisible", children: "Row" }),
+    f ? /* @__PURE__ */ h(E, { children: [
+      /* @__PURE__ */ t(d, { className: "text-xs sm:text-sm", children: "Summary" }),
+      i ? /* @__PURE__ */ t(d, { className: "text-xs sm:text-sm", children: "Date" }) : /* @__PURE__ */ t(
+        B,
+        {
+          focusMode: "system",
+          buttonClassName: "text-xs sm:text-sm",
+          cellId: _,
+          align: "left",
+          sortDirection: r === _ ? e : !1,
+          sortedCell: r,
+          onSort: x,
+          children: "Date"
+        }
+      ),
+      i ? /* @__PURE__ */ t(d, { align: "right", className: "text-xs sm:text-sm", children: "Tokens" }) : /* @__PURE__ */ t(
+        B,
+        {
+          focusMode: "system",
+          buttonClassName: "text-xs sm:text-sm",
+          cellId: V,
+          align: "right",
+          sortDirection: r === V ? e : !1,
+          sortedCell: r,
+          onSort: x,
+          children: "Tokens"
+        }
+      )
+    ] }) : /* @__PURE__ */ h(E, { children: [
+      i ? /* @__PURE__ */ t(d, { className: "text-xs sm:text-sm", children: "Date" }) : /* @__PURE__ */ t(
+        B,
+        {
+          focusMode: "system",
+          buttonClassName: "text-xs sm:text-sm",
+          cellId: _,
+          align: "left",
+          sortDirection: r === _ ? e : !1,
+          sortedCell: r,
+          onSort: x,
+          children: "Date"
+        }
+      ),
+      /* @__PURE__ */ t(d, { className: "text-xs sm:text-sm", children: "Summary" })
+    ] }),
+    /* @__PURE__ */ t(d, { align: "right", className: "text-xs sm:text-sm", children: "Actions" })
+  ] }) });
+};
+const Ie = "av-pill", ke = ({ variant: e }) => I("rounded-xs border", {
+  "border-border-information": e === "information",
+  "border-border-warning": e === "warning",
+  "border-border-success": e === "success",
+  "border-border-error": e === "error"
+}), W = ({ variant: e }) => I("not-prose", {
+  "text-copy-information": e === "information",
+  "text-copy-warning": e === "warning",
+  "text-copy-success": e === "success",
+  "text-copy-error": e === "error"
+}), Ce = ({ variant: e }) => I({
+  "bg-surface-information": e === "information",
+  "bg-surface-warning": e === "warning",
+  "bg-surface-success": e === "success",
+  "bg-surface-error": e === "error"
+}), Ne = (e) => {
+  const { className: r, variant: o } = e;
+  return {
+    main: I(Ie, "inline-flex items-center gap-1 px-2 py-0.5 text-xs", ke({
+      variant: o
+    }), W({
+      variant: o
+    }), Ce(e), r),
+    button: I("inline-flex items-center justify-center", "ml-1", "focus:outline", "focus:outline-1", "focus:outline-offset-1", "focus:outline-focus-dark", "hover:bg-surface-medium/50", "rounded-full", W({
+      variant: o
+    }))
+  };
+}, j = ({ label: e, className: r, variant: o = "information", description: l, onClose: i }) => {
+  const [f, x] = X(!0), g = (b) => {
+    i && (i(b), b.defaultPrevented || x(!1));
+  };
+  if (!f)
+    return null;
+  const m = Ne({
+    className: r,
+    variant: o
+  });
+  return /* @__PURE__ */ h("div", {
+    role: "text",
+    className: m.main,
+    children: [
+      l && /* @__PURE__ */ t("span", {
+        className: "sr-only",
+        children: l
+      }),
+      /* @__PURE__ */ t("span", {
+        children: e
+      }),
+      i && /* @__PURE__ */ t("button", {
+        type: "button",
+        onClick: g,
+        className: m.button,
+        "aria-label": "Close",
+        children: /* @__PURE__ */ t(oe, {
+          size: "size-3"
+        })
+      })
+    ]
+  });
+};
+function ve(e, r, o) {
+  return o && r > e ? `Showing ${H(`${e} chat`, e)} out of ${r}` : H(`${e} chat`, e);
+}
+const L = {
+  rowNumber: "dark:text-copy-medium",
+  summary: "dark:text-white sm:max-w-full text-xs sm:text-sm",
+  timestamp: "dark:text-copy-medium sm:whitespace-nowrap text-xs sm:text-sm max-w-20 sm:max-w-none",
+  tokenUsage: "dark:text-copy-medium text-xs sm:text-sm"
+};
+function Te({
+  item: e,
+  index: r,
+  onClickRestore: o,
+  onClickDelete: l,
+  onClickFavorite: i,
+  showTokenUsage: f = !0,
+  isActive: x = !1
+}) {
+  const g = e.timestamp.split(",")[0], m = e.similarityScore !== void 0 && e.similarityScore !== null ? Math.round(e.similarityScore * 100) : null, b = m !== null && m < 40 ? "warning" : "success", y = e.keywordMatch === !0, u = /* @__PURE__ */ t(
+    d,
+    {
+      className: I(L.summary),
+      style: { wordBreak: "break-word" },
+      children: /* @__PURE__ */ h("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ h("div", { className: "flex flex-wrap gap-1", children: [
+          m !== null && /* @__PURE__ */ t(
+            j,
+            {
+              variant: b,
+              label: `${m}% semantic`
+            }
+          ),
+          y && /* @__PURE__ */ t(j, { variant: "information", label: "keyword" })
+        ] }),
+        /* @__PURE__ */ t("span", { children: e.summary })
+      ] })
+    }
+  ), s = /* @__PURE__ */ t(d, { className: I(L.timestamp), children: g }), N = f ? /* @__PURE__ */ t(d, { align: "right", className: I(L.tokenUsage), children: e.tokenUsage ? me.format(e.tokenUsage) : "0" }) : null, a = /* @__PURE__ */ t(d, { align: "center", borderLeft: !0, children: /* @__PURE__ */ h("div", { className: "flex flex-col items-end sm:flex-row gap-2", children: [
+    /* @__PURE__ */ t(
+      z,
+      {
+        label: "Restore chat",
+        placement: "top",
+        trigger: /* @__PURE__ */ t(
+          U,
+          {
+            noBorder: !0,
+            label: "Restore chat",
+            variant: "primary",
+            onClick: async () => {
+              await o(e);
+            },
+            children: /* @__PURE__ */ t(
+              le,
+              {
+                size: "size-3",
+                monotone: !0,
+                className: "text-copy-success dark:text-copy-success-light"
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(
+      z,
+      {
+        label: e.favoriteChat ? "Remove from favorites" : "Add to favorites",
+        placement: "top",
+        trigger: /* @__PURE__ */ t(
+          U,
+          {
+            noBorder: !0,
+            label: e.favoriteChat ? "Remove from favorites" : "Add to favorites",
+            variant: "primary",
+            onClick: async () => {
+              await i(e);
+            },
+            children: e.favoriteChat ? /* @__PURE__ */ t(ae, { size: "size-4", monotone: !0 }) : /* @__PURE__ */ t(ce, { size: "size-4", monotone: !0 })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(
+      ee,
+      {
+        label: "Delete chat",
+        disabled: !1,
+        onClick: () => {
+          l(e);
+        }
+      }
+    )
+  ] }) });
+  return /* @__PURE__ */ h(q, { active: x, children: [
+    /* @__PURE__ */ t(d, { className: I(L.rowNumber), children: r + 1 }),
+    f ? /* @__PURE__ */ h(E, { children: [
+      u,
+      s,
+      N
+    ] }) : /* @__PURE__ */ h(E, { children: [
+      s,
+      u
+    ] }),
+    a
+  ] });
+}
+const Ae = ({
+  filteredHistory: e,
+  sortDirection: r,
+  sortedCell: o,
+  onSortChange: l,
+  onClickRestore: i,
+  onClickDelete: f,
+  onClickFavorite: x,
+  isLoading: g = !1,
+  totalHistoryCount: m,
+  isFiltered: b = !1,
+  isSearchActive: y = !1,
+  activeChatId: u
+}) => {
+  const s = ue(), N = D(null), a = D(!1);
+  v(() => {
+    if (!u || a.current)
+      return;
+    const p = e.findIndex(
+      (w) => w.id === u
+    );
+    if (p !== -1) {
+      a.current = !0;
+      const w = setTimeout(() => {
+        N.current?.scrollToIndex(p);
+      }, 100);
+      return () => clearTimeout(w);
+    }
+  }, [u, e]), v(() => {
+    a.current = !1;
+  }, [u]);
+  const T = ve(
+    e.length,
+    m ?? e.length,
+    b
+  );
+  return /* @__PURE__ */ h(
+    te,
+    {
+      stickyHeader: !0,
+      stickyFooter: !0,
+      compact: !0,
+      mode: "alt-system",
+      blurEffect: "medium",
+      columns: s ? ["auto", "auto", "1fr", "0.4fr"] : [
+        "auto",
+        "minmax(10px, 1fr)",
+        "0.3fr",
+        "0.3fr",
+        "0.3fr"
+      ],
+      wrapperClassName: I(
+        "max-h-[clamp(12rem,calc(100dvh-24rem),60dvh)]",
+        "sm:max-h-[clamp(12rem,calc(100dvh-24rem),60dvh)]"
+      ),
+      loading: g && e.length > 0,
+      children: [
+        /* @__PURE__ */ t(
+          we,
+          {
+            sortDirection: r,
+            sortedCell: o,
+            onSortChange: l,
+            caption: T,
+            isSearchActive: y,
+            showTokenUsage: !s
+          }
+        ),
+        g && e.length === 0 ? /* @__PURE__ */ t("div", { className: "p-4 text-center", role: "status", "aria-live": "polite", children: "Loading..." }) : /* @__PURE__ */ t(
+          ye,
+          {
+            ref: N,
+            data: e.filter((p) => p?.summary),
+            batchSize: fe,
+            threshold: de,
+            children: (p, w) => /* @__PURE__ */ t(
+              Te,
+              {
+                item: p,
+                index: w,
+                onClickRestore: i,
+                onClickDelete: f,
+                onClickFavorite: x,
+                showTokenUsage: !s,
+                isActive: u === p.id
+              },
+              `${ie.HISTORY.TITLE}-${p.id}-${w}`
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Ae as HistoryDataGrid
+};