@vite-plugin-opencode-assistant/components 1.0.15 → 1.0.17

package/lib/@vite-plugin-opencode-assistant/components.es.js

@@ -1,4 +1,4 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, toDisplayString, toRef, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, toDisplayString, toRef, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 import { truncate } from "@vite-plugin-opencode-assistant/shared";
 //#region es/open-code-widget/src/context.js
 var CONTEXT_KEY = /* @__PURE__ */ Symbol("OpenCodeWidgetContext");
@@ -29,38 +29,22 @@ var __spreadValues$1 = (a, b) => {
 	}
 	return a;
 };
-var __vue_sfc__$7 = /* @__PURE__ */ defineComponent({
+var __vue_sfc__$6 = /* @__PURE__ */ defineComponent({
 	__name: "Frame",
 	setup(__props, { expose: __expose }) {
-		__expose();
 		const iframeRef = ref(null);
-		const { frameLoading, showEmptyState, showError, iframeSource: iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction, handleFrameLoaded, theme, resolvedTheme } = useOpenCodeWidgetContext();
-		const iframeReady = ref(false);
+		const { frameLoading, showEmptyState, showError, iframeSource: iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction, handleFrameLoaded } = useOpenCodeWidgetContext();
 		function sendMessageToIframe(type, data) {
 			var _a;
 			if (!((_a = iframeRef.value) == null ? void 0 : _a.contentWindow)) return;
 			iframeRef.value.contentWindow.postMessage(__spreadValues$1({ type }, data), "*");
 		}
-		function syncIframeTheme() {
-			sendMessageToIframe("OPENCODE_SET_THEME", { theme: resolvedTheme.value });
-		}
-		function handleIframeMessage(event) {
-			var _a;
-			if (((_a = event.data) == null ? void 0 : _a.type) === "OPENCODE_READY") syncIframeTheme();
-		}
-		watch([theme, resolvedTheme], () => {
-			syncIframeTheme();
-		});
 		onMounted(() => {
 			if (iframeRef.value) iframeRef.value.addEventListener("load", () => {
-				iframeReady.value = true;
 				handleFrameLoaded();
 			});
-			window.addEventListener("message", handleIframeMessage);
-		});
-		onUnmounted(() => {
-			window.removeEventListener("message", handleIframeMessage);
 		});
+		__expose({ sendMessageToIframe });
 		const __returned__ = {
 			iframeRef,
 			frameLoading,
@@ -71,12 +55,7 @@ var __vue_sfc__$7 = /* @__PURE__ */ defineComponent({
 			emptyStateActionText,
 			handleEmptyAction,
 			handleFrameLoaded,
-			theme,
-			resolvedTheme,
-			iframeReady,
-			sendMessageToIframe,
-			syncIframeTheme,
-			handleIframeMessage
+			sendMessageToIframe
 		};
 		Object.defineProperty(__returned__, "__isScriptSetup", {
 			enumerable: false,
@@ -85,11 +64,11 @@ var __vue_sfc__$7 = /* @__PURE__ */ defineComponent({
 		return __returned__;
 	}
 });
-var _hoisted_1$7 = { class: "opencode-iframe-container" };
-var _hoisted_2$5 = { class: "opencode-empty-state-text" };
-var _hoisted_3$5 = ["src"];
-function __vue_render__$7(_ctx, _cache, $props, $setup, $data, $options) {
-	return openBlock(), createElementBlock("div", _hoisted_1$7, [
+var _hoisted_1$6 = { class: "opencode-iframe-container" };
+var _hoisted_2$4 = { class: "opencode-empty-state-text" };
+var _hoisted_3$4 = ["src"];
+function __vue_render__$6(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", _hoisted_1$6, [
 		createElementVNode("div", { class: normalizeClass(["opencode-empty-state-overlay", { visible: $setup.showEmptyState }]) }, [renderSlot(_ctx.$slots, "empty-state", {}, () => [
 			_cache[1] || (_cache[1] = createElementVNode("div", { class: "opencode-empty-state-icon" }, [createElementVNode("svg", {
 				viewBox: "0 0 24 24",
@@ -104,7 +83,7 @@ function __vue_render__$7(_ctx, _cache, $props, $setup, $data, $options) {
 				"stroke-linejoin": "round",
 				d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 0 1-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
 			})])], -1)),
-			createElementVNode("div", _hoisted_2$5, toDisplayString($setup.emptyStateText), 1),
+			createElementVNode("div", _hoisted_2$4, toDisplayString($setup.emptyStateText), 1),
 			createElementVNode("button", {
 				class: "opencode-empty-state-btn",
 				type: "button",
@@ -119,14 +98,14 @@ function __vue_render__$7(_ctx, _cache, $props, $setup, $data, $options) {
 			src: $setup.iframeSrc,
 			allow: "clipboard-write; clipboard-read",
 			referrerpolicy: "origin"
-		}, null, 8, _hoisted_3$5)])
+		}, null, 8, _hoisted_3$4)])
 	]);
 }
-__vue_sfc__$7.render = __vue_render__$7;
-var Frame_vue_default = __vue_sfc__$7;
+__vue_sfc__$6.render = __vue_render__$6;
+var Frame_vue_default = __vue_sfc__$6;
 //#endregion
 //#region es/open-code-widget/src/components/Header.vue.js
-var __vue_sfc__$6 = /* @__PURE__ */ defineComponent({
+var __vue_sfc__$5 = /* @__PURE__ */ defineComponent({
 	__name: "Header",
 	setup(__props, { expose: __expose }) {
 		__expose();
@@ -165,15 +144,15 @@ var __vue_sfc__$6 = /* @__PURE__ */ defineComponent({
 		return __returned__;
 	}
 });
-var _hoisted_1$6 = { class: "opencode-chat-header" };
-var _hoisted_2$4 = { class: "opencode-chat-header-left" };
-var _hoisted_3$4 = [
+var _hoisted_1$5 = { class: "opencode-chat-header" };
+var _hoisted_2$3 = { class: "opencode-chat-header-left" };
+var _hoisted_3$3 = [
 	"title",
 	"aria-label",
 	"aria-expanded"
 ];
-var _hoisted_4$4 = ["aria-pressed", "disabled"];
-var _hoisted_5$4 = ["title", "aria-label"];
+var _hoisted_4$3 = ["aria-pressed", "disabled"];
+var _hoisted_5$3 = ["title", "aria-label"];
 var _hoisted_6$3 = {
 	key: 0,
 	viewBox: "0 0 24 24",
@@ -204,11 +183,11 @@ var _hoisted_8$2 = {
 	"stroke-width": "2",
 	"aria-hidden": "true"
 };
-var _hoisted_9$1 = { class: "opencode-chat-header-title" };
+var _hoisted_9$2 = { class: "opencode-chat-header-title" };
 var _hoisted_10 = { class: "opencode-chat-header-actions" };
-function __vue_render__$6(_ctx, _cache, $props, $setup, $data, $options) {
-	return openBlock(), createElementBlock("div", _hoisted_1$6, [
-		createElementVNode("div", _hoisted_2$4, [
+function __vue_render__$5(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", _hoisted_1$5, [
+		createElementVNode("div", _hoisted_2$3, [
 			createElementVNode("button", {
 				class: normalizeClass(["opencode-header-btn session-toggle", { active: !$setup.sessionListCollapsed }]),
 				type: "button",
@@ -227,7 +206,7 @@ function __vue_render__$6(_ctx, _cache, $props, $setup, $data, $options) {
 			}, [createElementVNode("path", {
 				d: "M4 6h16M4 12h16M4 18h16",
 				"stroke-linecap": "round"
-			})], -1))])], 10, _hoisted_3$4),
+			})], -1))])], 10, _hoisted_3$3),
 			createElementVNode("button", {
 				class: normalizeClass(["opencode-header-btn select-btn", { active: $setup.selectMode }]),
 				type: "button",
@@ -247,16 +226,16 @@ function __vue_render__$6(_ctx, _cache, $props, $setup, $data, $options) {
 			}), createElementVNode("path", {
 				fill: "currentColor",
 				d: "M512 96a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V128a32 32 0 0 1 32-32m0 576a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V704a32 32 0 0 1 32-32M96 512a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32m576 0a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64H704a32 32 0 0 1-32-32"
-			})], -1))])], 10, _hoisted_4$4),
+			})], -1))])], 10, _hoisted_4$3),
 			createElementVNode("button", {
 				class: "opencode-header-btn theme-btn",
 				type: "button",
 				title: $setup.themeIconTitle,
 				"aria-label": $setup.themeIconLabel,
 				onClick: _cache[2] || (_cache[2] = (...args) => $setup.handleToggleTheme && $setup.handleToggleTheme(...args))
-			}, [renderSlot(_ctx.$slots, "theme-icon", {}, () => [$setup.theme === "light" ? (openBlock(), createElementBlock("svg", _hoisted_6$3, [..._cache[6] || (_cache[6] = [createStaticVNode("<circle cx=\"12\" cy=\"12\" r=\"5\"></circle><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"></line><line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"></line><line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"></line><line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"></line><line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\"></line><line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"></line><line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"></line><line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"></line>", 9)])])) : $setup.theme === "dark" ? (openBlock(), createElementBlock("svg", _hoisted_7$2, [..._cache[7] || (_cache[7] = [createElementVNode("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_8$2, [..._cache[8] || (_cache[8] = [createStaticVNode("<rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"></rect><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"></line><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"></line><circle cx=\"12\" cy=\"10\" r=\"3\"></circle><path d=\"M7 7l2 2M17 7l-2 2M7 13l2-2M17 13l-2-2\"></path>", 5)])]))])], 8, _hoisted_5$4)
+			}, [renderSlot(_ctx.$slots, "theme-icon", {}, () => [$setup.theme === "light" ? (openBlock(), createElementBlock("svg", _hoisted_6$3, [..._cache[6] || (_cache[6] = [createStaticVNode("<circle cx=\"12\" cy=\"12\" r=\"5\"></circle><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"></line><line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"></line><line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"></line><line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"></line><line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\"></line><line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"></line><line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"></line><line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"></line>", 9)])])) : $setup.theme === "dark" ? (openBlock(), createElementBlock("svg", _hoisted_7$2, [..._cache[7] || (_cache[7] = [createElementVNode("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_8$2, [..._cache[8] || (_cache[8] = [createStaticVNode("<rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"></rect><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"></line><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"></line><circle cx=\"12\" cy=\"10\" r=\"3\"></circle><path d=\"M7 7l2 2M17 7l-2 2M7 13l2-2M17 13l-2-2\"></path>", 5)])]))])], 8, _hoisted_5$3)
 		]),
-		createElementVNode("span", _hoisted_9$1, toDisplayString($setup.title), 1),
+		createElementVNode("span", _hoisted_9$2, toDisplayString($setup.title), 1),
 		createElementVNode("div", _hoisted_10, [createElementVNode("button", {
 			class: "opencode-header-btn close",
 			type: "button",
@@ -274,11 +253,11 @@ function __vue_render__$6(_ctx, _cache, $props, $setup, $data, $options) {
 		}, [createElementVNode("path", { d: "M18 6L6 18M6 6l12 12" })], -1))])])])
 	]);
 }
