@tablestore/tablestore-agent-cli 0.2.1 → 0.2.4

package/dist/dashboard-runtime/dashboard/src/components/documents/doc-detail-panel.tsx

@@ -1,108 +1,610 @@
 'use client';
 
-import { X, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { X, Trash2, Pencil, Plus } from "lucide-react";
+import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import { JsonViewer } from "@/components/shared/json-viewer";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Skeleton } from "@/components/ui/skeleton";
 import { RelativeTime } from "@/components/shared/relative-time";
+import { MetadataFieldInput } from "@/components/shared/metadata-field-input";
+import { useDocument } from "@/hooks/use-document";
+import { useUpdateDocument } from "@/hooks/use-update-document";
+import {
+  convertMetadataValues,
+  metadataToFormValues,
+} from "@/lib/metadata-form";
 import { DocStatusBadge } from "./doc-status-badge";
-import type { Document } from "@/types/knowledge-base";
+import type {
+  Document,
+  MetadataField,
+  MetadataFieldType,
+} from "@/types/knowledge-base";
 
 interface DocDetailPanelProps {
   document: Document | null;
+  knowledgeBaseName: string;
+  metadataFields?: MetadataField[];
+  subspace?: string;
   onClose: () => void;
   onDelete?: (document: Document) => void;
 }
 
 export function DocDetailPanel({
   document,
+  knowledgeBaseName,
+  metadataFields,
+  subspace,
   onClose,
   onDelete,
 }: DocDetailPanelProps) {
-  if (!document) return null;
+  const hasSchema = !!metadataFields && metadataFields.length > 0;
+
+  // Fetch fresh — listDocuments omits the metadata field, so the document
+  // prop coming from the table never has it. Fall back to the prop for
+  // non-metadata fields while the fetch is in flight.
+  const { data: fresh, isLoading: freshLoading } = useDocument(
+    knowledgeBaseName,
+    document?.docId,
+    { subspace, enabled: !!document },
+  );
+  const data = fresh ?? document;
 
   return (
     <>
-    {/* 遮罩层 - 点击关闭面板 */}
-    <div className="fixed inset-0 z-40 bg-black/20 animate-in fade-in duration-200" onClick={onClose} />
-    <div className="fixed inset-y-0 right-0 z-50 w-105 border-l border-[hsl(var(--border))] bg-[hsl(var(--background))] shadow-lg overflow-y-auto animate-in slide-in-from-right duration-300">
-      <div className="sticky top-0 z-10 flex items-center justify-between border-b border-[hsl(var(--border))] bg-[hsl(var(--background))] px-6 py-4">
-        <h3 className="text-lg font-semibold">文档详情</h3>
-        <Button variant="ghost" size="icon" onClick={onClose}>
-          <X className="h-4 w-4" />
-        </Button>
-      </div>
+      {document ? (
+        <DetailPanelInner
+          data={data}
+          metadataFields={metadataFields}
+          knowledgeBaseName={knowledgeBaseName}
+          subspace={subspace}
+          hasSchema={hasSchema}
+          metadataLoading={freshLoading && !fresh}
+          onClose={onClose}
+          onDelete={onDelete}
+        />
+      ) : null}
+    </>
+  );
+}
 
