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

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

@@ -19,7 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import "./index-sfc.css";
 import { useCssVars as _useCssVars, defineComponent as _defineComponent } from "vue";
-import { useSlots, toRef, ref, watch, computed } from "vue";
+import { useSlots, toRef, ref, watch, computed, nextTick, onMounted, onUnmounted } from "vue";
 import Frame from "./components/Frame.vue.js";
 import Header from "./components/Header.vue.js";
 import SelectHint from "./components/SelectHint.vue.js";
@@ -30,6 +30,7 @@ import { useSelection } from "../composables/use-selection";
 import { useSession } from "../composables/use-session";
 import { useWidget } from "../composables/use-widget";
 import { useInspector } from "../composables/use-inspector";
+import { usePersistState } from "../composables/use-persist-state";
 import { provideOpenCodeWidgetContext } from "./context";
 const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValues({}, {
   name: "OpencodeWidget"
@@ -106,17 +107,26 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       var _a;
       (_a = frameRef.value) == null ? void 0 : _a.sendMessageToIframe(type, data);
     };
+    const localSessionListCollapsed = ref(props.sessionListCollapsed);
+    const minimized = ref(false);
+    const promptDockVisible = ref(true);
+    const isRestoring = ref(true);
+    const iframeLoaded = 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 = ref(props.sessionListCollapsed);
-    const minimized = ref(false);
-    const promptDockVisible = ref(true);
     watch(
       () => props.sessionListCollapsed,
       (val) => {
@@ -213,6 +223,53 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
         emit("toggle-select-mode", false);
       }
     });
+    const bubbleOffset = ref(void 0);
+    usePersistState({
+      open: toRef(props, "open"),
+      minimized,
+      promptDockVisible,
+      bubbleOffset,
+      theme: 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;
+        }
+        nextTick(() => {
+          syncStateToIframe();
+          setTimeout(() => {
+            isRestoring.value = false;
+          }, 50);
+        });
+      }
+    });
     const handleToggleMinimize = () => {
       minimized.value = !minimized.value;
       promptDockVisible.value = !minimized.value;
@@ -223,15 +280,33 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       promptDockVisible.value = !promptDockVisible.value;
       sendMessageToIframe("prompt-dock-visibility-change", { visible: promptDockVisible.value });
     };
-    const bubbleOffset = ref(void 0);
+    const windowWidth = ref(typeof window !== "undefined" ? window.innerWidth : 0);
+    const windowHeight = ref(typeof window !== "undefined" ? window.innerHeight : 0);
+    const handleWindowResize = () => {
+      if (typeof window !== "undefined") {
+        windowWidth.value = window.innerWidth;
+        windowHeight.value = window.innerHeight;
+      }
+    };
+    onMounted(() => {
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", handleWindowResize);
+      }
+    });
+    onUnmounted(() => {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("resize", handleWindowResize);
+      }
+    });
     const bubbleQuadrant = 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) {
@@ -247,36 +322,42 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       return quadrant === "top-right" || quadrant === "bottom-right";
     });
     const chatPositionStyle = 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;
       }
@@ -340,6 +421,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       thinking: toRef(props, "thinking"),
       minimized,
       promptDockVisible,
+      bubbleOffset,
       iframeSource,
       buttonActive,
       sessionListTitle,
@@ -361,7 +443,8 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       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;
@@ -371,7 +454,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       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;
@@ -416,7 +499,6 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         $setup["Trigger"],
         {
           ref: "triggerRef",
-          onOffsetChange: $setup.handleBubbleOffsetChange,
           onDragStart: $setup.handleDragStart,
           onDragEnd: $setup.handleDragEnd
         },
@@ -438,7 +520,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
       _withDirectives(_createElementVNode(
         "div",
         {
-          class: _normalizeClass(["opencode-chat", { open: $props.open, minimized: $setup.minimized, dragging: $setup.isDragging }]),
+          class: _normalizeClass(["opencode-chat", { open: $props.open, minimized: $setup.minimized, dragging: $setup.isDragging, "no-transition": $setup.isRestoring }]),
           style: _normalizeStyle($setup.chatPositionStyle)
         },
         [
@@ -549,9 +631,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         "div",
         {
           class: "opencode-element-highlight",
-          style: _normalizeStyle(__spreadValues({
-            display: $setup.highlightVisible ? "block" : "none"
-          }, $setup.highlightStyle))
+          style: _normalizeStyle($setup.highlightStyle)
         },
         null,
         4
@@ -563,9 +643,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         "div",
         {
           class: "opencode-element-tooltip",
-          style: _normalizeStyle(__spreadValues({
-            display: $setup.tooltipVisible ? "block" : "none"
-          }, $setup.tooltipStyle))
+          style: _normalizeStyle($setup.tooltipStyle)
         },
         [
           _createElementVNode(