@aipanel/ui 1.2.0-beta.0

package/es/AI-panel-widget/src/components/FloatingBubble/FloatingBubble.vue.mjs

@@ -0,0 +1,311 @@
+import "./FloatingBubble-sfc.css";
+import { defineComponent as _defineComponent } from "vue";
+import { ref, computed, watch, onMounted, onUnmounted } from "vue";
+const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
+  ...{
+    name: "FloatingBubble"
+  },
+  __name: "FloatingBubble",
+  props: {
+    offset: { type: Object, required: false, default: void 0 },
+    axis: { type: String, required: false, default: "xy" },
+    magnetic: { type: String, required: false, default: void 0 },
+    gap: { type: [Number, Object], required: false, default: 24 },
+    teleport: { type: null, required: false, default: "body" }
+  },
+  emits: ["update:offset", "click", "offset-change", "drag-start", "drag-end"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const rootRef = ref(null);
+    const state = ref({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    const isObject = (val) => val !== null && typeof val === "object";
+    const gapX = computed(
+      () => isObject(props.gap) ? props.gap.x : props.gap
+    );
+    const gapY = computed(
+      () => isObject(props.gap) ? props.gap.y : props.gap
+    );
+    const windowWidth = ref(typeof window !== "undefined" ? window.innerWidth : 0);
+    const windowHeight = ref(typeof window !== "undefined" ? window.innerHeight : 0);
+    const boundary = computed(() => ({
+      top: gapY.value,
+      right: windowWidth.value - state.value.width - gapX.value,
+      bottom: windowHeight.value - state.value.height - gapY.value,
+      left: gapX.value
+    }));
+    const closest = (arr, target) => {
+      return arr.reduce(
+        (pre, cur) => Math.abs(pre - target) < Math.abs(cur - target) ? pre : cur
+      );
+    };
+    const applyMagnetic = () => {
+      if (props.magnetic === "x") {
+        if (magneticSide.value === "left") {
+          state.value.x = boundary.value.left;
+        } else if (magneticSide.value === "right") {
+          state.value.x = boundary.value.right;
+        } else {
+          const nextX = closest(
+            [boundary.value.left, boundary.value.right],
+            state.value.x
+          );
+          state.value.x = nextX;
+          magneticSide.value = nextX === boundary.value.left ? "left" : "right";
+        }
+      }
+      if (props.magnetic === "y") {
+        const nextY = closest(
+          [boundary.value.top, boundary.value.bottom],
+          state.value.y
+        );
+        state.value.y = nextY;
+      }
+    };
+    const dragging = ref(false);
+    const initialized = ref(false);
+    const magneticSide = ref(null);
+    const rootStyle = computed(() => {
+      const style = {};
+      const x = `${state.value.x}px`;
+      const y = `${state.value.y}px`;
+      style.transform = `translate3d(${x}, ${y}, 0)`;
+      if (dragging.value || !initialized.value) {
+        style.transition = "none";
+      } else {
+        style.transition = "transform 0.3s ease";
+      }
+      return style;
+    });
+    const updateState = () => {
+      if (!rootRef.value || typeof window === "undefined") return;
+      const rect = rootRef.value.getBoundingClientRect();
+      const { offset } = props;
+      let x = offset ? offset.x : windowWidth.value - rect.width - gapX.value;
+      let y = offset ? offset.y : windowHeight.value - rect.height - gapY.value;
+      const maxX = windowWidth.value - rect.width - gapX.value;
+      const maxY = windowHeight.value - rect.height - gapY.value;
+      if (x < gapX.value) x = gapX.value;
+      if (x > maxX) x = maxX;
+      if (y < gapY.value) y = gapY.value;
+      if (y > maxY) y = maxY;
+      const oldX = state.value.x;
+      const oldY = state.value.y;
+      state.value = {
+        x,
+        y,
+        width: rect.width,
+        height: rect.height
+      };
+      if (!dragging.value) {
+        if (props.magnetic === "x" && magneticSide.value) {
+          if (magneticSide.value === "left") {
+            state.value.x = boundary.value.left;
+          } else {
+            state.value.x = boundary.value.right;
+          }
+        } else {
+          applyMagnetic();
+        }
+        if (state.value.x !== oldX || state.value.y !== oldY) {
+          const offset2 = { x: state.value.x, y: state.value.y };
+          emit("update:offset", offset2);
+          emit("offset-change", offset2);
+        }
+      }
+    };
+    const touch = {
+      startX: ref(0),
+      startY: ref(0),
+      deltaX: ref(0),
+      deltaY: ref(0),
+      offsetX: ref(0),
+      offsetY: ref(0),
+      isTap: ref(true),
+      start(e) {
+        this.startX.value = "touches" in e ? e.touches[0].clientX : e.clientX;
+        this.startY.value = "touches" in e ? e.touches[0].clientY : e.clientY;
+        this.deltaX.value = 0;
+        this.deltaY.value = 0;
+        this.offsetX.value = 0;
+        this.offsetY.value = 0;
+        this.isTap.value = true;
+      },
+      move(e) {
+        const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+        const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
+        this.deltaX.value = clientX - this.startX.value;
+        this.deltaY.value = clientY - this.startY.value;
+        this.offsetX.value = Math.abs(this.deltaX.value);
+        this.offsetY.value = Math.abs(this.deltaY.value);
+        const TAP_OFFSET = 5;
+        if (this.isTap.value && (this.offsetX.value > TAP_OFFSET || this.offsetY.value > TAP_OFFSET)) {
+          this.isTap.value = false;
+        }
+      }
+    };
+    let prevX = 0;
+    let prevY = 0;
+    const onTouchStart = (e) => {
+      touch.start(e);
+      dragging.value = true;
+      prevX = state.value.x;
+      prevY = state.value.y;
+      document.body.classList.add("floating-bubble-dragging");
+      if (!("touches" in e)) {
+        window.addEventListener("mousemove", onTouchMove, { passive: false });
+        window.addEventListener("mouseup", onTouchEnd);
+      }
+    };
+    const onTouchMove = (e) => {
+      if (e.cancelable) {
+        e.preventDefault();
+      }
+      const wasTap = touch.isTap.value;
+      touch.move(e);
+      if (wasTap && !touch.isTap.value) {
+        emit("drag-start");
+      }
+      if (props.axis === "lock") return;
+      if (!touch.isTap.value) {
+        if (props.axis === "x" || props.axis === "xy") {
+          let nextX = prevX + touch.deltaX.value;
+          if (nextX < boundary.value.left) nextX = boundary.value.left;
+          if (nextX > boundary.value.right) nextX = boundary.value.right;
+          state.value.x = nextX;
+        }
+        if (props.axis === "y" || props.axis === "xy") {
+          let nextY = prevY + touch.deltaY.value;
+          if (nextY < boundary.value.top) nextY = boundary.value.top;
+          if (nextY > boundary.value.bottom) nextY = boundary.value.bottom;
+          state.value.y = nextY;
+        }
+        const offset = { x: state.value.x, y: state.value.y };
+        emit("update:offset", offset);
+      }
+    };
+    const onTouchEnd = (e) => {
+      dragging.value = false;
+      document.body.classList.remove("floating-bubble-dragging");
+      if (e && !("touches" in e) && e.type === "mouseup") {
+        window.removeEventListener("mousemove", onTouchMove);
+        window.removeEventListener("mouseup", onTouchEnd);
+      }
+      requestAnimationFrame(() => {
+        if (props.magnetic === "x" && !touch.isTap.value) {
+          const centerX = state.value.x + state.value.width / 2;
+          const windowCenterX = windowWidth.value / 2;
+          magneticSide.value = centerX < windowCenterX ? "left" : "right";
+        }
+        applyMagnetic();
+        if (!touch.isTap.value) {
+          emit("drag-end");
+          const offset = { x: state.value.x, y: state.value.y };
+          emit("update:offset", offset);
+          if (prevX !== offset.x || prevY !== offset.y) {
+            emit("offset-change", offset);
+          }
+        }
+      });
+    };
+    const onClick = (e) => {
+      if (touch.isTap.value) {
+        emit("click", e);
+      } else {
+        e.stopPropagation();
+      }
+    };
+    const handleResize = () => {
+      if (typeof window !== "undefined") {
+        windowWidth.value = window.innerWidth;
+        windowHeight.value = window.innerHeight;
+      }
+    };
+    onMounted(() => {
+      updateState();
+      requestAnimationFrame(() => {
+        initialized.value = true;
+      });
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", handleResize);
+      }
+      if (rootRef.value) {
+        rootRef.value.addEventListener("touchmove", onTouchMove, {
+          passive: false
+        });
+      }
+    });
+    onUnmounted(() => {
+      document.body.classList.remove("floating-bubble-dragging");
+      if (typeof window !== "undefined") {
+        window.removeEventListener("resize", handleResize);
+        window.removeEventListener("mousemove", onTouchMove);
+        window.removeEventListener("mouseup", onTouchEnd);
+      }
+      if (rootRef.value) {
+        rootRef.value.removeEventListener("touchmove", onTouchMove);
+      }
+    });
+    watch(
+      [windowWidth, windowHeight, gapX, gapY],
+      updateState
+    );
+    watch(
+      () => props.offset,
+      (newOffset) => {
+        if (newOffset) {
+          magneticSide.value = null;
+        }
+        updateState();
+      },
+      { deep: true }
+    );
+    __expose({
+      offset: computed(() => ({ x: state.value.x, y: state.value.y }))
+    });
+    const __returned__ = { props, emit, rootRef, state, isObject, gapX, gapY, windowWidth, windowHeight, boundary, closest, applyMagnetic, dragging, initialized, magneticSide, rootStyle, updateState, touch, get prevX() {
+      return prevX;
+    }, set prevX(v) {
+      prevX = v;
+    }, get prevY() {
+      return prevY;
+    }, set prevY(v) {
+      prevY = v;
+    }, onTouchStart, onTouchMove, onTouchEnd, onClick, handleResize };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
+  return _openBlock(), _createBlock(_Teleport, { to: $props.teleport }, [
+    _createElementVNode(
+      "div",
+      {
+        ref: "rootRef",
+        class: "floating-bubble",
+        style: _normalizeStyle($setup.rootStyle),
+        onTouchstartPassive: $setup.onTouchStart,
+        onTouchend: $setup.onTouchEnd,
+        onTouchcancel: $setup.onTouchEnd,
+        onMousedown: $setup.onTouchStart,
+        onClickCapture: $setup.onClick
+      },
+      [
+        _renderSlot(_ctx.$slots, "default")
+      ],
+      36
+      /* STYLE, NEED_HYDRATION */
+    )
+  ], 8, ["to"]);
+}
+__vue_sfc__.render = __vue_render__;
+var FloatingBubble_vue_default = __vue_sfc__;
+export {
+  FloatingBubble_vue_default as default
+};

package/es/AI-panel-widget/src/components/FloatingBubble/index.d.ts

@@ -0,0 +1,3 @@
+import FloatingBubble from "./FloatingBubble.vue";
+export { FloatingBubble };
+export * from "./types";

package/es/AI-panel-widget/src/components/FloatingBubble/index.mjs

@@ -0,0 +1,5 @@
+import FloatingBubble from "./FloatingBubble.vue.mjs";
+export * from "./types.mjs";
+export {
+  FloatingBubble
+};

package/es/AI-panel-widget/src/components/FloatingBubble/types.d.ts

@@ -0,0 +1,24 @@
+export type FloatingBubbleAxis = "x" | "y" | "xy" | "lock";
+export type FloatingBubbleMagnetic = "x" | "y";
+export interface FloatingBubbleOffset {
+    x: number;
+    y: number;
+}
+export interface FloatingBubbleGap {
+    x: number;
+    y: number;
+}
+export interface FloatingBubbleProps {
+    offset?: FloatingBubbleOffset;
+    axis?: FloatingBubbleAxis;
+    magnetic?: FloatingBubbleMagnetic;
+    gap?: number | FloatingBubbleGap;
+    teleport?: string | Element;
+}
+export type FloatingBubbleEmits = {
+    (e: "update:offset", value: FloatingBubbleOffset): void;
+    (e: "click", event: MouseEvent): void;
+    (e: "offset-change", offset: FloatingBubbleOffset): void;
+    (e: "drag-start"): void;
+    (e: "drag-end"): void;
+};

package/es/AI-panel-widget/src/components/Frame-sfc.css

@@ -0,0 +1 @@
+.aipanel-iframe-container{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}.aipanel-loading-overlay{position:absolute;inset:0;background:var(--ap-overlay-bg);flex-direction:column;align-items:center;justify-content:center;z-index:10;display:flex;opacity:0;visibility:hidden}.aipanel-loading-overlay.visible{opacity:1;visibility:visible}.aipanel-loading-spinner{width:40px;height:40px;border:3px solid var(--ap-border-primary);border-top-color:var(--ap-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.aipanel-loading-text{margin-top:12px;font-size:14px;color:var(--ap-text-placeholder)}.aipanel-error-overlay{position:absolute;inset:0;z-index:15;display:flex;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.aipanel-error-overlay.visible{opacity:1;visibility:visible}.aipanel-empty-state-overlay{position:absolute;inset:0;background:var(--ap-bg-secondary);flex-direction:column;align-items:center;justify-content:center;z-index:5;display:flex;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.aipanel-empty-state-overlay.visible{opacity:1;visibility:visible}.aipanel-empty-state-icon{color:var(--ap-text-placeholder);margin-bottom:16px}.aipanel-empty-state-text{color:var(--ap-text-primary);font-size:16px;font-weight:500;margin-bottom:24px}.aipanel-empty-state-btn{padding:10px 24px;border-radius:8px;border:none;background:var(--ap-primary);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;box-shadow:var(--ap-shadow-primary)}.aipanel-empty-state-btn:hover{background:var(--ap-primary-hover);transform:translateY(-1px);box-shadow:var(--ap-shadow-primary-hover)}.aipanel-empty-state-btn:active{transform:translateY(0)}.aipanel-iframe{width:100%;height:100%;border:none;opacity:0;transition:none}.aipanel-iframe.loaded{opacity:1;transition:opacity .3s ease}

package/es/AI-panel-widget/src/components/Frame.vue.d.ts

@@ -0,0 +1,22 @@
+declare function sendMessageToIframe(type: string, data?: Record<string, unknown>): void;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    'empty-state'?: (props: typeof __VLS_1) => any;
+} & {
+    loading?: (props: typeof __VLS_3) => any;
+} & {
+    error?: (props: typeof __VLS_5) => any;
+} & {
+    content?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {
+    sendMessageToIframe: typeof sendMessageToIframe;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/AI-panel-widget/src/components/Frame.vue.mjs

@@ -0,0 +1,143 @@
+import "./Frame-sfc.css";
+import { defineComponent as _defineComponent } from "vue";
+import { ref } from "vue";
+import { useAIPanelWidgetContext } from "../context.mjs";
+const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
+  __name: "Frame",
+  setup(__props, { expose: __expose }) {
+    const iframeRef = ref(null);
+    const {
+      frameLoading,
+      showEmptyState,
+      showError,
+      iframeSource: iframeSrc,
+      emptyStateText,
+      emptyStateActionText,
+      handleEmptyAction,
+      handleFrameLoaded
+    } = useAIPanelWidgetContext();
+    function sendMessageToIframe(type, data) {
+      if (!iframeRef.value?.contentWindow) return;
+      iframeRef.value.contentWindow.postMessage({ type, ...data }, "*");
+    }
+    __expose({
+      sendMessageToIframe
+    });
+    const __returned__ = { iframeRef, frameLoading, showEmptyState, showError, iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction, handleFrameLoaded, sendMessageToIframe };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { class: "aipanel-iframe-container" };
+const _hoisted_2 = { class: "aipanel-empty-state-text" };
+const _hoisted_3 = ["src"];
+function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [
+    _createElementVNode(
+      "div",
+      {
+        class: _normalizeClass(["aipanel-empty-state-overlay", { visible: $setup.showEmptyState }])
+      },
+      [
+        _renderSlot(_ctx.$slots, "empty-state", {}, () => [
+          _cache[2] || (_cache[2] = _createElementVNode(
+            "div",
+            { class: "aipanel-empty-state-icon" },
+            [
+              _createElementVNode("svg", {
+                viewBox: "0 0 24 24",
+                width: "48",
+                height: "48",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "1.5",
+                "aria-hidden": "true"
+              }, [
+                _createElementVNode("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 0 1-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                })
+              ])
+            ],
+            -1
+            /* CACHED */
+          )),
+          _createElementVNode(
+            "div",
+            _hoisted_2,
+            _toDisplayString($setup.emptyStateText),
+            1
+            /* TEXT */
+          ),
+          _createElementVNode(
+            "button",
+            {
+              class: "aipanel-empty-state-btn",
+              type: "button",
+              onClick: _cache[0] || (_cache[0] = (...args) => $setup.handleEmptyAction && $setup.handleEmptyAction(...args))
+            },
+            _toDisplayString($setup.emptyStateActionText),
+            1
+            /* TEXT */
+          )
+        ])
+      ],
+      2
+      /* CLASS */
+    ),
+    _createElementVNode(
+      "div",
+      {
+        class: _normalizeClass(["aipanel-loading-overlay", { visible: $setup.frameLoading }])
+      },
+      [
+        _renderSlot(_ctx.$slots, "loading", {}, () => [
+          _cache[3] || (_cache[3] = _createElementVNode(
+            "div",
+            { class: "aipanel-loading-spinner" },
+            null,
+            -1
+            /* CACHED */
+          )),
+          _cache[4] || (_cache[4] = _createElementVNode(
+            "div",
+            { class: "aipanel-loading-text" },
+            "\u52A0\u8F7D\u4E2D...",
+            -1
+            /* CACHED */
+          ))
+        ])
+      ],
+      2
+      /* CLASS */
+    ),
+    _createElementVNode(
+      "div",
+      {
+        class: _normalizeClass(["aipanel-error-overlay", { visible: $setup.showError }])
+      },
+      [
+        _renderSlot(_ctx.$slots, "error")
+      ],
+      2
+      /* CLASS */
+    ),
+    _renderSlot(_ctx.$slots, "content", {}, () => [
+      _createElementVNode("iframe", {
+        ref: "iframeRef",
+        class: _normalizeClass(["aipanel-iframe", { loaded: !$setup.frameLoading }]),
+        src: $setup.iframeSrc,
+        allow: "clipboard-write; clipboard-read",
+        referrerpolicy: "origin",
+        onLoad: _cache[1] || (_cache[1] = (...args) => $setup.handleFrameLoaded && $setup.handleFrameLoaded(...args))
+      }, null, 42, _hoisted_3)
+    ])
+  ]);
+}
+__vue_sfc__.render = __vue_render__;
+var Frame_vue_default = __vue_sfc__;
+export {
+  Frame_vue_default as default
+};

package/es/AI-panel-widget/src/components/Header-sfc.css

@@ -0,0 +1 @@
+.aipanel-chat-header{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:40px;background:var(--ap-bg-secondary);border-bottom:1px solid var(--ap-border-primary);z-index:5}.aipanel-chat-header-left{display:flex;align-items:center;gap:4px}.aipanel-chat-header-title{font-size:14px;font-weight:600;color:var(--ap-text-primary);position:absolute;left:50%;transform:translate(-50%)}.aipanel-chat-header-actions{display:flex;gap:4px}.aipanel-header-btn{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--ap-text-placeholder);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.aipanel-header-btn:hover{background:var(--ap-bg-tertiary);color:var(--ap-text-primary)}.aipanel-header-btn.close:hover{background:var(--ap-danger);color:#fff}.aipanel-header-btn.select-btn.active,.aipanel-header-btn.session-toggle.active,.aipanel-header-btn.review-panel.active{background:var(--ap-primary);color:#fff}

package/es/AI-panel-widget/src/components/Header.vue.d.ts

@@ -0,0 +1,27 @@
+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;
+} & {
+    'select-icon'?: (props: typeof __VLS_3) => any;
+} & {
+    'theme-icon'?: (props: typeof __VLS_5) => any;
+} & {
+    'display-mode-icon'?: (props: typeof __VLS_7) => any;
+} & {
+    'split-position-icon'?: (props: typeof __VLS_9) => 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_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};