npm - @vite-plugin-opencode-assistant/components - Versions diffs - 1.0.48 → 1.0.50 - Mend

@vite-plugin-opencode-assistant/components 1.0.48 → 1.0.50

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/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import OpenCodeWidget from './open-code-widget';
 import type { App } from 'vue';
-declare const version = "1.0.48";
+declare const version = "1.0.50";
 declare function install(app: App<any>, options?: any): void;
 export { install, version, OpenCodeWidget };
 export default install;

package/es/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import OpenCodeWidget from "./open-code-widget";
-const version = "1.0.48";
+const version = "1.0.50";
 function install(app, options) {
   const components = [
     OpenCodeWidget

package/es/open-code-widget/composables/use-persist-state.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { type Ref } from "vue";
 import type { FloatingBubbleOffset } from "../src/components/FloatingBubble/types";
-import type { OpenCodeWidgetTheme } from "../src/types";
+import type { OpenCodeWidgetTheme, DisplayMode } from "../src/types";
 export interface WidgetPersistState {
     open: boolean;
     minimized: boolean;
@@ -9,6 +9,8 @@ export interface WidgetPersistState {
     theme: OpenCodeWidgetTheme;
     sessionListCollapsed: boolean;
     splitPanelWidth?: number;
+    displayMode?: DisplayMode;
+    splitPosition?: "left" | "right";
 }
 export interface UsePersistStateOptions {
     open: Ref<boolean>;
@@ -18,6 +20,8 @@ export interface UsePersistStateOptions {
     theme: Ref<OpenCodeWidgetTheme>;
     sessionListCollapsed: Ref<boolean>;
     splitPanelWidth?: Ref<number>;
+    displayMode?: Ref<DisplayMode>;
+    splitPosition?: Ref<"left" | "right">;
     onRestore?: (state: Partial<WidgetPersistState>) => void;
 }
 export declare function usePersistState(options: UsePersistStateOptions): {

package/es/open-code-widget/composables/use-persist-state.js CHANGED Viewed

@@ -29,7 +29,7 @@ function usePersistState(options) {
     return saved;
   };
   const getCurrentState = () => {
-    var _a;
+    var _a, _b, _c;
     return {
       open: options.open.value,
       minimized: options.minimized.value,
@@ -37,7 +37,9 @@ function usePersistState(options) {
       bubbleOffset: options.bubbleOffset.value,
       theme: options.theme.value,
       sessionListCollapsed: options.sessionListCollapsed.value,
-      splitPanelWidth: (_a = options.splitPanelWidth) == null ? void 0 : _a.value
+      splitPanelWidth: (_a = options.splitPanelWidth) == null ? void 0 : _a.value,
+      displayMode: (_b = options.displayMode) == null ? void 0 : _b.value,
+      splitPosition: (_c = options.splitPosition) == null ? void 0 : _c.value
     };
   };
   const persistState = () => {
@@ -54,6 +56,12 @@ function usePersistState(options) {
   if (options.splitPanelWidth) {
     watchers.push(options.splitPanelWidth);
   }
+  if (options.displayMode) {
+    watchers.push(options.displayMode);
+  }
+  if (options.splitPosition) {
+    watchers.push(options.splitPosition);
+  }
   onMounted(() => {
     restoreState();
     watch(

package/es/open-code-widget/composables/use-split.d.ts CHANGED Viewed

@@ -4,8 +4,10 @@ export interface UseSplitModeOptions {
     displayMode: Ref<DisplayMode>;
     splitMode: Ref<SplitModeOptions | undefined>;
     open: Ref<boolean>;
+    splitPosition?: Ref<"left" | "right">;
     onOpenChange?: (open: boolean) => void;
     onWidthChange?: (width: number) => void;
+    onPositionChange?: (position: "left" | "right") => void;
 }
 export declare function useSplitMode(options: UseSplitModeOptions): {
     effectiveMode: import("vue").ComputedRef<"bubble" | "split">;
@@ -18,7 +20,10 @@ export declare function useSplitMode(options: UseSplitModeOptions): {
         resizable: boolean;
         shrinkPage: boolean;
         defaultOpen: boolean;
+        position: "left" | "right";
     }>;
+    splitPosition: import("vue").ComputedRef<"left" | "right">;
     handleResize: (width: number) => void;
     handleToggle: () => void;
+    handleTogglePosition: () => void;
 };

package/es/open-code-widget/composables/use-split.js CHANGED Viewed

@@ -1,17 +1,20 @@
 import { ref, computed, watch, onMounted, onUnmounted } from "vue";
 const AUTO_MODE_THRESHOLD = 1440;
 function useSplitMode(options) {
+  var _a, _b;
   const windowWidth = ref(typeof window !== "undefined" ? window.innerWidth : 0);
+  const localSplitPosition = ref((_b = (_a = options.splitPosition) == null ? void 0 : _a.value) != null ? _b : "right");
   const splitConfig = computed(() => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a2, _b2, _c, _d, _e, _f, _g;
     const config = options.splitMode.value || {};
     return {
-      width: (_a = config.width) != null ? _a : 500,
-      minWidth: (_b = config.minWidth) != null ? _b : 400,
+      width: (_a2 = config.width) != null ? _a2 : 500,
+      minWidth: (_b2 = config.minWidth) != null ? _b2 : 400,
       maxWidth: (_c = config.maxWidth) != null ? _c : 800,
       resizable: (_d = config.resizable) != null ? _d : true,
       shrinkPage: (_e = config.shrinkPage) != null ? _e : true,
-      defaultOpen: (_f = config.defaultOpen) != null ? _f : true
+      defaultOpen: (_f = config.defaultOpen) != null ? _f : true,
+      position: (_g = config.position) != null ? _g : localSplitPosition.value
     };
   });
   const panelWidth = ref(splitConfig.value.width);
@@ -25,15 +28,22 @@ function useSplitMode(options) {
     return windowWidth.value >= AUTO_MODE_THRESHOLD ? "split" : "bubble";
   });
   const isSplitMode = computed(() => effectiveMode.value === "split");
+  const splitPosition = computed(() => splitConfig.value.position);
   const handleResize = (width) => {
-    var _a;
+    var _a2;
     panelWidth.value = width;
-    (_a = options.onWidthChange) == null ? void 0 : _a.call(options, width);
+    (_a2 = options.onWidthChange) == null ? void 0 : _a2.call(options, width);
   };
   const handleToggle = () => {
-    var _a;
+    var _a2;
     const nextOpen = !options.open.value;
-    (_a = options.onOpenChange) == null ? void 0 : _a.call(options, nextOpen);
+    (_a2 = options.onOpenChange) == null ? void 0 : _a2.call(options, nextOpen);
+  };
+  const handleTogglePosition = () => {
+    var _a2;
+    const nextPosition = localSplitPosition.value === "right" ? "left" : "right";
+    localSplitPosition.value = nextPosition;
+    (_a2 = options.onPositionChange) == null ? void 0 : _a2.call(options, nextPosition);
   };
   const handleWindowResize = () => {
     if (typeof window !== "undefined") {
@@ -46,12 +56,21 @@ function useSplitMode(options) {
     if (shouldShrink) {
       document.body.classList.add("has-opencode-split");
       document.body.style.setProperty("--opencode-split-width", `${panelWidth.value}px`);
+      if (splitPosition.value === "left") {
+        document.body.classList.add("has-opencode-split-left");
+        document.body.classList.remove("has-opencode-split-right");
+      } else {
+        document.body.classList.add("has-opencode-split-right");
+        document.body.classList.remove("has-opencode-split-left");
+      }
     } else {
       document.body.classList.remove("has-opencode-split");
+      document.body.classList.remove("has-opencode-split-left");
+      document.body.classList.remove("has-opencode-split-right");
       document.body.style.removeProperty("--opencode-split-width");
     }
   };
-  watch([isSplitMode, options.open, panelWidth], updateBodyClass, { immediate: true });
+  watch([isSplitMode, options.open, panelWidth, splitPosition], updateBodyClass, { immediate: true });
   watch(splitConfig, (config) => {
     if (panelWidth.value < config.minWidth) {
       panelWidth.value = config.minWidth;
@@ -60,12 +79,23 @@ function useSplitMode(options) {
       panelWidth.value = config.maxWidth;
     }
   });
+  watch(
+    () => {
+      var _a2;
+      return (_a2 = options.splitPosition) == null ? void 0 : _a2.value;
+    },
+    (val) => {
+      if (val && val !== localSplitPosition.value) {
+        localSplitPosition.value = val;
+      }
+    }
+  );
   onMounted(() => {
-    var _a;
+    var _a2;
     if (typeof window !== "undefined") {
       window.addEventListener("resize", handleWindowResize);
       if (isSplitMode.value && splitConfig.value.defaultOpen && !options.open.value) {
-        (_a = options.onOpenChange) == null ? void 0 : _a.call(options, true);
+        (_a2 = options.onOpenChange) == null ? void 0 : _a2.call(options, true);
       }
     }
   });
@@ -73,6 +103,8 @@ function useSplitMode(options) {
     if (typeof window !== "undefined") {
       window.removeEventListener("resize", handleWindowResize);
       document.body.classList.remove("has-opencode-split");
+      document.body.classList.remove("has-opencode-split-left");
+      document.body.classList.remove("has-opencode-split-right");
       document.body.style.removeProperty("--opencode-split-width");
     }
   });
@@ -81,8 +113,10 @@ function useSplitMode(options) {
     isSplitMode,
     panelWidth,
     splitConfig,
+    splitPosition,
     handleResize,
-    handleToggle
+    handleToggle,
+    handleTogglePosition
   };
 }
 export {

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

	@@ -1 +1 @@
1	- .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;display:flex;flex-direction:column;z-index:99999}.opencode-chat:not(.split-mode){opacity:0;visibility:hidden;transition:all .3s ease;transform:translate3d(var(---animationOrigin\.x),var(---animationOrigin\.y),0) scale(.95)}.opencode-chat.split-mode{position:fixed;~~right:0;~~top:0;bottom:0;height:100vh;max-height:100vh;border-radius:0;border-left:1px solid var(--oc-border-primary);~~box~~-~~shadow~~:var(--oc-~~shadow~~-lg);transform:translate(100%)~~;overflow:visible;opacity:1;visibility:visible;transition:transform .3s ease~~}.opencode-chat.split-mode .opencode-chat-content{overflow:hidden;flex:1}.opencode-chat.split-mode.open{transform:translate(0)}.opencode-chat.split-mode.dragging{transition:none}.opencode-chat.dragging .opencode-iframe{pointer-events:none}.opencode-chat:not(.split-mode){opacity:0;visibility:hidden;transition:all .3s ease}.opencode-chat:not(.split-mode).open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.opencode-chat.no-transition,.opencode-chat.no-transition.open{transition:none!important}.opencode-chat.minimized{width:~~300px~~;height:~~300px~~}.opencode-chat.minimized .opencode-iframe-container{margin-top:-146px}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;z-index:100;animation:opencode-notification-fade-in .3s ease}@keyframes opencode-notification-fade-in{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.opencode-session-empty{padding:24px;text-align:center;color:var(--oc-text-placeholder);font-size:14px}.opencode-split-toggle-btn{position:absolute;left:-21px;top:50%;transform:translateY(-50%);width:20px;height:48px;background:#fff;border:none;border-radius:8px 0 0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#667eea;box-shadow:0 4px 12px rgba(102,126,234,.4);transition:all .3s ease;z-index:5;transform-origin:right center}.opencode-split-toggle-btn:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 6px 16px rgba(102,126,234,.5)}.opencode-split-toggle-btn.opencode-theme-dark{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px rgba(102,126,234,.3)}.opencode-split-toggle-btn.opencode-theme-dark:before{content:"";position:absolute;left:-2px;top:-2px;right:0;bottom:-2px;border-radius:8px 0 0 8px;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-split-toggle-btn.opencode-theme-dark:hover{box-shadow:0 6px 16px rgba(102,126,234,.4)}.opencode-split-toggle-btn.thinking{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;animation:split-thinking-glow 2s ease-in-out infinite,split-thinking-pulse 2s ease-in-out infinite;box-shadow:0 0 20px rgba(102,126,234,.6),0 0 40px rgba(118,75,162,.4),0 0 60px rgba(102,126,234,.2)}.opencode-split-toggle-btn.thinking:before{content:"";position:absolute;left:-2px;top:-2px;right:0;bottom:-2px;border-radius:8px 0 0 8px;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-split-toggle-btn.thinking:after{content:"";position:absolute;left:-3px;top:-3px;right:-1px;bottom:-3px;border-radius:8px 0 0 8px;background:conic-gradient(from 180deg,transparent,rgba(102,126,234,.3),transparent,rgba(118,75,162,.3),transparent);z-index:-2;animation:split-thinking-rotate 2s linear infinite reverse;filter:blur(8px)}@keyframes split-thinking-glow{0%,to{box-shadow:0 0 20px rgba(102,126,234,.6),0 0 40px rgba(118,75,162,.4),0 0 60px rgba(102,126,234,.2)}50%{box-shadow:0 0 30px rgba(102,126,234,.8),0 0 60px rgba(118,75,162,.6),0 0 90px rgba(102,126,234,.3)}}@keyframes split-thinking-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes split-thinking-pulse{0%,to{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(.92)}}.opencode-split-toggle-icon{display:flex;align-items:center;justify-content:center;transition:transform .25s ease}.opencode-split-toggle-btn:hover .opencode-split-toggle-icon{transform:scale(1.1)}
1	+ .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;display:flex;flex-direction:column;z-index:99999}.opencode-chat:not(.split-mode){opacity:0;visibility:hidden;transition:all .3s ease;transform:translate3d(var(---animationOrigin\.x),var(---animationOrigin\.y),0) scale(.95)}.opencode-chat.split-mode{position:fixed;top:0;bottom:0;height:100vh;max-height:100vh;border-radius:0;box-shadow:var(--oc-shadow-lg);overflow:visible;opacity:1;visibility:visible;transition:transform .3s ease}.opencode-chat.split-mode.split-right{right:0;border-left:1px solid var(--oc-border-primary);transform:translate(100%)}.opencode-chat.split-mode.split-left{left:0;border-right:1px solid var(--oc-border-primary);transform:translate(-100%)}.opencode-chat.split-mode .opencode-chat-content{overflow:hidden;flex:1}.opencode-chat.split-mode.open{transform:translate(0)}.opencode-chat.split-mode.dragging{transition:none}.opencode-chat.dragging .opencode-iframe{pointer-events:none}.opencode-chat:not(.split-mode){opacity:0;visibility:hidden;transition:all .3s ease}.opencode-chat:not(.split-mode).open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.opencode-chat.no-transition,.opencode-chat.no-transition.open{transition:none!important}.opencode-chat.minimized:not(.split-mode){width:320px;height:320px}.opencode-chat.minimized:not(.split-mode) .opencode-iframe-container{margin-top:-146px}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;z-index:100;animation:opencode-notification-fade-in .3s ease}@keyframes opencode-notification-fade-in{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.opencode-session-empty{padding:24px;text-align:center;color:var(--oc-text-placeholder);font-size:14px}.opencode-split-toggle-btn{position:absolute;left:-21px;top:50%;transform:translateY(-50%);width:20px;height:48px;background:#fff;border:none;border-radius:8px 0 0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#667eea;box-shadow:0 4px 12px rgba(102,126,234,.4);transition:all .3s ease;z-index:5;transform-origin:right center}.opencode-split-toggle-btn.split-left{left:auto;right:-21px;border-radius:0 8px 8px 0;transform-origin:left center}.opencode-split-toggle-btn:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 6px 16px rgba(102,126,234,.5)}.opencode-split-toggle-btn.split-left:hover{transform:translateY(-50%) scale(1.1)}.opencode-split-toggle-btn.opencode-theme-dark{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px rgba(102,126,234,.3)}.opencode-split-toggle-btn.opencode-theme-dark:before{content:"";position:absolute;left:-2px;top:-2px;right:0;bottom:-2px;border-radius:8px 0 0 8px;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-split-toggle-btn.opencode-theme-dark.split-left:before{left:0;right:-2px;border-radius:0 8px 8px 0}.opencode-split-toggle-btn.opencode-theme-dark:hover{box-shadow:0 6px 16px rgba(102,126,234,.4)}.opencode-split-toggle-btn.thinking{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;animation:split-thinking-glow 2s ease-in-out infinite,split-thinking-pulse 2s ease-in-out infinite;box-shadow:0 0 20px rgba(102,126,234,.6),0 0 40px rgba(118,75,162,.4),0 0 60px rgba(102,126,234,.2)}.opencode-split-toggle-btn.thinking:before{content:"";position:absolute;left:-2px;top:-2px;right:0;bottom:-2px;border-radius:8px 0 0 8px;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-split-toggle-btn.thinking.split-left:before{left:0;right:-2px;border-radius:0 8px 8px 0}.opencode-split-toggle-btn.thinking:after{content:"";position:absolute;left:-3px;top:-3px;right:-1px;bottom:-3px;border-radius:8px 0 0 8px;background:conic-gradient(from 180deg,transparent,rgba(102,126,234,.3),transparent,rgba(118,75,162,.3),transparent);z-index:-2;animation:split-thinking-rotate 2s linear infinite reverse;filter:blur(8px)}.opencode-split-toggle-btn.thinking.split-left:after{left:-1px;right:-3px;border-radius:0 8px 8px 0}@keyframes split-thinking-glow{0%,to{box-shadow:0 0 20px rgba(102,126,234,.6),0 0 40px rgba(118,75,162,.4),0 0 60px rgba(102,126,234,.2)}50%{box-shadow:0 0 30px rgba(102,126,234,.8),0 0 60px rgba(118,75,162,.6),0 0 90px rgba(102,126,234,.3)}}@keyframes split-thinking-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes split-thinking-pulse{0%,to{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(.92)}}.opencode-split-toggle-icon{display:flex;align-items:center;justify-content:center;transition:transform .25s ease}.opencode-split-toggle-btn:hover .opencode-split-toggle-icon{transform:scale(1.1)}

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

@@ -18,6 +18,7 @@ type __VLS_Props = {
     notificationMode?: "widget" | "page";
     thinking?: boolean;
     resolvedTheme?: "light" | "dark";
+    splitPosition?: "left" | "right";
 };
 declare var __VLS_13: {}, __VLS_15: {}, __VLS_17: {}, __VLS_22: {}, __VLS_29: {}, __VLS_31: {}, __VLS_33: {}, __VLS_35: {};
 type __VLS_Slots = {} & {
@@ -154,6 +155,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     resolvedTheme: "light" | "dark";
     minimized: boolean;
     mode: "bubble" | "split";
+    splitPosition: "left" | "right";
     thinking: boolean;
     minWidth: number;
     maxWidth: number;

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

@@ -45,7 +45,8 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
     notificationMessage: { type: String, required: false, default: "" },
     notificationMode: { type: String, required: false, default: "widget" },
     thinking: { type: Boolean, required: false, default: false },
-    resolvedTheme: { type: String, required: false, default: "light" }
+    resolvedTheme: { type: String, required: false, default: "light" },
+    splitPosition: { type: String, required: false, default: "right" }
   },
   emits: ["resize", "resize-start", "resize-end", "toggle"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -92,7 +93,9 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
         minimized: props.minimized,
         dragging: props.dragging,
         "no-transition": props.noTransition,
-        "split-mode": props.mode === "split"
+        "split-mode": props.mode === "split",
+        "split-left": props.mode === "split" && props.splitPosition === "left",
+        "split-right": props.mode === "split" && props.splitPosition === "right"
       }
     ]);
     const __returned__ = { props, emit, slots, frameRef, sendMessageToIframe, handleResizeStart, handleResize, handleResizeEnd, handleToggle, panelStyle, panelClasses, Frame, Header, SessionList, SelectedNodes, ResizeHandle };
@@ -122,11 +125,29 @@ const _hoisted_4 = {
   "stroke-width": "2"
 };
 const _hoisted_5 = {
+  key: 2,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_6 = {
+  key: 3,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_7 = {
   key: 2,
   class: "opencode-notification",
   role: "alert"
 };
-const _hoisted_6 = { class: "opencode-chat-content" };
+const _hoisted_8 = { class: "opencode-chat-content" };
 function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
   return _openBlock(), _createElementBlock(
     "div",
@@ -140,20 +161,21 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         width: $props.panelWidth,
         "min-width": $props.minWidth,
         "max-width": $props.maxWidth,
+        position: $props.splitPosition,
         onResize: $setup.handleResize,
         onResizeStart: $setup.handleResizeStart,
         onResizeEnd: $setup.handleResizeEnd
-      }, null, 8, ["width", "min-width", "max-width"])) : _createCommentVNode("v-if", true),
+      }, null, 8, ["width", "min-width", "max-width", "position"])) : _createCommentVNode("v-if", true),
       $props.mode === "split" ? (_openBlock(), _createElementBlock("button", {
         key: 1,
         type: "button",
-        class: _normalizeClass(["opencode-split-toggle-btn", { open: $setup.props.open, thinking: $setup.props.thinking, "opencode-theme-dark": $props.resolvedTheme === "dark" }]),
+        class: _normalizeClass(["opencode-split-toggle-btn", { open: $setup.props.open, thinking: $setup.props.thinking, "opencode-theme-dark": $props.resolvedTheme === "dark", "split-left": $props.splitPosition === "left" }]),
         "aria-expanded": $props.open,
         "aria-label": "\u5207\u6362\u9762\u677F",
         onClick: $setup.handleToggle
       }, [
         _createElementVNode("span", _hoisted_2, [
-          $props.open ? (_openBlock(), _createElementBlock("svg", _hoisted_3, [..._cache[0] || (_cache[0] = [
+          $props.open && $props.splitPosition === "right" ? (_openBlock(), _createElementBlock("svg", _hoisted_3, [..._cache[0] || (_cache[0] = [
             _createElementVNode(
               "path",
               {
@@ -165,7 +187,8 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
               -1
               /* CACHED */
             )
-          ])])) : (_openBlock(), _createElementBlock("svg", _hoisted_4, [..._cache[1] || (_cache[1] = [
+          ])])) : _createCommentVNode("v-if", true),
+          !$props.open && $props.splitPosition === "right" ? (_openBlock(), _createElementBlock("svg", _hoisted_4, [..._cache[1] || (_cache[1] = [
             _createElementVNode(
               "path",
               {
@@ -177,7 +200,33 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
               -1
               /* CACHED */
             )
-          ])]))
+          ])])) : _createCommentVNode("v-if", true),
+          $props.open && $props.splitPosition === "left" ? (_openBlock(), _createElementBlock("svg", _hoisted_5, [..._cache[2] || (_cache[2] = [
+            _createElementVNode(
+              "path",
+              {
+                d: "M15 18l-6-6 6-6",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              },
+              null,
+              -1
+              /* CACHED */
+            )
+          ])])) : _createCommentVNode("v-if", true),
+          !$props.open && $props.splitPosition === "left" ? (_openBlock(), _createElementBlock("svg", _hoisted_6, [..._cache[3] || (_cache[3] = [
+            _createElementVNode(
+              "path",
+              {
+                d: "M9 18l6-6-6-6",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              },
+              null,
+              -1
+              /* CACHED */
+            )
+          ])])) : _createCommentVNode("v-if", true)
         ])
       ], 10, _hoisted_1)) : _createCommentVNode("v-if", true),
       _createVNode(
@@ -214,16 +263,16 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
       ),
       $props.notificationVisible && $props.notificationMode === "widget" ? (_openBlock(), _createElementBlock(
         "div",
-        _hoisted_5,
+        _hoisted_7,
         _toDisplayString($props.notificationMessage),
         1
         /* TEXT */
       )) : _createCommentVNode("v-if", true),
-      _createElementVNode("div", _hoisted_6, [
+      _createElementVNode("div", _hoisted_8, [
         _createVNode($setup["SessionList"], null, {
           empty: _withCtx(() => [
             _renderSlot(_ctx.$slots, "sessions-empty", {}, () => [
-              _cache[2] || (_cache[2] = _createElementVNode(
+              _cache[4] || (_cache[4] = _createElementVNode(
                 "div",
                 { class: "opencode-session-empty" },
                 "\u6682\u65E0\u4F1A\u8BDD",

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

@@ -1,4 +1,4 @@
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
     'session-toggle-icon'?: (props: typeof __VLS_1) => any;
 } & {
@@ -6,11 +6,15 @@ type __VLS_Slots = {} & {
 } & {
     'theme-icon'?: (props: typeof __VLS_5) => any;
 } & {
-    'prompt-dock-icon'?: (props: typeof __VLS_7) => any;
+    'display-mode-icon'?: (props: typeof __VLS_7) => any;
 } & {
-    'minimize-icon'?: (props: typeof __VLS_9) => any;
+    'split-position-icon'?: (props: typeof __VLS_9) => any;
 } & {
-    'close-icon'?: (props: typeof __VLS_11) => any;
+    'prompt-dock-icon'?: (props: typeof __VLS_11) => any;
+} & {
+    'minimize-icon'?: (props: typeof __VLS_13) => any;
+} & {
+    'close-icon'?: (props: typeof __VLS_15) => any;
 };
 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>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;