feat(canvas): 画布创作对话 - 统一流式 Markdown 展示与交互修复
This commit is contained in:
ddCat
50
web/src/components/ai/ai-message-markdown.tsx
Normal file
50
web/src/components/ai/ai-message-markdown.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { Streamdown, type Components } from "streamdown";
|
||||
import { code as streamdownCode } from "@streamdown/code";
|
||||
|
||||
import "streamdown/styles.css";
|
||||
|
||||
type AIMessageMarkdownProps = {
|
||||
children: string;
|
||||
isStreaming?: boolean;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const components: Components = {
|
||||
h1: ({ children, ...props }) => <h2 {...props} className="ai-message-markdown-heading ai-message-markdown-heading-1">{children}</h2>,
|
||||
h2: ({ children, ...props }) => <h3 {...props} className="ai-message-markdown-heading ai-message-markdown-heading-2">{children}</h3>,
|
||||
h3: ({ children, ...props }) => <h4 {...props} className="ai-message-markdown-heading ai-message-markdown-heading-3">{children}</h4>,
|
||||
h4: ({ children, ...props }) => <h5 {...props} className="ai-message-markdown-heading ai-message-markdown-heading-4">{children}</h5>,
|
||||
p: ({ children, ...props }) => <p {...props} className="ai-message-markdown-paragraph">{children}</p>,
|
||||
ul: ({ children, ...props }) => <ul {...props} className="ai-message-markdown-list ai-message-markdown-list-unordered">{children}</ul>,
|
||||
ol: ({ children, ...props }) => <ol {...props} className="ai-message-markdown-list ai-message-markdown-list-ordered">{children}</ol>,
|
||||
li: ({ children, ...props }) => <li {...props} className="ai-message-markdown-list-item">{children}</li>,
|
||||
blockquote: ({ children, ...props }) => <blockquote {...props} className="ai-message-markdown-blockquote">{children}</blockquote>,
|
||||
pre: ({ children, ...props }) => <pre {...props} className="ai-message-markdown-pre">{children}</pre>,
|
||||
code: ({ children, className, ...props }) => <code {...props} className={`ai-message-markdown-code ${className || ""}`.trim()}>{children}</code>,
|
||||
a: ({ children, ...props }) => <a {...props} className="ai-message-markdown-link" target="_blank" rel="noreferrer">{children}</a>,
|
||||
hr: (props) => <hr {...props} className="ai-message-markdown-rule" />,
|
||||
table: ({ children, ...props }) => <div className="ai-message-markdown-table-wrap"><table {...props} className="ai-message-markdown-table">{children}</table></div>,
|
||||
th: ({ children, ...props }) => <th {...props} className="ai-message-markdown-table-cell ai-message-markdown-table-header">{children}</th>,
|
||||
td: ({ children, ...props }) => <td {...props} className="ai-message-markdown-table-cell">{children}</td>,
|
||||
input: ({ ...props }) => <input {...props} className="ai-message-markdown-task" disabled />,
|
||||
};
|
||||
|
||||
export function AIMessageMarkdown({ children, isStreaming = false, className = "" }: AIMessageMarkdownProps) {
|
||||
if (!children.trim()) return null;
|
||||
return (
|
||||
<Streamdown
|
||||
className={`ai-message-markdown ${className}`.trim()}
|
||||
mode="streaming"
|
||||
dir="auto"
|
||||
isAnimating={isStreaming}
|
||||
animated={isStreaming ? { animation: "fadeIn", duration: 140, sep: "word", stagger: 8 } : false}
|
||||
parseIncompleteMarkdown
|
||||
skipHtml
|
||||
lineNumbers={false}
|
||||
plugins={{ code: streamdownCode }}
|
||||
components={components}
|
||||
>
|
||||
{children}
|
||||
</Streamdown>
|
||||
);
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import { ArrowUp, CheckCircle2, CircleAlert, ImagePlus, LoaderCircle, UserRound,
|
||||
import { canvasThemes } from "@/lib/canvas-theme";
|
||||
import type { CanvasAgentOperationImpact } from "@/lib/canvas/canvas-agent-ops";
|
||||
import type { LocalUser } from "@/stores/use-user-store";
|
||||
import { AIMessageMarkdown } from "@/components/ai/ai-message-markdown";
|
||||
|
||||
export type CanvasAgentChatAttachment = { id: string; name: string; url: string };
|
||||
export type CanvasAgentMode = "online" | "local";
|
||||
@@ -20,7 +21,7 @@ export type CanvasAgentChatMessage = {
|
||||
|
||||
const WORKING_TEXT = "正在推演...";
|
||||
|
||||
export function AgentChatMessage({ item, theme, user, onRejectTool, onApproveTool }: { item: CanvasAgentChatMessage; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; user: LocalUser | null; onRejectTool?: (id: string) => void; onApproveTool?: (id: string) => void }) {
|
||||
export function AgentChatMessage({ item, theme, user, isStreaming = false, onRejectTool, onApproveTool }: { item: CanvasAgentChatMessage; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; user: LocalUser | null; isStreaming?: boolean; onRejectTool?: (id: string) => void; onApproveTool?: (id: string) => void }) {
|
||||
const isUser = item.role === "user";
|
||||
const isSystem = item.role === "system";
|
||||
const color = item.role === "error" ? "#dc2626" : item.role === "tool" ? "#2563eb" : theme.node.text;
|
||||
@@ -47,7 +48,7 @@ export function AgentChatMessage({ item, theme, user, onRejectTool, onApproveToo
|
||||
<div className={`flex items-start gap-2.5 ${isUser ? "justify-end" : "justify-start"}`}>
|
||||
{!isUser ? <AgentAvatar theme={theme} /> : null}
|
||||
<div className={`min-w-0 max-w-[86%] text-sm leading-6 ${isUser ? "rounded-md px-3 py-2.5 text-right" : "text-left"}`} style={{ color, ...(isUser ? { background: theme.accent.primarySoft } : {}) }}>
|
||||
<div className="whitespace-pre-wrap break-words text-left">{item.text}</div>
|
||||
{item.role === "assistant" ? <AIMessageMarkdown className="text-left" isStreaming={isStreaming}>{item.text}</AIMessageMarkdown> : <div className="whitespace-pre-wrap break-words text-left">{item.text}</div>}
|
||||
{item.attachments?.length ? <AgentMessageAttachments attachments={item.attachments} /> : null}
|
||||
{item.meta ? <div className="mt-1 text-[var(--fs-label)] opacity-45">{item.meta}</div> : null}
|
||||
</div>
|
||||
|
||||
@@ -743,7 +743,7 @@ export function CanvasAssistantPanel({ nodes, selectedNodeIds, snapshot, project
|
||||
<>
|
||||
{messages.map((message) => (
|
||||
<div key={message.id} className="space-y-2">
|
||||
<AgentChatMessage item={assistantMessageToChatMessage(message)} theme={theme} user={user} onRejectTool={rejectOnlineTool} onApproveTool={approveOnlineTool} />
|
||||
<AgentChatMessage item={assistantMessageToChatMessage(message)} theme={theme} user={user} isStreaming={agentBusy && message.id === messages.at(-1)?.id && message.role === "assistant"} onRejectTool={rejectOnlineTool} onApproveTool={approveOnlineTool} />
|
||||
{message.references?.length ? <MessageReferences message={message} /> : null}
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -547,7 +547,7 @@ export const CanvasLocalAgentPanel = memo(function CanvasLocalAgentPanel({ snaps
|
||||
<div ref={listRef} className="thin-scrollbar min-h-0 flex-1 space-y-4 overflow-y-auto p-4">
|
||||
{!messages.length && !pendingTool && !waiting ? <AgentChatEmptyState theme={theme} nodeCount={snapshot.nodes.length} onSelect={(text) => { setAgentState({ prompt: text }); void sendPrompt(text); }} /> : null}
|
||||
{messages.map((item) => (
|
||||
<AgentChatMessage key={item.id} item={agentMessageToChatMessage(item)} theme={theme} user={user} />
|
||||
<AgentChatMessage key={item.id} item={agentMessageToChatMessage(item)} theme={theme} user={user} isStreaming={(sending || waiting) && item.id === messages.at(-1)?.id && item.role === "assistant"} />
|
||||
))}
|
||||
{pendingTool ? <AgentPendingToolCard summary={summarizeCanvasAgentOps(pendingTool.input?.ops || []) || toolName(pendingTool.name)} detail={{ requestId: pendingTool.requestId, name: pendingTool.name, input: pendingTool.input, impact: previewCanvasAgentOps(pendingTool.input?.ops || [], snapshot) }} theme={theme} onReject={rejectPendingTool} onApprove={approvePendingTool} /> : null}
|
||||
{waiting && !pendingTool ? <AgentWorkingMessage theme={theme} /> : null}
|
||||
|
||||
@@ -9,6 +9,7 @@ import { resolveCanvasDrawingReference } from "@/lib/canvas/canvas-drawing-refer
|
||||
import { compileCharacterReferencePrompt } from "@/lib/canvas/canvas-character-reference";
|
||||
import { nodeReferenceImage } from "@/lib/canvas/canvas-project-generation";
|
||||
import type { ModelReferenceLimits } from "@/lib/model-selection";
|
||||
import type { Asset } from "@/stores/use-asset-store";
|
||||
|
||||
export type CharacterGenerationReference = {
|
||||
nodeId: string;
|
||||
@@ -56,26 +57,27 @@ export type NodeGenerationInput = {
|
||||
character?: CharacterGenerationReference;
|
||||
};
|
||||
|
||||
export function buildNodeGenerationContext(nodeId: string, nodes: CanvasNodeData[], connections: CanvasConnection[], prompt: string, promptOnly = false): NodeGenerationContext {
|
||||
const inputs = buildNodeGenerationInputs(nodeId, nodes, connections);
|
||||
export function buildNodeGenerationContext(nodeId: string, nodes: CanvasNodeData[], connections: CanvasConnection[], prompt: string, assets: Asset[], promptOnly = false): NodeGenerationContext {
|
||||
const connectedInputs = buildNodeGenerationInputs(nodeId, nodes, connections);
|
||||
const inputs = [...connectedInputs, ...buildAssetGenerationInputs(assets)];
|
||||
const sourceNode = nodes.find((node) => node.id === nodeId);
|
||||
const storyboardInputs = getConnectedStoryboardRows(nodeId, nodes, connections);
|
||||
const hasExplicitNodeMention = /@\[node:[^\]]+\]/.test(normalizeLegacyNodeMentions(prompt, inputs));
|
||||
if ((sourceNode?.type === CanvasNodeType.Config && Boolean(sourceNode.metadata?.composerContent?.trim())) || hasExplicitNodeMention) {
|
||||
const hasExplicitResourceMention = /@\[(?:node|asset):[^\]]+\]/.test(normalizeLegacyNodeMentions(prompt, inputs));
|
||||
if ((sourceNode?.type === CanvasNodeType.Config && Boolean(sourceNode.metadata?.composerContent?.trim())) || hasExplicitResourceMention) {
|
||||
return buildComposerGenerationContext(inputs, prompt, [sourceNode?.metadata?.videoStartFrameNodeId, sourceNode?.metadata?.videoEndFrameNodeId].filter((id): id is string => Boolean(id)), promptOnly);
|
||||
}
|
||||
|
||||
const isStoryboardMedia = sourceNode?.type === CanvasNodeType.Image || sourceNode?.type === CanvasNodeType.Video;
|
||||
const basePrompt = isStoryboardMedia && storyboardInputs.length ? removeTrailingInputBlocks(prompt, storyboardInputs) : prompt;
|
||||
const textInputs = inputs.filter((input) => input.type === "text");
|
||||
const characterReferences = inputs.map((input) => input.character).filter((item): item is CharacterGenerationReference => Boolean(item));
|
||||
const textInputs = connectedInputs.filter((input) => input.type === "text");
|
||||
const characterReferences = connectedInputs.map((input) => input.character).filter((item): item is CharacterGenerationReference => Boolean(item));
|
||||
const upstreamText = textInputs
|
||||
.map((input) => input.text)
|
||||
.filter(Boolean)
|
||||
.join("\n\n");
|
||||
const referenceImages = inputs.map((input) => input.image).filter((image): image is ReferenceImage => Boolean(image));
|
||||
const referenceVideos = inputs.map((input) => input.video).filter((video): video is ReferenceVideo => Boolean(video));
|
||||
const referenceAudios = inputs.map((input) => input.audio).filter((audio): audio is ReferenceAudio => Boolean(audio));
|
||||
const referenceImages = connectedInputs.map((input) => input.image).filter((image): image is ReferenceImage => Boolean(image));
|
||||
const referenceVideos = connectedInputs.map((input) => input.video).filter((video): video is ReferenceVideo => Boolean(video));
|
||||
const referenceAudios = connectedInputs.map((input) => input.audio).filter((audio): audio is ReferenceAudio => Boolean(audio));
|
||||
|
||||
return {
|
||||
prompt: promptOnly ? prompt : upstreamText ? `${basePrompt}\n\n${upstreamText}` : basePrompt,
|
||||
@@ -112,7 +114,8 @@ function removeTrailingInputBlocks(prompt: string, inputs: NodeGenerationInput[]
|
||||
|
||||
function buildComposerGenerationContext(inputs: NodeGenerationInput[], prompt: string, videoFrameNodeIds: string[] = [], promptOnly = false): NodeGenerationContext {
|
||||
const normalizedPrompt = normalizeLegacyNodeMentions(prompt, inputs);
|
||||
const inputByNodeId = new Map(inputs.map((input) => [input.nodeId, input]));
|
||||
const inputByToken = new Map(inputs.map((input) => [generationInputToken(input), input]));
|
||||
const nodeInputById = new Map(inputs.filter((input) => !input.nodeId.startsWith("asset:")).map((input) => [input.nodeId, input]));
|
||||
const selectedInputs: NodeGenerationInput[] = [];
|
||||
const labelByNodeId = new Map<string, string>();
|
||||
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) => {
|
||||
|
||||
@@ -244,6 +244,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
|
||||
onMissingConfig={() => navigateToSettings({ continueCreation: true })}
|
||||
showSelectedPrice={false}
|
||||
variant="creation"
|
||||
showConfiguredModelName
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-auto flex min-w-0 shrink-0 items-center gap-1">
|
||||
@@ -284,6 +285,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
|
||||
<CanvasResourceMentionTextarea
|
||||
value={prompt}
|
||||
references={mentionReferences}
|
||||
includeAssetLibrary
|
||||
onChange={updatePrompt}
|
||||
onContentSizeChange={expanded ? setExpandedPromptContentHeight : setPromptContentHeight}
|
||||
containerClassName="min-h-0 flex-1"
|
||||
@@ -504,10 +506,21 @@ function PromptResizeHandle({ height, min, max, onResize }: { height: number; mi
|
||||
onPointerMove={(event) => {
|
||||
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;
|
||||
}}
|
||||
>
|
||||
<span aria-hidden />
|
||||
</button>
|
||||
|
||||
@@ -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<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "val
|
||||
mentionMenuWidth?: number;
|
||||
sendOnEnter?: boolean;
|
||||
onContentSizeChange?: (height: number) => void;
|
||||
includeAssetLibrary?: boolean;
|
||||
};
|
||||
|
||||
export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Props>(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<HTMLDivElement | null>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
@@ -54,22 +58,33 @@ export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Pro
|
||||
const pendingSelectionRef = useRef<number | null>(null);
|
||||
const lastRenderedValueRef = useRef("");
|
||||
const [mention, setMention] = useState<MentionState | null>(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<HTMLTextAreaElement, Pro
|
||||
const container = containerRef.current;
|
||||
if (!element || !container || !onContentSizeChange) return;
|
||||
reportContentSize(element);
|
||||
const observer = new ResizeObserver(() => 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<HTMLTextAreaElement, Pro
|
||||
|
||||
const closeMention = () => {
|
||||
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<HTMLTextAreaElement, Pro
|
||||
caretColor: style?.color || theme.node.text,
|
||||
} as CSSProperties;
|
||||
const menuAnchor = useRichEditor ? editorRef.current : textareaRef.current;
|
||||
const menu = mention && candidates.length && menuAnchor ? <MentionMenu anchor={menuAnchor} references={candidates} activeIndex={Math.min(activeIndex, candidates.length - 1)} theme={theme} preferredWidth={mentionMenuWidth} onSelect={insertReference} /> : null;
|
||||
const menu = mention && availableReferences.length && menuAnchor ? (
|
||||
<MentionMenu
|
||||
anchor={menuAnchor}
|
||||
connectedReferences={activeCanvasReferences}
|
||||
assetReferences={assetReferences}
|
||||
filteredReferences={candidates}
|
||||
query={mention.query}
|
||||
activeReferenceId={activeIndex >= 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<HTMLTextAreaElement, Pro
|
||||
if (mention && candidates.length) {
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
setActiveIndex((index) => (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<HTMLTextAreaElement, Pro
|
||||
onScroll={(event) => props.onScroll?.(event as unknown as React.UIEvent<HTMLTextAreaElement>)}
|
||||
onFocus={(event) => props.onFocus?.(event as unknown as React.FocusEvent<HTMLTextAreaElement>)}
|
||||
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<HTMLTextAreaElement>);
|
||||
}}
|
||||
>
|
||||
@@ -306,17 +343,17 @@ export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Pro
|
||||
if (mention && candidates.length) {
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
setActiveIndex((index) => (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<HTMLTextAreaElement, Pro
|
||||
props.onWheel?.(event);
|
||||
}}
|
||||
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);
|
||||
}}
|
||||
/>
|
||||
@@ -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<AssetCategory, string> = {
|
||||
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<HTMLDivElement | null>(null);
|
||||
const selectedRef = useRef(false);
|
||||
const [category, setCategory] = useState<AssetCategory | null>(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(
|
||||
<div
|
||||
ref={menuRef}
|
||||
data-canvas-resource-mention-menu="true"
|
||||
className="fixed z-[var(--z-tooltip)] max-h-56 overflow-y-auto rounded-xl border p-1 shadow-2xl backdrop-blur-md"
|
||||
style={{ left, top, width: menuWidth, background: theme.toolbar.panel, borderColor: theme.toolbar.border, color: theme.node.text }}
|
||||
className="canvas-resource-mention-menu fixed z-[var(--z-tooltip)]"
|
||||
style={{ left, top, width: menuWidth, maxHeight: maxMenuHeight, background: theme.toolbar.panel, borderColor: theme.toolbar.border, color: theme.node.text }}
|
||||
onPointerDown={stopCanvasInteraction}
|
||||
onMouseDown={stopCanvasInteraction}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
{references.map((reference, index) => (
|
||||
<button
|
||||
key={reference.id}
|
||||
type="button"
|
||||
className="flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs transition"
|
||||
style={{ background: index === activeIndex ? theme.toolbar.activeBg : "transparent", color: index === activeIndex ? theme.toolbar.activeText : theme.node.text }}
|
||||
onPointerDown={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
selectReference(reference);
|
||||
<div className="canvas-resource-mention-search">
|
||||
<Search aria-hidden />
|
||||
<input
|
||||
value={query}
|
||||
placeholder="搜索素材..."
|
||||
aria-label="搜索引用素材"
|
||||
onChange={(event) => onQueryChange(event.target.value)}
|
||||
onPointerDown={(event) => event.stopPropagation()}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
onClose();
|
||||
anchor.focus();
|
||||
return;
|
||||
}
|
||||
if (event.key === "Enter" && filteredReferences.length) {
|
||||
event.preventDefault();
|
||||
selectReference(filteredReferences[0]);
|
||||
}
|
||||
}}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
selectReference(reference);
|
||||
}}
|
||||
>
|
||||
<ReferencePreview reference={reference} />
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate font-medium" title={reference.label}>{reference.label}</span>
|
||||
{reference.kind !== "skill" ? <span className="block truncate opacity-65">{reference.text || reference.title}</span> : null}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
/>
|
||||
</div>
|
||||
<div className="canvas-resource-mention-scroll thin-scrollbar">
|
||||
{query ? (
|
||||
<MentionReferenceList references={visibleReferences} activeReferenceId={activeReferenceId} theme={theme} onSelect={selectReference} />
|
||||
) : category ? (
|
||||
<>
|
||||
<button type="button" className="canvas-resource-mention-back" onClick={() => setCategory(null)}>
|
||||
<ArrowLeft aria-hidden />
|
||||
<span>{ASSET_CATEGORY_LABELS[category]}</span>
|
||||
<small>{visibleReferences.length}</small>
|
||||
</button>
|
||||
<MentionReferenceList references={visibleReferences} activeReferenceId={activeReferenceId} theme={theme} onSelect={selectReference} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{connectedNodes.length ? (
|
||||
<section className="canvas-resource-mention-section">
|
||||
<h4>已连接节点</h4>
|
||||
<MentionReferenceList references={connectedNodes} activeReferenceId={activeReferenceId} theme={theme} onSelect={selectReference} />
|
||||
</section>
|
||||
) : null}
|
||||
{skillReferences.length ? (
|
||||
<section className="canvas-resource-mention-section">
|
||||
<h4>技能库</h4>
|
||||
<MentionReferenceList references={skillReferences} activeReferenceId={activeReferenceId} theme={theme} onSelect={selectReference} />
|
||||
</section>
|
||||
) : null}
|
||||
{categoryItems.length ? (
|
||||
<section className="canvas-resource-mention-section">
|
||||
<h4>素材库</h4>
|
||||
{categoryItems.map((item) => (
|
||||
<button key={item.value} type="button" className="canvas-resource-mention-folder" onClick={() => setCategory(item.value)}>
|
||||
<Folder aria-hidden />
|
||||
<span>{item.label}</span>
|
||||
<small>{item.count}</small>
|
||||
<ChevronRight aria-hidden />
|
||||
</button>
|
||||
))}
|
||||
</section>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>,
|
||||
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 <div className="canvas-resource-mention-empty">没有匹配的素材</div>;
|
||||
return references.map((reference) => (
|
||||
<button
|
||||
key={reference.id}
|
||||
type="button"
|
||||
className="canvas-resource-mention-item"
|
||||
style={{ background: reference.id === activeReferenceId ? theme.toolbar.activeBg : "transparent", color: reference.id === activeReferenceId ? theme.toolbar.activeText : theme.node.text }}
|
||||
onPointerDown={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
onSelect(reference);
|
||||
}}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
onSelect(reference);
|
||||
}}
|
||||
>
|
||||
<ReferencePreview reference={reference} />
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate font-medium" title={reference.label}>{reference.label}</span>
|
||||
{reference.kind !== "skill" && reference.text && reference.text !== reference.title ? <span className="block truncate opacity-55">{reference.text}</span> : null}
|
||||
</span>
|
||||
</button>
|
||||
));
|
||||
}
|
||||
|
||||
function ReferencePreview({ reference }: { reference: CanvasResourceReference }) {
|
||||
if (reference.kind === "image" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-9 rounded-md object-cover" />;
|
||||
if (reference.kind === "video" && reference.previewUrl) return <video src={reference.previewUrl} className="size-9 rounded-md bg-black object-cover" muted preload="metadata" />;
|
||||
if (reference.kind === "character" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-9 rounded-md bg-black/5 object-contain" />;
|
||||
if (reference.kind === "image" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-7 rounded-sm object-cover" />;
|
||||
if (reference.kind === "video" && reference.previewUrl) return <video src={reference.previewUrl} className="size-7 rounded-sm bg-black object-cover" muted preload="metadata" />;
|
||||
if (reference.kind === "character" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-7 rounded-sm bg-black/5 object-contain" />;
|
||||
if (reference.kind === "skill") {
|
||||
return (
|
||||
<span className="grid size-9 shrink-0 place-items-center rounded-md bg-cyan-500/12 text-cyan-600 dark:text-cyan-200">
|
||||
<Sparkles className="size-4" />
|
||||
<span className="grid size-7 shrink-0 place-items-center rounded-sm bg-cyan-500/10 text-cyan-600 dark:text-cyan-200">
|
||||
<Sparkles className="size-3.5" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
const Icon = reference.sourceType === CanvasNodeType.Drawing ? Pencil : reference.kind === "character" ? UserRound : reference.kind === "audio" ? Music2 : reference.kind === "video" ? Video : reference.kind === "image" ? ImageIcon : FileText;
|
||||
return (
|
||||
<span className="grid size-9 shrink-0 place-items-center rounded-md bg-black/10">
|
||||
<Icon className="size-4" />
|
||||
<span className="grid size-7 shrink-0 place-items-center rounded-sm bg-black/10">
|
||||
<Icon className="size-3.5" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Popover } from "antd";
|
||||
|
||||
import { canvasThemes, type CanvasTheme } from "@/lib/canvas-theme";
|
||||
import { modelCapabilityConfigFor, videoDurationOptions } from "@/lib/model-capabilities";
|
||||
import { compatibleModelInGroup, groupModelsByDisplayName, modelCompatibilityError, resolveCompatibleModel, type ModelRequirements } from "@/lib/model-selection";
|
||||
import { compatibleModelInGroup, configuredModelDisplayName, groupModelsByDisplayName, modelCompatibilityError, resolveCompatibleModel, type ModelRequirements } from "@/lib/model-selection";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { modelDisplayName, modelOptionLabel, modelOptionName, resolveModelChannel, selectableModelsByCapability, type AiConfig, type ModelCapability } from "@/stores/use-config-store";
|
||||
import { useThemeStore } from "@/stores/use-theme-store";
|
||||
@@ -22,9 +22,10 @@ type ModelPickerProps = {
|
||||
showSelectedPrice?: boolean;
|
||||
variant?: "default" | "creation";
|
||||
requirements?: ModelRequirements;
|
||||
showConfiguredModelName?: boolean;
|
||||
};
|
||||
|
||||
export function ModelPicker({ config, value, onChange, capability, className, fullWidth = false, placeholder = "选择模型", onMissingConfig, showSelectedPrice = true, variant = "default", requirements }: ModelPickerProps) {
|
||||
export function ModelPicker({ config, value, onChange, capability, className, fullWidth = false, placeholder = "选择模型", onMissingConfig, showSelectedPrice = true, variant = "default", requirements, showConfiguredModelName = false }: ModelPickerProps) {
|
||||
const creditsEnabled = useUserStore((state) => state.features.creditsEnabled);
|
||||
const pickerId = useId();
|
||||
// 双保险：即使 store merge 写出非法 theme，这里也兜底到 dark，避免 "reading 'node'" 崩溃
|
||||
@@ -129,7 +130,7 @@ export function ModelPicker({ config, value, onChange, capability, className, fu
|
||||
{creationVariant ? (
|
||||
<div className="creation-model-picker-heading">
|
||||
<span>选择模型</span>
|
||||
{current ? <strong>{modelDisplayName(config, current)}</strong> : null}
|
||||
{current ? <strong>{pickerModelDisplayName(config, current, showConfiguredModelName)}</strong> : null}
|
||||
</div>
|
||||
) : 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());
|
||||
}}
|
||||
>
|
||||
<ModelLabel config={config} model={displayModel} capability={capability} theme={theme} creationVariant={creationVariant} showPrice={creditsEnabled} disabledReason={disabledReason} />
|
||||
<ModelLabel config={config} model={displayModel} capability={capability} theme={theme} creationVariant={creationVariant} showConfiguredModelName={showConfiguredModelName} showPrice={creditsEnabled} disabledReason={disabledReason} />
|
||||
{selected ? <Check className="canvas-model-picker-option-check" style={{ color: theme.node.activeStroke }} /> : null}
|
||||
</button>
|
||||
);
|
||||
@@ -203,14 +204,14 @@ export function ModelPicker({ config, value, onChange, capability, className, fu
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={open}
|
||||
aria-label={placeholder}
|
||||
title={current ? modelOptionLabel(config, current) : placeholder}
|
||||
title={current ? pickerModelOptionLabel(config, current, showConfiguredModelName) : placeholder}
|
||||
onKeyDown={handleTriggerKeyDown}
|
||||
>
|
||||
<span className="canvas-model-picker-label flex min-w-0 items-center gap-1.5">
|
||||
<span className="canvas-model-picker-trigger-icon" style={{ background: theme.toolbar.itemHover }}>
|
||||
<ModelIcon model={current} />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 truncate">{current ? (creationVariant ? modelDisplayName(config, current) : modelOptionLabel(config, current)) : placeholder}</span>
|
||||
<span className="min-w-0 flex-1 truncate">{current ? (creationVariant ? pickerModelDisplayName(config, current, showConfiguredModelName) : pickerModelOptionLabel(config, current, showConfiguredModelName)) : placeholder}</span>
|
||||
{showSelectedPrice && creditsEnabled ? <ModelPrice price={currentPrice} compact /> : null}
|
||||
</span>
|
||||
<ChevronDown className={cn("canvas-model-picker-chevron", open && "is-open")} aria-hidden="true" />
|
||||
@@ -232,6 +233,7 @@ function ModelLabel({
|
||||
capability,
|
||||
theme,
|
||||
creationVariant,
|
||||
showConfiguredModelName,
|
||||
showPrice,
|
||||
disabledReason,
|
||||
}: {
|
||||
@@ -240,6 +242,7 @@ function ModelLabel({
|
||||
capability?: ModelCapability;
|
||||
theme: (typeof canvasThemes)[keyof typeof canvasThemes];
|
||||
creationVariant: boolean;
|
||||
showConfiguredModelName: boolean;
|
||||
showPrice: boolean;
|
||||
disabledReason?: string;
|
||||
}) {
|
||||
@@ -252,7 +255,7 @@ function ModelLabel({
|
||||
<ModelIcon model={model} />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 overflow-hidden">
|
||||
<span className="block min-w-0 truncate text-[var(--fs-label)] font-medium leading-none">{modelDisplayName(config, model)}</span>
|
||||
<span className="block min-w-0 truncate text-[var(--fs-label)] font-medium leading-none">{pickerModelDisplayName(config, model, showConfiguredModelName)}</span>
|
||||
<span className="mt-1 block truncate text-[var(--fs-tiny)]" style={{ color: theme.node.muted }} title={capabilitySummary}>
|
||||
{capabilitySummary}
|
||||
</span>
|
||||
@@ -281,6 +284,14 @@ function modelMenuPrice(config: AiConfig, model: string): { value: number; unit:
|
||||
return { value: cost.unitPriceMicrocredits / 1_000_000, unit: cost.billingMode === "per_second" ? "秒" : "次" };
|
||||
}
|
||||
|
||||
function pickerModelDisplayName(config: AiConfig, model: string, showConfiguredModelName: boolean) {
|
||||
return showConfiguredModelName ? configuredModelDisplayName(config, model) : modelDisplayName(config, model);
|
||||
}
|
||||
|
||||
function pickerModelOptionLabel(config: AiConfig, model: string, showConfiguredModelName: boolean) {
|
||||
return showConfiguredModelName ? `${configuredModelDisplayName(config, model)}（${resolveModelChannel(config, model).name}）` : modelOptionLabel(config, model);
|
||||
}
|
||||
|
||||
function ModelPrice({ price, compact = false }: { price: { value: number; unit: "次" | "秒" } | null | undefined; compact?: boolean }) {
|
||||
if (price === undefined) return null;
|
||||
if (price === null) return compact ? null : <span className="shrink-0 text-[var(--fs-tiny)] text-foreground/40">未配置</span>;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { imageReferenceLabel } from "@/lib/image-reference-prompt";
|
||||
import { seedanceReferenceLabel } from "@/lib/seedance-video";
|
||||
import type { Skill } from "@/services/api/skills";
|
||||
import type { Asset, AssetCategory } from "@/stores/use-asset-store";
|
||||
import { CanvasNodeType, type CanvasConnection, type CanvasNodeData } from "@/types/canvas";
|
||||
|
||||
export type CanvasResourceKind = "image" | "video" | "audio" | "text" | "skill" | "character";
|
||||
@@ -17,13 +18,38 @@ export type CanvasResourceReference = {
|
||||
active: boolean;
|
||||
sourceType?: CanvasNodeType;
|
||||
skill?: Skill;
|
||||
assetId?: string;
|
||||
category?: AssetCategory;
|
||||
};
|
||||
|
||||
export function canvasResourceMentionToken(reference: CanvasResourceReference) {
|
||||
if (reference.kind === "skill" && reference.skill?.skill_id) return `@[skill:${reference.skill.skill_id}]`;
|
||||
if (reference.assetId) return `@[asset:${reference.assetId}]`;
|
||||
return `@[node:${reference.nodeId}]`;
|
||||
}
|
||||
|
||||
export function buildAssetMentionReferences(assets: Asset[]): CanvasResourceReference[] {
|
||||
return assets.flatMap((asset): CanvasResourceReference[] => {
|
||||
if (asset.kind === "model") return [];
|
||||
const kind: CanvasResourceKind = asset.kind === "entity" ? "character" : asset.kind;
|
||||
const previewUrl = asset.kind === "image" ? asset.data.dataUrl : asset.kind === "video" ? asset.data.url : asset.coverUrl;
|
||||
const text = asset.kind === "text" ? asset.data.content : undefined;
|
||||
return [{
|
||||
id: `asset:${asset.id}`,
|
||||
nodeId: "",
|
||||
assetId: asset.id,
|
||||
kind,
|
||||
label: asset.title,
|
||||
title: asset.title,
|
||||
previewUrl,
|
||||
storageKey: "storageKey" in asset.data ? asset.data.storageKey : undefined,
|
||||
text,
|
||||
active: false,
|
||||
category: asset.category || "other",
|
||||
}];
|
||||
});
|
||||
}
|
||||
|
||||
export function buildCanvasResourceReferences(nodes: CanvasNodeData[], connections: CanvasConnection[], contextNodeId?: string | null) {
|
||||
const contextNodes = contextNodeId ? getMentionResourceNodes(contextNodeId, nodes, connections) : [];
|
||||
const globalReferences = labelResourceNodes(nodes.filter(isResourceNode), false);
|
||||
|
||||
@@ -1181,6 +1181,7 @@ function InfiniteCanvasPage() {
|
||||
projectId,
|
||||
domainProjectId: currentProject?.projectId,
|
||||
addedSkills,
|
||||
assets,
|
||||
nodesRef,
|
||||
connectionsRef,
|
||||
setNodes,
|
||||
@@ -1221,6 +1222,7 @@ function InfiniteCanvasPage() {
|
||||
projectId,
|
||||
domainProjectId: currentProject?.projectId,
|
||||
addedSkills,
|
||||
assets,
|
||||
nodesRef,
|
||||
connectionsRef,
|
||||
setNodes,
|
||||
|
||||
@@ -14,6 +14,7 @@ import { navigateToSettings } from "@/lib/settings-navigation";
|
||||
import type { Skill } from "@/services/api/skills";
|
||||
import type { GenerationTask } from "@/services/api/task-center";
|
||||
import { useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
|
||||
import type { Asset } from "@/stores/use-asset-store";
|
||||
import { CanvasNodeType, type CanvasConnection, type CanvasNodeData } from "@/types/canvas";
|
||||
|
||||
import { executeImageGeneration } from "./canvas-image-generation-executor";
|
||||
@@ -24,6 +25,7 @@ type UseCanvasGenerationExecutorOptions = {
|
||||
projectId: string;
|
||||
domainProjectId?: string;
|
||||
addedSkills: Skill[];
|
||||
assets: Asset[];
|
||||
nodesRef: { current: CanvasNodeData[] };
|
||||
connectionsRef: { current: CanvasConnection[] };
|
||||
setNodes: Dispatch<SetStateAction<CanvasNodeData[]>>;
|
||||
@@ -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],
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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<SetStateAction<CanvasNodeData[]>>;
|
||||
@@ -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<ReturnType<typeof hydrateNodeGenerationContext>> | 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],
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
</div></div>;
|
||||
}
|
||||
if (status === "error") return <div className="storyboard-workbench-error"><span>{generationErrorMessage(result.error || "")}</span><button type="button" onClick={onRetryFailure}><RefreshCw />重新生成</button></div>;
|
||||
if (mode === "text") return <div className="creation-message-content storyboard-workbench-text">{result.content ? <ReactMarkdown>{result.content}</ReactMarkdown> : <span>正在生成…</span>}</div>;
|
||||
if (mode === "text") return <div className="creation-message-content storyboard-workbench-text">{result.content ? <AIMessageMarkdown isStreaming={status === "streaming"}>{result.content}</AIMessageMarkdown> : <span>正在生成…</span>}</div>;
|
||||
if (!resultUrls.length) return <div className="storyboard-workbench-empty"><Film />没有返回可预览结果 <button type="button" onClick={onRetryFailure}>重试</button></div>;
|
||||
const note = result.settings ? directorNoteFor(mode, result.settings) : "";
|
||||
return <>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
@source "../../node_modules/streamdown/dist/*.js";
|
||||
@source "../../node_modules/@streamdown/code/dist/*.js";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@@ -712,6 +714,9 @@
|
||||
--canvas-composer-control-hover: color-mix(in srgb, var(--foreground) 8%, transparent);
|
||||
--canvas-composer-shadow: var(--elevation-card);
|
||||
--canvas-composer-settings-width: 138px;
|
||||
--canvas-mention-menu-max-height: 320px;
|
||||
--canvas-mention-search-height: 40px;
|
||||
--canvas-mention-item-height: 34px;
|
||||
|
||||
/* Modal 组件（对话框，对应 #98 面板层级）*/
|
||||
--modal-radius: var(--r-lg);
|
||||
@@ -3115,7 +3120,7 @@
|
||||
.creation-message-model { max-width: min(400px, 48vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.creation-message-state { border-radius: 6px; background: rgba(255, 255, 255, .08); padding: 3px 6px; color: var(--creation-muted); }
|
||||
.creation-message-state.is-error { background: rgba(185, 61, 61, .18); color: #ec7474; }
|
||||
.creation-message-content { padding: 14px 0 0 42px; color: var(--creation-text); font-size: 15px; line-height: 1.8; white-space: pre-wrap; }
|
||||
.creation-message-content { padding: 14px 0 0 42px; color: var(--creation-text); font-size: 15px; line-height: 1.8; }
|
||||
.creation-message-content > span { color: var(--creation-muted); }
|
||||
.creation-message-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 15px 0 0 42px; color: #ef5350; font-size: 14px; line-height: 1.6; }
|
||||
.creation-message-error button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--creation-text); padding: 6px 9px; font-size: 12px; transition: background-color 140ms ease; }
|
||||
@@ -5985,6 +5990,134 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.canvas-resource-mention-menu {
|
||||
display: flex;
|
||||
max-height: var(--canvas-mention-menu-max-height);
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--canvas-composer-surface);
|
||||
color: var(--cn-text);
|
||||
box-shadow: var(--elevation-overlay);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-search {
|
||||
display: flex;
|
||||
min-height: var(--canvas-mention-search-height);
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding-inline: var(--space-2-half);
|
||||
color: color-mix(in srgb, var(--foreground) 44%, transparent);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-search > svg {
|
||||
width: var(--space-4);
|
||||
height: var(--space-4);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.canvas-resource-mention-search > input {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
color: var(--cn-text);
|
||||
font-size: var(--fs-caption);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-search > input::placeholder {
|
||||
color: color-mix(in srgb, var(--foreground) 36%, transparent);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-scroll {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0 var(--space-1) var(--space-1);
|
||||
border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-section {
|
||||
padding-top: var(--space-1);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-section + .canvas-resource-mention-section {
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-section > h4 {
|
||||
margin: 0;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
color: color-mix(in srgb, var(--foreground) 48%, transparent);
|
||||
font-size: var(--fs-tiny);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.canvas-resource-mention-item,
|
||||
.canvas-resource-mention-folder,
|
||||
.canvas-resource-mention-back {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: var(--canvas-mention-item-height);
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
border: 0;
|
||||
border-radius: var(--r-md);
|
||||
background: transparent;
|
||||
padding: calc(var(--space-1) / 2) var(--space-2);
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
transition: background-color var(--motion-instant) ease-out;
|
||||
}
|
||||
|
||||
.canvas-resource-mention-item:hover,
|
||||
.canvas-resource-mention-folder:hover,
|
||||
.canvas-resource-mention-back:hover {
|
||||
background: var(--canvas-composer-control-hover) !important;
|
||||
}
|
||||
|
||||
.canvas-resource-mention-folder > svg:first-child,
|
||||
.canvas-resource-mention-back > svg:first-child {
|
||||
width: var(--space-4);
|
||||
height: var(--space-4);
|
||||
flex: 0 0 auto;
|
||||
color: color-mix(in srgb, var(--foreground) 58%, transparent);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-folder > span,
|
||||
.canvas-resource-mention-back > span {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: var(--fs-caption);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-folder > small,
|
||||
.canvas-resource-mention-back > small {
|
||||
color: color-mix(in srgb, var(--foreground) 38%, transparent);
|
||||
font-size: var(--fs-tiny);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.canvas-resource-mention-folder > svg:last-child {
|
||||
width: var(--space-4);
|
||||
height: var(--space-4);
|
||||
flex: 0 0 auto;
|
||||
color: color-mix(in srgb, var(--foreground) 32%, transparent);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-empty {
|
||||
padding: var(--space-8) var(--space-3);
|
||||
color: color-mix(in srgb, var(--foreground) 42%, transparent);
|
||||
font-size: var(--fs-tiny);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[data-canvas-viewport-interacting="true"] .canvas-node-shell,
|
||||
[data-canvas-viewport-interacting="true"] .canvas-frame-shell,
|
||||
[data-canvas-viewport-interacting="true"] .aceternity-comet-card {
|
||||
@@ -7167,19 +7300,6 @@ html:not(.dark) .creation-user-message-reference { background: rgba(28, 32, 37,
|
||||
.creation-message-state { border: 0; border-radius: 5px; background: rgba(255, 255, 255, .06); padding: 2px 5px; color: var(--creation-muted); font-size: 10px; }
|
||||
|
||||
.creation-message-content { max-width: 800px; padding: 14px 0 0 34px; color: var(--creation-text); font-size: 15px; line-height: 1.8; }
|
||||
.creation-message-content p { margin: 0 0 12px; }
|
||||
.creation-message-content p:last-child { margin-bottom: 0; }
|
||||
.creation-message-content h1, .creation-message-content h2, .creation-message-content h3 { margin: 20px 0 8px; color: var(--creation-text); font-weight: 650; line-height: 1.35; }
|
||||
.creation-message-content h1 { font-size: 21px; }
|
||||
.creation-message-content h2 { font-size: 18px; }
|
||||
.creation-message-content h3 { font-size: 16px; }
|
||||
.creation-message-content ul, .creation-message-content ol { margin: 10px 0; padding-left: 22px; }
|
||||
.creation-message-content li + li { margin-top: 4px; }
|
||||
.creation-message-content blockquote { margin: 14px 0; border-left: 2px solid color-mix(in srgb, var(--creation-text) 24%, transparent); padding: 2px 0 2px 12px; color: var(--creation-muted); }
|
||||
.creation-message-content code { border-radius: 4px; background: rgba(255, 255, 255, .08); padding: 2px 5px; font-size: .88em; }
|
||||
.creation-message-content pre { overflow-x: auto; border-radius: 8px; background: #181b20; padding: 12px 14px; }
|
||||
.creation-message-content pre code { background: transparent; padding: 0; }
|
||||
.creation-message-content a { color: var(--creation-text); text-decoration: underline; text-underline-offset: 3px; }
|
||||
|
||||
.creation-message-error { display: flex; max-width: 760px; align-items: center; gap: 10px; padding: 16px 0 0 34px; color: #ee8585; font-size: 13px; line-height: 1.6; }
|
||||
.creation-message-error button { display: inline-flex; height: 28px; align-items: center; gap: 5px; border: 0; border-radius: 6px; background: rgba(226, 96, 96, .12); color: #ef8b8b; padding: 0 8px; font-size: 11px; }
|
||||
@@ -7211,10 +7331,8 @@ html:not(.dark) .creation-user-message-reference { background: rgba(28, 32, 37,
|
||||
.creation-media-preview-video { width: 100%; background: #050505; }
|
||||
|
||||
html:not(.dark) .creation-user-message { background: rgba(28, 32, 37, .07); }
|
||||
html:not(.dark) .creation-message-content pre,
|
||||
html:not(.dark) .creation-video-result,
|
||||
html:not(.dark) .creation-media-preview-modal .ant-modal-container { background: #1f2227; }
|
||||
html:not(.dark) .creation-message-content code { background: rgba(28, 32, 37, .08); }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.creation-home .creation-chat-writing-surface,
|
||||
@@ -8451,7 +8569,7 @@ body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
|
||||
.app-story-generating p {
|
||||
margin: 0;
|
||||
color: var(--foreground);
|
||||
font-size: var(--fs-body);
|
||||
font-size: var(--fs-caption);
|
||||
font-weight: 560;
|
||||
}
|
||||
|
||||
@@ -9938,3 +10056,105 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
.wallet-library-page .wallet-ledger-table .ant-table-tbody > tr:hover > td {
|
||||
background: color-mix(in srgb, var(--foreground) 2.5%, var(--background)) !important;
|
||||
}
|
||||
|
||||
/* ===== AI Markdown ===== */
|
||||
|
||||
.ai-message-markdown {
|
||||
min-width: 0;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
line-height: 1.7;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.ai-message-markdown > :first-child { margin-top: 0; }
|
||||
.ai-message-markdown > :last-child { margin-bottom: 0; }
|
||||
.ai-message-markdown-heading {
|
||||
margin: 1.15em 0 0.42em;
|
||||
color: inherit;
|
||||
font-weight: 650;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.ai-message-markdown-heading-1 { font-size: 1.18em; }
|
||||
.ai-message-markdown-heading-2 { font-size: 1.08em; }
|
||||
.ai-message-markdown-heading-3,
|
||||
.ai-message-markdown-heading-4 { font-size: 1em; }
|
||||
.ai-message-markdown-paragraph { margin: 0.5em 0; }
|
||||
.ai-message-markdown-list {
|
||||
margin: 0.55em 0;
|
||||
padding-left: 1.35em;
|
||||
}
|
||||
.ai-message-markdown-list-unordered { list-style: disc; }
|
||||
.ai-message-markdown-list-ordered { list-style: decimal; }
|
||||
.ai-message-markdown-list-item { padding-left: 0.15em; }
|
||||
.ai-message-markdown-list-item + .ai-message-markdown-list-item { margin-top: 0.22em; }
|
||||
.ai-message-markdown-list-item > .ai-message-markdown-list { margin-top: 0.25em; margin-bottom: 0.25em; }
|
||||
.ai-message-markdown-blockquote {
|
||||
margin: 0.75em 0;
|
||||
padding: 0.1em 0 0.1em 0.85em;
|
||||
border-left: 2px solid color-mix(in srgb, currentColor 24%, transparent);
|
||||
color: color-mix(in srgb, currentColor 74%, transparent);
|
||||
}
|
||||
.ai-message-markdown-code {
|
||||
padding: 0.12em 0.34em;
|
||||
border-radius: var(--r-sm);
|
||||
background: color-mix(in srgb, currentColor 9%, transparent);
|
||||
color: inherit;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 0.88em;
|
||||
}
|
||||
.ai-message-markdown-pre {
|
||||
margin: 0.8em 0;
|
||||
padding: 0.8em 0.9em;
|
||||
overflow-x: auto;
|
||||
border-radius: var(--r-sm);
|
||||
background: color-mix(in srgb, var(--foreground) 7%, var(--background));
|
||||
color: color-mix(in srgb, var(--foreground) 86%, transparent);
|
||||
font-size: 0.84em;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.ai-message-markdown-pre .ai-message-markdown-code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
font-size: inherit;
|
||||
}
|
||||
.ai-message-markdown-link {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.ai-message-markdown-link:hover { text-decoration-color: currentColor; }
|
||||
.ai-message-markdown-rule {
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
|
||||
}
|
||||
.ai-message-markdown-table-wrap {
|
||||
max-width: 100%;
|
||||
margin: 0.8em 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.ai-message-markdown-table {
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
.ai-message-markdown-table-cell {
|
||||
padding: 0.48em 0.65em;
|
||||
border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ai-message-markdown-table-header {
|
||||
color: color-mix(in srgb, currentColor 82%, transparent);
|
||||
font-weight: 620;
|
||||
background: color-mix(in srgb, currentColor 5%, transparent);
|
||||
}
|
||||
.ai-message-markdown-task {
|
||||
width: 0.9em;
|
||||
height: 0.9em;
|
||||
margin: 0 0.35em 0 0;
|
||||
vertical-align: -0.08em;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user