-      <div className="space-y-6 p-6">
-        {/* 基本信息 */}
-        <section className="space-y-3">
-          <DetailRow label="文档 ID" value={document.docId} mono />
-          <DetailRow label="OSS Key" value={document.ossKey} mono />
-          <div className="flex items-start justify-between gap-4">
-            <span className="text-sm text-muted-foreground shrink-0">子空间</span>
-            {document.subspace ? (
-              <code className="rounded bg-[hsl(var(--muted))] px-1.5 py-0.5 font-mono text-xs">
-                {document.subspace}
-              </code>
-            ) : (
-              <span className="text-sm">—</span>
-            )}
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-muted-foreground">状态</span>
-            <DocStatusBadge status={document.status} />
-          </div>
-          {document.eTag && (
-            <DetailRow label="ETag" value={document.eTag} mono />
+function DetailPanelInner({
+  data,
+  metadataFields,
+  knowledgeBaseName,
+  subspace,
+  hasSchema,
+  metadataLoading,
+  onClose,
+  onDelete,
+}: {
+  data: Document | null;
+  metadataFields?: MetadataField[];
+  knowledgeBaseName: string;
+  subspace?: string;
+  hasSchema: boolean;
+  metadataLoading: boolean;
+  onClose: () => void;
+  onDelete?: (document: Document) => void;
+}) {
+  if (!data) return null;
+
+  return (
+    <>
+      {/* 遮罩层 - 点击关闭面板 */}
+      <div
+        className="fixed inset-0 z-40 bg-black/20 animate-in fade-in duration-200"
+        onClick={onClose}
+      />
+      <div className="fixed inset-y-0 right-0 z-50 w-105 border-l border-[hsl(var(--border))] bg-[hsl(var(--background))] shadow-lg overflow-y-auto animate-in slide-in-from-right duration-300">
+        <div className="sticky top-0 z-10 flex items-center justify-between border-b border-[hsl(var(--border))] bg-[hsl(var(--background))] px-6 py-4">
+          <h3 className="text-lg font-semibold">文档详情</h3>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="space-y-6 p-6">
+          {/* 基本信息 */}
+          <section className="space-y-3">
+            <DetailRow label="文档 ID" value={data.docId} mono />
+            <DetailRow label="OSS Key" value={data.ossKey} mono />
+            <div className="flex items-start justify-between gap-4">
+              <span className="text-sm text-muted-foreground shrink-0">子空间</span>
+              {data.subspace ? (
+                <code className="rounded bg-[hsl(var(--muted))] px-1.5 py-0.5 font-mono text-xs">
+                  {data.subspace}
+                </code>
+              ) : (
+                <span className="text-sm">—</span>
+              )}
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">状态</span>
+              <DocStatusBadge status={data.status} />
+            </div>
+            {data.eTag && <DetailRow label="ETag" value={data.eTag} mono />}
+            <DetailRow
+              label="切片数"
+              value={data.chunkNum?.toString() ?? "—"}
+            />
+          </section>
+
+          {/* Metadata */}
+          {hasSchema && metadataFields && (
+            <MetadataSection
+              fields={metadataFields}
+              metadata={data.metadata}
+              loading={metadataLoading}
+              knowledgeBaseName={knowledgeBaseName}
+              docId={data.docId}
+              subspace={subspace}
+            />
           )}
-          <DetailRow
-            label="切片数"
-            value={document.chunkNum?.toString() ?? "—"}
-          />
-        </section>
-
-        {/* Metadata */}
-        {document.metadata && Object.keys(document.metadata).length > 0 && (
-          <section className="space-y-2">
-            <h4 className="text-sm font-medium">Metadata</h4>
-            <JsonViewer data={document.metadata} />
+
+          {/* 时间信息 */}
+          <section className="space-y-3">
+            <h4 className="text-sm font-medium">时间信息</h4>
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">创建时间</span>
+              <RelativeTime timestamp={data.createdAt} />
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">更新时间</span>
+              <RelativeTime timestamp={data.updatedAt} />
+            </div>
           </section>
-        )}
 
-        {/* 时间信息 */}
-        <section className="space-y-3">
-          <h4 className="text-sm font-medium">时间信息</h4>
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-muted-foreground">创建时间</span>
-            <RelativeTime timestamp={document.createdAt} />
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-muted-foreground">更新时间</span>
-            <RelativeTime timestamp={document.updatedAt} />
+          {/* 失败详情 */}
+          {data.failedDetails && (
+            <section className="space-y-2">
+              <h4 className="text-sm font-medium text-destructive">失败详情</h4>
+              <p className="text-sm text-destructive/80 bg-destructive/5 rounded-md p-3">
+                {data.failedDetails}
+              </p>
+            </section>
+          )}
+
+          {/* 删除按钮 */}
+          <Button
+            variant="destructive"
+            className="w-full"
+            onClick={() => onDelete?.(data)}
+          >
+            <Trash2 className="mr-2 h-4 w-4" />
+            删除文档
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Metadata section — schema-driven display
+// ---------------------------------------------------------------------------
+
+type TypePalette = {
+  /** Tag background + text classes */
+  badge: string;
+  /** Vertical accent bar color (left side of each row) */
+  bar: string;
+};
+
+function getTypePalette(type: MetadataFieldType): TypePalette {
+  const base = type.replace(/_list$/, "") as
+    | "string"
+    | "long"
+    | "double"
+    | "boolean"
+    | "date";
+  switch (base) {
+    case "long":
+    case "double":
+      return {
+        badge:
+          "bg-amber-50 text-amber-700 ring-amber-200/70 dark:bg-amber-950/40 dark:text-amber-300 dark:ring-amber-500/30",
+        bar: "bg-amber-400/70 dark:bg-amber-500/60",
+      };
+    case "boolean":
+      return {
+        badge:
+          "bg-violet-50 text-violet-700 ring-violet-200/70 dark:bg-violet-950/40 dark:text-violet-300 dark:ring-violet-500/30",
+        bar: "bg-violet-400/70 dark:bg-violet-500/60",
+      };
+    case "date":
+      return {
+        badge:
+          "bg-sky-50 text-sky-700 ring-sky-200/70 dark:bg-sky-950/40 dark:text-sky-300 dark:ring-sky-500/30",
+        bar: "bg-sky-400/70 dark:bg-sky-500/60",
+      };
+    case "string":
+    default:
+      return {
+        badge:
+          "bg-emerald-50 text-emerald-700 ring-emerald-200/70 dark:bg-emerald-950/40 dark:text-emerald-300 dark:ring-emerald-500/30",
+        bar: "bg-emerald-400/70 dark:bg-emerald-500/60",
+      };
+  }
+}
+
+function formatTypeLabel(type: MetadataFieldType): string {
+  if (type.endsWith("_list")) return `${type.replace(/_list$/, "")}[]`;
+  return type;
+}
+
+function TypeBadge({ type }: { type: MetadataFieldType }) {
+  const palette = getTypePalette(type);
+  return (
+    <span
+      className={`inline-flex items-center rounded px-1.5 py-px font-mono text-[10px] uppercase tracking-wider ring-1 ring-inset ${palette.badge}`}
+    >
+      {formatTypeLabel(type)}
+    </span>
+  );
+}
+
+function FormattedValue({
+  value,
+  type,
+}: {
+  value: unknown;
+  type: MetadataFieldType;
+}) {
+  if (type === "boolean") {
+    const bool = Boolean(value);
+    return (
+      <span
+        className={`inline-flex items-center rounded px-1.5 py-0.5 font-mono text-xs ${
+          bool
+            ? "bg-violet-100 text-violet-700 dark:bg-violet-950/50 dark:text-violet-300"
+            : "bg-muted text-muted-foreground"
+        }`}
+      >
+        {bool ? "true" : "false"}
+      </span>
+    );
+  }
+
+  if (type.endsWith("_list") && Array.isArray(value)) {
+    if (value.length === 0)
+      return <span className="text-muted-foreground/70 italic">空列表</span>;
+    return (
+      <div className="flex flex-wrap gap-1">
+        {value.map((item, idx) => (
+          <span
+            key={idx}
+            className="inline-flex items-center rounded bg-[hsl(var(--muted))] px-1.5 py-0.5 font-mono text-xs"
+          >
+            {String(item)}
+          </span>
+        ))}
+      </div>
+    );
+  }
+
+  if (type === "long" || type === "double") {
+    return <span className="font-mono text-sm">{String(value)}</span>;
+  }
+
+  if (type === "date") {
+    return <span className="font-mono text-sm">{String(value)}</span>;
+  }
+
+  // string / fallback
+  return <span className="text-sm break-all">{String(value)}</span>;
+}
+
+function MetadataSection({
+  fields,
+  metadata,
+  loading,
+  knowledgeBaseName,
+  docId,
+  subspace,
+}: {
+  fields: MetadataField[];
+  metadata: Record<string, unknown> | undefined;
+  loading: boolean;
+  knowledgeBaseName: string;
+  docId: string;
+  subspace?: string;
+}) {
+  const [editing, setEditing] = useState(false);
+  // The keys present in `values` define which schema fields are "active" in
+  // the edit form. Adding a field inserts a key (with empty value); the
+  // remove button deletes the key. On save, empty values are stripped by
+  // `convertMetadataValues`, matching the backend's overwrite semantics.
+  const [values, setValues] = useState<Record<string, string>>({});
+  const updateDocumentMutation = useUpdateDocument();
+
+  // Reset to a clean view whenever we switch to a different document.
+  useEffect(() => {
+    setEditing(false);
+  }, [docId]);
+
+  function handleStartEdit() {
+    // Seed only with fields that currently have a value on the document —
+    // unset schema fields stay hidden until the user explicitly adds them.
+    const all = metadataToFormValues(metadata, fields);
+    const seed: Record<string, string> = {};
+    for (const f of fields) {
+      const v = metadata?.[f.name];
+      if (v === undefined || v === null) continue;
+      seed[f.name] = all[f.name];
+    }
+    setValues(seed);
+    setEditing(true);
+  }
+
+  function handleCancel() {
+    setEditing(false);
+  }
+
+  function handleAddField(name: string) {
+    setValues((prev) => ({ ...prev, [name]: "" }));
+  }
+
+  function handleRemoveField(name: string) {
+    setValues((prev) => {
+      const next = { ...prev };
+      delete next[name];
+      return next;
+    });
+  }
+
+  // Only convert active fields — schema fields not in `values` should not
+  // be sent to the backend even with an empty value.
+  const activeFields = useMemo(
+    () => fields.filter((f) => f.name in values),
+    [fields, values],
+  );
+
+  const previewMetadata = useMemo(
+    () => convertMetadataValues(values, activeFields),
+    [values, activeFields],
+  );
+
+  const availableFields = useMemo(
+    () => fields.filter((f) => !(f.name in values)),
+    [fields, values],
+  );
+
+  // View mode: only render fields with actual values on the document.
+  const setFields = useMemo(
+    () =>
+      fields.filter((f) => {
+        const v = metadata?.[f.name];
+        return v !== undefined && v !== null;
+      }),
+    [fields, metadata],
+  );
+
+  async function handleSave() {
+    try {
+      await updateDocumentMutation.mutateAsync({
+        knowledgeBaseName,
+        docId,
+        subspace,
+        metadata: previewMetadata,
+      });
+      toast.success("Metadata 已更新");
+      setEditing(false);
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "更新 metadata 失败";
+      toast.error(message);
+    }
+  }
+
+  return (
+    <section className="space-y-2">
+      <div className="flex items-center justify-between">
+        <div className="flex items-baseline gap-2">
+          <h4 className="text-sm font-medium">Metadata</h4>
+          {!loading && (
+            <span className="font-mono text-[11px] text-muted-foreground/70">
+              {editing ? activeFields.length : setFields.length}/{fields.length}
+            </span>
+          )}
+        </div>
+        {editing ? (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-xs"
+              onClick={handleCancel}
+              disabled={updateDocumentMutation.isPending}
+            >
+              取消
+            </Button>
+            <Button
+              size="sm"
+              className="h-7 px-2 text-xs"
+              onClick={handleSave}
+              disabled={updateDocumentMutation.isPending}
+            >
+              {updateDocumentMutation.isPending ? "保存中..." : "保存"}
+            </Button>
           </div>
-        </section>
-
-        {/* 失败详情 */}
-        {document.failedDetails && (
-          <section className="space-y-2">
-            <h4 className="text-sm font-medium text-destructive">失败详情</h4>
-            <p className="text-sm text-destructive/80 bg-destructive/5 rounded-md p-3">
-              {document.failedDetails}
-            </p>
-          </section>
+        ) : (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-xs"
+            onClick={handleStartEdit}
+            disabled={loading}
+          >
+            <Pencil className="mr-1 h-3 w-3" />
+            编辑
+          </Button>
         )}
+      </div>
 
-        {/* 删除按钮 */}
-        <Button
-          variant="destructive"
-          className="w-full"
-          onClick={() => onDelete?.(document)}
-        >
-          <Trash2 className="mr-2 h-4 w-4" />
-          删除文档
-        </Button>
+      {loading && !editing ? (
+        <Skeleton className="h-24 w-full" />
+      ) : editing ? (
+        <MetadataEditList
+          activeFields={activeFields}
+          availableFields={availableFields}
+          values={values}
+          onChange={(name, next) =>
+            setValues((prev) => ({ ...prev, [name]: next }))
+          }
+          onRemove={handleRemoveField}
+          onAdd={handleAddField}
+        />
+      ) : setFields.length === 0 ? (
+        <p className="rounded-lg border border-dashed border-[hsl(var(--border))] px-3 py-4 text-center text-xs text-muted-foreground">
+          暂无 metadata，点击「编辑」添加字段
+        </p>
+      ) : (
+        <div className="overflow-hidden rounded-lg border border-[hsl(var(--border))] divide-y divide-[hsl(var(--border))]">
+          {setFields.map((field) => (
+            <MetadataDisplayRow
+              key={field.name}
+              field={field}
+              value={metadata?.[field.name]}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function MetadataDisplayRow({
+  field,
+  value,
+}: {
+  field: MetadataField;
+  value: unknown;
+}) {
+  const palette = getTypePalette(field.type);
+  return (
+    <div className="relative flex items-start gap-3 bg-[hsl(var(--background))] py-2.5 pl-3 pr-3">
+      <span
+        aria-hidden
+        className={`absolute left-0 top-1.5 bottom-1.5 w-0.5 rounded-r-full ${palette.bar}`}
+      />
+      <div className="min-w-0 flex-1 space-y-1">
+        <div className="flex items-center gap-1.5">
+          <span className="truncate text-[13px] font-medium leading-tight">
+            {field.name}
+          </span>
+          <TypeBadge type={field.type} />
+        </div>
+        <FormattedValue value={value} type={field.type} />
       </div>
     </div>
-    </>
+  );
+}
+
+function MetadataEditList({
+  activeFields,
+  availableFields,
+  values,
+  onChange,
+  onRemove,
+  onAdd,
+}: {
+  activeFields: MetadataField[];
+  availableFields: MetadataField[];
+  values: Record<string, string>;
+  onChange: (name: string, next: string) => void;
+  onRemove: (name: string) => void;
+  onAdd: (name: string) => void;
+}) {
+  return (
+    <div className="space-y-2">
+      {activeFields.length > 0 && (
+        <div className="overflow-hidden rounded-lg border border-[hsl(var(--border))] divide-y divide-[hsl(var(--border))]">
+          {activeFields.map((field) => {
+            const palette = getTypePalette(field.type);
+            return (
+              <div
+                key={field.name}
+                className="group relative flex items-start gap-2 bg-[hsl(var(--background))] py-2.5 pl-3 pr-2 transition-colors hover:bg-[hsl(var(--muted))]/30"
+              >
+                <span
+                  aria-hidden
+                  className={`absolute left-0 top-1.5 bottom-1.5 w-0.5 rounded-r-full ${palette.bar}`}
+                />
+                <div className="min-w-0 flex-1 space-y-1.5">
+                  <div className="flex items-center gap-1.5">
+                    <span className="truncate text-[13px] font-medium leading-tight">
+                      {field.name}
+                    </span>
+                    <TypeBadge type={field.type} />
+                  </div>
+                  <MetadataFieldInput
+                    field={field}
+                    value={values[field.name] ?? ""}
+                    onChange={(next) => onChange(field.name, next)}
+                  />
+                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 self-start text-muted-foreground/70 hover:text-destructive"
+                  onClick={() => onRemove(field.name)}
+                  title="移除该字段"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {availableFields.length > 0 ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-8 w-full justify-center border-dashed text-xs font-normal text-muted-foreground hover:text-foreground"
+            >
+              <Plus className="mr-1 h-3.5 w-3.5" />
+              添加字段
+              <span className="ml-1.5 font-mono text-[10px] text-muted-foreground/60">
+                {availableFields.length} 可用
+              </span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="start"
+            className="w-[var(--radix-dropdown-menu-trigger-width)] min-w-[200px]"
+          >
+            {availableFields.map((field) => (
+              <DropdownMenuItem
+                key={field.name}
+                onSelect={() => onAdd(field.name)}
+                className="flex items-center justify-between gap-2"
+              >
+                <span className="truncate text-sm">{field.name}</span>
+                <TypeBadge type={field.type} />
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : (
+        activeFields.length === 0 && (
+          <p className="rounded-lg border border-dashed border-[hsl(var(--border))] px-3 py-4 text-center text-xs text-muted-foreground">
+            该知识库未配置 metadata schema
+          </p>
+        )
+      )}
+    </div>
   );
 }