feat: improve WeKnora source preview and wiki management

frontend-web/src/components/workspace/skill-display-sources.tsx

@@ -1,4 +1,4 @@
-import { ExternalLinkIcon, FileTextIcon, LoaderCircle } from "lucide-react";
+import { ExternalLinkIcon, FileTextIcon } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -9,12 +9,12 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import type { RuntimeDisplaySource } from "@/core/skill-display/runtime";
-import { apiFetch } from "@/core/api/fetch-client";
-import { getBackendBaseURL } from "@/core/config";
+import { resolveWeKnoraSourceTarget } from "@/core/llmwiki/source-links";
 import { useLocalSettings } from "@/core/settings";
 import { useCitationDisplaySettings } from "@/core/system-settings/hooks";
 import { cn } from "@/lib/utils";
-import { useEffect, useState } from "react";
+import { useState } from "react";
+import { WeKnoraSourceDrawer } from "@/strategy-components/components/resource-management/llmwiki/WeKnoraSourceDrawer";
 
 export function SkillDisplaySources({
   highlightedReferenceId,
@@ -52,12 +52,14 @@ export function SourceCard({
   source: RuntimeDisplaySource;
   referenceTarget?: boolean;
 }) {
-  const [open, setOpen] = useState(false);
-  const [context, setContext] = useState<WeKnoraSourceContext | null>(null);
-  const [contextLoading, setContextLoading] = useState(false);
-  const [contextError, setContextError] = useState<string | null>(null);
+  const [relatedOpen, setRelatedOpen] = useState(false);
+  const [detailOpen, setDetailOpen] = useState(false);
   const [settings] = useLocalSettings();
   const { data: citationDisplay } = useCitationDisplaySettings();
+  const previewTarget = resolveWeKnoraSourceTarget({
+    ...(source.raw || {}),
+    url: source.url,
+  });
   const cleanupWords =
     citationDisplay?.cleanup_words ?? settings.display.citationCleanupWords ?? [];
   const content = cleanReferenceText(source.content || source.snippet, cleanupWords);
@@ -78,57 +80,27 @@ export function SourceCard({
   ].filter(Boolean);
   const isCitation = source.mode === "citation";
   const showReferenceNumber = isCitation;
-  const previewTarget = parseWeKnoraPreviewUrl(source.url);
-
-  useEffect(() => {
-    if (!open || !previewTarget) {
-      return;
-    }
-    let cancelled = false;
-    setContext(null);
-    setContextError(null);
-    setContextLoading(true);
-    const params = new URLSearchParams({
-      knowledge_base_id: previewTarget.knowledgeBaseId,
-      chunk_id: previewTarget.chunkId,
-    });
-    void apiFetch(`${getBackendBaseURL()}/api/llmwiki/sources/context?${params}`)
-      .then(async (response) => {
-        const payload = (await response.json().catch(() => null)) as unknown;
-        if (!response.ok || !isWeKnoraSourceContextResponse(payload)) {
-          throw new Error(readPreviewError(payload, response.status));
-        }
-        if (!cancelled) {
-          setContext(payload.data);
-        }
-      })
-      .catch((error: unknown) => {
-        if (!cancelled) {
-          setContextError(error instanceof Error ? error.message : "无法加载原文上下文");
-        }
-      })
-      .finally(() => {
-        if (!cancelled) {
-          setContextLoading(false);
-        }
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [open, previewTarget?.chunkId, previewTarget?.knowledgeBaseId]);
 
   return (
     <>
-      <button
+      <div
         id={referenceTarget ? `reference-${source.index}` : undefined}
-        type="button"
+        role="button"
+        tabIndex={0}
         className={cn(
           "group bg-card/60 hover:bg-card hover:border-primary/40 focus-visible:ring-primary/30 w-full scroll-mt-12 rounded-xl border px-3.5 py-3 text-left shadow-sm transition-all focus-visible:ring-2 focus-visible:outline-none",
           "target:border-amber-300 target:bg-amber-50/80",
           highlighted &&
             "border-amber-300 bg-amber-50/80 shadow-[0_0_0_2px_rgba(251,191,36,0.14)]",
+          "cursor-pointer",
         )}
-        onClick={() => setOpen(true)}
+        onClick={() => setRelatedOpen(true)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            setRelatedOpen(true);
+          }
+        }}
       >
         <div className="flex items-start gap-3">
           {showReferenceNumber && (
@@ -158,18 +130,43 @@ export function SourceCard({
           </div>
           {source.url && (
             previewTarget ? (
-              <span className="text-primary bg-primary/10 mt-0.5 inline-flex shrink-0 items-center gap-1 rounded-md px-1.5 py-1 text-[11px] font-medium">
+              <span className="text-muted-foreground bg-muted mt-0.5 inline-flex shrink-0 items-center gap-1 rounded-md px-1.5 py-1 text-[11px] font-medium">
                 <FileTextIcon className="size-3.5" />
-                查看原文
+                知识库文档
               </span>
             ) : (
               <ExternalLinkIcon className="text-muted-foreground/60 group-hover:text-primary mt-1 size-3.5 shrink-0 transition-colors" />
             )
           )}
         </div>
-      </button>
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="max-w-2xl">
+        {previewTarget && (
+          <div className="mt-3 flex justify-start border-t pt-2">
+            <Button
+              size="sm"
+              variant="ghost"
+              className="text-muted-foreground hover:text-primary h-7 px-1.5 text-xs"
+              onClick={(event) => {
+                event.stopPropagation();
+                setDetailOpen(true);
+              }}
+            >
+              <ExternalLinkIcon className="mr-1.5 size-3.5" />
+              查看详情
+            </Button>
+          </div>
+        )}
+      </div>
+      {previewTarget && (
+        <WeKnoraSourceDrawer
+          open={detailOpen}
+          target={previewTarget}
+          title={source.title}
+          quote={content}
+          onOpenChange={setDetailOpen}
+        />
+      )}
+      <Dialog open={relatedOpen} onOpenChange={setRelatedOpen}>
+        <DialogContent className="max-h-[90vh] w-[calc(100vw-2rem)] max-w-3xl overflow-hidden">
           <DialogHeader>
             <div className="flex items-start justify-between gap-3 pr-8">
               <div className="min-w-0 flex-1">
@@ -205,13 +202,7 @@ export function SourceCard({
               )}
             </div>
           </DialogHeader>
-          {previewTarget ? (
-            <WeKnoraSourceContextPanel
-              context={context}
-              loading={contextLoading}
-              error={contextError}
-            />
-          ) : paragraphs.length > 0 ? (
+          {paragraphs.length > 0 ? (
             <div className="text-foreground max-h-[55vh] space-y-3 overflow-y-auto text-sm leading-relaxed">
               {paragraphs.map((paragraph, index) => (
                 <p key={index} className="whitespace-pre-wrap">
@@ -231,156 +222,6 @@ export function SourceCard({
   );
 }
 
-type WeKnoraPreviewTarget = {
-  knowledgeBaseId: string;
-  chunkId: string;
-};
-
-type WeKnoraSourceContext = {
-  knowledge_base_name?: string;
-  document_title?: string;
-  document_file_name?: string;
-  display_mode?: "wiki" | "chunks";
-  focus_chunk_id: string;
-  wiki_page?: {
-    id?: string;
-    slug?: string;
-    title?: string;
-    page_type?: string;
-    status?: string;
-    summary?: string;
-    content?: string;
-    source_refs?: string[];
-  } | null;
-  chunks: Array<{
-    id: string;
-    chunk_index?: number;
-    content: string;
-    is_focus: boolean;
-  }>;
-};
-
-function parseWeKnoraPreviewUrl(url?: string): WeKnoraPreviewTarget | null {
-  if (!url?.startsWith("/weknora-source-preview?")) {
-    return null;
-  }
-  const queryIndex = url.indexOf("?");
-  const params = new URLSearchParams(url.slice(queryIndex + 1));
-  const knowledgeBaseId = params.get("knowledge_base_id")?.trim();
-  const chunkId = params.get("chunk_id")?.trim();
-  return knowledgeBaseId && chunkId ? { knowledgeBaseId, chunkId } : null;
-}
-
-function isWeKnoraSourceContextResponse(
-  value: unknown,
-): value is { success: true; data: WeKnoraSourceContext } {
-  if (!value || typeof value !== "object") {
-    return false;
-  }
-  const data = (value as { data?: unknown }).data;
-  return (
-    (value as { success?: unknown }).success === true &&
-    !!data &&
-    typeof data === "object" &&
-    Array.isArray((data as WeKnoraSourceContext).chunks)
-  );
-}
-
-function readPreviewError(payload: unknown, status: number): string {
-  if (payload && typeof payload === "object") {
-    const detail = (payload as { detail?: unknown }).detail;
-    if (typeof detail === "string" && detail) {
-      return detail;
-    }
-  }
-  return status === 404 ? "原文已不可用" : "无法加载原文上下文";
-}
-
-function WeKnoraSourceContextPanel({
-  context,
-  loading,
-  error,
-}: {
-  context: WeKnoraSourceContext | null;
-  loading: boolean;
-  error: string | null;
-}) {
-  if (loading) {
-    return (
-      <div className="text-muted-foreground flex min-h-36 items-center justify-center gap-2 text-sm">
-        <LoaderCircle className="size-4 animate-spin" />
-        正在加载原文上下文…
-      </div>
-    );
-  }
-  if (error) {
-    return (
-      <div className="border-destructive/30 bg-destructive/5 text-destructive rounded-lg border p-3 text-sm">
-        {error}
-      </div>
-    );
-  }
-  if (!context) {
-    return null;
-  }
-  const wikiPage = context.wiki_page;
-  const wikiContent = cleanReferenceText(
-    [wikiPage?.summary, wikiPage?.content].filter(Boolean).join("\n\n"),
-    [],
-  );
-  if (wikiPage && wikiContent) {
-    return (
-      <div className="max-h-[55vh] space-y-3 overflow-y-auto pr-1">
-        <div className="bg-muted/60 text-muted-foreground rounded-lg px-3 py-2 text-xs">
-          <span>{context.knowledge_base_name || "WeKnora 知识库"}</span>
-          <span> · LLMWiki</span>
-          {wikiPage.page_type && <span> · {wikiPage.page_type}</span>}
-        </div>
-        <section className="border-primary/40 bg-primary/5 rounded-lg border p-3 text-sm leading-relaxed shadow-sm">
-          <div className="mb-2 flex flex-wrap items-center gap-2">
-            <span className="text-foreground text-sm font-medium">
-              {wikiPage.title || wikiPage.slug || "LLMWiki 页面"}
-            </span>
-            <span className="bg-primary text-primary-foreground rounded px-1.5 py-0.5 text-xs font-medium">
-              清洗页
-            </span>
-          </div>
-          <div className="space-y-3 whitespace-pre-wrap">{wikiContent}</div>
-        </section>
-      </div>
-    );
-  }
-  return (
-    <div className="max-h-[55vh] space-y-3 overflow-y-auto pr-1">
-      <div className="bg-muted/60 text-muted-foreground rounded-lg px-3 py-2 text-xs">
-        <span>{context.knowledge_base_name || "WeKnora 知识库"}</span>
-        {context.document_title && <span> · {context.document_title}</span>}
-      </div>
-      {context.chunks.map((chunk) => (
-        <section
-          key={chunk.id}
-          className={cn(
-            "rounded-lg border p-3 text-sm leading-relaxed",
-            chunk.is_focus
-              ? "border-primary/50 bg-primary/5 shadow-sm"
-              : "bg-muted/20",
-          )}
-        >
-          <div className="text-muted-foreground mb-2 flex items-center gap-2 text-xs">
-            <span>分段 {typeof chunk.chunk_index === "number" ? chunk.chunk_index + 1 : "-"}</span>
-            {chunk.is_focus && (
-              <span className="bg-primary text-primary-foreground rounded px-1.5 py-0.5 font-medium">
-                检索命中
-              </span>
-            )}
-          </div>
-          <p className="whitespace-pre-wrap">{chunk.content}</p>
-        </section>
-      ))}
-    </div>
-  );
-}
-
 function cleanReferenceText(
   raw: string | undefined,
   cleanupWords: string[],