npm - @vite-plugin-opencode-assistant/components - Versions diffs - 1.0.23 → 1.0.25 - Mend

@vite-plugin-opencode-assistant/components 1.0.23 → 1.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/es/open-code-widget/src/components/Trigger.vue.js CHANGED Viewed

@@ -1,69 +1,148 @@
 import "./Trigger-sfc.css";
 import { defineComponent as _defineComponent } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { useOpenCodeWidgetContext } from "../context";
+import FloatingBubble from "./FloatingBubble/FloatingBubble.vue.js";
+const STORAGE_KEY = "opencode-bubble-offset";
 const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
   __name: "Trigger",
-  setup(__props, { expose: __expose }) {
-    __expose();
+  emits: ["offset-change", "drag-start", "drag-end"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     const {
       buttonActive: active,
       open,
       hotkeyLabel,
       thinking,
+      resolvedTheme,
       handleToggle
     } = useOpenCodeWidgetContext();
-    const __returned__ = { active, open, hotkeyLabel, thinking, handleToggle };
+    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 { x: 0, y: 0 };
+    };
+    const offset = ref(loadOffset());
+    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);
+    };
+    const bubbleRef = ref(null);
+    const isOnRightSide = computed(() => {
+      if (typeof window === "undefined") return true;
+      const centerX = window.innerWidth / 2;
+      return offset.value.x > centerX;
+    });
+    onMounted(() => {
+      if (offset.value.x !== 0 || offset.value.y !== 0) {
+        emit("offset-change", offset.value);
+      }
+    });
+    __expose({
+      isOnRightSide,
+      offset
+    });
+    const __returned__ = { active, open, hotkeyLabel, thinking, resolvedTheme, handleToggle, STORAGE_KEY, loadOffset, offset, emit, saveOffset, handleOffsetChange, bubbleRef, isOnRightSide, FloatingBubble };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
-import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 const _hoisted_1 = ["aria-expanded", "title"];
 function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
