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

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.
package/es/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import OpenCodeWidget from './open-code-widget';
2
2
  import type { App } from 'vue';
3
- declare const version = "1.0.15";
3
+ declare const version = "1.0.17";
4
4
  declare function install(app: App<any>, options?: any): void;
5
5
  export { install, version, OpenCodeWidget };
6
6
  export default install;
package/es/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import OpenCodeWidget from "./open-code-widget";
2
- const version = "1.0.15";
2
+ const version = "1.0.17";
3
3
  function install(app, options) {
4
4
  const components = [
5
5
  OpenCodeWidget
@@ -1,3 +1,4 @@
1
+ declare function sendMessageToIframe(type: string, data?: Record<string, unknown>): void;
1
2
  declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
2
3
  type __VLS_Slots = {} & {
3
4
  'empty-state'?: (props: typeof __VLS_1) => any;
@@ -8,7 +9,9 @@ type __VLS_Slots = {} & {
8
9
  } & {
9
10
  content?: (props: typeof __VLS_7) => any;
10
11
  };
11
- declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
12
+ declare const __VLS_component: import("vue").DefineComponent<{}, {
13
+ sendMessageToIframe: typeof sendMessageToIframe;
14
+ }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
12
15
  declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
13
16
  export default _default;
14
17
  type __VLS_WithSlots<T, S> = T & {
@@ -16,12 +16,11 @@ var __spreadValues = (a, b) => {
16
16
  };
17
17
  import "./Frame-sfc.css";
18
18
  import { defineComponent as _defineComponent } from "vue";
19
- import { ref, watch, onMounted, onUnmounted } from "vue";
19
+ import { ref, onMounted } from "vue";
20
20
  import { useOpenCodeWidgetContext } from "../context";
21
21
  const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
22
22
  __name: "Frame",
23
23
  setup(__props, { expose: __expose }) {
24
- __expose();
25
24
  const iframeRef = ref(null);
26
25
  const {
27
26
  frameLoading,
@@ -31,41 +30,24 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
31
30
  emptyStateText,
32
31
  emptyStateActionText,
33
32
  handleEmptyAction,
34
- handleFrameLoaded,
35
- theme,
36
- resolvedTheme
33
+ handleFrameLoaded
37
34
  } = useOpenCodeWidgetContext();
38
- const iframeReady = ref(false);
39
35
  function sendMessageToIframe(type, data) {
40
36
  var _a;
41
37
  if (!((_a = iframeRef.value) == null ? void 0 : _a.contentWindow)) return;
42
38
  iframeRef.value.contentWindow.postMessage(__spreadValues({ type }, data), "*");
43
39
  }
44
- function syncIframeTheme() {
45
- sendMessageToIframe("OPENCODE_SET_THEME", { theme: resolvedTheme.value });
46
- }
47
- function handleIframeMessage(event) {
48
- var _a;
49
- if (((_a = event.data) == null ? void 0 : _a.type) === "OPENCODE_READY") {
50
- syncIframeTheme();
51
- }
52
- }
53
- watch([theme, resolvedTheme], () => {
54
- syncIframeTheme();
55
- });
56
40
  onMounted(() => {
57
41
  if (iframeRef.value) {
58
42
  iframeRef.value.addEventListener("load", () => {
59
- iframeReady.value = true;
60
43
  handleFrameLoaded();
61
44
  });
62
45
  }
63
- window.addEventListener("message", handleIframeMessage);
64
46
  });
65
- onUnmounted(() => {
66
- window.removeEventListener("message", handleIframeMessage);
47
+ __expose({
48
+ sendMessageToIframe
67
49
  });
68
- const __returned__ = { iframeRef, frameLoading, showEmptyState, showError, iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction, handleFrameLoaded, theme, resolvedTheme, iframeReady, sendMessageToIframe, syncIframeTheme, handleIframeMessage };
50
+ const __returned__ = { iframeRef, frameLoading, showEmptyState, showError, iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction, handleFrameLoaded, sendMessageToIframe };
69
51
  Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
70
52
  return __returned__;
71
53
  }
@@ -1 +1 @@
1
- .opencode-button{width:44px;height:44px;border-radius:50%;background:var(--oc-trigger-bg);border:none;cursor:pointer;box-shadow:var(--oc-trigger-shadow);transition:all .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;padding:0;position:relative}.opencode-button:before{content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border-radius:50%}.opencode-button:hover{transform:scale(1.1);box-shadow:var(--oc-trigger-shadow-hover);background:var(--oc-trigger-bg-hover)}.opencode-button.active{background:var(--oc-trigger-bg-active);box-shadow:var(--oc-trigger-shadow-active)}.opencode-button.active svg{transform:rotate(180deg)}.opencode-button svg{transition:transform .3s ease}.opencode-button.loading{animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}
1
+ .opencode-button{width:44px;height:44px;border-radius:50%;background:var(--oc-trigger-bg);border:none;cursor:pointer;box-shadow:var(--oc-trigger-shadow);transition:all .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;padding:0;position:relative;overflow:visible}.opencode-button svg{transform:rotate(180deg);transition:transform .3s ease}.opencode-button:before{content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border-radius:50%}.opencode-button:hover{transform:scale(1.1);box-shadow:var(--oc-trigger-shadow-hover);background:var(--oc-trigger-bg-hover)}.opencode-button.thinking{background:linear-gradient(135deg,#667eea,#764ba2,#667eea);background-size:200% 200%;animation:thinking-gradient 2s ease infinite,thinking-pulse 2s ease-in-out infinite;box-shadow:0 0 20px rgba(102,126,234,.5),0 0 40px rgba(118,75,162,.3)}.opencode-button.thinking svg{animation:none}.opencode-button.thinking:before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(102,126,234,.7) 0%,rgba(118,75,162,.5) 50%,transparent 70%);transform:translate(-50%,-50%);animation:ripple-wave 2s ease-out infinite;pointer-events:none}.opencode-button.thinking:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(118,75,162,.6) 0%,rgba(102,126,234,.4) 50%,transparent 70%);transform:translate(-50%,-50%);animation:ripple-wave 2s ease-out infinite;animation-delay:1s;pointer-events:none}@keyframes thinking-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes ripple-wave{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}to{transform:translate(-50%,-50%) scale(2.5);opacity:0}}@keyframes thinking-pulse{0%,to{transform:scale(1)}50%{transform:scale(.9)}}.opencode-button.loading{animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}
@@ -5,8 +5,14 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
5
5
  __name: "Trigger",
6
6
  setup(__props, { expose: __expose }) {
7
7
  __expose();
8
- const { buttonActive: active, open, hotkeyLabel, handleToggle } = useOpenCodeWidgetContext();
9
- const __returned__ = { active, open, hotkeyLabel, handleToggle };
8
+ const {
9
+ buttonActive: active,
10
+ open,
11
+ hotkeyLabel,
12
+ thinking,
13
+ handleToggle
14
+ } = useOpenCodeWidgetContext();
15
+ const __returned__ = { active, open, hotkeyLabel, thinking, handleToggle };
10
16
  Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
11
17
  return __returned__;
12
18
  }
@@ -15,7 +21,7 @@ import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, n
15
21
  const _hoisted_1 = ["aria-expanded", "title"];
16
22
  function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
17
23
  return _openBlock(), _createElementBlock("button", {
18
- class: _normalizeClass(["opencode-button", { active: $setup.active }]),
24
+ class: _normalizeClass(["opencode-button", { active: $setup.active, thinking: $setup.thinking }]),
19
25
  type: "button",
20
26
  "aria-expanded": $setup.open,
21
27
  "aria-label": "\u6253\u5F00 AI \u52A9\u624B",
@@ -19,6 +19,7 @@ export interface OpenCodeWidgetContext {
19
19
  emptyStateActionText: Ref<string>;
20
20
  showClearAll: Ref<boolean>;
21
21
  open: Ref<boolean>;
22
+ thinking: Ref<boolean>;
22
23
  iframeSource: Ref<string>;
23
24
  buttonActive: Ref<boolean>;
24
25
  sessionListTitle: Ref<string>;
@@ -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-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--oc-trigger-bg-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);--oc-trigger-bg-active: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--oc-trigger-shadow: 0 4px 15px rgba(102, 126, 234, .4);--oc-trigger-shadow-hover: 0 6px 20px rgba(102, 126, 234, .6);--oc-trigger-shadow-active: 0 6px 20px rgba(240, 147, 251, .4);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--oc-trigger-bg-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);--oc-trigger-bg-active: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--oc-trigger-shadow: 0 4px 15px rgba(102, 126, 234, .5);--oc-trigger-shadow-hover: 0 6px 20px rgba(102, 126, 234, .7);--oc-trigger-shadow-active: 0 6px 20px rgba(240, 147, 251, .5)}.opencode-widget.bottom-right{bottom:20px;right:20px}.opencode-widget.bottom-left{bottom:20px;left:20px}.opencode-widget.top-right{top:20px;right:20px}.opencode-widget.top-left{top:20px;left:20px}.opencode-chat{position:absolute;width:700px;height:86vh;background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:all .3s ease;display:flex;flex-direction:column}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-widget.bottom-right .opencode-chat{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-chat{bottom:56px;left:0}.opencode-widget.top-right .opencode-chat{top:56px;right:0}.opencode-widget.top-left .opencode-chat{top:56px;left:0}.opencode-widget.bottom-right .opencode-selected-bubbles{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-selected-bubbles{bottom:56px;left:0}.opencode-widget.top-right .opencode-selected-bubbles{top:56px;bottom:auto;right:0}.opencode-widget.top-left .opencode-selected-bubbles{top:56px;bottom:auto;left:0}.opencode-chat.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.opencode-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(59,130,246,.4),0 0 0 2px rgba(59,130,246,.2);animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.opencode-notification:before{content:"\1f4a1";font-size:16px}.opencode-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--oc-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.opencode-dialog{background:var(--oc-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--oc-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.opencode-dialog-content{margin-bottom:20px}.opencode-dialog-message{font-size:15px;color:var(--oc-text-primary);line-height:1.5}.opencode-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.opencode-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.opencode-dialog-btn.cancel{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-dialog-btn.cancel:hover{background:var(--oc-text-primary);color:var(--oc-bg-main)}.opencode-dialog-btn.confirm{background:var(--oc-danger);color:#fff}.opencode-dialog-btn.confirm:hover{background:var(--oc-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.opencode-element-highlight{position:fixed;pointer-events:none;z-index:999998;display:none;transition:all .1s ease;border-radius:4px}#vue-inspector-container{display:none!important}.opencode-element-tooltip{position:fixed;background:var(--oc-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;display:none;box-shadow:var(--oc-shadow-md);max-width:300px;pointer-events:none}.opencode-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.opencode-tooltip-file{font-size:11px;color:var(--oc-text-placeholder);word-break:break-all}.opencode-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.opencode-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}
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-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,27 +1,31 @@
1
1
  import type { OpenCodeWidgetProps } from "./types";
2
- declare var __VLS_4: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {}, __VLS_21: {}, __VLS_26: {}, __VLS_28: {}, __VLS_30: {}, __VLS_32: {};
2
+ declare var __VLS_4: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_18: {}, __VLS_25: {}, __VLS_27: {}, __VLS_29: {}, __VLS_31: {};
3
3
  type __VLS_Slots = {} & {
4
4
  'button-icon'?: (props: typeof __VLS_4) => any;
5
5
  } & {
6
- 'session-toggle-icon'?: (props: typeof __VLS_12) => any;
6
+ 'session-toggle-icon'?: (props: typeof __VLS_9) => any;
7
7
  } & {
8
- 'select-icon'?: (props: typeof __VLS_14) => any;
8
+ 'select-icon'?: (props: typeof __VLS_11) => any;
9
9
  } & {
10
- 'close-icon'?: (props: typeof __VLS_16) => any;
10
+ 'close-icon'?: (props: typeof __VLS_13) => any;
11
11
  } & {
12
- 'sessions-empty'?: (props: typeof __VLS_21) => any;
12
+ 'sessions-empty'?: (props: typeof __VLS_18) => any;
13
13
  } & {
14
- 'empty-state'?: (props: typeof __VLS_26) => any;
14
+ 'empty-state'?: (props: typeof __VLS_25) => any;
15
15
  } & {
16
- loading?: (props: typeof __VLS_28) => any;
16
+ loading?: (props: typeof __VLS_27) => any;
17
17
  } & {
18
- error?: (props: typeof __VLS_30) => any;
18
+ error?: (props: typeof __VLS_29) => any;
19
19
  } & {
20
- content?: (props: typeof __VLS_32) => any;
20
+ content?: (props: typeof __VLS_31) => any;
21
21
  };
22
22
  declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps, {
23
- showNotification: (message: string, duration?: number) => void;
23
+ showNotification: (message: string, options?: {
24
+ duration?: number;
25
+ mode?: "widget" | "page";
26
+ }) => void;
24
27
  showConfirmDialog: (message: string) => Promise<boolean>;
28
+ sendMessageToIframe: (type: string, data?: Record<string, unknown>) => void;
25
29
  }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
26
30
  close: () => any;
27
31
  toggle: (value: boolean) => any;
@@ -33,6 +37,7 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
33
37
  "update:currentSessionId": (value: string | null) => any;
34
38
  "update:selectedElements": (value: import("@vite-plugin-opencode-assistant/shared").OpenCodeSelectedElement[]) => any;
35
39
  "update:theme": (value: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetTheme) => any;
40
+ "update:thinking": (value: boolean) => any;
36
41
  "toggle-session-list": (value: boolean) => any;
37
42
  "toggle-select-mode": (value: boolean) => any;
38
43
  "toggle-theme": (value: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetTheme) => any;
@@ -42,6 +47,7 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
42
47
  "clear-selected-nodes": () => any;
43
48
  "empty-action": () => any;
44
49
  "frame-loaded": () => any;
50
+ "thinking-change": (value: boolean) => any;
45
51
  }, string, import("vue").PublicProps, Readonly<OpenCodeWidgetProps> & Readonly<{
46
52
  onClose?: (() => any) | undefined;
47
53
  onToggle?: ((value: boolean) => any) | undefined;
@@ -53,6 +59,7 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
53
59
  "onUpdate:currentSessionId"?: ((value: string | null) => any) | undefined;
54
60
  "onUpdate:selectedElements"?: ((value: import("@vite-plugin-opencode-assistant/shared").OpenCodeSelectedElement[]) => any) | undefined;
55
61
  "onUpdate:theme"?: ((value: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetTheme) => any) | undefined;
62
+ "onUpdate:thinking"?: ((value: boolean) => any) | undefined;
56
63
  "onToggle-session-list"?: ((value: boolean) => any) | undefined;
57
64
  "onToggle-select-mode"?: ((value: boolean) => any) | undefined;
58
65
  "onToggle-theme"?: ((value: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetTheme) => any) | undefined;
@@ -62,18 +69,19 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
62
69
  "onClear-selected-nodes"?: (() => any) | undefined;
63
70
  "onEmpty-action"?: (() => any) | undefined;
64
71
  "onFrame-loaded"?: (() => any) | undefined;
72
+ "onThinking-change"?: ((value: boolean) => any) | undefined;
65
73
  }>, {
66
74
  frameLoading: boolean;
67
75
  showEmptyState: boolean;
68
76
  showError: boolean;
69
77
  emptyStateText: string;
70
78
  emptyStateActionText: string;
71
- theme: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetTheme;
72
79
  iframeSrc: string;
73
80
  title: string;
74
81
  sessionListCollapsed: boolean;
75
82
  selectMode: boolean;
76
83
  selectEnabled: boolean;
84
+ theme: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetTheme;
77
85
  selectShortcutLabel: string;
78
86
  showClearAll: boolean;
79
87
  showSessionListSkeleton: boolean;
@@ -81,6 +89,7 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
81
89
  sessions: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetSession[];
82
90
  open: boolean;
83
91
  hotkeyLabel: string;
92
+ thinking: boolean;
84
93
  position: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetPosition;
85
94
  currentSessionId: string | null;
86
95
  selectedElements: import("@vite-plugin-opencode-assistant/shared").OpenCodeSelectedElement[];
@@ -23,7 +23,6 @@ import { useSlots, toRef, ref, watch } from "vue";
23
23
  import Frame from "./components/Frame.vue.js";
24
24
  import Header from "./components/Header.vue.js";
25
25
  import SelectHint from "./components/SelectHint.vue.js";
26
- import SelectedBubbles from "./components/SelectedBubbles.vue.js";
27
26
  import SelectedNodes from "./components/SelectedNodes.vue.js";
28
27
  import SessionList from "./components/SessionList.vue.js";
29
28
  import Trigger from "./components/Trigger.vue.js";
@@ -58,19 +57,23 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
58
57
  currentSessionId: { type: [String, null], required: false, default: null },
59
58
  selectedElements: { type: Array, required: false, default: () => [] },
60
59
  showClearAll: { type: Boolean, required: false, default: true },
61
- selectEnabled: { type: Boolean, required: false, default: true }
60
+ selectEnabled: { type: Boolean, required: false, default: true },
61
+ thinking: { type: Boolean, required: false, default: false }
62
62
  },
63
- emits: ["update:open", "update:selectMode", "update:sessionListCollapsed", "update:currentSessionId", "update:selectedElements", "update:theme", "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"],
63
+ 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"],
64
64
  setup(__props, { expose: __expose, emit: __emit }) {
65
65
  const props = __props;
66
66
  const emit = __emit;
67
67
  const slots = useSlots();
68
68
  const notificationMessage = ref("");
69
69
  const notificationVisible = ref(false);
70
+ const notificationMode = ref("widget");
70
71
  let notificationTimer = null;
71
- const showNotification = (message, duration = 3e3) => {
72
+ const showNotification = (message, options) => {
73
+ const { duration = 3e3, mode = "widget" } = options || {};
72
74
  notificationMessage.value = message;
73
75
  notificationVisible.value = true;
76
+ notificationMode.value = mode;
74
77
  if (notificationTimer) clearTimeout(notificationTimer);
75
78
  notificationTimer = setTimeout(() => {
76
79
  notificationVisible.value = false;
@@ -94,12 +97,18 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
94
97
  dialogVisible.value = false;
95
98
  if (dialogResolve) dialogResolve(false);
96
99
  };
100
+ const frameRef = ref(null);
101
+ const sendMessageToIframe = (type, data) => {
102
+ var _a;
103
+ (_a = frameRef.value) == null ? void 0 : _a.sendMessageToIframe(type, data);
104
+ };
97
105
  const handleFrameLoaded = () => {
98
106
  emit("frame-loaded");
99
107
  };
100
108
  __expose({
101
109
  showNotification,
102
- showConfirmDialog
110
+ showConfirmDialog,
111
+ sendMessageToIframe
103
112
  });
104
113
  const localSessionListCollapsed = ref(props.sessionListCollapsed);
105
114
  watch(
@@ -218,6 +227,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
218
227
  emptyStateActionText: toRef(props, "emptyStateActionText"),
219
228
  showClearAll: toRef(props, "showClearAll"),
220
229
  open: toRef(props, "open"),
230
+ thinking: toRef(props, "thinking"),
221
231
  iframeSource,
222
232
  buttonActive,
223
233
  sessionListTitle,
@@ -239,7 +249,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
239
249
  handleClearSelectedNodes,
240
250
  handleFrameLoaded
241
251
  });
242
- const __returned__ = { props, emit, slots, notificationMessage, notificationVisible, get notificationTimer() {
252
+ const __returned__ = { props, emit, slots, notificationMessage, notificationVisible, notificationMode, get notificationTimer() {
243
253
  return notificationTimer;
244
254
  }, set notificationTimer(v) {
245
255
  notificationTimer = v;
@@ -247,12 +257,12 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
247
257
  return dialogResolve;
248
258
  }, set dialogResolve(v) {
249
259
  dialogResolve = v;
250
- }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, handleFrameLoaded, localSessionListCollapsed, 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, Frame, Header, SelectHint, SelectedBubbles, SelectedNodes, SessionList, Trigger };
260
+ }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, frameRef, sendMessageToIframe, handleFrameLoaded, localSessionListCollapsed, 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, Frame, Header, SelectHint, SelectedNodes, SessionList, Trigger };
251
261
  Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
252
262
  return __returned__;
253
263
  }
254
264
  }));
255
- import { renderSlot as _renderSlot, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, vShow as _vShow, normalizeClass as _normalizeClass, withDirectives as _withDirectives, normalizeStyle as _normalizeStyle } from "vue";
265
+ 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";
256
266
  const _hoisted_1 = {
257
267
  key: 0,
258
268
  class: "opencode-notification",
@@ -262,7 +272,7 @@ const _hoisted_2 = { class: "opencode-chat-content" };
262
272
  const _hoisted_3 = { class: "opencode-tooltip-tag" };
263
273
  const _hoisted_4 = { class: "opencode-tooltip-file" };
264
274
  const _hoisted_5 = {
265
- key: 1,
275
+ key: 0,
266
276
  class: "opencode-dialog-overlay"
267
277
  };
268
278
  const _hoisted_6 = {
@@ -272,6 +282,11 @@ const _hoisted_6 = {
272
282
  };
273
283
  const _hoisted_7 = { class: "opencode-dialog-content" };
274
284
  const _hoisted_8 = { class: "opencode-dialog-message" };
285
+ const _hoisted_9 = {
286
+ key: 0,
287
+ class: "opencode-page-notification",
288
+ role: "alert"
289
+ };
275
290
  function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
276
291
  return _openBlock(), _createElementBlock(
277
292
  "div",
@@ -297,7 +312,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
297
312
  1024
298
313
  /* DYNAMIC_SLOTS */
299
314
  ),
300
- $setup.bubbleVisible ? (_openBlock(), _createBlock($setup["SelectedBubbles"], { key: 0 })) : _createCommentVNode("v-if", true),
315
+ _createCommentVNode(' <SelectedBubbles v-if="bubbleVisible" /> '),
301
316
  _withDirectives(_createElementVNode(
302
317
  "div",
303
318
  {
@@ -337,7 +352,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
337
352
  /* DYNAMIC_SLOTS */
338
353
  ),
339
354
  _createCommentVNode(" Notification "),
340
- $setup.notificationVisible ? (_openBlock(), _createElementBlock(
355
+ $setup.notificationVisible && $setup.notificationMode === "widget" ? (_openBlock(), _createElementBlock(
341
356
  "div",
342
357
  _hoisted_1,
343
358
  _toDisplayString($setup.notificationMessage),
@@ -362,7 +377,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
362
377
  }),
363
378
  _createVNode(
364
379
  $setup["Frame"],
365
- null,
380
+ { ref: "frameRef" },
366
381
  _createSlots({
367
382
  _: 2
368
383
  /* DYNAMIC */
@@ -396,8 +411,8 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
396
411
  key: "3"
397
412
  } : void 0
398
413
  ]),
399
- 1024
400
- /* DYNAMIC_SLOTS */
414
+ 1536
415
+ /* NEED_PATCH, DYNAMIC_SLOTS */
401
416
  ),
402
417
  _createVNode($setup["SelectedNodes"])
403
418
  ])
@@ -476,7 +491,17 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
476
491
  }, "\u786E\u8BA4")
477
492
  ])
478
493
  ])
479
- ])) : _createCommentVNode("v-if", true)
494
+ ])) : _createCommentVNode("v-if", true),
495
+ _createCommentVNode(" Page-level Notification "),
496
+ (_openBlock(), _createBlock(_Teleport, { to: "body" }, [
497
+ $setup.notificationVisible && $setup.notificationMode === "page" ? (_openBlock(), _createElementBlock(
498
+ "div",
499
+ _hoisted_9,
500
+ _toDisplayString($setup.notificationMessage),
501
+ 1
502
+ /* TEXT */
503
+ )) : _createCommentVNode("v-if", true)
504
+ ]))
480
505
  ],
481
506
  2
482
507
  /* CLASS */