-__vue_sfc__$6.render = __vue_render__$6;
-var Header_vue_default = __vue_sfc__$6;
+__vue_sfc__$5.render = __vue_render__$5;
+var Header_vue_default = __vue_sfc__$5;
 //#endregion
 //#region es/open-code-widget/src/components/SelectHint.vue.js
-var __vue_sfc__$5 = /* @__PURE__ */ defineComponent({
+var __vue_sfc__$4 = /* @__PURE__ */ defineComponent({
 	__name: "SelectHint",
 	setup(__props, { expose: __expose }) {
 		__expose();
@@ -294,72 +273,12 @@ var __vue_sfc__$5 = /* @__PURE__ */ defineComponent({
 		return __returned__;
 	}
 });
-var _hoisted_1$5 = { class: "opencode-hint-shortcut" };
-function __vue_render__$5(_ctx, _cache, $props, $setup, $data, $options) {
-	return openBlock(), createElementBlock("div", { class: normalizeClass(["opencode-select-mode-hint", { visible: $setup.visible }]) }, [_cache[0] || (_cache[0] = createElementVNode("span", null, "🎯 选择模式已开启 - 点击元素进行选择", -1)), createElementVNode("span", _hoisted_1$5, toDisplayString($setup.shortcutLabel), 1)], 2);
-}
-__vue_sfc__$5.render = __vue_render__$5;
-var SelectHint_vue_default = __vue_sfc__$5;
-//#endregion
-//#region es/open-code-widget/src/components/SelectedBubbles.vue.js
-var __vue_sfc__$4 = /* @__PURE__ */ defineComponent({
-	__name: "SelectedBubbles",
-	setup(__props, { expose: __expose }) {
-		__expose();
-		const { bubbleVisible: visible, selectedElementItems: items, handleClickSelectedNode, handleRemoveSelectedNode } = useOpenCodeWidgetContext();
-		const __returned__ = {
-			visible,
-			items,
-			handleClickSelectedNode,
-			handleRemoveSelectedNode
-		};
-		Object.defineProperty(__returned__, "__isScriptSetup", {
-			enumerable: false,
-			value: true
-		});
-		return __returned__;
-	}
-});
-var _hoisted_1$4 = {
-	key: 0,
-	class: "opencode-bubble-empty"
-};
-var _hoisted_2$3 = ["onClick"];
-var _hoisted_3$3 = { class: "opencode-bubble-text" };
-var _hoisted_4$3 = {
-	key: 0,
-	class: "opencode-bubble-file"
-};
-var _hoisted_5$3 = ["aria-label", "onClick"];
+var _hoisted_1$4 = { class: "opencode-hint-shortcut" };
 function __vue_render__$4(_ctx, _cache, $props, $setup, $data, $options) {
-	return openBlock(), createElementBlock("div", {
-		class: normalizeClass(["opencode-selected-bubbles", { visible: $setup.visible }]),
-		role: "list",
-		"aria-label": "已选元素列表"
-	}, [$setup.items.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1$4, "暂无选中元素")) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList($setup.items, (item, index) => {
-		return openBlock(), createElementBlock("div", {
-			key: item.key,
-			class: "opencode-selected-bubble",
-			role: "listitem",
-			onClick: ($event) => $setup.handleClickSelectedNode(item)
-		}, [
-			createElementVNode("span", _hoisted_3$3, toDisplayString(item.description), 1),
-			item.bubbleFileText ? (openBlock(), createElementBlock("span", _hoisted_4$3, toDisplayString(item.bubbleFileText), 1)) : createCommentVNode("v-if", true),
-			createElementVNode("button", {
-				class: "opencode-bubble-remove",
-				type: "button",
-				"aria-label": `\u79FB\u9664\u5143\u7D20: ${item.description}`,
-				onClick: withModifiers(($event) => $setup.handleRemoveSelectedNode({
-					item,
-					index,
-					source: "bubble"
-				}), ["stop"])
-			}, " × ", 8, _hoisted_5$3)
-		], 8, _hoisted_2$3);
-	}), 128))], 2);
+	return openBlock(), createElementBlock("div", { class: normalizeClass(["opencode-select-mode-hint", { visible: $setup.visible }]) }, [_cache[0] || (_cache[0] = createElementVNode("span", null, "🎯 选择模式已开启 - 点击元素进行选择", -1)), createElementVNode("span", _hoisted_1$4, toDisplayString($setup.shortcutLabel), 1)], 2);
 }
 __vue_sfc__$4.render = __vue_render__$4;
