@tablestore/tablestore-agent-cli 0.3.1 → 0.4.0

package/dist/dashboard-runtime/dashboard/src/components/wiki/wiki-pages-panel.tsx

@@ -0,0 +1,424 @@
+"use client";
+
+import {
+  useEffect,
+  useMemo,
+  useReducer,
+  useState,
+  type FormEvent,
+} from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  FileText,
+  Folder,
+  FolderOpen,
+  Search,
+} from "lucide-react";
+
+import { Markdown } from "@/components/qa/markdown";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  useSearchWikiPages,
+  useWikiPage,
+  useWikiPages,
+} from "@/hooks/use-wikis";
+import { useI18n } from "@/i18n/i18n-context";
+import {
+  buildWikiPageTree,
+  expandWikiPageAncestors,
+  flattenWikiPageTree,
+  mergeWikiPages,
+  toggleWikiDirectory,
+} from "@/lib/wiki-page-tree";
+import { ApiClientError } from "@/services/api-client";
+import type { WikiPage, WikiScope } from "@/types/wiki";
+import { cn } from "@/lib/utils";
+
+interface WikiPagePanelProps {
+  memoryStoreName: string;
+  scope: WikiScope;
+  enabled: boolean;
+  selectedPagePath?: string;
+  onOpenPage: (path: string) => void;
+}
+
+export interface WikiSearchState {
+  draft: string;
+  submitted: string;
+}
+
+export const INITIAL_WIKI_SEARCH_STATE: WikiSearchState = {
+  draft: "",
+  submitted: "",
+};
+
+export type WikiSearchAction =
+  { type: "draft"; value: string } | { type: "submit" };
+
+export function reduceWikiSearchState(
+  state: WikiSearchState,
+  action: WikiSearchAction,
+): WikiSearchState {
+  if (action.type === "draft") return { ...state, draft: action.value };
+  return { ...state, submitted: state.draft.trim() };
+}
+
+export function openWikiSearchResult(
+  page: Pick<WikiPage, "path">,
+  onOpenPage: (path: string) => void,
+): void {
+  onOpenPage(page.path);
+}
+
+export function WikiPagesPanel(props: WikiPagePanelProps) {
+  const { t } = useI18n();
+  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set());
+  const list = useWikiPages(props.memoryStoreName, props.scope, {
+    limit: 100,
+    enabled: props.enabled,
+  });
+  const pages = useMemo(
+    () => mergeWikiPages(...(list.data?.pages.map((page) => page.pages) ?? [])),
+    [list.data],
+  );
+  const tree = useMemo(() => buildWikiPageTree(pages), [pages]);
+  const rows = useMemo(
+    () => flattenWikiPageTree(tree, collapsed),
+    [collapsed, tree],
+  );
+  const exactPage = useWikiPage(
+    props.memoryStoreName,
+    props.scope,
+    props.enabled && props.selectedPagePath
+      ? {
+          path: props.selectedPagePath,
+        }
+      : undefined,
+  );
+
+  useEffect(() => {
+    const selectedPagePath = props.selectedPagePath;
+    if (!selectedPagePath) return;
+    setCollapsed((current) =>
+      expandWikiPageAncestors(current, selectedPagePath),
+    );
+  }, [props.selectedPagePath]);
+
+  if (!props.enabled) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        {t("wiki.detail.noReadableBuild")}
+      </p>
+    );
+  }
+
+  return (
+    <div className="grid min-h-[480px] gap-4 lg:grid-cols-[320px_1fr]">
+      <aside className="rounded-xl border p-3">
+        <p className="mb-2 text-xs text-muted-foreground">
+          {t("wiki.pages.metadataOnly")}
+        </p>
+        <p className="mb-2 text-[11px] text-muted-foreground">
+          {t("wiki.pages.loadedTreeLimitation")}
+        </p>
+        <ul className="space-y-1" role="tree">
+          {rows.map(({ node, depth }) => {
+            const indent = { paddingLeft: `${depth * 12 + 8}px` };
+            if (node.type === "dir") {
+              const open = !collapsed.has(node.rel);
+              return (
+                <li key={`dir:${node.rel}`} role="none">
+                  <button
+                    type="button"
+                    role="treeitem"
+                    aria-expanded={open}
+                    aria-selected={false}
+                    aria-label={t(
+                      open
+                        ? "wiki.pages.collapseDirectory"
+                        : "wiki.pages.expandDirectory",
+                      { name: node.name },
+                    )}
+                    className="flex w-full items-center gap-1 rounded-md py-1.5 pr-2 text-left text-sm hover:bg-muted"
+                    style={indent}
+                    onClick={() =>
+                      setCollapsed((current) =>
+                        toggleWikiDirectory(current, node.rel),
+                      )
+                    }
+                  >
+                    {open ? (
+                      <ChevronDown className="h-3.5 w-3.5 shrink-0" />
+                    ) : (
+                      <ChevronRight className="h-3.5 w-3.5 shrink-0" />
+                    )}
+                    {open ? (
+                      <FolderOpen className="h-3.5 w-3.5 shrink-0 text-primary" />
+                    ) : (
+                      <Folder className="h-3.5 w-3.5 shrink-0 text-primary" />
+                    )}
+                    <span className="truncate font-mono">{node.name}</span>
+                  </button>
+                </li>
+              );
+            }
+
+            const selected = props.selectedPagePath === node.originalPath;
+            return (
+              <li key={`file:${node.originalPath}`} role="none">
+                <button
+                  type="button"
+                  role="treeitem"
+                  aria-current={selected ? "page" : undefined}
+                  aria-selected={selected}
+                  aria-label={
+                    selected
+                      ? t("wiki.pages.selectedPage", { name: node.name })
+                      : undefined
+                  }
+                  className={cn(
+                    "flex w-full items-center gap-1.5 rounded-md py-1.5 pr-2 text-left text-sm hover:bg-muted",
+                    selected && "bg-primary-soft text-primary",
+                  )}
+                  style={indent}
+                  title={t("wiki.pages.fullPath", {
+                    path: node.originalPath,
+                  })}
+                  onClick={() => props.onOpenPage(node.originalPath)}
+                >
+                  <span className="h-3.5 w-3.5 shrink-0" />
+                  <FileText className="h-3.5 w-3.5 shrink-0" />
+                  <span className="truncate font-mono">{node.name}</span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+        {list.hasNextPage ? (
+          <Button
+            className="mt-3 w-full"
+            variant="outline"
+            size="sm"
+            disabled={list.isFetchingNextPage}
+            onClick={() => list.fetchNextPage()}
+          >
+            {list.isFetchingNextPage
+              ? t("common.loading")
+              : t("wiki.pages.loadMore")}
+          </Button>
+        ) : null}
+        {list.error ? (
+          <>
+            <WikiError error={list.error} />
+            <Button
+              className="mt-2"
+              variant="outline"
+              size="sm"
+              onClick={list.resetWikiPages}
+            >
+              {t("wiki.pages.resetFromFirst")}
+            </Button>
+          </>
+        ) : null}
+      </aside>
+      <section className="min-w-0 rounded-xl border p-5">
+        {exactPage.isLoading ? (
+          <p className="text-sm text-muted-foreground">{t("common.loading")}</p>
+        ) : null}
+        {exactPage.error ? <WikiError error={exactPage.error} /> : null}
+        {exactPage.data ? (
+          <WikiPageReader page={exactPage.data} onOpenPage={props.onOpenPage} />
+        ) : !props.selectedPagePath && !exactPage.isLoading ? (
+          <p className="text-sm text-muted-foreground">
+            {t("wiki.pages.selectHint")}
+          </p>
+        ) : null}
+      </section>
+    </div>
+  );
+}
+
+export function WikiSearchPanel(
+  props: Omit<WikiPagePanelProps, "selectedPagePath">,
+) {
+  const { t } = useI18n();
+  const [searchState, dispatchSearch] = useReducer(
+    reduceWikiSearchState,
+    INITIAL_WIKI_SEARCH_STATE,
+  );
+  const search = useSearchWikiPages(props.memoryStoreName, props.scope, {
+    query: searchState.submitted,
+    limit: 50,
+    enabled: props.enabled && searchState.submitted.length > 0,
+  });
+
+  function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    if (!props.enabled) return;
+    dispatchSearch({ type: "submit" });
+  }
+
+  return (
+    <div className="space-y-4">
+      <form className="flex gap-2" onSubmit={handleSubmit}>
+        <Input
+          value={searchState.draft}
+          onChange={(event) =>
+            dispatchSearch({ type: "draft", value: event.target.value })
+          }
+          placeholder={t("wiki.search.placeholder")}
+        />
+        <Button
+          type="submit"
+          disabled={
+            !props.enabled || !searchState.draft.trim() || search.isFetching
+          }
+        >
+          <Search className="h-4 w-4" /> {t("wiki.search.submit")}
+        </Button>
+      </form>
+      {!props.enabled ? (
+        <p className="text-sm text-muted-foreground">
+          {t("wiki.detail.noReadableBuild")}
+        </p>
+      ) : null}
+      {props.enabled && search.error ? (
+        <WikiError error={search.error} />
+      ) : null}
+      <ol className="space-y-2">
+        {props.enabled
+          ? search.data?.pages.map((page) => (
+              <li key={page.path}>
+                <button
+                  type="button"
+                  className="w-full rounded-xl border p-3 text-left hover:bg-muted"
+                  onClick={() => openWikiSearchResult(page, props.onOpenPage)}
+                >
+                  <span className="font-medium">{page.title || page.path}</span>
+                  <span className="ml-2 font-mono text-xs text-muted-foreground">
+                    {page.path}
+                  </span>
+                  {page.score !== undefined ? (
+                    <Badge className="ml-2" variant="secondary">
+                      {t("wiki.search.score", { score: page.score })}
+                    </Badge>
+                  ) : null}
+                  {page.description ? (
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {page.description}
+                    </p>
+                  ) : null}
+                </button>
+              </li>
+            ))
+          : null}
+      </ol>
+      {props.enabled &&
+      searchState.submitted &&
+      !search.isFetching &&
+      search.data?.pages.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          {t("wiki.search.empty")}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function WikiPageReader({
+  page,
+  onOpenPage,
+}: {
+  page: WikiPage;
+  onOpenPage: (path: string) => void;
+}) {
+  const { t } = useI18n();
+  return (
+    <article>
+      <h2 className="text-xl font-semibold">{page.title || page.path}</h2>
+      <p className="mt-1 break-all font-mono text-xs text-muted-foreground">
+        {page.path}
+      </p>
+      <div className="mt-3 flex flex-wrap gap-2">
+        {page.type ? <Badge variant="secondary">{page.type}</Badge> : null}
+      </div>
+      {page.description ? (
+        <p className="mt-3 text-sm text-muted-foreground">{page.description}</p>
+      ) : null}
+      <Markdown className="mt-5">{page.content ?? ""}</Markdown>
+      <PageMetadata title={t("wiki.pages.sources")} values={page.sources} />
+      <PageMetadata
+        title={t("wiki.pages.incomingLinks")}
+        values={page.incomingLinks}
+        onOpen={onOpenPage}
+      />
+      <PageMetadata
+        title={t("wiki.pages.outgoingLinks")}
+        values={page.outgoingLinks}
+        onOpen={onOpenPage}
+      />
+      <p className="mt-3 text-xs text-muted-foreground">
+        {t("wiki.pages.linksHint")}
+      </p>
+    </article>
+  );
+}
+
+function PageMetadata({
+  title,
+  values,
+  onOpen,
+}: {
+  title: string;
+  values?: string[];
+  onOpen?: (path: string) => void;
+}) {
+  if (!values?.length) return null;
+  return (
+    <section className="mt-5 border-t pt-3">
+      <h3 className="text-sm font-semibold">{title}</h3>
+      <div className="mt-2 flex flex-wrap gap-2">
+        {values.map((value) =>
+          onOpen ? (
+            <button
+              key={value}
+              type="button"
+              className="rounded bg-muted px-2 py-1 font-mono text-xs hover:text-primary"
+              onClick={() => onOpen(value)}
+            >
+              {value}
+            </button>
+          ) : (
+            <code key={value} className="rounded bg-muted px-2 py-1 text-xs">
+              {value}
+            </code>
+          ),
+        )}
+      </div>
+    </section>
+  );
+}
+
+function WikiError({ error }: { error: Error }) {
+  const { t } = useI18n();
+  const apiError = error instanceof ApiClientError ? error : undefined;
+  return (
+    <div className="mt-3 rounded-md border border-danger/30 bg-danger-soft p-3 text-sm text-danger">
+      <p>{apiError?.displayMessage ?? error.message}</p>
+      {apiError?.requestId ? (
+        <p className="mt-1 font-mono text-xs">
+          {t("wiki.detail.requestId")}: {apiError.requestId}
+        </p>
+      ) : null}
+      {apiError?.details?.upstreamRequestId ? (
+        <p className="mt-1 font-mono text-xs">
+          {t("wiki.detail.upstreamRequestId")}:{" "}
+          {apiError.details.upstreamRequestId}
+        </p>
+      ) : null}
+    </div>
+  );
+}