From 31046eae5852f859e36613afa0fae0a562ef284d Mon Sep 17 00:00:00 2001
From: Stringadmin <admin@omniai.net.cn>
Date: Fri, 5 Jun 2026 18:08:16 +0800
Subject: [PATCH] refactor: extract canvas text prompt composer

---
 src/features/canvas/CanvasPage.tsx            | 131 ++-----------
 .../canvas/CanvasTextPromptComposer.tsx       | 174 ++++++++++++++++++
 2 files changed, 190 insertions(+), 115 deletions(-)
 create mode 100644 src/features/canvas/CanvasTextPromptComposer.tsx

diff --git a/src/features/canvas/CanvasPage.tsx b/src/features/canvas/CanvasPage.tsx
index b965207..5597763 100644
--- a/src/features/canvas/CanvasPage.tsx
+++ b/src/features/canvas/CanvasPage.tsx
@@ -186,6 +186,7 @@ import {
 } from "./canvasWorkflowDeserialize";
 import { CanvasNodeToolbar, CanvasNodeVideoPlayer, CanvasSelectChip } from "./canvasComponents";
 import type { CanvasNodeToolbarAction } from "./canvasComponents";
+import { CanvasTextPromptComposer } from "./CanvasTextPromptComposer";
 import { CanvasMultiGridPanel, CanvasUpscalePanel, CanvasInpaintPanel } from "./canvasToolPanels";
 import { CanvasSmoothedProgressRing } from "./CanvasSmoothedProgressRing";
 
@@ -4156,121 +4157,21 @@ function CanvasPage({
                     onMouseDown={(event) => handleNodeResizeStart(event, "text", textNode.id, textNode.size)}
                   />
                 </div>
-                {textNodeActive && !isCanvasNodeMoving ? (() => {
-                  const mentionOptions = buildNodeMentionOptions("text", textNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks);
-                  const mentionState = textNodeMentionStates[textNode.id] || { open: false, query: "", start: 0, caret: 0, activeIndex: 0 };
-                  const filteredMentions = mentionState.open
-                    ? mentionOptions.filter((o) => !mentionState.query || o.searchText.includes(mentionState.query.toLowerCase()))
-                    : [];
-
-                  const handlePromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-                    const value = e.target.value;
-                    const caret = e.target.selectionStart || 0;
-                    updateTextNodePrompt(textNode.id, value);
-
-                    // Detect @-mention trigger
-                    const beforeCaret = value.slice(0, caret);
-                    const atIdx = beforeCaret.lastIndexOf("@");
-                    if (atIdx >= 0) {
-                      const query = beforeCaret.slice(atIdx + 1);
-                      if (!MENTION_BOUNDARY_RE.test(query) && !query.includes(" ")) {
-                        setTextNodeMentionStates((prev) => ({ ...prev, [textNode.id]: { open: true, query, start: atIdx, caret, activeIndex: 0 } }));
-                        return;
-                      }
-                    }
-                    closeTextNodeMention(textNode.id);
-                  };
-
-                  const handlePromptKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-                    if (!mentionState.open || filteredMentions.length === 0) return;
-                    if (e.key === "ArrowDown") {
-                      e.preventDefault();
-                      setTextNodeMentionStates((prev) => ({ ...prev, [textNode.id]: { ...mentionState, activeIndex: (mentionState.activeIndex + 1) % filteredMentions.length } }));
-                    } else if (e.key === "ArrowUp") {
-                      e.preventDefault();
-                      setTextNodeMentionStates((prev) => ({ ...prev, [textNode.id]: { ...mentionState, activeIndex: (mentionState.activeIndex - 1 + filteredMentions.length) % filteredMentions.length } }));
-                    } else if (e.key === "Enter" || e.key === "Tab") {
-                      e.preventDefault();
-                      const opt = filteredMentions[mentionState.activeIndex];
-                      if (opt) {
-                        const ta = e.currentTarget;
-                        insertTextNodeMention(textNode.id, opt, ta);
-                      }
-                    } else if (e.key === "Escape") {
-                      e.preventDefault();
-                      closeTextNodeMention(textNode.id);
-                    }
-                  };
-
-                  const handlePromptSelect = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
-                    const ta = e.currentTarget;
-                    const caret = ta.selectionStart || 0;
-                    setTextNodeMentionStates((prev) => {
-                      const cur = prev[textNode.id];
-                      if (!cur?.open) return prev;
-                      return { ...prev, [textNode.id]: { ...cur, caret } };
-                    });
-                  };
-
-                  return (
-                  <div className="studio-canvas-text-composer">
-                    <div className="studio-canvas-text-composer__input-wrap">
-                    <textarea
-                      value={textNode.prompt}
-                      onMouseDown={(event) => event.stopPropagation()}
-                      onChange={handlePromptChange}
-                      onKeyDown={handlePromptKeyDown}
-                      onSelect={handlePromptSelect}
-                      placeholder="写下你想讲的故事、场景或角色设定。@引用连接的节点"
-                    />
-                    {mentionState.open ? (
-                      <div className="studio-canvas-mention-panel">
-                        {filteredMentions.length > 0 ? filteredMentions.map((opt, idx) => (
-                          <button
-                            key={opt.token}
-                            type="button"
-                            className={`studio-canvas-mention-item${idx === mentionState.activeIndex ? " is-active" : ""}`}
-                            onMouseDown={(e) => { e.preventDefault(); const ta = e.currentTarget.closest(".studio-canvas-text-composer")?.querySelector("textarea") || null; insertTextNodeMention(textNode.id, opt, ta as HTMLTextAreaElement | null); }}
-                          >
-                            <span className="studio-canvas-mention-thumb">
-                              {opt.kind === "image" && opt.previewUrl ? <img src={opt.previewUrl} alt="" /> : opt.kind === "image" ? "🖼" : opt.kind === "video" ? "🎬" : "📝"}
-                            </span>
-                            <span className="studio-canvas-mention-label">{opt.nodeTitle}</span>
-                            <span className="studio-canvas-mention-token">{opt.token}</span>
-                          </button>
-                        )) : (
-                          <div className="studio-canvas-mention-item" style={{ opacity: 0.5, pointerEvents: "none" }}>
-                            <span className="studio-canvas-mention-label">没有可引用的连接节点</span>
-                          </div>
-                        )}
-                      </div>
-                    ) : null}
-                    </div>
-                  <div className="studio-canvas-text-composer__footer">
-                    <button
-                      type="button"
-                      className={`studio-canvas-text-composer__send studio-canvas-generate-button${textNodeCanGenerate && !textNodeGenerating ? " is-ready" : ""}`}
-                      title={textNodeGenerating ? "生成中" : "生成"}
-                      disabled={textNodeGenerating || !textNodeCanGenerate}
-                      aria-busy={textNodeGenerating}
-                      onMouseDown={(event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        if (!textNodeGenerating && textNodeCanGenerate) {
-                          void handleGenerateTextNode(textNode.id);
-                        }
-                      }}
-                      onClick={(event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                      }}
-                    >
-                      <SendOutlined />
-                    </button>
-                  </div>
-                </div>
-                );
-              })() : null}
+                {textNodeActive && !isCanvasNodeMoving ? (
+                  <CanvasTextPromptComposer
+                    nodeId={textNode.id}
+                    prompt={textNode.prompt}
+                    canGenerate={textNodeCanGenerate}
+                    isGenerating={textNodeGenerating}
+                    mentionOptions={buildNodeMentionOptions("text", textNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks)}
+                    mentionState={textNodeMentionStates[textNode.id]}
+                    onPromptChange={updateTextNodePrompt}
+                    onMentionStateChange={setTextNodeMentionStates}
+                    onCloseMention={closeTextNodeMention}
+                    onInsertMention={insertTextNodeMention}
+                    onGenerate={handleGenerateTextNode}
+                  />
+                ) : null}
               </div>
             </div>
             );