-var SelectedBubbles_vue_default = __vue_sfc__$4;
+var SelectHint_vue_default = __vue_sfc__$4;
 //#endregion
 //#region es/open-code-widget/src/components/SelectedNodes.vue.js
 var __vue_sfc__$3 = /* @__PURE__ */ defineComponent({
@@ -488,7 +407,7 @@ var _hoisted_5$1 = ["aria-selected", "onClick"];
 var _hoisted_6$1 = { class: "opencode-session-header" };
 var _hoisted_7$1 = { class: "opencode-session-title" };
 var _hoisted_8$1 = ["aria-label", "onClick"];
-var _hoisted_9 = { class: "opencode-session-meta" };
+var _hoisted_9$1 = { class: "opencode-session-meta" };
 function __vue_render__$2(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("div", { class: normalizeClass(["opencode-session-list", { collapsed: $setup.collapsed }]) }, [
 		createCommentVNode(" Header "),
@@ -517,7 +436,7 @@ function __vue_render__$2(_ctx, _cache, $props, $setup, $data, $options) {
 				type: "button",
 				"aria-label": `\u5220\u9664\u4F1A\u8BDD: ${item.title}`,
 				onClick: withModifiers(($event) => $setup.handleDeleteSession(item), ["stop"])
-			}, " × ", 8, _hoisted_8$1)]), createElementVNode("div", _hoisted_9, toDisplayString(item.meta), 1)], 10, _hoisted_5$1);
+			}, " × ", 8, _hoisted_8$1)]), createElementVNode("div", _hoisted_9$1, toDisplayString(item.meta), 1)], 10, _hoisted_5$1);
 		}), 128)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createCommentVNode(" Empty State "), renderSlot(_ctx.$slots, "empty")], 64))])], 2112))
 	], 2);
 }
