mirror of
https://github.com/getcompanion-ai/co-mono.git
synced 2026-04-16 07:04:25 +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
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import { html, icon } from "@mariozechner/mini-lit";
|
|
import { LitElement } from "lit";
|
|
import { property, state } from "lit/decorators.js";
|
|
import { Check, Copy } from "lucide";
|
|
import { i18n } from "../utils/i18n.js";
|
|
|
|
export class ConsoleBlock extends LitElement {
|
|
@property() content: string = "";
|
|
@property() variant: "default" | "error" = "default";
|
|
@state() private copied = false;
|
|
|
|
protected override createRenderRoot(): HTMLElement | DocumentFragment {
|
|
return this;
|
|
}
|
|
|
|
override connectedCallback(): void {
|
|
super.connectedCallback();
|
|
this.style.display = "block";
|
|
}
|
|
|
|
private async copy() {
|
|
try {
|
|
await navigator.clipboard.writeText(this.content || "");
|
|
this.copied = true;
|
|
setTimeout(() => {
|
|
this.copied = false;
|
|
}, 1500);
|
|
} catch (e) {
|
|
console.error("Copy failed", e);
|
|
}
|
|
}
|
|
|
|
override updated() {
|
|
// Auto-scroll to bottom on content changes
|
|
const container = this.querySelector(".console-scroll") as HTMLElement | null;
|
|
if (container) {
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|
|
}
|
|
|
|
override render() {
|
|
const isError = this.variant === "error";
|
|
const textClass = isError ? "text-destructive" : "text-foreground";
|
|
|
|
return html`
|
|
<div class="border border-border rounded-lg overflow-hidden">
|
|
<div class="flex items-center justify-between px-3 py-1.5 bg-muted border-b border-border">
|
|
<span class="text-xs text-muted-foreground font-mono">${i18n("console")}</span>
|
|
<button
|
|
@click=${() => this.copy()}
|
|
class="flex items-center gap-1 px-2 py-0.5 text-xs rounded hover:bg-accent text-muted-foreground hover:text-accent-foreground transition-colors"
|
|
title="${i18n("Copy output")}"
|
|
>
|
|
${this.copied ? icon(Check, "sm") : icon(Copy, "sm")}
|
|
${this.copied ? html`<span>${i18n("Copied!")}</span>` : ""}
|
|
</button>
|
|
</div>
|
|
<div class="console-scroll overflow-auto max-h-64">
|
|
<pre class="!bg-background !border-0 !rounded-none m-0 p-3 text-xs ${textClass} font-mono whitespace-pre-wrap">
|
|
${this.content || ""}</pre
|
|
>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Register custom element
|
|
if (!customElements.get("console-block")) {
|
|
customElements.define("console-block", ConsoleBlock);
|
|
}
|