代码提交

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

@@ -6,9 +6,10 @@ import {
   ExternalLinkIcon,
   FileIcon,
   Loader2Icon,
-  PencilIcon,
-  SearchIcon,
-} from 'lucide-react';
+  PencilIcon,
+  SearchIcon,
+  SparklesIcon,
+} from 'lucide-react';
 import {
   memo,
   useCallback,
@@ -16,9 +17,10 @@ import {
   useEffect,
   useMemo,
   useState,
-  type AnchorHTMLAttributes,
-  type ImgHTMLAttributes,
-} from 'react';
+  type AnchorHTMLAttributes,
+  type ImgHTMLAttributes,
+  type ReactNode,
+} from 'react';
 import rehypeKatex from 'rehype-katex';
 
 import { Loader } from '@/components/ai-elements/loader';
@@ -838,7 +840,7 @@ function FrontendRagSourcesPanel({
   const [open, setOpen] = useState(false);
   if (sources.length === 0) return null;
   return (
-    <Collapsible open={open} onOpenChange={setOpen} className="mt-3 w-full">
+    <Collapsible open={open} onOpenChange={setOpen} className="mt-3 w-full max-w-5xl">
       <CollapsibleTrigger asChild>
         <button
           type="button"
@@ -944,14 +946,17 @@ function MultiRoundRagContent({
   isLoading: boolean;
   rehypePlugins: MarkdownContentProps['rehypePlugins'];
   components: MarkdownContentProps['components'];
-}) {
-  const [open, setOpen] = useState(!trace.isComplete);
-  useEffect(() => {
-    if (!trace.isComplete) setOpen(true);
-  }, [trace.isComplete]);
+}) {
+  const [open, setOpen] = useState(!trace.isComplete);
+  useEffect(() => {
+    // Keep the active turn expanded so each new retrieval is visible as it
+    // arrives, then match GeneralQA by collapsing the completed trace.  The
+    // header still carries the total round count for quick scanning.
+    setOpen(!trace.isComplete);
+  }, [trace.isComplete]);
 
   return (
-    <div className="space-y-3">
+    <div className="w-full min-w-0 max-w-5xl space-y-4 overflow-hidden">
       <section className="border-border/70 overflow-hidden rounded-xl border bg-muted/20">
         <button
           type="button"
@@ -965,31 +970,42 @@ function MultiRoundRagContent({
               <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 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>
+        {open && (
+          <div className="border-border/60 space-y-3 border-t px-4 py-3">
+            {trace.rounds.map((round, index) => (
+              <div
+                key={round.id}
+                className={cn(
+                  'relative pl-5',
+                  index < trace.rounds.length - 1 && 'pb-1',
+                )}
+              >
+                {index < trace.rounds.length - 1 && (
+                  <span className="bg-border absolute bottom-0 left-[7px] top-8 w-px" />
+                )}
+                <span className="border-primary bg-background absolute left-0 top-4 size-3.5 rounded-full border-2" />
+                <MultiRoundRagRoundCard
+                  index={index + 1}
+                  round={round}
+                  isLoading={isLoading}
+                  rehypePlugins={rehypePlugins}
+                  components={components}
+                />
+              </div>
+            ))}
+          </div>
         )}
       </section>
       <section className="border-border/70 rounded-xl border p-4">
@@ -1014,7 +1030,7 @@ function MultiRoundRagContent({
   );
 }
 
-function MultiRoundRagRoundCard({
+function MultiRoundRagRoundCard({
   index,
   round,
   isLoading,
@@ -1026,78 +1042,228 @@ function MultiRoundRagRoundCard({
   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>
-  );
-}
+}) {
+  const [open, setOpen] = useState(!round.query || round.isSearching);
+  useEffect(() => {
+    // A newly created round stays expanded to expose its thought and loading
+    // query. Once that query has returned, retain only the round header until
+    // the user asks to inspect the completed detail again.
+    setOpen(!round.query || round.isSearching);
+  }, [round.id, round.isSearching, round.query]);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <article className="border-border/60 bg-background/80 overflow-hidden rounded-xl border shadow-sm">
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="hover:bg-muted/40 focus-visible:ring-ring flex min-h-11 w-full min-w-0 items-center gap-2 px-3 py-2.5 text-left text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset"
+          >
+            <span className="bg-primary/10 text-primary flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold">
+              {index}
+            </span>
+            <span className="min-w-0 flex-1 truncate">{round.title}</span>
+            {round.isSearching ? (
+              <span className="bg-primary/10 text-primary inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-1 text-[11px] font-medium">
+                <Loader2Icon className="size-3 motion-reduce:animate-none animate-spin" />
+                检索中
+              </span>
+            ) : (
+              <span className="text-muted-foreground shrink-0 text-[11px]">已完成</span>
+            )}
+            <ChevronDownIcon
+              className={cn(
+                'text-muted-foreground size-4 shrink-0 transition-transform duration-200 motion-reduce:transition-none',
+                !open && '-rotate-90',
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="border-border/50 border-t px-3 pb-3">
+          <div className="pt-3">
+            {round.thought && (
+              <MultiRoundRagDetailSection
+                title="思考内容"
+                icon={<SparklesIcon className="text-primary size-4" />}
+              >
+                <MarkdownContent
+                  content={round.thought}
+                  isLoading={isLoading}
+                  rehypePlugins={rehypePlugins}
+                  components={components}
+                  className="text-muted-foreground text-sm"
+                />
+              </MultiRoundRagDetailSection>
+            )}
+            {round.body && (
+              <section className="border-border/50 mt-3 rounded-lg 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 || round.isSearching) && (
+              <div
+                className={cn(
+                  'border-primary/20 bg-primary/5 text-primary mt-3 inline-flex max-w-full items-center gap-1.5 rounded-full border px-2.5 py-1.5 text-xs',
+                  round.isSearching && 'animate-pulse motion-reduce:animate-none',
+                )}
+                aria-live={round.isSearching ? 'polite' : undefined}
+              >
+                {round.isSearching ? (
+                  <Loader2Icon className="size-3.5 shrink-0 motion-reduce:animate-none animate-spin" />
+                ) : (
+                  <SearchIcon className="size-3.5 shrink-0" />
+                )}
+                <span className="shrink-0 text-muted-foreground">检索词</span>
+                <span className="min-w-0 truncate font-medium">
+                  {round.query || '正在生成检索词…'}
+                </span>
+              </div>
+            )}
+            {(round.query || round.isSearching || round.retrievals.length > 0) && (
+              <MultiRoundRagDetailSection
+                defaultOpen={!round.isSearching}
+                title="检索内容"
+                icon={<FileIcon className="text-primary size-3.5" />}
+                suffix={<span className="text-muted-foreground text-xs">{round.retrievals.length} 条</span>}
+              >
+                {round.isSearching ? (
+                  <div className="text-muted-foreground flex items-center gap-2 py-1 text-sm">
+                    <Loader2Icon className="text-primary size-4 motion-reduce:animate-none animate-spin" />
+                    正在召回相关内容…
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {round.retrievals.length > 0 ? (
+                      round.retrievals.map((item, resultIndex) => (
+                        <MultiRoundRagResultCard
+                          key={`${item.id ?? item.title}-${resultIndex}`}
+                          item={item}
+                          index={resultIndex + 1}
+                        />
+                      ))
+                    ) : (
+                      <p className="text-muted-foreground py-1 text-sm">
+                        本轮未召回相关资料。
+                      </p>
+                    )}
+                  </div>
+                )}
+              </MultiRoundRagDetailSection>
+            )}
+          </div>
+        </CollapsibleContent>
+      </article>
+    </Collapsible>
+  );
+}
+
+function MultiRoundRagDetailSection({
+  title,
+  icon,
+  suffix,
+  defaultOpen = true,
+  children,
+}: {
+  title: string;
+  icon: ReactNode;
+  suffix?: ReactNode;
+  defaultOpen?: boolean;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  useEffect(() => setOpen(defaultOpen), [defaultOpen]);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <section className="border-border/50 bg-muted/20 mt-3 overflow-hidden rounded-lg border">
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="hover:bg-muted/40 focus-visible:ring-ring flex min-h-11 w-full min-w-0 items-center gap-2 px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset"
+          >
+            {icon}
+            <span className="min-w-0 flex-1 text-sm font-medium">{title}</span>
+            {suffix}
+            <ChevronDownIcon
+              className={cn(
+                'text-muted-foreground size-4 shrink-0 transition-transform duration-200 motion-reduce:transition-none',
+                !open && '-rotate-90',
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="border-border/50 border-t px-3 pb-3 pt-2.5">
+          {children}
+        </CollapsibleContent>
+      </section>
+    </Collapsible>
+  );
+}
+
+function MultiRoundRagResultCard({
+  item,
+  index,
+}: {
+  item: MultiRoundRagRound['retrievals'][number];
+  index: number;
+}) {
+  const [open, setOpen] = useState(index === 1);
+  const sourceMeta = [item.source, item.time].filter(Boolean).join(' · ');
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div className="border-border/60 hover:border-primary/30 bg-background rounded-lg border transition-colors">
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="hover:bg-muted/40 focus-visible:ring-ring flex min-h-11 w-full min-w-0 items-center gap-2 rounded-lg px-3 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset"
+          >
+            <span className="bg-primary/10 text-primary flex size-5 shrink-0 items-center justify-center rounded-md text-[11px] font-semibold">
+              {index}
+            </span>
+            <span className="min-w-0 flex-1 truncate text-sm font-medium" title={item.title}>
+              {item.title}
+            </span>
+            <ChevronDownIcon
+              className={cn(
+                'text-muted-foreground size-4 shrink-0 transition-transform duration-200 motion-reduce:transition-none',
+                !open && '-rotate-90',
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="border-border/50 border-t px-3 pb-3 pt-2.5">
+          <p className="text-muted-foreground text-sm leading-6 whitespace-pre-wrap">
+            {item.content || '暂无资料摘要'}
+          </p>
+          {(sourceMeta || item.url) && (
+            <div className="text-muted-foreground mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
+              {sourceMeta && <span>{sourceMeta}</span>}
+              {item.url && (
+                <a
+                  href={item.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline inline-flex items-center gap-1"
+                >
+                  查看原文
+                  <ExternalLinkIcon className="size-3" />
+                </a>
+              )}
+            </div>
+          )}
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
 
 function resolveSingleRoundRagSourceUrl(
   source: RuntimeDisplaySource | null,

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

@@ -255,15 +255,15 @@ export function MessageList({
   const [settings] = useLocalSettings();
   const ragModeEnabled =
     settings.display.ragModeEnabled || isThreadRagModeLocked(threadId);
-  const hasSingleRoundRag = useMemo(
+  const hasSingleRoundRag = useMemo(
     () =>
       messages.some(
         (message) =>
           isSingleRoundRagMessage(message) || isMultiRoundRagMessage(message),
       ),
-    [messages],
-  );
-  const referencesEnabled = ragModeEnabled || hasSingleRoundRag;
+    [messages],
+  );
+  const referencesEnabled = ragModeEnabled || hasSingleRoundRag;
   const { skills } = useSkills();
   const skillDisplayMap = useMemo(
     () => (referencesEnabled ? buildSkillDisplayMap(skills) : new Map()),
@@ -436,11 +436,12 @@ export function MessageList({
       className={cn("flex size-full flex-col justify-center", className)}
     >
       <ScrollToBottomOnUserMessage threadId={threadId} messages={messages} />
-      <ConversationContent
-        className={cn(
-          "mx-auto w-full max-w-(--container-width-lg) gap-8 pt-12",
-          contentClassName,
-        )}
+      <ConversationContent
+        className={cn(
+          "mx-auto w-full max-w-(--container-width-lg)",
+          hasSingleRoundRag ? "gap-4 pt-4" : "gap-8 pt-12",
+          contentClassName,
+        )}
       >
         <MessageMetricsProvider messages={messages} isLoading={thread.isLoading}>
         {groupMessages(messages, (group) => {