diff --git a/src/features/canvas/CanvasTextPromptComposer.tsx b/src/features/canvas/CanvasTextPromptComposer.tsx
new file mode 100644
index 0000000..50eabf5
--- /dev/null
+++ b/src/features/canvas/CanvasTextPromptComposer.tsx
@@ -0,0 +1,174 @@
+import { SendOutlined } from "@ant-design/icons";
+import type { CSSProperties, Dispatch, SetStateAction } from "react";
+import type { CanvasPromptMentionOption, CanvasPromptMentionState } from "./canvasTypes";
+
+const MENTION_BOUNDARY_RE = /\s|[，。、；：！？?(){}[\]<>]/;
+const EMPTY_MENTION_STYLE: CSSProperties = { opacity: 0.5, pointerEvents: "none" };
+const DEFAULT_MENTION_STATE: CanvasPromptMentionState = {
+  open: false,
+  query: "",
+  start: 0,
+  caret: 0,
+  activeIndex: 0,
+};
+
+interface CanvasTextPromptComposerProps {
+  nodeId: string;
+  prompt: string;
+  canGenerate: boolean;
+  isGenerating: boolean;
+  mentionOptions: CanvasPromptMentionOption[];
+  mentionState?: CanvasPromptMentionState;
+  onPromptChange: (nodeId: string, prompt: string) => void;
+  onMentionStateChange: Dispatch<SetStateAction<Record<string, CanvasPromptMentionState>>>;
+  onCloseMention: (nodeId: string) => void;
+  onInsertMention: (
+    nodeId: string,
+    option: CanvasPromptMentionOption,
+    textarea: HTMLTextAreaElement | null,
+  ) => void;
+  onGenerate: (nodeId: string) => void | Promise<void>;
+}
+
+export function CanvasTextPromptComposer({
+  nodeId,
+  prompt,
+  canGenerate,
+  isGenerating,
+  mentionOptions,
+  mentionState = DEFAULT_MENTION_STATE,
+  onPromptChange,
+  onMentionStateChange,
+  onCloseMention,
+  onInsertMention,
+  onGenerate,
+}: CanvasTextPromptComposerProps) {
+  const filteredMentions = mentionState.open
+    ? mentionOptions.filter((option) => !mentionState.query || option.searchText.includes(mentionState.query.toLowerCase()))
+    : [];
+
+  const handlePromptChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = event.target.value;
+    const caret = event.target.selectionStart || 0;
+    onPromptChange(nodeId, value);
+
+    const beforeCaret = value.slice(0, caret);
+    const atIndex = beforeCaret.lastIndexOf("@");
+    if (atIndex >= 0) {
+      const query = beforeCaret.slice(atIndex + 1);
+      if (!MENTION_BOUNDARY_RE.test(query) && !query.includes(" ")) {
+        onMentionStateChange((prev) => ({
+          ...prev,
+          [nodeId]: { open: true, query, start: atIndex, caret, activeIndex: 0 },
+        }));
+        return;
+      }
+    }
+    onCloseMention(nodeId);
+  };
+
+  const handlePromptKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (!mentionState.open || filteredMentions.length === 0) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      onMentionStateChange((prev) => ({
+        ...prev,
+        [nodeId]: { ...mentionState, activeIndex: (mentionState.activeIndex + 1) % filteredMentions.length },
+      }));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      onMentionStateChange((prev) => ({
+        ...prev,
+        [nodeId]: {
+          ...mentionState,
+          activeIndex: (mentionState.activeIndex - 1 + filteredMentions.length) % filteredMentions.length,
+        },
+      }));
+    } else if (event.key === "Enter" || event.key === "Tab") {
+      event.preventDefault();
+      const option = filteredMentions[mentionState.activeIndex];
+      if (option) {
+        onInsertMention(nodeId, option, event.currentTarget);
+      }
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      onCloseMention(nodeId);
+    }
+  };
+
+  const handlePromptSelect = (event: React.SyntheticEvent<HTMLTextAreaElement>) => {
+    const caret = event.currentTarget.selectionStart || 0;
+    onMentionStateChange((prev) => {
+      const current = prev[nodeId];
+      if (!current?.open) return prev;
+      return { ...prev, [nodeId]: { ...current, caret } };
+    });
+  };
+
+  return (
+    <div className="studio-canvas-text-composer">
+      <div className="studio-canvas-text-composer__input-wrap">
+        <textarea
+          value={prompt}
+          onMouseDown={(event) => event.stopPropagation()}
+          onChange={handlePromptChange}
+          onKeyDown={handlePromptKeyDown}
+          onSelect={handlePromptSelect}
+          placeholder="写下你想讲的故事、场景或角色设定。@引用连接的节点"
+        />
+        {mentionState.open ? (
+          <div className="studio-canvas-mention-panel">
+            {filteredMentions.length > 0 ? filteredMentions.map((option, index) => (
+              <button
+                key={option.token}
+                type="button"
+                className={`studio-canvas-mention-item${index === mentionState.activeIndex ? " is-active" : ""}`}
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  const textarea = event.currentTarget
+                    .closest(".studio-canvas-text-composer")
+                    ?.querySelector("textarea") ?? null;
+                  onInsertMention(nodeId, option, textarea);
+                }}
+              >
+                <span className="studio-canvas-mention-thumb">
+                  {option.kind === "image" && option.previewUrl ? (
+                    <img src={option.previewUrl} alt="" />
+                  ) : option.kind === "image" ? "🖼" : option.kind === "video" ? "🎬" : "📝"}
+                </span>
+                <span className="studio-canvas-mention-label">{option.nodeTitle}</span>
+                <span className="studio-canvas-mention-token">{option.token}</span>
+              </button>
+            )) : (
+              <div className="studio-canvas-mention-item" style={EMPTY_MENTION_STYLE}>
+                <span className="studio-canvas-mention-label">没有可引用的连接节点</span>
+              </div>
+            )}
+          </div>
+        ) : null}
+      </div>
+      <div className="studio-canvas-text-composer__footer">
+        <button
+          type="button"
+          className={`studio-canvas-text-composer__send studio-canvas-generate-button${canGenerate && !isGenerating ? " is-ready" : ""}`}
+          title={isGenerating ? "生成中" : "生成"}
+          disabled={isGenerating || !canGenerate}
+          aria-busy={isGenerating}
+          onMouseDown={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!isGenerating && canGenerate) {
+              void onGenerate(nodeId);
+            }
+          }}
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+          }}
+        >
+          <SendOutlined />
+        </button>
+      </div>
+    </div>
+  );
+}