@versini/sassysaint 8.118.4 → 8.119.0

package/dist/chunks/HistoryDataGrid.Bg984Jd_.js

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