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

package/lib/open-code-widget/src/components/Header.vue.js

@@ -40,9 +40,13 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       minimized,
       promptDockVisible,
       mode,
+      displayMode,
+      splitPosition,
       handleToggleSessionList,
       handleToggleSelectMode,
       handleToggleTheme,
+      handleToggleDisplayMode,
+      handleToggleSplitPosition,
       handleClose,
       handleToggleMinimize,
       handleTogglePromptDock
@@ -64,7 +68,37 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       };
       return `\u5207\u6362\u4E3B\u9898 - \u5F53\u524D: ${themeLabels[theme.value]}`;
     });
-    const __returned__ = { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, theme, resolvedTheme, minimized, promptDockVisible, mode, handleToggleSessionList, handleToggleSelectMode, handleToggleTheme, handleClose, handleToggleMinimize, handleTogglePromptDock, isSplitMode, themeIconTitle, themeIconLabel };
+    const displayModeIconTitle = (0, import_vue2.computed)(() => {
+      const displayModeLabels = {
+        bubble: "\u6C14\u6CE1\u6A21\u5F0F",
+        split: "\u5206\u5C4F\u6A21\u5F0F",
+        auto: "\u81EA\u52A8\u6A21\u5F0F"
+      };
+      return `\u5C55\u793A\u6A21\u5F0F: ${displayModeLabels[displayMode.value]}`;
+    });
+    const displayModeIconLabel = (0, import_vue2.computed)(() => {
+      const displayModeLabels = {
+        bubble: "\u6C14\u6CE1\u6A21\u5F0F",
+        split: "\u5206\u5C4F\u6A21\u5F0F",
+        auto: "\u81EA\u52A8\u6A21\u5F0F"
+      };
+      const modes = ["bubble", "split", "auto"];
+      const currentIndex = modes.indexOf(displayMode.value);
+      const nextMode = modes[(currentIndex + 1) % modes.length];
+      return `\u5207\u6362\u5C55\u793A\u6A21\u5F0F - \u4E0B\u4E00\u4E2A: ${displayModeLabels[nextMode]}`;
+    });
+    const splitPositionIconTitle = (0, import_vue2.computed)(() => {
+      const positionLabels = {
+        left: "\u5DE6\u4FA7",
+        right: "\u53F3\u4FA7"
+      };
+      return `\u5206\u680F\u4F4D\u7F6E: ${positionLabels[splitPosition.value]}`;
+    });
+    const splitPositionIconLabel = (0, import_vue2.computed)(() => {
+      const nextPosition = splitPosition.value === "right" ? "\u5DE6\u4FA7" : "\u53F3\u4FA7";
+      return `\u5207\u6362\u5206\u680F\u4F4D\u7F6E - \u4E0B\u4E00\u4E2A: ${nextPosition}`;
+    });
+    const __returned__ = { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, theme, resolvedTheme, minimized, promptDockVisible, mode, displayMode, splitPosition, handleToggleSessionList, handleToggleSelectMode, handleToggleTheme, handleToggleDisplayMode, handleToggleSplitPosition, handleClose, handleToggleMinimize, handleTogglePromptDock, isSplitMode, themeIconTitle, themeIconLabel, displayModeIconTitle, displayModeIconLabel, splitPositionIconTitle, splitPositionIconLabel };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -104,11 +138,63 @@ const _hoisted_8 = {
   "stroke-width": "2",
   "aria-hidden": "true"
 };