-  return _openBlock(), _createElementBlock("button", {
-    class: _normalizeClass(["opencode-button", { active: $setup.active, thinking: $setup.thinking }]),
-    type: "button",
-    "aria-expanded": $setup.open,
-    "aria-label": "\u6253\u5F00 AI \u52A9\u624B",
-    title: `AI \u52A9\u624B (${$setup.hotkeyLabel})`,
-    onClick: _cache[0] || (_cache[0] = (...args) => $setup.handleToggle && $setup.handleToggle(...args))
-  }, [
-    _renderSlot(_ctx.$slots, "default", {}, () => [
-      _cache[1] || (_cache[1] = _createElementVNode(
-        "svg",
-        {
-          t: "1775402599580",
-          class: "icon",
-          viewBox: "0 0 1024 1024",
-          version: "1.1",
-          xmlns: "http://www.w3.org/2000/svg",
-          "p-id": "5390",
-          "xmlns:xlink": "http://www.w3.org/1999/xlink",
-          width: "100%",
-          height: "100%"
-        },
-        [
-          _createElementVNode("path", {
-            d: "M512 981.33H85.34c-15.85 0-30.38-8.77-37.77-22.81a42.624 42.624 0 0 1 2.6-44.02L135 791.08C75.25 710.5 42.67 612.6 42.67 512 42.67 253.21 253.21 42.67 512 42.67S981.34 253.21 981.34 512 770.8 981.33 512 981.33zM166.44 896H512c211.73 0 384-172.27 384-384S723.73 128 512 128 128 300.27 128 512c0 91.29 32.83 179.9 92.46 249.46 12.58 14.69 13.73 36 2.77 51.94L166.44 896z",
-            fill: "white",
-            "p-id": "5391"
-          }),
-          _createElementVNode("path", {
-            d: "M384 448m-64 0a64 64 0 1 0 128 0 64 64 0 1 0 -128 0Z",
-            fill: "white",
-            "p-id": "5392"
-          }),
-          _createElementVNode("path", {
-            d: "M640 448m-64 0a64 64 0 1 0 128 0 64 64 0 1 0 -128 0Z",
-            fill: "white",
-            "p-id": "5393"
-          })
-        ],
-        -1
-        /* CACHED */
-      ))
-    ])
-  ], 10, _hoisted_1);
+  return _openBlock(), _createBlock($setup["FloatingBubble"], {
+    ref: "bubbleRef",
+    offset: $setup.offset,
+    "onUpdate:offset": _cache[0] || (_cache[0] = ($event) => $setup.offset = $event),
+    axis: "xy",
+    magnetic: "x",
+    gap: 24,
+    onClick: $setup.handleToggle,
+    onOffsetChange: $setup.handleOffsetChange,
+    onDragStart: _cache[1] || (_cache[1] = ($event) => $setup.emit("drag-start")),
+    onDragEnd: _cache[2] || (_cache[2] = ($event) => $setup.emit("drag-end"))
+  }, {
+    default: _withCtx(() => [
+      _createElementVNode("button", {
+        class: _normalizeClass(["opencode-button", { active: $setup.active, thinking: $setup.thinking, "opencode-theme-dark": $setup.resolvedTheme === "dark" }]),
+        type: "button",
+        "aria-expanded": $setup.open,
+        "aria-label": "\u6253\u5F00 AI \u52A9\u624B",
+        title: `AI \u52A9\u624B (${$setup.hotkeyLabel})`
+      }, [
+        _renderSlot(_ctx.$slots, "default", {}, () => [
+          _cache[3] || (_cache[3] = _createElementVNode(
+            "svg",
+            {
+              t: "1775402599580",
+              class: "icon",
+              viewBox: "0 0 1024 1024",
+              version: "1.1",
+              xmlns: "http://www.w3.org/2000/svg",
+              "p-id": "5390",
+              "xmlns:xlink": "http://www.w3.org/1999/xlink",
+              width: "100%",
+              height: "100%"
+            },
+            [
+              _createElementVNode("defs", null, [
+                _createElementVNode("linearGradient", {
+                  id: "opencode-logo-gradient",
+                  x1: "0%",
+                  y1: "0%",
+                  x2: "100%",
+                  y2: "100%"
+                }, [
+                  _createElementVNode("stop", {
+                    offset: "0%",
+                    style: { "stop-color": "#667eea" }
+                  }),
+                  _createElementVNode("stop", {
+                    offset: "100%",
+                    style: { "stop-color": "#764ba2" }
+                  })
+                ])
+              ]),
+              _createElementVNode("path", {
+                d: "M512 981.33H85.34c-15.85 0-30.38-8.77-37.77-22.81a42.624 42.624 0 0 1 2.6-44.02L135 791.08C75.25 710.5 42.67 612.6 42.67 512 42.67 253.21 253.21 42.67 512 42.67S981.34 253.21 981.34 512 770.8 981.33 512 981.33zM166.44 896H512c211.73 0 384-172.27 384-384S723.73 128 512 128 128 300.27 128 512c0 91.29 32.83 179.9 92.46 249.46 12.58 14.69 13.73 36 2.77 51.94L166.44 896z",
+                fill: "url(#opencode-logo-gradient)",
+                "p-id": "5391"
+              }),
+              _createElementVNode("path", {
+                d: "M384 448m-64 0a64 64 0 1 0 128 0 64 64 0 1 0 -128 0Z",
+                fill: "url(#opencode-logo-gradient)",
+                "p-id": "5392"
+              }),
+              _createElementVNode("path", {
+                d: "M640 448m-64 0a64 64 0 1 0 128 0 64 64 0 1 0 -128 0Z",
+                fill: "url(#opencode-logo-gradient)",
+                "p-id": "5393"
+              })
+            ],
+            -1
+            /* CACHED */
+          ))
+        ])
+      ], 10, _hoisted_1)
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["offset", "onClick"]);
 }
 __vue_sfc__.render = __vue_render__;
 var Trigger_vue_default = __vue_sfc__;

package/es/open-code-widget/src/index-sfc.css CHANGED Viewed

	@@ -1 +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-~~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.minimized{width:300px;height:300px}.opencode-chat.minimized .opencode-iframe-container{margin-top:-146px}.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)}}
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:translateY(20px) 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: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)}}

package/es/open-code-widget/src/index.vue.d.ts CHANGED Viewed

@@ -1,23 +1,23 @@
 import type { OpenCodeWidgetProps } from "./types";
