@tablestore/tablestore-agent-cli 0.4.0 → 0.4.1

package/dist/dashboard-runtime/dashboard/src/components/memory/scope-directory-explorer.tsx

@@ -0,0 +1,384 @@
+"use client";
+
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  BookOpen,
+  ChevronLeft,
+  ChevronRight,
+  MessagesSquare,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { CopyableId } from "@/components/shared/copyable-id";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useI18n } from "@/i18n/i18n-context";
+import {
+  buildScopeDirectoryFilter,
+  buildScopeDirectoryStateKey,
+  buildScopeDirectoryWorkspaceHref,
+  isScopeDirectoryUnsupported,
+  type ScopeDirectoryMatchOp,
+  type ScopeDirectoryTypeFilter,
+} from "@/lib/scope-directory";
+import { queryKeys } from "@/lib/query-keys";
+import { useRuntimeContext } from "@/providers/runtime-context-provider";
+import { queryMemoryStoreScopes } from "@/services/memory";
+import type {
+  MemoryScopeDirectoryEntry,
+  ScopeDirectoryRequest,
+} from "@/types/memory";
+
+const PAGE_SIZE = 20;
+const ALL_CONVERSATION_SCOPES = {
+  appId: "*",
+  tenantId: "*",
+  agentId: "*",
+  runId: "*",
+};
+
+export function ScopeDirectoryExplorer({
+  memoryStoreName,
+}: {
+  memoryStoreName: string;
+}) {
+  const { context, ready } = useRuntimeContext();
+  return (
+    <ScopeDirectoryExplorerContent
+      key={buildScopeDirectoryStateKey(context.dataScopeKey, memoryStoreName)}
+      memoryStoreName={memoryStoreName}
+      dataScopeKey={context.dataScopeKey}
+      ready={ready}
+    />
+  );
+}
+
+function ScopeDirectoryExplorerContent({
+  memoryStoreName,
+  dataScopeKey,
+  ready,
+}: {
+  memoryStoreName: string;
+  dataScopeKey: string;
+  ready: boolean;
+}) {
+  const { t } = useI18n();
+  const [scopeType, setScopeType] =
+    useState<ScopeDirectoryTypeFilter>("conversation");
+  const [field, setField] = useState("appId");
+  const [op, setOp] = useState<ScopeDirectoryMatchOp>("eq");
+  const [value, setValue] = useState("");
+  const [tokenStack, setTokenStack] = useState<string[]>([]);
+  const [request, setRequest] = useState<ScopeDirectoryRequest>({
+    scope: ALL_CONVERSATION_SCOPES,
+    limit: PAGE_SIZE,
+  });
+
+  const requestKey = useMemo(() => JSON.stringify(request), [request]);
+  const query = useQuery({
+    queryKey: queryKeys.memoryScopeDirectory(
+      dataScopeKey,
+      memoryStoreName,
+      requestKey,
+    ),
+    queryFn: () => queryMemoryStoreScopes(memoryStoreName, request),
+    enabled: ready && Boolean(memoryStoreName),
+    placeholderData: keepPreviousData,
+  });
+
+  function submit(event: React.FormEvent) {
+    event.preventDefault();
+    setTokenStack([]);
+    const trimmedValue = value.trim();
+    setRequest(
+      scopeType === "conversation" && !trimmedValue
+        ? { scope: ALL_CONVERSATION_SCOPES, limit: PAGE_SIZE }
+        : {
+            filter: buildScopeDirectoryFilter({
+              scopeType,
+              field,
+              op,
+              value: trimmedValue,
+            }),
+            limit: PAGE_SIZE,
+          },
+    );
+  }
+
+  function nextPage() {
+    const token = query.data?.nextToken;
+    if (!token) return;
+    setTokenStack((current) => [...current, request.nextToken ?? ""]);
+    setRequest((current) => ({ ...current, nextToken: token }));
+  }
+
+  function previousPage() {
+    const previous = tokenStack.at(-1);
+    if (previous === undefined) return;
+    setTokenStack((current) => current.slice(0, -1));
+    setRequest((current) => ({
+      ...current,
+      ...(previous ? { nextToken: previous } : { nextToken: undefined }),
+    }));
+  }
+
+  const items = query.data?.items ?? [];
+  const usedFilter = request.filter !== undefined;
+  const filterMayBeUnsupported = isScopeDirectoryUnsupported(
+    query.error,
+    usedFilter,
+  );
+  const queryErrorMessage =
+    query.error instanceof Error ? query.error.message : "";
+  return (
+    <section
+      className="space-y-4 rounded-xl border bg-card p-5"
+      data-testid="scope-directory-explorer"
+    >
+      <header className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <div className="flex items-center gap-2">
+            <h2 className="text-lg font-semibold">
+              {t("memory.scopeDirectory.title")}
+            </h2>
+            <Badge variant="secondary">Beta</Badge>
+          </div>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {t("memory.scopeDirectory.description")}
+          </p>
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => query.refetch()}
+          disabled={query.isFetching}
+        >
+          {t("memory.common.refresh")}
+        </Button>
+      </header>
+
+      <form
+        onSubmit={submit}
+        className="grid gap-3 rounded-lg bg-muted/30 p-3 md:grid-cols-[160px_150px_130px_1fr_auto] md:items-end"
+      >
+        <div className="space-y-1.5">
+          <Label>{t("memory.scopeDirectory.scopeType")}</Label>
+          <Select
+            value={scopeType}
+            onValueChange={(next) =>
+              setScopeType(next as ScopeDirectoryTypeFilter)
+            }
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">
+                {t("memory.scopeDirectory.allTypes")}
+              </SelectItem>
+              <SelectItem value="conversation">conversation</SelectItem>
+              <SelectItem value="wiki">wiki</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1.5">
+          <Label>{t("memory.scopeDirectory.field")}</Label>
+          <Select value={field} onValueChange={setField}>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {[
+                "appId",
+                "tenantId",
+                "agentId",
+                "runId",
+                "wikiId",
+                "scopeKey",
+              ].map((name) => (
+                <SelectItem key={name} value={name}>
+                  {name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1.5">
+          <Label>{t("memory.scopeDirectory.operator")}</Label>
+          <Select
+            value={op}
+            onValueChange={(next) => setOp(next as ScopeDirectoryMatchOp)}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="eq">eq</SelectItem>
+              <SelectItem value="prefix">prefix</SelectItem>
+              <SelectItem value="wildcard">wildcard</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1.5">
+          <Label>{t("memory.scopeDirectory.value")}</Label>
+          <Input
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
+            placeholder={op === "wildcard" ? "assistant-*" : "app-001"}
+          />
+        </div>
+        <Button type="submit">{t("memory.scopeDirectory.query")}</Button>
+      </form>
+
+      {query.isPending ? (
+        <p className="py-8 text-center text-sm text-muted-foreground">
+          {t("memory.common.querying")}
+        </p>
+      ) : query.isError ? (
+        <div
+          className={
+            filterMayBeUnsupported
+              ? "rounded-lg border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-800 dark:text-amber-200"
+              : "rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive"
+          }
+        >
+          {filterMayBeUnsupported
+            ? t("memory.scopeDirectory.unsupported")
+            : t("memory.scopeDirectory.failed")}
+          {queryErrorMessage ? (
+            <p className="mt-1 break-all font-mono text-xs opacity-80">
+              {queryErrorMessage}
+            </p>
+          ) : null}
+        </div>
+      ) : items.length === 0 ? (
+        <p className="py-8 text-center text-sm text-muted-foreground">
+          {t("memory.scopeDirectory.empty")}
+        </p>
+      ) : (
+        <div className="overflow-x-auto rounded-lg border">
+          <table className="w-full min-w-[760px] text-sm">
+            <thead className="bg-muted/50 text-left text-xs text-muted-foreground">
+              <tr>
+                <th className="px-3 py-2">{t("memory.scopeDirectory.type")}</th>
+                <th className="px-3 py-2">
+                  {t("memory.scopeDirectory.dimensions")}
+                </th>
+                <th className="px-3 py-2">scopeKey</th>
+                <th className="px-3 py-2 text-right">
+                  {t("memory.scopeDirectory.action")}
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {items.map((item) => (
+                <ScopeDirectoryRow
+                  key={`${item.scopeType}:${item.scopeKey}`}
+                  item={item}
+                  store={memoryStoreName}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <footer className="flex items-center justify-between">
+        <span className="text-xs text-muted-foreground">
+          {t("memory.scopeDirectory.page", { page: tokenStack.length + 1 })}
+        </span>
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={previousPage}
+            disabled={
+              tokenStack.length === 0 || query.isFetching || query.isError
+            }
+          >
+            <ChevronLeft className="h-4 w-4" />
+            {t("common.prevPage")}
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={nextPage}
+            disabled={
+              !query.data?.nextToken || query.isFetching || query.isError
+            }
+          >
+            {t("common.nextPage")}
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </footer>
+    </section>
+  );
+}
+
+function ScopeDirectoryRow({
+  item,
+  store,
+}: {
+  item: MemoryScopeDirectoryEntry;
+  store: string;
+}) {
+  const { t } = useI18n();
+  const entryFields = item as unknown as Record<string, unknown>;
+  const dimensions = ["appId", "tenantId", "agentId", "runId", "wikiId"]
+    .flatMap((key) => {
+      const value = entryFields[key];
+      return typeof value === "string" && value.length > 0
+        ? [`${key}=${value}`]
+        : [];
+    })
+    .join(" · ");
+  const conversation = item.scopeType === "conversation";
+  const workspaceHref = buildScopeDirectoryWorkspaceHref(store, item);
+  return (
+    <tr>
+      <td className="px-3 py-3">
+        <Badge variant={conversation ? "outline" : "secondary"}>
+          {conversation ? (
+            <MessagesSquare className="mr-1 h-3 w-3" />
+          ) : (
+            <BookOpen className="mr-1 h-3 w-3" />
+          )}
+          {item.scopeType}
+        </Badge>
+      </td>
+      <td className="px-3 py-3 font-mono text-xs">{dimensions}</td>
+      <td className="max-w-[280px] px-3 py-3">
+        <CopyableId value={item.scopeKey} label="" />
+      </td>
+      <td className="px-3 py-3 text-right">
+        {workspaceHref ? (
+          <Button asChild size="sm" variant="ghost">
+            <Link href={workspaceHref}>{t("memory.scopeDirectory.open")}</Link>
+          </Button>
+        ) : (
+          <span className="text-xs text-muted-foreground">
+            {t(
+              conversation
+                ? "memory.scopeDirectory.exactScopeRequired"
+                : "memory.scopeDirectory.wikiOnly",
+            )}
+          </span>
+        )}
+      </td>
+    </tr>
+  );
+}