@21st-extension/angular
Version:
130 lines (128 loc) • 4.48 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("@21st-extension/toolbar/plugin-ui/jsx-runtime");
function AngularLogo() {
return /* @__PURE__ */ jsxRuntime.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 960 960",
fill: "currentColor",
stroke: "currentColor",
children: [
/* @__PURE__ */ jsxRuntime.jsx("title", { children: "Angular Logo" }),
/* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
/* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "562.6,109.8 804.1,629.5 829.2,233.1 " }),
/* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "624.9,655.9 334.3,655.9 297.2,745.8 479.6,849.8 662,745.8 " }),
/* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "384.1,539.3 575.2,539.3 479.6,307 " }),
/* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "396.6,109.8 130,233.1 155.1,629.5 " })
] })
]
}
);
}
let angularWarningShown = false;
function checkAngularAndWarnOnce() {
if (!window.ng && !angularWarningShown) {
console.warn(
"Angular plugin: No Angular instance (window.ng) detected or Angular is not in development mode. Component detection features will not be available."
);
angularWarningShown = true;
}
}
function getAngularComponentHierarchy(element) {
if (!window.ng || !window.ng.getComponent) {
return [];
}
const components = [];
let currentElement = element;
const maxComponents = 3;
while (currentElement && components.length < maxComponents) {
try {
const componentInstance = window.ng.getComponent(currentElement);
if (componentInstance) {
let componentName = componentInstance.constructor.name;
if (componentName.startsWith("_")) {
componentName = componentName.substring(1);
}
if (componentName && componentName !== "Object") {
if (!components.some((c) => c.name === componentName)) {
components.push({ name: componentName });
}
}
}
} catch (e) {
}
if (currentElement.parentElement && currentElement.parentElement !== document.body) {
currentElement = currentElement.parentElement;
} else {
break;
}
}
return components;
}
function getSelectedElementAnnotation(element) {
checkAngularAndWarnOnce();
if (!element) {
return { annotation: null };
}
const hierarchy = getAngularComponentHierarchy(element);
if (hierarchy.length > 0 && hierarchy[0]) {
return {
annotation: `${hierarchy[0].name}`
};
}
return { annotation: null };
}
function getSelectedElementsPrompt(elements) {
checkAngularAndWarnOnce();
if (!elements || elements.length === 0) {
return null;
}
const selectedComponentHierarchies = elements.map(
(e) => getAngularComponentHierarchy(e)
);
if (selectedComponentHierarchies.some((h) => h.length > 0)) {
const content = `This is additional information on the elements that the user selected. Use this information to find the correct element in the codebase.
${selectedComponentHierarchies.map((h, index) => {
const hierarchyString = h.length === 0 ? "No Angular component detected for this element" : `Angular component tree (from closest to farthest, ${h.length} closest element${h.length > 1 ? "s" : ""}): ${h.map((c) => `{name: ${c.name}}`).join(" child of ")}`;
return `
<element index="${index + 1}">
${hierarchyString}
</element>
`;
}).join("")}
`;
return content;
}
return null;
}
const AngularPlugin = {
displayName: "Angular",
description: "This toolbar adds additional information and metadata for apps using Angular as a UI framework",
iconSvg: /* @__PURE__ */ jsxRuntime.jsx(AngularLogo, {}),
pluginName: "angular",
onContextElementHover: getSelectedElementAnnotation,
onContextElementSelect: getSelectedElementAnnotation,
onPromptSend: (prompt) => {
const content = getSelectedElementsPrompt(prompt.contextElements);
if (!content) {
return { contextSnippets: [] };
}
return {
contextSnippets: [
{
promptContextName: "elements-angular-component-info",
content
}
]
};
},
onPromptTransmit: async (prompt) => {
console.log(
"[Angular Plugin] Final prompt being transmitted:",
prompt.substring(0, 200) + "..."
);
}
};
exports.AngularPlugin = AngularPlugin;