@aipanel/ui 1.2.0-beta.0

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

@@ -0,0 +1,2 @@
+export type { AIPanelWidgetTheme, AIPanelWidgetSession, AIPanelSelectedElement, AIPanelRemoveSelectedPayload, AIPanelWidgetSessionItem, AIPanelSelectedElementItem, AIPanelWidgetProps, AIPanelWidgetEmits, AIPanelSessionThinkingState, DisplayMode, SplitModeOptions, } from "@aipanel/core";
+export type AIPanelWidgetThemeLocal = "light" | "dark" | "auto";

package/es/env.d.ts

@@ -0,0 +1,15 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+
+  const component: DefineComponent<Record<string, never>, Record<string, never>, unknown>;
+
+  export default component;
+}
+
+declare module "*.svg?raw" {
+  const content: string;
+  export default content;
+}

package/es/index.d.ts

@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+declare const version = "1.2.0-beta.0";
+declare function install(app: App<any>, options?: any): void;
+export { install, version, };
+export * from './AI-panel-widget';
+export * from './setup';
+export default install;

package/es/index.mjs

@@ -0,0 +1,22 @@
+import { AIPanelWidget } from "./AI-panel-widget/index.mjs";
+const version = "1.2.0-beta.0";
+function install(app, options) {
+  const components = [
+    AIPanelWidget
+  ];
+  components.forEach((item) => {
+    if (item.install) {
+      app.use(item, options);
+    } else if (item.name) {
+      app.component(item.name, item);
+    }
+  });
+}
+export * from "./AI-panel-widget/index.mjs";
+export * from "./setup.mjs";
+var es_default = install;
+export {
+  es_default as default,
+  install,
+  version
+};

package/es/setup.d.ts

@@ -0,0 +1 @@
+export { AIPanelLogo } from "./AI-panel-widget";

package/es/setup.mjs

@@ -0,0 +1,4 @@
+import { AIPanelLogo } from "./AI-panel-widget/index.mjs";
+export {
+  AIPanelLogo
+};

package/lib/AI-panel-widget/composables/use-inspector.cjs

