@lunora/studio 1.0.0-alpha.3 → 1.0.0-alpha.30

package/dist/packem_chunks/vector-browser.js

@@ -0,0 +1,281 @@
+import { c } from 'react/compiler-runtime';
+import { useLunora } from '@lunora/react';
+import { useState, useEffect } from 'react';
+import { B as Button } from '../packem_shared/button-BhsN2uZH.js';
+import { C as Card, a as CardContent } from '../packem_shared/card-DURq3ElK.js';
+import { E as EmptyState } from '../packem_shared/empty-state-DY_oe0k6.js';
+import { I as Input } from '../packem_shared/input-XH4r1Pt1.js';
+import { T as Table, a as TableHeader, b as TableRow, c as TableHead, d as TableBody, e as TableCell } from '../packem_shared/table-DsCa9Qp9.js';
+import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
+import { f as fireAndForget, e as errorMessage, d as formatCell } from '../packem_shared/internal-FcNZ3beb.js';
+import { jsxDEV } from 'react/jsx-dev-runtime';
+
+const DEFAULT_TOP_K = 10;
+const Detail = (t0) => {
+  const $ = c(7);
+  const {
+    label,
+    value
+  } = t0;
+  let t1;
+  if ($[0] !== label) {
+    t1 = /* @__PURE__ */ jsxDEV("span", {
+      className: "font-mono text-[11px] uppercase tracking-wide text-muted-foreground",
+      children: label
+    }, void 0, false);
+    $[0] = label;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = value ?? "—";
+  let t3;
+  if ($[2] !== t2) {
+    t3 = /* @__PURE__ */ jsxDEV("span", {
+      className: "font-mono text-sm",
+      children: t2
+    }, void 0, false);
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== t1 || $[5] !== t3) {
+    t4 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-col gap-0.5",
+      children: [t1, t3]
+    }, void 0, true);
+    $[4] = t1;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  return t4;
+};
+const VectorBrowser = ({
+  loadIndexes,
+  runQuery
+} = {}) => {
+  const client = useLunora();
+  const t = useT();
+  const [indexes, setIndexes] = useState(null);
+  const [error, setError] = useState(null);
+  const [selected, setSelected] = useState(null);
+  const [queryText, setQueryText] = useState("");
+  const [matches, setMatches] = useState(null);
+  const [queryError, setQueryError] = useState(null);
+  const [searching, setSearching] = useState(false);
+  useEffect(() => {
+    const token = {
+      cancelled: false
+    };
+    fireAndForget((async () => {
+      try {
+        const result = await (loadIndexes ?? (() => client.listVectorIndexes()))();
+        if (!token.cancelled) {
+          setIndexes(result);
+          setError(null);
+          setSelected((current) => current ?? result[0]?.name ?? null);
+        }
+      } catch (error_) {
+        if (!token.cancelled) {
+          setIndexes(null);
+          setError(errorMessage(error_));
+        }
+      }
+    })());
+    return () => {
+      token.cancelled = true;
+    };
+  }, [client, loadIndexes]);
+  const selectedIndex = indexes?.find((index) => index.name === selected) ?? null;
+  const onSelect = (event) => {
+    setSelected(event.currentTarget.dataset.index ?? null);
+    setMatches(null);
+    setQueryError(null);
+  };
+  const onQueryTextChange = (event_0) => {
+    setQueryText(event_0.target.value);
+  };
+  const search = async () => {
+    const text = queryText.trim();
+    if (selected === null || text === "") {
+      return;
+    }
+    setSearching(true);
+    setQueryError(null);
+    try {
+      const result_0 = await (runQuery ?? ((options) => client.queryVectorIndex(options)))({
+        name: selected,
+        text,
+        topK: DEFAULT_TOP_K
+      });
+      setMatches(result_0);
+    } catch (error__0) {
+      setMatches(null);
+      setQueryError(errorMessage(error__0));
+    } finally {
+      setSearching(false);
+    }
+  };
+  const onSearch = () => {
+    fireAndForget(search());
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex flex-col gap-4",
+    "data-testid": "lunora-vector-browser",
+    children: [error !== null && /* @__PURE__ */ jsxDEV("p", {
+      className: "text-sm text-destructive",
+      "data-testid": "vector-error",
+      role: "alert",
+      children: error
+    }, void 0, false), indexes !== null && indexes.length === 0 && /* @__PURE__ */ jsxDEV(EmptyState, {
+      description: t("Indexes declared with .vectorize() or defineVectorIndex() appear here."),
+      icon: /* @__PURE__ */ jsxDEV("svg", {
+        "aria-hidden": "true",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.6,
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsxDEV("path", {
+          d: "M4 7l8-4 8 4-8 4-8-4Zm0 5 8 4 8-4M4 17l8 4 8-4"
+        }, void 0, false)
+      }, void 0, false),
+      testId: "vector-empty",
+      title: t("No vector indexes.")
+    }, void 0, false), indexes !== null && indexes.length > 0 && /* @__PURE__ */ jsxDEV(Card, {
+      className: "overflow-hidden py-0",
+      children: /* @__PURE__ */ jsxDEV(CardContent, {
+        className: "px-0",
+        children: /* @__PURE__ */ jsxDEV(Table, {
+          "data-testid": "vector-table",
+          children: [/* @__PURE__ */ jsxDEV(TableHeader, {
+            children: /* @__PURE__ */ jsxDEV(TableRow, {
+              children: [/* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("name")
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("table")
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("dimensions")
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("metric")
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("vectors")
+              }, void 0, false)]
+            }, void 0, true)
+          }, void 0, false), /* @__PURE__ */ jsxDEV(TableBody, {
+            children: indexes.map((index_0) => /* @__PURE__ */ jsxDEV(TableRow, {
+              className: index_0.name === selected ? "border-l-2 border-l-royal-amethyst bg-muted/50" : "cursor-pointer",
+              "data-index": index_0.name,
+              "data-testid": `vector-row-${index_0.name}`,
+              onClick: onSelect,
+              children: [/* @__PURE__ */ jsxDEV(TableCell, {
+                className: "font-mono text-xs",
+                children: index_0.name
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                className: "font-mono text-xs",
+                children: index_0.table
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                className: "tabular-nums",
+                children: index_0.dimensions ?? "—"
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                children: index_0.metric ?? "—"
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                className: "tabular-nums",
+                children: index_0.vectorsCount ?? "—"
+              }, void 0, false)]
+            }, index_0.name, true))
+          }, void 0, false)]
+        }, void 0, true)
+      }, void 0, false)
+    }, void 0, false), selectedIndex !== null && /* @__PURE__ */ jsxDEV("section", {
+      className: "border border-border bg-card p-3",
+      "data-testid": "vector-detail",
+      children: [/* @__PURE__ */ jsxDEV("div", {
+        className: "grid grid-cols-2 gap-3 sm:grid-cols-4",
+        children: [/* @__PURE__ */ jsxDEV(Detail, {
+          label: t("field"),
+          value: selectedIndex.field
+        }, void 0, false), /* @__PURE__ */ jsxDEV(Detail, {
+          label: t("dimensions"),
+          value: selectedIndex.dimensions
+        }, void 0, false), /* @__PURE__ */ jsxDEV(Detail, {
+          label: t("metric"),
+          value: selectedIndex.metric
+        }, void 0, false), /* @__PURE__ */ jsxDEV(Detail, {
+          label: t("vectors"),
+          value: selectedIndex.vectorsCount
+        }, void 0, false)]
+      }, void 0, true), selectedIndex.metadata !== void 0 && selectedIndex.metadata.length > 0 && /* @__PURE__ */ jsxDEV("p", {
+        className: "mt-3 text-xs text-muted-foreground",
+        "data-testid": "vector-metadata",
+        children: [t("metadata"), ": ", /* @__PURE__ */ jsxDEV("span", {
+          className: "font-mono",
+          children: selectedIndex.metadata.join(", ")
+        }, void 0, false)]
+      }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+        className: "mt-3 flex flex-wrap items-center gap-2",
+        children: [/* @__PURE__ */ jsxDEV(Input, {
+          className: "min-w-[18rem] flex-1",
+          "data-testid": "vector-query-input",
+          onChange: onQueryTextChange,
+          placeholder: t("Search by similarity…"),
+          value: queryText
+        }, void 0, false), /* @__PURE__ */ jsxDEV(Button, {
+          "data-testid": "vector-search",
+          disabled: searching || queryText.trim() === "",
+          onClick: onSearch,
+          children: searching ? t("Searching…") : t("Search")
+        }, void 0, false)]
+      }, void 0, true), queryError !== null && /* @__PURE__ */ jsxDEV("p", {
+        className: "mt-2 text-sm text-destructive",
+        "data-testid": "vector-query-error",
+        role: "alert",
+        children: queryError
+      }, void 0, false), matches !== null && matches.length === 0 && /* @__PURE__ */ jsxDEV("p", {
+        className: "mt-2 text-sm text-muted-foreground",
+        "data-testid": "vector-no-matches",
+        children: t("No matches.")
+      }, void 0, false), matches !== null && matches.length > 0 && /* @__PURE__ */ jsxDEV(Card, {
+        className: "mt-3 overflow-hidden py-0",
+        children: /* @__PURE__ */ jsxDEV(CardContent, {
+          className: "px-0",
+          children: /* @__PURE__ */ jsxDEV(Table, {
+            "data-testid": "vector-matches",
+            children: [/* @__PURE__ */ jsxDEV(TableHeader, {
+              children: /* @__PURE__ */ jsxDEV(TableRow, {
+                children: [/* @__PURE__ */ jsxDEV(TableHead, {
+                  children: t("id")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  children: t("score")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  children: t("metadata")
+                }, void 0, false)]
+              }, void 0, true)
+            }, void 0, false), /* @__PURE__ */ jsxDEV(TableBody, {
+              children: matches.map((match) => /* @__PURE__ */ jsxDEV(TableRow, {
+                "data-testid": `vector-match-${match.id}`,
+                children: [/* @__PURE__ */ jsxDEV(TableCell, {
+                  className: "font-mono text-xs",
+                  children: match.id
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                  className: "tabular-nums",
+                  children: match.score.toFixed(4)
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                  className: "max-w-md truncate font-mono text-xs",
+                  children: match.metadata === void 0 ? "—" : formatCell(match.metadata)
+                }, void 0, false)]
+              }, match.id, true))
+            }, void 0, false)]
+          }, void 0, true)
+        }, void 0, false)
+      }, void 0, false)]
+    }, void 0, true)]
+  }, void 0, true);
+};
+
+export { VectorBrowser };