-declare var __VLS_4: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_18: {}, __VLS_25: {}, __VLS_27: {}, __VLS_29: {}, __VLS_31: {};
+declare var __VLS_12: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {}, __VLS_26: {}, __VLS_33: {}, __VLS_35: {}, __VLS_37: {}, __VLS_39: {};
 type __VLS_Slots = {} & {
-    'button-icon'?: (props: typeof __VLS_4) => any;
+    'button-icon'?: (props: typeof __VLS_12) => any;
 } & {
-    'session-toggle-icon'?: (props: typeof __VLS_9) => any;
+    'session-toggle-icon'?: (props: typeof __VLS_17) => any;
 } & {
-    'select-icon'?: (props: typeof __VLS_11) => any;
+    'select-icon'?: (props: typeof __VLS_19) => any;
 } & {
-    'close-icon'?: (props: typeof __VLS_13) => any;
+    'close-icon'?: (props: typeof __VLS_21) => any;
 } & {
-    'sessions-empty'?: (props: typeof __VLS_18) => any;
+    'sessions-empty'?: (props: typeof __VLS_26) => any;
 } & {
-    'empty-state'?: (props: typeof __VLS_25) => any;
+    'empty-state'?: (props: typeof __VLS_33) => any;
 } & {
-    loading?: (props: typeof __VLS_27) => any;
+    loading?: (props: typeof __VLS_35) => any;
 } & {
-    error?: (props: typeof __VLS_29) => any;
+    error?: (props: typeof __VLS_37) => any;
 } & {
-    content?: (props: typeof __VLS_31) => any;
+    content?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps, {
     showNotification: (message: string, options?: {
@@ -90,7 +90,6 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
     open: boolean;
     hotkeyLabel: string;
     thinking: boolean;
-    position: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetPosition;
     currentSessionId: string | null;
     selectedElements: import("@vite-plugin-opencode-assistant/shared").OpenCodeSelectedElement[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -19,7 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import "./index-sfc.css";
 import { defineComponent as _defineComponent } from "vue";
-import { useSlots, toRef, ref, watch } from "vue";
+import { useSlots, toRef, ref, watch, computed } from "vue";
 import Frame from "./components/Frame.vue.js";
 import Header from "./components/Header.vue.js";
 import SelectHint from "./components/SelectHint.vue.js";
@@ -36,7 +36,6 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
 }), {
   __name: "index",
   props: {
-    position: { type: String, required: false, default: "bottom-right" },
     open: { type: Boolean, required: false, default: false },
     theme: { type: String, required: false, default: "auto" },
     title: { type: String, required: false, default: "AI \u52A9\u624B" },
@@ -98,6 +97,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       if (dialogResolve) dialogResolve(false);
     };
     const frameRef = ref(null);
+    const triggerRef = ref(null);
     const sendMessageToIframe = (type, data) => {
       var _a;
       (_a = frameRef.value) == null ? void 0 : _a.sendMessageToIframe(type, data);
@@ -131,7 +131,6 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       handleToggleSessionList,
       handleToggleTheme
     } = useWidget({
-      position: toRef(props, "position"),
       theme: toRef(props, "theme"),
       open: toRef(props, "open"),
       selectMode: toRef(props, "selectMode"),
@@ -220,6 +219,68 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       promptDockVisible.value = !promptDockVisible.value;
       sendMessageToIframe("prompt-dock-visibility-change", { visible: promptDockVisible.value });
     };
+    const bubbleOffset = ref({ x: 0, y: 0 });
+    const isBubbleOnRightSide = computed(() => {
+      if (typeof window === "undefined") return true;
+      const centerX = window.innerWidth / 2;
+      return bubbleOffset.value.x > centerX;
+    });
+    const chatPositionStyle = computed(() => {
+      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 gap = 24;
+      const bubbleSize = 44;
+      const screenMargin = 20;
+      const style = {};
+      if (isBubbleOnRightSide.value) {
+        let rightPos = windowWidth - bubbleOffset.value.x + gap;
+        const maxRight = windowWidth - chatWidth - screenMargin;
+        if (rightPos > maxRight) {
+          rightPos = maxRight;
+        }
+        style.right = `${rightPos}px`;
+        style.left = "auto";
+      } else {
+        let leftPos = bubbleOffset.value.x + bubbleSize + gap;
+        const maxLeft = windowWidth - chatWidth - screenMargin;
+        if (leftPos > maxLeft) {
+          leftPos = maxLeft;
+        }
+        style.left = `${leftPos}px`;
+        style.right = "auto";
+      }
+      let bottomPos = windowHeight - bubbleOffset.value.y - bubbleSize;
+      const maxBottom = windowHeight - chatHeight - screenMargin;
+      if (bottomPos > maxBottom) {
+        bottomPos = maxBottom;
+      }
+      if (bottomPos < screenMargin) {
+        bottomPos = screenMargin;
+      }
+      style.bottom = `${bottomPos}px`;
+      return style;
+    });
+    const handleBubbleOffsetChange = (offset) => {
+      bubbleOffset.value = offset;
+    };
+    const isDragging = ref(false);
+    let wasOpenBeforeDrag = false;
+    const handleDragStart = () => {
+      isDragging.value = true;
+      wasOpenBeforeDrag = props.open;
+      if (props.open) {
+        emit("update:open", false);
+      }
+    };
+    const handleDragEnd = () => {
+      isDragging.value = false;
+      if (wasOpenBeforeDrag) {
+        emit("update:open", true);
+      }
+    };
     provideOpenCodeWidgetContext({
       theme: toRef(props, "theme"),
       resolvedTheme,
@@ -273,12 +334,16 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       return dialogResolve;
     }, set dialogResolve(v) {
       dialogResolve = v;
-    }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, frameRef, 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, Frame, Header, SelectHint, SelectedNodes, SessionList, Trigger };
+    }, 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, isBubbleOnRightSide, chatPositionStyle, handleBubbleOffsetChange, isDragging, get wasOpenBeforeDrag() {
+      return wasOpenBeforeDrag;
+    }, set wasOpenBeforeDrag(v) {
+      wasOpenBeforeDrag = v;
+    }, handleDragStart, handleDragEnd, Frame, Header, SelectHint, SelectedNodes, SessionList, Trigger };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 }));
-import { renderSlot as _renderSlot, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, vShow as _vShow, normalizeClass as _normalizeClass, withDirectives as _withDirectives, normalizeStyle as _normalizeStyle, Teleport as _Teleport, createBlock as _createBlock } from "vue";
+import { renderSlot as _renderSlot, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, vShow as _vShow, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, withDirectives as _withDirectives, Teleport as _Teleport, createBlock as _createBlock } from "vue";
 const _hoisted_1 = {
   key: 0,
   class: "opencode-notification",
@@ -312,7 +377,12 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
     [
       _createVNode(
         $setup["Trigger"],
-        null,
+        {
+          ref: "triggerRef",
+          onOffsetChange: $setup.handleBubbleOffsetChange,
+          onDragStart: $setup.handleDragStart,
+          onDragEnd: $setup.handleDragEnd
+        },
         _createSlots({
           _: 2
           /* DYNAMIC */
@@ -325,14 +395,14 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
             key: "0"
           } : void 0
         ]),
-        1024
-        /* DYNAMIC_SLOTS */
+        1536
+        /* NEED_PATCH, DYNAMIC_SLOTS */
       ),
-      _createCommentVNode(' <SelectedBubbles v-if="bubbleVisible" /> '),
       _withDirectives(_createElementVNode(
         "div",
         {
-          class: _normalizeClass(["opencode-chat", { open: $props.open, minimized: $setup.minimized }])
+          class: _normalizeClass(["opencode-chat", { open: $props.open, minimized: $setup.minimized, dragging: $setup.isDragging }]),
+          style: _normalizeStyle($setup.chatPositionStyle)
         },
         [
           _createVNode(
@@ -367,7 +437,6 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
             1024
             /* DYNAMIC_SLOTS */
           ),
-          _createCommentVNode(" Notification "),
           $setup.notificationVisible && $setup.notificationMode === "widget" ? (_openBlock(), _createElementBlock(
             "div",
             _hoisted_1,
@@ -433,13 +502,12 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
             _createVNode($setup["SelectedNodes"])
           ])
         ],
-        2
-        /* CLASS */
+        6
+        /* CLASS, STYLE */
       ), [
         [_vShow, !$props.selectMode]
       ]),
       _createVNode($setup["SelectHint"]),
-      _createCommentVNode(" Inspector Highlight "),
       _withDirectives(_createElementVNode(
         "div",
         {
@@ -454,7 +522,6 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
       ), [
         [_vShow, $setup.highlightVisible]
       ]),
-      _createCommentVNode(" Inspector Tooltip "),
       _withDirectives(_createElementVNode(
         "div",
         {
@@ -484,7 +551,6 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
       ), [
         [_vShow, $setup.tooltipVisible]
       ]),
-      _createCommentVNode(" Dialog "),
       $setup.dialogVisible ? (_openBlock(), _createElementBlock("div", _hoisted_5, [
         _createElementVNode("div", _hoisted_6, [
           _createElementVNode("div", _hoisted_7, [
@@ -508,7 +574,6 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ])
       ])) : _createCommentVNode("v-if", true),
-      _createCommentVNode(" Page-level Notification "),
       (_openBlock(), _createBlock(_Teleport, { to: "body" }, [
         $setup.notificationVisible && $setup.notificationMode === "page" ? (_openBlock(), _createElementBlock(
           "div",

package/es/open-code-widget/src/types.d.ts CHANGED Viewed

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