@@ -0,0 +1,466 @@
+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 use_inspector_exports = {};
+__export(use_inspector_exports, {
+  useInspector: () => useInspector
+});
+module.exports = __toCommonJS(use_inspector_exports);
+var import_vue = require("vue");
+var import_core = require("@aipanel/core");
+var import_css_selector_generator = __toESM(require("css-selector-generator"));
+const IGNORE_SELECTORS = [
+  "#vue-inspector-container",
+  ".aipanel-widget",
+  ".aipanel-element-highlight",
+  ".aipanel-element-tooltip",
+  ".aipanel-select-mode-hint",
+  ".floating-bubble"
+];
+const IGNORE_ATTRIBUTE = "data-v-inspector-ignore";
+const KEY_PROPS_DATA = "__v_inspector";
+const KEY_DATA = "data-v-inspector";
+function getDirectText(element) {
+  let text = "";
+  for (let i = 0; i < element.childNodes.length; i++) {
+    const child = element.childNodes[i];
+    if (child.nodeType === Node.TEXT_NODE) {
+      text += child.textContent || "";
+    }
+  }
+  return text.trim();
+}
+const DYNAMIC_ID_PATTERN = /^(?:el-|:r[0-9]+:|radix-|uid-|ts-|uuid-|id-[a-f0-9]{4,}|.*[0-9]{4,}.*|.*-[a-f0-9]{6,}$)/i;
+const STATE_CLASS_PATTERN = /^(?:hover|active|focus|focus-visible|focus-within|disabled|enabled|checked|selected|open|closed|loading|error|success|warning|hidden|visible|show|hide|current|expanded|collapsed|pressed|dragging|droppable|sortable|placeholder|transition|enter|leave|appear|move)$/i;
+const STATE_CLASS_PREFIX_PATTERN = /^(?:is-|has-|was-|are-|can-|should-|will-|did-|does-|on-|off-|in-|out-|at-|to-|from-)/i;
+function isDynamicId(id) {
+  if (!id) return false;
+  if (DYNAMIC_ID_PATTERN.test(id)) {
+    return true;
+  }
+  const digitCount = (id.match(/\d/g) || []).length;
+  const letterCount = (id.match(/[a-zA-Z]/g) || []).length;
+  if (digitCount > letterCount && digitCount >= 3) {
+    return true;
+  }
+  const dashParts = id.split("-");
+  if (dashParts.length >= 3) {
+    const lastPart = dashParts[dashParts.length - 1];
+    if (/^\d+$/.test(lastPart) || /^[a-f0-9]{4,}$/i.test(lastPart)) {
+      return true;
+    }
+  }
+  return false;
+}
+function isStateClass(className) {
+  if (!className) return false;
+  if (STATE_CLASS_PATTERN.test(className)) {
+    return true;
+  }
+  if (STATE_CLASS_PREFIX_PATTERN.test(className)) {
+    return true;
+  }
+  if (className.includes("-active") || className.includes("-hover") || className.includes("-focus")) {
+    return true;
+  }
+  if (/^(?:router-link|nuxt-link)/.test(className)) {
+    return true;
+  }
+  return false;
+}
+function getElementDescription(element) {
+  return (0, import_css_selector_generator.default)(element, {
+    selectors: ["id", "class", "tag", "nthchild"],
+    combineWithinSelector: true,
+    combineBetweenSelectors: true,
+    maxCombinations: 100,
+    maxCandidates: 100,
+    blacklist: [
+      (selectorValue) => {
+        const idMatch = selectorValue.match(/^#(.+)$/);
+        if (idMatch) {
+          return isDynamicId(idMatch[1]);
+        }
+        const classMatch = selectorValue.match(/^\.([a-zA-Z_-][\w-]*)$/);
+        if (classMatch) {
+          return isStateClass(classMatch[1]);
+        }
+        return false;
+      }
+    ]
+  });
+}
+function getFileInfoFromVueInstance(element) {
+  const vue3Instance = element.__vueParentComponent;
+  if (vue3Instance) {
+    let current = vue3Instance;
+    while (current) {
+      const file = current.type?.__file || current.vnode?.type?.__file;
+      if (file) {
+        return { file, line: null, column: null };
+      }
+      current = current.parent;
+    }
+  }
+  const vue2Instance = element.__vue__;
+  if (vue2Instance) {
+    let current = vue2Instance;
+    while (current) {
+      const file = current.$options?.__file;
+      if (file) {
+        return { file, line: null, column: null };
+      }
+      current = current.$parent;
+    }
+  }
+  return null;
+}
+function shouldIgnoreElement(el) {
+  if (el.hasAttribute(IGNORE_ATTRIBUTE)) return true;
+  for (const selector of IGNORE_SELECTORS) {
+    if (el.closest(selector)) return true;
+  }
+  return false;
+}
+function getDataFromElement(el) {
+  const vnodeData = el.__vnode?.props?.[KEY_PROPS_DATA];
+  if (vnodeData) return vnodeData;
+  const ctxVNode = el.__vnode?.ctx?.vnode;
+  if (ctxVNode?.el === el) {
+    const ctxData = ctxVNode.props?.[KEY_PROPS_DATA];
+    if (ctxData) return ctxData;
+  }
+  const vueInstance = el.__vueParentComponent;
+  let currentParent = vueInstance?.parent;
+  while (currentParent) {
+    if (currentParent.vnode?.el === el) {
+      const parentData = currentParent.vnode.props?.[KEY_PROPS_DATA];
+      if (parentData) return parentData;
+    }
+    currentParent = currentParent.parent;
+  }
+  const attr = el.getAttribute(KEY_DATA);
+  return attr ?? void 0;
+}
+function findInspectorFileInfo(element) {
+  let current = element;
+  while (current) {
+    if (shouldIgnoreElement(current)) {
+      current = current.parentElement;
+      continue;
+    }
+    const data = getDataFromElement(current);
+    if (data) {
+      const splitRE = /(.+):([\d]+):([\d]+)$/;
+      const match = data.match(splitRE);
+      if (match) {
+        return {
+          file: match[1],
+          line: parseInt(match[2], 10),
+          column: parseInt(match[3], 10)
+        };
+      }
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+function mergeFileInfo(inspectorFileInfo, vueFileInfo) {
+  if (!inspectorFileInfo?.file && !vueFileInfo?.file) {
+    return { file: null, line: null, column: null };
+  }
+  const isNodeModules = (path) => path.includes("node_modules");
+  if (inspectorFileInfo?.file && vueFileInfo?.file) {
+    if (!isNodeModules(inspectorFileInfo.file)) {
+      return inspectorFileInfo;
+    } else if (!isNodeModules(vueFileInfo.file)) {
+      return vueFileInfo;
+    } else {
+      return inspectorFileInfo;
+    }
+  } else if (inspectorFileInfo?.file) {
+    return inspectorFileInfo;
+  } else {
+    return vueFileInfo;
+  }
+}
+function getTargetElement(e) {
+  if (!e.target || !(e.target instanceof Element)) return null;
+  const el = e.target;
+  if (shouldIgnoreElement(el)) return null;
+  return el;
+}
+function getFileInfo(e, element) {
+  let inspectorFileInfo = null;
+  if (element) {
+    inspectorFileInfo = findInspectorFileInfo(element);
+  }
+  const vueFileInfo = element ? getFileInfoFromVueInstance(element) : null;
+  return mergeFileInfo(inspectorFileInfo, vueFileInfo);
+}
+function useInspector(options) {
+  const highlightVisible = (0, import_vue.ref)(false);
+  const highlightStyle = (0, import_vue.ref)({
+    top: "0px",
+    left: "0px",
+    width: "0px",
+    height: "0px"
+  });
+  const tooltipVisible = (0, import_vue.ref)(false);
+  const tooltipStyle = (0, import_vue.ref)({ top: "0px", left: "0px" });
+  const tooltipContent = (0, import_vue.ref)({ description: "", fileInfo: "" });
+  const INSPECTOR_CHECK_INTERVAL = 500;
+  let inspectorCheckTimer = null;
+  let currentPrimary = "#3b82f6";
+  let currentPrimaryBg = "rgba(59, 130, 246, 0.1)";
+  function setPointerEventsNone(elements) {
+    elements.forEach((el) => {
+      if (el) el.style.pointerEvents = "none";
+    });
+  }
+  function setPointerEventsAuto(elements) {
+    elements.forEach((el) => {
+      if (el) el.style.pointerEvents = "";
+    });
+  }
+  function handleMouseMoveCore(e) {
+    if (!options.selectMode.value) return;
+    const highlight = document.querySelector(".aipanel-element-highlight");
+    const tooltip = document.querySelector(".aipanel-element-tooltip");
+    const selectHint = document.querySelector(".aipanel-select-mode-hint");
+    const floatingBubble = document.querySelector(".floating-bubble");
+    const uiElements = [highlight, tooltip, selectHint, floatingBubble];
+    setPointerEventsNone(uiElements);
+    const elementToHighlight = getTargetElement(e);
+    const fileInfo = getFileInfo(e, elementToHighlight);
+    setPointerEventsAuto(uiElements);
+    if (elementToHighlight) {
+      const widget = document.querySelector(".aipanel-widget");
+      if (widget) {
+        const style = getComputedStyle(widget);
+        currentPrimary = style.getPropertyValue("--ap-primary").trim() || currentPrimary;
+        currentPrimaryBg = style.getPropertyValue("--ap-primary-bg").trim() || currentPrimaryBg;
+      }
+      const description = getElementDescription(elementToHighlight);
+      const fileName = fileInfo.file ? fileInfo.file.split("/").pop() : "";
+      let lineInfo = "";
+      if (fileInfo.line) {
+        lineInfo = `:${fileInfo.line}`;
+        if (fileInfo.column) {
+          lineInfo += `:${fileInfo.column}`;
+        }
+      }
+      const fileInfoText = fileName ? `${fileName}${lineInfo}` : "";
+      tooltipContent.value = {
+        description,
+        fileInfo: fileInfoText
+      };
+      const rect = elementToHighlight.getBoundingClientRect();
+      const newTop = `${rect.top}px`;
+      const newLeft = `${rect.left}px`;
+      const newWidth = `${rect.width}px`;
+      const newHeight = `${rect.height}px`;
+      if (highlightStyle.value.top !== newTop || highlightStyle.value.left !== newLeft || highlightStyle.value.width !== newWidth || highlightStyle.value.height !== newHeight) {
+        highlightStyle.value = {
+          top: newTop,
+          left: newLeft,
+          width: newWidth,
+          height: newHeight,
+          border: `2px solid ${currentPrimary}`,
+          background: currentPrimaryBg
+        };
+      }
+      highlightVisible.value = true;
+      tooltipVisible.value = true;
+      void (0, import_vue.nextTick)(() => {
+        const tooltipEl = document.querySelector(".aipanel-element-tooltip");
+        if (!tooltipEl) return;
+        const tooltipWidth = tooltipEl.offsetWidth;
+        const tooltipHeight = tooltipEl.offsetHeight;
+        if (tooltipWidth === 0 || tooltipHeight === 0) return;
+        const margin = 10;
+        const gap = 4;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const clampLeft = (left) => Math.max(margin, Math.min(left, viewportWidth - tooltipWidth - margin));
+        const clampTop = (top) => Math.max(margin, Math.min(top, viewportHeight - tooltipHeight - margin));
+        const candidateTop = rect.top - tooltipHeight - gap;
+        const candidateBottom = rect.bottom + gap;
+        const candidateRight = rect.right + gap;
+        const candidateLeft = rect.left - tooltipWidth - gap;
+        const verticalCenter = rect.top + (rect.height - tooltipHeight) / 2;
+        let tooltipTop = 0;
+        let tooltipLeft = 0;
+        let placed = false;
+        if (candidateTop >= margin) {
+          tooltipTop = candidateTop;
+          tooltipLeft = clampLeft(rect.left);
+          placed = true;
+        }
+        if (!placed && candidateBottom + tooltipHeight <= viewportHeight - margin) {
+          tooltipTop = candidateBottom;
+          tooltipLeft = clampLeft(rect.left);
+          placed = true;
+        }
+        if (!placed && candidateRight + tooltipWidth <= viewportWidth - margin) {
+          tooltipLeft = candidateRight;
+          tooltipTop = clampTop(verticalCenter);
+          placed = true;
+        }
+        if (!placed && candidateLeft >= margin) {
+          tooltipLeft = candidateLeft;
+          tooltipTop = clampTop(verticalCenter);
+          placed = true;
+        }
+        if (!placed) {
+          const corners = [
+            { top: margin, left: margin },
+            { top: margin, left: viewportWidth - tooltipWidth - margin },
+            { top: viewportHeight - tooltipHeight - margin, left: margin },
+            {
+              top: viewportHeight - tooltipHeight - margin,
+              left: viewportWidth - tooltipWidth - margin
+            }
+          ];
+          for (const corner of corners) {
+            const tooltipRight = corner.left + tooltipWidth;
+            const tooltipBottom = corner.top + tooltipHeight;
+            const overlaps = tooltipRight <= rect.left || rect.right <= corner.left || tooltipBottom <= rect.top || rect.bottom <= corner.top;
+            if (overlaps) {
+              tooltipTop = corner.top;
+              tooltipLeft = corner.left;
+              placed = true;
+              break;
+            }
+          }
+          if (!placed) {
+            tooltipTop = margin;
+            tooltipLeft = margin;
+          }
+        }
+        const newTooltipTop = `${tooltipTop}px`;
+        const newTooltipLeft = `${tooltipLeft}px`;
+        if (tooltipStyle.value.top !== newTooltipTop || tooltipStyle.value.left !== newTooltipLeft) {
+          tooltipStyle.value = {
+            top: newTooltipTop,
+            left: newTooltipLeft
+          };
+        }
+      });
+    } else {
+      highlightVisible.value = false;
+      tooltipVisible.value = false;
+    }
+  }
+  const handleMouseMove = handleMouseMoveCore;
+  function setupInspectorHook() {
+    const inspector = window.__VUE_INSPECTOR__;
+    if (!inspector || inspector.__aipanel_hooked) return;
+    const originalHandleClick = inspector.handleClick.bind(inspector);
+    inspector.handleClick = function(e) {
+      if (options.selectMode.value) {
+        const targetEl = e.target instanceof Element ? e.target : null;
+        if (targetEl && targetEl.closest(".aipanel-widget")) {
+          return originalHandleClick.call(inspector, e);
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        const elementToSelect = getTargetElement(e);
+        const fileInfo = getFileInfo(e, elementToSelect);
+        if (elementToSelect) {
+          const innerText = getDirectText(elementToSelect);
+          const description = getElementDescription(elementToSelect);
+          const elementInfo = {
+            filePath: fileInfo.file,
+            line: fileInfo.line,
+            column: fileInfo.column,
+            innerText: (0, import_core.truncate)(innerText, 200),
+            description
+          };
+          options.onAddSelectedNode(elementInfo);
+        }
+        return;
+      }
+      return originalHandleClick.call(inspector, e);
+    };
+    inspector.__aipanel_hooked = true;
+  }
+  function handleKeydown(e) {
+    if (e.key === "Escape" && options.selectMode.value) {
+      e.preventDefault();
+      e.stopPropagation();
+      options.onExitSelectMode();
+    }
+  }
+  (0, import_vue.watch)(options.selectMode, (newVal) => {
+    const inspector = window.__VUE_INSPECTOR__;
+    if (newVal) {
+      if (inspector) {
+        inspector.enable();
+      }
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("keydown", handleKeydown, true);
+    } else {
+      if (inspector) {
+        inspector.disable();
+      }
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("keydown", handleKeydown, true);
+      highlightVisible.value = false;
+      tooltipVisible.value = false;
+    }
+  });
+  (0, import_vue.onMounted)(() => {
+    if (window.__VUE_INSPECTOR__) {
+      setupInspectorHook();
+    } else {
+      inspectorCheckTimer = window.setInterval(() => {
+        if (window.__VUE_INSPECTOR__) {
+          setupInspectorHook();
+          if (inspectorCheckTimer) {
+            window.clearInterval(inspectorCheckTimer);
+            inspectorCheckTimer = null;
+          }
+        }
+      }, INSPECTOR_CHECK_INTERVAL);
+    }
+  });
+  (0, import_vue.onUnmounted)(() => {
+    if (inspectorCheckTimer) {
+      window.clearInterval(inspectorCheckTimer);
+    }
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("keydown", handleKeydown, true);
+  });
+  return {
+    highlightVisible,
+    highlightStyle,
+    tooltipVisible,
+    tooltipStyle,
+    tooltipContent
+  };
+}

package/lib/AI-panel-widget/composables/use-inspector.d.ts

@@ -0,0 +1,52 @@
+import { type Ref } from "vue";
+import type { AIPanelSelectedElement } from "../src/types";
+interface VueInspector {
+    getTargetNode: (e: MouseEvent) => {
+        targetNode: Element | null;
+        params: {
+            file?: string;
+            line?: number;
+            column?: number;
+        } | null;
+    };
+    handleClick: (e: MouseEvent) => void;
+    enable: () => void;
+    disable: () => void;
+    __aipanel_hooked?: boolean;
+}
+declare global {
+    interface Window {
+        __VUE_INSPECTOR__?: VueInspector;
+    }
+}
+interface UseInspectorOptions {
+    selectMode: Ref<boolean>;
+    onAddSelectedNode: (element: AIPanelSelectedElement) => void;
+    onExitSelectMode: () => void;
+}
+export declare function useInspector(options: UseInspectorOptions): {
+    highlightVisible: Ref<boolean, boolean>;
+    highlightStyle: Ref<Record<string, string>, Record<string, string>>;
+    tooltipVisible: Ref<boolean, boolean>;
+    tooltipStyle: Ref<{
+        top: string;
+        left: string;
+    }, {
+        top: string;
+        left: string;
+    } | {
+        top: string;
+        left: string;
+    }>;
+    tooltipContent: Ref<{
+        description: string;
+        fileInfo: string;
+    }, {
+        description: string;
+        fileInfo: string;
+    } | {
+        description: string;
+        fileInfo: string;
+    }>;
+};
+export {};