feat(frontend): add workspace single and multi round rag

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

@@ -16,6 +16,7 @@ import { apiFetch } from "@/core/api";
 import { getBackendBaseURL } from "@/core/config";
 import { isThreadRagModeLocked, useLocalSettings } from "@/core/settings";
 import { isSingleRoundRagMessage } from "@/core/threads/use-single-round-rag";
+import { isMultiRoundRagMessage } from "@/core/threads/use-multi-round-rag";
 import { useSkills } from "@/core/skills/hooks";
 import type { SkillDisplayConfig } from "@/core/skills/type";
 import {
@@ -93,13 +94,20 @@ const ChatBox: React.FC<{
   const [settings] = useLocalSettings();
   const ragModeEnabled =
     settings.display.ragModeEnabled || isThreadRagModeLocked(threadId);
-  // Frontend single-round RAG writes its own source tool message, so it should
-  // use the same reference panel without changing the user's global RAG mode.
-  const hasSingleRoundRag = useMemo(
-    () => (thread.values.messages ?? []).some(isSingleRoundRagMessage),
+  // Frontend RAG modes write their own hidden source tool messages. They use
+  // the existing reference panel, but must not request or write reference
+  // batches through DeerFlow's backend APIs.
+  const hasFrontendRag = useMemo(
+    () =>
+      (thread.values.messages ?? []).some(
+        (message) =>
+          isSingleRoundRagMessage(message) || isMultiRoundRagMessage(message),
+      ),
     [thread.values.messages],
   );
-  const referencesEnabled = ragModeEnabled || hasSingleRoundRag;
+  const referencesEnabled = ragModeEnabled || hasFrontendRag;
+  const shouldFetchBackendReferenceBatches =
+    referencesEnabled && !hasFrontendRag;
   const { skills } = useSkills();
 
   const {
@@ -128,7 +136,7 @@ const ChatBox: React.FC<{
     );
   }, [referencesEnabled, skillDisplayMap, thread.isLoading, thread.values.messages]);
   useEffect(() => {
-    if (!referencesEnabled) {
+    if (!shouldFetchBackendReferenceBatches) {
       setBackendReferenceBatches([]);
       return;
     }
@@ -164,7 +172,12 @@ const ChatBox: React.FC<{
         }
       });
     return () => controller.abort();
-  }, [referencesEnabled, thread.isLoading, threadId, thread.values.messages]);
+  }, [
+    shouldFetchBackendReferenceBatches,
+    thread.isLoading,
+    threadId,
+    thread.values.messages,
+  ]);
   const adaptedBackendReferenceBatches = useMemo(
     () =>
       adaptBackendReferenceBatches(
@@ -175,15 +188,22 @@ const ChatBox: React.FC<{
   );
   const referenceBatches = useMemo(
     () => {
-      if (adaptedBackendReferenceBatches.length > 0) {
+      if (
+        shouldFetchBackendReferenceBatches &&
+        adaptedBackendReferenceBatches.length > 0
+      ) {
         return adaptedBackendReferenceBatches;
       }
       return fallbackReferenceBatches;
     },
-    [adaptedBackendReferenceBatches, fallbackReferenceBatches],
+    [
+      adaptedBackendReferenceBatches,
+      fallbackReferenceBatches,
+      shouldFetchBackendReferenceBatches,
+    ],
   );
   useEffect(() => {
-    if (!referencesEnabled) {
+    if (!shouldFetchBackendReferenceBatches) {
       return;
     }
     const signature = JSON.stringify({
@@ -210,7 +230,14 @@ const ChatBox: React.FC<{
       fallbackBatches: debugReferenceBatches(fallbackReferenceBatches),
       finalBatches: debugReferenceBatches(referenceBatches),
     });
-  }, [adaptedBackendReferenceBatches, backendReferenceBatches, fallbackReferenceBatches, referencesEnabled, referenceBatches, threadId]);
+  }, [
+    adaptedBackendReferenceBatches,
+    backendReferenceBatches,
+    fallbackReferenceBatches,
+    referenceBatches,
+    shouldFetchBackendReferenceBatches,
+    threadId,
+  ]);
   const latestReferenceBatch =
     referenceBatches.length > 0
       ? referenceBatches[referenceBatches.length - 1]!
@@ -221,7 +248,7 @@ const ChatBox: React.FC<{
   const referenceSources = activeReferenceBatch?.sources ?? [];
   const hasCitationReferences = referenceSources.length > 0;
   useEffect(() => {
-    if (!referencesEnabled || !activeReferenceBatch) {
+    if (!shouldFetchBackendReferenceBatches || !activeReferenceBatch) {
       return;
     }
     logReferenceDebug("frontend-active-reference-batch-payload", threadId, {
@@ -230,7 +257,7 @@ const ChatBox: React.FC<{
       sourceCount: activeReferenceBatch.sources.length,
       sources: activeReferenceBatch.sources.map(debugReferenceSource),
     });
-  }, [activeReferenceBatch, referencesEnabled, threadId]);
+  }, [activeReferenceBatch, shouldFetchBackendReferenceBatches, threadId]);
   useEffect(() => {
     if (hasCitationReferences) {
       setReferencesOpen(true);

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

@@ -8,8 +8,13 @@ export function CitationLink({
   href,
   children,
   className,
+  onReferenceClick,
+  onClick,
   ...props
-}: ComponentProps<"a">) {
+}: ComponentProps<"a"> & {
+  /** Lets a message renderer show an in-place source preview instead of scrolling. */
+  onReferenceClick?: (referenceId: string) => void;
+}) {
   const childrenText = normalizeCitationText(children);
   const displayText = childrenText ?? "";
   const referenceId = href?.startsWith("#reference-")
@@ -28,6 +33,11 @@ export function CitationLink({
         )}
         onClick={(event) => {
           event.preventDefault();
+          if (onReferenceClick) {
+            onReferenceClick(referenceId);
+            onClick?.(event);
+            return;
+          }
           const batchId =
             event.currentTarget.closest<HTMLElement>("[data-reference-batch-id]")
               ?.dataset.referenceBatchId;
@@ -41,6 +51,7 @@ export function CitationLink({
             target?.scrollIntoView({ behavior: "smooth", block: "center" });
           };
           window.setTimeout(scroll, 240);
+          onClick?.(event);
         }}
         {...props}
       >
@@ -58,6 +69,7 @@ export function CitationLink({
         "text-primary decoration-primary/30 hover:decoration-primary/60 underline underline-offset-2 transition-colors",
         className,
       )}
+      onClick={onClick}
       {...props}
     >
       {displayText || children}

frontend-web/src/components/workspace/input-box.tsx

@@ -210,6 +210,9 @@ export function InputBox({
   const { models } = useModels();
   const singleRoundRagActive =
     context.execution_profile === "single_round_rag";
+  const multiRoundRagActive =
+    context.execution_profile === "multi_round_rag";
+  const frontendRagActive = singleRoundRagActive || multiRoundRagActive;
   const modelOptions = useMemo(() => {
     return singleRoundRagActive ? extraModels : models;
   }, [extraModels, models, singleRoundRagActive]);
@@ -235,7 +238,12 @@ export function InputBox({
     !userPreferences.hide_admin_prompt_prefix &&
     recommendedQuestions.length > 0;
 
-  useEffect(() => {
+  useEffect(() => {
+    // Multi-round RAG is a frontend execution profile, not a model option.
+    // Do not let the normal model fallback clear it on every render.
+    if (multiRoundRagActive) {
+      return;
+    }
     if (modelOptions.length === 0) {
       return;
     }
@@ -259,7 +267,7 @@ export function InputBox({
       mode: nextMode,
       execution_profile: fallbackModel.execution_profile,
     });
-  }, [context, modelOptions, onContextChange]);
+  }, [context, modelOptions, multiRoundRagActive, onContextChange]);
 
   const selectedModel = useMemo(() => {
     if (modelOptions.length === 0) {
@@ -342,6 +350,13 @@ export function InputBox({
       execution_profile: "single_round_rag",
     });
   }, [context, extraModels, onContextChange]);
+
+  const handleMultiRoundRagSelect = useCallback(() => {
+    onContextChange?.({
+      ...context,
+      execution_profile: "multi_round_rag",
+    });
+  }, [context, onContextChange]);
 
   const handleReasoningEffortSelect = useCallback(
     (effort: "minimal" | "low" | "medium" | "high") => {
@@ -712,14 +727,16 @@ export function InputBox({
               />
             </PromptInputActionMenuContent>
           </PromptInputActionMenu> */}
-            <AddAttachmentsButton
-              className={cn(
-                "rounded-full border-0 bg-transparent px-2.5! shadow-none text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
-                compact &&
-                  "gap-1.5! rounded-lg px-2.5! py-1! text-[11px] font-medium",
-              )}
-            />
-            <Tooltip
+            {!frontendRagActive && (
+              <AddAttachmentsButton
+                className={cn(
+                  "rounded-full border-0 bg-transparent px-2.5! shadow-none text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
+                  compact &&
+                    "gap-1.5! rounded-lg px-2.5! py-1! text-[11px] font-medium",
+                )}
+              />
+            )}
+            {!frontendRagActive && <Tooltip
               content={
                 context.writing_mode
                   ? "写作模式已开启：最终输出会强制保存为 Markdown 文件"
@@ -744,8 +761,8 @@ export function InputBox({
                 <FileTextIcon className="size-3" />
                 <span className="text-xs font-normal">写作</span>
               </PromptInputButton>
-            </Tooltip>
-            <Tooltip
+            </Tooltip>}
+            {!frontendRagActive && <Tooltip
               content={
                 memoryInjectionEnabled
                   ? "记忆注入已开启：对话前会注入历史记忆"
@@ -770,8 +787,8 @@ export function InputBox({
                 <BrainCircuitIcon className="size-3" />
                 <span className="text-xs font-normal">记忆</span>
               </PromptInputButton>
-            </Tooltip>
-            <Tooltip
+            </Tooltip>}
+            {!frontendRagActive && <Tooltip
               content={
                 ragModeEnabled
                   ? "参考文献模式已开启：检索类结果会按编号引用展示"
@@ -800,8 +817,8 @@ export function InputBox({
                 <BookMarkedIcon className="size-3" />
                 <span className="text-xs font-normal">参考文献</span>
               </PromptInputButton>
-            </Tooltip>
-            <Tooltip
+            </Tooltip>}
+            {!frontendRagActive && <Tooltip
               content={
                 contextCompressionEnabled
                   ? "上下文压缩已开启：超长对话会自动压缩历史以节省 token"
@@ -829,7 +846,7 @@ export function InputBox({
                 <ShrinkIcon className="size-3" />
                 <span className="text-xs font-normal">上下文压缩</span>
               </PromptInputButton>
-            </Tooltip>
+            </Tooltip>}
             <PromptInputActionMenu>
               <ModeHoverGuide
                 mode={
@@ -841,9 +858,11 @@ export function InputBox({
                     : "flash"
                 }
                 tooltipContent={
-                  selectedSingleRoundRag
+                  singleRoundRagActive
                     ? "单轮 RAG 问答：基于知识库检索生成答案，并展示参考资料"
-                    : undefined
+                    : multiRoundRagActive
+                      ? "多轮 RAG 问答：多次检索并展示检索过程与参考资料"
+                      : undefined
                 }
               >
                 <PromptInputActionMenuTrigger
@@ -851,7 +870,7 @@ export function InputBox({
                     "gap-1.5! rounded-full border-0 bg-transparent px-3! text-muted-foreground shadow-none hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
                     compact && "rounded-lg border px-2.5! py-1! text-[11px] font-medium",
                     compact &&
-                      (selectedSingleRoundRag
+                      (frontendRagActive
                         ? "border-emerald-200 bg-emerald-50/60 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-200"
                         : context.mode === "thinking"
                         ? "border-indigo-200 bg-indigo-50/60 text-indigo-700 hover:bg-indigo-100 dark:border-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-200"
@@ -863,7 +882,7 @@ export function InputBox({
                   )}
                   >
                     <div>
-                    {selectedSingleRoundRag ? (
+                    {frontendRagActive ? (
                       <BookMarkedIcon className="size-3" />
                     ) : context.mode === "flash" ? (
                       <ZapIcon className="size-3" />
@@ -881,8 +900,10 @@ export function InputBox({
                       context.mode === "ultra" ? "golden-text" : "",
                     )}
                   >
-                    {selectedSingleRoundRag
-                      ? "单轮 RAG"
+                    {frontendRagActive
+                      ? multiRoundRagActive
+                        ? "多轮 RAG"
+                        : "单轮 RAG"
                       : (context.mode === "flash" && t.inputBox.flashMode) ||
                       (context.mode === "thinking" &&
                         t.inputBox.reasoningMode) ||
@@ -899,7 +920,7 @@ export function InputBox({
                   <PromptInputActionMenu>
                     <PromptInputActionMenuItem
                       className={cn(
-                        !selectedSingleRoundRag && context.mode === "flash"
+                        !frontendRagActive && context.mode === "flash"
                           ? "text-accent-foreground"
                           : "text-muted-foreground/65",
                       )}
@@ -910,7 +931,7 @@ export function InputBox({
                           <ZapIcon
                             className={cn(
                               "mr-2 size-4",
-                              !selectedSingleRoundRag && context.mode === "flash" &&
+                              !frontendRagActive && context.mode === "flash" &&
                                 "text-accent-foreground",
                             )}
                           />
@@ -920,7 +941,7 @@ export function InputBox({
                           {t.inputBox.flashModeDescription}
                         </div>
                       </div>
-                      {!selectedSingleRoundRag && context.mode === "flash" ? (
+                      {!frontendRagActive && context.mode === "flash" ? (
                         <CheckIcon className="ml-auto size-4" />
                       ) : (
                         <div className="ml-auto size-4" />
@@ -929,7 +950,7 @@ export function InputBox({
                     {supportThinking && (
                       <PromptInputActionMenuItem
                         className={cn(
-                          !selectedSingleRoundRag && context.mode === "thinking"
+                          !frontendRagActive && context.mode === "thinking"
                             ? "text-accent-foreground"
                             : "text-muted-foreground/65",
                         )}
@@ -940,7 +961,7 @@ export function InputBox({
                             <LightbulbIcon
                               className={cn(
                                 "mr-2 size-4",
-                                !selectedSingleRoundRag && context.mode === "thinking" &&
+                                !frontendRagActive && context.mode === "thinking" &&
                                   "text-accent-foreground",
                               )}
                             />
@@ -950,7 +971,7 @@ export function InputBox({
                             {t.inputBox.reasoningModeDescription}
                           </div>
                         </div>
-                        {!selectedSingleRoundRag && context.mode === "thinking" ? (
+                        {!frontendRagActive && context.mode === "thinking" ? (
                           <CheckIcon className="ml-auto size-4" />
                         ) : (
                           <div className="ml-auto size-4" />
@@ -959,7 +980,7 @@ export function InputBox({
                     )}
                     <PromptInputActionMenuItem
                       className={cn(
-                        !selectedSingleRoundRag && context.mode === "pro"
+                        !frontendRagActive && context.mode === "pro"
                           ? "text-accent-foreground"
                           : "text-muted-foreground/65",
                       )}
@@ -970,7 +991,7 @@ export function InputBox({
                           <GraduationCapIcon
                             className={cn(
                               "mr-2 size-4",
-                              !selectedSingleRoundRag && context.mode === "pro" &&
+                              !frontendRagActive && context.mode === "pro" &&
                                 "text-accent-foreground",
                             )}
                           />
@@ -980,7 +1001,7 @@ export function InputBox({
                           {t.inputBox.proModeDescription}
                         </div>
                       </div>
-                      {!selectedSingleRoundRag && context.mode === "pro" ? (
+                      {!frontendRagActive && context.mode === "pro" ? (
                         <CheckIcon className="ml-auto size-4" />
                       ) : (
                         <div className="ml-auto size-4" />
@@ -988,7 +1009,7 @@ export function InputBox({
                     </PromptInputActionMenuItem>
                     <PromptInputActionMenuItem
                       className={cn(
-                        !selectedSingleRoundRag && context.mode === "ultra"
+                        !frontendRagActive && context.mode === "ultra"
                           ? "text-accent-foreground"
                           : "text-muted-foreground/65",
                       )}
@@ -999,14 +1020,14 @@ export function InputBox({
                           <RocketIcon
                             className={cn(
                               "mr-2 size-4",
-                              !selectedSingleRoundRag &&
+                              !frontendRagActive &&
                                 context.mode === "ultra" &&
                                 "text-[#dabb5e]",
                             )}
                           />
                           <div
                             className={cn(
-                              !selectedSingleRoundRag &&
+                              !frontendRagActive &&
                                 context.mode === "ultra" &&
                                 "golden-text",
                             )}
@@ -1018,7 +1039,7 @@ export function InputBox({
                           {t.inputBox.ultraModeDescription}
                         </div>
                       </div>
-                      {!selectedSingleRoundRag && context.mode === "ultra" ? (
+                      {!frontendRagActive && context.mode === "ultra" ? (
                         <CheckIcon className="ml-auto size-4" />
                       ) : (
                         <div className="ml-auto size-4" />
@@ -1057,11 +1078,39 @@ export function InputBox({
                         </PromptInputActionMenuItem>
                       </>
                     )}
+                    <PromptInputActionMenuItem
+                      className={cn(
+                        multiRoundRagActive
+                          ? "bg-emerald-50 text-emerald-800 hover:bg-emerald-100 focus:bg-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-200 dark:hover:bg-emerald-950/60 dark:focus:bg-emerald-950/60"
+                          : "text-muted-foreground/65",
+                      )}
+                      onSelect={handleMultiRoundRagSelect}
+                    >
+                      <div className="flex flex-col gap-2">
+                        <div className="flex items-center gap-1 font-bold">
+                          <BookMarkedIcon
+                            className={cn(
+                              "mr-2 size-4",
+                              multiRoundRagActive && "text-emerald-700 dark:text-emerald-200",
+                            )}
+                          />
+                          多轮 RAG 问答
+                        </div>
+                        <div className="pl-7 text-xs">
+                          多次检索、展示过程与参考资料，适合复杂问题
+                        </div>
+                      </div>
+                      {multiRoundRagActive ? (
+                        <CheckIcon className="ml-auto size-4" />
+                      ) : (
+                        <div className="ml-auto size-4" />
+                      )}
+                    </PromptInputActionMenuItem>
                   </PromptInputActionMenu>
                 </DropdownMenuGroup>
               </PromptInputActionMenuContent>
             </PromptInputActionMenu>
-            {supportReasoningEffort && context.mode !== "flash" && (
+            {!frontendRagActive && supportReasoningEffort && context.mode !== "flash" && (
               <PromptInputActionMenu>
                 <PromptInputActionMenuTrigger className={cn("gap-1.5! rounded-full border-0 bg-transparent px-3! text-muted-foreground shadow-none hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100", compact && "rounded-lg border border-border px-2.5! py-1! text-[13px]")}>
                   <div className="text-xs font-normal">
@@ -1179,8 +1228,8 @@ export function InputBox({
             )}
           </PromptInputTools>
           <PromptInputTools className={cn("gap-1.5", compact && "gap-2")}>
-            {knowledgeSelector}
-            {agentSelector && (
+            {!frontendRagActive && agentSelector && (
+            {!frontendRagActive && knowledgeSelector}
               <AgentSelector
                 selectedAgentId={agentSelector.selectedAgentId}
                 onAgentChange={agentSelector.onAgentChange}
@@ -1188,7 +1237,7 @@ export function InputBox({
                 compact={compact}
               />
             )}
-            {promptPrefix && (
+            {!frontendRagActive && promptPrefix && (
               <Tooltip
                 content={
                   promptPrefix.on
@@ -1216,7 +1265,7 @@ export function InputBox({
                 </PromptInputButton>
               </Tooltip>
             )}
-            <ModelSelector
+            {!multiRoundRagActive && <ModelSelector
               open={modelDialogOpen}
               onOpenChange={setModelDialogOpen}
             >
@@ -1266,7 +1315,7 @@ export function InputBox({
                   ))}
                 </ModelSelectorList>
               </ModelSelectorContent>
-            </ModelSelector>
+            </ModelSelector>}
             <PromptInputSubmit
               className={cn(
                 "rounded-full border-border bg-background shadow-sm hover:bg-muted dark:bg-blue-500 dark:border-blue-500 dark:text-white dark:hover:bg-blue-400 dark:shadow-none",

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

@@ -1,5 +1,13 @@
 import type { Message } from '@langchain/langgraph-sdk';
-import { ClockIcon, FileIcon, Loader2Icon, PencilIcon } from 'lucide-react';
+import {
+  ChevronDownIcon,
+  ClockIcon,
+  ExternalLinkIcon,
+  FileIcon,
+  Loader2Icon,
+  PencilIcon,
+  SearchIcon,
+} from 'lucide-react';
 import {
   memo,
   useCallback,
@@ -25,8 +33,15 @@ import {
   ReasoningTrigger,
 } from '@/components/ai-elements/reasoning';
 import { Task, TaskTrigger } from '@/components/ai-elements/task';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { Textarea } from '@/components/ui/textarea';
 import {
   UploadedFilePreviewDialog,
@@ -34,7 +49,8 @@ import {
 } from '@/components/workspace/messages/uploaded-file-preview-dialog';
 import { resolveArtifactURL } from '@/core/artifacts/utils';
 import { useChatAskTimes } from '@/core/chat-timestamps';
-import { getBackendBaseURL } from '@/core/config';
+import { getBackendBaseURL } from '@/core/config';
+import { readRuntimeEnv } from '@/env';
 import { useI18n } from '@/core/i18n/hooks';
 import {
   extractContentFromMessage,
@@ -49,7 +65,12 @@ import {
   applyInlineCitations,
   type RuntimeDisplaySource,
 } from '@/core/skill-display/runtime';
-import { humanMessagePlugins } from '@/core/streamdown';
+import { humanMessagePlugins } from '@/core/streamdown';
+import {
+  getMultiRoundRagTrace,
+  isMultiRoundRagMessage,
+  type MultiRoundRagRound,
+} from '@/core/threads/use-multi-round-rag';
 import { cn } from '@/lib/utils';
 
 import { CitationLink } from '../citations/citation-link';
@@ -561,18 +582,47 @@ function MessageContent_({
         : baseRehypePlugins,
     [baseRehypePlugins, extraRehypePlugins],
   );
-  const askTimes = useChatAskTimes();
-  const isHuman = message.type === 'human';
-  const resolveArtifact = useArtifactResolver(threadId);
-  const components = useMemo(
+  const askTimes = useChatAskTimes();
+  const isHuman = message.type === 'human';
+  const isSingleRoundRag =
+    message.additional_kwargs?.single_round_rag === true;
+  const isMultiRoundRag = isMultiRoundRagMessage(message);
+  const multiRoundTrace = isMultiRoundRag
+    ? getMultiRoundRagTrace(message)
+    : null;
+  const [selectedCitation, setSelectedCitation] =
+    useState<RuntimeDisplaySource | null>(null);
+  const resolveArtifact = useArtifactResolver(threadId);
+  const handleCitationClick = useCallback(
+    (referenceId: string) => {
+      const referenceIndex = Number(referenceId);
+      if (!Number.isInteger(referenceIndex) || referenceIndex < 1) return;
+      const source =
+        displaySources.find((item) => item.index === referenceIndex) ??
+        displaySources[referenceIndex - 1];
+      if (source) setSelectedCitation(source);
+    },
+    [displaySources],
+  );
+  const components = useMemo(
     () => ({
       img: (props: ImgHTMLAttributes<HTMLImageElement>) => (
         <MessageImage {...props} threadId={threadId} maxWidth="90%" />
       ),
-      a: ({ href, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) => {
-        if (href?.startsWith('#reference-')) {
-          return <CitationLink href={href} {...props} />;
-        }
+      a: ({ href, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) => {
+        if (href?.startsWith('#reference-')) {
+          return (
+            <CitationLink
+              href={href}
+              {...props}
+              onReferenceClick={
+                isSingleRoundRag || isMultiRoundRag
+                  ? handleCitationClick
+                  : undefined
+              }
+            />
+          );
+        }
         if (
           typeof props.children === 'string' &&
           /^citation:/i.test(props.children)
@@ -593,8 +643,14 @@ function MessageContent_({
         return <a {...props} href={href} />;
       },
     }),
-    [threadId, resolveArtifact],
-  );
+    [
+      handleCitationClick,
+      isMultiRoundRag,
+      isSingleRoundRag,
+      resolveArtifact,
+      threadId,
+    ],
+  );
 
   // Question carries its own `client_ts` (round-trips through the checkpoint).
   // The AI answer has no timestamp of its own, so it inherits the turn's ask
@@ -661,7 +717,7 @@ function MessageContent_({
   }
 
   // Reasoning-only AI message (no main response content yet)
-  if (!isHuman && reasoningContent && !rawContent) {
+  if (!isHuman && reasoningContent && !rawContent && !multiRoundTrace) {
     return (
       <AIElementMessageContent className={className}>
         <Reasoning isStreaming={isLoading}>
@@ -707,32 +763,284 @@ function MessageContent_({
     );
   }
 
-  return (
-    <AIElementMessageContent className={className}>
-      {filesList}
-      <div data-reference-batch-id={message.id} className="contents">
-        <AssistantDisplayContent
-          content={contentToDisplay}
-          displaySources={displaySources}
-          isLoading={isLoading}
-          renderSkillDisplayBlocks={false}
-          rehypePlugins={[...rehypePlugins, [rehypeKatex, { output: 'html' }]]}
-          components={components}
-        />
-      </div>
-      <MessageTokenUsage
-        enabled={tokenUsageEnabled}
-        isLoading={isLoading}
-        message={message}
-      />
-      {!isLoading && contentToDisplay ? (
-        <MessageTimeStamp time={messageTime} align="left" />
-      ) : null}
-    </AIElementMessageContent>
-  );
-}
-
-function EmbeddedPageContextCard({
+  return (
+    <>
+      <AIElementMessageContent className={className}>
+        {filesList}
+        <div data-reference-batch-id={message.id} className="contents">
+          {multiRoundTrace ? (
+            <MultiRoundRagContent
+              trace={multiRoundTrace}
+              content={contentToDisplay}
+              displaySources={displaySources}
+              isLoading={isLoading}
+              rehypePlugins={[...rehypePlugins, [rehypeKatex, { output: 'html' }]]}
+              components={components}
+            />
+          ) : (
+            <AssistantDisplayContent
+              content={contentToDisplay}
+              displaySources={displaySources}
+              isLoading={isLoading}
+              renderSkillDisplayBlocks={false}
+              rehypePlugins={[...rehypePlugins, [rehypeKatex, { output: 'html' }]]}
+              components={components}
+            />
+          )}
+        </div>
+        <MessageTokenUsage
+          enabled={tokenUsageEnabled}
+          isLoading={isLoading}
+          message={message}
+        />
+        {!isLoading && contentToDisplay ? (
+          <MessageTimeStamp time={messageTime} align="left" />
+        ) : null}
+      </AIElementMessageContent>
+      {(isSingleRoundRag || isMultiRoundRag) && (
+        <SingleRoundRagCitationDialog
+          source={selectedCitation}
+          onOpenChange={(open) => {
+            if (!open) setSelectedCitation(null);
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+function SingleRoundRagCitationDialog({
+  source,
+  onOpenChange,
+}: {
+  source: RuntimeDisplaySource | null;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const sourceUrl = resolveSingleRoundRagSourceUrl(source);
+  return (
+    <Dialog open={!!source} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[min(42rem,calc(100vh-2rem))] max-w-2xl overflow-hidden p-5 sm:max-w-2xl">
+        <DialogHeader className="pr-8">
+          <DialogTitle className="leading-relaxed">
+            {source?.title || "引用资料"}
+          </DialogTitle>
+          <DialogDescription className="space-y-1 text-xs">
+            <span className="block">来源：{source?.source || source?.type || "未知来源"}</span>
+            {source?.time && <span className="block">时间：{source.time}</span>}
+          </DialogDescription>
+        </DialogHeader>
+        {sourceUrl && (
+          <a
+            href={sourceUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="border-input hover:bg-accent inline-flex w-fit items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors"
+          >
+            <ExternalLinkIcon className="size-4" />
+            查看原文链接
+          </a>
+        )}
+        <div className="bg-muted/50 max-h-[min(26rem,calc(100vh-16rem))] overflow-auto rounded-lg p-3 text-sm leading-7 whitespace-pre-wrap">
+          {source?.content || source?.snippet || "暂无引用内容"}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function MultiRoundRagContent({
+  trace,
+  content,
+  displaySources,
+  isLoading,
+  rehypePlugins,
+  components,
+}: {
+  trace: NonNullable<ReturnType<typeof getMultiRoundRagTrace>>;
+  content: string;
+  displaySources: RuntimeDisplaySource[];
+  isLoading: boolean;
+  rehypePlugins: MarkdownContentProps['rehypePlugins'];
+  components: MarkdownContentProps['components'];
+}) {
+  const [open, setOpen] = useState(!trace.isComplete);
+  useEffect(() => {
+    if (!trace.isComplete) setOpen(true);
+  }, [trace.isComplete]);
+
+  return (
+    <div className="space-y-3">
+      <section className="border-border/70 overflow-hidden rounded-xl border bg-muted/20">
+        <button
+          type="button"
+          className="hover:bg-muted/50 flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition-colors"
+          onClick={() => setOpen((value) => !value)}
+        >
+          <div className="flex min-w-0 items-center gap-2">
+            {trace.isComplete ? (
+              <SearchIcon className="text-primary size-4 shrink-0" />
+            ) : (
+              <Loader2Icon className="text-primary size-4 shrink-0 animate-spin" />
+            )}
+            <div>
+              <div className="text-sm font-medium">多轮检索过程</div>
+              <div className="text-muted-foreground text-xs">
+                {trace.isComplete
+                  ? `已完成 ${trace.rounds.length} 轮检索`
+                  : '正在分析问题并检索资料'}
+              </div>
+            </div>
+          </div>
+          <ChevronDownIcon
+            className={cn('text-muted-foreground size-4 transition-transform', !open && '-rotate-90')}
+          />
+        </button>
+        {open && (
+          <div className="border-border/60 space-y-3 border-t px-4 py-3">
+            {trace.rounds.map((round, index) => (
+              <MultiRoundRagRoundCard
+                key={round.id}
+                index={index + 1}
+                round={round}
+                isLoading={isLoading}
+                rehypePlugins={rehypePlugins}
+                components={components}
+              />
+            ))}
+          </div>
+        )}
+      </section>
+      <section className="border-border/70 rounded-xl border p-4">
+        <div className="mb-3 text-sm font-semibold">最终回答</div>
+        {content ? (
+          <AssistantDisplayContent
+            content={content}
+            displaySources={displaySources}
+            isLoading={isLoading}
+            renderSkillDisplayBlocks={false}
+            rehypePlugins={rehypePlugins}
+            components={components}
+          />
+        ) : (
+          <div className="text-muted-foreground flex items-center gap-2 text-sm">
+            <Loader2Icon className="size-4 animate-spin" />
+            正在生成最终回答…
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+function MultiRoundRagRoundCard({
+  index,
+  round,
+  isLoading,
+  rehypePlugins,
+  components,
+}: {
+  index: number;
+  round: MultiRoundRagRound;
+  isLoading: boolean;
+  rehypePlugins: MarkdownContentProps['rehypePlugins'];
+  components: MarkdownContentProps['components'];
+}) {
+  return (
+    <div className="border-border/60 rounded-lg border bg-background/70 p-3">
+      <div className="flex items-center gap-2 text-sm font-medium">
+        <span className="bg-primary/10 text-primary flex size-5 shrink-0 items-center justify-center rounded-full text-xs">
+          {index}
+        </span>
+        <span>{round.title}</span>
+        {round.isSearching && <Loader2Icon className="text-primary size-3.5 animate-spin" />}
+      </div>
+      {round.thought && (
+        <section className="border-border/50 bg-muted/30 mt-3 rounded-md border p-3">
+          <div className="text-muted-foreground mb-2 text-xs font-medium">思考内容</div>
+          <MarkdownContent
+            content={round.thought}
+            isLoading={isLoading}
+            rehypePlugins={rehypePlugins}
+            components={components}
+            className="text-muted-foreground text-sm"
+          />
+        </section>
+      )}
+      {round.body && (
+        <section className="border-border/50 mt-3 rounded-md border p-3">
+          <div className="text-muted-foreground mb-2 text-xs font-medium">本轮正文</div>
+          <MarkdownContent
+            content={round.body}
+            isLoading={isLoading}
+            rehypePlugins={rehypePlugins}
+            components={components}
+            className="text-sm"
+          />
+        </section>
+      )}
+      {round.query && (
+        <div className="border-primary/20 bg-primary/5 text-primary mt-2 inline-flex max-w-full items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs">
+          <SearchIcon className="size-3 shrink-0" />
+          <span className="truncate">{round.query}</span>
+        </div>
+      )}
+      {round.retrievals.length > 0 && (
+        <section className="border-border/50 mt-3 rounded-md border p-3">
+          <div className="text-muted-foreground mb-2 text-xs font-medium">
+            检索内容 · {round.retrievals.length} 条
+          </div>
+          <div className="space-y-2">
+            {round.retrievals.map((item, resultIndex) => (
+              <details
+                key={`${item.id ?? item.title}-${resultIndex}`}
+                className="border-border/60 rounded-md border px-3 py-2"
+                open={resultIndex === 0}
+              >
+                <summary className="cursor-pointer list-none text-sm font-medium">
+                  <span className="mr-2 text-xs text-muted-foreground">{resultIndex + 1}.</span>
+                  {item.title}
+                </summary>
+                <div className="text-muted-foreground mt-2 text-sm leading-6 whitespace-pre-wrap">
+                  {item.content || '暂无资料摘要'}
+                </div>
+                {(item.source || item.time) && (
+                  <div className="text-muted-foreground mt-2 text-xs">
+                    {[item.source, item.time].filter(Boolean).join(' · ')}
+                  </div>
+                )}
+              </details>
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}
+
+function resolveSingleRoundRagSourceUrl(
+  source: RuntimeDisplaySource | null,
+): string | undefined {
+  if (!source) return undefined;
+  if (source.url && /^https?:\/\//i.test(source.url)) return source.url;
+
+  const raw = source.raw ?? {};
+  const recordId =
+    source.id ??
+    readString(raw.recUuid) ??
+    readString(raw.rec_uuid) ??
+    readString(raw.uuid);
+  const knowledgeUrl = readRuntimeEnv("VITE_AIPI_KNOWLEDGE_URL")?.replace(/\/$/, "");
+  if (!knowledgeUrl || !recordId) return undefined;
+  return `${knowledgeUrl}/#/knowledge/mid-detail?recUuid=${encodeURIComponent(recordId)}`;
+}
+
+function readString(value: unknown): string | undefined {
+  if (typeof value === "string" && value.trim()) return value;
+  if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  return undefined;
+}
+
+function EmbeddedPageContextCard({
   pageContext,
 }: {
   pageContext: EmbeddedPageContext;

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

@@ -35,6 +35,7 @@ import type { Subtask } from "@/core/tasks";
 import { useUpdateSubtask } from "@/core/tasks/context";
 import type { AgentThreadState } from "@/core/threads";
 import { isSingleRoundRagMessage } from "@/core/threads/use-single-round-rag";
+import { isMultiRoundRagMessage } from "@/core/threads/use-multi-round-rag";
 import { cn } from "@/lib/utils";
 import { resolveAllowMultiple } from "@/roundtable-planning/lib/clarification";
 
@@ -239,7 +240,11 @@ export function MessageList({
   const ragModeEnabled =
     settings.display.ragModeEnabled || isThreadRagModeLocked(threadId);
   const hasSingleRoundRag = useMemo(
-    () => messages.some(isSingleRoundRagMessage),
+    () =>
+      messages.some(
+        (message) =>
+          isSingleRoundRagMessage(message) || isMultiRoundRagMessage(message),
+      ),
     [messages],
   );
   const referencesEnabled = ragModeEnabled || hasSingleRoundRag;