-const _hoisted_9 = { class: "opencode-chat-header-title" };
-const _hoisted_10 = { class: "opencode-chat-header-actions" };
-const _hoisted_11 = ["title", "aria-label", "aria-pressed"];
-const _hoisted_12 = ["title", "aria-label", "aria-pressed"];
-const _hoisted_13 = {
+const _hoisted_9 = ["title", "aria-label"];
+const _hoisted_10 = {
+  key: 0,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "aria-hidden": "true"
+};
+const _hoisted_11 = {
+  key: 1,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "aria-hidden": "true"
+};
+const _hoisted_12 = {
+  key: 2,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "aria-hidden": "true"
+};
+const _hoisted_13 = { class: "opencode-chat-header-title" };
+const _hoisted_14 = { class: "opencode-chat-header-actions" };
+const _hoisted_15 = ["title", "aria-label"];
+const _hoisted_16 = {
+  key: 0,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "aria-hidden": "true"
+};
+const _hoisted_17 = {
+  key: 1,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "aria-hidden": "true"
+};
+const _hoisted_18 = ["title", "aria-label", "aria-pressed"];
+const _hoisted_19 = ["title", "aria-label", "aria-pressed"];
+const _hoisted_20 = {
   key: 0,
   viewBox: "0 0 24 24",
   width: "14",
@@ -118,7 +204,7 @@ const _hoisted_13 = {
   "stroke-width": "2",
   "aria-hidden": "true"
 };
-const _hoisted_14 = {
+const _hoisted_21 = {
   key: 1,
   viewBox: "0 0 24 24",
   width: "14",
@@ -140,7 +226,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _cache[0] || (_cache[0] = (...args) => $setup.handleToggleSessionList && $setup.handleToggleSessionList(...args))
       }, [
         (0, import_vue3.renderSlot)(_ctx.$slots, "session-toggle-icon", {}, () => [
-          _cache[6] || (_cache[6] = (0, import_vue3.createElementVNode)(
+          _cache[8] || (_cache[8] = (0, import_vue3.createElementVNode)(
             "svg",
             {
               viewBox: "0 0 24 24",
@@ -172,7 +258,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _cache[1] || (_cache[1] = (...args) => $setup.handleToggleSelectMode && $setup.handleToggleSelectMode(...args))
       }, [
         (0, import_vue3.renderSlot)(_ctx.$slots, "select-icon", {}, () => [
-          _cache[7] || (_cache[7] = (0, import_vue3.createElementVNode)(
+          _cache[9] || (_cache[9] = (0, import_vue3.createElementVNode)(
             "svg",
             {
               viewBox: "0 0 1024 1024",
@@ -203,9 +289,9 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _cache[2] || (_cache[2] = (...args) => $setup.handleToggleTheme && $setup.handleToggleTheme(...args))
       }, [
         (0, import_vue3.renderSlot)(_ctx.$slots, "theme-icon", {}, () => [
-          $setup.theme === "light" ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_6, [..._cache[8] || (_cache[8] = [
+          $setup.theme === "light" ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_6, [..._cache[10] || (_cache[10] = [
             (0, import_vue3.createStaticVNode)('<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>', 9)
-          ])])) : $setup.theme === "dark" ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_7, [..._cache[9] || (_cache[9] = [
+          ])])) : $setup.theme === "dark" ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_7, [..._cache[11] || (_cache[11] = [
             (0, import_vue3.createElementVNode)(
               "path",
               { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" },
@@ -213,31 +299,231 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
               -1
               /* CACHED */
             )
-          ])])) : ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_8, [..._cache[10] || (_cache[10] = [
+          ])])) : ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_8, [..._cache[12] || (_cache[12] = [
             (0, import_vue3.createStaticVNode)('<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line><circle cx="12" cy="10" r="3"></circle><path d="M7 7l2 2M17 7l-2 2M7 13l2-2M17 13l-2-2"></path>', 5)
           ])]))
         ])
-      ], 8, _hoisted_5)
+      ], 8, _hoisted_5),
+      (0, import_vue3.createElementVNode)("button", {
+        class: "opencode-header-btn display-mode-btn",
+        type: "button",
+        title: $setup.displayModeIconTitle,
+        "aria-label": $setup.displayModeIconLabel,
+        onClick: _cache[3] || (_cache[3] = (...args) => $setup.handleToggleDisplayMode && $setup.handleToggleDisplayMode(...args))
+      }, [
+        (0, import_vue3.renderSlot)(_ctx.$slots, "display-mode-icon", {}, () => [
+          $setup.displayMode === "bubble" ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_10, [..._cache[13] || (_cache[13] = [
+            (0, import_vue3.createElementVNode)(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: "10"
+              },
+              null,
+              -1
+              /* CACHED */
+            ),
+            (0, import_vue3.createElementVNode)(
+              "path",
+              {
+                d: "M8 14s1.5 2 4 2 4-2 4-2",
+                "stroke-linecap": "round"
+              },
+              null,
+              -1
+              /* CACHED */
+            ),
+            (0, import_vue3.createElementVNode)(
+              "line",
+              {
+                x1: "9",
+                y1: "9",
+                x2: "9.01",
+                y2: "9",
+                "stroke-linecap": "round"
+              },
+              null,
+              -1
+              /* CACHED */
+            ),
+            (0, import_vue3.createElementVNode)(
+              "line",
+              {
+                x1: "15",
+                y1: "9",
+                x2: "15.01",
+                y2: "9",
+                "stroke-linecap": "round"
+              },
+              null,
+              -1
+              /* CACHED */
+            )
+          ])])) : $setup.displayMode === "split" ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_11, [..._cache[14] || (_cache[14] = [
+            (0, import_vue3.createElementVNode)(
+              "rect",
+              {
+                x: "3",
+                y: "3",
+                width: "18",
+                height: "18",
+                rx: "2"
+              },
+              null,
+              -1
+              /* CACHED */
+            ),
+            (0, import_vue3.createElementVNode)(
+              "line",
+              {
+                x1: "12",
+                y1: "3",
+                x2: "12",
+                y2: "21"
+              },
+              null,
+              -1
+              /* CACHED */
+            )
+          ])])) : ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_12, [..._cache[15] || (_cache[15] = [
+            (0, import_vue3.createElementVNode)(
+              "rect",
+              {
+                x: "3",
+                y: "3",
+                width: "8",
+                height: "8",
+                rx: "1"
+              },
+              null,
+              -1
+              /* CACHED */
+            ),
+            (0, import_vue3.createElementVNode)(
+              "rect",
+              {
+                x: "15",
+                y: "3",
+                width: "6",
+                height: "8",
+                rx: "1"
+              },
+              null,
+              -1
+              /* CACHED */
+            ),
+            (0, import_vue3.createElementVNode)(
+              "rect",
+              {
+                x: "3",
+                y: "15",
+                width: "8",
+                height: "6",
+                rx: "1"
+              },
+              null,
+              -1
+              /* CACHED */
+            ),
+            (0, import_vue3.createElementVNode)(
+              "circle",
+              {
+                cx: "18",
+                cy: "18",
+                r: "3"
+              },
+              null,
+              -1
+              /* CACHED */
+            )
+          ])]))
+        ])
+      ], 8, _hoisted_9)
     ]),
     (0, import_vue3.createElementVNode)(
       "span",
-      _hoisted_9,
+      _hoisted_13,
       (0, import_vue3.toDisplayString)($setup.title),
       1
       /* TEXT */
     ),
