react-element-prompt-inspector
Version:
React component library for inspecting DOM elements and generating AI prompts
678 lines (662 loc) • 69.8 kB
JavaScript
"use strict";
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);
// src/index.ts
var index_exports = {};
__export(index_exports, {
ElementHighlighter: () => ElementHighlighter,
ElementInspector: () => ElementInspector,
ElementSelector: () => ElementSelector,
createElementsPrompt: () => createElementsPrompt,
generateElementContext: () => generateElementContext,
getElementAttributes: () => getElementAttributes,
getMostSpecificElementAtPoint: () => getMostSpecificElementAtPoint,
getOffsetsFromPointToElement: () => getOffsetsFromPointToElement,
getXPathForElement: () => getXPathForElement,
isElementAtPoint: () => isElementAtPoint
});
module.exports = __toCommonJS(index_exports);
// #style-inject:#style-inject
function styleInject(css, { insertAt } = {}) {
if (!css || typeof document === "undefined") return;
const head = document.head || document.getElementsByTagName("head")[0];
const style = document.createElement("style");
style.type = "text/css";
if (insertAt === "top") {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
// src/styles/global.css
styleInject('/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root,\n :host {\n --font-sans:\n ui-sans-serif,\n system-ui,\n sans-serif,\n "Apple Color Emoji",\n "Segoe UI Emoji",\n "Segoe UI Symbol",\n "Noto Color Emoji";\n --font-mono:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n "Liberation Mono",\n "Courier New",\n monospace;\n --color-blue-50: oklch(97% 0.014 254.604);\n --color-blue-200: oklch(88.2% 0.059 254.128);\n --color-blue-800: oklch(42.4% 0.199 265.638);\n --color-blue-950: oklch(28.2% 0.091 267.935);\n --color-gray-500: oklch(55.1% 0.027 264.364);\n --color-gray-600: oklch(44.6% 0.03 256.802);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --font-weight-semibold: 600;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-xl: 0.75rem;\n --animate-spin: spin 1s linear infinite;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html,\n :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b,\n strong {\n font-weight: bolder;\n }\n code,\n kbd,\n samp,\n pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol,\n ul,\n menu {\n list-style: none;\n }\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n button,\n input,\n select,\n optgroup,\n textarea,\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::-moz-placeholder {\n opacity: 1;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::-moz-placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit,\n ::-webkit-datetime-edit-year-field,\n ::-webkit-datetime-edit-month-field,\n ::-webkit-datetime-edit-day-field,\n ::-webkit-datetime-edit-hour-field,\n ::-webkit-datetime-edit-minute-field,\n ::-webkit-datetime-edit-second-field,\n ::-webkit-datetime-edit-millisecond-field,\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button,\n input:where([type=button], [type=reset], [type=submit]),\n ::file-selector-button {\n -webkit-appearance: button;\n -moz-appearance: button;\n appearance: button;\n }\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=until-found])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .visible {\n visibility: visible;\n }\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-\\[0\\.5px\\] {\n top: 0.5px;\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-6 {\n right: calc(var(--spacing) * 6);\n }\n .bottom-6 {\n bottom: calc(var(--spacing) * 6);\n }\n .left-\\[0\\.5px\\] {\n left: 0.5px;\n }\n .z-50 {\n z-index: 50;\n }\n .z-\\[9998\\] {\n z-index: 9998;\n }\n .z-\\[9999\\] {\n z-index: 9999;\n }\n .z-\\[10000\\] {\n z-index: 10000;\n }\n .z-\\[10001\\] {\n z-index: 10001;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .-ml-1 {\n margin-left: calc(var(--spacing) * -1);\n }\n .flex {\n display: flex;\n }\n .inline {\n display: inline;\n }\n .field-sizing-content {\n field-sizing: content;\n }\n .h-0 {\n height: calc(var(--spacing) * 0);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-screen {\n height: 100vh;\n }\n .min-h-16 {\n min-height: calc(var(--spacing) * 16);\n }\n .w-0 {\n width: calc(var(--spacing) * 0);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n .w-\\[350px\\] {\n width: 350px;\n }\n .w-full {\n width: 100%;\n }\n .w-screen {\n width: 100vw;\n }\n .min-w-\\[8rem\\] {\n min-width: 8rem;\n }\n .min-w-\\[300px\\] {\n min-width: 300px;\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .cursor-cell {\n cursor: cell;\n }\n .cursor-default {\n cursor: default;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .items-center {\n align-items: center;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n .border-t-8 {\n border-top-style: var(--tw-border-style);\n border-top-width: 8px;\n }\n .border-r-8 {\n border-right-style: var(--tw-border-style);\n border-right-width: 8px;\n }\n .border-b-8 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 8px;\n }\n .border-l-8 {\n border-left-style: var(--tw-border-style);\n border-left-width: 8px;\n }\n .\\!border-none {\n --tw-border-style: none !important;\n border-style: none !important;\n }\n .border-transparent {\n border-color: transparent;\n }\n .border-t-gray-800 {\n border-top-color: var(--color-gray-800);\n }\n .border-t-white {\n border-top-color: var(--color-white);\n }\n .border-b-gray-800 {\n border-bottom-color: var(--color-gray-800);\n }\n .border-b-white {\n border-bottom-color: var(--color-white);\n }\n .bg-\\[\\#3b82f6\\] {\n background-color: #3b82f6;\n }\n .bg-\\[\\#93c5fd\\] {\n background-color: #93c5fd;\n }\n .bg-\\[\\#2563eb\\] {\n background-color: #2563eb;\n }\n .bg-\\[rgba\\(52\\,53\\,65\\,0\\.8\\)\\] {\n background-color: rgba(52, 53, 65, 0.8);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .fill-black {\n fill: var(--color-black);\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .px-0 {\n padding-inline: calc(var(--spacing) * 0);\n }\n .px-0\\.5 {\n padding-inline: calc(var(--spacing) * 0.5);\n }\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * 0.5);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .pr-\\[40px\\] {\n padding-right: 40px;\n }\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[15px\\] {\n font-size: 15px;\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .\\!whitespace-nowrap {\n white-space: nowrap !important;\n }\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n .text-white {\n color: var(--color-white);\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-25 {\n opacity: 25%;\n }\n .opacity-75 {\n opacity: 75%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .\\!shadow-none {\n --tw-shadow: 0 0 #0000 !important;\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow) !important;\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-xs {\n --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .\\!ring-0 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow) !important;\n }\n .ring {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .outline-hidden {\n --tw-outline-style: none;\n outline-style: none;\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n }\n .transition {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to,\n opacity,\n box-shadow,\n transform,\n translate,\n scale,\n rotate,\n filter,\n -webkit-backdrop-filter,\n backdrop-filter,\n display,\n visibility,\n content-visibility,\n overlay,\n pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[color\\,box-shadow\\] {\n transition-property: color, box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-100 {\n --tw-duration: 100ms;\n transition-duration: 100ms;\n }\n .duration-150 {\n --tw-duration: 150ms;\n transition-duration: 150ms;\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .hover\\:bg-\\[\\#1d4ed8\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #1d4ed8;\n }\n }\n }\n .hover\\:bg-\\[\\#60a5fa\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #60a5fa;\n }\n }\n }\n .hover\\:bg-\\[\\#2563eb\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #2563eb;\n }\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .focus-visible\\:ring-1 {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n .focus-visible\\:ring-\\[3px\\] {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n .focus-visible\\:outline-hidden {\n &:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n }\n }\n .disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .data-disabled\\:pointer-events-none {\n &[data-disabled] {\n pointer-events: none;\n }\n }\n .data-disabled\\:opacity-50 {\n &[data-disabled] {\n opacity: 50%;\n }\n }\n .\\*\\*\\:data-tag\\:rounded {\n :is(& *) {\n &[data-tag] {\n border-radius: 0.25rem;\n }\n }\n }\n .\\*\\*\\:data-tag\\:bg-blue-200 {\n :is(& *) {\n &[data-tag] {\n background-color: var(--color-blue-200);\n }\n }\n }\n .\\*\\*\\:data-tag\\:py-px {\n :is(& *) {\n &[data-tag] {\n padding-block: 1px;\n }\n }\n }\n .\\*\\*\\:data-tag\\:text-blue-950 {\n :is(& *) {\n &[data-tag] {\n color: var(--color-blue-950);\n }\n }\n }\n .md\\:text-sm {\n @media (width >= 48rem) {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n }\n .dark\\:text-gray-600 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-gray-600);\n }\n }\n .dark\\:\\*\\*\\:data-tag\\:bg-blue-800 {\n @media (prefers-color-scheme: dark) {\n :is(& *) {\n &[data-tag] {\n background-color: var(--color-blue-800);\n }\n }\n }\n }\n .dark\\:\\*\\*\\:data-tag\\:text-blue-50 {\n @media (prefers-color-scheme: dark) {\n :is(& *) {\n &[data-tag] {\n color: var(--color-blue-50);\n }\n }\n }\n }\n}\nbody span[data-tag] {\n background-color: #ebf5fb !important;\n color: #1566a4 !important;\n border-radius: 4px !important;\n}\n.bg-\\[\\#3b82f6\\] {\n background-color: #3b82f6;\n}\n.hover\\:bg-\\[\\#2563eb\\]:hover {\n background-color: #2563eb;\n}\n.-translate-y-1\\/2 {\n transform: translateY(-50%);\n}\n.border-red-400 {\n border-color: #ff6467;\n}\n.border-t-8 {\n border-top-width: 8px !important;\n}\n.border-b-8 {\n border-bottom-width: 8px !important;\n}\n.border-r-8 {\n border-right-width: 8px !important;\n}\n.border-l-8 {\n border-left-width: 8px !important;\n}\n.border-transparent {\n border-color: transparent !important;\n}\n.border-t-white {\n border-top-color: white !important;\n}\n.border-b-white {\n border-bottom-color: white !important;\n}\n.shadow-lg {\n box-shadow:\n 0 0 #0000,\n 0 0 #0000,\n 0 0 #0000,\n 0 0 #0000,\n 0 10px 15px -3px #0000001a,\n 0 4px 6px -4px #0000001a;\n}\n.text-red-400 {\n color: #ff6467;\n}\n.hover\\:border-red-700 {\n border-color: #c10007;\n}\n.hover\\:text-red-700 {\n color: #c10007;\n}\n.bg-\\[\\#4f39f6\\] {\n background-color: #4f39f6;\n}\n.hover\\:bg-\\[\\#432dd7\\]:hover {\n background-color: #432dd7;\n}\n.text-gray-700 {\n color: #364153;\n}\n.text-xs {\n font-size: 12px;\n}\n.text-white {\n color: white;\n}\n.pr-\\[40px\\] {\n padding-right: 40px !important;\n}\n.text-blue-500 {\n color: #2b7fff;\n}\n.element-inspector-menu {\n color: black;\n}\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *,\n ::before,\n ::after,\n ::backdrop {\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-duration: initial;\n }\n }\n}\n');
// src/ElementSelector.tsx
var import_react = require("react");
// src/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
var isElementAtPoint = (element, clientX, clientY) => {
const boundingRect = element.getBoundingClientRect();
const isInHorizontalBounds = clientX >= boundingRect.left && clientX <= boundingRect.left + boundingRect.width;
const isInVerticalBounds = clientY >= boundingRect.top && clientY <= boundingRect.top + boundingRect.height;
return isInHorizontalBounds && isInVerticalBounds;
};
function getOffsetsFromPointToElement(refElement, x, y) {
const referenceClientBounds = refElement.getBoundingClientRect();
const offsetTop = (y - referenceClientBounds.top) * 100 / referenceClientBounds.height;
const offsetLeft = (x - referenceClientBounds.left) * 100 / referenceClientBounds.width;
return {
offsetTop,
offsetLeft
};
}
var getXPathForElement = (element, useId = true) => {
if (element.id && useId) {
return `//*[@id="${element.id}"]`;
}
let nodeElem = element;
const parts = [];
while (nodeElem && Node.ELEMENT_NODE === nodeElem.nodeType) {
let nbOfPreviousSiblings = 0;
let hasNextSiblings = false;
let sibling = nodeElem.previousSibling;
while (sibling) {
if (sibling.nodeType !== Node.DOCUMENT_TYPE_NODE && sibling.nodeName === nodeElem.nodeName) {
nbOfPreviousSiblings++;
}
sibling = sibling.previousSibling;
}
sibling = nodeElem.nextSibling;
while (sibling) {
if (sibling.nodeName === nodeElem.nodeName) {
hasNextSiblings = true;
break;
}
sibling = sibling.nextSibling;
}
const prefix = nodeElem.prefix ? `${nodeElem.prefix}:` : "";
const nth = nbOfPreviousSiblings || hasNextSiblings ? `[${nbOfPreviousSiblings + 1}]` : "";
parts.push(prefix + nodeElem.localName + nth);
nodeElem = nodeElem.parentElement;
}
return parts.length ? `/${parts.reverse().join("/")}` : "";
};
function getElementAttributes(element) {
const attrs = {};
const priorityAttrs = [
"id",
"class",
"name",
"type",
"href",
"src",
"alt",
"for",
"placeholder"
];
const dataAttrs = [];
for (let i = 0; i < element.attributes.length; i++) {
const attr = element.attributes[i];
if (attr.name.startsWith("data-")) {
dataAttrs.push({ name: attr.name, value: attr.value });
} else if (priorityAttrs.includes(attr.name.toLowerCase()) || attr.name.toLowerCase() !== "style") {
attrs[attr.name] = attr.value;
}
}
dataAttrs.forEach((da) => {
attrs[da.name] = da.value;
});
return attrs;
}
function generateElementContext(element, index, totalElements) {
var _a;
let context = "";
if (totalElements > 1) {
context += `#### Element ${index + 1}
`;
}
context += `- **Tag**: ${element.tagName.toLowerCase()}
`;
const id = element.id;
if (id) {
context += `- **ID**: ${id}
`;
}
const classes = Array.from(element.classList).join(", ");
if (classes) {
context += `- **Classes**: ${classes}
`;
}
const attributes = getElementAttributes(element);
if (Object.keys(attributes).length > 0) {
context += `- **Attributes**:
`;
for (const [key, value] of Object.entries(attributes)) {
if (key.toLowerCase() !== "class" || !classes) {
context += ` - ${key}: ${value}
`;
}
}
}
const text = (_a = element.innerText) == null ? void 0 : _a.trim();
if (text) {
const maxLength = 100;
context += `- **Text**: ${text.length > maxLength ? `${text.substring(0, maxLength)}...` : text}
`;
}
context += `- **Structural Context**:
`;
if (element.parentElement) {
const parent = element.parentElement;
context += ` - **Parent**:
`;
context += ` - Tag: ${parent.tagName.toLowerCase()}
`;
if (parent.id) {
context += ` - ID: ${parent.id}
`;
}
const parentClasses = Array.from(parent.classList).join(", ");
if (parentClasses) {
context += ` - Classes: ${parentClasses}
`;
}
} else {
context += ` - **Parent**: No parent element found (likely root or disconnected)
`;
}
try {
const styles = window.getComputedStyle(element);
const relevantStyles = {
color: styles.color,
backgroundColor: styles.backgroundColor,
fontSize: styles.fontSize,
fontWeight: styles.fontWeight,
display: styles.display
};
context += `- **Styles**:
`;
for (const [key, value] of Object.entries(relevantStyles)) {
context += ` - ${key}: ${value}
`;
}
} catch (e) {
context += `- **Styles**: Could not retrieve computed styles
`;
}
context += `
`;
return context;
}
function createElementsPrompt(selectedElements, userPrompt) {
if (!selectedElements || selectedElements.length === 0) {
return `
${userPrompt}
### Context
No specific element was selected on the page. Please analyze the page code in general or ask for clarification.`.trim();
}
let detailedContext = "";
const totalElements = selectedElements.length;
selectedElements.forEach((element, index) => {
detailedContext += generateElementContext(element, index, totalElements);
});
const sectionHeader = totalElements > 1 ? "### Selected Elements" : "### Selected Element";
return `
${userPrompt}
${sectionHeader}
${detailedContext.trim()}`.trim();
}
function getMostSpecificElementAtPoint(x, y, excludeSelector) {
const fullExcludeSelector = excludeSelector ? `${excludeSelector}, .element-selector, [data-element-selector="true"]` : `.element-selector, [data-element-selector="true"]`;
const elements = document.elementsFromPoint(x, y);
const eligibleElements = elements.filter((element) => {
if (fullExcludeSelector && (element.matches(fullExcludeSelector) || element.closest(fullExcludeSelector))) {
return false;
}
if (element.closest("svg")) {
return false;
}
if (element.classList.contains("element-selector") || element.hasAttribute("data-element-selector")) {
return false;
}
return isElementAtPoint(element, x, y);
});
if (eligibleElements.length === 0) {
return document.body;
}
const sortedElements = [...eligibleElements].sort((a, b) => {
const aDepth = getElementDepth(a);
const bDepth = getElementDepth(b);
if (aDepth !== bDepth) {
return bDepth - aDepth;
}
const aChildren = a.children.length;
const bChildren = b.children.length;
if (aChildren !== bChildren) {
return aChildren - bChildren;
}
const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();
const aArea = aRect.width * aRect.height;
const bArea = bRect.width * bRect.height;
return aArea - bArea;
});
return sortedElements[0];
}
function getElementDepth(element) {
let depth = 0;
let current = element;
while (current.parentElement) {
depth++;
current = current.parentElement;
}
return depth;
}
var extractElementProperties = (el) => {
var _a;
return {
tagName: el.tagName,
id: el.id,
className: el.className,
textContent: (_a = el.textContent) == null ? void 0 : _a.trim(),
attributes: Array.from(el.attributes).map((attr) => ({
name: attr.name,
value: attr.value
}))
};
};
var getAllFormElements = () => {
const formElements = Array.from(
document.querySelectorAll(
'[data-name$="-select"], [data-name$="-input"], [data-name$="-checkbox"], [data-name$="-radio"], [data-name$="-textarea"]'
)
).filter((formEl) => formEl instanceof HTMLElement);
const dataNames = formElements.map((el) => el.getAttribute("data-name") || "");
return dataNames.filter(Boolean);
};
// src/ElementSelector.tsx
var import_jsx_runtime = require("react/jsx-runtime");
function ElementSelector({
onElementHovered,
onElementUnhovered,
onElementSelected,
ignoreList = [],
excludeSelector = "",
className = "",
style = {}
}) {
const lastHoveredElement = (0, import_react.useRef)(null);
const handleMouseMove = (0, import_react.useCallback)(
(event) => {
const { clientX, clientY } = event;
const overlayElement = event.currentTarget;
if (overlayElement) {
overlayElement.style.pointerEvents = "none";
}
const refElement = getMostSpecificElementAtPoint(clientX, clientY, excludeSelector);
if (overlayElement) {
overlayElement.style.pointerEvents = "auto";
}
if (ignoreList.includes(refElement)) return;
if (refElement === overlayElement || overlayElement && overlayElement.contains(refElement)) {
return;
}
if (lastHoveredElement.current !== refElement) {
lastHoveredElement.current = refElement;
onElementHovered(refElement);
}
},
[onElementHovered, ignoreList, excludeSelector]
);
const handleMouseLeave = (0, import_react.useCallback)(() => {
lastHoveredElement.current = null;
onElementUnhovered();
}, [onElementUnhovered]);
const handleMouseClick = (0, import_react.useCallback)(
(event) => {
event.preventDefault();
event.stopPropagation();
const { clientX, clientY } = event;
const overlayElement = event.currentTarget;
if (overlayElement) {
overlayElement.style.pointerEvents = "none";
}
const clickedElement = getMostSpecificElementAtPoint(clientX, clientY, excludeSelector);
if (overlayElement) {
overlayElement.style.pointerEvents = "auto";
}
if (clickedElement === overlayElement || overlayElement && overlayElement.contains(clickedElement)) {
return;
}
lastHoveredElement.current = clickedElement;
onElementSelected(clickedElement);
},
[onElementSelected, ignoreList, excludeSelector]
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
className: cn(
"element-selector fixed inset-0 h-screen w-screen cursor-cell z-[9999] pointer-events-auto",
className
),
"data-element-selector": "true",
style,
onMouseMove: handleMouseMove,
onMouseLeave: handleMouseLeave,
onClick: handleMouseClick,
role: "button",
tabIndex: 0
}
);
}
// src/ElementHighlighter.tsx
var import_react2 = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
function ElementHighlighter({
element,
className = "",
style = {},
updateRate = 30,
children,
borderColor = "rgba(59, 130, 246, 0.8)",
backgroundColor = "rgba(59, 130, 246, 0.2)"
}) {
const boxRef = (0, import_react2.useRef)(null);
const updateIntervalRef = (0, import_react2.useRef)(null);
const updateBoxPosition = (0, import_react2.useCallback)(() => {
if (boxRef.current && element) {
const referenceRect = element.getBoundingClientRect();
boxRef.current.style.top = `${referenceRect.top - 2}px`;
boxRef.current.style.left = `${referenceRect.left - 2}px`;
boxRef.current.style.width = `${referenceRect.width + 4}px`;
boxRef.current.style.height = `${referenceRect.height + 4}px`;
}
}, [element]);
(0, import_react2.useEffect)(() => {
updateBoxPosition();
if (updateRate > 0) {
const intervalId = window.setInterval(() => {
updateBoxPosition();
}, 1e3 / updateRate);
updateIntervalRef.current = intervalId;
return () => {
if (updateIntervalRef.current !== null) {
window.clearInterval(updateIntervalRef.current);
}
};
}
}, [updateBoxPosition, updateRate]);
(0, import_react2.useEffect)(() => {
const handleResize = () => {
updateBoxPosition();
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, [updateBoxPosition]);
const customStyle = {
...style,
borderColor,
backgroundColor
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: cn(
"element-highlighter fixed flex items-center justify-center rounded-md border-2 transition-all duration-100 z-[9998] pointer-events-none",
className
),
style: customStyle,
ref: boxRef,
children
}
);
}
// src/ElementInspector.tsx
var import_react9 = require("react");
// src/constants.ts
var UI_CONSTANTS = {
// Menu dimensions
MENU_WIDTH: 350,
// Width of the control menu in pixels
MENU_HEIGHT: 52,
// Height of the control menu in pixels
// Spacing and offsets
SPACING: 10,
// Standard spacing for margins and padding
ARROW_LEFT_OFFSET: 20,
// Left offset for the arrow from menu edge
// Z-index values
Z_INDEX: 1e4
// Standard z-index for UI elements
};
// src/components/bubble-menu/MenuArrow.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var MenuArrow = ({
isMenuAboveElement,
bubblePosition,
isDarkMode,
isVisible
}) => {
var _a;
const menuHeight = ((_a = document.querySelector(".element-inspector-menu")) == null ? void 0 : _a.clientHeight) || UI_CONSTANTS.MENU_HEIGHT;
const topPosition = isMenuAboveElement ? `${bubblePosition.top + menuHeight}px` : `${bubblePosition.top - 8}px`;
const leftPosition = `${bubblePosition.left + UI_CONSTANTS.ARROW_LEFT_OFFSET}px`;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
{
className: cn(
"element-inspector-menu-arrow pointer-events-none fixed z-[10001] h-0 w-0 border-r-8 border-l-8 border-transparent transition-all duration-150",
{
"border-t-8": isMenuAboveElement,
"border-b-8": !isMenuAboveElement,
"border-t-white": isMenuAboveElement && !isDarkMode,
"border-t-gray-800": isMenuAboveElement && isDarkMode,
"border-b-white": !isMenuAboveElement && !isDarkMode,
"border-b-gray-800": !isMenuAboveElement && isDarkMode,
"opacity-0": !isVisible,
"opacity-100": isVisible
}
),
style: {
top: topPosition,
left: leftPosition
},
"aria-hidden": "true"
}
);
};
// src/components/MentionChat.tsx
var import_react3 = require("react");
// src/components/ui/mention.tsx
var MentionPrimitive = __toESM(require("@diceui/mention"));
var React3 = __toESM(require("react"));
var import_jsx_runtime4 = require("react/jsx-runtime");
var Mention = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
MentionPrimitive.Root,
{
"data-slot": "mention",
ref,
className: cn(
"**:data-tag:rounded **:data-tag:bg-blue-200 **:data-tag:py-px **:data-tag:text-blue-950 dark:**:data-tag:bg-blue-800 dark:**:data-tag:text-blue-50",
className
),
...props
}
));
Mention.displayName = MentionPrimitive.Root.displayName;
var MentionLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
MentionPrimitive.Label,
{
"data-slot": "mention-label",
ref,
className: cn("px-0.5 py-1.5 font-semibold text-sm", className),
...props
}
));
MentionLabel.displayName = MentionPrimitive.Label.displayName;
var MentionInput = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
MentionPrimitive.Input,
{
"data-slot": "mention-input",
ref,
className: cn(
"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className
),
...props
}
));
MentionInput.displayName = MentionPrimitive.Input.displayName;
var MentionContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MentionPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
MentionPrimitive.Content,
{
"data-slot": "mention-content",
ref,
className: cn(
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
className
),
...props,
children
}
) }));
MentionContent.displayName = MentionPrimitive.Content.displayName;
var MentionItem = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
MentionPrimitive.Item,
{
"data-slot": "mention-item",
ref,
className: cn(
"relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-50",
className
),
...props,
children
}
));
MentionItem.displayName = MentionPrimitive.Item.displayName;
// src/Icons.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var IconSquareDashedPointer = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-square-dashed-mouse-pointer-icon lucide-square-dashed-mouse-pointer", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M5 3a2 2 0 0 0-2 2" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M19 3a2 2 0 0 1 2 2" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M5 21a2 2 0 0 1-2-2" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M9 3h1" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M9 21h2" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14 3h1" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 9v1" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 9v2" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 14v1" })
] });
var IconTick = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "20 6 9 17 4 12" }) });
var IconAi = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "23", height: "23", viewBox: "0 0 23 23", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M9.55507 5.34461L10.1322 6.94742C10.7733 8.72633 12.1742 10.1272 13.9531 10.7683L15.5559 11.3455C15.7004 11.3979 15.7004 11.6028 15.5559 11.6545L13.9531 12.2317C12.1742 12.8728 10.7733 14.2736 10.1322 16.0525L9.55507 17.6554C9.5026 17.7998 9.29776 17.7998 9.24601 17.6554L8.66885 16.0525C8.02772 14.2736 6.62688 12.8728 4.84797 12.2317L3.24516 11.6545C3.10069 11.602 3.10069 11.3972 3.24516 11.3455L4.84797 10.7683C6.62688 10.1272 8.02772 8.72633 8.66885 6.94742L9.24601 5.34461C9.29776 5.19942 9.5026 5.19942 9.55507 5.34461Z", fill: "black" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M16.7699 1.49284L17.0624 2.30431C17.3873 3.2049 18.0967 3.91431 18.9973 4.23918L19.8088 4.53172C19.8821 4.55831 19.8821 4.66181 19.8088 4.6884L18.9973 4.98093C18.0967 5.30581 17.3873 6.01521 17.0624 6.91581L16.7699 7.72728C16.7433 7.80059 16.6398 7.80059 16.6132 7.72728L16.3207 6.91581C15.9958 6.01521 15.2864 5.30581 14.3858 4.98093L13.5743 4.6884C13.501 4.66181 13.501 4.55831 13.5743 4.53172L14.3858 4.23918C15.2864 3.91431 15.9958 3.2049 16.3207 2.30431L16.6132 1.49284C16.6398 1.41881 16.744 1.41881 16.7699 1.49284Z", fill: "black" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M16.7699 15.2734L17.0624 16.0849C17.3873 16.9855 18.0967 17.6949 18.9973 18.0198L19.8088 18.3123C19.8821 18.3389 19.8821 18.4424 19.8088 18.469L18.9973 18.7615C18.0967 19.0864 17.3873 19.7958 17.0624 20.6964L16.7699 21.5079C16.7433 21.5812 16.6398 21.5812 16.6132 21.5079L16.3207 20.6964C15.9958 19.7958 15.2864 19.0864 14.3858 18.7615L13.5743 18.469C13.501 18.4424 13.501 18.3389 13.5743 18.3123L14.3858 18.0198C15.2864 17.6949 15.9958 16.9855 16.3207 16.0849L16.6132 15.2734C16.6398 15.2001 16.744 15.2001 16.7699 15.2734Z", fill: "black" })
] });
// src/components/MentionChat.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var MentionChat = ({
onSubmit,
handleInputChange,
selectedElements = []
}) => {
const mentionInputRef = (0, import_react3.useRef)(null);
const [values, setValues] = (0, import_react3.useState)([]);
const [inputValue, setInputValue] = (0, import_react3.useState)("");
(0, import_react3.useEffect)(() => {
handleInputChange == null ? void 0 : handleInputChange(inputValue);
if (!inputValue.trim()) {
setValues([]);
return;
}
}, [inputValue]);
(0, import_react3.useEffect)(() => {
var _a, _b, _c;
if (!mentionInputRef.current) return;
(_c = (_b = (_a = mentionInputRef.current.parentElement) == null ? void 0 : _a.querySelector("div")) == null ? void 0 : _b.classList) == null ? void 0 : _c.add("!whitespace-nowrap");
}, [mentionInputRef.current]);
const handleInputKeyDown = (e) => {
if (e.key === "Enter") {
handleSubmit(e);
}
};
const handleSubmit = (e) => {
e.preventDefault();
if (inputValue.trim() === "") return;
onSubmit == null ? void 0 : onSubmit(e);
setInputValue("");
};
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
Mention,
{
trigger: "/",
className: cn(
"text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary w-full resize-none bg-transparent focus:outline-none",
"element-inspector-mention"
),
inputValue,
value: values,
onInputValueChange: setInputValue,
onValueChange: setValues,
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `relative flex items-center gap-1`, children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex h-6 w-6 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconAi, {}) }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
MentionInput,
{
onKeyDown: handleInputKeyDown,
value: inputValue,
ref: mentionInputRef,
placeholder: "Tell me how to modify this element...",
className: cn(
"text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary w-full min-w-[300px] !border-none bg-transparent px-0 pr-[40px] text-sm !shadow-none !ring-0 focus:outline-none"
)
}
),
inputValue.trim() !== "" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"button",
{
type: "button",
onClick: handleSubmit,
className: "absolute right-0