npm - @vite-plugin-opencode-assistant/components - Versions diffs - 1.0.22 → 1.0.24 - Mend

@vite-plugin-opencode-assistant/components 1.0.22 → 1.0.24

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/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";