diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx index 73c29b602..200455f2f 100644 --- a/components/canvas/CanvasChatPanel.tsx +++ b/components/canvas/CanvasChatPanel.tsx @@ -1689,6 +1689,7 @@ export function CanvasChatPanel({ workflowContext = null, presentation = "panel", }: CanvasChatPanelProps) { + const isWorkspacePresentation = presentation === "workspace"; const { data: session } = useSession(); const [input, setInput] = useState(""); const [attachments, setAttachments] = useState([]); @@ -2836,6 +2837,12 @@ export function CanvasChatPanel({ setSelectedSkillTagId(null); } }, [canvasSkillTags, selectedSkillTagId]); + + useEffect(() => { + if (!isWorkspacePresentation) return; + if (!selectedSkillTagId) return; + setSelectedSkillTagId(null); + }, [isWorkspacePresentation, selectedSkillTagId]); const VIDEO_PROVIDER_TYPES = new Set(["volcano-video", "doubao-video", "qianwen-video", "fal-video", "ruxa-video"]); const visualModels = useMemo(() => { @@ -7673,16 +7680,22 @@ export function CanvasChatPanel({ input.trim() || attachments.length > 0 || (!isDetailGenerationMode && selectedSkillTag) ); const hasEnoughAgentUploads = !hasAgentUploadSlots || attachments.length >= agentRequiredUploadCount; - const composerPlaceholder = isDetailGenerationMode - ? "可选补充:风格、情绪氛围、禁用元素、期望生成张数(如:生成8张)" - : activeComposerMode === "agent" && selectedAgentPreset?.type === "text" - ? "可上传图片做分析,也可直接输入文案需求" - : hasAgentUploadSlots - ? "请先上传产品图1、产品图2、模特图,再补充说明" - : selectedSkillTag?.placeholder?.trim() || - (selectedSkillTag - ? `请输入「${selectedSkillTag.name}」相关需求` - : canvasDynamicPlaceholder || "请输入你的设计需求,例如:绿色椅子 替换 Image"); + const composerPlaceholder = isWorkspacePresentation + ? isDetailGenerationMode + ? "可选补充:风格、情绪氛围、禁用元素、期望生成张数(如:生成8张)" + : hasAgentUploadSlots + ? "可选补充本次生图要求,例如:高级感、暖灰色、近景特写、生成3张。" + : "可选补充本次生成要求,例如:更高级、更生活化、暖调灯光。" + : isDetailGenerationMode + ? "可选补充:风格、情绪氛围、禁用元素、期望生成张数(如:生成8张)" + : activeComposerMode === "agent" && selectedAgentPreset?.type === "text" + ? "可上传图片做分析,也可直接输入文案需求" + : hasAgentUploadSlots + ? "请先上传产品图1、产品图2、模特图,再补充说明" + : selectedSkillTag?.placeholder?.trim() || + (selectedSkillTag + ? `请输入「${selectedSkillTag.name}」相关需求` + : canvasDynamicPlaceholder || "请输入你的设计需求,例如:绿色椅子 替换 Image"); const detailProductCount = DETAIL_PRODUCT_SLOT_INDEXES.filter((index) => Boolean(detailSlots[index]?.url)).length; const detailModelReady = DETAIL_MODEL_SLOT_INDEX >= 0 ? Boolean(detailSlots[DETAIL_MODEL_SLOT_INDEX]?.url) : false; const detailBundleCount = DETAIL_BUNDLE_SLOT_INDEXES.filter((index) => Boolean(detailSlots[index]?.url)).length; @@ -7798,6 +7811,16 @@ export function CanvasChatPanel({ renderableVisibleMessages.length === 0 && !isLoading && !shouldShowImageLoading; + const workspaceEmptyTitle = !selectedAgentPresetId + ? "请先在左侧选择生图模式" + : hasAgentUploadSlots && attachments.length < agentRequiredUploadCount + ? `请先补齐图片槽位(${attachments.length}/${agentRequiredUploadCount})` + : "准备开始生成"; + const workspaceEmptyDescription = !selectedAgentPresetId + ? "选择生图模式后,这里会显示生成结果。" + : hasAgentUploadSlots && attachments.length < agentRequiredUploadCount + ? "从左侧 SKU / SPU 获取图片,或在下方继续上传替换后,再点击开始生成。" + : "可在下方补充要求后点击开始生成,结果会显示在这里。"; const renderModelSelectContent = () => ( @@ -7884,7 +7907,6 @@ export function CanvasChatPanel({ const fallbackTitle = String(projectTitle || "").trim(); return fallbackTitle || "未命名画布"; }, [activeSessionTitle, projectTitle]); - const isWorkspacePresentation = presentation === "workspace"; return (
- {!isDetailGenerationMode && renderableVisibleMessages.length === 0 && ( -
- {/* Greeting */} -
-

- Hi - {greetingUserName ? ( - <> - , - {greetingUserName} - {greetingPeriodText} - - ) : ( - {greetingPeriodText} - )} -

-

- 开始创作吧! - {Number.isFinite(totalGeneratedImages) ? ( - <> - {" "}累计为你生成了{" "} - - {totalGeneratedImages.toLocaleString()} - {" "} - 张图。 - - ) : null} -

-
- - {canvasSkillTags.length > 0 && ( -
-
-

{canvasSkillTagsTitle}

+ {!isDetailGenerationMode && renderableVisibleMessages.length === 0 ? ( + isWorkspacePresentation ? ( +
+
+
+
-
- {canvasSkillTags.map((tag) => { - const isActive = selectedSkillTag?.id === tag.id; - const TagIcon = getCanvasSkillIconComponent(tag.iconName); - return ( - - ); - })} -
+ {attachment.name { + if (event.currentTarget.src !== attachment.url) { + event.currentTarget.src = attachment.url; + } + }} + /> +
+ ))} +
+ ) : null}
- )} - - {/* Refresh - Removed */} -
- )} +
+ ) : ( +
+
+

+ Hi + {greetingUserName ? ( + <> + , + {greetingUserName} + {greetingPeriodText} + + ) : ( + {greetingPeriodText} + )} +

+

+ 开始创作吧! + {Number.isFinite(totalGeneratedImages) ? ( + <> + {" "}累计为你生成了{" "} + + {totalGeneratedImages.toLocaleString()} + {" "} + 张图。 + + ) : null} +

+
+ + {canvasSkillTags.length > 0 && ( +
+
+

{canvasSkillTagsTitle}

+
+
+ {canvasSkillTags.map((tag) => { + const isActive = selectedSkillTag?.id === tag.id; + const TagIcon = getCanvasSkillIconComponent(tag.iconName); + return ( + + ); + })} +
+
+ )} +
+ ) + ) : null} {renderableVisibleMessages.map((message, index) => { const assistantTextParts = message.role === "assistant" @@ -8196,6 +8254,12 @@ export function CanvasChatPanel({ (vote) => vote.messageId === message.id ); const isVotingCurrentMessage = votingMessageId === message.id; + + if (isWorkspacePresentation) { + if (message.role !== "assistant" || !hasAssistantMedia) { + return null; + } + } return (
@@ -8644,7 +8708,7 @@ export function CanvasChatPanel({ document.body )} - {shouldShowCanvasBanner ? ( + {!isWorkspacePresentation && shouldShowCanvasBanner ? (
+ {isWorkspacePresentation && !isDetailGenerationMode ? ( +
+
补充要求
+
+ 这里填写本次生图补充要求。图片槽位和生成结果都在当前工作台内完成,不再使用聊天对话方式。 +
+
+ ) : null} {isDetailGenerationMode && (
- {!isDetailGenerationMode && selectedSkillTag && ( + {!isWorkspacePresentation && !isDetailGenerationMode && selectedSkillTag && (
@@ -9714,92 +9786,94 @@ export function CanvasChatPanel({ }} /> ))} - - - - - - handleSelectGenerationMode("agent")} - className={cn( - "h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium text-[#2e3238]", - activeComposerMode === "agent" ? "bg-white/80" : "hover:bg-white/70" - )} - > - - Agent - {activeComposerMode === "agent" ? : null} - - {aiDetailGenerationEnabled ? ( - handleSelectGenerationMode("detail")} + {!isWorkspacePresentation ? ( + + + + + + handleSelectGenerationMode("agent")} + className={cn( + "h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium text-[#2e3238]", + activeComposerMode === "agent" ? "bg-white/80" : "hover:bg-white/70" + )} + > + + Agent + {activeComposerMode === "agent" ? : null} - ) : null} - handleSelectGenerationMode("image")} - className={cn( - "h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium text-[#2e3238]", - activeComposerMode === "image" ? "bg-white/80" : "hover:bg-white/70" - )} - > - - 图像生成 - {activeComposerMode === "image" ? : null} - - handleSelectGenerationMode("video")} - className={cn( - "h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium text-[#2e3238]", - activeComposerMode === "video" ? "bg-white/80" : "hover:bg-white/70" - )} - > - - - + {aiDetailGenerationEnabled ? ( + handleSelectGenerationMode("detail")} + className={cn( + "h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium text-[#2e3238]", + activeComposerMode === "detail" ? "bg-white/80" : "hover:bg-white/70" + )} + > + + AI详情生成 + {activeComposerMode === "detail" ? : null} + + ) : null} + handleSelectGenerationMode("image")} + className={cn( + "h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium text-[#2e3238]", + activeComposerMode === "image" ? "bg-white/80" : "hover:bg-white/70" + )} + > + + 图像生成 + {activeComposerMode === "image" ? : null} + + handleSelectGenerationMode("video")} + className={cn( + "h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium text-[#2e3238]", + activeComposerMode === "video" ? "bg-white/80" : "hover:bg-white/70" + )} + > + + + + ) : null} - {!isDetailGenerationMode && (!isVideoModel || showVideoAttachmentButton) && ( + {!isWorkspacePresentation && !isDetailGenerationMode && (!isVideoModel || showVideoAttachmentButton) && (