- {item.text} :
diff --git a/web/src/components/canvas/canvas-assistant-panel.tsx b/web/src/components/canvas/canvas-assistant-panel.tsx
index 11530fa7e..128f6bd56 100644
--- a/web/src/components/canvas/canvas-assistant-panel.tsx
+++ b/web/src/components/canvas/canvas-assistant-panel.tsx
@@ -743,7 +743,7 @@ export function CanvasAssistantPanel({ nodes, selectedNodeIds, snapshot, project
<>
{messages.map((message) => (
{item.text}
+ {item.role === "assistant" ? {item.text}
}
{item.attachments?.length ? {item.meta}
: null}
-
))}
diff --git a/web/src/components/canvas/canvas-local-agent-panel.tsx b/web/src/components/canvas/canvas-local-agent-panel.tsx
index 84e36b1da..1fb843825 100644
--- a/web/src/components/canvas/canvas-local-agent-panel.tsx
+++ b/web/src/components/canvas/canvas-local-agent-panel.tsx
@@ -547,7 +547,7 @@ export const CanvasLocalAgentPanel = memo(function CanvasLocalAgentPanel({ snaps
{!messages.length && !pendingTool && !waiting ? { setAgentState({ prompt: text }); void sendPrompt(text); }} /> : null}
{messages.map((item) => (
- ();
const textBlocks: string[] = [];
@@ -121,11 +124,11 @@ function buildComposerGenerationContext(inputs: NodeGenerationInput[], prompt: s
let lastIndex = 0;
let nextPrompt = "";
- for (const match of normalizedPrompt.matchAll(/@\[node:([^\]]+)\]/g)) {
+ for (const match of normalizedPrompt.matchAll(/@\[(node|asset):([^\]]+)\]/g)) {
if (match.index === undefined) continue;
hasToken = true;
nextPrompt += normalizedPrompt.slice(lastIndex, match.index);
- const input = inputByNodeId.get(match[1]);
+ const input = inputByToken.get(`${match[1]}:${match[2]}`);
if (input) {
let label = labelByNodeId.get(input.nodeId);
if (!label) {
@@ -145,7 +148,7 @@ function buildComposerGenerationContext(inputs: NodeGenerationInput[], prompt: s
// 首尾帧是结构化生成参数，不受提示词中的 @ 引用筛选影响。
const selectedNodeIds = new Set(selectedInputs.map((input) => input.nodeId));
videoFrameNodeIds.forEach((nodeId) => {
- const input = inputByNodeId.get(nodeId);
+ const input = nodeInputById.get(nodeId);
if (!input?.image || selectedNodeIds.has(nodeId)) return;
selectedInputs.push(input);
selectedNodeIds.add(nodeId);
@@ -189,7 +192,7 @@ function buildComposerGenerationContext(inputs: NodeGenerationInput[], prompt: s
// 旧画布保存的是 @角色1 等显示标签；生成时升级为稳定节点 Token，避免标题或排序变化后引用错位。
function normalizeLegacyNodeMentions(prompt: string, inputs: NodeGenerationInput[]) {
const counts = { image: 0, drawing: 0, video: 0, audio: 0, text: 0, character: 0 };
- const labels = inputs.map((input) => {
+ const labels = inputs.filter((input) => !input.nodeId.startsWith("asset:")).map((input) => {
const kind = input.sourceKind === "drawing" ? "drawing" : input.type;
return { label: generationLabel(kind, counts[kind]++), nodeId: input.nodeId };
}).sort((a, b) => b.label.length - a.label.length);
@@ -236,6 +239,22 @@ export function buildNodeGenerationInputs(nodeId: string, nodes: CanvasNodeData[
});
}
+function buildAssetGenerationInputs(assets: Asset[]): NodeGenerationInput[] {
+ return assets.flatMap((asset): NodeGenerationInput[] => {
+ const nodeId = `asset:${asset.id}`;
+ if (asset.kind === "text") return [{ nodeId, type: "text", title: asset.title, text: asset.data.content }];
+ if (asset.kind === "image") return [{ nodeId, type: "image", title: asset.title, image: { id: asset.id, name: asset.title, type: asset.data.mimeType, dataUrl: asset.data.dataUrl, storageKey: asset.data.storageKey, bytes: asset.data.bytes, width: asset.data.width, height: asset.data.height } }];
+ if (asset.kind === "video") return [{ nodeId, type: "video", title: asset.title, video: { id: asset.id, name: asset.title, type: asset.data.mimeType, url: asset.data.url, storageKey: asset.data.storageKey, bytes: asset.data.bytes, width: asset.data.width, height: asset.data.height, durationMs: asset.data.durationMs } }];
+ if (asset.kind === "audio") return [{ nodeId, type: "audio", title: asset.title, audio: { id: asset.id, name: asset.title, type: asset.data.mimeType, url: asset.data.url, storageKey: asset.data.storageKey, bytes: asset.data.bytes, durationMs: asset.data.durationMs } }];
+ if (asset.kind === "entity" && asset.category === "character") return [{ nodeId, type: "character", title: asset.title, character: { nodeId, assetId: asset.id, requestedVersionId: asset.primaryVersionId } }];
+ return [];
+ });
+}
+
+function generationInputToken(input: NodeGenerationInput) {
+ return input.nodeId.startsWith("asset:") ? input.nodeId : `node:${input.nodeId}`;
+}
+
function getConnectedStoryboardRows(nodeId: string, nodes: CanvasNodeData[], connections: CanvasConnection[]): NodeGenerationInput[] {
const targetNodeIds = new Set([nodeId]);
connections.forEach((connection) => {
diff --git a/web/src/components/canvas/canvas-node-prompt-panel.tsx b/web/src/components/canvas/canvas-node-prompt-panel.tsx
index 145b23002..7cc448e3e 100644
--- a/web/src/components/canvas/canvas-node-prompt-panel.tsx
+++ b/web/src/components/canvas/canvas-node-prompt-panel.tsx
@@ -244,6 +244,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
onMissingConfig={() => navigateToSettings({ continueCreation: true })}
showSelectedPrice={false}
variant="creation"
+ showConfiguredModelName
/>
@@ -284,6 +285,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
{
const drag = dragRef.current;
if (!drag || drag.pointerId !== event.pointerId) return;
+ if (!event.currentTarget.hasPointerCapture(event.pointerId)) {
+ dragRef.current = null;
+ return;
+ }
+ if ((event.buttons & 1) === 0) {
+ finishResize(event);
+ return;
+ }
onResize(Math.min(max, Math.max(min, drag.startHeight + event.clientY - drag.startY)));
}}
onPointerUp={finishResize}
onPointerCancel={finishResize}
+ onLostPointerCapture={(event) => {
+ if (dragRef.current?.pointerId === event.pointerId) dragRef.current = null;
+ }}
>
diff --git a/web/src/components/canvas/canvas-resource-mention-textarea.tsx b/web/src/components/canvas/canvas-resource-mention-textarea.tsx
index c97b9e50e..10e8d7106 100644
--- a/web/src/components/canvas/canvas-resource-mention-textarea.tsx
+++ b/web/src/components/canvas/canvas-resource-mention-textarea.tsx
@@ -1,15 +1,17 @@
import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
import type { CSSProperties, ClipboardEvent, KeyboardEvent, MouseEvent, PointerEvent, TextareaHTMLAttributes } from "react";
import { createPortal } from "react-dom";
-import { FileText, Image as ImageIcon, Music2, Pencil, Sparkles, UserRound, Video } from "lucide-react";
+import { ArrowLeft, ChevronRight, FileText, Folder, Image as ImageIcon, Music2, Pencil, Search, Sparkles, UserRound, Video } from "lucide-react";
import { canvasThemes } from "@/lib/canvas-theme";
import { useThemeStore } from "@/stores/use-theme-store";
-import { canvasResourceMentionToken, type CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
+import { buildAssetMentionReferences, canvasResourceMentionToken, type CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
+import { useAssetStore, type AssetCategory } from "@/stores/use-asset-store";
import { CanvasNodeType } from "@/types/canvas";
type MentionState = {
start: number;
+ end: number;
query: string;
};
@@ -39,13 +41,15 @@ type Props = Omit, "onChange" | "val
mentionMenuWidth?: number;
sendOnEnter?: boolean;
onContentSizeChange?: (height: number) => void;
+ includeAssetLibrary?: boolean;
};
export const CanvasResourceMentionTextarea = forwardRef(function CanvasResourceMentionTextarea(
- { value, references, onChange, onSubmit, onKeyDown, className, containerClassName, style, highlightLabels = true, mentionMenuWidth = 256, sendOnEnter = true, onContentSizeChange, ...props },
+ { value, references, onChange, onSubmit, onKeyDown, className, containerClassName, style, highlightLabels = true, mentionMenuWidth = 320, sendOnEnter = true, onContentSizeChange, includeAssetLibrary = false, ...props },
forwardedRef,
) {
const rawTheme = useThemeStore((state) => state.theme);
+ const assets = useAssetStore((state) => state.assets);
const theme = canvasThemes[rawTheme as keyof typeof canvasThemes] ?? canvasThemes.dark;
const containerRef = useRef(null);
const textareaRef = useRef(null);
@@ -54,22 +58,33 @@ export const CanvasResourceMentionTextarea = forwardRef(null);
const lastRenderedValueRef = useRef("");
const [mention, setMention] = useState(null);
- const [activeIndex, setActiveIndex] = useState(0);
+ const [activeIndex, setActiveIndex] = useState(-1);
+ const assetReferences = useMemo(() => includeAssetLibrary ? buildAssetMentionReferences(assets) : [], [assets, includeAssetLibrary]);
+ const activeCanvasReferences = useMemo(() => references.filter((item) => item.active), [references]);
+ const availableReferences = useMemo(() => [...activeCanvasReferences, ...assetReferences], [activeCanvasReferences, assetReferences]);
const candidates = useMemo(() => {
if (!mention) return [];
const query = mention.query.trim().toLowerCase();
- const activeItems = references.filter((item) => item.active);
- if (!query) return activeItems;
- return activeItems.filter((item) => `${item.label} ${item.title} ${item.kind} ${item.text || ""}`.toLowerCase().includes(query));
- }, [mention, references]);
- const activeReferences = useMemo(() => (highlightLabels ? references.filter((item) => item.active) : []), [highlightLabels, references]);
+ if (!query) return activeCanvasReferences;
+ return availableReferences.filter((item) => `${item.label} ${item.title} ${item.kind} ${item.category || ""} ${item.text || ""}`.toLowerCase().includes(query));
+ }, [activeCanvasReferences, availableReferences, mention]);
+ const activeReferences = useMemo(() => {
+ if (!highlightLabels) return [];
+ return [...activeCanvasReferences, ...assetReferences.filter((item) => value.includes(canvasResourceMentionToken(item)))];
+ }, [activeCanvasReferences, assetReferences, highlightLabels, value]);
const useRichEditor = Boolean(activeReferences.length);
const reportContentSize = useCallback((element: HTMLElement | null) => {
if (!element || !onContentSizeChange) return;
- const previousHeight = element.style.height;
- element.style.height = "0px";
- const height = element.scrollHeight;
- element.style.height = previousHeight;
+ const previous = { height: element.style.height, minHeight: element.style.minHeight, maxHeight: element.style.maxHeight, overflow: element.style.overflow };
+ element.style.height = "1px";
+ element.style.minHeight = "0";
+ element.style.maxHeight = "none";
+ element.style.overflow = "hidden";
+ const height = Math.ceil(element.scrollHeight);
+ element.style.height = previous.height;
+ element.style.minHeight = previous.minHeight;
+ element.style.maxHeight = previous.maxHeight;
+ element.style.overflow = previous.overflow;
onContentSizeChange(height);
}, [onContentSizeChange]);
@@ -96,7 +111,13 @@ export const CanvasResourceMentionTextarea = forwardRef reportContentSize(element));
+ let width = container.clientWidth;
+ const observer = new ResizeObserver(() => {
+ const nextWidth = container.clientWidth;
+ if (nextWidth === width) return;
+ width = nextWidth;
+ reportContentSize(element);
+ });
observer.observe(container);
return () => observer.disconnect();
}, [onContentSizeChange, reportContentSize, useRichEditor]);
@@ -123,30 +144,28 @@ export const CanvasResourceMentionTextarea = forwardRef {
setMention(null);
- setActiveIndex(0);
+ setActiveIndex(-1);
};
const syncMention = (nextValue: string, cursor: number) => {
const prefix = nextValue.slice(0, cursor);
const match = /@([^\s@,.;:!?，。；：！？、)\]}】）]*)$/.exec(prefix);
- if (!match || !references.some((item) => item.active)) {
+ if (!match || !availableReferences.length) {
closeMention();
return;
}
- const nextMention = { start: match.index, query: match[1] };
- const isSameMention = mention?.start === nextMention.start && mention.query === nextMention.query;
+ const nextMention = { start: match.index, end: cursor, query: match[1] };
+ const isSameMention = mention?.start === nextMention.start && mention.end === nextMention.end && mention.query === nextMention.query;
if (!isSameMention) {
setMention(nextMention);
- setActiveIndex(0);
+ setActiveIndex(-1);
}
};
const insertReference = (reference: CanvasResourceReference) => {
if (!mention) return;
- const selection = useRichEditor ? getEditableSelection(editorRef.current) : null;
- const end = selection?.end ?? textareaRef.current?.selectionStart ?? value.length;
const insertText = `${canvasResourceMentionToken(reference)} `;
- const next = `${value.slice(0, mention.start)}${insertText}${value.slice(end)}`;
+ const next = `${value.slice(0, mention.start)}${insertText}${value.slice(mention.end)}`;
closeMention();
updateValue(next, mention.start + insertText.length);
};
@@ -185,7 +204,21 @@ export const CanvasResourceMentionTextarea = forwardRef= 0 ? candidates[Math.min(activeIndex, candidates.length - 1)]?.id : undefined}
+ theme={theme}
+ preferredWidth={mentionMenuWidth}
+ onQueryChange={(query) => setMention((current) => current ? { ...current, query } : current)}
+ onClose={closeMention}
+ onSelect={insertReference}
+ />
+ ) : null;
if (useRichEditor) {
return (
@@ -225,17 +258,17 @@ export const CanvasResourceMentionTextarea = forwardRef (index + 1) % candidates.length);
+ setActiveIndex((index) => index < 0 ? 0 : (index + 1) % candidates.length);
return;
}
if (event.key === "ArrowUp") {
event.preventDefault();
- setActiveIndex((index) => (index - 1 + candidates.length) % candidates.length);
+ setActiveIndex((index) => index < 0 ? candidates.length - 1 : (index - 1 + candidates.length) % candidates.length);
return;
}
if (event.key === "Enter" || event.key === "Tab") {
event.preventDefault();
- insertReference(candidates[Math.min(activeIndex, candidates.length - 1)]);
+ insertReference(candidates[activeIndex < 0 ? 0 : Math.min(activeIndex, candidates.length - 1)]);
return;
}
if (event.key === "Escape") {
@@ -274,7 +307,11 @@ export const CanvasResourceMentionTextarea = forwardRef props.onScroll?.(event as unknown as React.UIEvent)}
onFocus={(event) => props.onFocus?.(event as unknown as React.FocusEvent)}
onBlur={(event) => {
- window.setTimeout(closeMention, 120);
+ if (event.relatedTarget instanceof Element && event.relatedTarget.closest("[data-canvas-resource-mention-menu]")) return;
+ window.setTimeout(() => {
+ if (document.activeElement?.closest("[data-canvas-resource-mention-menu]")) return;
+ closeMention();
+ }, 120);
props.onBlur?.(event as unknown as React.FocusEvent);
}}
>
@@ -306,17 +343,17 @@ export const CanvasResourceMentionTextarea = forwardRef (index + 1) % candidates.length);
+ setActiveIndex((index) => index < 0 ? 0 : (index + 1) % candidates.length);
return;
}
if (event.key === "ArrowUp") {
event.preventDefault();
- setActiveIndex((index) => (index - 1 + candidates.length) % candidates.length);
+ setActiveIndex((index) => index < 0 ? candidates.length - 1 : (index - 1 + candidates.length) % candidates.length);
return;
}
if (event.key === "Enter") {
event.preventDefault();
- insertReference(candidates[Math.min(activeIndex, candidates.length - 1)]);
+ insertReference(candidates[activeIndex < 0 ? 0 : Math.min(activeIndex, candidates.length - 1)]);
return;
}
if (event.key === "Escape") {
@@ -345,7 +382,11 @@ export const CanvasResourceMentionTextarea = forwardRef {
- window.setTimeout(closeMention, 120);
+ if (event.relatedTarget instanceof Element && event.relatedTarget.closest("[data-canvas-resource-mention-menu]")) return;
+ window.setTimeout(() => {
+ if (document.activeElement?.closest("[data-canvas-resource-mention-menu]")) return;
+ closeMention();
+ }, 120);
props.onBlur?.(event);
}}
/>
@@ -393,12 +434,36 @@ function createInlinePreview(reference: CanvasResourceReference) {
return fallback;
}
-function MentionMenu({ anchor, references, activeIndex, theme, preferredWidth, onSelect }: { anchor: HTMLElement; references: CanvasResourceReference[]; activeIndex: number; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; preferredWidth: number; onSelect: (reference: CanvasResourceReference) => void }) {
+const ASSET_CATEGORY_LABELS: Record = {
+ character: "角色",
+ environment: "场景",
+ wardrobe: "服饰",
+ prop: "道具",
+ weapon: "武器",
+ style: "画风",
+ other: "其他",
+};
+
+function MentionMenu({ anchor, connectedReferences, assetReferences, filteredReferences, query, activeReferenceId, theme, preferredWidth, onQueryChange, onClose, onSelect }: {
+ anchor: HTMLElement;
+ connectedReferences: CanvasResourceReference[];
+ assetReferences: CanvasResourceReference[];
+ filteredReferences: CanvasResourceReference[];
+ query: string;
+ activeReferenceId?: string;
+ theme: (typeof canvasThemes)[keyof typeof canvasThemes];
+ preferredWidth: number;
+ onQueryChange: (query: string) => void;
+ onClose: () => void;
+ onSelect: (reference: CanvasResourceReference) => void;
+}) {
+ const menuRef = useRef(null);
const selectedRef = useRef(false);
+ const [category, setCategory] = useState(null);
const rect = anchor.getBoundingClientRect();
- const boundary = anchor.closest(".ant-modal-content")?.getBoundingClientRect() || { left: 8, top: 8, right: window.innerWidth - 8, bottom: window.innerHeight - 8 };
+ const boundary = anchor.closest(".ant-modal-container")?.getBoundingClientRect() || { left: 8, top: 8, right: window.innerWidth - 8, bottom: window.innerHeight - 8 };
const menuWidth = Math.min(preferredWidth, Math.max(0, boundary.right - boundary.left - 16));
- const maxMenuHeight = 224;
+ const maxMenuHeight = Math.min(320, Math.max(0, boundary.bottom - boundary.top - 16));
const gap = 6;
const left = clamp(rect.left, boundary.left + 8, boundary.right - menuWidth - 8);
const showAbove = rect.bottom + gap + maxMenuHeight > boundary.bottom && rect.top - gap - maxMenuHeight >= boundary.top;
@@ -412,60 +477,149 @@ function MentionMenu({ anchor, references, activeIndex, theme, preferredWidth, o
selectedRef.current = true;
onSelect(reference);
};
+ const categoryItems = Object.entries(ASSET_CATEGORY_LABELS)
+ .map(([value, label]) => ({ value: value as AssetCategory, label, count: assetReferences.filter((item) => item.category === value).length }))
+ .filter((item) => item.count > 0);
+ const connectedNodes = connectedReferences.filter((item) => item.kind !== "skill");
+ const skillReferences = connectedReferences.filter((item) => item.kind === "skill");
+ const visibleReferences = query
+ ? filteredReferences
+ : category
+ ? assetReferences.filter((item) => item.category === category)
+ : [];
+
+ useLayoutEffect(() => {
+ const closeOnOutsidePointer = (event: globalThis.PointerEvent) => {
+ const target = event.target;
+ if (!(target instanceof Node) || menuRef.current?.contains(target) || anchor.contains(target)) return;
+ onClose();
+ };
+ window.addEventListener("pointerdown", closeOnOutsidePointer, true);
+ return () => window.removeEventListener("pointerdown", closeOnOutsidePointer, true);
+ }, [anchor, onClose]);
return createPortal(
;
- if (reference.kind === "video" && reference.previewUrl) return ;
- if (reference.kind === "character" && reference.previewUrl) return ;
+ if (reference.kind === "image" && reference.previewUrl) return ;
+ if (reference.kind === "video" && reference.previewUrl) return ;
+ if (reference.kind === "character" && reference.previewUrl) return ;
if (reference.kind === "skill") {
return (
-
- >;
@@ -50,6 +52,7 @@ export function useCanvasGenerationExecutor({
projectId,
domainProjectId,
addedSkills,
+ assets,
nodesRef,
connectionsRef,
setNodes,
@@ -128,7 +131,7 @@ export function useCanvasGenerationExecutor({
// 视频文本只保留输入框内容；连接的媒体仍作为结构化参考传递。
const promptOnly = mode === "video";
try {
- const baseContext = buildNodeGenerationContext(nodeId, nodesRef.current, connectionsRef.current, editingTextNode ? `请根据要求修改以下文本。\n\n原文：\n${sourceTextContent}\n\n修改要求：\n${prompt}` : generationPrompt, promptOnly);
+ const baseContext = buildNodeGenerationContext(nodeId, nodesRef.current, connectionsRef.current, editingTextNode ? `请根据要求修改以下文本。\n\n原文：\n${sourceTextContent}\n\n修改要求：\n${prompt}` : generationPrompt, assets, promptOnly);
const requirements = generationModelRequirements(mode, baseContext, sourceNode, generationConfig.videoSeconds, true);
generationConfig = buildGenerationConfig(effectiveConfig, sourceNode, mode, requirements);
const compatibilityError = modelCompatibilityError(generationConfig, generationConfig.model, requirements);
@@ -267,7 +270,7 @@ export function useCanvasGenerationExecutor({
setRunningNodeId(null);
}
},
- [addedSkills, bindGenerationTask, domainProjectId, effectiveConfig, finishGenerationRequest, isAiConfigReady, message, nodesRef, connectionsRef, projectId, setConnections, setDialogNodeId, setNodes, setRunningNodeId, setSelectedConnectionId, setSelectedNodeIds, startGenerationRequest],
+ [addedSkills, assets, bindGenerationTask, domainProjectId, effectiveConfig, finishGenerationRequest, isAiConfigReady, message, nodesRef, connectionsRef, projectId, setConnections, setDialogNodeId, setNodes, setRunningNodeId, setSelectedConnectionId, setSelectedNodeIds, startGenerationRequest],
);
}
diff --git a/web/src/pages/canvas/use-canvas-generation-retry.ts b/web/src/pages/canvas/use-canvas-generation-retry.ts
index 2fb50e2a5..c54db0eab 100644
--- a/web/src/pages/canvas/use-canvas-generation-retry.ts
+++ b/web/src/pages/canvas/use-canvas-generation-retry.ts
@@ -33,12 +33,14 @@ import type { Skill } from "@/services/api/skills";
import type { GenerationTask } from "@/services/api/task-center";
import { resolveImageUrl, uploadImage } from "@/services/image-storage";
import { resolveModelRequestConfig, useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
+import type { Asset } from "@/stores/use-asset-store";
import { CanvasNodeType, type CanvasConnection, type CanvasNodeData } from "@/types/canvas";
type UseCanvasGenerationRetryOptions = {
projectId: string;
domainProjectId?: string;
addedSkills: Skill[];
+ assets: Asset[];
nodesRef: { current: CanvasNodeData[] };
connectionsRef: { current: CanvasConnection[] };
setNodes: Dispatch>;
@@ -52,7 +54,7 @@ const NODE_STATUS_LOADING = "loading" as const;
const NODE_STATUS_SUCCESS = "success" as const;
const NODE_STATUS_ERROR = "error" as const;
-export function useCanvasGenerationRetry({ projectId, domainProjectId, addedSkills, nodesRef, connectionsRef, setNodes, setRunningNodeId, startGenerationRequest, finishGenerationRequest, bindGenerationTask }: UseCanvasGenerationRetryOptions) {
+export function useCanvasGenerationRetry({ projectId, domainProjectId, addedSkills, assets, nodesRef, connectionsRef, setNodes, setRunningNodeId, startGenerationRequest, finishGenerationRequest, bindGenerationTask }: UseCanvasGenerationRetryOptions) {
const { message } = App.useApp();
const effectiveConfig = useEffectiveConfig();
const isAiConfigReady = useConfigStore((state) => state.isAiConfigReady);
@@ -88,7 +90,7 @@ export function useCanvasGenerationRetry({ projectId, domainProjectId, addedSkil
let rawContext: Awaited> | null;
try {
const promptOnly = retryMode === "video";
- const baseContext = buildNodeGenerationContext(sourceNode.id, nodesRef.current, connectionsRef.current, retryContextPrompt, promptOnly);
+ const baseContext = buildNodeGenerationContext(sourceNode.id, nodesRef.current, connectionsRef.current, retryContextPrompt, assets, promptOnly);
rawContext = hasSavedImageMetadata && !baseContext.characterReferences.length ? null : await hydrateNodeGenerationContext(baseContext, projectId, domainProjectId, retryMode, retryMode === "video" && supportsVideoReferenceAudio(generationConfig), !promptOnly);
} catch (error) {
const failure = generationFailureMetadata(error, retryPromptSource);
@@ -227,7 +229,7 @@ export function useCanvasGenerationRetry({ projectId, domainProjectId, addedSkil
setRunningNodeId(null);
}
},
- [addedSkills, bindGenerationTask, connectionsRef, domainProjectId, effectiveConfig, finishGenerationRequest, isAiConfigReady, message, nodesRef, projectId, setNodes, setRunningNodeId, startGenerationRequest],
+ [addedSkills, assets, bindGenerationTask, connectionsRef, domainProjectId, effectiveConfig, finishGenerationRequest, isAiConfigReady, message, nodesRef, projectId, setNodes, setRunningNodeId, startGenerationRequest],
);
}
diff --git a/web/src/pages/create/index.tsx b/web/src/pages/create/index.tsx
index d35f922b7..e45fb77c9 100644
--- a/web/src/pages/create/index.tsx
+++ b/web/src/pages/create/index.tsx
@@ -2,9 +2,9 @@ import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, ty
import localforage from "localforage";
import { App, Drawer, Modal, Popover, Spin, Tooltip } from "antd";
import { ArrowDown, ArrowUp, Check, ChevronDown, Clapperboard, Clock3, Download, FileText, Film, FolderOpen, History, Image as ImageIcon, LoaderCircle, Maximize2, MessageSquareText, Music2, Plus, RefreshCw, Search, SlidersHorizontal, Sparkles, Square, X } from "lucide-react";
-import ReactMarkdown from "react-markdown";
import { Link } from "react-router";
+import { AIMessageMarkdown } from "@/components/ai/ai-message-markdown";
import { AssetLibraryPickerModal, type AssetLibraryPickerItem } from "@/components/assets/asset-library-picker-modal";
import { CanvasResourceMentionTextarea } from "@/components/canvas/canvas-resource-mention-textarea";
import { VoiceRecordingButton } from "@/components/conversation/voice-recording-button";
@@ -1061,7 +1061,7 @@ function StoryboardShotResult({ result, onRetryFailure, onCreateVariant }: { res
event.stopPropagation()}
>
- {references.map((reference, index) => (
-
,
document.body,
);
}
+function MentionReferenceList({ references, activeReferenceId, theme, onSelect }: { references: CanvasResourceReference[]; activeReferenceId?: string; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onSelect: (reference: CanvasResourceReference) => void }) {
+ if (!references.length) return 没有匹配的素材
;
+ return references.map((reference) => (
+
+ ));
+}
+
function ReferencePreview({ reference }: { reference: CanvasResourceReference }) {
- if (reference.kind === "image" && reference.previewUrl) return
选择模型
- {current ? {modelDisplayName(config, current)} : null}
+ {current ? {pickerModelDisplayName(config, current, showConfiguredModelName)} : null}
) : null}
{optionGroups.length ? (
@@ -155,7 +156,7 @@ export function ModelPicker({ config, value, onChange, capability, className, fu
aria-selected={selected}
aria-disabled={Boolean(disabledReason)}
disabled={Boolean(disabledReason)}
- title={disabledReason || modelOptionLabel(config, displayModel)}
+ title={disabledReason || pickerModelOptionLabel(config, displayModel, showConfiguredModelName)}
className="canvas-model-picker-option disabled:cursor-not-allowed disabled:opacity-45"
style={{ background: "transparent", color: theme.node.text }}
onClick={() => {
@@ -165,7 +166,7 @@ export function ModelPicker({ config, value, onChange, capability, className, fu
window.requestAnimationFrame(() => triggerRef.current?.focus());
}}
>
-