@aipanel/ui 1.2.0-beta.0

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

@@ -0,0 +1,179 @@
+type __VLS_Props = {
+    mode?: "bubble" | "split";
+    open?: boolean;
+    minimized?: boolean;
+    positionStyle?: Record<string, string>;
+    animationOrigin?: {
+        x: string;
+        y: string;
+    };
+    panelWidth?: number;
+    resizable?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    noTransition?: boolean;
+    dragging?: boolean;
+    thinking?: boolean;
+    resolvedTheme?: "light" | "dark";
+    splitPosition?: "left" | "right";
+    extension?: boolean;
+};
+declare var __VLS_17: {}, __VLS_20: {}, __VLS_23: {}, __VLS_32: {}, __VLS_43: {}, __VLS_46: {}, __VLS_49: {}, __VLS_52: {};
+type __VLS_Slots = {} & {
+    'session-toggle-icon'?: (props: typeof __VLS_17) => any;
+} & {
+    'select-icon'?: (props: typeof __VLS_20) => any;
+} & {
+    'close-icon'?: (props: typeof __VLS_23) => any;
+} & {
+    'sessions-empty'?: (props: typeof __VLS_32) => any;
+} & {
+    'empty-state'?: (props: typeof __VLS_43) => any;
+} & {
+    loading?: (props: typeof __VLS_46) => any;
+} & {
+    error?: (props: typeof __VLS_49) => any;
+} & {
+    content?: (props: typeof __VLS_52) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    sendMessageToIframe: (type: string, data?: Record<string, unknown>) => void;
+    frameRef: import("vue").Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+        $attrs: import("vue").Attrs;
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
+            sendMessageToIframe: (type: string, data?: Record<string, unknown>) => void;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, "sendMessageToIframe"> & {
+        sendMessageToIframe: (type: string, data?: Record<string, unknown>) => void;
+    } & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            'empty-state'?: (props: {}) => any;
+        } & {
+            loading?: (props: {}) => any;
+        } & {
+            error?: (props: {}) => any;
+        } & {
+            content?: (props: {}) => any;
+        };
+    }) | null, ({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+        $attrs: import("vue").Attrs;
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
+            sendMessageToIframe: (type: string, data?: Record<string, unknown>) => void;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, "sendMessageToIframe"> & {
+        sendMessageToIframe: (type: string, data?: Record<string, unknown>) => void;
+    } & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            'empty-state'?: (props: {}) => any;
+        } & {
+            loading?: (props: {}) => any;
+        } & {
+            error?: (props: {}) => any;
+        } & {
+            content?: (props: {}) => any;
+        };
+    }) | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    resize: (width: number) => any;
+    "resize-start": () => any;
+    "resize-end": () => any;
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onResize?: ((width: number) => any) | undefined;
+    "onResize-start"?: (() => any) | undefined;
+    "onResize-end"?: (() => any) | undefined;
+    onToggle?: (() => any) | undefined;
+}>, {
+    extension: boolean;
+    resolvedTheme: "light" | "dark";
+    minimized: boolean;
+    mode: "bubble" | "split";
+    splitPosition: "left" | "right";
+    thinking: boolean;
+    minWidth: number;
+    maxWidth: number;
+    open: boolean;
+    positionStyle: Record<string, string>;
+    animationOrigin: {
+        x: string;
+        y: string;
+    };
+    panelWidth: number;
+    resizable: boolean;
+    noTransition: boolean;
+    dragging: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/ChatPanel.vue.mjs

@@ -0,0 +1,308 @@
+import "./ChatPanel-sfc.css";
+import { useCssVars as _useCssVars, defineComponent as _defineComponent } from "vue";
+import { ref, computed, useSlots } from "vue";
+import Frame from "./Frame.vue.mjs";
+import Header from "./Header.vue.mjs";
+import SessionList from "./SessionList.vue.mjs";
+import SelectedNodes from "./SelectedNodes.vue.mjs";
+import ResizeHandle from "./ResizeHandle.vue.mjs";
+const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
+  ...{
+    name: "ChatPanel"
+  },
+  __name: "ChatPanel",
+  props: {
+    mode: { type: String, required: false, default: "bubble" },
+    open: { type: Boolean, required: false, default: false },
+    minimized: { type: Boolean, required: false, default: false },
+    positionStyle: { type: Object, required: false, default: () => ({}) },
+    animationOrigin: { type: Object, required: false, default: () => ({ x: "20px", y: "20px" }) },
+    panelWidth: { type: Number, required: false, default: 500 },
+    resizable: { type: Boolean, required: false, default: true },
+    minWidth: { type: Number, required: false, default: 400 },
+    maxWidth: { type: Number, required: false, default: 800 },
+    noTransition: { type: Boolean, required: false, default: false },
+    dragging: { type: Boolean, required: false, default: false },
+    thinking: { type: Boolean, required: false, default: false },
+    resolvedTheme: { type: String, required: false, default: "light" },
+    splitPosition: { type: String, required: false, default: "right" },
+    extension: { type: Boolean, required: false, default: false }
+  },
+  emits: ["resize", "resize-start", "resize-end", "toggle"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    _useCssVars((_ctx) => ({
+      "-animationOrigin.x": _ctx.animationOrigin.x,
+      "-animationOrigin.y": _ctx.animationOrigin.y
+    }));
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const frameRef = ref(null);
+    const sendMessageToIframe = (type, data) => {
+      frameRef.value?.sendMessageToIframe(type, data);
+    };
+    __expose({
+      sendMessageToIframe,
+      frameRef
+    });
+    const handleResizeStart = () => {
+      emit("resize-start");
+    };
+    const handleResize = (width) => {
+      emit("resize", width);
+    };
+    const handleResizeEnd = () => {
+      emit("resize-end");
+    };
+    const handleToggle = () => {
+      emit("toggle");
+    };
+    const panelStyle = computed(() => {
+      if (props.extension) {
+        return {};
+      }
+      if (props.mode === "split") {
+        return {
+          width: `${props.panelWidth}px`
+        };
+      }
+      return props.positionStyle;
+    });
+    const panelClasses = computed(() => [
+      "aipanel-chat",
+      {
+        open: props.open,
+        minimized: props.minimized,
+        dragging: props.dragging,
+        "no-transition": props.noTransition,
+        "split-mode": props.mode === "split",
+        "split-left": props.mode === "split" && props.splitPosition === "left" && !props.extension,
+        "split-right": props.mode === "split" && props.splitPosition === "right" && !props.extension,
+        "extension-mode": props.extension
+      }
+    ]);
+    const __returned__ = { props, emit, slots, frameRef, sendMessageToIframe, handleResizeStart, handleResize, handleResizeEnd, handleToggle, panelStyle, panelClasses, Frame, Header, SessionList, SelectedNodes, ResizeHandle };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+import { openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, renderSlot as _renderSlot, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, normalizeStyle as _normalizeStyle } from "vue";
+const _hoisted_1 = ["aria-expanded"];
+const _hoisted_2 = { class: "aipanel-split-toggle-icon" };
+const _hoisted_3 = {
+  key: 0,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_4 = {
+  key: 1,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_5 = {
+  key: 2,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_6 = {
+  key: 3,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_7 = { class: "aipanel-chat-content" };
+function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass($setup.panelClasses),
+      style: _normalizeStyle($setup.panelStyle)
+    },
+    [
+      $props.mode === "split" && $props.resizable && $props.open ? (_openBlock(), _createBlock($setup["ResizeHandle"], {
+        key: 0,
+        width: $props.panelWidth,
+        "min-width": $props.minWidth,
+        "max-width": $props.maxWidth,
+        position: $props.splitPosition,
+        onResize: $setup.handleResize,
+        onResizeStart: $setup.handleResizeStart,
+        onResizeEnd: $setup.handleResizeEnd
+      }, null, 8, ["width", "min-width", "max-width", "position"])) : _createCommentVNode("v-if", true),
+      $props.mode === "split" && $props.resizable ? (_openBlock(), _createElementBlock("button", {
+        key: 1,
+        type: "button",
+        class: _normalizeClass(["aipanel-split-toggle-btn", { open: $setup.props.open, thinking: $setup.props.thinking, "aipanel-theme-dark": $props.resolvedTheme === "dark", "split-left": $props.splitPosition === "left" }]),
+        "aria-expanded": $props.open,
+        "aria-label": "\u5207\u6362\u9762\u677F",
+        onClick: $setup.handleToggle
+      }, [
+        _createElementVNode("span", _hoisted_2, [
+          $props.open && $props.splitPosition === "right" ? (_openBlock(), _createElementBlock("svg", _hoisted_3, [..._cache[0] || (_cache[0] = [
+            _createElementVNode(
+              "path",
+              {
+                d: "M9 18l6-6-6-6",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              },
+              null,
+              -1
+              /* CACHED */
+            )
+          ])])) : _createCommentVNode("v-if", true),
+          !$props.open && $props.splitPosition === "right" ? (_openBlock(), _createElementBlock("svg", _hoisted_4, [..._cache[1] || (_cache[1] = [
+            _createElementVNode(
+              "path",
+              {
+                d: "M15 18l-6-6 6-6",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              },
+              null,
+              -1
+              /* CACHED */
+            )
+          ])])) : _createCommentVNode("v-if", true),
+          $props.open && $props.splitPosition === "left" ? (_openBlock(), _createElementBlock("svg", _hoisted_5, [..._cache[2] || (_cache[2] = [
+            _createElementVNode(
+              "path",
+              {
+                d: "M15 18l-6-6 6-6",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              },
+              null,
+              -1
+              /* CACHED */
+            )
+          ])])) : _createCommentVNode("v-if", true),
+          !$props.open && $props.splitPosition === "left" ? (_openBlock(), _createElementBlock("svg", _hoisted_6, [..._cache[3] || (_cache[3] = [
+            _createElementVNode(
+              "path",
+              {
+                d: "M9 18l6-6-6-6",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              },
+              null,
+              -1
+              /* CACHED */
+            )
+          ])])) : _createCommentVNode("v-if", true)
+        ])
+      ], 10, _hoisted_1)) : _createCommentVNode("v-if", true),
+      _createVNode(
+        $setup["Header"],
+        null,
+        _createSlots({
+          _: 2
+          /* DYNAMIC */
+        }, [
+          $setup.slots["session-toggle-icon"] ? {
+            name: "session-toggle-icon",
+            fn: _withCtx(() => [
+              _renderSlot(_ctx.$slots, "session-toggle-icon")
+            ]),
+            key: "0"
+          } : void 0,
+          $setup.slots["select-icon"] ? {
+            name: "select-icon",
+            fn: _withCtx(() => [
+              _renderSlot(_ctx.$slots, "select-icon")
+            ]),
+            key: "1"
+          } : void 0,
+          $setup.slots["close-icon"] ? {
+            name: "close-icon",
+            fn: _withCtx(() => [
+              _renderSlot(_ctx.$slots, "close-icon")
+            ]),
+            key: "2"
+          } : void 0
+        ]),
+        1024
+        /* DYNAMIC_SLOTS */
+      ),
+      _createElementVNode("div", _hoisted_7, [
+        _createVNode($setup["SessionList"], null, {
+          empty: _withCtx(() => [
+            _renderSlot(_ctx.$slots, "sessions-empty", {}, () => [
+              _cache[4] || (_cache[4] = _createElementVNode(
+                "div",
+                { class: "aipanel-session-empty" },
+                "\u6682\u65E0\u4F1A\u8BDD",
+                -1
+                /* CACHED */
+              ))
+            ])
+          ]),
+          _: 3
+          /* FORWARDED */
+        }),
+        _createVNode(
+          $setup["Frame"],
+          { ref: "frameRef" },
+          _createSlots({
+            _: 2
+            /* DYNAMIC */
+          }, [
+            $setup.slots["empty-state"] ? {
+              name: "empty-state",
+              fn: _withCtx(() => [
+                _renderSlot(_ctx.$slots, "empty-state")
+              ]),
+              key: "0"
+            } : void 0,
+            $setup.slots.loading ? {
+              name: "loading",
+              fn: _withCtx(() => [
+                _renderSlot(_ctx.$slots, "loading")
+              ]),
+              key: "1"
+            } : void 0,
+            $setup.slots.error ? {
+              name: "error",
+              fn: _withCtx(() => [
+                _renderSlot(_ctx.$slots, "error")
+              ]),
+              key: "2"
+            } : void 0,
+            $setup.slots.content ? {
+              name: "content",
+              fn: _withCtx(() => [
+                _renderSlot(_ctx.$slots, "content")
+              ]),
+              key: "3"
+            } : void 0
+          ]),
+          1536
+          /* NEED_PATCH, DYNAMIC_SLOTS */
+        ),
+        _createVNode($setup["SelectedNodes"])
+      ])
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+__vue_sfc__.render = __vue_render__;
+var ChatPanel_vue_default = __vue_sfc__;
+export {
+  ChatPanel_vue_default as default
+};

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

@@ -0,0 +1 @@
+.floating-bubble{position:fixed;top:0;left:0;z-index:999999;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;will-change:transform}.floating-bubble:active{cursor:grabbing}body.floating-bubble-dragging *{pointer-events:none!important}body.floating-bubble-dragging .floating-bubble,body.floating-bubble-dragging .floating-bubble *{pointer-events:auto!important}

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

@@ -0,0 +1,44 @@
+import type { FloatingBubbleAxis, FloatingBubbleMagnetic, FloatingBubbleOffset, FloatingBubbleGap } from "./types";
+type __VLS_Props = {
+    offset?: FloatingBubbleOffset;
+    axis?: FloatingBubbleAxis;
+    magnetic?: FloatingBubbleMagnetic;
+    gap?: number | FloatingBubbleGap;
+    teleport?: string | Element;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    offset: import("vue").ComputedRef<{
+        x: number;
+        y: number;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:offset": (value: FloatingBubbleOffset) => any;
+    click: (event: MouseEvent) => any;
+    "offset-change": (offset: FloatingBubbleOffset) => any;
+    "drag-start": () => any;
+    "drag-end": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:offset"?: ((value: FloatingBubbleOffset) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    "onOffset-change"?: ((offset: FloatingBubbleOffset) => any) | undefined;
+    "onDrag-start"?: (() => any) | undefined;
+    "onDrag-end"?: (() => any) | undefined;
+}>, {
+    offset: FloatingBubbleOffset;
+    axis: FloatingBubbleAxis;
+    magnetic: FloatingBubbleMagnetic;
+    gap: number | FloatingBubbleGap;
+    teleport: string | Element;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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;
+    };
+};