@@ -529,11 +448,12 @@ var __vue_sfc__$1 = /* @__PURE__ */ defineComponent({
 	__name: "Trigger",
 	setup(__props, { expose: __expose }) {
 		__expose();
-		const { buttonActive: active, open, hotkeyLabel, handleToggle } = useOpenCodeWidgetContext();
+		const { buttonActive: active, open, hotkeyLabel, thinking, handleToggle } = useOpenCodeWidgetContext();
 		const __returned__ = {
 			active,
 			open,
 			hotkeyLabel,
+			thinking,
 			handleToggle
 		};
 		Object.defineProperty(__returned__, "__isScriptSetup", {
@@ -546,7 +466,10 @@ var __vue_sfc__$1 = /* @__PURE__ */ defineComponent({
 var _hoisted_1$1 = ["aria-expanded", "title"];
 function __vue_render__$1(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("button", {
-		class: normalizeClass(["opencode-button", { active: $setup.active }]),
+		class: normalizeClass(["opencode-button", {
+			active: $setup.active,
+			thinking: $setup.thinking
+		}]),
 		type: "button",
 		"aria-expanded": $setup.open,
 		"aria-label": "打开 AI 助手",
@@ -1165,6 +1088,11 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			type: Boolean,
 			required: false,
 			default: true
+		},
+		thinking: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 	emits: [
@@ -1174,6 +1102,7 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 		"update:currentSessionId",
 		"update:selectedElements",
 		"update:theme",
+		"update:thinking",
 		"toggle",
 		"close",
 		"toggle-session-list",
@@ -1186,7 +1115,8 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 		"remove-selected-node",
 		"clear-selected-nodes",
 		"empty-action",
-		"frame-loaded"
+		"frame-loaded",
+		"thinking-change"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
@@ -1194,10 +1124,13 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 		const slots = useSlots();
 		const notificationMessage = ref("");
 		const notificationVisible = ref(false);
+		const notificationMode = ref("widget");
 		let notificationTimer = null;
-		const showNotification = (message, duration = 3e3) => {
+		const showNotification = (message, options) => {
+			const { duration = 3e3, mode = "widget" } = options || {};
 			notificationMessage.value = message;
 			notificationVisible.value = true;
+			notificationMode.value = mode;
 			if (notificationTimer) clearTimeout(notificationTimer);
 			notificationTimer = setTimeout(() => {
 				notificationVisible.value = false;
@@ -1221,12 +1154,18 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			dialogVisible.value = false;
 			if (dialogResolve) dialogResolve(false);
 		};
+		const frameRef = ref(null);
+		const sendMessageToIframe = (type, data) => {
+			var _a;
+			(_a = frameRef.value) == null || _a.sendMessageToIframe(type, data);
+		};
 		const handleFrameLoaded = () => {
 			emit("frame-loaded");
 		};
 		__expose({
 			showNotification,
-			showConfirmDialog
+			showConfirmDialog,
+			sendMessageToIframe
 		});
 		const localSessionListCollapsed = ref(props.sessionListCollapsed);
 		watch(() => props.sessionListCollapsed, (val) => {
@@ -1323,6 +1262,7 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			emptyStateActionText: toRef(props, "emptyStateActionText"),
 			showClearAll: toRef(props, "showClearAll"),
 			open: toRef(props, "open"),
+			thinking: toRef(props, "thinking"),
 			iframeSource,
 			buttonActive,
 			sessionListTitle,
@@ -1350,6 +1290,7 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			slots,
 			notificationMessage,
 			notificationVisible,
+			notificationMode,
 			get notificationTimer() {
 				return notificationTimer;
 			},
@@ -1368,6 +1309,8 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			showConfirmDialog,
 			handleDialogConfirm,
 			handleDialogCancel,
+			frameRef,
+			sendMessageToIframe,
 			handleFrameLoaded,
 			localSessionListCollapsed,
 			buttonActive,
@@ -1399,7 +1342,6 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			Frame: Frame_vue_default,
 			Header: Header_vue_default,
 			SelectHint: SelectHint_vue_default,
-			SelectedBubbles: SelectedBubbles_vue_default,
 			SelectedNodes: SelectedNodes_vue_default,
 			SessionList: SessionList_vue_default,
 			Trigger: Trigger_vue_default
@@ -1420,7 +1362,7 @@ var _hoisted_2 = { class: "opencode-chat-content" };
 var _hoisted_3 = { class: "opencode-tooltip-tag" };
 var _hoisted_4 = { class: "opencode-tooltip-file" };
 var _hoisted_5 = {
-	key: 1,
+	key: 0,
 	class: "opencode-dialog-overlay"
 };
 var _hoisted_6 = {
@@ -1430,6 +1372,11 @@ var _hoisted_6 = {
 };
 var _hoisted_7 = { class: "opencode-dialog-content" };
 var _hoisted_8 = { class: "opencode-dialog-message" };
+var _hoisted_9 = {
+	key: 0,
+	class: "opencode-page-notification",
+	role: "alert"
+};
 function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("div", { class: normalizeClass($setup.containerClasses) }, [
 		createVNode($setup["Trigger"], null, createSlots({ _: 2 }, [$setup.slots["button-icon"] ? {
@@ -1437,7 +1384,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
 			fn: withCtx(() => [renderSlot(_ctx.$slots, "button-icon")]),
 			key: "0"
 		} : void 0]), 1024),
-		$setup.bubbleVisible ? (openBlock(), createBlock($setup["SelectedBubbles"], { key: 0 })) : createCommentVNode("v-if", true),
+		createCommentVNode(" <SelectedBubbles v-if=\"bubbleVisible\" /> "),
 		withDirectives(createElementVNode("div", { class: normalizeClass(["opencode-chat", { open: $props.open }]) }, [
 			createVNode($setup["Header"], null, createSlots({ _: 2 }, [
 				$setup.slots["session-toggle-icon"] ? {
@@ -1457,13 +1404,13 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
 				} : void 0
 			]), 1024),
 			createCommentVNode(" Notification "),
-			$setup.notificationVisible ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString($setup.notificationMessage), 1)) : createCommentVNode("v-if", true),
+			$setup.notificationVisible && $setup.notificationMode === "widget" ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString($setup.notificationMessage), 1)) : createCommentVNode("v-if", true),
 			createElementVNode("div", _hoisted_2, [
 				createVNode($setup["SessionList"], null, {
 					empty: withCtx(() => [renderSlot(_ctx.$slots, "sessions-empty", {}, () => [_cache[0] || (_cache[0] = createElementVNode("div", { class: "opencode-session-empty" }, "暂无会话", -1))])]),
 					_: 3
 				}),
-				createVNode($setup["Frame"], null, createSlots({ _: 2 }, [
+				createVNode($setup["Frame"], { ref: "frameRef" }, createSlots({ _: 2 }, [
 					$setup.slots["empty-state"] ? {
 						name: "empty-state",
 						fn: withCtx(() => [renderSlot(_ctx.$slots, "empty-state")]),
@@ -1484,7 +1431,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
 						fn: withCtx(() => [renderSlot(_ctx.$slots, "content")]),
 						key: "3"
 					} : void 0
-				]), 1024),
+				]), 1536),
 				createVNode($setup["SelectedNodes"])
 			])
 		], 2), [[vShow, !$props.selectMode]]),
@@ -1506,7 +1453,9 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
 		}, "取消"), createElementVNode("button", {
 			class: "opencode-dialog-btn confirm",
 			onClick: $setup.handleDialogConfirm
-		}, "确认")])])])) : createCommentVNode("v-if", true)
+		}, "确认")])])])) : createCommentVNode("v-if", true),
+		createCommentVNode(" Page-level Notification "),
+		(openBlock(), createBlock(Teleport, { to: "body" }, [$setup.notificationVisible && $setup.notificationMode === "page" ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString($setup.notificationMessage), 1)) : createCommentVNode("v-if", true)]))
 	], 2);
 }
 __vue_sfc__.render = __vue_render__;
