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

Make renderHeader and renderCollapsibleHeader accept string | TemplateResult

Browse source 
- Update renderHeader and renderCollapsibleHeader in renderer-registry.ts to accept `text: string | TemplateResult`
- Remove duplicated renderCollapsibleHeaderWithPill helper in artifacts-tool-renderer.ts
- Update all artifact renderer calls to use renderHeaderWithPill() inline
- Remove all separate pill rendering below headers

This allows artifact pills to be rendered inline with header text without code duplication.
This commit is contained in:
Mario Zechner 2025-10-08 14:12:02 +02:00
parent 547be7ce37
commit 58b9c36268
4 changed files with 84 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/web-ui/src/tools/artifacts/ArtifactPill.ts
View file

@ -10,14 +10,14 @@ export function ArtifactPill(filename: string, artifactsPanel?: ArtifactsPanel):
};
return html`
<div
class="inline-flex items-center gap-2 px-2 py-1 text-xs bg-muted/50 border border-border rounded ${
<span
class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-muted/50 border border-border rounded ${
artifactsPanel ? "cursor-pointer hover:bg-muted transition-colors" : ""
}"
@click=${artifactsPanel ? handleClick : null}
>
${icon(FileCode2, "sm")}
<span class="font-mono text-foreground">${filename}</span>
</div>
<span class="text-foreground">${filename}</span>
</span>
`;
}

40
packages/web-ui/src/tools/artifacts/artifacts-tool-renderer.ts
View file

@ -1,8 +1,8 @@
import { Diff, html, type TemplateResult } from "@mariozechner/mini-lit";
import { Diff, html, icon, iconDOM, type TemplateResult } from "@mariozechner/mini-lit";
import "@mariozechner/mini-lit/dist/CodeBlock.js";
import type { ToolResultMessage } from "@mariozechner/pi-ai";
import { createRef, ref } from "lit/directives/ref.js";
import { FileCode2 } from "lucide";
import { ChevronDown, ChevronRight, FileCode2, Loader } from "lucide";
import "../../components/ConsoleBlock.js";
import { i18n } from "../../utils/i18n.js";
import { renderCollapsibleHeader, renderHeader } from "../renderer-registry.js";
@ -74,9 +74,12 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
return labels[command] || { streaming: i18n("Processing artifact"), complete: i18n("Processed artifact") };
};
// Helper to render artifact pill if filename present
const renderPill = (filename?: string): TemplateResult | string => {
return filename ? ArtifactPill(filename, this.artifactsPanel) : "";
// Helper to render header text with inline artifact pill
const renderHeaderWithPill = (labelText: string, filename?: string): TemplateResult => {
if (filename) {
return html`<span>${labelText} ${ArtifactPill(filename, this.artifactsPanel)}</span>`;
}
return html`<span>${labelText}</span>`;
};
// Error handling
@ -96,8 +99,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
return html`
<div>
${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
${content ? html`<code-block .code=${content} language=${getLanguageFromFilename(filename)}></code-block>` : ""}
${
@ -132,8 +134,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
const fileContent = result.output || i18n("(no output)");
return html`
<div>
${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
<code-block .code=${fileContent} language=${getLanguageFromFilename(filename)}></code-block>
</div>
@ -146,8 +147,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
const logs = result.output || i18n("(no output)");
return html`
<div>
${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
<console-block .content=${logs}></console-block>
</div>
@ -163,8 +163,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
return html`
<div>
${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
${codeContent ? html`<code-block .code=${codeContent} language=${getLanguageFromFilename(filename)}></code-block>` : ""}
${isHtml && logs ? html`<console-block .content=${logs}></console-block>` : ""}
@ -176,8 +175,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
// For DELETE, just show header
return html`
<div class="space-y-3">
${renderHeader(state, FileCode2, headerText)}
${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
${renderHeader(state, FileCode2, renderHeaderWithPill(headerText, filename))}
</div>
`;
}
@ -200,8 +198,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
case "rewrite":
return html`
<div>
${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
${
content
@ -215,8 +212,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
case "update":
return html`
<div>
${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
${
old_str !== undefined && new_str !== undefined
@ -231,8 +227,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
case "logs":
return html`
<div>
${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300"></div>
</div>
`;
@ -241,8 +236,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
default:
return html`
<div>
${renderHeader(state, FileCode2, headerText)}
${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
${renderHeader(state, FileCode2, renderHeaderWithPill(headerText, filename))}
</div>
`;
}