getcompanion-ai/co-mono
1
0
Fork 0
mirror of https://github.com/getcompanion-ai/co-mono.git synced 2026-04-21 07:02:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor artifacts renderer and add Console component

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

59
packages/web-ui/src/tools/renderers/CalculateRenderer.ts
View file

@ -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..."));
}
}