mirror of
https://github.com/getcompanion-ai/co-mono.git
synced 2026-04-19 14:01:15 +00:00
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
parent
a8159f504f
commit
8ec9805112
19 changed files with 716 additions and 526 deletions
|
|
@ -1,6 +1,8 @@
|
|||
import { html, type TemplateResult } from "@mariozechner/mini-lit";
|
||||
import type { ToolResultMessage } from "@mariozechner/pi-ai";
|
||||
import { SquareTerminal } from "lucide";
|
||||
import { i18n } from "../../utils/i18n.js";
|
||||
import { renderHeader } from "../renderer-registry.js";
|
||||
import type { ToolRenderer } from "../types.js";
|
||||
|
||||
interface BashParams {
|
||||
|
|
@ -9,37 +11,32 @@ interface BashParams {
|
|||
|
||||
// Bash tool has undefined details (only uses output)
|
||||
export class BashRenderer implements ToolRenderer<BashParams, undefined> {
|
||||
renderParams(params: BashParams, isStreaming?: boolean): TemplateResult {
|
||||
if (isStreaming && (!params.command || params.command.length === 0)) {
|
||||
return html`<div class="text-sm text-muted-foreground">${i18n("Writing command...")}</div>`;
|
||||
}
|
||||
render(params: BashParams | undefined, result: ToolResultMessage<undefined> | undefined): TemplateResult {
|
||||
const state = result ? (result.isError ? "error" : "complete") : "inprogress";
|
||||
|
||||
return html`
|
||||
<div class="text-sm text-muted-foreground">
|
||||
<span>${i18n("Running command:")}</span>
|
||||
<code class="ml-1 px-1.5 py-0.5 bg-muted rounded text-xs font-mono">${params.command}</code>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderResult(_params: BashParams, result: ToolResultMessage<undefined>): TemplateResult {
|
||||
const output = result.output || "";
|
||||
const isError = result.isError === true;
|
||||
|
||||
if (isError) {
|
||||
// With result: show command + output
|
||||
if (result && params?.command) {
|
||||
const output = result.output || "";
|
||||
const combined = output ? `> ${params.command}\n\n${output}` : `> ${params.command}`;
|
||||
return html`
|
||||
<div class="text-sm">
|
||||
<div class="text-destructive font-medium mb-1">${i18n("Command failed:")}</div>
|
||||
<pre class="text-xs font-mono text-destructive bg-destructive/10 p-2 rounded overflow-x-auto">${output}</pre>
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, SquareTerminal, i18n("Running command..."))}
|
||||
<console-block .content=${combined} .variant=${result.isError ? "error" : "default"}></console-block>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Display the command output
|
||||
return html`
|
||||
<div class="text-sm">
|
||||
<pre class="text-xs font-mono text-foreground bg-muted/50 p-2 rounded overflow-x-auto">${output}</pre>
|
||||
</div>
|
||||
`;
|
||||
// Just params (streaming or waiting)
|
||||
if (params?.command) {
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, SquareTerminal, i18n("Running command..."))}
|
||||
<console-block .content=${`> ${params.command}`}></console-block>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// No params yet
|
||||
return renderHeader(state, SquareTerminal, i18n("Waiting for command..."));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { html, type TemplateResult } from "@mariozechner/mini-lit";
|
||||
import type { ToolResultMessage } from "@mariozechner/pi-ai";
|
||||
import { Calculator } from "lucide";
|
||||
import { i18n } from "../../utils/i18n.js";
|
||||
import { renderHeader } from "../renderer-registry.js";
|
||||
import type { ToolRenderer } from "../types.js";
|
||||
|
||||
interface CalculateParams {
|
||||
|
|
@ -9,41 +11,38 @@ interface CalculateParams {
|
|||
|
||||
// Calculate tool has undefined details (only uses output)
|
||||
export class CalculateRenderer implements ToolRenderer<CalculateParams, undefined> {
|
||||
renderParams(params: CalculateParams, isStreaming?: boolean): TemplateResult {
|
||||
if (isStreaming && !params.expression) {
|
||||
return html`<div class="text-sm text-muted-foreground">${i18n("Writing expression...")}</div>`;
|
||||
render(params: CalculateParams | undefined, result: ToolResultMessage<undefined> | undefined): TemplateResult {
|
||||
const state = result ? (result.isError ? "error" : "complete") : "inprogress";
|
||||
|
||||
// Full params + full result
|
||||
if (result && params?.expression) {
|
||||
const output = result.output || "";
|
||||
|
||||
// Error: show expression in header, error below
|
||||
if (result.isError) {
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, Calculator, params.expression)}
|
||||
<div class="text-sm text-destructive">${output}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Success: show expression = result in header
|
||||
return renderHeader(state, Calculator, `${params.expression} = ${output}`);
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="text-sm text-muted-foreground">
|
||||
<span>${i18n("Calculating")}</span>
|
||||
<code class="mx-1 px-1.5 py-0.5 bg-muted rounded text-xs font-mono">${params.expression}</code>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderResult(_params: CalculateParams, result: ToolResultMessage<undefined>): TemplateResult {
|
||||
// Parse the output to make it look nicer
|
||||
const output = result.output || "";
|
||||
const isError = result.isError === true;
|
||||
|
||||
if (isError) {
|
||||
return html`<div class="text-sm text-destructive">${output}</div>`;
|
||||
// Full params, no result: just show header with expression in it
|
||||
if (params?.expression) {
|
||||
return renderHeader(state, Calculator, `${i18n("Calculating")} ${params.expression}`);
|
||||
}
|
||||
|
||||
// Try to split on = to show expression and result separately
|
||||
const parts = output.split(" = ");
|
||||
if (parts.length === 2) {
|
||||
return html`
|
||||
<div class="text-sm font-mono">
|
||||
<span class="text-muted-foreground">${parts[0]}</span>
|
||||
<span class="text-muted-foreground mx-1">=</span>
|
||||
<span class="text-foreground font-semibold">${parts[1]}</span>
|
||||
</div>
|
||||
`;
|
||||
// Partial params (empty expression), no result
|
||||
if (params && !params.expression) {
|
||||
return renderHeader(state, Calculator, i18n("Writing expression..."));
|
||||
}
|
||||
|
||||
// Fallback to showing the whole output
|
||||
return html`<div class="text-sm font-mono text-foreground">${output}</div>`;
|
||||
// No params, no result
|
||||
return renderHeader(state, Calculator, i18n("Waiting for expression..."));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { html, type TemplateResult } from "@mariozechner/mini-lit";
|
||||
import type { ToolResultMessage } from "@mariozechner/pi-ai";
|
||||
import { Clock } from "lucide";
|
||||
import { i18n } from "../../utils/i18n.js";
|
||||
import { renderHeader } from "../renderer-registry.js";
|
||||
import type { ToolRenderer } from "../types.js";
|
||||
|
||||
interface GetCurrentTimeParams {
|
||||
|
|
@ -9,31 +11,59 @@ interface GetCurrentTimeParams {
|
|||
|
||||
// GetCurrentTime tool has undefined details (only uses output)
|
||||
export class GetCurrentTimeRenderer implements ToolRenderer<GetCurrentTimeParams, undefined> {
|
||||
renderParams(params: GetCurrentTimeParams, isStreaming?: boolean): TemplateResult {
|
||||
if (params.timezone) {
|
||||
return html`
|
||||
<div class="text-sm text-muted-foreground">
|
||||
<span>${i18n("Getting current time in")}</span>
|
||||
<code class="mx-1 px-1.5 py-0.5 bg-muted rounded text-xs font-mono">${params.timezone}</code>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
return html`
|
||||
<div class="text-sm text-muted-foreground">
|
||||
<span>${i18n("Getting current date and time")}${isStreaming ? "..." : ""}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
render(params: GetCurrentTimeParams | undefined, result: ToolResultMessage<undefined> | undefined): TemplateResult {
|
||||
const state = result ? (result.isError ? "error" : "complete") : "inprogress";
|
||||
|
||||
renderResult(_params: GetCurrentTimeParams, result: ToolResultMessage<undefined>): TemplateResult {
|
||||
const output = result.output || "";
|
||||
const isError = result.isError === true;
|
||||
// Full params + full result
|
||||
if (result && params) {
|
||||
const output = result.output || "";
|
||||
const headerText = params.timezone
|
||||
? `${i18n("Getting current time in")} ${params.timezone}`
|
||||
: i18n("Getting current date and time");
|
||||
|
||||
if (isError) {
|
||||
return html`<div class="text-sm text-destructive">${output}</div>`;
|
||||
// Error: show header, error below
|
||||
if (result.isError) {
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, Clock, headerText)}
|
||||
<div class="text-sm text-destructive">${output}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Success: show time in header
|
||||
return renderHeader(state, Clock, `${headerText}: ${output}`);
|
||||
}
|
||||
|
||||
// Display the date/time result
|
||||
return html`<div class="text-sm font-mono text-foreground">${output}</div>`;
|
||||
// Full result, no params
|
||||
if (result) {
|
||||
const output = result.output || "";
|
||||
|
||||
// Error: show header, error below
|
||||
if (result.isError) {
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, Clock, i18n("Getting current date and time"))}
|
||||
<div class="text-sm text-destructive">${output}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Success: show time in header
|
||||
return renderHeader(state, Clock, `${i18n("Getting current date and time")}: ${output}`);
|
||||
}
|
||||
|
||||
// Full params, no result: show timezone info in header
|
||||
if (params?.timezone) {
|
||||
return renderHeader(state, Clock, `${i18n("Getting current time in")} ${params.timezone}`);
|
||||
}
|
||||
|
||||
// Partial params (no timezone) or empty params, no result
|
||||
if (params) {
|
||||
return renderHeader(state, Clock, i18n("Getting current date and time"));
|
||||
}
|
||||
|
||||
// No params, no result
|
||||
return renderHeader(state, Clock, i18n("Getting time..."));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue