dsh-image-gen 0.2.2 → 0.2.4

package/lib/client.js

@@ -52,7 +52,7 @@ window.__ModuleLoader__.load({
 			}
 			if (!isRecord(value) || Object.keys(value).length === 0) throw new Error("ComfyUI workflow must be a non-empty API-format JSON object");
 			if (!Object.values(value).some((node) => {
-				const inputs = record(node)?.inputs;
+				const inputs = record$1(node)?.inputs;
 				return inputs !== void 0 && containsPromptPlaceholder(inputs);
 			})) throw new Error(`ComfyUI workflow must contain ${COMFYUI_PROMPT_PLACEHOLDER} in a text input`);
 			return value;
@@ -65,7 +65,7 @@ window.__ModuleLoader__.load({
 		function isRecord(value) {
 			return typeof value === "object" && value !== null && !Array.isArray(value);
 		}
-		function record(value) {
+		function record$1(value) {
 			return isRecord(value) ? value : void 0;
 		}
 		//#endregion
@@ -928,8 +928,146 @@ window.__ModuleLoader__.load({
 			}
 		}
 		//#endregion
+		//#region lib/types/client/image-ref.js
+		/**
+		* Extract the verified durable image attachment from a completed tool result block.
+		* Supports legacy rc.2 `resultView.content` and modern DSH `block.content`.
+		*/
+		function imageRef(block) {
+			if (!("kind" in block)) return void 0;
+			const fromResultView = block.resultView?.card === "generic" ? block.resultView.content?.find((item) => item.type === "image") : void 0;
+			if (fromResultView?.type === "image") return fromResultView.attachment;
+			const fromBlockContent = Array.isArray(block.content) ? block.content.find((item) => item.type === "image") : void 0;
+			if (fromBlockContent?.type === "image") return fromBlockContent.attachment;
+		}
+		//#endregion
+		//#region lib/types/client/image-result-node.js
+		const IMAGE_RESULT_NODE_KIND = "dsh-image-result";
+		/** One image result row per Turn, re-anchored to Turn end after the final answer settles. */
+		const imageResultDefinition = {
+			kind: IMAGE_RESULT_NODE_KIND,
+			target: "chat",
+			match: (event) => {
+				const turn = eventTurn(event);
+				if (turn === void 0) return null;
+				if (event.type === "turn/start") return {
+					id: String(turn),
+					role: "start"
+				};
+				if (event.type === "turn/end") return {
+					id: String(turn),
+					role: "update"
+				};
+				if (event.type === "assistant/message") return {
+					id: String(turn),
+					role: "update"
+				};
+				if (event.type === "tool/result" && imageResultFromMeta(event.data.meta) !== void 0) return {
+					id: String(turn),
+					role: "update"
+				};
+				return null;
+			},
+			start: (_context, match) => {
+				const turn = eventTurn(match.event);
+				if (match.event.type !== "turn/start" || turn === void 0) throw new Error("dsh-image-result start requires turn/start");
+				return {
+					turn,
+					results: []
+				};
+			},
+			update: (context, match) => {
+				if (match.event.type === "turn/end") return {
+					...context.state,
+					endSeq: match.event.seq
+				};
+				if (match.event.type === "assistant/message") return {
+					...context.state,
+					answerSeq: match.event.seq
+				};
+				if (match.event.type !== "tool/result") return context.state;
+				const result = imageResultFromMeta(match.event.data.meta);
+				if (result === void 0) return context.state;
+				if (context.state.results.some((candidate) => candidate.attachment.attachmentId === result.attachment.attachmentId)) return context.state;
+				return {
+					...context.state,
+					results: [...context.state.results, {
+						...result,
+						seq: match.event.seq
+					}]
+				};
+			},
+			buildViewNode: (context) => {
+				const state = context.state;
+				const last = state?.results.at(-1);
+				if (state === void 0 || last === void 0) return null;
+				const location = context.matches.at(-1)?.location ?? context.start?.location ?? { kind: "unresolved" };
+				return {
+					key: context.key,
+					kind: IMAGE_RESULT_NODE_KIND,
+					id: context.id,
+					target: "chat",
+					anchorSeq: state.answerSeq ?? state.endSeq ?? last.seq,
+					location,
+					visibility: "visible",
+					data: {
+						turn: state.turn,
+						results: state.results.map(({ seq: _seq, ...result }) => result)
+					}
+				};
+			}
+		};
+		/** Parse the plugin-owned durable presentation metadata from a Tool result event. */
+		function imageResultFromMeta(value) {
+			const meta = record(value);
+			if (meta?.kind !== "dsh-image-gen") return void 0;
+			const attachment = imageAttachment(meta.attachment);
+			if (attachment === void 0) return void 0;
+			return {
+				attachment,
+				prompt: stringValue(meta.prompt, "Generated Image"),
+				provider: stringValue(meta.provider, "google"),
+				model: stringValue(meta.model, ""),
+				output: stringValue(meta.output, ""),
+				...typeof meta.savedTo === "string" ? { savedTo: meta.savedTo } : {}
+			};
+		}
+		function eventTurn(event) {
+			const turn = event.data.turn;
+			return typeof turn === "number" && Number.isSafeInteger(turn) && turn >= 0 ? turn : void 0;
+		}
+		function imageAttachment(value) {
+			const candidate = record(value);
+			if (candidate === void 0 || typeof candidate.attachmentId !== "string" || !isImageMediaType(candidate.mediaType) || !positiveInteger(candidate.bytes) || !positiveInteger(candidate.width) || !positiveInteger(candidate.height)) return void 0;
+			const original = record(candidate.originalDimensions);
+			if (candidate.originalDimensions !== void 0 && (original === void 0 || !positiveInteger(original.width) || !positiveInteger(original.height))) return void 0;
+			return {
+				attachmentId: candidate.attachmentId,
+				mediaType: candidate.mediaType,
+				bytes: candidate.bytes,
+				width: candidate.width,
+				height: candidate.height,
+				...typeof candidate.name === "string" ? { name: candidate.name } : {},
+				...original === void 0 ? {} : { originalDimensions: {
+					width: original.width,
+					height: original.height
+				} }
+			};
+		}
+		function isImageMediaType(value) {
+			return value === "image/png" || value === "image/jpeg" || value === "image/webp" || value === "image/gif";
+		}
+		function positiveInteger(value) {
+			return typeof value === "number" && Number.isSafeInteger(value) && value > 0;
+		}
+		function stringValue(value, fallback) {
+			return typeof value === "string" ? value : fallback;
+		}
+		function record(value) {
+			return typeof value === "object" && value !== null && !Array.isArray(value) ? value : void 0;
+		}
+		//#endregion
 		//#region lib/types/client/index.js
-		/** Web settings and generated-image cards contributed by the Bundle. */
 		const KEY_REF = {
 			google: "GEMINI_API_KEY",
 			openai: "OPENAI_API_KEY",
@@ -982,6 +1120,7 @@ window.__ModuleLoader__.load({
 				loading: "正在加载图片…",
 				loadFailed: "图片读取失败 ({status})",
 				generatedTitle: "已生成图片",
+				resultShown: "图片结果已显示在对话中",
 				copyImg: "复制图片",
 				download: "下载图片",
 				openNewTab: "新标签页打开",
@@ -1033,6 +1172,7 @@ window.__ModuleLoader__.load({
 				loading: "Loading image…",
 				loadFailed: "Failed to load image ({status})",
 				generatedTitle: "Generated image",
+				resultShown: "Image result is shown in the conversation",
 				copyImg: "Copy Image",
 				download: "Download Image",
 				openNewTab: "Open in new tab",
@@ -1074,6 +1214,7 @@ window.__ModuleLoader__.load({
 .dsh-ig-save:disabled{opacity:.4;cursor:default}
 
 .dsh-ig-result{display:grid;gap:10px;max-width:520px}
+.dsh-ig-promoted-results{display:grid;gap:16px}
 .dsh-ig-result-title{font-size:14px;font-weight:600}
 .dsh-ig-container{position:relative;display:inline-block;width:fit-content;max-width:100%;justify-self:start;border-radius:12px;overflow:hidden;line-height:0}
 .dsh-ig-container:hover .dsh-ig-toolbar{opacity:1;pointer-events:auto}
@@ -1145,8 +1286,8 @@ window.__ModuleLoader__.load({
 		/** Required browser services. */
 		const inject = [
 			"slots",
+			"connection",
 			"remote",
-			"remote.credentials",
 			"settingsScope",
 			"locale"
 		];
@@ -1154,7 +1295,7 @@ window.__ModuleLoader__.load({
 		function apply(ctx) {
 			const scope = ctx.settingsScope.bind({ namespace: IMAGE_GENERATION_NAMESPACE });
 			const locale = ctx.get("locale");
-			const credentials = ctx.remote.credentials;
+			const promotion = { enabled: false };
 			ctx.effect(() => {
 				const style = document.createElement("style");
 				style.dataset.plugin = "dsh-image-gen";
@@ -1165,24 +1306,54 @@ window.__ModuleLoader__.load({
 				};
 			}, "dsh-image-gen: styles");
 			const register = ctx.slots.register.bind(ctx.slots);
-			ctx.slots.inject("settings.plugin.item", () => register({
-				name: "settings.plugin.item",
-				key: IMAGE_GENERATION_NAMESPACE,
-				inject: () => ({
-					scope,
-					credentials,
-					locale
-				})
-			}, ImageGenerationSettingsCard));
+			ctx.inject(["uiConversation"], (owner) => {
+				const uiConversation = asModernUiConversation(owner.get("uiConversation"));
+				if (uiConversation === void 0) throw new Error("dsh-image-gen: uiConversation has an incompatible interface");
+				promotion.enabled = true;
+				const ownerRegister = owner.slots.register.bind(owner.slots);
+				owner.effect(() => uiConversation.events.register(imageResultDefinition), "dsh-image-gen: promoted image result node");
+				owner.slots.inject("conversation.chat.node", () => ownerRegister({
+					name: "conversation.chat.node",
+					key: IMAGE_RESULT_NODE_KIND,
+					inject: () => ({ locale })
+				}, PromotedImageResultNode));
+			});
+			const injectSettingsItem = (owner, credentials) => {
+				const ownerRegister = owner.slots.register.bind(owner.slots);
+				owner.slots.inject("settings.plugin.item", () => ownerRegister({
+					name: "settings.plugin.item",
+					key: IMAGE_GENERATION_NAMESPACE,
+					inject: () => ({
+						scope,
+						credentials,
+						locale
+					})
+				}, ImageGenerationSettingsCard));
+			};
+			const remoteCredentials = asCredentialsRemote(ctx.get("remote.credentials"));
+			const legacyCredentials = credentialsFromLegacyConnection(ctx.get("connection"));
+			if (remoteCredentials !== void 0) injectSettingsItem(ctx, remoteCredentials);
+			else if (legacyCredentials !== void 0) injectSettingsItem(ctx, legacyCredentials);
+			else ctx.inject(["remote.credentials"], (remoteCtx) => {
+				const credentials = asCredentialsRemote(remoteCtx.get("remote.credentials"));
+				if (credentials === void 0) throw new Error("dsh-image-gen: remote.credentials has an incompatible interface");
+				injectSettingsItem(remoteCtx, credentials);
+			});
 			ctx.slots.inject("tool.call.toolview", () => register({
 				name: "tool.call.toolview",
 				key: "generate_image",
-				inject: () => ({ locale })
+				inject: () => ({
+					locale,
+					promoted: promotion.enabled
+				})
 			}, GeneratedImageCard));
 			ctx.slots.inject("tool.call.toolview", () => register({
 				name: "tool.call.toolview",
 				key: "edit_image",
-				inject: () => ({ locale })
+				inject: () => ({
+					locale,
+					promoted: promotion.enabled
+				})
 			}, GeneratedImageCard));
 			ctx.slots.inject("conversation.view", () => register({
 				name: "conversation.view",
@@ -1194,6 +1365,42 @@ window.__ModuleLoader__.load({
 				inject: () => ({ locale })
 			}, GalleryViewTab));
 		}
+		function asModernUiConversation(value) {
+			if (value === null || typeof value !== "object") return void 0;
+			const events = value.events;
+			if (events === null || typeof events !== "object") return void 0;
+			return typeof events.register === "function" ? value : void 0;
+		}
+		function asCredentialsRemote(value) {
+			if (value === null || typeof value !== "object") return void 0;
+			const candidate = value;
+			return typeof candidate.describe === "function" && typeof candidate.set === "function" ? candidate : void 0;
+		}
+		function credentialsFromLegacyConnection(value) {
+			if (value === null || typeof value !== "object") return void 0;
+			const credentials = value.api?.credentials;
+			if (credentials === void 0 || typeof credentials.describe !== "function" || typeof credentials.set !== "function") return void 0;
+			const legacy = credentials;
+			return {
+				async describe(refs) {
+					const response = await legacy.describe({ refs });
+					return response.result.ok ? {
+						ok: true,
+						value: response.result.value.credentials
+					} : { ok: false };
+				},
+				async set(ref, credentialValue) {
+					const response = await legacy.set({
+						ref,
+						value: credentialValue
+					});
+					return response.result.ok ? { ok: true } : {
+						ok: false,
+						error: response.result.error
+					};
+				}
+			};
+		}
 		/** Edit provider settings and its write-only API credential. */
 		function ImageGenerationSettingsCard(props) {
 			const [open, setOpen] = (0, react.useState)(false);
@@ -1576,43 +1783,57 @@ window.__ModuleLoader__.load({
 				}) : null]
 			});
 		}
-		/** Render the durable attachment referenced by a completed image tool call. */
+		/** Keep the legacy Tool row for old DSH and hand modern results to the independent Chat node. */
 		function GeneratedImageCard(props) {
-			const attachment = imageRef(props.block);
-			const savedTo = imageSavedTo(props.block);
+			const result = imageResultFromBlock(props.block);
+			if (props.promoted && result !== void 0) return (0, react_jsx_runtime.jsx)(PromotedResultNotice, { locale: props.locale });
+			return (0, react_jsx_runtime.jsx)(ImageResultCard, {
+				result,
+				locale: props.locale
+			});
+		}
+		/** Render modern image artifacts as final conversation output instead of Tool process content. */
+		function PromotedImageResultNode(props) {
+			return (0, react_jsx_runtime.jsx)("div", {
+				className: "dsh-ig-promoted-results",
+				children: props.node.data.results.map((result) => (0, react_jsx_runtime.jsx)(ImageResultCard, {
+					result,
+					locale: props.locale
+				}, result.attachment.attachmentId))
+			});
+		}
+		function PromotedResultNotice({ locale }) {
+			const lang = usePluginLanguage(locale);
+			return (0, react_jsx_runtime.jsx)("div", {
+				className: "dsh-ig-loading",
+				children: DICT[lang].resultShown
+			});
+		}
+		function ImageResultCard({ result, locale }) {
+			const attachment = result?.attachment;
+			const savedTo = result?.savedTo;
 			const [url, setUrl] = (0, react.useState)();
 			const [blob, setBlob] = (0, react.useState)();
 			const [error, setError] = (0, react.useState)();
 			const [previewOpen, setPreviewOpen] = (0, react.useState)(false);
 			const [toast, setToast] = (0, react.useState)();
-			const [lang, setLang] = (0, react.useState)(() => props.locale?.getSnapshot?.()?.active?.startsWith("en") ? "en" : "zh");
-			(0, react.useEffect)(() => {
-				return props.locale?.subscribe?.(() => {
-					setLang(props.locale?.getSnapshot?.()?.active?.startsWith("en") ? "en" : "zh");
-				});
-			}, [props.locale]);
+			const lang = usePluginLanguage(locale);
 			const t = (keyName, params) => {
 				let text = (lang === "en" ? DICT.en : DICT.zh)[keyName] || DICT.zh[keyName] || keyName;
 				if (params) for (const [k, v] of Object.entries(params)) text = text.replace(`{${k}}`, v);
 				return text;
 			};
 			(0, react.useEffect)(() => {
-				if (attachment === void 0) return;
-				const blockAny = props.block;
-				const meta = blockAny.meta ?? blockAny.resultView?.meta;
-				const prompt = typeof meta?.prompt === "string" ? meta.prompt : blockAny.call?.args?.prompt ?? "Generated Image";
-				const provider = typeof meta?.provider === "string" ? meta.provider : "google";
-				const model = typeof meta?.model === "string" ? meta.model : "";
-				const output = typeof meta?.output === "string" ? meta.output : "";
+				if (result === void 0) return;
 				saveGalleryItem({
-					id: attachment.attachmentId,
-					attachment,
-					prompt,
-					provider,
-					model,
-					output
+					id: result.attachment.attachmentId,
+					attachment: result.attachment,
+					prompt: result.prompt,
+					provider: result.provider,
+					model: result.model,
+					output: result.output
 				});
-			}, [attachment?.attachmentId]);
+			}, [result?.attachment.attachmentId]);
 			(0, react.useEffect)(() => {
 				if (!previewOpen) return;
 				const onKeyDown = (e) => {
@@ -1816,6 +2037,27 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		function usePluginLanguage(locale) {
+			const [lang, setLang] = (0, react.useState)(() => locale?.getSnapshot?.()?.active?.startsWith("en") ? "en" : "zh");
+			(0, react.useEffect)(() => locale?.subscribe?.(() => {
+				setLang(locale?.getSnapshot?.()?.active?.startsWith("en") ? "en" : "zh");
+			}), [locale]);
+			return lang;
+		}
+		function imageResultFromBlock(block) {
+			const attachment = imageRef(block);
+			if (attachment === void 0) return void 0;
+			const blockValue = block;
+			const meta = blockValue.meta ?? blockValue.resultView?.meta;
+			return {
+				attachment,
+				prompt: typeof meta?.prompt === "string" ? meta.prompt : blockValue.call?.args?.prompt ?? "Generated Image",
+				provider: typeof meta?.provider === "string" ? meta.provider : "google",
+				model: typeof meta?.model === "string" ? meta.model : "",
+				output: typeof meta?.output === "string" ? meta.output : "",
+				...typeof meta?.savedTo === "string" ? { savedTo: meta.savedTo } : {}
+			};
+		}
 		function modelOf(provider, value) {
 			const stored = provider === "google" ? value?.googleModel : provider === "openai" ? value?.openaiModel : provider === "seedream" ? value?.seedreamModel : provider === "dashscope" ? value?.dashscopeModel : value?.comfyuiWorkflowName;
 			return typeof stored === "string" && stored.length > 0 ? stored : DEFAULT_MODELS[provider];
@@ -1824,20 +2066,10 @@ window.__ModuleLoader__.load({
 			const stored = provider === "google" ? value?.googleEndpoint : provider === "openai" ? value?.openaiBaseURL : provider === "seedream" ? value?.seedreamBaseURL : provider === "dashscope" ? value?.dashscopeEndpoint : value?.comfyuiBaseURL;
 			return typeof stored === "string" && stored.length > 0 ? stored : DEFAULT_BASE_URLS[provider];
 		}
-		function imageRef(block) {
-			if (!("kind" in block) || block.resultView?.card !== "generic") return void 0;
-			const image = block.resultView.content?.find((item) => item.type === "image");
-			return image?.type === "image" ? image.attachment : void 0;
-		}
-		/** The workspace file path a completed image call saved, when the result meta carries one. */
-		function imageSavedTo(block) {
-			if (!("kind" in block)) return void 0;
-			const meta = block.meta ?? block.resultView?.meta;
-			return typeof meta?.savedTo === "string" ? meta.savedTo : void 0;
-		}
 		//#endregion
 		exports.GeneratedImageCard = GeneratedImageCard;
 		exports.ImageGenerationSettingsCard = ImageGenerationSettingsCard;
+		exports.PromotedImageResultNode = PromotedImageResultNode;
 		exports.apply = apply;
 		exports.inject = inject;
 		return module.exports;