feat: improve citation display and skill persistence

frontend-web/src/components/workspace/chats/chat-box.tsx

@@ -40,9 +40,11 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
   const { thread } = useThread();
   const pathname = usePathname();
   const threadIdRef = useRef(threadId);
+  const artifactsCountRef = useRef(0);
   const layoutRef = useRef<GroupImperativeHandle>(null);
   const [sideTab, setSideTab] = useState("document");
   const [referencesOpen, setReferencesOpen] = useState(true);
+  const [activeReferenceBatchId, setActiveReferenceBatchId] = useState<string | null>(null);
   const [settings] = useLocalSettings();
   const { skills } = useSkills();
 
@@ -61,24 +63,32 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
     () => (settings.display.ragModeEnabled ? buildSkillDisplayMap(skills) : new Map()),
     [settings.display.ragModeEnabled, skills],
   );
-  const latestHumanIndex = useMemo(
-    () => findLatestHumanMessageIndex(thread.values.messages ?? []),
-    [thread.values.messages],
-  );
-  const displaySources = useMemo(() => {
+  const referenceBatches = useMemo(() => {
     if (!settings.display.ragModeEnabled) {
       return [];
     }
     const messages = thread.values.messages ?? [];
-    return collectRuntimeDisplaySources(messages, skillDisplayMap, {
-      afterMessageId: latestHumanIndex >= 0 ? messages[latestHumanIndex]?.id : undefined,
-      includeModes: ["citation"],
-    });
-  }, [settings.display.ragModeEnabled, skillDisplayMap, latestHumanIndex, thread.values.messages]);
-  const referenceSources = useMemo(
-    () => displaySources.filter((source) => source.mode === "citation"),
-    [displaySources],
-  );
+    return messages
+      .filter((message) => message.type === "ai" && message.id)
+      .map((message) => ({
+        id: message.id!,
+        sources: collectRuntimeDisplaySources(messages, skillDisplayMap, {
+          afterMessageId: findPreviousHumanMessageId(messages, message.id),
+          beforeMessageId: message.id,
+          includeBeforeMessage: true,
+          includeModes: ["citation"],
+        }).filter((source) => source.mode === "citation"),
+      }))
+      .filter((batch) => batch.sources.length > 0);
+  }, [settings.display.ragModeEnabled, skillDisplayMap, thread.values.messages]);
+  const latestReferenceBatch =
+    referenceBatches.length > 0
+      ? referenceBatches[referenceBatches.length - 1]!
+      : null;
+  const activeReferenceBatch =
+    referenceBatches.find((batch) => batch.id === activeReferenceBatchId) ??
+    latestReferenceBatch;
+  const referenceSources = activeReferenceBatch?.sources ?? [];
   const hasCitationReferences = referenceSources.length > 0;
   useEffect(() => {
     if (hasCitationReferences) {
@@ -86,7 +96,22 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
     }
   }, [hasCitationReferences]);
   useEffect(() => {
-    const handleShowReference = () => {
+    if (!latestReferenceBatch) {
+      setActiveReferenceBatchId(null);
+      return;
+    }
+    setActiveReferenceBatchId((current) =>
+      current && referenceBatches.some((batch) => batch.id === current)
+        ? current
+        : latestReferenceBatch.id,
+    );
+  }, [latestReferenceBatch?.id, referenceBatches]);
+  useEffect(() => {
+    const handleShowReference = (event: Event) => {
+      const detail = (event as CustomEvent<{ batchId?: string }>).detail;
+      if (detail?.batchId) {
+        setActiveReferenceBatchId(detail.batchId);
+      }
       setReferencesOpen(true);
       setSideTab("references");
     };
@@ -98,12 +123,22 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
   useEffect(() => {
     if (threadIdRef.current !== threadId) {
       threadIdRef.current = threadId;
+      artifactsCountRef.current = 0;
       deselect();
       setReferencesOpen(true);
     }
 
     // Update artifacts from the current thread
-    setArtifacts(thread.values.artifacts);
+    const nextArtifacts = thread.values.artifacts ?? [];
+    const hadArtifacts = artifactsCountRef.current > 0;
+    const hasNewArtifact = nextArtifacts.length > artifactsCountRef.current;
+    artifactsCountRef.current = nextArtifacts.length;
+    setArtifacts(nextArtifacts);
+    if ((hasNewArtifact || (!hadArtifacts && nextArtifacts.length > 0)) && !selectedArtifact) {
+      selectArtifact(nextArtifacts[nextArtifacts.length - 1]!);
+      setArtifactsOpen(true);
+      setSideTab("document");
+    }
 
     // DO NOT automatically deselect the artifact when switching threads, because the artifacts auto discovering is not work now.
     // if (
@@ -142,10 +177,10 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
   const showTabs = !!selectedArtifact && hasCitationReferences;
 
   useEffect(() => {
-    if (!selectedArtifact && hasCitationReferences) {
-      setSideTab("references");
-    } else if (selectedArtifact && !hasCitationReferences) {
+    if (selectedArtifact) {
       setSideTab("document");
+    } else if (hasCitationReferences) {
+      setSideTab("references");
     }
   }, [hasCitationReferences, selectedArtifact]);
 
@@ -315,13 +350,22 @@ function ReferencePanel({
   );
 }
 
-function findLatestHumanMessageIndex(messages: Message[]) {
-  for (let index = messages.length - 1; index >= 0; index--) {
-    if (messages[index]?.type === "human") {
-      return index;
+function findPreviousHumanMessageId(
+  messages: Message[],
+  beforeMessageId?: string,
+): string | undefined {
+  const beforeIndex =
+    beforeMessageId === undefined
+      ? messages.length
+      : messages.findIndex((message) => message.id === beforeMessageId);
+  const end = beforeIndex < 0 ? messages.length : beforeIndex;
+  for (let index = end - 1; index >= 0; index--) {
+    const message = messages[index];
+    if (message?.type === "human") {
+      return message.id;
     }
   }
-  return -1;
+  return undefined;
 }
 
 export { ChatBox };

frontend-web/src/components/workspace/citations/citation-link.tsx

@@ -28,20 +28,19 @@ export function CitationLink({
         )}
         onClick={(event) => {
           event.preventDefault();
+          const batchId =
+            event.currentTarget.closest<HTMLElement>("[data-reference-batch-id]")
+              ?.dataset.referenceBatchId;
           window.dispatchEvent(
             new CustomEvent(SHOW_REFERENCE_EVENT, {
-              detail: { referenceId },
+              detail: { batchId, referenceId },
             }),
           );
-          const target = document.getElementById(`reference-${referenceId}`);
           const scroll = () => {
+            const target = document.getElementById(`reference-${referenceId}`);
             target?.scrollIntoView({ behavior: "smooth", block: "center" });
           };
-          if (target) {
-            scroll();
-          } else {
-            window.setTimeout(scroll, 220);
-          }
+          window.setTimeout(scroll, 240);
         }}
         {...props}
       >

frontend-web/src/components/workspace/messages/message-group.tsx

@@ -51,7 +51,6 @@ import { useLocalSettings } from "@/core/settings";
 import { useSkills } from "@/core/skills/hooks";
 import {
   buildSkillDisplayMap,
-  findDisplayConfigForPayload,
   findDisplayConfigForTool,
   isDisplaySamplePayload,
   normalizeDefaultDisplaySources,
@@ -256,9 +255,7 @@ function ToolCall({
     result !== undefined && isDisplaySamplePayload(result)
       ? null
       : (findDisplayConfigForTool(name, skillDisplayMap, args) ??
-        (result !== undefined
-          ? findDisplayConfigForPayload(name, result, skillDisplayMap)
-          : null));
+        null);
   const displayItems =
     displayMatch && result !== undefined
       ? normalizeDisplaySources(result, displayMatch.display).map((item, index) => ({

frontend-web/src/components/workspace/messages/message-list-item.tsx

@@ -288,19 +288,21 @@ function MessageContent_({
     );
   }
 
-  return (
-    <AIElementMessageContent className={className}>
-      {filesList}
-      <AssistantDisplayContent
-        content={contentToDisplay}
-        displaySources={displaySources}
-        isLoading={isLoading}
-        rehypePlugins={[...rehypePlugins, [rehypeKatex, { output: "html" }]]}
-        components={components}
-      />
-      <MessageTokenUsage
-        enabled={tokenUsageEnabled}
-        isLoading={isLoading}
+  return (
+    <AIElementMessageContent className={className}>
+      {filesList}
+      <div data-reference-batch-id={message.id} className="contents">
+        <AssistantDisplayContent
+          content={contentToDisplay}
+          displaySources={displaySources}
+          isLoading={isLoading}
+          rehypePlugins={[...rehypePlugins, [rehypeKatex, { output: "html" }]]}
+          components={components}
+        />
+      </div>
+      <MessageTokenUsage
+        enabled={tokenUsageEnabled}
+        isLoading={isLoading}
         message={message}
       />
     </AIElementMessageContent>

frontend-web/src/components/workspace/settings/appearance-settings-page.tsx

@@ -2,9 +2,11 @@
 
 import { MoonIcon, SunIcon } from "lucide-react";
 import { useMemo, type ComponentType, type SVGProps } from "react";
+import { toast } from "sonner";
 
 import { useTheme } from "@/contexts/ThemeContext";
 
+import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
@@ -14,9 +16,15 @@ import {
 } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
 import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { getStoredAuth } from "@/core/auth";
 import { enUS, isLocale, zhCN, type Locale } from "@/core/i18n";
 import { useI18n } from "@/core/i18n/hooks";
 import { useLocalSettings } from "@/core/settings";
+import {
+  useAppearanceSettings,
+  useUpdateAppearanceSettings,
+} from "@/core/system-settings/hooks";
 import { cn } from "@/lib/utils";
 
 import { SettingsSection } from "./settings-section";
@@ -31,6 +39,24 @@ export function AppearanceSettingsPage() {
   const { theme, setTheme } = useTheme();
   const currentTheme = theme;
   const [settings, setSettings] = useLocalSettings();
+  const isAdmin = getStoredAuth()?.system_role === "admin";
+  const { data: appearance } = useAppearanceSettings();
+  const updateAppearance = useUpdateAppearanceSettings();
+  const globalDefault = appearance?.default_theme ?? "light";
+
+  const handleSetGlobalDefault = async (value: "light" | "dark") => {
+    if (value === globalDefault) return;
+    try {
+      await updateAppearance.mutateAsync({ default_theme: value });
+      toast.success(
+        value === "light"
+          ? "已将系统默认主题设置为浅色"
+          : "已将系统默认主题设置为深色",
+      );
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "保存失败");
+    }
+  };
 
   const themeOptions = useMemo(
     () => [
@@ -76,6 +102,43 @@ export function AppearanceSettingsPage() {
         </div>
       </SettingsSection>
 
+      {isAdmin && (
+        <>
+          <Separator />
+          <SettingsSection
+            title="系统默认主题（管理员）"
+            description="给所有还没有手动切换过主题的用户的默认主题；已经自己切换过的用户保留其个人设置不受影响。"
+          >
+            <div className="flex flex-wrap items-center gap-2">
+              <Button
+                type="button"
+                variant={globalDefault === "light" ? "default" : "outline"}
+                size="sm"
+                onClick={() => void handleSetGlobalDefault("light")}
+                disabled={updateAppearance.isPending}
+              >
+                <SunIcon className="mr-1.5 size-4" />
+                浅色
+              </Button>
+              <Button
+                type="button"
+                variant={globalDefault === "dark" ? "default" : "outline"}
+                size="sm"
+                onClick={() => void handleSetGlobalDefault("dark")}
+                disabled={updateAppearance.isPending}
+              >
+                <MoonIcon className="mr-1.5 size-4" />
+                深色
+              </Button>
+              <p className="text-muted-foreground ml-2 text-xs">
+                当前系统默认：
+                {globalDefault === "light" ? "浅色" : "深色"}
+              </p>
+            </div>
+          </SettingsSection>
+        </>
+      )}
+
       <Separator />
 
       <SettingsSection
@@ -124,26 +187,49 @@ export function AppearanceSettingsPage() {
             }
             aria-label="回答速度指示器"
           />
-        </div>
-        <div className="flex items-start justify-between gap-4 rounded-lg border p-4">
-          <div>
-            <div className="text-sm font-medium">RAG 引用模式</div>
-            <p className="text-muted-foreground mt-1 max-w-md text-xs leading-relaxed">
-              开启后，已配置展示适配的技能结果会在问答中渲染为编号引用或列表，并支持点击跳转。
-            </p>
-          </div>
-          <Switch
-            checked={settings.display.ragModeEnabled}
-            onCheckedChange={(checked) =>
-              setSettings("display", { ragModeEnabled: checked })
-            }
-            aria-label="RAG 引用模式"
-          />
-        </div>
-      </SettingsSection>
-    </div>
-  );
-}
+        </div>
+        <div className="flex items-start justify-between gap-4 rounded-lg border p-4">
+          <div>
+            <div className="text-sm font-medium">RAG 引用模式</div>
+            <p className="text-muted-foreground mt-1 max-w-md text-xs leading-relaxed">
+              开启后，已配置展示适配的技能结果会在问答中渲染为编号引用或列表，并支持点击跳转。
+            </p>
+          </div>
+          <Switch
+            checked={settings.display.ragModeEnabled}
+            onCheckedChange={(checked) =>
+              setSettings("display", { ragModeEnabled: checked })
+            }
+            aria-label="RAG 引用模式"
+          />
+        </div>
+        {isAdmin && (
+          <div className="rounded-lg border p-4">
+            <div className="mb-3">
+              <div className="text-sm font-medium">参考文献去除词</div>
+              <p className="text-muted-foreground mt-1 max-w-2xl text-xs leading-relaxed">
+                管理员配置。每行一个词或短句，参考文献卡片和详情弹框会自动移除这些广告词、导航词或免责声明。
+              </p>
+            </div>
+            <Textarea
+              value={(settings.display.citationCleanupWords ?? []).join("\n")}
+              onChange={(event) =>
+                setSettings("display", {
+                  citationCleanupWords: event.currentTarget.value
+                    .split(/\r?\n/)
+                    .map((item) => item.trim())
+                    .filter(Boolean),
+                })
+              }
+              placeholder={"广告\n点击下载APP\n打开客户端\n免责声明\n责任编辑"}
+              className="min-h-32 text-sm"
+            />
+          </div>
+        )}
+      </SettingsSection>
+    </div>
+  );
+}
 
 function ThemePreviewCard({
   icon: Icon,

frontend-web/src/components/workspace/skill-display-adapter-panel.tsx

@@ -22,6 +22,7 @@ import {
   normalizeDisplaySources,
 } from "@/core/skill-display/display-adapter";
 import {
+  getSkill,
   getPersistedSkillDisplaySample,
   getSkillDisplaySample,
 } from "@/core/skills/api";
@@ -76,6 +77,7 @@ export function SkillDisplayAdapterPanel({ skill }: { skill: Skill }) {
   const [draft, setDraft] = useState<SkillDisplayConfig>(() => skill.display ?? emptyDisplayConfig());
   const [sampleText, setSampleText] = useState(() => formatSample(skill.displaySample));
   const [tableColumnsText, setTableColumnsText] = useState(() => JSON.stringify((skill.display ?? emptyDisplayConfig()).tableColumns ?? [], null, 2));
+  const [loadingDbConfig, setLoadingDbConfig] = useState(false);
 
   // Echo server state into the form — on mount, on skill switch, AND after
   // a successful save (the refetched skill object has a new `display` identity).
@@ -88,6 +90,41 @@ export function SkillDisplayAdapterPanel({ skill }: { skill: Skill }) {
     setTableColumnsText(JSON.stringify(display.tableColumns ?? [], null, 2));
   }, [skill.name, skill.display]);
 
+  useEffect(() => {
+    let cancelled = false;
+    async function loadDbSkillConfig() {
+      setLoadingDbConfig(true);
+      try {
+        const fresh = await getSkill(skill.name);
+        if (cancelled) {
+          return;
+        }
+        const display = fresh.display ?? emptyDisplayConfig();
+        setDraft(display);
+        setTableColumnsText(JSON.stringify(display.tableColumns ?? [], null, 2));
+        setSampleText(formatSample(fresh.displaySample));
+        queryClient.setQueryData<Skill | undefined>(["skill", skill.name], fresh);
+        queryClient.setQueriesData<Skill[]>({ queryKey: ["skills"] }, (current) =>
+          Array.isArray(current)
+            ? current.map((item) => (item.name === skill.name ? { ...item, ...fresh } : item))
+            : current,
+        );
+      } catch (err) {
+        if (!cancelled) {
+          toast.error(err instanceof Error ? err.message : String(err));
+        }
+      } finally {
+        if (!cancelled) {
+          setLoadingDbConfig(false);
+        }
+      }
+    }
+    void loadDbSkillConfig();
+    return () => {
+      cancelled = true;
+    };
+  }, [queryClient, skill.name]);
+
   // Sample text is editor-only state — never reset on save. Only seed it once
   // per skill, otherwise the user loses the JSON they just pulled in via
   // 自动识别 every time they hit 保存.
@@ -191,11 +228,15 @@ export function SkillDisplayAdapterPanel({ skill }: { skill: Skill }) {
 
   async function saveDraft() {
     try {
-      await setDisplay.mutateAsync({
+      const saved = await setDisplay.mutateAsync({
         skillName: skill.name,
         display: draft,
         sample: samplePayload ?? undefined,
       });
+      const display = saved.display ?? emptyDisplayConfig();
+      setDraft(display);
+      setTableColumnsText(JSON.stringify(display.tableColumns ?? [], null, 2));
+      setSampleText(formatSample(saved.displaySample));
       toast.success("展示适配已保存");
     } catch (err) {
       toast.error(err instanceof Error ? err.message : String(err));
@@ -222,6 +263,11 @@ export function SkillDisplayAdapterPanel({ skill }: { skill: Skill }) {
             <p className="mt-1 text-xs text-muted-foreground">
               从技能返回样例中自动识别字段，然后把技能结果显示为编号引用、列表、卡片或自定义样式。
             </p>
+            {loadingDbConfig && (
+              <p className="mt-1 text-xs text-muted-foreground">
+                正在从数据库读取已保存的配置...
+              </p>
+            )}
           </div>
           <div className="flex items-center gap-2">
             <span className="text-xs text-muted-foreground">启用</span>

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

@@ -9,6 +9,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import type { RuntimeDisplaySource } from "@/core/skill-display/runtime";
+import { useLocalSettings } from "@/core/settings";
 import { cn } from "@/lib/utils";
 import { useState } from "react";
 
@@ -44,7 +45,11 @@ export function SourceCard({
   referenceTarget?: boolean;
 }) {
   const [open, setOpen] = useState(false);
-  const content = source.content || source.snippet;
+  const [settings] = useLocalSettings();
+  const cleanupWords = settings.display.citationCleanupWords ?? [];
+  const content = cleanReferenceText(source.content || source.snippet, cleanupWords);
+  const snippet = compactReferenceText(content).slice(0, 280);
+  const paragraphs = segmentReferenceText(content);
   const score =
     typeof source.score === "number"
       ? source.score <= 1
@@ -90,9 +95,9 @@ export function SourceCard({
                 ))}
               </div>
             )}
-            {content && (
+            {snippet && (
               <p className="text-muted-foreground/90 line-clamp-2 text-xs leading-relaxed">
-                {content}
+                {snippet}
               </p>
             )}
           </div>
@@ -138,9 +143,13 @@ export function SourceCard({
               )}
             </div>
           </DialogHeader>
-          {content && (
-            <div className="text-foreground max-h-[55vh] overflow-y-auto whitespace-pre-wrap text-sm leading-relaxed">
-              {content}
+          {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">
+                  {paragraph}
+                </p>
+              ))}
             </div>
           )}
           {source.url && (
@@ -153,3 +162,66 @@ export function SourceCard({
     </>
   );
 }
+
+function cleanReferenceText(
+  raw: string | undefined,
+  cleanupWords: string[],
+): string {
+  let text = raw ?? "";
+  for (const word of cleanupWords) {
+    const trimmed = word.trim();
+    if (!trimmed) continue;
+    text = text.split(trimmed).join("");
+  }
+  return text
+    .replace(/\r\n/g, "\n")
+    .replace(/[ \t]+\n/g, "\n")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+function compactReferenceText(text: string): string {
+  return text.replace(/\s+/g, " ").trim();
+}
+
+function segmentReferenceText(text: string): string[] {
+  const explicit = text
+    .split(/\n{2,}/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+  const base = explicit.length > 1 ? explicit : splitLongParagraph(text);
+  return base.slice(0, 80);
+}
+
+function splitLongParagraph(text: string): string[] {
+  const normalized = text
+    .split(/\n+/)
+    .map((item) => item.trim())
+    .filter(Boolean)
+    .join("\n");
+  if (normalized.length <= 360) {
+    return normalized ? [normalized] : [];
+  }
+
+  const sentences = normalized
+    .split(/(?<=[。！？!?；;])\s*/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+  if (sentences.length <= 1) {
+    return normalized.match(/[\s\S]{1,360}/g) ?? [];
+  }
+
+  const paragraphs: string[] = [];
+  let current = "";
+  for (const sentence of sentences) {
+    if ((current + sentence).length > 360 && current) {
+      paragraphs.push(current.trim());
+      current = "";
+    }
+    current += sentence;
+  }
+  if (current.trim()) {
+    paragraphs.push(current.trim());
+  }
+  return paragraphs;
+}