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

package/es/index.d.ts

@@ -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.49";
 declare function install(app: App<any>, options?: any): void;
 export { install, version, OpenCodeWidget };
 export default install;

package/es/index.js

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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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)}
+.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

@@ -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

@@ -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",
@@ -147,13 +168,13 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
       $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 +186,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 +199,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 +262,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

@@ -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>;