@aipanel/ui 1.2.0-beta.0

package/lib/AI-panel-widget/src/index.vue.cjs

@@ -0,0 +1,811 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_vue_exports = {};
+__export(index_vue_exports, {
+  default: () => index_vue_default
+});
+module.exports = __toCommonJS(index_vue_exports);
+var import_index_sfc = require("./index-sfc.css");
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_ChatPanel_vue = __toESM(require("./components/ChatPanel.vue.cjs"));
+var import_SelectHint_vue = __toESM(require("./components/SelectHint.vue.cjs"));
+var import_Trigger_vue = __toESM(require("./components/Trigger.vue.cjs"));
+var import_use_selection = require("../composables/use-selection.cjs");
+var import_use_session = require("../composables/use-session.cjs");
+var import_use_widget = require("../composables/use-widget.cjs");
+var import_use_inspector = require("../composables/use-inspector.cjs");
+var import_use_persist_state = require("../composables/use-persist-state.cjs");
+var import_use_split = require("../composables/use-split.cjs");
+var import_context = require("./context.cjs");
+var import_core = require("@aipanel/core");
+var import_vue3 = require("vue");
+const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
+  ...{
+    name: "AIPanelWidget"
+  },
+  __name: "index",
+  props: {
+    open: { type: Boolean, required: false, default: false },
+    theme: { type: String, required: false, default: "auto" },
+    title: { type: String, required: false, default: "AI \u52A9\u624B" },
+    hotkeyLabel: { type: String, required: false, default: "Ctrl+K" },
+    selectShortcutLabel: { type: String, required: false, default: "\u6309 ESC \u6216 Ctrl+P \u9000\u51FA" },
+    selectMode: { type: Boolean, required: false, default: false },
+    sessionListCollapsed: { type: Boolean, required: false, default: true },
+    sessionKey: { type: String, required: false, default: "id" },
+    frameLoading: { type: Boolean, required: false, default: false },
+    loadingSessionList: { type: Boolean, required: false },
+    showSessionListSkeleton: { type: Boolean, required: false, default: false },
+    showEmptyState: { type: Boolean, required: false, default: false },
+    showError: { type: Boolean, required: false, default: false },
+    emptyStateText: { type: String, required: false, default: "\u5F53\u524D\u9879\u76EE\u6682\u65E0\u4F1A\u8BDD" },
+    emptyStateActionText: { type: String, required: false, default: "\u7ACB\u5373\u521B\u5EFA" },
+    iframeSrc: { type: String, required: false, default: "" },
+    sessions: { type: Array, required: false, default: () => [] },
+    currentSessionId: { type: [String, null], required: false, default: null },
+    selectedElements: { type: Array, required: false, default: () => [] },
+    showClearAll: { type: Boolean, required: false, default: true },
+    selectEnabled: { type: Boolean, required: false, default: true },
+    thinking: { type: Boolean, required: false, default: false },
+    sessionStates: { type: Object, required: false },
+    displayMode: { type: String, required: false, default: "bubble" },
+    splitMode: { type: Object, required: false, default: void 0 },
+    splitPanelWidth: { type: Number, required: false, default: 500 },
+    hideBubble: { type: Boolean, required: false, default: false },
+    reviewPanelEnabled: { type: Boolean, required: false, default: false }
+  },
+  emits: ["update:open", "update:selectMode", "update:sessionListCollapsed", "update:currentSessionId", "update:selectedElements", "update:theme", "update:thinking", "update:splitPanelWidth", "toggle", "close", "toggle-session-list", "toggle-select-mode", "toggle-theme", "create-session", "select-session", "delete-session", "click-selected-node", "remove-selected-node", "clear-selected-nodes", "empty-action", "frame-loaded", "thinking-change", "split-panel-width-change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    (0, import_vue.useCssVars)((_ctx) => ({
+      "-chatAnimationOrigin.x": chatAnimationOrigin.value.x,
+      "-chatAnimationOrigin.y": chatAnimationOrigin.value.y
+    }));
+    const props = __props;
+    const emit = __emit;
+    const slots = (0, import_vue2.useSlots)();
+    const notificationMessage = (0, import_vue2.ref)("");
+    const notificationVisible = (0, import_vue2.ref)(false);
+    const notificationMode = (0, import_vue2.ref)("widget");
+    let notificationTimer = null;
+    const showNotification = (message, options) => {
+      const { duration = 3e3, mode = "widget" } = options || {};
+      notificationMessage.value = message;
+      notificationVisible.value = true;
+      notificationMode.value = mode;
+      if (notificationTimer) clearTimeout(notificationTimer);
+      notificationTimer = setTimeout(() => {
+        notificationVisible.value = false;
+      }, duration);
+    };
+    const dialogVisible = (0, import_vue2.ref)(false);
+    const dialogMessage = (0, import_vue2.ref)("");
+    let dialogResolve = null;
+    const showConfirmDialog = (message) => {
+      dialogMessage.value = message;
+      dialogVisible.value = true;
+      return new Promise((resolve) => {
+        dialogResolve = resolve;
+      });
+    };
+    const handleDialogConfirm = () => {
+      dialogVisible.value = false;
+      if (dialogResolve) dialogResolve(true);
+    };
+    const handleDialogCancel = () => {
+      dialogVisible.value = false;
+      if (dialogResolve) dialogResolve(false);
+    };
+    const frameRef = (0, import_vue2.ref)(null);
+    const triggerRef = (0, import_vue2.ref)(null);
+    const sendMessageToIframe = (type, data) => {
+      frameRef.value?.sendMessageToIframe(type, data);
+    };
+    const localSessionListCollapsed = (0, import_vue2.ref)(props.sessionListCollapsed);
+    const localDisplayMode = (0, import_vue2.ref)(props.displayMode);
+    const localSplitPosition = (0, import_vue2.ref)(
+      props.splitMode?.position ?? "right"
+    );
+    const minimized = (0, import_vue2.ref)(false);
+    const promptDockVisible = (0, import_vue2.ref)(true);
+    const reviewPanelVisible = (0, import_vue2.ref)(false);
+    const isRestoring = (0, import_vue2.ref)(true);
+    const iframeLoaded = (0, import_vue2.ref)(false);
+    const iframeReady = (0, import_vue2.ref)(false);
+    const splitPanelWidth = (0, import_vue2.ref)(props.splitPanelWidth);
+    const syncStateToIframe = () => {
+      if (!iframeLoaded.value || !iframeReady.value) return;
+      sendMessageToIframe(import_core.WIDGET_MSG.PROMPT_DOCK_VISIBILITY, { visible: promptDockVisible.value });
+      sendMessageToIframe(import_core.WIDGET_MSG.MINIMIZE_STATE, { minimized: minimized.value });
+      if (props.reviewPanelEnabled) {
+        sendMessageToIframe(import_core.WIDGET_MSG.REVIEW_PANEL_TOGGLE, { visible: reviewPanelVisible.value });
+      }
+    };
+    const handleFrameLoaded = () => {
+      emit("frame-loaded");
+      iframeLoaded.value = true;
+    };
+    (0, import_vue2.watch)(
+      () => props.sessionListCollapsed,
+      (val) => {
+        localSessionListCollapsed.value = val;
+      }
+    );
+    (0, import_vue2.watch)(
+      () => props.splitPanelWidth,
+      (val) => {
+        splitPanelWidth.value = val;
+      }
+    );
+    (0, import_vue2.watch)(
+      () => props.displayMode,
+      (val) => {
+        localDisplayMode.value = val;
+      }
+    );
+    const handleToggleDisplayMode = () => {
+      if (localDisplayMode.value === "extension" || localDisplayMode.value === "extension-selector") return;
+      const modes = ["bubble", "split", "auto"];
+      const currentIndex = modes.indexOf(localDisplayMode.value);
+      const nextIndex = (currentIndex + 1) % modes.length;
+      localDisplayMode.value = modes[nextIndex];
+    };
+    const {
+      buttonActive,
+      containerClasses,
+      iframeSource,
+      sessionListTitle,
+      resolvedTheme,
+      handleClose,
+      handleEmptyAction,
+      handleToggle,
+      handleToggleSessionList,
+      handleToggleTheme
+    } = (0, import_use_widget.useWidget)({
+      theme: (0, import_vue2.toRef)(props, "theme"),
+      open: (0, import_vue2.toRef)(props, "open"),
+      selectMode: (0, import_vue2.toRef)(props, "selectMode"),
+      iframeSrc: (0, import_vue2.toRef)(props, "iframeSrc"),
+      sessionListCollapsed: localSessionListCollapsed,
+      onToggle: (nextOpen) => {
+        emit("update:open", nextOpen);
+        emit("toggle", nextOpen);
+      },
+      onToggleSelectMode: (mode) => {
+        emit("update:selectMode", mode);
+        emit("toggle-select-mode", mode);
+      },
+      onClose: () => {
+        emit("update:open", false);
+        emit("close");
+      },
+      onToggleSessionList: (collapsed) => {
+        localSessionListCollapsed.value = collapsed;
+        emit("update:sessionListCollapsed", collapsed);
+        emit("toggle-session-list", collapsed);
+      },
+      onEmptyAction: () => {
+        emit("empty-action");
+      },
+      onToggleTheme: (newTheme) => {
+        emit("update:theme", newTheme);
+        emit("toggle-theme", newTheme);
+      }
+    });
+    const { sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession } = (0, import_use_session.useSession)({
+      sessions: (0, import_vue2.toRef)(props, "sessions"),
+      currentSessionId: (0, import_vue2.toRef)(props, "currentSessionId"),
+      onCreateSession: () => emit("create-session"),
+      onSelectSession: (session) => {
+        emit("update:currentSessionId", session.id);
+        emit("select-session", session);
+      },
+      onDeleteSession: (session) => emit("delete-session", session),
+      showConfirmDialog
+    });
+    const {
+      bubbleVisible,
+      hasSelectedElements,
+      selectedElementItems,
+      handleClearSelectedNodes,
+      handleClickSelectedNode,
+      handleRemoveSelectedNode,
+      handleToggleSelectMode
+    } = (0, import_use_selection.useSelection)({
+      selectMode: (0, import_vue2.toRef)(props, "selectMode"),
+      selectedElements: (0, import_vue2.toRef)(props, "selectedElements"),
+      onToggleSelectMode: (mode) => {
+        emit("update:selectMode", mode);
+        emit("toggle-select-mode", mode);
+      },
+      onRemoveSelectedNode: (payload) => {
+        emit("remove-selected-node", payload);
+        const newElements = [...props.selectedElements];
+        newElements.splice(payload.index, 1);
+        emit("update:selectedElements", newElements);
+      },
+      onClearSelectedNodes: () => {
+        emit("clear-selected-nodes");
+        emit("update:selectedElements", []);
+      },
+      showConfirmDialog
+    });
+    const { highlightVisible, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent } = (0, import_use_inspector.useInspector)({
+      selectMode: (0, import_vue2.toRef)(props, "selectMode"),
+      onAddSelectedNode: (element) => {
+        emit("click-selected-node", element);
+      },
+      onExitSelectMode: () => {
+        emit("update:selectMode", false);
+        emit("toggle-select-mode", false);
+      }
+    });
+    const bubbleOffset = (0, import_vue2.ref)(void 0);
+    const {
+      effectiveMode,
+      isSplitMode,
+      isExtensionMode,
+      panelWidth,
+      splitConfig,
+      splitPosition,
+      handleResize,
+      handleToggle: handleSplitToggle,
+      handleTogglePosition
+    } = (0, import_use_split.useSplitMode)({
+      displayMode: localDisplayMode,
+      splitMode: (0, import_vue2.toRef)(props, "splitMode"),
+      open: (0, import_vue2.toRef)(props, "open"),
+      splitPosition: localSplitPosition,
+      onOpenChange: (nextOpen) => {
+        emit("update:open", nextOpen);
+        emit("toggle", nextOpen);
+      },
+      onWidthChange: (width) => {
+        splitPanelWidth.value = width;
+        emit("update:splitPanelWidth", width);
+        emit("split-panel-width-change", width);
+      },
+      onPositionChange: (position) => {
+        localSplitPosition.value = position;
+      }
+    });
+    (0, import_use_persist_state.usePersistState)({
+      open: (0, import_vue2.toRef)(props, "open"),
+      minimized,
+      promptDockVisible,
+      reviewPanelVisible,
+      bubbleOffset,
+      theme: (0, import_vue2.toRef)(props, "theme"),
+      sessionListCollapsed: localSessionListCollapsed,
+      splitPanelWidth,
+      displayMode: localDisplayMode,
+      splitPosition: localSplitPosition,
+      onRestore: (state) => {
+        if (state.open !== void 0 && state.open !== props.open) {
+          emit("update:open", state.open);
+          emit("toggle", state.open);
+        }
+        if (state.minimized !== void 0) {
+          minimized.value = state.minimized;
+        }
+        if (state.bubbleOffset !== void 0) {
+          const bubbleSize = 44;
+          const margin = 10;
+          const maxX = window.innerWidth - bubbleSize - margin;
+          const maxY = window.innerHeight - bubbleSize - margin;
+          bubbleOffset.value = {
+            x: Math.max(margin, Math.min(state.bubbleOffset.x, maxX)),
+            y: Math.max(margin, Math.min(state.bubbleOffset.y, maxY))
+          };
+        }
+        if (state.theme !== void 0 && state.theme !== props.theme) {
+          emit("update:theme", state.theme);
+          emit("toggle-theme", state.theme);
+        }
+        if (state.sessionListCollapsed !== void 0 && state.sessionListCollapsed !== props.sessionListCollapsed) {
+          localSessionListCollapsed.value = state.sessionListCollapsed;
+          emit("update:sessionListCollapsed", state.sessionListCollapsed);
+        }
+        if (state.promptDockVisible !== void 0) {
+          promptDockVisible.value = state.promptDockVisible;
+        } else if (minimized.value) {
+          promptDockVisible.value = false;
+        }
+        if (state.reviewPanelVisible !== void 0) {
+          reviewPanelVisible.value = state.reviewPanelVisible;
+        }
+        if (state.splitPanelWidth !== void 0 && state.splitPanelWidth !== props.splitPanelWidth) {
+          handleResize(state.splitPanelWidth);
+        }
+        if (state.displayMode !== void 0 && state.displayMode !== props.displayMode) {
+          if (props.displayMode !== "extension" && props.displayMode !== "extension-selector") {
+            localDisplayMode.value = state.displayMode;
+          }
+        }
+        if (state.splitPosition !== void 0) {
+          localSplitPosition.value = state.splitPosition;
+        }
+        (0, import_vue2.nextTick)(() => {
+          syncStateToIframe();
+          setTimeout(() => {
+            isRestoring.value = false;
+          }, 50);
+        });
+      }
+    });
+    const handleToggleMinimize = () => {
+      minimized.value = !minimized.value;
+      promptDockVisible.value = !minimized.value;
+      sendMessageToIframe(import_core.WIDGET_MSG.PROMPT_DOCK_VISIBILITY, { visible: promptDockVisible.value });
+      sendMessageToIframe(import_core.WIDGET_MSG.MINIMIZE_STATE, { minimized: minimized.value });
+    };
+    const handleTogglePromptDock = () => {
+      promptDockVisible.value = !promptDockVisible.value;
+      sendMessageToIframe(import_core.WIDGET_MSG.PROMPT_DOCK_VISIBILITY, { visible: promptDockVisible.value });
+    };
+    const handleToggleReviewPanel = () => {
+      reviewPanelVisible.value = !reviewPanelVisible.value;
+      sendMessageToIframe(import_core.WIDGET_MSG.REVIEW_PANEL_TOGGLE, { visible: reviewPanelVisible.value });
+    };
+    const handleRefresh = () => {
+      window.location.reload();
+    };
+    const windowWidth = (0, import_vue2.ref)(typeof window !== "undefined" ? window.innerWidth : 0);
+    const windowHeight = (0, import_vue2.ref)(typeof window !== "undefined" ? window.innerHeight : 0);
+    const handleWindowResize = () => {
+      if (typeof window !== "undefined") {
+        windowWidth.value = window.innerWidth;
+        windowHeight.value = window.innerHeight;
+      }
+    };
+    const handleIframeMessage = (event) => {
+      if (event.data?.type === import_core.WIDGET_MSG.READY) {
+        iframeReady.value = true;
+        syncStateToIframe();
+      }
+    };
+    (0, import_vue2.onMounted)(() => {
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", handleWindowResize);
+        window.addEventListener("message", handleIframeMessage);
+      }
+    });
+    (0, import_vue2.onUnmounted)(() => {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("resize", handleWindowResize);
+        window.removeEventListener("message", handleIframeMessage);
+      }
+    });
+    const bubbleQuadrant = (0, import_vue2.computed)(() => {
+      if (typeof window === "undefined") return "bottom-right";
+      const centerX = windowWidth.value / 2;
+      const centerY = windowHeight.value / 2;
+      const bubbleSize = 44;
+      const currentOffset = triggerRef.value?.offset ?? bubbleOffset.value;
+      const effectiveX = (currentOffset?.x ?? windowWidth.value - bubbleSize - 24) + bubbleSize / 2;
+      const effectiveY = (currentOffset?.y ?? windowHeight.value - bubbleSize - 24) + bubbleSize / 2;
+      if (effectiveX >= centerX && effectiveY >= centerY) {
+        return "bottom-right";
+      } else if (effectiveX < centerX && effectiveY >= centerY) {
+        return "bottom-left";
+      } else if (effectiveX >= centerX && effectiveY < centerY) {
+        return "top-right";
+      } else {
+        return "top-left";
+      }
+    });
+    const isBubbleOnRightSide = (0, import_vue2.computed)(() => {
+      const quadrant = bubbleQuadrant.value;
+      return quadrant === "top-right" || quadrant === "bottom-right";
+    });
+    const chatPositionStyle = (0, import_vue2.computed)(() => {
+      if (typeof window === "undefined") return {};
+      const chatWidth = minimized.value ? 300 : 700;
+      const chatHeight = minimized.value ? 300 : Math.min(windowHeight.value * 0.86, windowHeight.value - 40);
+      const gap = 24;
+      const bubbleSize = 44;
+      const screenMargin = 20;
+      const effectiveOffset = triggerRef.value?.offset ?? bubbleOffset.value ?? { x: windowWidth.value - bubbleSize - gap, y: windowHeight.value - bubbleSize - gap };
+      const style = {};
+      if (isBubbleOnRightSide.value) {
+        let rightPos = windowWidth.value - effectiveOffset.x + gap;
+        const minRight = screenMargin;
+        const maxRight = windowWidth.value - chatWidth - screenMargin;
+        if (rightPos > maxRight) {
+          rightPos = maxRight;
+        }
+        if (rightPos < minRight) {
+          rightPos = minRight;
+        }
+        style.right = `${rightPos}px`;
+        style.left = "auto";
+      } else {
+        let leftPos = effectiveOffset.x + bubbleSize + gap;
+        const minLeft = screenMargin;
+        const maxLeft = windowWidth.value - chatWidth - screenMargin;
+        if (leftPos > maxLeft) {
+          leftPos = maxLeft;
+        }
+        if (leftPos < minLeft) {
+          leftPos = minLeft;
+        }
+        style.left = `${leftPos}px`;
+        style.right = "auto";
+      }
+      let bottomPos = windowHeight.value - effectiveOffset.y - bubbleSize;
+      const maxBottom = windowHeight.value - chatHeight - screenMargin;
+      if (bottomPos > maxBottom) {
+        bottomPos = maxBottom;
+      }
+      if (bottomPos < screenMargin) {
+        bottomPos = screenMargin;
+      }
+      style.bottom = `${bottomPos}px`;
+      return style;
+    });
+    const handleBubbleOffsetChange = (offset) => {
+      bubbleOffset.value = offset;
+    };
+    const handleResizeStart = () => {
+      isDragging.value = true;
+    };
+    const handleResizeEnd = () => {
+      isDragging.value = false;
+    };
+    const chatAnimationOrigin = (0, import_vue2.computed)(() => {
+      const quadrant = bubbleQuadrant.value;
+      switch (quadrant) {
+        case "top-left":
+          return { x: "-20px", y: "-20px" };
+        case "top-right":
+          return { x: "20px", y: "-20px" };
+        case "bottom-left":
+          return { x: "-20px", y: "20px" };
+        case "bottom-right":
+        default:
+          return { x: "20px", y: "20px" };
+      }
+    });
+    const isDragging = (0, import_vue2.ref)(false);
+    let wasOpenBeforeDrag = false;
+    const handleDragStart = () => {
+      isDragging.value = true;
+      wasOpenBeforeDrag = props.open;
+      if (props.open) {
+        emit("update:open", false);
+      }
+    };
+    const handleDragEnd = () => {
+      isDragging.value = false;
+      if (wasOpenBeforeDrag) {
+        emit("update:open", true);
+      }
+    };
+    (0, import_context.provideAIPanelWidgetContext)({
+      theme: (0, import_vue2.toRef)(props, "theme"),
+      resolvedTheme,
+      title: (0, import_vue2.toRef)(props, "title"),
+      hotkeyLabel: (0, import_vue2.toRef)(props, "hotkeyLabel"),
+      selectShortcutLabel: (0, import_vue2.toRef)(props, "selectShortcutLabel"),
+      selectMode: (0, import_vue2.toRef)(props, "selectMode"),
+      selectEnabled: (0, import_vue2.toRef)(props, "selectEnabled"),
+      sessionListCollapsed: localSessionListCollapsed,
+      sessionKey: (0, import_vue2.toRef)(props, "sessionKey"),
+      frameLoading: (0, import_vue2.toRef)(props, "frameLoading"),
+      loadingSessionList: (0, import_vue2.toRef)(props, "loadingSessionList"),
+      showSessionListSkeleton: (0, import_vue2.toRef)(props, "showSessionListSkeleton"),
+      showEmptyState: (0, import_vue2.toRef)(props, "showEmptyState"),
+      showError: (0, import_vue2.toRef)(props, "showError"),
+      emptyStateText: (0, import_vue2.toRef)(props, "emptyStateText"),
+      emptyStateActionText: (0, import_vue2.toRef)(props, "emptyStateActionText"),
+      showClearAll: (0, import_vue2.toRef)(props, "showClearAll"),
+      open: (0, import_vue2.toRef)(props, "open"),
+      thinking: (0, import_vue2.toRef)(props, "thinking"),
+      minimized,
+      promptDockVisible,
+      reviewPanelVisible,
+      reviewPanelEnabled: (0, import_vue2.toRef)(props, "reviewPanelEnabled"),
+      bubbleOffset,
+      mode: effectiveMode,
+      displayMode: localDisplayMode,
+      splitPosition,
+      sessionStates: (0, import_vue2.computed)(() => props.sessionStates ?? {}),
+      iframeSource,
+      buttonActive,
+      sessionListTitle,
+      bubbleVisible,
+      hasSelectedElements,
+      sessionItems,
+      selectedElementItems,
+      handleToggle,
+      handleClose,
+      handleToggleMinimize,
+      handleTogglePromptDock,
+      handleToggleReviewPanel,
+      handleToggleSessionList,
+      handleToggleTheme,
+      handleToggleDisplayMode,
+      handleToggleSplitPosition: handleTogglePosition,
+      handleEmptyAction,
+      handleCreateSession,
+      handleSelectSession,
+      handleDeleteSession,
+      handleToggleSelectMode,
+      handleClickSelectedNode,
+      handleRemoveSelectedNode: (payload) => handleRemoveSelectedNode(payload.item, payload.index, payload.source),
+      handleClearSelectedNodes,
+      handleFrameLoaded,
+      handleBubbleOffsetChange,
+      handleRefresh
+    });
+    __expose({
+      showNotification,
+      showConfirmDialog,
+      sendMessageToIframe,
+      isSplitMode
+    });
+    const __returned__ = { props, emit, slots, notificationMessage, notificationVisible, notificationMode, get notificationTimer() {
+      return notificationTimer;
+    }, set notificationTimer(v) {
+      notificationTimer = v;
+    }, showNotification, dialogVisible, dialogMessage, get dialogResolve() {
+      return dialogResolve;
+    }, set dialogResolve(v) {
+      dialogResolve = v;
+    }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, frameRef, triggerRef, sendMessageToIframe, localSessionListCollapsed, localDisplayMode, localSplitPosition, minimized, promptDockVisible, reviewPanelVisible, isRestoring, iframeLoaded, iframeReady, splitPanelWidth, syncStateToIframe, handleFrameLoaded, handleToggleDisplayMode, buttonActive, containerClasses, iframeSource, sessionListTitle, resolvedTheme, handleClose, handleEmptyAction, handleToggle, handleToggleSessionList, handleToggleTheme, sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession, bubbleVisible, hasSelectedElements, selectedElementItems, handleClearSelectedNodes, handleClickSelectedNode, handleRemoveSelectedNode, handleToggleSelectMode, highlightVisible, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent, bubbleOffset, effectiveMode, isSplitMode, isExtensionMode, panelWidth, splitConfig, splitPosition, handleResize, handleSplitToggle, handleTogglePosition, handleToggleMinimize, handleTogglePromptDock, handleToggleReviewPanel, handleRefresh, windowWidth, windowHeight, handleWindowResize, handleIframeMessage, bubbleQuadrant, isBubbleOnRightSide, chatPositionStyle, handleBubbleOffsetChange, handleResizeStart, handleResizeEnd, chatAnimationOrigin, isDragging, get wasOpenBeforeDrag() {
+      return wasOpenBeforeDrag;
+    }, set wasOpenBeforeDrag(v) {
+      wasOpenBeforeDrag = v;
+    }, handleDragStart, handleDragEnd, ChatPanel: import_ChatPanel_vue.default, SelectHint: import_SelectHint_vue.default, Trigger: import_Trigger_vue.default };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1 = { class: "aipanel-tooltip-tag" };
+const _hoisted_2 = { class: "aipanel-tooltip-file" };
+const _hoisted_3 = {
+  key: 1,
+  class: "aipanel-dialog-overlay"
+};
+const _hoisted_4 = {
+  class: "aipanel-dialog",
+  role: "alertdialog",
+  "aria-modal": "true"
+};
+const _hoisted_5 = { class: "aipanel-dialog-content" };
+const _hoisted_6 = { class: "aipanel-dialog-message" };
+function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)(
+    "div",
+    {
+      class: (0, import_vue3.normalizeClass)([...$setup.containerClasses, { "extension-mode": $setup.isExtensionMode }])
+    },
+    [
+      $props.displayMode !== "extension-selector" ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)(
+        import_vue3.Fragment,
+        { key: 0 },
+        [
+          !$setup.isSplitMode && !$setup.props.hideBubble ? ((0, import_vue3.openBlock)(), (0, import_vue3.createBlock)(
+            $setup["Trigger"],
+            {
+              key: 0,
+              ref: "triggerRef",
+              onDragStart: $setup.handleDragStart,
+              onDragEnd: $setup.handleDragEnd
+            },
+            (0, import_vue3.createSlots)({
+              _: 2
+              /* DYNAMIC */
+            }, [
+              $setup.slots["button-icon"] ? {
+                name: "default",
+                fn: (0, import_vue3.withCtx)(() => [
+                  (0, import_vue3.renderSlot)(_ctx.$slots, "button-icon")
+                ]),
+                key: "0"
+              } : void 0
+            ]),
+            1536
+            /* NEED_PATCH, DYNAMIC_SLOTS */
+          )) : (0, import_vue3.createCommentVNode)("v-if", true),
+          (0, import_vue3.createVNode)($setup["ChatPanel"], {
+            ref: "frameRef",
+            mode: $setup.effectiveMode,
+            open: $props.open,
+            minimized: $setup.minimized,
+            "position-style": $setup.chatPositionStyle,
+            "animation-origin": $setup.chatAnimationOrigin,
+            "panel-width": $setup.panelWidth,
+            resizable: $setup.splitConfig.resizable,
+            "min-width": $setup.splitConfig.minWidth,
+            "max-width": $setup.splitConfig.maxWidth,
+            "no-transition": $setup.isRestoring,
+            dragging: $setup.isDragging,
+            thinking: $props.thinking,
+            "resolved-theme": $setup.resolvedTheme,
+            "split-position": $setup.splitPosition,
+            extension: $setup.isExtensionMode,
+            onResize: $setup.handleResize,
+            onResizeStart: $setup.handleResizeStart,
+            onResizeEnd: $setup.handleResizeEnd,
+            onToggle: $setup.handleSplitToggle
+          }, (0, import_vue3.createSlots)({
+            "sessions-empty": (0, import_vue3.withCtx)(() => [
+              (0, import_vue3.renderSlot)(_ctx.$slots, "sessions-empty", {}, () => [
+                _cache[0] || (_cache[0] = (0, import_vue3.createElementVNode)(
+                  "div",
+                  { class: "aipanel-session-empty" },
+                  "\u6682\u65E0\u4F1A\u8BDD",
+                  -1
+                  /* CACHED */
+                ))
+              ])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, [
+            $setup.slots["session-toggle-icon"] ? {
+              name: "session-toggle-icon",
+              fn: (0, import_vue3.withCtx)(() => [
+                (0, import_vue3.renderSlot)(_ctx.$slots, "session-toggle-icon")
+              ]),
+              key: "0"
+            } : void 0,
+            $setup.slots["select-icon"] ? {
+              name: "select-icon",
+              fn: (0, import_vue3.withCtx)(() => [
+                (0, import_vue3.renderSlot)(_ctx.$slots, "select-icon")
+              ]),
+              key: "1"
+            } : void 0,
+            $setup.slots["close-icon"] ? {
+              name: "close-icon",
+              fn: (0, import_vue3.withCtx)(() => [
+                (0, import_vue3.renderSlot)(_ctx.$slots, "close-icon")
+              ]),
+              key: "2"
+            } : void 0,
+            $setup.slots["empty-state"] ? {
+              name: "empty-state",
+              fn: (0, import_vue3.withCtx)(() => [
+                (0, import_vue3.renderSlot)(_ctx.$slots, "empty-state")
+              ]),
+              key: "3"
+            } : void 0,
+            $setup.slots.loading ? {
+              name: "loading",
+              fn: (0, import_vue3.withCtx)(() => [
+                (0, import_vue3.renderSlot)(_ctx.$slots, "loading")
+              ]),
+              key: "4"
+            } : void 0,
+            $setup.slots.error ? {
+              name: "error",
+              fn: (0, import_vue3.withCtx)(() => [
+                (0, import_vue3.renderSlot)(_ctx.$slots, "error")
+              ]),
+              key: "5"
+            } : void 0,
+            $setup.slots.content ? {
+              name: "content",
+              fn: (0, import_vue3.withCtx)(() => [
+                (0, import_vue3.renderSlot)(_ctx.$slots, "content")
+              ]),
+              key: "6"
+            } : void 0
+          ]), 1032, ["mode", "open", "minimized", "position-style", "animation-origin", "panel-width", "resizable", "min-width", "max-width", "no-transition", "dragging", "thinking", "resolved-theme", "split-position", "extension", "onResize", "onToggle"]),
+          (0, import_vue3.createVNode)($setup["SelectHint"])
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      )) : (0, import_vue3.createCommentVNode)("v-if", true),
+      (0, import_vue3.withDirectives)((0, import_vue3.createElementVNode)(
+        "div",
+        {
+          class: "aipanel-element-highlight",
+          style: (0, import_vue3.normalizeStyle)($setup.highlightStyle)
+        },
+        null,
+        4
+        /* STYLE */
+      ), [
+        [import_vue3.vShow, $setup.highlightVisible]
+      ]),
+      (0, import_vue3.withDirectives)((0, import_vue3.createElementVNode)(
+        "div",
+        {
+          class: "aipanel-element-tooltip",
+          style: (0, import_vue3.normalizeStyle)($setup.tooltipStyle)
+        },
+        [
+          (0, import_vue3.createElementVNode)(
+            "div",
+            _hoisted_1,
+            (0, import_vue3.toDisplayString)($setup.tooltipContent.description),
+            1
+            /* TEXT */
+          ),
+          (0, import_vue3.createElementVNode)(
+            "div",
+            _hoisted_2,
+            (0, import_vue3.toDisplayString)($setup.tooltipContent.fileInfo),
+            1
+            /* TEXT */
+          )
+        ],
+        4
+        /* STYLE */
+      ), [
+        [import_vue3.vShow, $setup.tooltipVisible]
+      ]),
+      $setup.dialogVisible ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("div", _hoisted_3, [
+        (0, import_vue3.createElementVNode)("div", _hoisted_4, [
+          (0, import_vue3.createElementVNode)("div", _hoisted_5, [
+            (0, import_vue3.createElementVNode)(
+              "div",
+              _hoisted_6,
+              (0, import_vue3.toDisplayString)($setup.dialogMessage),
+              1
+              /* TEXT */
+            )
+          ]),
+          (0, import_vue3.createElementVNode)("div", { class: "aipanel-dialog-actions" }, [
+            (0, import_vue3.createElementVNode)("button", {
+              class: "aipanel-dialog-btn cancel",
+              onClick: $setup.handleDialogCancel
+            }, "\u53D6\u6D88"),
+            (0, import_vue3.createElementVNode)("button", {
+              class: "aipanel-dialog-btn confirm",
+              onClick: $setup.handleDialogConfirm
+            }, "\u786E\u8BA4")
+          ])
+        ])
+      ])) : (0, import_vue3.createCommentVNode)("v-if", true),
+      ((0, import_vue3.openBlock)(), (0, import_vue3.createBlock)(import_vue3.Teleport, {
+        to: "body",
+        disabled: $setup.notificationMode === "widget"
+      }, [
+        $setup.notificationVisible ? ((0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)(
+          "div",
+          {
+            key: 0,
+            class: (0, import_vue3.normalizeClass)($setup.notificationMode === "page" ? "aipanel-page-notification" : "aipanel-notification"),
+            role: "alert"
+          },
+          (0, import_vue3.toDisplayString)($setup.notificationMessage),
+          3
+          /* TEXT, CLASS */
+        )) : (0, import_vue3.createCommentVNode)("v-if", true)
+      ], 8, ["disabled"]))
+    ],
+    2
+    /* CLASS */
+  );
+}
+__vue_sfc__.render = __vue_render__;
+var index_vue_default = __vue_sfc__;