From 9268c737760b86fdfa8d0c671789a97fc06faed3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= <hkdong@kland.com.cn>
Date: Mon, 29 Jun 2026 23:08:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=B2=99=E7=AE=B1):=20md=20=E4=BA=A7?=
 =?UTF-8?q?=E7=89=A9=E6=94=AF=E6=8C=81=20AI=20=E5=86=99=E4=BD=9C=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E4=B8=8E=E5=88=92=E8=AF=8D=E6=94=B9=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 MarkdownAiEditor，复用 AI 写作的 TipTap 编辑器与 AI 改写流程

- 沙箱 md 增加 AI 写作视图切换，默认仍为预览；单文件隐藏文件名避免工具栏错位

- 单智能体聊天页开启 allowVirtualMarkdownEdit，生成完成后可编辑

- 会商总结页续看时自动收起研讨原料侧栏

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../artifacts/artifact-file-detail.tsx        |  35 +++-
 .../components/workspace/chats/chat-box.tsx   |   2 +
 .../components/artifact/MarkdownAiEditor.tsx  | 193 ++++++++++++++++++
 .../components/Step3SummaryMode.tsx           |   4 +-
 4 files changed, 230 insertions(+), 4 deletions(-)
 create mode 100644 frontend-web/src/open-canvas/components/artifact/MarkdownAiEditor.tsx

diff --git a/frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx b/frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx
index 37bdd9cf..d7229ea7 100644
--- a/frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx
@@ -11,6 +11,7 @@ import {
   LoaderIcon,
   PackageIcon,
   SaveIcon,
+  SparklesIcon,
   UploadCloudIcon,
   XIcon,
 } from "lucide-react";
@@ -37,6 +38,7 @@ import {
 } from "@/components/ui/select";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { CodeEditor } from "@/components/workspace/code-editor";
+import { MarkdownAiEditor } from "@/open-canvas/components/artifact/MarkdownAiEditor";
 import { publishArtifactToKnowledge } from "@/core/agents/api";
 import { useAgent } from "@/core/agents/hooks";
 import { apiFetch } from "@/core/api";
