Refactor artifacts renderer and add Console component

- 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
This commit is contained in:
Mario Zechner 2025-10-08 01:54:50 +02:00
parent a8159f504f
commit 8ec9805112
19 changed files with 716 additions and 526 deletions

View file

@ -4,33 +4,34 @@ import { i18n } from "../../utils/i18n.js";
import type { ToolRenderer } from "../types.js";
export class DefaultRenderer implements ToolRenderer {
renderParams(params: any, isStreaming?: boolean): TemplateResult {
let text: string;
let isJson = false;
render(params: any | undefined, result: ToolResultMessage | undefined, isStreaming?: boolean): TemplateResult {
// Show result if available
if (result) {
const text = result.output || i18n("(no output)");
return html`<div class="text-sm text-muted-foreground whitespace-pre-wrap font-mono">${text}</div>`;
}
try {
text = JSON.stringify(JSON.parse(params), null, 2);
isJson = true;
} catch {
// Show params
if (params) {
let text: string;
try {
text = JSON.stringify(params, null, 2);
isJson = true;
text = JSON.stringify(JSON.parse(params), null, 2);
} catch {
text = String(params);
try {
text = JSON.stringify(params, null, 2);
} catch {
text = String(params);
}
}
if (isStreaming && (!text || text === "{}" || text === "null")) {
return html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool parameters...")}</div>`;
}
return html`<console-block .content=${text}></console-block>`;
}
if (isStreaming && (!text || text === "{}" || text === "null")) {
return html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool parameters...")}</div>`;
}
return html`<console-block .content=${text}></console-block>`;
}
renderResult(_params: any, result: ToolResultMessage): TemplateResult {
// Just show the output field - that's what was sent to the LLM
const text = result.output || i18n("(no output)");
return html`<div class="text-sm text-muted-foreground whitespace-pre-wrap font-mono">${text}</div>`;
// No params or result yet
return html`<div class="text-sm text-muted-foreground">${i18n("Preparing tool...")}</div>`;
}
}