dsh-image-gen 0.1.1 → 0.1.3

package/lib/client.js

@@ -34,24 +34,114 @@ window.__ModuleLoader__.load({
 			openai: "OPENAI_API_KEY",
 			seedream: "ARK_API_KEY"
 		};
-		const PROVIDER_LABEL = {
-			google: "Google Gemini",
-			openai: "OpenAI / 中转站",
-			seedream: "字节 Seedream"
+		const DICT = {
+			zh: {
+				title: "图像生成",
+				description: "选择厂商并配置生图模型。",
+				provider: "Provider",
+				providerGoogle: "Google Gemini",
+				providerOpenAI: "OpenAI / 中转站",
+				providerSeedream: "字节 Seedream",
+				apiKeyLabel: "{provider} API Key",
+				apiKeyPlaceholder: "留空即可保留已配置的 Key",
+				apiKeyHint: "安全保存为 {key}；页面不会读回明文。",
+				endpoint: "接口地址",
+				reset: "重置",
+				resetTitle: "重置为默认官方地址",
+				endpointHintGoogle: "Google 官方地址或反代端点（全路径）。",
+				endpointHintOpenAI: "中转站请填其 OpenAI 兼容的 /v1 地址。",
+				endpointHintSeedream: "火山方舟兼容的 /api/v3 地址。",
+				model: "模型",
+				saving: "保存中…",
+				save: "保存",
+				saved: "已保存",
+				checkingKey: "正在检查 API Key…",
+				keyConfigured: "已配置 API Key",
+				keyNotConfigured: "尚未配置 API Key",
+				generating: "正在生成图片…",
+				loading: "正在加载图片…",
+				loadFailed: "图片读取失败 ({status})",
+				generatedTitle: "Generated image"
+			},
+			en: {
+				title: "Image Generation",
+				description: "Select provider and configure image generation models.",
+				provider: "Provider",
+				providerGoogle: "Google Gemini",
+				providerOpenAI: "OpenAI / Relay",
+				providerSeedream: "ByteDance Seedream",
+				apiKeyLabel: "{provider} API Key",
+				apiKeyPlaceholder: "Leave empty to keep configured key",
+				apiKeyHint: "Securely saved as {key}; never read back in plaintext.",
+				endpoint: "Endpoint / Base URL",
+				reset: "Reset",
+				resetTitle: "Reset to official default URL",
+				endpointHintGoogle: "Official Google endpoint or reverse proxy (full path).",
+				endpointHintOpenAI: "OpenAI-compatible /v1 base URL for relays.",
+				endpointHintSeedream: "Volcengine Ark compatible /api/v3 base URL.",
+				model: "Model",
+				saving: "Saving…",
+				save: "Save",
+				saved: "Saved",
+				checkingKey: "Checking API Key…",
+				keyConfigured: "API Key configured",
+				keyNotConfigured: "API Key not configured",
+				generating: "Generating image…",
+				loading: "Loading image…",
+				loadFailed: "Failed to load image ({status})",
+				generatedTitle: "Generated image"
+			}
 		};
 		const STYLE = `
-.dsh-ig-card{list-style:none;border:1px solid var(--border-color,#e5e7eb);border-radius:14px;background:var(--surface-color,#fff);overflow:hidden}.dsh-ig-head{width:100%;padding:18px 20px;border:0;background:transparent;text-align:left;cursor:pointer;display:flex;justify-content:space-between;gap:16px;color:inherit}.dsh-ig-title{display:block;font-size:16px;font-weight:650}.dsh-ig-desc{display:block;margin-top:5px;color:#7b818b;font-size:14px}.dsh-ig-body{padding:0 20px 20px;border-top:1px solid var(--border-color,#eee)}.dsh-ig-field{display:grid;gap:7px;margin-top:18px}.dsh-ig-label{font-size:14px;font-weight:600}.dsh-ig-input{box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid #d7dbe0;border-radius:9px;background:transparent;color:inherit}.dsh-ig-input-group{display:flex;gap:8px;align-items:center}.dsh-ig-btn-reset{padding:9px 14px;border:1px solid #d7dbe0;border-radius:9px;background:var(--surface-color,#f9fafb);color:inherit;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .15s}.dsh-ig-btn-reset:hover{background:#edf0f3}.dsh-ig-hint,.dsh-ig-status{margin:0;color:#7b818b;font-size:12px}.dsh-ig-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.dsh-ig-save{border:0;border-radius:9px;padding:9px 16px;background:#4c78ff;color:#fff;cursor:pointer}.dsh-ig-save:disabled{opacity:.55;cursor:default}.dsh-ig-result{display:grid;gap:10px;max-width:520px}.dsh-ig-result-title{font-size:14px;font-weight:600}.dsh-ig-image{display:block;max-width:100%;max-height:520px;border-radius:14px;background:#f2f3f5}.dsh-ig-error{color:#d33;font-size:13px}.dsh-ig-loading{color:#7b818b;font-size:13px}`;
+.dsh-ig-card{list-style:none;border:1px solid var(--dsw-alias-border-l2,#e5e7eb);border-radius:12px;background:var(--dsw-alias-bg-layer-3,#fff);transition:border-color .16s,background .16s;overflow:hidden}
+.dsh-ig-card:hover{border-color:var(--dsw-alias-label-dimmed,#9ca3af)}
+.dsh-ig-card-open{background:var(--dsw-alias-bg-layer-2,#fff);border-color:var(--dsw-alias-label-dimmed,#9ca3af)}
+.dsh-ig-head{width:100%;appearance:none;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px}
+.dsh-ig-head:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#4c78ff);outline-offset:-2px}
+.dsh-ig-head-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
+.dsh-ig-title{display:block;font-size:15px;font-weight:600;line-height:1.4;color:var(--dsw-alias-label-primary,inherit)}
+.dsh-ig-desc{display:block;font-size:13px;line-height:1.5;color:var(--dsw-alias-label-tertiary,#7b818b)}
+.dsh-ig-chevron{flex:none;color:var(--dsw-alias-label-tertiary,#7b818b);transition:transform .16s;display:inline-flex;align-items:center}
+.dsh-ig-chevron-open{transform:rotate(180deg)}
+.dsh-ig-body{border-top:1px solid var(--dsw-alias-border-l2,#eee);padding:0 16px 16px}
+.dsh-ig-field{display:grid;gap:6px;margin-top:14px}
+.dsh-ig-label{font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary,inherit)}
+.dsh-ig-input{box-sizing:border-box;width:100%;padding:8px 12px;font-size:13px;border:1px solid var(--dsw-alias-border-l2,#d7dbe0);border-radius:8px;background:var(--dsw-alias-bg-layer-3,transparent);color:inherit;outline:none;transition:border-color .15s}
+.dsh-ig-input:focus{border-color:var(--dsw-alias-brand-primary,#4c78ff)}
+.dsh-ig-input-group{display:flex;gap:8px;align-items:center}
+.dsh-ig-btn-reset{appearance:none;border:1px solid var(--dsw-alias-border-l2,#d7dbe0);border-radius:8px;padding:7px 12px;background:var(--dsw-alias-bg-layer-3,#f9fafb);color:var(--dsw-alias-label-secondary,inherit);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
+.dsh-ig-btn-reset:hover{background:var(--dsw-alias-bg-layer-2,#edf0f3);border-color:var(--dsw-alias-label-dimmed,#9ca3af)}
+.dsh-ig-hint,.dsh-ig-status{margin:0;color:var(--dsw-alias-label-tertiary,#7b818b);font-size:12px;line-height:1.4}
+.dsh-ig-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--dsw-alias-border-l2,#eee)}
+.dsh-ig-save{appearance:none;border:0;border-radius:8px;padding:6px 16px;background:var(--dsw-alias-label-primary,#111827);color:var(--dsw-alias-bg-layer-3,#fff);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:opacity .15s}
+.dsh-ig-save:disabled{opacity:.4;cursor:default}
+.dsh-ig-result{display:grid;gap:10px;max-width:520px}
+.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}
+.dsh-ig-toolbar{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:5px;padding:3px 5px;border-radius:8px;background:rgba(0,0,0,0.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:10;line-height:1}
+.dsh-ig-tool-btn{appearance:none;border:0;background:transparent;color:#fff;padding:5px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
+.dsh-ig-tool-btn:hover{background:rgba(255,255,255,0.25)}
+.dsh-ig-toast{position:absolute;top:100%;left:0;margin-top:5px;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,0.85);color:#fff;font-size:11px;white-space:nowrap;pointer-events:none;z-index:20}
+.dsh-ig-image{display:block;max-width:100%;max-height:520px;border-radius:12px;background:#f2f3f5;cursor:pointer}
+.dsh-ig-modal{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;cursor:zoom-out;animation:dsh-ig-fade .15s ease-out}
+@keyframes dsh-ig-fade{from{opacity:0}to{opacity:1}}
+.dsh-ig-modal-img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,0.6);user-select:none;cursor:default}
+.dsh-ig-error{color:var(--dsw-alias-label-error,#d33);font-size:13px}
+.dsh-ig-loading{color:var(--dsw-alias-label-tertiary,#7b818b);font-size:13px}`;
 		/** Required browser services. */
 		const inject = [
 			"slots",
 			"connection",
 			"remote",
-			"settingsScope"
+			"settingsScope",
+			"locale"
 		];
 		/** Mount the settings card and generated-image card. */
 		function apply(ctx) {
 			const { api } = ctx.get("connection");
 			const scope = ctx.settingsScope.bind({ namespace: IMAGE_GENERATION_NAMESPACE });
+			const locale = ctx.get("locale");
 			ctx.effect(() => {
 				const style = document.createElement("style");
 				style.dataset.plugin = "dsh-image-gen";
@@ -66,9 +156,11 @@ window.__ModuleLoader__.load({
 				name: "settings.plugin.item",
 				key: IMAGE_GENERATION_NAMESPACE,
 				id: IMAGE_GENERATION_NAMESPACE,
+				order: 100,
 				inject: () => ({
 					scope,
-					credentials: api.credentials
+					credentials: api.credentials,
+					locale
 				})
 			}, ImageGenerationSettingsCard));
 			ctx.slots.inject("tool.call.toolview", () => ctx.slots.register({
@@ -80,6 +172,7 @@ window.__ModuleLoader__.load({
 		function ImageGenerationSettingsCard(props) {
 			const [open, setOpen] = (0, react.useState)(false);
 			const [snapshot, setSnapshot] = (0, react.useState)(() => props.scope.getSnapshot());
+			const [lang, setLang] = (0, react.useState)(() => props.locale?.getSnapshot?.()?.active ?? "zh");
 			const [provider, setProvider] = (0, react.useState)("google");
 			const [model, setModel] = (0, react.useState)("");
 			const [baseURL, setBaseURL] = (0, react.useState)("");
@@ -90,6 +183,21 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => props.scope.subscribe(() => {
 				setSnapshot(props.scope.getSnapshot());
 			}), [props.scope]);
+			(0, react.useEffect)(() => {
+				return props.locale?.subscribe?.(() => {
+					setLang(props.locale?.getSnapshot?.()?.active ?? "zh");
+				});
+			}, [props.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;
+			};
+			const providerLabels = {
+				google: t("providerGoogle"),
+				openai: t("providerOpenAI"),
+				seedream: t("providerSeedream")
+			};
 			(0, react.useEffect)(() => {
 				const value = snapshot.value;
 				const next = value?.provider ?? "google";
@@ -125,16 +233,16 @@ window.__ModuleLoader__.load({
 						setKey("");
 						setConfigured(true);
 					}
-					setMessage("已保存");
+					setMessage(t("saved"));
 				} catch (cause) {
 					setMessage(cause instanceof Error ? cause.message : String(cause));
 				} finally {
 					setSaving(false);
 				}
 			};
-			const keyStatus = configured === void 0 ? "正在检查 API Key…" : configured ? "已配置 API Key" : "尚未配置 API Key";
+			const keyStatus = configured === void 0 ? t("checkingKey") : configured ? t("keyConfigured") : t("keyNotConfigured");
 			return (0, react_jsx_runtime.jsxs)("li", {
-				className: "dsh-ig-card",
+				className: `dsh-ig-card ${open ? "dsh-ig-card-open" : ""}`,
 				children: [(0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
 					className: "dsh-ig-head",
@@ -142,15 +250,29 @@ window.__ModuleLoader__.load({
 					onClick: () => {
 						setOpen((value) => !value);
 					},
-					children: [(0, react_jsx_runtime.jsxs)("span", { children: [(0, react_jsx_runtime.jsx)("span", {
-						className: "dsh-ig-title",
-						children: "图像生成"
+					children: [(0, react_jsx_runtime.jsxs)("span", {
+						className: "dsh-ig-head-text",
+						children: [(0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-ig-title",
+							children: t("title")
+						}), (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-ig-desc",
+							children: t("description")
+						})]
 					}), (0, react_jsx_runtime.jsx)("span", {
-						className: "dsh-ig-desc",
-						children: "选择厂商并配置生图模型。"
-					})] }), (0, react_jsx_runtime.jsx)("span", {
+						className: `dsh-ig-chevron ${open ? "dsh-ig-chevron-open" : ""}`,
 						"aria-hidden": "true",
-						children: open ? "⌃" : "⌄"
+						children: (0, react_jsx_runtime.jsx)("svg", {
+							width: "14",
+							height: "14",
+							viewBox: "0 0 16 16",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							children: (0, react_jsx_runtime.jsx)("path", { d: "M4 6l4 4 4-4" })
+						})
 					})]
 				}), open ? (0, react_jsx_runtime.jsxs)("form", {
 					className: "dsh-ig-body",
@@ -163,7 +285,7 @@ window.__ModuleLoader__.load({
 							children: [
 								(0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-ig-label",
-									children: "Provider"
+									children: t("provider")
 								}),
 								(0, react_jsx_runtime.jsxs)("select", {
 									className: "dsh-ig-input",
@@ -178,30 +300,30 @@ window.__ModuleLoader__.load({
 									children: [
 										(0, react_jsx_runtime.jsx)("option", {
 											value: "google",
-											children: "Google Gemini"
+											children: t("providerGoogle")
 										}),
 										(0, react_jsx_runtime.jsx)("option", {
 											value: "openai",
-											children: "OpenAI / 中转站"
+											children: t("providerOpenAI")
 										}),
 										(0, react_jsx_runtime.jsx)("option", {
 											value: "seedream",
-											children: "字节 Seedream"
+											children: t("providerSeedream")
 										})
 									]
 								}),
 								(0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-ig-hint",
-									children: PROVIDER_LABEL[provider]
+									children: providerLabels[provider]
 								})
 							]
 						}),
 						(0, react_jsx_runtime.jsxs)("label", {
 							className: "dsh-ig-field",
 							children: [
-								(0, react_jsx_runtime.jsxs)("span", {
+								(0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-ig-label",
-									children: [PROVIDER_LABEL[provider], " API Key"]
+									children: t("apiKeyLabel", { provider: providerLabels[provider] })
 								}),
 								(0, react_jsx_runtime.jsx)("input", {
 									className: "dsh-ig-input",
@@ -211,15 +333,11 @@ window.__ModuleLoader__.load({
 									onChange: (event) => {
 										setKey(event.target.value);
 									},
-									placeholder: configured ? "留空即可保留已配置的 Key" : ""
+									placeholder: configured ? t("apiKeyPlaceholder") : ""
 								}),
-								(0, react_jsx_runtime.jsxs)("span", {
+								(0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-ig-hint",
-									children: [
-										"安全保存为 ",
-										KEY_REF[provider],
-										"；页面不会读回明文。"
-									]
+									children: t("apiKeyHint", { key: KEY_REF[provider] })
 								})
 							]
 						}),
@@ -228,7 +346,7 @@ window.__ModuleLoader__.load({
 							children: [
 								(0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-ig-label",
-									children: "接口地址"
+									children: t("endpoint")
 								}),
 								(0, react_jsx_runtime.jsxs)("div", {
 									className: "dsh-ig-input-group",
@@ -243,16 +361,16 @@ window.__ModuleLoader__.load({
 									}), (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
 										className: "dsh-ig-btn-reset",
-										title: "重置为默认官方地址",
+										title: t("resetTitle"),
 										onClick: () => {
 											setBaseURL(DEFAULT_BASE_URLS[provider]);
 										},
-										children: "重置"
+										children: t("reset")
 									})]
 								}),
 								(0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-ig-hint",
-									children: provider === "google" ? "Google 官方地址或反代端点（全路径）。" : provider === "openai" ? "中转站请填其 OpenAI 兼容的 /v1 地址。" : "火山方舟兼容的 /api/v3 地址。"
+									children: provider === "google" ? t("endpointHintGoogle") : provider === "openai" ? t("endpointHintOpenAI") : t("endpointHintSeedream")
 								})
 							]
 						}),
@@ -260,7 +378,7 @@ window.__ModuleLoader__.load({
 							className: "dsh-ig-field",
 							children: [(0, react_jsx_runtime.jsx)("span", {
 								className: "dsh-ig-label",
-								children: "模型"
+								children: t("model")
 							}), (0, react_jsx_runtime.jsx)("input", {
 								className: "dsh-ig-input",
 								value: model,
@@ -280,7 +398,7 @@ window.__ModuleLoader__.load({
 								className: "dsh-ig-save",
 								type: "submit",
 								disabled: saving || !snapshot.writable,
-								children: saving ? "保存中…" : "保存"
+								children: saving ? t("saving") : t("save")
 							})]
 						})
 					]
@@ -291,7 +409,20 @@ window.__ModuleLoader__.load({
 		function GeneratedImageCard(props) {
 			const attachment = imageRef(props.block);
 			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)();
+			(0, react.useEffect)(() => {
+				if (!previewOpen) return;
+				const onKeyDown = (e) => {
+					if (e.key === "Escape") setPreviewOpen(false);
+				};
+				window.addEventListener("keydown", onKeyDown);
+				return () => {
+					window.removeEventListener("keydown", onKeyDown);
+				};
+			}, [previewOpen]);
 			(0, react.useEffect)(() => {
 				if (attachment === void 0) return;
 				const controller = new AbortController();
@@ -303,9 +434,10 @@ window.__ModuleLoader__.load({
 					body: JSON.stringify({ attachment })
 				}).then(async (response) => {
 					if (!response.ok) throw new Error(`图片读取失败 (${String(response.status)})`);
-					const blob = await response.blob();
+					const resBlob = await response.blob();
 					if (controller.signal.aborted) return;
-					objectUrl = URL.createObjectURL(blob);
+					setBlob(resBlob);
+					objectUrl = URL.createObjectURL(resBlob);
 					setUrl(objectUrl);
 				}).catch((cause) => {
 					if (!controller.signal.aborted) setError(cause instanceof Error ? cause.message : String(cause));
@@ -315,6 +447,30 @@ window.__ModuleLoader__.load({
 					if (objectUrl !== void 0) URL.revokeObjectURL(objectUrl);
 				};
 			}, [attachment?.attachmentId]);
+			const copy = async (e) => {
+				e.stopPropagation();
+				if (!blob) return;
+				const ok = await copyImageBlob(blob);
+				setToast(ok ? "已复制图片" : "复制失败");
+				setTimeout(() => {
+					setToast(void 0);
+				}, 2e3);
+			};
+			const download = (e) => {
+				e.stopPropagation();
+				if (!url) return;
+				const a = document.createElement("a");
+				a.href = url;
+				a.download = attachment?.name || `dsh-image-${Date.now()}.png`;
+				document.body.appendChild(a);
+				a.click();
+				document.body.removeChild(a);
+			};
+			const openNewTab = (e) => {
+				e.stopPropagation();
+				if (!url) return;
+				window.open(url, "_blank", "noopener,noreferrer");
+			};
 			if (attachment === void 0) return (0, react_jsx_runtime.jsx)("div", {
 				className: "dsh-ig-loading",
 				children: "正在生成图片…"
@@ -335,14 +491,150 @@ window.__ModuleLoader__.load({
 						className: "dsh-ig-loading",
 						children: "正在加载图片…"
 					}) : null,
-					url !== void 0 ? (0, react_jsx_runtime.jsx)("img", {
-						className: "dsh-ig-image",
-						src: url,
-						alt: attachment.name ?? "Generated image"
+					url !== void 0 ? (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-ig-container",
+						children: [(0, react_jsx_runtime.jsx)("img", {
+							className: "dsh-ig-image",
+							src: url,
+							alt: attachment.name ?? "Generated image",
+							onClick: () => {
+								setPreviewOpen(true);
+							}
+						}), (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-toolbar",
+							children: [
+								(0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsh-ig-tool-btn",
+									title: "复制图片",
+									onClick: (e) => {
+										copy(e);
+									},
+									children: (0, react_jsx_runtime.jsxs)("svg", {
+										width: "15",
+										height: "15",
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "2",
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										children: [(0, react_jsx_runtime.jsx)("rect", {
+											x: "9",
+											y: "9",
+											width: "13",
+											height: "13",
+											rx: "2",
+											ry: "2"
+										}), (0, react_jsx_runtime.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })]
+									})
+								}),
+								(0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsh-ig-tool-btn",
+									title: "下载图片",
+									onClick: download,
+									children: (0, react_jsx_runtime.jsxs)("svg", {
+										width: "15",
+										height: "15",
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "2",
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										children: [
+											(0, react_jsx_runtime.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+											(0, react_jsx_runtime.jsx)("polyline", { points: "7 10 12 15 17 10" }),
+											(0, react_jsx_runtime.jsx)("line", {
+												x1: "12",
+												y1: "15",
+												x2: "12",
+												y2: "3"
+											})
+										]
+									})
+								}),
+								(0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsh-ig-tool-btn",
+									title: "新标签页打开",
+									onClick: openNewTab,
+									children: (0, react_jsx_runtime.jsxs)("svg", {
+										width: "15",
+										height: "15",
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "2",
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										children: [
+											(0, react_jsx_runtime.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+											(0, react_jsx_runtime.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+											(0, react_jsx_runtime.jsx)("line", {
+												x1: "10",
+												y1: "14",
+												x2: "21",
+												y2: "3"
+											})
+										]
+									})
+								}),
+								toast ? (0, react_jsx_runtime.jsx)("div", {
+									className: "dsh-ig-toast",
+									children: toast
+								}) : null
+							]
+						})]
+					}) : null,
+					previewOpen && url !== void 0 ? (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-ig-modal",
+						onClick: () => {
+							setPreviewOpen(false);
+						},
+						children: (0, react_jsx_runtime.jsx)("img", {
+							className: "dsh-ig-modal-img",
+							src: url,
+							alt: attachment.name ?? "Generated image preview",
+							onClick: (e) => {
+								e.stopPropagation();
+							}
+						})
 					}) : null
 				]
 			});
 		}
+		async function copyImageBlob(blob) {
+			try {
+				if (blob.type === "image/png") {
+					await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+					return true;
+				}
+				const img = new Image();
+				const url = URL.createObjectURL(blob);
+				await new Promise((resolve, reject) => {
+					img.onload = resolve;
+					img.onerror = reject;
+					img.src = url;
+				});
+				const canvas = document.createElement("canvas");
+				canvas.width = img.naturalWidth;
+				canvas.height = img.naturalHeight;
+				const ctx = canvas.getContext("2d");
+				if (!ctx) throw new Error("Canvas unavailable");
+				ctx.drawImage(img, 0, 0);
+				URL.revokeObjectURL(url);
+				const pngBlob = await new Promise((res) => {
+					canvas.toBlob(res, "image/png");
+				});
+				if (!pngBlob) throw new Error("Blob conversion failed");
+				await navigator.clipboard.write([new ClipboardItem({ "image/png": pngBlob })]);
+				return true;
+			} catch (_err) {
+				return false;
+			}
+		}
 		function modelOf(provider, value) {
 			const stored = provider === "google" ? value?.googleModel : provider === "openai" ? value?.openaiModel : value?.seedreamModel;
 			return typeof stored === "string" && stored.length > 0 ? stored : DEFAULT_MODELS[provider];