dsh-image-gen 0.1.3 → 0.1.5

package/lib/client.js

@@ -16,23 +16,745 @@ window.__ModuleLoader__.load({
 		const DEFAULT_GOOGLE_ENDPOINT = "https://generativelanguage.googleapis.com/v1beta/interactions";
 		const DEFAULT_OPENAI_BASE_URL = "https://api.openai.com/v1";
 		const DEFAULT_SEEDREAM_BASE_URL = "https://ark.cn-beijing.volces.com/api/v3";
+		const DEFAULT_DASHSCOPE_ENDPOINT = "https://dashscope.aliyuncs.com/api/v1";
 		const DEFAULT_MODELS = {
 			google: "gemini-3.1-flash-image",
 			openai: "gpt-image-2",
-			seedream: "doubao-seedream-5-0-260128"
+			seedream: "doubao-seedream-5-0-260128",
+			dashscope: "wanx2.1-t2i-turbo"
 		};
 		const DEFAULT_BASE_URLS = {
 			google: DEFAULT_GOOGLE_ENDPOINT,
 			openai: DEFAULT_OPENAI_BASE_URL,
-			seedream: DEFAULT_SEEDREAM_BASE_URL
+			seedream: DEFAULT_SEEDREAM_BASE_URL,
+			dashscope: DEFAULT_DASHSCOPE_ENDPOINT
 		};
 		//#endregion
+		//#region lib/types/client/gallery-store.js
+		const DB_NAME = "dsh_image_gen_db";
+		const DB_VERSION = 1;
+		const STORE_NAME = "gallery_history";
+		let dbPromise = null;
+		function getDB() {
+			if (dbPromise) return dbPromise;
+			dbPromise = new Promise((resolve, reject) => {
+				if (typeof indexedDB === "undefined") {
+					reject(/* @__PURE__ */ new Error("IndexedDB is not supported in this environment."));
+					return;
+				}
+				const request = indexedDB.open(DB_NAME, DB_VERSION);
+				request.onupgradeneeded = (event) => {
+					const db = event.target.result;
+					if (!db.objectStoreNames.contains(STORE_NAME)) db.createObjectStore(STORE_NAME, { keyPath: "id" }).createIndex("createdAt", "createdAt", { unique: false });
+				};
+				request.onsuccess = () => {
+					resolve(request.result);
+				};
+				request.onerror = () => {
+					reject(request.error);
+				};
+			});
+			return dbPromise;
+		}
+		const listeners = /* @__PURE__ */ new Set();
+		function notifyListeners() {
+			for (const listener of listeners) try {
+				listener();
+			} catch (err) {
+				console.error("[dsh-image-gen] Gallery listener error:", err);
+			}
+		}
+		/**
+		* Subscribe to gallery mutations (insert/delete/clear).
+		*/
+		function subscribeGallery(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+		/**
+		* Save or update a gallery record by attachmentId.
+		*/
+		async function saveGalleryItem(item) {
+			try {
+				const db = await getDB();
+				const record = {
+					...item,
+					createdAt: item.createdAt ?? Date.now()
+				};
+				await new Promise((resolve, reject) => {
+					const req = db.transaction(STORE_NAME, "readwrite").objectStore(STORE_NAME).put(record);
+					req.onsuccess = () => resolve();
+					req.onerror = () => reject(req.error);
+				});
+				notifyListeners();
+			} catch (err) {
+				console.warn("[dsh-image-gen] Failed to save gallery item to IndexedDB:", err);
+			}
+		}
+		/**
+		* Retrieve all gallery records sorted by createdAt descending.
+		*/
+		async function getGalleryItems() {
+			try {
+				const db = await getDB();
+				return await new Promise((resolve, reject) => {
+					const req = db.transaction(STORE_NAME, "readonly").objectStore(STORE_NAME).index("createdAt").openCursor(null, "prev");
+					const items = [];
+					req.onsuccess = (event) => {
+						const cursor = event.target.result;
+						if (cursor) {
+							items.push(cursor.value);
+							cursor.continue();
+						} else resolve(items);
+					};
+					req.onerror = () => reject(req.error);
+				});
+			} catch (err) {
+				console.warn("[dsh-image-gen] Failed to read gallery items from IndexedDB:", err);
+				return [];
+			}
+		}
+		//#endregion
+		//#region lib/types/client/gallery-view.js
+		/**
+		* Native Workspace Gallery View Component for DSH `conversation.view` slot.
+		* Fully i18n-reactive (Chinese & English).
+		*/
+		const DICT$1 = {
+			zh: {
+				totalCount: "共 {count} 张生成图片",
+				searchPlaceholder: "搜索 Prompt 关键词…",
+				filterAll: "全部厂商",
+				filterGoogle: "Google Gemini",
+				filterOpenAI: "OpenAI / 中转站",
+				filterSeedream: "字节 Seedream",
+				emptyTitle: "暂无生图记录",
+				emptyDesc: "在对话中让 Agent 生图后，生成的图片会自动收录到这里。",
+				noMatchTitle: "未找到匹配结果",
+				noMatchDesc: "尝试更换搜索关键词或选择其他厂商。",
+				copiedPrompt: "已复制 Prompt",
+				copiedImage: "已复制图片",
+				copyFailed: "复制失败",
+				preview: "查看大图",
+				download: "下载图片",
+				copyImg: "复制图片",
+				copyPpt: "复制 Prompt",
+				model: "模型",
+				prompt: "Prompt",
+				close: "关闭 (Esc)"
+			},
+			en: {
+				totalCount: "{count} images total",
+				searchPlaceholder: "Search prompt keywords…",
+				filterAll: "All Providers",
+				filterGoogle: "Google Gemini",
+				filterOpenAI: "OpenAI / Relay",
+				filterSeedream: "ByteDance Seedream",
+				emptyTitle: "No images generated yet",
+				emptyDesc: "Images generated during conversations will automatically appear here.",
+				noMatchTitle: "No matching images",
+				noMatchDesc: "Try a different search keyword or provider filter.",
+				copiedPrompt: "Prompt copied",
+				copiedImage: "Image copied",
+				copyFailed: "Copy failed",
+				preview: "Full Preview",
+				download: "Download",
+				copyImg: "Copy Image",
+				copyPpt: "Copy Prompt",
+				model: "Model",
+				prompt: "Prompt",
+				close: "Close (Esc)"
+			}
+		};
+		const GalleryViewTab = ({ locale }) => {
+			const [items, setItems] = (0, react.useState)([]);
+			const [search, setSearch] = (0, react.useState)("");
+			const [selectedProvider, setSelectedProvider] = (0, react.useState)("all");
+			const [previewItem, setPreviewItem] = (0, react.useState)(null);
+			const [previewUrl, setPreviewUrl] = (0, react.useState)(null);
+			const [previewBlob, setPreviewBlob] = (0, react.useState)(null);
+			const [toast, setToast] = (0, react.useState)(null);
+			const [lang, setLang] = (0, react.useState)(() => {
+				return (locale?.getSnapshot?.()?.active)?.startsWith("en") ? "en" : "zh";
+			});
+			(0, react.useEffect)(() => {
+				if (!locale?.subscribe) return;
+				return locale.subscribe(() => {
+					const active = locale.getSnapshot?.()?.active;
+					setLang(active?.startsWith("en") ? "en" : "zh");
+				});
+			}, [locale]);
+			const dict = lang === "en" ? DICT$1.en : DICT$1.zh;
+			const t = (key, params) => {
+				let text = dict[key] || DICT$1.zh[key] || key;
+				if (params) for (const [k, v] of Object.entries(params)) text = text.replace(`{${k}}`, v);
+				return text;
+			};
+			const showToast = (msg) => {
+				setToast(msg);
+				setTimeout(() => {
+					setToast(null);
+				}, 2e3);
+			};
+			(0, react.useEffect)(() => {
+				const seat = document.querySelector("[data-composer-seat]");
+				if (seat) {
+					const prevDisplay = seat.style.display;
+					seat.style.display = "none";
+					return () => {
+						seat.style.display = prevDisplay;
+					};
+				}
+			}, []);
+			(0, react.useEffect)(() => {
+				let active = true;
+				const load = () => {
+					getGalleryItems().then((res) => {
+						if (active) setItems(res);
+					});
+				};
+				load();
+				const unsubscribe = subscribeGallery(load);
+				return () => {
+					active = false;
+					unsubscribe();
+				};
+			}, []);
+			(0, react.useEffect)(() => {
+				if (!previewItem) return;
+				const onKeyDown = (e) => {
+					if (e.key === "Escape") {
+						setPreviewItem(null);
+						setPreviewUrl(null);
+						setPreviewBlob(null);
+					}
+				};
+				window.addEventListener("keydown", onKeyDown);
+				return () => window.removeEventListener("keydown", onKeyDown);
+			}, [previewItem]);
+			const filteredItems = (0, react.useMemo)(() => {
+				return items.filter((item) => {
+					if (selectedProvider !== "all" && item.provider !== selectedProvider) return false;
+					if (search.trim().length > 0) {
+						const q = search.trim().toLowerCase();
+						const matchPrompt = item.prompt?.toLowerCase().includes(q);
+						const matchModel = item.model?.toLowerCase().includes(q);
+						if (!matchPrompt && !matchModel) return false;
+					}
+					return true;
+				});
+			}, [
+				items,
+				search,
+				selectedProvider
+			]);
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-ig-gallery-page",
+				children: [
+					(0, react_jsx_runtime.jsxs)("header", {
+						className: "dsh-ig-gallery-page-header",
+						children: [(0, react_jsx_runtime.jsx)("div", {
+							className: "dsh-ig-gallery-page-title-row",
+							children: (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-ig-gallery-page-count",
+								children: t("totalCount", { count: String(items.length) })
+							})
+						}), (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-gallery-page-tools",
+							children: [(0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-ig-gallery-search-wrap",
+								children: [(0, react_jsx_runtime.jsxs)("svg", {
+									className: "dsh-ig-gallery-search-icon",
+									width: "14",
+									height: "14",
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "2",
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									children: [(0, react_jsx_runtime.jsx)("circle", {
+										cx: "11",
+										cy: "11",
+										r: "8"
+									}), (0, react_jsx_runtime.jsx)("line", {
+										x1: "21",
+										y1: "21",
+										x2: "16.65",
+										y2: "16.65"
+									})]
+								}), (0, react_jsx_runtime.jsx)("input", {
+									type: "text",
+									className: "dsh-ig-gallery-search-input",
+									placeholder: t("searchPlaceholder"),
+									value: search,
+									onChange: (e) => setSearch(e.target.value)
+								})]
+							}), (0, react_jsx_runtime.jsxs)("select", {
+								className: "dsh-ig-gallery-select",
+								value: selectedProvider,
+								onChange: (e) => setSelectedProvider(e.target.value),
+								children: [
+									(0, react_jsx_runtime.jsx)("option", {
+										value: "all",
+										children: t("filterAll")
+									}),
+									(0, react_jsx_runtime.jsx)("option", {
+										value: "google",
+										children: t("filterGoogle")
+									}),
+									(0, react_jsx_runtime.jsx)("option", {
+										value: "openai",
+										children: t("filterOpenAI")
+									}),
+									(0, react_jsx_runtime.jsx)("option", {
+										value: "seedream",
+										children: t("filterSeedream")
+									})
+								]
+							})]
+						})]
+					}),
+					(0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-ig-gallery-page-body",
+						children: items.length === 0 ? (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-gallery-empty",
+							children: [
+								(0, react_jsx_runtime.jsx)("div", {
+									className: "dsh-ig-gallery-empty-icon",
+									children: "🖼️"
+								}),
+								(0, react_jsx_runtime.jsx)("div", {
+									className: "dsh-ig-gallery-empty-title",
+									children: t("emptyTitle")
+								}),
+								(0, react_jsx_runtime.jsx)("div", {
+									className: "dsh-ig-gallery-empty-desc",
+									children: t("emptyDesc")
+								})
+							]
+						}) : filteredItems.length === 0 ? (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-gallery-empty",
+							children: [
+								(0, react_jsx_runtime.jsx)("div", {
+									className: "dsh-ig-gallery-empty-icon",
+									children: "🔍"
+								}),
+								(0, react_jsx_runtime.jsx)("div", {
+									className: "dsh-ig-gallery-empty-title",
+									children: t("noMatchTitle")
+								}),
+								(0, react_jsx_runtime.jsx)("div", {
+									className: "dsh-ig-gallery-empty-desc",
+									children: t("noMatchDesc")
+								})
+							]
+						}) : (0, react_jsx_runtime.jsx)("div", {
+							className: "dsh-ig-gallery-grid",
+							children: filteredItems.map((item) => (0, react_jsx_runtime.jsx)(GalleryCard, {
+								item,
+								t,
+								onPreview: (url, blob) => {
+									setPreviewItem(item);
+									setPreviewUrl(url);
+									setPreviewBlob(blob);
+								},
+								onToast: showToast
+							}, item.id))
+						})
+					}),
+					toast && (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-ig-gallery-page-toast",
+						children: toast
+					}),
+					previewItem && previewUrl && (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-ig-lightbox-backdrop",
+						onClick: () => {
+							setPreviewItem(null);
+							setPreviewUrl(null);
+							setPreviewBlob(null);
+						},
+						children: [
+							(0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-ig-lightbox-topbar",
+								onClick: (e) => e.stopPropagation(),
+								children: [(0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-ig-lightbox-meta",
+									children: [(0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-tag",
+										children: previewItem.provider
+									}), previewItem.model ? (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-tag dsh-ig-tag-model",
+										children: previewItem.model
+									}) : null]
+								}), (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsh-ig-lightbox-close-btn",
+									title: t("close"),
+									onClick: () => {
+										setPreviewItem(null);
+										setPreviewUrl(null);
+										setPreviewBlob(null);
+									},
+									children: (0, react_jsx_runtime.jsxs)("svg", {
+										width: "18",
+										height: "18",
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "2",
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										children: [(0, react_jsx_runtime.jsx)("line", {
+											x1: "18",
+											y1: "6",
+											x2: "6",
+											y2: "18"
+										}), (0, react_jsx_runtime.jsx)("line", {
+											x1: "6",
+											y1: "6",
+											x2: "18",
+											y2: "18"
+										})]
+									})
+								})]
+							}),
+							(0, react_jsx_runtime.jsx)("div", {
+								className: "dsh-ig-lightbox-img-wrap",
+								onClick: (e) => e.stopPropagation(),
+								children: (0, react_jsx_runtime.jsx)("img", {
+									className: "dsh-ig-lightbox-img",
+									src: previewUrl,
+									alt: previewItem.prompt
+								})
+							}),
+							(0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-ig-lightbox-bottombar",
+								onClick: (e) => e.stopPropagation(),
+								children: [(0, react_jsx_runtime.jsx)("div", {
+									className: "dsh-ig-lightbox-prompt-text",
+									title: previewItem.prompt,
+									children: previewItem.prompt
+								}), (0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-ig-lightbox-actions",
+									children: [
+										(0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: "dsh-ig-lightbox-btn",
+											title: t("copyPpt"),
+											onClick: async () => {
+												await navigator.clipboard.writeText(previewItem.prompt);
+												showToast(t("copiedPrompt"));
+											},
+											children: [(0, react_jsx_runtime.jsxs)("svg", {
+												width: "14",
+												height: "14",
+												viewBox: "0 0 24 24",
+												fill: "none",
+												stroke: "currentColor",
+												strokeWidth: "2",
+												strokeLinecap: "round",
+												strokeLinejoin: "round",
+												children: [(0, react_jsx_runtime.jsx)("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }), (0, react_jsx_runtime.jsx)("rect", {
+													x: "8",
+													y: "2",
+													width: "8",
+													height: "4",
+													rx: "1",
+													ry: "1"
+												})]
+											}), (0, react_jsx_runtime.jsx)("span", { children: t("copyPpt") })]
+										}),
+										(0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: "dsh-ig-lightbox-btn",
+											title: t("copyImg"),
+											onClick: async () => {
+												if (!previewBlob) return;
+												const ok = await copyImageBlob(previewBlob);
+												showToast(ok ? t("copiedImage") : t("copyFailed"));
+											},
+											children: [(0, react_jsx_runtime.jsxs)("svg", {
+												width: "14",
+												height: "14",
+												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)("span", { children: t("copyImg") })]
+										}),
+										(0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: "dsh-ig-lightbox-btn",
+											title: t("download"),
+											onClick: () => {
+												const a = document.createElement("a");
+												a.href = previewUrl;
+												a.download = `dsh-${previewItem.provider}-${previewItem.id}.png`;
+												document.body.appendChild(a);
+												a.click();
+												document.body.removeChild(a);
+											},
+											children: [(0, react_jsx_runtime.jsxs)("svg", {
+												width: "14",
+												height: "14",
+												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)("span", { children: t("download") })]
+										})
+									]
+								})]
+							})
+						]
+					})
+				]
+			});
+		};
+		const GalleryCard = ({ item, t, onPreview, onToast }) => {
+			const [url, setUrl] = (0, react.useState)();
+			const [blob, setBlob] = (0, react.useState)();
+			const [loading, setLoading] = (0, react.useState)(true);
+			const [error, setError] = (0, react.useState)();
+			(0, react.useEffect)(() => {
+				const controller = new AbortController();
+				let objectUrl;
+				fetch(IMAGE_ROUTE, {
+					method: "POST",
+					signal: controller.signal,
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({ attachment: item.attachment })
+				}).then(async (response) => {
+					if (!response.ok) throw new Error(`HTTP ${response.status}`);
+					const resBlob = await response.blob();
+					if (controller.signal.aborted) return;
+					setBlob(resBlob);
+					objectUrl = URL.createObjectURL(resBlob);
+					setUrl(objectUrl);
+					setLoading(false);
+				}).catch((err) => {
+					if (!controller.signal.aborted) {
+						setError(err instanceof Error ? err.message : String(err));
+						setLoading(false);
+					}
+				});
+				return () => {
+					controller.abort();
+					if (objectUrl) URL.revokeObjectURL(objectUrl);
+				};
+			}, [item.attachment]);
+			const copyPrompt = async (e) => {
+				e.stopPropagation();
+				try {
+					await navigator.clipboard.writeText(item.prompt);
+					onToast(t("copiedPrompt"));
+				} catch {
+					onToast(t("copyFailed"));
+				}
+			};
+			const copyImage = async (e) => {
+				e.stopPropagation();
+				if (!blob) return;
+				onToast(await copyImageBlob(blob) ? t("copiedImage") : t("copyFailed"));
+			};
+			const downloadImage = (e) => {
+				e.stopPropagation();
+				if (!url) return;
+				const a = document.createElement("a");
+				a.href = url;
+				a.download = `dsh-${item.provider}-${item.id}.png`;
+				document.body.appendChild(a);
+				a.click();
+				document.body.removeChild(a);
+			};
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-ig-gallery-card",
+				onClick: () => {
+					if (url && blob) onPreview(url, blob);
+				},
+				children: [(0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-ig-gallery-card-media",
+					children: [
+						loading && (0, react_jsx_runtime.jsx)("div", {
+							className: "dsh-ig-gallery-card-loading",
+							children: "..."
+						}),
+						error && (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-gallery-card-error",
+							children: ["⚠️ ", error]
+						}),
+						url && (0, react_jsx_runtime.jsx)("img", {
+							className: "dsh-ig-gallery-card-img",
+							src: url,
+							alt: item.prompt,
+							loading: "lazy"
+						}),
+						(0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-card-toolbar",
+							children: [
+								(0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsh-ig-tool-btn",
+									title: t("copyImg"),
+									onClick: (e) => {
+										copyImage(e);
+									},
+									children: (0, react_jsx_runtime.jsxs)("svg", {
+										width: "14",
+										height: "14",
+										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: t("download"),
+									onClick: downloadImage,
+									children: (0, react_jsx_runtime.jsxs)("svg", {
+										width: "14",
+										height: "14",
+										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: t("copyPpt"),
+									onClick: (e) => {
+										copyPrompt(e);
+									},
+									children: (0, react_jsx_runtime.jsxs)("svg", {
+										width: "14",
+										height: "14",
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "2",
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										children: [(0, react_jsx_runtime.jsx)("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }), (0, react_jsx_runtime.jsx)("rect", {
+											x: "8",
+											y: "2",
+											width: "8",
+											height: "4",
+											rx: "1",
+											ry: "1"
+										})]
+									})
+								})
+							]
+						})
+					]
+				}), (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-ig-gallery-card-meta",
+					children: [(0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-ig-gallery-card-header",
+						children: [(0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-ig-tag",
+							children: item.provider
+						}), item.model ? (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-ig-tag dsh-ig-tag-model",
+							children: item.model
+						}) : null]
+					}), (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-ig-gallery-card-prompt",
+						title: item.prompt,
+						children: item.prompt
+					})]
+				})]
+			});
+		};
+		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;
+			}
+		}
+		//#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",
-			seedream: "ARK_API_KEY"
+			seedream: "ARK_API_KEY",
+			dashscope: "DASHSCOPE_API_KEY"
 		};
 		const DICT = {
 			zh: {
@@ -42,6 +764,7 @@ window.__ModuleLoader__.load({
 				providerGoogle: "Google Gemini",
 				providerOpenAI: "OpenAI / 中转站",
 				providerSeedream: "字节 Seedream",
+				providerDashScope: "阿里 DashScope (通义万相 / Qwen)",
 				apiKeyLabel: "{provider} API Key",
 				apiKeyPlaceholder: "留空即可保留已配置的 Key",
 				apiKeyHint: "安全保存为 {key}；页面不会读回明文。",
@@ -51,6 +774,7 @@ window.__ModuleLoader__.load({
 				endpointHintGoogle: "Google 官方地址或反代端点（全路径）。",
 				endpointHintOpenAI: "中转站请填其 OpenAI 兼容的 /v1 地址。",
 				endpointHintSeedream: "火山方舟兼容的 /api/v3 地址。",
+				endpointHintDashScope: "阿里云百炼 DashScope 官方接口地址。",
 				model: "模型",
 				saving: "保存中…",
 				save: "保存",
@@ -61,7 +785,12 @@ window.__ModuleLoader__.load({
 				generating: "正在生成图片…",
 				loading: "正在加载图片…",
 				loadFailed: "图片读取失败 ({status})",
-				generatedTitle: "Generated image"
+				generatedTitle: "已生成图片",
+				copyImg: "复制图片",
+				download: "下载图片",
+				openNewTab: "新标签页打开",
+				copiedImage: "已复制图片",
+				copyFailed: "复制失败"
 			},
 			en: {
 				title: "Image Generation",
@@ -70,6 +799,7 @@ window.__ModuleLoader__.load({
 				providerGoogle: "Google Gemini",
 				providerOpenAI: "OpenAI / Relay",
 				providerSeedream: "ByteDance Seedream",
+				providerDashScope: "Aliyun DashScope (Wanx / Qwen)",
 				apiKeyLabel: "{provider} API Key",
 				apiKeyPlaceholder: "Leave empty to keep configured key",
 				apiKeyHint: "Securely saved as {key}; never read back in plaintext.",
@@ -79,6 +809,7 @@ window.__ModuleLoader__.load({
 				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.",
+				endpointHintDashScope: "Official Aliyun DashScope endpoint.",
 				model: "Model",
 				saving: "Saving…",
 				save: "Save",
@@ -89,7 +820,12 @@ window.__ModuleLoader__.load({
 				generating: "Generating image…",
 				loading: "Loading image…",
 				loadFailed: "Failed to load image ({status})",
-				generatedTitle: "Generated image"
+				generatedTitle: "Generated image",
+				copyImg: "Copy Image",
+				download: "Download Image",
+				openNewTab: "Open in new tab",
+				copiedImage: "Image copied",
+				copyFailed: "Copy failed"
 			}
 		};
 		const STYLE = `
@@ -115,6 +851,7 @@ window.__ModuleLoader__.load({
 .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}
@@ -124,11 +861,63 @@ window.__ModuleLoader__.load({
 .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}`;
+.dsh-ig-loading{color:var(--dsw-alias-label-tertiary,#7b818b);font-size:13px}
+
+/* Native Workspace Gallery View (Renders seamlessly inside DSH Session View) */
+.dsh-ig-gallery-page{width:100%;height:100%;background:var(--dsw-alias-bg-layer-1,#ffffff);display:flex;flex-direction:column;overflow:hidden;flex:1}
+.dsh-ig-gallery-page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 28px;border-bottom:1px solid var(--dsw-alias-border-l2,#e5e7eb);background:var(--dsw-alias-bg-layer-1,#ffffff);flex-shrink:0}
+.dsh-ig-gallery-page-title-row{display:flex;align-items:center;gap:12px}
+.dsh-ig-gallery-page-count{font-size:13px;font-weight:500;color:var(--dsw-alias-label-secondary,#4b5563);background:var(--dsw-alias-bg-layer-3,#f3f4f6);padding:3px 10px;border-radius:20px}
+.dsh-ig-gallery-page-tools{display:flex;align-items:center;gap:12px}
+.dsh-ig-gallery-search-wrap{position:relative;display:flex;align-items:center}
+.dsh-ig-gallery-search-icon{position:absolute;left:10px;color:var(--dsw-alias-label-tertiary,#9ca3af);pointer-events:none}
+.dsh-ig-gallery-search-input{padding:6px 12px 6px 32px;font-size:13px;border:1px solid var(--dsw-alias-border-l2,#d7dbe0);border-radius:8px;background:var(--dsw-alias-bg-layer-2,#fff);color:inherit;outline:none;width:200px;transition:border-color .15s,width .2s}
+.dsh-ig-gallery-search-input:focus{border-color:var(--dsw-alias-brand-primary,#4c78ff);width:240px}
+.dsh-ig-gallery-select{padding:6px 12px;font-size:13px;border:1px solid var(--dsw-alias-border-l2,#d7dbe0);border-radius:8px;background:var(--dsw-alias-bg-layer-2,#fff);color:inherit;outline:none;cursor:pointer}
+.dsh-ig-gallery-page-body{flex:1;overflow-y:auto;padding:24px 28px}
+.dsh-ig-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
+.dsh-ig-gallery-card{background:var(--dsw-alias-bg-layer-2,#fff);border:1px solid var(--dsw-alias-border-l2,#e5e7eb);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
+.dsh-ig-gallery-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.06);border-color:var(--dsw-alias-border-l1,#cfd4dc)}
+.dsh-ig-gallery-card-media{position:relative;width:100%;aspect-ratio:1/1;background:#f3f4f6;overflow:hidden;display:flex;align-items:center;justify-content:center}
+.dsh-ig-gallery-card-img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
+.dsh-ig-gallery-card:hover .dsh-ig-gallery-card-img{transform:scale(1.03)}
+.dsh-ig-gallery-card-loading{font-size:12px;color:#9ca3af}
+.dsh-ig-gallery-card-error{font-size:12px;color:#ef4444;padding:8px;text-align:center}
+
+/* Floating Action Toolbar (Matches Chat Image Toolbar) */
+.dsh-ig-gallery-card:hover .dsh-ig-card-toolbar{opacity:1;pointer-events:auto}
+.dsh-ig-card-toolbar{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:4px;padding:3px 5px;border-radius:8px;background:rgba(0,0,0,0.68);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-gallery-card-meta{padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:var(--dsw-alias-bg-layer-2,#fff);flex:1}
+.dsh-ig-gallery-card-header{display:flex;align-items:center;justify-content:space-between;font-size:11px}
+.dsh-ig-tag{display:inline-block;padding:2px 6px;border-radius:4px;background:var(--dsw-alias-bg-layer-3,#edf0f3);color:var(--dsw-alias-label-secondary,inherit);font-weight:500;text-transform:uppercase;font-size:10px}
+.dsh-ig-tag-model{background:rgba(76,120,255,0.1);color:#4c78ff}
+.dsh-ig-gallery-card-prompt{margin:0;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-primary,inherit);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
+.dsh-ig-gallery-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:360px;text-align:center;color:var(--dsw-alias-label-tertiary,#7b818b)}
+.dsh-ig-gallery-empty-icon{font-size:48px;margin-bottom:12px}
+.dsh-ig-gallery-empty-title{font-size:16px;font-weight:600;color:var(--dsw-alias-label-primary,inherit);margin-bottom:6px}
+.dsh-ig-gallery-empty-desc{font-size:13px;max-width:360px;line-height:1.5}
+
+/* Pure Centered Lightbox */
+.dsh-ig-lightbox-backdrop{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;cursor:zoom-out;animation:dsh-ig-fade .15s ease-out}
+.dsh-ig-lightbox-topbar{position:absolute;top:20px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;z-index:10;pointer-events:none}
+.dsh-ig-lightbox-meta{display:flex;align-items:center;gap:8px;pointer-events:auto}
+.dsh-ig-lightbox-close-btn{appearance:none;border:0;background:rgba(255,255,255,0.15);color:#fff;border-radius:50%;width:34px;height:34px;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s;pointer-events:auto}
+.dsh-ig-lightbox-close-btn:hover{background:rgba(255,255,255,0.3)}
+.dsh-ig-lightbox-img-wrap{max-width:86vw;max-height:78vh;display:flex;align-items:center;justify-content:center;cursor:default}
+.dsh-ig-lightbox-img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,0.7);user-select:none}
+.dsh-ig-lightbox-bottombar{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);max-width:min(90vw,640px);background:rgba(20,22,26,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.15);border-radius:14px;padding:10px 16px;display:flex;flex-direction:column;gap:8px;color:#fff;box-shadow:0 16px 40px rgba(0,0,0,0.5);cursor:default}
+.dsh-ig-lightbox-prompt-text{font-size:13px;line-height:1.4;color:rgba(255,255,255,0.92);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
+.dsh-ig-lightbox-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid rgba(255,255,255,0.1);padding-top:8px}
+.dsh-ig-lightbox-btn{appearance:none;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.08);color:#fff;border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .15s}
+.dsh-ig-lightbox-btn:hover{background:rgba(255,255,255,0.22)}
+.dsh-ig-gallery-page-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.85);color:#fff;padding:6px 14px;border-radius:8px;font-size:13px;z-index:99999;animation:dsh-ig-fade .15s}
+
+/* Hide floating chat composer when gallery page is active */
+[data-conversation-scroll]:has(.dsh-ig-gallery-page) [data-composer-seat]{display:none!important}
+`;
 		/** Required browser services. */
 		const inject = [
 			"slots",
@@ -137,7 +926,7 @@ window.__ModuleLoader__.load({
 			"settingsScope",
 			"locale"
 		];
-		/** Mount the settings card and generated-image card. */
+		/** Mount the settings card, generated-image card, and native conversation gallery view. */
 		function apply(ctx) {
 			const { api } = ctx.get("connection");
 			const scope = ctx.settingsScope.bind({ namespace: IMAGE_GENERATION_NAMESPACE });
@@ -155,24 +944,32 @@ window.__ModuleLoader__.load({
 			ctx.slots.inject("settings.plugin.item", () => register({
 				name: "settings.plugin.item",
 				key: IMAGE_GENERATION_NAMESPACE,
-				id: IMAGE_GENERATION_NAMESPACE,
-				order: 100,
 				inject: () => ({
 					scope,
 					credentials: api.credentials,
 					locale
 				})
 			}, ImageGenerationSettingsCard));
-			ctx.slots.inject("tool.call.toolview", () => ctx.slots.register({
+			ctx.slots.inject("tool.call.toolview", () => register({
 				name: "tool.call.toolview",
-				key: "generate_image"
+				key: "generate_image",
+				inject: () => ({ locale })
 			}, GeneratedImageCard));
+			ctx.slots.inject("conversation.view", () => register({
+				name: "conversation.view",
+				id: "gallery",
+				order: 20,
+				label: () => {
+					return (locale?.getSnapshot?.()?.active)?.startsWith("en") ? "Gallery" : "画廊";
+				},
+				inject: () => ({ locale })
+			}, GalleryViewTab));
 		}
 		/** Edit provider settings and its write-only API credential. */
 		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 [lang, setLang] = (0, react.useState)(() => props.locale?.getSnapshot?.()?.active?.startsWith("en") ? "en" : "zh");
 			const [provider, setProvider] = (0, react.useState)("google");
 			const [model, setModel] = (0, react.useState)("");
 			const [baseURL, setBaseURL] = (0, react.useState)("");
@@ -185,7 +982,7 @@ window.__ModuleLoader__.load({
 			}), [props.scope]);
 			(0, react.useEffect)(() => {
 				return props.locale?.subscribe?.(() => {
-					setLang(props.locale?.getSnapshot?.()?.active ?? "zh");
+					setLang(props.locale?.getSnapshot?.()?.active?.startsWith("en") ? "en" : "zh");
 				});
 			}, [props.locale]);
 			const t = (keyName, params) => {
@@ -196,7 +993,8 @@ window.__ModuleLoader__.load({
 			const providerLabels = {
 				google: t("providerGoogle"),
 				openai: t("providerOpenAI"),
-				seedream: t("providerSeedream")
+				seedream: t("providerSeedream"),
+				dashscope: t("providerDashScope")
 			};
 			(0, react.useEffect)(() => {
 				const value = snapshot.value;
@@ -222,8 +1020,8 @@ window.__ModuleLoader__.load({
 				setMessage("");
 				try {
 					await props.scope.set("provider", provider);
-					await props.scope.set(provider === "google" ? "googleModel" : provider === "openai" ? "openaiModel" : "seedreamModel", model);
-					await props.scope.set(provider === "google" ? "googleEndpoint" : provider === "openai" ? "openaiBaseURL" : "seedreamBaseURL", baseURL);
+					await props.scope.set(provider === "google" ? "googleModel" : provider === "openai" ? "openaiModel" : provider === "seedream" ? "seedreamModel" : "dashscopeModel", model);
+					await props.scope.set(provider === "google" ? "googleEndpoint" : provider === "openai" ? "openaiBaseURL" : provider === "seedream" ? "seedreamBaseURL" : "dashscopeEndpoint", baseURL);
 					if (key.trim().length > 0) {
 						const response = await props.credentials.set({
 							ref: KEY_REF[provider],
@@ -309,6 +1107,10 @@ window.__ModuleLoader__.load({
 										(0, react_jsx_runtime.jsx)("option", {
 											value: "seedream",
 											children: t("providerSeedream")
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "dashscope",
+											children: t("providerDashScope")
 										})
 									]
 								}),
@@ -370,7 +1172,7 @@ window.__ModuleLoader__.load({
 								}),
 								(0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-ig-hint",
-									children: provider === "google" ? t("endpointHintGoogle") : provider === "openai" ? t("endpointHintOpenAI") : t("endpointHintSeedream")
+									children: provider === "google" ? t("endpointHintGoogle") : provider === "openai" ? t("endpointHintOpenAI") : provider === "seedream" ? t("endpointHintSeedream") : t("endpointHintDashScope")
 								})
 							]
 						}),
@@ -413,6 +1215,34 @@ window.__ModuleLoader__.load({
 			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 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 : "";
+				saveGalleryItem({
+					id: attachment.attachmentId,
+					attachment,
+					prompt,
+					provider,
+					model,
+					output
+				});
+			}, [attachment?.attachmentId]);
 			(0, react.useEffect)(() => {
 				if (!previewOpen) return;
 				const onKeyDown = (e) => {
@@ -433,7 +1263,7 @@ window.__ModuleLoader__.load({
 					headers: { "content-type": "application/json" },
 					body: JSON.stringify({ attachment })
 				}).then(async (response) => {
-					if (!response.ok) throw new Error(`图片读取失败 (${String(response.status)})`);
+					if (!response.ok) throw new Error(t("loadFailed", { status: String(response.status) }));
 					const resBlob = await response.blob();
 					if (controller.signal.aborted) return;
 					setBlob(resBlob);
@@ -446,12 +1276,12 @@ window.__ModuleLoader__.load({
 					controller.abort();
 					if (objectUrl !== void 0) URL.revokeObjectURL(objectUrl);
 				};
-			}, [attachment?.attachmentId]);
+			}, [attachment?.attachmentId, lang]);
 			const copy = async (e) => {
 				e.stopPropagation();
 				if (!blob) return;
 				const ok = await copyImageBlob(blob);
-				setToast(ok ? "已复制图片" : "复制失败");
+				setToast(ok ? t("copiedImage") : t("copyFailed"));
 				setTimeout(() => {
 					setToast(void 0);
 				}, 2e3);
@@ -473,15 +1303,15 @@ window.__ModuleLoader__.load({
 			};
 			if (attachment === void 0) return (0, react_jsx_runtime.jsx)("div", {
 				className: "dsh-ig-loading",
-				children: "正在生成图片…"
+				children: t("generating")
 			});
 			return (0, react_jsx_runtime.jsxs)("section", {
 				className: "dsh-ig-result",
-				"aria-label": "Generated image",
+				"aria-label": t("generatedTitle"),
 				children: [
 					(0, react_jsx_runtime.jsx)("div", {
 						className: "dsh-ig-result-title",
-						children: "Generated image"
+						children: t("generatedTitle")
 					}),
 					error !== void 0 ? (0, react_jsx_runtime.jsx)("div", {
 						className: "dsh-ig-error",
@@ -489,7 +1319,7 @@ window.__ModuleLoader__.load({
 					}) : null,
 					url === void 0 && error === void 0 ? (0, react_jsx_runtime.jsx)("div", {
 						className: "dsh-ig-loading",
-						children: "正在加载图片…"
+						children: t("loading")
 					}) : null,
 					url !== void 0 ? (0, react_jsx_runtime.jsxs)("div", {
 						className: "dsh-ig-container",
@@ -506,7 +1336,7 @@ window.__ModuleLoader__.load({
 								(0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									className: "dsh-ig-tool-btn",
-									title: "复制图片",
+									title: t("copyImg"),
 									onClick: (e) => {
 										copy(e);
 									},
@@ -532,7 +1362,7 @@ window.__ModuleLoader__.load({
 								(0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									className: "dsh-ig-tool-btn",
-									title: "下载图片",
+									title: t("download"),
 									onClick: download,
 									children: (0, react_jsx_runtime.jsxs)("svg", {
 										width: "15",
@@ -558,7 +1388,7 @@ window.__ModuleLoader__.load({
 								(0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									className: "dsh-ig-tool-btn",
-									title: "新标签页打开",
+									title: t("openNewTab"),
 									onClick: openNewTab,
 									children: (0, react_jsx_runtime.jsxs)("svg", {
 										width: "15",
@@ -589,58 +1419,31 @@ window.__ModuleLoader__.load({
 						})]
 					}) : null,
 					previewOpen && url !== void 0 ? (0, react_jsx_runtime.jsx)("div", {
-						className: "dsh-ig-modal",
+						className: "dsh-ig-lightbox-backdrop",
 						onClick: () => {
 							setPreviewOpen(false);
 						},
-						children: (0, react_jsx_runtime.jsx)("img", {
-							className: "dsh-ig-modal-img",
-							src: url,
-							alt: attachment.name ?? "Generated image preview",
+						children: (0, react_jsx_runtime.jsx)("div", {
+							className: "dsh-ig-lightbox-img-wrap",
 							onClick: (e) => {
 								e.stopPropagation();
-							}
+							},
+							children: (0, react_jsx_runtime.jsx)("img", {
+								className: "dsh-ig-lightbox-img",
+								src: url,
+								alt: attachment.name ?? "Generated image preview"
+							})
 						})
 					}) : 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;
+			const stored = provider === "google" ? value?.googleModel : provider === "openai" ? value?.openaiModel : provider === "seedream" ? value?.seedreamModel : value?.dashscopeModel;
 			return typeof stored === "string" && stored.length > 0 ? stored : DEFAULT_MODELS[provider];
 		}
 		function baseURLOf(provider, value) {
-			const stored = provider === "google" ? value?.googleEndpoint : provider === "openai" ? value?.openaiBaseURL : value?.seedreamBaseURL;
+			const stored = provider === "google" ? value?.googleEndpoint : provider === "openai" ? value?.openaiBaseURL : provider === "seedream" ? value?.seedreamBaseURL : value?.dashscopeEndpoint;
 			return typeof stored === "string" && stored.length > 0 ? stored : DEFAULT_BASE_URLS[provider];
 		}
 		function imageRef(block) {