@@ -213,6 +215,10 @@ export function ArtifactFileDetail({
     !useWriteFileStreaming &&
     !isSkillFile &&
     !isMock;
+  // 「AI 写作」md 展示开关：只要是可编辑的 markdown 就提供「AI 写作」视图（在 源码/预览 旁多一个
+  // 切换项），用户可随时切过去体验划词「AI 改写」。默认仍是「预览」，避免编辑器在内容加载期间
+  // 挂载导致白屏 + 避免复杂 md(表格/公式/HTML)误入有损编辑。
+  const canUseAiEditor = canEditArtifact;
   const [draftContent, setDraftContent] = useState("");
   const [hasLocalEdits, setHasLocalEdits] = useState(false);
   const updateArtifact = useUpdateArtifactContent();
@@ -230,7 +236,7 @@ export function ArtifactFileDetail({
     return "FILE";
   }, [filepath, isSkillFile, isSpreadsheetFile, language]);
 
-  const [viewMode, setViewMode] = useState<"code" | "preview">("code");
+  const [viewMode, setViewMode] = useState<"code" | "preview" | "edit">("code");
   const [allowAutoViewSwitch, setAllowAutoViewSwitch] = useState(true);
   const [isInstalling, setIsInstalling] = useState(false);
   const [showPreviewSwitchPulse, setShowPreviewSwitchPulse] = useState(false);
@@ -267,6 +273,7 @@ export function ArtifactFileDetail({
       return;
     }
 
+    // md/mermaid 默认预览（AI 写作视图作为可选切换项，由用户手动进入）。
     if (isSupportPreview) {
       setViewMode("preview");
       return;
@@ -598,7 +605,9 @@ export function ArtifactFileDetail({
               {fileTypeLabel}
             </span>
             <ArtifactTitle className="min-w-0">
-              {useWriteFileStreaming ? (
+              {/* markdown：隐藏文件名（仅留 MD 徽标），把横向空间让给工具栏，避免窄面板下
+                  工具栏换行错位；多文件仍保留切换下拉（靠它切文件）。文件名仍可在下载/另存为时取到。 */}
+              {language === "markdown" && !hasMultipleArtifacts ? null : useWriteFileStreaming ? (
                 <div className="truncate px-3">{getFileName(filepath)}</div>
               ) : hasMultipleArtifacts ? (
                 <Select value={filepath} onValueChange={select}>
@@ -638,10 +647,19 @@ export function ArtifactFileDetail({
                 onValueChange={(value) => {
                   if (value) {
                     setAllowAutoViewSwitch(false);
-                    setViewMode(value as "code" | "preview");
+                    setViewMode(value as "code" | "preview" | "edit");
                   }
                 }}
               >
+                {canUseAiEditor && (
+                  <ToggleGroupItem
+                    className="text-muted-foreground h-8 min-w-10 rounded-full border-0 bg-transparent px-3 shadow-none data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-[0_6px_14px_-10px_rgba(15,23,42,0.35)]"
+                    value="edit"
+                    aria-label="AI 写作编辑"
+                  >
+                    <SparklesIcon />
+                  </ToggleGroupItem>
+                )}
                 <ToggleGroupItem
                   className="text-muted-foreground h-8 min-w-10 rounded-full border-0 bg-transparent px-3 shadow-none data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-[0_6px_14px_-10px_rgba(15,23,42,0.35)]"
                   value="code"
@@ -803,6 +821,17 @@ export function ArtifactFileDetail({
             滑动到底部并继续自动下滑
           </button>
         )}
+        {viewMode === "edit" && canUseAiEditor && (
+          <MarkdownAiEditor
+            // 编辑用原始内容（与源码模式一致，不脱敏）；保存仍走头部「保存 Markdown」按钮。
+            markdown={displayContent ?? ""}
+            onChange={(value) => {
+              setDraftContent(value);
+              setHasLocalEdits(true);
+            }}
+            threadId={threadId}
+          />
+        )}
         {isSupportPreview &&
           viewMode === "preview" &&
           (language === "markdown" ||
diff --git a/frontend-web/src/components/workspace/chats/chat-box.tsx b/frontend-web/src/components/workspace/chats/chat-box.tsx
index 36260c39..295d047a 100644
--- a/frontend-web/src/components/workspace/chats/chat-box.tsx
+++ b/frontend-web/src/components/workspace/chats/chat-box.tsx
@@ -423,6 +423,7 @@ const ChatBox: React.FC<{
                   className="size-full"
                   filepath={selectedArtifact}
                   threadId={threadId}
+                  allowVirtualMarkdownEdit
                 />
               </TabsContent>
               <TabsContent value="references" className="min-h-0 flex-1 overflow-y-auto p-0">
@@ -437,6 +438,7 @@ const ChatBox: React.FC<{
               className="size-full"
               filepath={selectedArtifact}
               threadId={threadId}
+              allowVirtualMarkdownEdit
             />
           ) : hasCitationReferences ? (
             <div className="relative size-full overflow-hidden">
diff --git a/frontend-web/src/open-canvas/components/artifact/MarkdownAiEditor.tsx b/frontend-web/src/open-canvas/components/artifact/MarkdownAiEditor.tsx
new file mode 100644
index 00000000..8acbb45b
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/artifact/MarkdownAiEditor.tsx
@@ -0,0 +1,193 @@
+import { useCallback, useRef, useState } from "react";
+
+import { CanvasThreadProvider } from "../../contexts/CanvasThreadContext";
+import { CanvasUIProvider, useCanvasUIContext } from "../../contexts/CanvasUIContext";
+import { TiptapEditor } from "../../editor/TiptapEditor";
+import { useWritingEditor } from "../../hooks/useWritingEditor";
+import { useWritingRewrite } from "../../hooks/useWritingRewrite";
+import { applyInsert, applyReplace } from "../../utils/apply-rewrite";
+import type { RewriteAction, RewriteTone } from "../../api/rewrite";
+
+import { WritingAiMenu } from "./WritingAiMenu";
+import { WritingBubbleMenu } from "./WritingBubbleMenu";
+import { WritingParagraphMenu } from "./WritingParagraphMenu";
+import { WritingRewritePreview } from "./WritingRewritePreview";
+
+interface MarkdownAiEditorProps {
+  /** 原始 markdown（编辑缓冲），由父级持有；编辑时通过 onChange 回写。 */
+  markdown: string;
+  /** 编辑回调：返回最新 markdown，父级据此 setDraftContent 并标记有改动。 */
+  onChange?: (markdown: string) => void;
+  /** 当前线程 id：透传给 AI 改写接口，便于后端结合上下文。 */
+  threadId?: string | null;
+  /** 只读：禁用编辑、AI 改写。 */
+  readOnly?: boolean;
+  className?: string;
+}
+
+interface PanelPos {
+  x: number;
+  y: number;
+}
+
+type FlowPhase = "idle" | "menu" | "preview";
+
+interface LastAction {
+  action: RewriteAction;
+  tone?: RewriteTone;
+  customInstruction?: string;
+  referenceText?: string;
+}
+
+/**
+ * 沙箱 md 的「AI 写作」编辑器：复用 AI 写作 那套 TipTap 编辑器 + 划词「AI 改写」气泡/段落
+ * 菜单 + 改写流式预览（润色/扩写/缩写/改语气/仿写/自定义指令）。自带 CanvasThread/CanvasUI
+ * Provider，故可直接嵌入任意页面，无需在外层包裹整页 Provider。
+ *
+ * 与 AI 写作 整页编辑器（TextArtifactRenderer）的差异：去掉对 CanvasGraphContext 的耦合（不
+ * 走全局 artifact 状态），去掉自带的工具栏/目录栏（保存/导出由宿主 ArtifactFileDetail 头部按钮
+ * 负责），更贴合侧边栏内的紧凑展示。
+ */
+export function MarkdownAiEditor(props: MarkdownAiEditorProps) {
+  return (
+    <CanvasThreadProvider initialThreadId={props.threadId ?? null}>
+      <CanvasUIProvider>
+        <MarkdownAiEditorInner {...props} />
+      </CanvasUIProvider>
+    </CanvasThreadProvider>
+  );
+}
+
+function MarkdownAiEditorInner({
+  markdown,
+  onChange,
+  readOnly = false,
+  className,
+}: MarkdownAiEditorProps) {
+  const { writingSelection } = useCanvasUIContext();
+
+  const [phase, setPhase] = useState<FlowPhase>("idle");
+  const [panelPos, setPanelPos] = useState<PanelPos>({ x: 0, y: 0 });
+  const lastActionRef = useRef<LastAction | null>(null);
+
+  const editor = useWritingEditor({
+    markdown,
+    onChange,
+    editable: !readOnly,
+    placeholder: "空白文档…",
+  });
+
+  const { status, result, thinking, error, rewrite, rewriteFollowUp, reset } =
+    useWritingRewrite(editor);
+
+  const computePos = useCallback((): PanelPos => {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      const rect = sel.getRangeAt(0).getBoundingClientRect();
+      if (rect.width || rect.height) {
+        return { x: rect.left, y: rect.bottom + 6 };
+      }
+    }
+    return { x: window.innerWidth / 2 - 90, y: window.innerHeight / 2 };
+  }, []);
+
+  const openAiMenu = useCallback(() => {
+    reset();
+    setPanelPos(computePos());
+    setPhase("menu");
+  }, [reset, computePos]);
+
+  const closeAll = useCallback(() => {
+    editor?.commands.clearAiHighlight();
+    setPhase("idle");
+    reset();
+  }, [reset, editor]);
+
+  const handleAction = useCallback(
+    (
+      action: RewriteAction,
+      tone?: RewriteTone,
+      customInstruction?: string,
+      referenceText?: string,
+    ) => {
+      lastActionRef.current = { action, tone, customInstruction, referenceText };
+      rewrite(action, tone, customInstruction, referenceText);
+      setPhase("preview");
+    },
+    [rewrite],
+  );
+
+  const handleRetry = useCallback(() => {
+    if (!lastActionRef.current) return;
+    const { action, tone, customInstruction, referenceText } = lastActionRef.current;
+    rewrite(action, tone, customInstruction, referenceText);
+  }, [rewrite]);
+
+  const handleFollowUp = useCallback(
+    (instruction: string) => {
+      if (!lastActionRef.current) return;
+      const { action, tone, referenceText } = lastActionRef.current;
+      rewriteFollowUp(instruction, action, tone, referenceText);
+    },
+    [rewriteFollowUp],
+  );
+
+  const handleReplace = useCallback(() => {
+    if (!editor || !writingSelection || !result) return;
+    applyReplace(editor, writingSelection, result);
+    closeAll();
+  }, [editor, writingSelection, result, closeAll]);
+
+  const handleInsert = useCallback(() => {
+    if (!editor || !writingSelection || !result) return;
+    applyInsert(editor, writingSelection, result);
+    closeAll();
+  }, [editor, writingSelection, result, closeAll]);
+
+  return (
+    <div className={className ?? "h-full flex flex-col overflow-hidden"}>
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-3xl mx-auto px-6 py-6">
+          {editor && !readOnly && (
+            <>
+              <WritingBubbleMenu editor={editor} onAiRewrite={openAiMenu} />
+              <WritingParagraphMenu editor={editor} onAiRewrite={openAiMenu} />
+            </>
+          )}
+          <TiptapEditor editor={editor} className="tiptap-writing-editor" />
+        </div>
+      </div>
+
+      {!readOnly && phase === "menu" && (
+        <WritingAiMenu
+          pos={panelPos}
+          status={status}
+          error={error}
+          onAction={handleAction}
+          onAbort={reset}
+          onRetry={handleRetry}
+          onClose={closeAll}
+        />
+      )}
+
+      {!readOnly && phase === "preview" && (
+        <WritingRewritePreview
+          pos={panelPos}
+          status={status}
+          originalText={writingSelection?.text ?? ""}
+          result={result}
+          thinking={thinking}
+          error={error}
+          action={lastActionRef.current?.action ?? "polish"}
+          tone={lastActionRef.current?.tone}
+          onReplace={handleReplace}
+          onInsert={handleInsert}
+          onRetry={handleRetry}
+          onAbort={reset}
+          onClose={closeAll}
+          onFollowUp={handleFollowUp}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend-web/src/roundtable-planning/components/Step3SummaryMode.tsx b/frontend-web/src/roundtable-planning/components/Step3SummaryMode.tsx
index 5ad08e05..ac745921 100644
--- a/frontend-web/src/roundtable-planning/components/Step3SummaryMode.tsx
+++ b/frontend-web/src/roundtable-planning/components/Step3SummaryMode.tsx
@@ -212,8 +212,10 @@ export function Step3SummaryMode({
   const displayDialogues = dialogues;
   const [leftCollapsed, setLeftCollapsed] = useState(false);
   // 右侧面板（沙箱预览或流程图画布）露出时自动收起左栏，关闭时复原——边沿触发，手动切换不回弹。
+  // 初值固定为 false：这样即使「进入/续看时沙箱已是打开态」(rightPanelVisible 一上来就为 true)，
+  // 首个 effect 也能识别 false→true 的边沿并收起左栏（修此前已打开时左栏不收起的问题）。
   const rightPanelVisible = artifactsOpen || (!!flowGraph && flowView);
-  const prevRightPanelVisibleRef = useRef(rightPanelVisible);
+  const prevRightPanelVisibleRef = useRef(false);
   useEffect(() => {
     if (rightPanelVisible !== prevRightPanelVisibleRef.current) {
       prevRightPanelVisibleRef.current = rightPanelVisible;