@@ -1515,7 +1464,7 @@ __vue_sfc__.render = __vue_render__;
 var open_code_widget_default = __vue_sfc__;
 //#endregion
 //#region es/index.js
-var version = "1.0.15";
+var version = "1.0.17";
 function install(app, options) {
 	[open_code_widget_default].forEach((item) => {
 		if (item.install) app.use(item, options);

package/lib/components.css

@@ -1,9 +1,8 @@
-.opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--oc-trigger-bg-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);--oc-trigger-bg-active: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--oc-trigger-shadow: 0 4px 15px rgba(102, 126, 234, .4);--oc-trigger-shadow-hover: 0 6px 20px rgba(102, 126, 234, .6);--oc-trigger-shadow-active: 0 6px 20px rgba(240, 147, 251, .4);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--oc-trigger-bg-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);--oc-trigger-bg-active: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--oc-trigger-shadow: 0 4px 15px rgba(102, 126, 234, .5);--oc-trigger-shadow-hover: 0 6px 20px rgba(102, 126, 234, .7);--oc-trigger-shadow-active: 0 6px 20px rgba(240, 147, 251, .5)}.opencode-widget.bottom-right{bottom:20px;right:20px}.opencode-widget.bottom-left{bottom:20px;left:20px}.opencode-widget.top-right{top:20px;right:20px}.opencode-widget.top-left{top:20px;left:20px}.opencode-chat{position:absolute;width:700px;height:86vh;background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:all .3s ease;display:flex;flex-direction:column}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-widget.bottom-right .opencode-chat{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-chat{bottom:56px;left:0}.opencode-widget.top-right .opencode-chat{top:56px;right:0}.opencode-widget.top-left .opencode-chat{top:56px;left:0}.opencode-widget.bottom-right .opencode-selected-bubbles{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-selected-bubbles{bottom:56px;left:0}.opencode-widget.top-right .opencode-selected-bubbles{top:56px;bottom:auto;right:0}.opencode-widget.top-left .opencode-selected-bubbles{top:56px;bottom:auto;left:0}.opencode-chat.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.opencode-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(59,130,246,.4),0 0 0 2px rgba(59,130,246,.2);animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.opencode-notification:before{content:"\1f4a1";font-size:16px}.opencode-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--oc-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.opencode-dialog{background:var(--oc-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--oc-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.opencode-dialog-content{margin-bottom:20px}.opencode-dialog-message{font-size:15px;color:var(--oc-text-primary);line-height:1.5}.opencode-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.opencode-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.opencode-dialog-btn.cancel{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-dialog-btn.cancel:hover{background:var(--oc-text-primary);color:var(--oc-bg-main)}.opencode-dialog-btn.confirm{background:var(--oc-danger);color:#fff}.opencode-dialog-btn.confirm:hover{background:var(--oc-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.opencode-element-highlight{position:fixed;pointer-events:none;z-index:999998;display:none;transition:all .1s ease;border-radius:4px}#vue-inspector-container{display:none!important}.opencode-element-tooltip{position:fixed;background:var(--oc-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;display:none;box-shadow:var(--oc-shadow-md);max-width:300px;pointer-events:none}.opencode-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.opencode-tooltip-file{font-size:11px;color:var(--oc-text-placeholder);word-break:break-all}.opencode-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.opencode-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}
+.opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-thinking-gradient-1: #10b981;--oc-thinking-gradient-2: #059669;--oc-thinking-glow: rgba(16, 185, 129, .3);--oc-thinking-glow-strong: rgba(16, 185, 129, .6);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: #3b82f6;--oc-trigger-bg-hover: #2563eb;--oc-trigger-bg-active: #1d4ed8;--oc-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--oc-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--oc-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-thinking-gradient-1: #34d399;--oc-thinking-gradient-2: #10b981;--oc-thinking-glow: rgba(52, 211, 153, .3);--oc-thinking-glow-strong: rgba(52, 211, 153, .6);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: #60a5fa;--oc-trigger-bg-hover: #3b82f6;--oc-trigger-bg-active: #2563eb;--oc-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--oc-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--oc-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.opencode-widget.bottom-right{bottom:20px;right:20px}.opencode-widget.bottom-left{bottom:20px;left:20px}.opencode-widget.top-right{top:20px;right:20px}.opencode-widget.top-left{top:20px;left:20px}.opencode-chat{position:absolute;width:700px;height:86vh;background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:all .3s ease;display:flex;flex-direction:column}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-widget.bottom-right .opencode-chat{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-chat{bottom:56px;left:0}.opencode-widget.top-right .opencode-chat{top:56px;right:0}.opencode-widget.top-left .opencode-chat{top:56px;left:0}.opencode-widget.bottom-right .opencode-selected-bubbles{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-selected-bubbles{bottom:56px;left:0}.opencode-widget.top-right .opencode-selected-bubbles{top:56px;bottom:auto;right:0}.opencode-widget.top-left .opencode-selected-bubbles{top:56px;bottom:auto;left:0}.opencode-chat.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.opencode-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(59,130,246,.4),0 0 0 2px rgba(59,130,246,.2);animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.opencode-notification:before{content:"\1f4a1";font-size:16px}.opencode-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--oc-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.opencode-dialog{background:var(--oc-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--oc-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.opencode-dialog-content{margin-bottom:20px}.opencode-dialog-message{font-size:15px;color:var(--oc-text-primary);line-height:1.5}.opencode-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.opencode-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.opencode-dialog-btn.cancel{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-dialog-btn.cancel:hover{background:var(--oc-text-primary);color:var(--oc-bg-main)}.opencode-dialog-btn.confirm{background:var(--oc-danger);color:#fff}.opencode-dialog-btn.confirm:hover{background:var(--oc-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.opencode-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(59,130,246,.4),0 0 0 2px rgba(59,130,246,.2);animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-page-notification:before{content:"\1f4a1";font-size:16px}.opencode-element-highlight{position:fixed;pointer-events:none;z-index:999998;display:none;transition:all .1s ease;border-radius:4px}#vue-inspector-container{display:none!important}.opencode-element-tooltip{position:fixed;background:var(--oc-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;display:none;box-shadow:var(--oc-shadow-md);max-width:300px;pointer-events:none}.opencode-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.opencode-tooltip-file{font-size:11px;color:var(--oc-text-placeholder);word-break:break-all}.opencode-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.opencode-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}
 .opencode-iframe-container{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;margin-top:-42px}.opencode-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-overlay-bg);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:10;transition:opacity .3s ease}.opencode-loading-overlay.visible{display:flex}.opencode-loading-spinner{width:40px;height:40px;border:3px solid var(--oc-border-primary);border-top-color:var(--oc-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.opencode-loading-text{margin-top:12px;font-size:14px;color:var(--oc-text-placeholder)}.opencode-error-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:15;margin-top:42px;display:none}.opencode-error-overlay.visible{display:flex}.opencode-empty-state-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-bg-secondary);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:5;transition:opacity .3s ease;margin-top:42px}.opencode-empty-state-overlay.visible{display:flex}.opencode-empty-state-icon{color:var(--oc-text-placeholder);margin-bottom:16px}.opencode-empty-state-text{color:var(--oc-text-primary);font-size:16px;font-weight:500;margin-bottom:24px}.opencode-empty-state-btn{padding:10px 24px;border-radius:8px;border:none;background:var(--oc-primary);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;box-shadow:var(--oc-shadow-primary)}.opencode-empty-state-btn:hover{background:var(--oc-primary-hover);transform:translateY(-1px);box-shadow:var(--oc-shadow-primary-hover)}.opencode-empty-state-btn:active{transform:translateY(0)}.opencode-iframe{width:100%;height:100%;border:none}
 .opencode-chat-header{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:40px;background:var(--oc-bg-secondary);border-bottom:1px solid var(--oc-border-primary);z-index:5}.opencode-chat-header-left{display:flex;align-items:center;gap:4px}.opencode-chat-header-title{font-size:14px;font-weight:600;color:var(--oc-text-primary);position:absolute;left:50%;transform:translate(-50%)}.opencode-chat-header-actions{display:flex;gap:4px}.opencode-header-btn{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--oc-text-placeholder);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-header-btn:hover{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-header-btn.close:hover{background:var(--oc-danger);color:#fff}.opencode-header-btn.select-btn.active,.opencode-header-btn.session-toggle.active{background:var(--oc-primary);color:#fff}
 .opencode-select-mode-hint{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:10px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border-radius:12px;font-size:14px;font-weight:500;box-shadow:0 6px 20px rgba(239,68,68,.5),0 0 0 3px rgba(239,68,68,.3);z-index:9999999;display:none;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.3)}.opencode-select-mode-hint.visible{display:flex;animation:slideDown .3s ease,pulseHint 2s ease-in-out infinite}.opencode-hint-shortcut{padding:4px 10px;background:rgba(255,255,255,.25);border-radius:6px;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.4)}@keyframes pulseHint{0%,to{box-shadow:0 6px 20px rgba(239,68,68,.5),0 0 0 3px rgba(239,68,68,.3)}50%{box-shadow:0 6px 20px rgba(239,68,68,.6),0 0 0 6px rgba(239,68,68,.4)}}
-.opencode-selected-bubbles{position:absolute;display:none;flex-direction:column;gap:6px;max-width:220px;max-height:300px;overflow-y:auto}.opencode-selected-bubbles.visible{display:flex}.opencode-selected-bubble{display:flex;flex-direction:column;gap:2px;padding:8px 24px 8px 10px;background:var(--oc-bg-main);border:1px solid var(--oc-border-primary);border-radius:8px;font-size:12px;box-shadow:var(--oc-shadow-sm);position:relative;cursor:pointer;transition:all .2s}.opencode-selected-bubble:hover{border-color:var(--oc-primary);box-shadow:var(--oc-shadow-primary)}.opencode-bubble-text{color:var(--oc-text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-bubble-file{color:var(--oc-text-placeholder);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-bubble-remove{position:absolute;top:8px;right:6px;width:16px;height:16px;border-radius:50%;border:none;background:transparent;color:var(--oc-text-placeholder);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .2s}.opencode-bubble-remove:hover{background:var(--oc-danger);color:#fff}.opencode-bubble-empty{padding:8px 12px;background:var(--oc-bg-main);border:1px dashed var(--oc-border-secondary);border-radius:8px;color:var(--oc-text-placeholder);font-size:12px;text-align:center}
 .opencode-right-toolbar{width:140px;background:var(--oc-bg-secondary);border-left:1px solid var(--oc-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease;overflow:hidden}.opencode-right-toolbar.collapsed{width:0;overflow:hidden}.opencode-right-toolbar.collapsed .opencode-selected-nodes-header,.opencode-right-toolbar.collapsed .opencode-selected-nodes,.opencode-right-toolbar.collapsed .opencode-clear-all-btn{display:none}.opencode-selected-nodes-header{padding:12px 8px 8px;border-bottom:1px solid var(--oc-border-primary)}.opencode-selected-nodes-title{font-size:14px;font-weight:600;color:var(--oc-text-primary);margin-bottom:4px}.opencode-selected-nodes-desc{font-size:11px;color:var(--oc-text-placeholder);line-height:1.4}.opencode-selected-nodes{flex:1;display:flex;flex-direction:column;padding:8px;gap:6px;overflow-y:auto;overflow-x:hidden}.opencode-selected-nodes:empty:before{content:"\6682\65e0\9009\4e2d\5143\7d20";color:var(--oc-text-placeholder);font-size:12px;text-align:center;padding:20px 10px}.opencode-selected-node{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--oc-bg-main);border:1px solid var(--oc-border-primary);border-radius:6px;font-size:12px;transition:all .2s}.opencode-selected-node:hover{border-color:var(--oc-primary);box-shadow:var(--oc-shadow-primary)}.opencode-node-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.opencode-node-text{color:var(--oc-text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-node-file{color:var(--oc-text-placeholder);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-node-remove{width:18px;height:18px;border-radius:4px;border:none;background:transparent;color:var(--oc-text-placeholder);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;flex-shrink:0}.opencode-node-remove:hover{background:var(--oc-danger);color:#fff}.opencode-clear-all-btn{width:calc(100% - 16px);margin:8px;padding:8px 12px;border-radius:6px;border:none;background:var(--oc-danger);color:#fff;font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .2s}.opencode-clear-all-btn:hover{background:var(--oc-danger-hover);transform:scale(1.02)}
 .opencode-session-list{width:240px;background:var(--oc-bg-secondary);border-right:1px solid var(--oc-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.opencode-session-list.collapsed{width:0;overflow:hidden}.opencode-session-list.collapsed .opencode-session-list-header,.opencode-session-list.collapsed .opencode-session-list-content{display:none}.opencode-session-list-header{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:var(--oc-text-primary)}.opencode-new-session-btn{width:28px;height:28px;border-radius:6px;border:none;background:var(--oc-primary);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-new-session-btn:hover{background:var(--oc-primary-hover);transform:scale(1.05)}.opencode-session-list-content{flex:1;overflow-y:auto;padding:8px;position:relative}.opencode-session-list-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:8px}.opencode-loading-spinner.small{width:24px;height:24px;border-width:2px}.opencode-session-item{padding:12px;border-radius:8px;cursor:pointer;transition:transform .2s;margin-bottom:4px;color:var(--oc-text-primary)}.opencode-session-item:hover{background:var(--oc-bg-tertiary)}.opencode-session-item.active{background:var(--oc-primary);color:#fff;transition:none}.opencode-session-title{font-size:14px;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-session-meta{font-size:12px;opacity:.6}.opencode-session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.opencode-session-delete-btn{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--oc-text-placeholder);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0;flex-shrink:0}.opencode-session-item:hover .opencode-session-delete-btn{opacity:1}.opencode-session-delete-btn:hover{background:var(--oc-danger);color:#fff}.opencode-session-item.active .opencode-session-delete-btn{color:rgba(255,255,255,.7)}.opencode-session-item.active .opencode-session-delete-btn:hover{background:rgba(255,255,255,.2);color:#fff}.opencode-session-header-skeleton{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:none;justify-content:space-between;align-items:center}.opencode-session-header-skeleton.visible{display:flex}.opencode-skeleton-header-title{height:18px;width:80px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.opencode-skeleton-header-btn{width:28px;height:28px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:6px}.opencode-session-skeleton{flex:1;overflow-y:auto;padding:8px;display:none}.opencode-session-skeleton.visible{display:block}.opencode-skeleton-item{padding:12px;border-radius:8px;margin-bottom:4px;background:var(--oc-skeleton-bg)}.opencode-skeleton-title{height:16px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;margin-bottom:8px;width:70%}.opencode-skeleton-meta{height:12px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;width:50%}.opencode-session-empty{padding:32px 16px;text-align:center;color:var(--oc-text-placeholder);font-size:13px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}
-.opencode-button{width:44px;height:44px;border-radius:50%;background:var(--oc-trigger-bg);border:none;cursor:pointer;box-shadow:var(--oc-trigger-shadow);transition:all .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;padding:0;position:relative}.opencode-button:before{content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border-radius:50%}.opencode-button:hover{transform:scale(1.1);box-shadow:var(--oc-trigger-shadow-hover);background:var(--oc-trigger-bg-hover)}.opencode-button.active{background:var(--oc-trigger-bg-active);box-shadow:var(--oc-trigger-shadow-active)}.opencode-button.active svg{transform:rotate(180deg)}.opencode-button svg{transition:transform .3s ease}.opencode-button.loading{animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}
+.opencode-button{width:44px;height:44px;border-radius:50%;background:var(--oc-trigger-bg);border:none;cursor:pointer;box-shadow:var(--oc-trigger-shadow);transition:all .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;padding:0;position:relative;overflow:visible}.opencode-button svg{transform:rotate(180deg);transition:transform .3s ease}.opencode-button:before{content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border-radius:50%}.opencode-button:hover{transform:scale(1.1);box-shadow:var(--oc-trigger-shadow-hover);background:var(--oc-trigger-bg-hover)}.opencode-button.thinking{background:linear-gradient(135deg,#667eea,#764ba2,#667eea);background-size:200% 200%;animation:thinking-gradient 2s ease infinite,thinking-pulse 2s ease-in-out infinite;box-shadow:0 0 20px rgba(102,126,234,.5),0 0 40px rgba(118,75,162,.3)}.opencode-button.thinking svg{animation:none}.opencode-button.thinking:before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(102,126,234,.7) 0%,rgba(118,75,162,.5) 50%,transparent 70%);transform:translate(-50%,-50%);animation:ripple-wave 2s ease-out infinite;pointer-events:none}.opencode-button.thinking:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(118,75,162,.6) 0%,rgba(102,126,234,.4) 50%,transparent 70%);transform:translate(-50%,-50%);animation:ripple-wave 2s ease-out infinite;animation-delay:1s;pointer-events:none}@keyframes thinking-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes ripple-wave{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}to{transform:translate(-50%,-50%) scale(2.5);opacity:0}}@keyframes thinking-pulse{0%,to{transform:scale(1)}50%{transform:scale(.9)}}.opencode-button.loading{animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}
 /*$vite$:1*/

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 import OpenCodeWidget from './open-code-widget';
 import type { App } from 'vue';
-declare const version = "1.0.15";
+declare const version = "1.0.17";
 declare function install(app: App<any>, options?: any): void;
 export { install, version, OpenCodeWidget };
 export default install;

package/lib/index.js

@@ -34,7 +34,7 @@ __export(lib_exports, {
 });
 module.exports = __toCommonJS(lib_exports);
 var import_open_code_widget = __toESM(require("./open-code-widget"));
-const version = "1.0.15";
+const version = "1.0.17";
 function install(app, options) {
   const components = [
     import_open_code_widget.default

package/lib/open-code-widget/src/components/Frame.vue.d.ts

@@ -1,3 +1,4 @@
+declare function sendMessageToIframe(type: string, data?: Record<string, unknown>): void;
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
     'empty-state'?: (props: typeof __VLS_1) => any;
@@ -8,7 +9,9 @@ type __VLS_Slots = {} & {
 } & {
     content?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    sendMessageToIframe: typeof sendMessageToIframe;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/lib/open-code-widget/src/components/Frame.vue.js

@@ -42,7 +42,6 @@ var import_vue3 = require("vue");
 const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
   __name: "Frame",
   setup(__props, { expose: __expose }) {
-    __expose();
     const iframeRef = (0, import_vue2.ref)(null);
     const {
       frameLoading,
@@ -52,41 +51,24 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       emptyStateText,
       emptyStateActionText,
       handleEmptyAction,
-      handleFrameLoaded,
-      theme,
-      resolvedTheme
+      handleFrameLoaded
     } = (0, import_context.useOpenCodeWidgetContext)();
-    const iframeReady = (0, import_vue2.ref)(false);
     function sendMessageToIframe(type, data) {
       var _a;
       if (!((_a = iframeRef.value) == null ? void 0 : _a.contentWindow)) return;
       iframeRef.value.contentWindow.postMessage(__spreadValues({ type }, data), "*");
     }
-    function syncIframeTheme() {
-      sendMessageToIframe("OPENCODE_SET_THEME", { theme: resolvedTheme.value });
-    }
-    function handleIframeMessage(event) {
-      var _a;
-      if (((_a = event.data) == null ? void 0 : _a.type) === "OPENCODE_READY") {
-        syncIframeTheme();
-      }
-    }
-    (0, import_vue2.watch)([theme, resolvedTheme], () => {
-      syncIframeTheme();
-    });
     (0, import_vue2.onMounted)(() => {
       if (iframeRef.value) {
         iframeRef.value.addEventListener("load", () => {
-          iframeReady.value = true;
           handleFrameLoaded();
         });
       }
-      window.addEventListener("message", handleIframeMessage);
     });
-    (0, import_vue2.onUnmounted)(() => {
-      window.removeEventListener("message", handleIframeMessage);
+    __expose({
+      sendMessageToIframe
     });
-    const __returned__ = { iframeRef, frameLoading, showEmptyState, showError, iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction, handleFrameLoaded, theme, resolvedTheme, iframeReady, sendMessageToIframe, syncIframeTheme, handleIframeMessage };
+    const __returned__ = { iframeRef, frameLoading, showEmptyState, showError, iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction, handleFrameLoaded, sendMessageToIframe };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }