107 lines
4.2 KiB
JavaScript
107 lines
4.2 KiB
JavaScript
import { icon } from "@mariozechner/mini-lit";
|
|
import { html } from "lit";
|
|
import { ref } from "lit/directives/ref.js";
|
|
import { ChevronsUpDown, ChevronUp, Loader } from "lucide";
|
|
// Registry of tool renderers
|
|
export const toolRenderers = new Map();
|
|
/**
|
|
* Register a custom tool renderer
|
|
*/
|
|
export function registerToolRenderer(toolName, renderer) {
|
|
toolRenderers.set(toolName, renderer);
|
|
}
|
|
/**
|
|
* Get a tool renderer by name
|
|
*/
|
|
export function getToolRenderer(toolName) {
|
|
return toolRenderers.get(toolName);
|
|
}
|
|
/**
|
|
* Helper to render a header for tool renderers
|
|
* Shows icon on left when complete/error, spinner on right when in progress
|
|
*/
|
|
export function renderHeader(state, toolIcon, text) {
|
|
const statusIcon = (iconComponent, color) => html `<span class="inline-block ${color}">${icon(iconComponent, "sm")}</span>`;
|
|
switch (state) {
|
|
case "inprogress":
|
|
return html `
|
|
<div class="flex items-center justify-between gap-2 text-sm text-muted-foreground">
|
|
<div class="flex items-center gap-2">
|
|
${statusIcon(toolIcon, "text-foreground")}
|
|
${text}
|
|
</div>
|
|
${statusIcon(Loader, "text-foreground animate-spin")}
|
|
</div>
|
|
`;
|
|
case "complete":
|
|
return html `
|
|
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
|
${statusIcon(toolIcon, "text-green-600 dark:text-green-500")}
|
|
${text}
|
|
</div>
|
|
`;
|
|
case "error":
|
|
return html `
|
|
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
|
${statusIcon(toolIcon, "text-destructive")}
|
|
${text}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
/**
|
|
* Helper to render a collapsible header for tool renderers
|
|
* Same as renderHeader but with a chevron button that toggles visibility of content
|
|
*/
|
|
export function renderCollapsibleHeader(state, toolIcon, text, contentRef, chevronRef, defaultExpanded = false) {
|
|
const statusIcon = (iconComponent, color) => html `<span class="inline-block ${color}">${icon(iconComponent, "sm")}</span>`;
|
|
const toggleContent = (e) => {
|
|
e.preventDefault();
|
|
const content = contentRef.value;
|
|
const chevron = chevronRef.value;
|
|
if (content && chevron) {
|
|
const isCollapsed = content.classList.contains("max-h-0");
|
|
if (isCollapsed) {
|
|
content.classList.remove("max-h-0");
|
|
content.classList.add("max-h-[2000px]", "mt-3");
|
|
// Show ChevronUp, hide ChevronsUpDown
|
|
const upIcon = chevron.querySelector(".chevron-up");
|
|
const downIcon = chevron.querySelector(".chevrons-up-down");
|
|
if (upIcon && downIcon) {
|
|
upIcon.classList.remove("hidden");
|
|
downIcon.classList.add("hidden");
|
|
}
|
|
}
|
|
else {
|
|
content.classList.remove("max-h-[2000px]", "mt-3");
|
|
content.classList.add("max-h-0");
|
|
// Show ChevronsUpDown, hide ChevronUp
|
|
const upIcon = chevron.querySelector(".chevron-up");
|
|
const downIcon = chevron.querySelector(".chevrons-up-down");
|
|
if (upIcon && downIcon) {
|
|
upIcon.classList.add("hidden");
|
|
downIcon.classList.remove("hidden");
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const toolIconColor = state === "complete"
|
|
? "text-green-600 dark:text-green-500"
|
|
: state === "error"
|
|
? "text-destructive"
|
|
: "text-foreground";
|
|
return html `
|
|
<button @click=${toggleContent} class="flex items-center justify-between gap-2 text-sm text-muted-foreground w-full text-left hover:text-foreground transition-colors cursor-pointer">
|
|
<div class="flex items-center gap-2">
|
|
${state === "inprogress" ? statusIcon(Loader, "text-foreground animate-spin") : ""}
|
|
${statusIcon(toolIcon, toolIconColor)}
|
|
${text}
|
|
</div>
|
|
<span class="inline-block text-muted-foreground" ${ref(chevronRef)}>
|
|
<span class="chevron-up ${defaultExpanded ? "" : "hidden"}">${icon(ChevronUp, "sm")}</span>
|
|
<span class="chevrons-up-down ${defaultExpanded ? "hidden" : ""}">${icon(ChevronsUpDown, "sm")}</span>
|
|
</span>
|
|
</button>
|
|
`;
|
|
}
|
|
//# sourceMappingURL=renderer-registry.js.map
|