@vite-plugin-opencode-assistant/components 1.0.26 → 1.0.28

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

@@ -37,7 +37,8 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       handleCreateSession,
       handleSelectSession,
       handleDeleteSession,
-      sessionKey
+      sessionKey,
+      sessionStates
     } = (0, import_context.useOpenCodeWidgetContext)();
     const isAnimating = (0, import_vue2.ref)(false);
     let animTimer = null;
@@ -53,11 +54,16 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       if (showSessionListSkeleton.value) return true;
       return false;
     });
-    const __returned__ = { collapsed, sessions, loadingSessionList, showSessionListSkeleton, handleCreateSession, handleSelectSession, handleDeleteSession, sessionKey, isAnimating, get animTimer() {
+    function isSessionThinking(sessionId) {
+      var _a, _b;
+      if (!(sessionStates == null ? void 0 : sessionStates.value) || !sessionId) return false;
+      return (_b = (_a = sessionStates.value[sessionId]) == null ? void 0 : _a.thinking) != null ? _b : false;
+    }
+    const __returned__ = { collapsed, sessions, loadingSessionList, showSessionListSkeleton, handleCreateSession, handleSelectSession, handleDeleteSession, sessionKey, sessionStates, isAnimating, get animTimer() {
       return animTimer;
     }, set animTimer(v) {
       animTimer = v;
-    }, showSkeleton };
+    }, showSkeleton, isSessionThinking };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -82,8 +88,12 @@ const _hoisted_4 = {
 const _hoisted_5 = ["aria-selected", "onClick"];
 const _hoisted_6 = { class: "opencode-session-header" };
 const _hoisted_7 = { class: "opencode-session-title" };
-const _hoisted_8 = ["aria-label", "onClick"];
-const _hoisted_9 = { class: "opencode-session-meta" };
+const _hoisted_8 = {
+  key: 0,
+  class: "opencode-thinking-loading"
+};
+const _hoisted_9 = ["aria-label", "onClick"];
+const _hoisted_10 = { class: "opencode-session-meta" };
 function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
   return (0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)(
     "div",
@@ -176,29 +186,30 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
               (0, import_vue3.renderList)($setup.sessions, (item) => {
                 return (0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("div", {
                   key: item[$setup.sessionKey],
-                  class: (0, import_vue3.normalizeClass)(["opencode-session-item", { active: item.active }]),
+                  class: (0, import_vue3.normalizeClass)(["opencode-session-item", { active: item.active, thinking: $setup.isSessionThinking(item.id) }]),
                   role: "option",
                   "aria-selected": item.active,
                   onClick: ($event) => $setup.handleSelectSession(item)
                 }, [
                   (0, import_vue3.createElementVNode)("div", _hoisted_6, [
-                    (0, import_vue3.createElementVNode)(
-                      "div",
-                      _hoisted_7,
-                      (0, import_vue3.toDisplayString)(item.title),
-                      1
-                      /* TEXT */
-                    ),
+                    (0, import_vue3.createElementVNode)("div", _hoisted_7, [
+                      $setup.isSessionThinking(item.id) ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("span", _hoisted_8)) : (0, import_vue3.createCommentVNode)("v-if", true),
+                      (0, import_vue3.createTextVNode)(
+                        " " + (0, import_vue3.toDisplayString)(item.title),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
                     (0, import_vue3.createElementVNode)("button", {
                       class: "opencode-session-delete-btn",
                       type: "button",
                       "aria-label": `\u5220\u9664\u4F1A\u8BDD: ${item.title}`,
                       onClick: (0, import_vue3.withModifiers)(($event) => $setup.handleDeleteSession(item), ["stop"])
-                    }, " \xD7 ", 8, _hoisted_8)
+                    }, " \xD7 ", 8, _hoisted_9)
                   ]),
                   (0, import_vue3.createElementVNode)(
                     "div",
-                    _hoisted_9,
+                    _hoisted_10,
                     (0, import_vue3.toDisplayString)(item.meta),
                     1
                     /* TEXT */

package/lib/open-code-widget/src/components/Trigger-sfc.css

@@ -1 +1 @@
-.opencode-button{width:42px;height:42px;border-radius:50%;background:#fff;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(102,126,234,.4);transition:all .3s ease;display:flex;align-items:center;justify-content:center;padding:0;position:relative}.opencode-button svg{transform:rotate(180deg) scale(1.1);transition:transform .3s ease;width:100%;height:100%;display:block}.opencode-button:hover svg{transform:rotate(180deg) scale(1.1)}.opencode-button:hover{transform:scale(1.1);box-shadow:0 6px 16px rgba(102,126,234,.5)}.opencode-button.thinking{background:linear-gradient(135deg,#667eea,#764ba2);animation:thinking-glow 1.5s ease-in-out infinite,thinking-pulse 1.5s ease-in-out infinite;box-shadow:0 0 20px rgba(102,126,234,.6),0 0 40px rgba(118,75,162,.4),0 0 60px rgba(102,126,234,.2)}.opencode-button.thinking svg path{fill:#fff}.opencode-button.thinking:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-button.thinking:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:conic-gradient(from 180deg,transparent,rgba(102,126,234,.3),transparent,rgba(118,75,162,.3),transparent);z-index:-2;animation:thinking-rotate 2s linear infinite reverse;filter:blur(8px)}@keyframes thinking-glow{0%,to{box-shadow:0 0 20px rgba(102,126,234,.6),0 0 40px rgba(118,75,162,.4),0 0 60px rgba(102,126,234,.2)}50%{box-shadow:0 0 30px rgba(102,126,234,.8),0 0 60px rgba(118,75,162,.6),0 0 90px rgba(102,126,234,.3)}}@keyframes thinking-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes thinking-pulse{0%,to{transform:scale(1)}50%{transform:scale(.95)}}.opencode-button.opencode-theme-dark{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 12px rgba(102,126,234,.3)}.opencode-button.opencode-theme-dark:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-button.opencode-theme-dark:hover{box-shadow:0 6px 16px rgba(102,126,234,.4)}.opencode-button.opencode-theme-dark svg path{fill:#fff}
+.opencode-button{width:42px;height:42px;border-radius:50%;background:#fff;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(102,126,234,.4);transition:all .3s ease;display:flex;align-items:center;justify-content:center;padding:0;position:relative}.opencode-button svg{transform:rotate(180deg) scale(1.1);transition:transform .3s ease;width:100%;height:100%;display:block}.opencode-button:hover svg{transform:rotate(180deg) scale(1.1)}.opencode-button:hover{transform:scale(1.1);box-shadow:0 6px 16px rgba(102,126,234,.5)}.opencode-button.thinking{background:linear-gradient(135deg,#667eea,#764ba2);animation:thinking-glow 1.5s ease-in-out infinite,thinking-pulse 1.5s ease-in-out infinite;box-shadow:0 0 20px rgba(102,126,234,.6),0 0 40px rgba(118,75,162,.4),0 0 60px rgba(102,126,234,.2)}.opencode-button.thinking svg path{fill:#fff}.opencode-button.thinking:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-button.thinking:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:conic-gradient(from 180deg,transparent,rgba(102,126,234,.3),transparent,rgba(118,75,162,.3),transparent);z-index:-2;animation:thinking-rotate 2s linear infinite reverse;filter:blur(8px)}@keyframes thinking-glow{0%,to{box-shadow:0 0 20px rgba(102,126,234,.6),0 0 40px rgba(118,75,162,.4),0 0 60px rgba(102,126,234,.2)}50%{box-shadow:0 0 30px rgba(102,126,234,.8),0 0 60px rgba(118,75,162,.6),0 0 90px rgba(102,126,234,.3)}}@keyframes thinking-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes thinking-pulse{0%,to{transform:scale(1)}50%{transform:scale(.85)}}.opencode-button.opencode-theme-dark{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 12px rgba(102,126,234,.3)}.opencode-button.opencode-theme-dark:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-button.opencode-theme-dark:hover{box-shadow:0 6px 16px rgba(102,126,234,.4)}.opencode-button.opencode-theme-dark svg path{fill:#fff}

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

@@ -12,11 +12,9 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
         y: number;
     } | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "offset-change": (offset: FloatingBubbleOffset | undefined) => any;
     "drag-start": () => any;
     "drag-end": () => any;
 }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    "onOffset-change"?: ((offset: FloatingBubbleOffset | undefined) => any) | undefined;
     "onDrag-start"?: (() => any) | undefined;
     "onDrag-end"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -36,10 +36,9 @@ var import_vue2 = require("vue");
 var import_context = require("../context");
 var import_FloatingBubble_vue = __toESM(require("./FloatingBubble/FloatingBubble.vue.js"));
 var import_vue3 = require("vue");
-const STORAGE_KEY = "opencode-bubble-offset";
 const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
   __name: "Trigger",
-  emits: ["offset-change", "drag-start", "drag-end"],
+  emits: ["drag-start", "drag-end"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const {
       buttonActive: active,
@@ -47,39 +46,23 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       hotkeyLabel,
       thinking,
       resolvedTheme,
-      handleToggle
+      handleToggle,
+      bubbleOffset,
+      handleBubbleOffsetChange
     } = (0, import_context.useOpenCodeWidgetContext)();
-    const loadOffset = () => {
-      try {
-        const saved = localStorage.getItem(STORAGE_KEY);
-        if (saved) {
-          const parsed = JSON.parse(saved);
-          if (parsed && (parsed.x !== 0 || parsed.y !== 0)) {
-            return parsed;
-          }
-        }
-      } catch (e) {
-      }
-      return void 0;
-    };
-    const offset = (0, import_vue2.ref)(loadOffset());
+    const offset = (0, import_vue2.ref)(bubbleOffset.value);
     const emit = __emit;
-    const saveOffset = (value) => {
-      try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
-      } catch (e) {
-      }
-    };
     const handleOffsetChange = (value) => {
       offset.value = value;
-      saveOffset(value);
-      emit("offset-change", value);
+      handleBubbleOffsetChange(value);
     };
-    (0, import_vue2.watch)(offset, handleOffsetChange, { immediate: true });
+    (0, import_vue2.watch)(bubbleOffset, (newOffset) => {
+      offset.value = newOffset;
+    });
     __expose({
       offset
     });
-    const __returned__ = { active, open, hotkeyLabel, thinking, resolvedTheme, handleToggle, STORAGE_KEY, loadOffset, offset, emit, saveOffset, handleOffsetChange, FloatingBubble: import_FloatingBubble_vue.default };
+    const __returned__ = { active, open, hotkeyLabel, thinking, resolvedTheme, handleToggle, bubbleOffset, handleBubbleOffsetChange, offset, emit, handleOffsetChange, FloatingBubble: import_FloatingBubble_vue.default };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }

package/lib/open-code-widget/src/context.d.ts

@@ -1,5 +1,6 @@
 import { type Ref } from "vue";
-import type { OpenCodeWidgetSessionItem, OpenCodeSelectedElementItem, OpenCodeRemoveSelectedPayload } from "./types";
+import type { OpenCodeWidgetSessionItem, OpenCodeSelectedElementItem, OpenCodeRemoveSelectedPayload, OpencodeSessionThinkingState } from "./types";
+import type { FloatingBubbleOffset } from "./components/FloatingBubble/types";
 export interface OpenCodeWidgetContext {
     theme: Ref<string>;
     resolvedTheme: Ref<"light" | "dark">;
@@ -22,6 +23,8 @@ export interface OpenCodeWidgetContext {
     thinking: Ref<boolean>;
     minimized: Ref<boolean>;
     promptDockVisible: Ref<boolean>;
+    bubbleOffset: Ref<FloatingBubbleOffset | undefined>;
+    sessionStates: Ref<Record<string, OpencodeSessionThinkingState>>;
     iframeSource: Ref<string>;
     buttonActive: Ref<boolean>;
     sessionListTitle: Ref<string>;
@@ -48,6 +51,7 @@ export interface OpenCodeWidgetContext {
     }) => void;
     handleClearSelectedNodes: () => void;
     handleFrameLoaded: () => void;
+    handleBubbleOffsetChange: (offset: FloatingBubbleOffset | undefined) => void;
 }
 export declare function provideOpenCodeWidgetContext(context: OpenCodeWidgetContext): void;
 export declare function useOpenCodeWidgetContext(): OpenCodeWidgetContext;

package/lib/open-code-widget/src/index-sfc.css

@@ -1 +1 @@
-.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-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.opencode-chat.minimized{width:300px;height:300px}.opencode-chat.minimized .opencode-iframe-container{margin-top:-146px}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-chat.open{opacity:1;visibility:visible;transform:translateZ(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-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-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.opencode-chat.open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.opencode-chat.no-transition,.opencode-chat.no-transition.open{transition:none!important}.opencode-chat.minimized{width:300px;height:300px}.opencode-chat.minimized .opencode-iframe-container{margin-top:-146px}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.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;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;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)}}

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

@@ -1,23 +1,23 @@
 import type { OpenCodeWidgetProps } from "./types";
-declare var __VLS_12: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {}, __VLS_26: {}, __VLS_33: {}, __VLS_35: {}, __VLS_37: {}, __VLS_39: {};
+declare var __VLS_11: {}, __VLS_16: {}, __VLS_18: {}, __VLS_20: {}, __VLS_25: {}, __VLS_32: {}, __VLS_34: {}, __VLS_36: {}, __VLS_38: {};
 type __VLS_Slots = {} & {
-    'button-icon'?: (props: typeof __VLS_12) => any;
+    'button-icon'?: (props: typeof __VLS_11) => any;
 } & {
-    'session-toggle-icon'?: (props: typeof __VLS_17) => any;
+    'session-toggle-icon'?: (props: typeof __VLS_16) => any;
 } & {
-    'select-icon'?: (props: typeof __VLS_19) => any;
+    'select-icon'?: (props: typeof __VLS_18) => any;
 } & {
-    'close-icon'?: (props: typeof __VLS_21) => any;
+    'close-icon'?: (props: typeof __VLS_20) => any;
 } & {
-    'sessions-empty'?: (props: typeof __VLS_26) => any;
+    'sessions-empty'?: (props: typeof __VLS_25) => any;
 } & {
-    'empty-state'?: (props: typeof __VLS_33) => any;
+    'empty-state'?: (props: typeof __VLS_32) => any;
 } & {
-    loading?: (props: typeof __VLS_35) => any;
+    loading?: (props: typeof __VLS_34) => any;
 } & {
-    error?: (props: typeof __VLS_37) => any;
+    error?: (props: typeof __VLS_36) => any;
 } & {
-    content?: (props: typeof __VLS_39) => any;
+    content?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps, {
     showNotification: (message: string, options?: {
@@ -87,9 +87,9 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
     showSessionListSkeleton: boolean;
     sessionKey: string;
     sessions: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetSession[];
+    thinking: boolean;
     open: boolean;
     hotkeyLabel: string;
-    thinking: boolean;
     currentSessionId: string | null;
     selectedElements: import("@vite-plugin-opencode-assistant/shared").OpenCodeSelectedElement[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/lib/open-code-widget/src/index.vue.js

@@ -60,6 +60,7 @@ var import_use_selection = require("../composables/use-selection");
 var import_use_session = require("../composables/use-session");
 var import_use_widget = require("../composables/use-widget");
 var import_use_inspector = require("../composables/use-inspector");
+var import_use_persist_state = require("../composables/use-persist-state");
 var import_context = require("./context");
 var import_vue3 = require("vue");
 const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProps(__spreadValues({}, {
@@ -88,7 +89,8 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
     selectedElements: { type: Array, required: false, default: () => [] },
     showClearAll: { type: Boolean, required: false, default: true },
     selectEnabled: { type: Boolean, required: false, default: true },
-    thinking: { type: Boolean, required: false, default: false }
+    thinking: { type: Boolean, required: false, default: false },
+    sessionStates: { type: Object, required: false }
   },
   emits: ["update:open", "update:selectMode", "update:sessionListCollapsed", "update:currentSessionId", "update:selectedElements", "update:theme", "update:thinking", "toggle", "close", "toggle-session-list", "toggle-select-mode", "toggle-theme", "create-session", "select-session", "delete-session", "click-selected-node", "remove-selected-node", "clear-selected-nodes", "empty-action", "frame-loaded", "thinking-change"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -137,17 +139,26 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       var _a;
       (_a = frameRef.value) == null ? void 0 : _a.sendMessageToIframe(type, data);
     };
+    const localSessionListCollapsed = (0, import_vue2.ref)(props.sessionListCollapsed);
+    const minimized = (0, import_vue2.ref)(false);
+    const promptDockVisible = (0, import_vue2.ref)(true);
+    const isRestoring = (0, import_vue2.ref)(true);
+    const iframeLoaded = (0, import_vue2.ref)(false);
+    const syncStateToIframe = () => {
+      if (!iframeLoaded.value) return;
+      sendMessageToIframe("prompt-dock-visibility-change", { visible: promptDockVisible.value });
+      sendMessageToIframe("minimize-state-change", { minimized: minimized.value });
+    };
     const handleFrameLoaded = () => {
       emit("frame-loaded");
+      iframeLoaded.value = true;
+      syncStateToIframe();
     };
     __expose({
       showNotification,
       showConfirmDialog,
       sendMessageToIframe
     });
-    const localSessionListCollapsed = (0, import_vue2.ref)(props.sessionListCollapsed);
-    const minimized = (0, import_vue2.ref)(false);
-    const promptDockVisible = (0, import_vue2.ref)(true);
     (0, import_vue2.watch)(
       () => props.sessionListCollapsed,
       (val) => {
@@ -244,6 +255,53 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
         emit("toggle-select-mode", false);
       }
     });
+    const bubbleOffset = (0, import_vue2.ref)(void 0);
+    (0, import_use_persist_state.usePersistState)({
+      open: (0, import_vue2.toRef)(props, "open"),
+      minimized,
+      promptDockVisible,
+      bubbleOffset,
+      theme: (0, import_vue2.toRef)(props, "theme"),
+      sessionListCollapsed: localSessionListCollapsed,
+      onRestore: (state) => {
+        if (state.open !== void 0 && state.open !== props.open) {
+          emit("update:open", state.open);
+          emit("toggle", state.open);
+        }
+        if (state.minimized !== void 0) {
+          minimized.value = state.minimized;
+        }
+        if (state.bubbleOffset !== void 0) {
+          const bubbleSize = 44;
+          const margin = 10;
+          const maxX = window.innerWidth - bubbleSize - margin;
+          const maxY = window.innerHeight - bubbleSize - margin;
+          bubbleOffset.value = {
+            x: Math.max(margin, Math.min(state.bubbleOffset.x, maxX)),
+            y: Math.max(margin, Math.min(state.bubbleOffset.y, maxY))
+          };
+        }
+        if (state.theme !== void 0 && state.theme !== props.theme) {
+          emit("update:theme", state.theme);
+          emit("toggle-theme", state.theme);
+        }
+        if (state.sessionListCollapsed !== void 0 && state.sessionListCollapsed !== props.sessionListCollapsed) {
+          localSessionListCollapsed.value = state.sessionListCollapsed;
+          emit("update:sessionListCollapsed", state.sessionListCollapsed);
+        }
+        if (state.promptDockVisible !== void 0) {
+          promptDockVisible.value = state.promptDockVisible;
+        } else if (minimized.value) {
+          promptDockVisible.value = false;
+        }
+        (0, import_vue2.nextTick)(() => {
+          syncStateToIframe();
+          setTimeout(() => {
+            isRestoring.value = false;
+          }, 50);
+        });
+      }
+    });
     const handleToggleMinimize = () => {
       minimized.value = !minimized.value;
       promptDockVisible.value = !minimized.value;
@@ -254,15 +312,33 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       promptDockVisible.value = !promptDockVisible.value;
       sendMessageToIframe("prompt-dock-visibility-change", { visible: promptDockVisible.value });
     };
-    const bubbleOffset = (0, import_vue2.ref)(void 0);
+    const windowWidth = (0, import_vue2.ref)(typeof window !== "undefined" ? window.innerWidth : 0);
+    const windowHeight = (0, import_vue2.ref)(typeof window !== "undefined" ? window.innerHeight : 0);
+    const handleWindowResize = () => {
+      if (typeof window !== "undefined") {
+        windowWidth.value = window.innerWidth;
+        windowHeight.value = window.innerHeight;
+      }
+    };
+    (0, import_vue2.onMounted)(() => {
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", handleWindowResize);
+      }
+    });
+    (0, import_vue2.onUnmounted)(() => {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("resize", handleWindowResize);
+      }
+    });
     const bubbleQuadrant = (0, import_vue2.computed)(() => {
       var _a, _b, _c, _d;
       if (typeof window === "undefined") return "bottom-right";
-      const centerX = window.innerWidth / 2;
-      const centerY = window.innerHeight / 2;
+      const centerX = windowWidth.value / 2;
+      const centerY = windowHeight.value / 2;
       const bubbleSize = 44;
-      const effectiveX = ((_b = (_a = bubbleOffset.value) == null ? void 0 : _a.x) != null ? _b : window.innerWidth - bubbleSize - 24) + bubbleSize / 2;
-      const effectiveY = ((_d = (_c = bubbleOffset.value) == null ? void 0 : _c.y) != null ? _d : window.innerHeight - bubbleSize - 24) + bubbleSize / 2;
+      const currentOffset = (_b = (_a = triggerRef.value) == null ? void 0 : _a.offset) != null ? _b : bubbleOffset.value;
+      const effectiveX = ((_c = currentOffset == null ? void 0 : currentOffset.x) != null ? _c : windowWidth.value - bubbleSize - 24) + bubbleSize / 2;
+      const effectiveY = ((_d = currentOffset == null ? void 0 : currentOffset.y) != null ? _d : windowHeight.value - bubbleSize - 24) + bubbleSize / 2;
       if (effectiveX >= centerX && effectiveY >= centerY) {
         return "bottom-right";
       } else if (effectiveX < centerX && effectiveY >= centerY) {
@@ -278,36 +354,42 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       return quadrant === "top-right" || quadrant === "bottom-right";
     });
     const chatPositionStyle = (0, import_vue2.computed)(() => {
-      var _a;
+      var _a, _b, _c;
       if (typeof window === "undefined") return {};
-      const windowWidth = window.innerWidth;
-      const windowHeight = window.innerHeight;
       const chatWidth = minimized.value ? 300 : 700;
-      const chatHeight = minimized.value ? 300 : Math.min(windowHeight * 0.86, windowHeight - 40);
+      const chatHeight = minimized.value ? 300 : Math.min(windowHeight.value * 0.86, windowHeight.value - 40);
       const gap = 24;
       const bubbleSize = 44;
       const screenMargin = 20;
-      const effectiveOffset = (_a = bubbleOffset.value) != null ? _a : { x: windowWidth - bubbleSize - gap, y: windowHeight - bubbleSize - gap };
+      const effectiveOffset = (_c = (_b = (_a = triggerRef.value) == null ? void 0 : _a.offset) != null ? _b : bubbleOffset.value) != null ? _c : { x: windowWidth.value - bubbleSize - gap, y: windowHeight.value - bubbleSize - gap };
       const style = {};
       if (isBubbleOnRightSide.value) {
-        let rightPos = windowWidth - effectiveOffset.x + gap;
-        const maxRight = windowWidth - chatWidth - screenMargin;
+        let rightPos = windowWidth.value - effectiveOffset.x + gap;
+        const minRight = screenMargin;
+        const maxRight = windowWidth.value - chatWidth - screenMargin;
         if (rightPos > maxRight) {
           rightPos = maxRight;
         }
+        if (rightPos < minRight) {
+          rightPos = minRight;
+        }
         style.right = `${rightPos}px`;
         style.left = "auto";
       } else {
         let leftPos = effectiveOffset.x + bubbleSize + gap;
-        const maxLeft = windowWidth - chatWidth - screenMargin;
+        const minLeft = screenMargin;
+        const maxLeft = windowWidth.value - chatWidth - screenMargin;
         if (leftPos > maxLeft) {
           leftPos = maxLeft;
         }
+        if (leftPos < minLeft) {
+          leftPos = minLeft;
+        }
         style.left = `${leftPos}px`;
         style.right = "auto";
       }
-      let bottomPos = windowHeight - effectiveOffset.y - bubbleSize;
-      const maxBottom = windowHeight - chatHeight - screenMargin;
+      let bottomPos = windowHeight.value - effectiveOffset.y - bubbleSize;
+      const maxBottom = windowHeight.value - chatHeight - screenMargin;
       if (bottomPos > maxBottom) {
         bottomPos = maxBottom;
       }
@@ -371,6 +453,11 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       thinking: (0, import_vue2.toRef)(props, "thinking"),
       minimized,
       promptDockVisible,
+      bubbleOffset,
+      sessionStates: (0, import_vue2.computed)(() => {
+        var _a;
+        return (_a = props.sessionStates) != null ? _a : {};
+      }),
       iframeSource,
       buttonActive,
       sessionListTitle,
@@ -392,7 +479,8 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       handleClickSelectedNode,
       handleRemoveSelectedNode: (payload) => handleRemoveSelectedNode(payload.item, payload.index, payload.source),
       handleClearSelectedNodes,
-      handleFrameLoaded
+      handleFrameLoaded,
+      handleBubbleOffsetChange
     });
     const __returned__ = { props, emit, slots, notificationMessage, notificationVisible, notificationMode, get notificationTimer() {
       return notificationTimer;
@@ -402,7 +490,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       return dialogResolve;
     }, set dialogResolve(v) {
       dialogResolve = v;
-    }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, frameRef, triggerRef, sendMessageToIframe, handleFrameLoaded, localSessionListCollapsed, minimized, promptDockVisible, buttonActive, containerClasses, iframeSource, sessionListTitle, resolvedTheme, handleClose, handleEmptyAction, handleToggle, handleToggleSessionList, handleToggleTheme, sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession, bubbleVisible, hasSelectedElements, selectedElementItems, handleClearSelectedNodes, handleClickSelectedNode, handleRemoveSelectedNode, handleToggleSelectMode, highlightVisible, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent, handleToggleMinimize, handleTogglePromptDock, bubbleOffset, bubbleQuadrant, isBubbleOnRightSide, chatPositionStyle, handleBubbleOffsetChange, chatAnimationOrigin, isDragging, get wasOpenBeforeDrag() {
+    }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, frameRef, triggerRef, sendMessageToIframe, localSessionListCollapsed, minimized, promptDockVisible, isRestoring, iframeLoaded, syncStateToIframe, handleFrameLoaded, buttonActive, containerClasses, iframeSource, sessionListTitle, resolvedTheme, handleClose, handleEmptyAction, handleToggle, handleToggleSessionList, handleToggleTheme, sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession, bubbleVisible, hasSelectedElements, selectedElementItems, handleClearSelectedNodes, handleClickSelectedNode, handleRemoveSelectedNode, handleToggleSelectMode, highlightVisible, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent, bubbleOffset, handleToggleMinimize, handleTogglePromptDock, windowWidth, windowHeight, handleWindowResize, bubbleQuadrant, isBubbleOnRightSide, chatPositionStyle, handleBubbleOffsetChange, chatAnimationOrigin, isDragging, get wasOpenBeforeDrag() {
       return wasOpenBeforeDrag;
     }, set wasOpenBeforeDrag(v) {
       wasOpenBeforeDrag = v;
@@ -446,7 +534,6 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         $setup["Trigger"],
         {
           ref: "triggerRef",
-          onOffsetChange: $setup.handleBubbleOffsetChange,
           onDragStart: $setup.handleDragStart,
           onDragEnd: $setup.handleDragEnd
         },
@@ -468,7 +555,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
       (0, import_vue3.withDirectives)((0, import_vue3.createElementVNode)(
         "div",
         {
-          class: (0, import_vue3.normalizeClass)(["opencode-chat", { open: $props.open, minimized: $setup.minimized, dragging: $setup.isDragging }]),
+          class: (0, import_vue3.normalizeClass)(["opencode-chat", { open: $props.open, minimized: $setup.minimized, dragging: $setup.isDragging, "no-transition": $setup.isRestoring }]),
           style: (0, import_vue3.normalizeStyle)($setup.chatPositionStyle)
         },
         [
@@ -579,9 +666,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         "div",
         {
           class: "opencode-element-highlight",
-          style: (0, import_vue3.normalizeStyle)(__spreadValues({
-            display: $setup.highlightVisible ? "block" : "none"
-          }, $setup.highlightStyle))
+          style: (0, import_vue3.normalizeStyle)($setup.highlightStyle)
         },
         null,
         4
@@ -593,9 +678,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         "div",
         {
           class: "opencode-element-tooltip",
-          style: (0, import_vue3.normalizeStyle)(__spreadValues({
-            display: $setup.tooltipVisible ? "block" : "none"
-          }, $setup.tooltipStyle))
+          style: (0, import_vue3.normalizeStyle)($setup.tooltipStyle)
         },
         [
           (0, import_vue3.createElementVNode)(

package/lib/open-code-widget/src/types.d.ts

@@ -1,2 +1,2 @@
-export type { OpenCodeWidgetTheme, OpenCodeWidgetSession, OpenCodeSelectedElement, OpenCodeRemoveSelectedPayload, OpenCodeWidgetSessionItem, OpenCodeSelectedElementItem, OpenCodeWidgetProps, OpenCodeWidgetEmits, } from "@vite-plugin-opencode-assistant/shared";
+export type { OpenCodeWidgetTheme, OpenCodeWidgetSession, OpenCodeSelectedElement, OpenCodeRemoveSelectedPayload, OpenCodeWidgetSessionItem, OpenCodeSelectedElementItem, OpenCodeWidgetProps, OpenCodeWidgetEmits, OpencodeSessionThinkingState, } from "@vite-plugin-opencode-assistant/shared";
 export type OpenCodeWidgetThemeLocal = "light" | "dark" | "auto";

package/lib/web-types.json

@@ -1 +1 @@
-{"$schema":"https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json","framework":"vue","name":"@vite-plugin-opencode-assistant/components","version":"1.0.26","contributions":{"html":{"tags":[{"name":"open-code","attributes":[{"name":"","default":"`'bottom-right'`","description":"挂件显示的位置","value":{"type":"`'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'`","kind":"expression"}},{"name":"","default":"`false`","description":"挂件是否打开","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`'auto'`","description":"主题模式","value":{"type":"`'light' | 'dark' | 'auto'`","kind":"expression"}},{"name":"","default":"`'AI 助手'`","description":"助手头部显示的标题","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`'Ctrl+K'`","description":"快捷键提示文本","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`'按 ESC 或 Ctrl+P 退出'`","description":"选择模式快捷键提示文本","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`false`","description":"是否进入选择页面元素模式","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`true`","description":"会话列表是否折叠","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`'id'`","description":"会话列表项的唯一键字段","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`false`","description":"iframe 是否显示加载状态","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`undefined`","description":"会话列表是否加载中","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`false`","description":"是否显示会话列表骨架屏","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`false`","description":"是否显示空状态","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`false`","description":"是否显示错误状态","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`'当前项目暂无会话'`","description":"空状态显示的文本","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`'立即创建'`","description":"空状态操作按钮文本","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`''`","description":"Web UI 的 URL 来源","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`[]`","description":"会话列表数据","value":{"type":"`OpenCodeWidgetSession[]`","kind":"expression"}},{"name":"","default":"`null`","description":"当前选中的会话 ID","value":{"type":"`string | null`","kind":"expression"}},{"name":"","default":"`[]`","description":"已选中的元素列表","value":{"type":"`OpenCodeSelectedElement[]`","kind":"expression"}},{"name":"","default":"`true`","description":"是否显示\"一键清空\"按钮","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`true`","description":"是否启用选择模式","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`false`","description":"是否显示思考状态（加载中）","value":{"type":"`boolean`","kind":"expression"}}],"events":[{"name":"`update:open`","description":"当挂件打开或关闭时触发","arguments":[{"name":"open","type":"en"},{"name":"boolean"}]},{"name":"`update:selectMode`","description":"当选择模式切换时触发","arguments":[{"name":"mode","type":"de"},{"name":"boolean"}]},{"name":"`update:sessionListCollapsed`","description":"当会话列表折叠状态改变时触发","arguments":[{"name":"collapsed","type":"ed"},{"name":"boolean"}]},{"name":"`update:currentSessionId`","description":"当选中的会话 ID 改变时触发","arguments":[{"name":"sessionId","type":"Id"},{"name":"string | null"}]},{"name":"`update:selectedElements`","description":"当已选中的元素列表改变时触发","arguments":[{"name":"elements","type":"ts"},{"name":"OpenCodeSelectedElement[]"}]},{"name":"`update:theme`","description":"当主题模式改变时触发","arguments":[{"name":"theme","type":"me"},{"name":"'light' | 'dark' | 'auto'"}]},{"name":"`update:thinking`","description":"当思考状态改变时触发","arguments":[{"name":"thinking","type":"ng"},{"name":"boolean"}]},{"name":"","description":"点击触发挂件开关","arguments":[{"name":"open","type":"en"},{"name":"boolean"}]},{"name":"","description":"点击关闭按钮时触发","arguments":[]},{"name":"`toggle-session-list`","description":"点击会话列表切换按钮时触发","arguments":[{"name":"collapsed","type":"ed"},{"name":"boolean"}]},{"name":"`toggle-select-mode`","description":"点击选择模式切换按钮时触发","arguments":[{"name":"mode","type":"de"},{"name":"boolean"}]},{"name":"`toggle-theme`","description":"点击主题切换按钮时触发","arguments":[{"name":"theme","type":"me"},{"name":"'light' | 'dark' | 'auto'"}]},{"name":"`create-session`","description":"点击创建新会话时触发","arguments":[]},{"name":"`select-session`","description":"选中某个历史会话时触发","arguments":[{"name":"session","type":"on"},{"name":"OpenCodeWidgetSession"}]},{"name":"`delete-session`","description":"删除某个历史会话时触发","arguments":[{"name":"session","type":"on"},{"name":"OpenCodeWidgetSession"}]},{"name":"`click-selected-node`","description":"点击已选中的气泡或节点卡片时触发","arguments":[{"name":"element","type":"nt"},{"name":"OpenCodeSelectedElement"}]},{"name":"`remove-selected-node`","description":"删除已选中的元素时触发","arguments":[{"name":"payload","type":"ad"},{"name":"OpenCodeRemoveSelectedPayload"}]},{"name":"`clear-selected-nodes`","description":"清空所有选中元素时触发","arguments":[]},{"name":"`empty-action`","description":"点击空状态操作按钮时触发","arguments":[]},{"name":"`frame-loaded`","description":"iframe 加载完成时触发","arguments":[]},{"name":"`thinking-change`","description":"思考状态改变时触发（用于显示加载动画）","arguments":[{"name":"thinking","type":"ng"},{"name":"boolean"}]}],"slots":[{"name":"`button-icon`","description":"自定义触发按钮图标"},{"name":"`session-toggle-icon`","description":"自定义会话列表切换图标"},{"name":"`select-icon`","description":"自定义选择模式切换图标"},{"name":"`close-icon`","description":"自定义关闭按钮图标"},{"name":"`theme-icon`","description":"自定义主题切换图标"},{"name":"`sessions-empty`","description":"自定义会话列表空状态"},{"name":"`empty-state`","description":"自定义 iframe 空状态"},{"name":"","description":"自定义 iframe 加载状态"},{"name":"","description":"自定义错误状态"},{"name":"","description":"自定义 iframe 内容"}]}],"attributes":[]}},"js-types-syntax":"typescript"}
+{"$schema":"https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json","framework":"vue","name":"@vite-plugin-opencode-assistant/components","version":"1.0.28","contributions":{"html":{"tags":[{"name":"open-code","attributes":[{"name":"","default":"`'bottom-right'`","description":"挂件显示的位置","value":{"type":"`'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'`","kind":"expression"}},{"name":"","default":"`false`","description":"挂件是否打开","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`'auto'`","description":"主题模式","value":{"type":"`'light' | 'dark' | 'auto'`","kind":"expression"}},{"name":"","default":"`'AI 助手'`","description":"助手头部显示的标题","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`'Ctrl+K'`","description":"快捷键提示文本","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`'按 ESC 或 Ctrl+P 退出'`","description":"选择模式快捷键提示文本","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`false`","description":"是否进入选择页面元素模式","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`true`","description":"会话列表是否折叠","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`'id'`","description":"会话列表项的唯一键字段","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`false`","description":"iframe 是否显示加载状态","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`undefined`","description":"会话列表是否加载中","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`false`","description":"是否显示会话列表骨架屏","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`false`","description":"是否显示空状态","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`false`","description":"是否显示错误状态","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`'当前项目暂无会话'`","description":"空状态显示的文本","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`'立即创建'`","description":"空状态操作按钮文本","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`''`","description":"Web UI 的 URL 来源","value":{"type":"`string`","kind":"expression"}},{"name":"","default":"`[]`","description":"会话列表数据","value":{"type":"`OpenCodeWidgetSession[]`","kind":"expression"}},{"name":"","default":"`null`","description":"当前选中的会话 ID","value":{"type":"`string | null`","kind":"expression"}},{"name":"","default":"`[]`","description":"已选中的元素列表","value":{"type":"`OpenCodeSelectedElement[]`","kind":"expression"}},{"name":"","default":"`true`","description":"是否显示\"一键清空\"按钮","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`true`","description":"是否启用选择模式","value":{"type":"`boolean`","kind":"expression"}},{"name":"","default":"`false`","description":"是否显示思考状态（加载中）","value":{"type":"`boolean`","kind":"expression"}}],"events":[{"name":"`update:open`","description":"当挂件打开或关闭时触发","arguments":[{"name":"open","type":"en"},{"name":"boolean"}]},{"name":"`update:selectMode`","description":"当选择模式切换时触发","arguments":[{"name":"mode","type":"de"},{"name":"boolean"}]},{"name":"`update:sessionListCollapsed`","description":"当会话列表折叠状态改变时触发","arguments":[{"name":"collapsed","type":"ed"},{"name":"boolean"}]},{"name":"`update:currentSessionId`","description":"当选中的会话 ID 改变时触发","arguments":[{"name":"sessionId","type":"Id"},{"name":"string | null"}]},{"name":"`update:selectedElements`","description":"当已选中的元素列表改变时触发","arguments":[{"name":"elements","type":"ts"},{"name":"OpenCodeSelectedElement[]"}]},{"name":"`update:theme`","description":"当主题模式改变时触发","arguments":[{"name":"theme","type":"me"},{"name":"'light' | 'dark' | 'auto'"}]},{"name":"`update:thinking`","description":"当思考状态改变时触发","arguments":[{"name":"thinking","type":"ng"},{"name":"boolean"}]},{"name":"","description":"点击触发挂件开关","arguments":[{"name":"open","type":"en"},{"name":"boolean"}]},{"name":"","description":"点击关闭按钮时触发","arguments":[]},{"name":"`toggle-session-list`","description":"点击会话列表切换按钮时触发","arguments":[{"name":"collapsed","type":"ed"},{"name":"boolean"}]},{"name":"`toggle-select-mode`","description":"点击选择模式切换按钮时触发","arguments":[{"name":"mode","type":"de"},{"name":"boolean"}]},{"name":"`toggle-theme`","description":"点击主题切换按钮时触发","arguments":[{"name":"theme","type":"me"},{"name":"'light' | 'dark' | 'auto'"}]},{"name":"`create-session`","description":"点击创建新会话时触发","arguments":[]},{"name":"`select-session`","description":"选中某个历史会话时触发","arguments":[{"name":"session","type":"on"},{"name":"OpenCodeWidgetSession"}]},{"name":"`delete-session`","description":"删除某个历史会话时触发","arguments":[{"name":"session","type":"on"},{"name":"OpenCodeWidgetSession"}]},{"name":"`click-selected-node`","description":"点击已选中的气泡或节点卡片时触发","arguments":[{"name":"element","type":"nt"},{"name":"OpenCodeSelectedElement"}]},{"name":"`remove-selected-node`","description":"删除已选中的元素时触发","arguments":[{"name":"payload","type":"ad"},{"name":"OpenCodeRemoveSelectedPayload"}]},{"name":"`clear-selected-nodes`","description":"清空所有选中元素时触发","arguments":[]},{"name":"`empty-action`","description":"点击空状态操作按钮时触发","arguments":[]},{"name":"`frame-loaded`","description":"iframe 加载完成时触发","arguments":[]},{"name":"`thinking-change`","description":"思考状态改变时触发（用于显示加载动画）","arguments":[{"name":"thinking","type":"ng"},{"name":"boolean"}]}],"slots":[{"name":"`button-icon`","description":"自定义触发按钮图标"},{"name":"`session-toggle-icon`","description":"自定义会话列表切换图标"},{"name":"`select-icon`","description":"自定义选择模式切换图标"},{"name":"`close-icon`","description":"自定义关闭按钮图标"},{"name":"`theme-icon`","description":"自定义主题切换图标"},{"name":"`sessions-empty`","description":"自定义会话列表空状态"},{"name":"`empty-state`","description":"自定义 iframe 空状态"},{"name":"","description":"自定义 iframe 加载状态"},{"name":"","description":"自定义错误状态"},{"name":"","description":"自定义 iframe 内容"}]}],"attributes":[]}},"js-types-syntax":"typescript"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vite-plugin-opencode-assistant/components",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "Reusable OpenCode widget components built with Pagoda CLI",
   "type": "module",
   "main": "lib/index.js",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "css-selector-generator": "^3.9.1",
-    "@vite-plugin-opencode-assistant/shared": "1.0.26"
+    "@vite-plugin-opencode-assistant/shared": "1.0.28"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",