117 lines
3.6 KiB
TypeScript
117 lines
3.6 KiB
TypeScript
import { html, icon, type TemplateResult } from "@mariozechner/mini-lit";
|
|
import type { Ref } from "lit/directives/ref.js";
|
|
import { ref } from "lit/directives/ref.js";
|
|
import { ChevronRight, Loader } from "lucide";
|
|
import type { ToolRenderer } from "./types.js";
|
|
|
|
// Registry of tool renderers
|
|
export const toolRenderers = new Map<string, ToolRenderer>();
|
|
|
|
/**
|
|
* Register a custom tool renderer
|
|
*/
|
|
export function registerToolRenderer(toolName: string, renderer: ToolRenderer): void {
|
|
toolRenderers.set(toolName, renderer);
|
|
}
|
|
|
|
/**
|
|
* Get a tool renderer by name
|
|
*/
|
|
export function getToolRenderer(toolName: string): ToolRenderer | undefined {
|
|
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: "inprogress" | "complete" | "error",
|
|
toolIcon: any,
|
|
text: string | TemplateResult,
|
|
): TemplateResult {
|
|
const statusIcon = (iconComponent: any, color: string) =>
|
|
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: "inprogress" | "complete" | "error",
|
|
toolIcon: any,
|
|
text: string | TemplateResult,
|
|
contentRef: Ref<HTMLElement>,
|
|
chevronRef: Ref<HTMLElement>,
|
|
defaultExpanded = false,
|
|
): TemplateResult {
|
|
const statusIcon = (iconComponent: any, color: string) =>
|
|
html`<span class="inline-block ${color}">${icon(iconComponent, "sm")}</span>`;
|
|
|
|
const toggleContent = (e: Event) => {
|
|
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");
|
|
chevron.classList.add("rotate-90");
|
|
} else {
|
|
content.classList.remove("max-h-[2000px]", "mt-3");
|
|
content.classList.add("max-h-0");
|
|
chevron.classList.remove("rotate-90");
|
|
}
|
|
}
|
|
};
|
|
|
|
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 transition-transform duration-300 ${defaultExpanded ? "rotate-90" : ""}" ${ref(chevronRef)}>
|
|
${icon(ChevronRight, "sm")}
|
|
</span>
|
|
</button>
|
|
`;
|
|
}
|