feat: refine position roundtable workflow

frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx

@@ -121,13 +121,14 @@ export function ArtifactFileDetail({
   className,
   filepath: filepathFromProps,
   threadId,
-  onClose,
-  allowVirtualMarkdownEdit = false,
-  disableDesensitize = false,
-}: {
-  className?: string;
-  filepath: string;
-  threadId: string;
+  onClose,
+  allowVirtualMarkdownEdit = false,
+  disableDesensitize = false,
+  hideFileName = false,
+}: {
+  className?: string;
+  filepath: string;
+  threadId: string;
   /** 覆盖默认关闭行为（仅 setOpen(false)）；圆桌 Step3 文件预览用于退出沙箱模式。 */
   onClose?: () => void;
   /**
@@ -140,9 +141,10 @@ export function ArtifactFileDetail({
    * 关闭对预览内容的脱敏。多智能体会商页的「消息列表沙箱」按需求**不脱敏**沙箱内的
    * 产物内容（用户要拿原始文件），故 Step2SandboxLayout 传 true；主聊天等其它调用方
    * 默认 false，沿用全局脱敏。
-   */
-  disableDesensitize?: boolean;
-}) {
+   */
+  disableDesensitize?: boolean;
+  hideFileName?: boolean;
+}) {
   const { t } = useI18n();
   const { artifacts, setOpen, select } = useArtifacts();
   const { isMock, thread, publicShareCode } = useThread();
@@ -216,10 +218,11 @@ export function ArtifactFileDetail({
     !isMock;
   const [draftContent, setDraftContent] = useState("");
   const [hasLocalEdits, setHasLocalEdits] = useState(false);
-  const updateArtifact = useUpdateArtifactContent();
-  const displayContent = canEditArtifact ? draftContent : (content ?? "");
-  const isHtmlStreaming = language === "html" && thread.isLoading;
-  const hasMultipleArtifacts = (artifacts?.length ?? 0) > 1;
+  const updateArtifact = useUpdateArtifactContent();
+  const displayContent = canEditArtifact ? draftContent : (content ?? "");
+  const isAutoPreviewLanguage = language === "html" || language === "markdown";
+  const isPreviewStreaming = isAutoPreviewLanguage && thread.isLoading;
+  const hasMultipleArtifacts = (artifacts?.length ?? 0) > 1;
   const fileTypeLabel = useMemo(() => {
     if (isImageFile(filepath)) return "IMG";
     if (isSpreadsheetFile) return "XLSX";
@@ -258,28 +261,31 @@ export function ArtifactFileDetail({
     setDraftContent(content ?? "");
   }, [canEditArtifact, content, hasLocalEdits]);
 
-  useEffect(() => {
-    setAllowAutoViewSwitch(true);
-    setAutoScrollEnabled(true);
-    setShowResumeAutoScroll(false);
-
-    if (language === "html") {
-      setViewMode(thread.isLoading ? "code" : "preview");
-      return;
-    }
-
+  useEffect(() => {
+    setAllowAutoViewSwitch(true);
+    setAutoScrollEnabled(true);
+    setShowResumeAutoScroll(false);
+    setShowPreviewSwitchPulse(false);
+  }, [filepathFromProps]);
+
+  useEffect(() => {
+    if (isPreviewStreaming) {
+      setViewMode("code");
+      return;
+    }
+
     if (isSupportPreview) {
       setViewMode("preview");
       return;
     }
-
-    setViewMode("code");
-  }, [filepathFromProps, isSupportPreview, language, thread.isLoading]);
-
-  useEffect(() => {
-    if (!allowAutoViewSwitch || language !== "html") {
-      return;
-    }
+
+    setViewMode("code");
+  }, [isPreviewStreaming, isSupportPreview]);
+
+  useEffect(() => {
+    if (!allowAutoViewSwitch || !isAutoPreviewLanguage) {
+      return;
+    }
 
     if (thread.isLoading) {
       setViewMode("code");
@@ -291,9 +297,9 @@ export function ArtifactFileDetail({
     const timeoutId = window.setTimeout(() => {
       setShowPreviewSwitchPulse(false);
     }, 1400);
-
-    return () => window.clearTimeout(timeoutId);
-  }, [allowAutoViewSwitch, language, thread.isLoading]);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [allowAutoViewSwitch, isAutoPreviewLanguage, isSupportPreview, thread.isLoading]);
 
   const scrollArtifactToBottom = useCallback(
     (behavior: ScrollBehavior = "auto") => {
@@ -576,28 +582,30 @@ export function ArtifactFileDetail({
             <span className="bg-background text-muted-foreground inline-flex h-7 shrink-0 items-center rounded-full border border-black/6 px-2.5 text-[10px] font-semibold tracking-[0.16em] dark:border-white/8">
               {fileTypeLabel}
             </span>
-            <ArtifactTitle className="min-w-0">
-              {useWriteFileStreaming ? (
-                <div className="truncate px-3">{getFileName(filepath)}</div>
-              ) : hasMultipleArtifacts ? (
-                <Select value={filepath} onValueChange={select}>
-                  <SelectTrigger className="text-foreground h-8 min-w-0 max-w-[16rem] border-none bg-transparent! px-3 shadow-none select-none focus-visible:ring-0 focus:outline-0 active:outline-0">
-                    <SelectValue placeholder="Select a file" />
-                  </SelectTrigger>
-                  <SelectContent className="select-none">
-                    <SelectGroup>
-                      {(artifacts ?? []).map((artifactPath) => (
-                        <SelectItem key={artifactPath} value={artifactPath}>
-                          {getFileName(artifactPath)}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              ) : (
-                <div className="truncate px-3">{getFileName(filepath)}</div>
-              )}
-            </ArtifactTitle>
+            {!hideFileName && (
+              <ArtifactTitle className="min-w-0">
+                {useWriteFileStreaming ? (
+                  <div className="truncate px-3">{getFileName(filepath)}</div>
+                ) : hasMultipleArtifacts ? (
+                  <Select value={filepath} onValueChange={select}>
+                    <SelectTrigger className="text-foreground h-8 min-w-0 max-w-[16rem] border-none bg-transparent! px-3 shadow-none select-none focus-visible:ring-0 focus:outline-0 active:outline-0">
+                      <SelectValue placeholder="Select a file" />
+                    </SelectTrigger>
+                    <SelectContent className="select-none">
+                      <SelectGroup>
+                        {(artifacts ?? []).map((artifactPath) => (
+                          <SelectItem key={artifactPath} value={artifactPath}>
+                            {getFileName(artifactPath)}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <div className="truncate px-3">{getFileName(filepath)}</div>
+                )}
+              </ArtifactTitle>
+            )}
           </div>
         </div>
         <div className="flex w-full items-center justify-center md:w-auto md:flex-1">
@@ -634,10 +642,10 @@ export function ArtifactFileDetail({
                   <EyeIcon />
                 </ToggleGroupItem>
               </ToggleGroup>
-              {isHtmlStreaming && (
-                <div className="animate-[sandbox-preview-badge_1.4s_ease-in-out_infinite] text-muted-foreground bg-muted/80 inline-flex items-center rounded-full border px-2.5 py-1 text-[11px]">
-                  <span className="bg-primary mr-2 size-1.5 animate-pulse rounded-full" />
-                  正在生成，完成后自动预览
+              {isPreviewStreaming && (
+                <div className="animate-[sandbox-preview-badge_1.4s_ease-in-out_infinite] text-muted-foreground bg-muted/80 inline-flex items-center rounded-full border px-2.5 py-1 text-[11px]">
+                  <span className="bg-primary mr-2 size-1.5 animate-pulse rounded-full" />
+                  正在生成，完成后自动预览
                 </div>
               )}
             </div>