-    (0, import_vue3.createElementVNode)("div", _hoisted_10, [
-      !$setup.isSplitMode ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("button", {
+    (0, import_vue3.createElementVNode)("div", _hoisted_14, [
+      $setup.isSplitMode ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("button", {
         key: 0,
+        class: "opencode-header-btn split-position-btn",
+        type: "button",
+        title: $setup.splitPositionIconTitle,
+        "aria-label": $setup.splitPositionIconLabel,
+        onClick: _cache[4] || (_cache[4] = (...args) => $setup.handleToggleSplitPosition && $setup.handleToggleSplitPosition(...args))
+      }, [
+        (0, import_vue3.renderSlot)(_ctx.$slots, "split-position-icon", {}, () => [
+          $setup.splitPosition === "right" ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_16, [..._cache[16] || (_cache[16] = [
+            (0, import_vue3.createElementVNode)(
+              "rect",
+              {
+                x: "3",
+                y: "3",
+                width: "18",
+                height: "18",
+                rx: "2"
+              },
+              null,
+              -1
+              /* CACHED */
+            ),
+            (0, import_vue3.createElementVNode)(
+              "line",
+              {
+                x1: "15",
+                y1: "3",
+                x2: "15",
+                y2: "21"
+              },
+              null,
+              -1
+              /* CACHED */
+            )
+          ])])) : ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_17, [..._cache[17] || (_cache[17] = [
+            (0, import_vue3.createElementVNode)(
+              "rect",
+              {
+                x: "3",
+                y: "3",
+                width: "18",
+                height: "18",
+                rx: "2"
+              },
+              null,
+              -1
+              /* CACHED */
+            ),
+            (0, import_vue3.createElementVNode)(
+              "line",
+              {
+                x1: "9",
+                y1: "3",
+                x2: "9",
+                y2: "21"
+              },
+              null,
+              -1
+              /* CACHED */
+            )
+          ])]))
+        ])
+      ], 8, _hoisted_15)) : (0, import_vue3.createCommentVNode)("v-if", true),
+      !$setup.isSplitMode ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("button", {
+        key: 1,
         class: "opencode-header-btn prompt-dock",
         type: "button",
         title: $setup.promptDockVisible ? "\u9690\u85CF\u5BF9\u8BDD\u6846" : "\u663E\u793A\u5BF9\u8BDD\u6846",
         "aria-label": $setup.promptDockVisible ? "\u9690\u85CF\u5BF9\u8BDD\u6846" : "\u663E\u793A\u5BF9\u8BDD\u6846",
         "aria-pressed": $setup.promptDockVisible,
-        onClick: _cache[3] || (_cache[3] = (...args) => $setup.handleTogglePromptDock && $setup.handleTogglePromptDock(...args))
+        onClick: _cache[5] || (_cache[5] = (...args) => $setup.handleTogglePromptDock && $setup.handleTogglePromptDock(...args))
       }, [
         (0, import_vue3.renderSlot)(_ctx.$slots, "prompt-dock-icon", {}, () => [
-          _cache[11] || (_cache[11] = (0, import_vue3.createElementVNode)(
+          _cache[18] || (_cache[18] = (0, import_vue3.createElementVNode)(
             "svg",
             {
               viewBox: "0 0 24 24",
@@ -255,18 +541,18 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
             /* CACHED */
           ))
         ])
-      ], 8, _hoisted_11)) : (0, import_vue3.createCommentVNode)("v-if", true),
+      ], 8, _hoisted_18)) : (0, import_vue3.createCommentVNode)("v-if", true),
       !$setup.isSplitMode ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("button", {
-        key: 1,
+        key: 2,
         class: "opencode-header-btn minimize",
         type: "button",
         title: $setup.minimized ? "\u5C55\u5F00" : "\u6700\u5C0F\u5316",
         "aria-label": $setup.minimized ? "\u5C55\u5F00\u9762\u677F" : "\u6700\u5C0F\u5316\u9762\u677F",
         "aria-pressed": $setup.minimized,
-        onClick: _cache[4] || (_cache[4] = (...args) => $setup.handleToggleMinimize && $setup.handleToggleMinimize(...args))
+        onClick: _cache[6] || (_cache[6] = (...args) => $setup.handleToggleMinimize && $setup.handleToggleMinimize(...args))
       }, [
         (0, import_vue3.renderSlot)(_ctx.$slots, "minimize-icon", {}, () => [
-          $setup.minimized ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_13, [..._cache[12] || (_cache[12] = [
+          $setup.minimized ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_20, [..._cache[19] || (_cache[19] = [
             (0, import_vue3.createElementVNode)(
               "path",
               { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" },
@@ -274,7 +560,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
               -1
               /* CACHED */
             )
-          ])])) : ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_14, [..._cache[13] || (_cache[13] = [
+          ])])) : ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("svg", _hoisted_21, [..._cache[20] || (_cache[20] = [
             (0, import_vue3.createElementVNode)(
               "path",
               { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" },
@@ -284,17 +570,17 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
             )
           ])]))
         ])
-      ], 8, _hoisted_12)) : (0, import_vue3.createCommentVNode)("v-if", true),
+      ], 8, _hoisted_19)) : (0, import_vue3.createCommentVNode)("v-if", true),
       !$setup.isSplitMode ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("button", {
-        key: 2,
+        key: 3,
         class: "opencode-header-btn close",
         type: "button",
         title: "\u5173\u95ED",
         "aria-label": "\u5173\u95ED\u9762\u677F",
-        onClick: _cache[5] || (_cache[5] = (...args) => $setup.handleClose && $setup.handleClose(...args))
+        onClick: _cache[7] || (_cache[7] = (...args) => $setup.handleClose && $setup.handleClose(...args))
       }, [
         (0, import_vue3.renderSlot)(_ctx.$slots, "close-icon", {}, () => [
-          _cache[14] || (_cache[14] = (0, import_vue3.createElementVNode)(
+          _cache[21] || (_cache[21] = (0, import_vue3.createElementVNode)(
             "svg",
             {
               viewBox: "0 0 24 24",

package/lib/open-code-widget/src/components/ResizeHandle-sfc.css

@@ -1 +1 @@
-.opencode-resize-handle{position:absolute;left:0;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background .2s ease}.opencode-resize-handle:hover,.opencode-resize-handle.resizing{background:var(--oc-primary-bg)}.opencode-resize-handle:after{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);width:2px;height:40px;background:var(--oc-border-secondary);border-radius:1px;opacity:0;transition:opacity .2s ease}.opencode-resize-handle:hover:after,.opencode-resize-handle.resizing:after{opacity:1}
+.opencode-resize-handle{position:absolute;left:0;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background .2s ease}.opencode-resize-handle.handle-left{left:auto;right:0}.opencode-resize-handle:hover,.opencode-resize-handle.resizing{background:var(--oc-primary-bg)}.opencode-resize-handle:after{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);width:2px;height:40px;background:var(--oc-border-secondary);border-radius:1px;opacity:0;transition:opacity .2s ease}.opencode-resize-handle.handle-left:after{left:auto;right:2px}.opencode-resize-handle:hover:after,.opencode-resize-handle.resizing:after{opacity:1}

package/lib/open-code-widget/src/components/ResizeHandle.vue.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     width?: number;
     minWidth?: number;
     maxWidth?: number;
+    position?: "left" | "right";
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     resize: (width: number) => any;
@@ -15,5 +16,6 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     width: number;
     minWidth: number;
     maxWidth: number;
+    position: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/lib/open-code-widget/src/components/ResizeHandle.vue.js

@@ -48,7 +48,8 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
   props: {
     width: { type: Number, required: false, default: 500 },
     minWidth: { type: Number, required: false, default: 400 },
-    maxWidth: { type: Number, required: false, default: 800 }
+    maxWidth: { type: Number, required: false, default: 800 },
+    position: { type: String, required: false, default: "right" }
   },
   emits: ["resize", "resize-start", "resize-end"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -69,7 +70,12 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
     };
     const handleMouseMove = (e) => {
       if (!isResizing.value) return;
-      const deltaX = startX.value - e.clientX;
+      let deltaX;
+      if (props.position === "right") {
+        deltaX = startX.value - e.clientX;
+      } else {
+        deltaX = e.clientX - startX.value;
+      }
       const newWidth = Math.max(props.minWidth, Math.min(props.maxWidth, startWidth.value + deltaX));
       emit("resize", newWidth);
     };
@@ -95,7 +101,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
   return (0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)(
     "div",
     {
-      class: (0, import_vue3.normalizeClass)(["opencode-resize-handle", { resizing: $setup.isResizing }]),
+      class: (0, import_vue3.normalizeClass)(["opencode-resize-handle", { resizing: $setup.isResizing, "handle-left": $props.position === "left" }]),
       onMousedown: $setup.handleMouseDown,
       onDblclick: $setup.handleDoubleClick
     },

package/lib/open-code-widget/src/context.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from "vue";
-import type { OpenCodeWidgetSessionItem, OpenCodeSelectedElementItem, OpenCodeRemoveSelectedPayload, OpencodeSessionThinkingState } from "./types";
+import type { OpenCodeWidgetSessionItem, OpenCodeSelectedElementItem, OpenCodeRemoveSelectedPayload, OpencodeSessionThinkingState, DisplayMode } from "./types";
 import type { FloatingBubbleOffset } from "./components/FloatingBubble/types";
 export interface OpenCodeWidgetContext {
     theme: Ref<string>;
@@ -25,6 +25,8 @@ export interface OpenCodeWidgetContext {
     promptDockVisible: Ref<boolean>;
     bubbleOffset: Ref<FloatingBubbleOffset | undefined>;
     mode: Ref<"bubble" | "split">;
+    displayMode: Ref<DisplayMode>;
+    splitPosition: Ref<"left" | "right">;
     sessionStates: Ref<Record<string, OpencodeSessionThinkingState>>;
     iframeSource: Ref<string>;
     buttonActive: Ref<boolean>;
@@ -39,6 +41,8 @@ export interface OpenCodeWidgetContext {
     handleTogglePromptDock: () => void;
     handleToggleSessionList: () => void;
     handleToggleTheme: () => void;
+    handleToggleDisplayMode: () => void;
+    handleToggleSplitPosition: () => void;
     handleEmptyAction: () => void;
     handleCreateSession: () => void;
     handleSelectSession: (item: OpenCodeWidgetSessionItem) => void;

package/lib/open-code-widget/src/index-sfc.css

@@ -1 +1 @@
-.opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-thinking-gradient-1: #10b981;--oc-thinking-gradient-2: #059669;--oc-thinking-glow: rgba(16, 185, 129, .3);--oc-thinking-glow-strong: rgba(16, 185, 129, .6);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: #3b82f6;--oc-trigger-bg-hover: #2563eb;--oc-trigger-bg-active: #1d4ed8;--oc-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--oc-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--oc-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-thinking-gradient-1: #34d399;--oc-thinking-gradient-2: #10b981;--oc-thinking-glow: rgba(52, 211, 153, .3);--oc-thinking-glow-strong: rgba(52, 211, 153, .6);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: #60a5fa;--oc-trigger-bg-hover: #3b82f6;--oc-trigger-bg-active: #2563eb;--oc-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--oc-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--oc-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.opencode-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.opencode-chat.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;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;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;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)}}body.has-opencode-split{padding-right:var(--opencode-split-width, 500px);transition:padding-right .3s ease;min-width:auto}
+.opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-thinking-gradient-1: #10b981;--oc-thinking-gradient-2: #059669;--oc-thinking-glow: rgba(16, 185, 129, .3);--oc-thinking-glow-strong: rgba(16, 185, 129, .6);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: #3b82f6;--oc-trigger-bg-hover: #2563eb;--oc-trigger-bg-active: #1d4ed8;--oc-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--oc-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--oc-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-thinking-gradient-1: #34d399;--oc-thinking-gradient-2: #10b981;--oc-thinking-glow: rgba(52, 211, 153, .3);--oc-thinking-glow-strong: rgba(52, 211, 153, .6);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: #60a5fa;--oc-trigger-bg-hover: #3b82f6;--oc-trigger-bg-active: #2563eb;--oc-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--oc-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--oc-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.opencode-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.opencode-chat.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:320px;height:320px}.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;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;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;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)}}body.has-opencode-split{transition:padding .3s ease;min-width:auto}body.has-opencode-split-right{padding-right:var(--opencode-split-width, 500px)}body.has-opencode-split-left{padding-left:var(--opencode-split-width, 500px)}

package/lib/open-code-widget/src/index.vue.d.ts

@@ -43,6 +43,7 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
     selectMode: boolean;
     selectEnabled: boolean;
     theme: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetTheme;
+    displayMode: import("@vite-plugin-opencode-assistant/shared").DisplayMode;
     showSessionListSkeleton: boolean;
     sessionKey: string;
     sessions: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetSession[];
@@ -54,7 +55,6 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
     splitPanelWidth: number;
     currentSessionId: string | null;
     selectedElements: import("@vite-plugin-opencode-assistant/shared").OpenCodeSelectedElement[];
-    displayMode: import("@vite-plugin-opencode-assistant/shared").DisplayMode;
     splitMode: import("@vite-plugin-opencode-assistant/shared").SplitModeOptions;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;