mirror of
https://github.com/getcompanion-ai/co-mono.git
synced 2026-04-19 13:01:41 +00:00
8ec9805112
- Extract ArtifactsToolRenderer from ArtifactsPanel into standalone renderer - Fix ChatPanel to register ArtifactsToolRenderer instead of panel - Implement command-specific rendering logic (create/update/rewrite/get/logs/delete) - Create reusable Console component with copy button and autoscroll toggle - Replace custom console implementation with ExpandableSection and Console - Fix Lit reactivity for HtmlArtifact logs using spread operator - Add Lucide icons (FileCode2, ChevronsDown, Lock) for UI consistency - Follow skill.ts patterns with renderHeader and state handling - Add i18n strings for all artifact actions and console features
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { icon } from "@mariozechner/mini-lit";
|
|
import { html, LitElement, type TemplateResult } from "lit";
|
|
import { customElement, property, state } from "lit/decorators.js";
|
|
import { ChevronDown, ChevronRight } from "lucide";
|
|
|
|
/**
|
|
* Reusable expandable section component for tool renderers.
|
|
* Captures children in connectedCallback and re-renders them in the details area.
|
|
*/
|
|
@customElement("expandable-section")
|
|
export class ExpandableSection extends LitElement {
|
|
@property() summary!: string;
|
|
@property({ type: Boolean }) defaultExpanded = false;
|
|
@state() private expanded = false;
|
|
private capturedChildren: Node[] = [];
|
|
|
|
protected createRenderRoot() {
|
|
return this; // light DOM
|
|
}
|
|
|
|
override connectedCallback() {
|
|
super.connectedCallback();
|
|
// Capture children before first render
|
|
this.capturedChildren = Array.from(this.childNodes);
|
|
// Clear children (we'll re-insert them in render)
|
|
this.innerHTML = "";
|
|
this.expanded = this.defaultExpanded;
|
|
}
|
|
|
|
override render(): TemplateResult {
|
|
return html`
|
|
<div>
|
|
<button
|
|
@click=${() => {
|
|
this.expanded = !this.expanded;
|
|
}}
|
|
class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors w-full text-left"
|
|
>
|
|
${icon(this.expanded ? ChevronDown : ChevronRight, "sm")}
|
|
<span>${this.summary}</span>
|
|
</button>
|
|
${this.expanded ? html`<div class="mt-2">${this.capturedChildren}</div>` : ""}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|