mirror of
https://github.com/getcompanion-ai/co-mono.git
synced 2026-04-17 01:04:36 +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
93
packages/web-ui/src/tools/artifacts/Console.ts
Normal file
93
packages/web-ui/src/tools/artifacts/Console.ts
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
import { icon } from "@mariozechner/mini-lit";
|
||||
import "@mariozechner/mini-lit/dist/CopyButton.js";
|
||||
import { html, LitElement, type TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { createRef, type Ref, ref } from "lit/directives/ref.js";
|
||||
import { repeat } from "lit/directives/repeat.js";
|
||||
import { ChevronDown, ChevronRight, ChevronsDown, Lock } from "lucide";
|
||||
import { i18n } from "../../utils/i18n.js";
|
||||
|
||||
interface LogEntry {
|
||||
type: "log" | "error";
|
||||
text: string;
|
||||
}
|
||||
|
||||
@customElement("artifact-console")
|
||||
export class Console extends LitElement {
|
||||
@property({ attribute: false }) logs: LogEntry[] = [];
|
||||
@state() private expanded = false;
|
||||
@state() private autoscroll = true;
|
||||
private logsContainerRef: Ref<HTMLDivElement> = createRef();
|
||||
|
||||
protected createRenderRoot() {
|
||||
return this; // light DOM
|
||||
}
|
||||
|
||||
override updated() {
|
||||
// Autoscroll to bottom when new logs arrive
|
||||
if (this.autoscroll && this.expanded && this.logsContainerRef.value) {
|
||||
this.logsContainerRef.value.scrollTop = this.logsContainerRef.value.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
private getLogsText(): string {
|
||||
return this.logs.map((l) => `[${l.type}] ${l.text}`).join("\n");
|
||||
}
|
||||
|
||||
override render(): TemplateResult {
|
||||
const errorCount = this.logs.filter((l) => l.type === "error").length;
|
||||
const summary =
|
||||
errorCount > 0
|
||||
? `${i18n("console")} (${errorCount} ${errorCount === 1 ? "error" : "errors"})`
|
||||
: `${i18n("console")} (${this.logs.length})`;
|
||||
|
||||
return html`
|
||||
<div class="border-t border-border p-2">
|
||||
<div class="flex items-center gap-2 w-full">
|
||||
<button
|
||||
@click=${() => {
|
||||
this.expanded = !this.expanded;
|
||||
}}
|
||||
class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors flex-1 text-left"
|
||||
>
|
||||
${icon(this.expanded ? ChevronDown : ChevronRight, "sm")}
|
||||
<span>${summary}</span>
|
||||
</button>
|
||||
${
|
||||
this.expanded
|
||||
? html`
|
||||
<button
|
||||
@click=${() => {
|
||||
this.autoscroll = !this.autoscroll;
|
||||
}}
|
||||
class="p-1 rounded transition-colors ${this.autoscroll ? "bg-accent text-accent-foreground" : "hover:bg-muted"}"
|
||||
title=${this.autoscroll ? i18n("Autoscroll enabled") : i18n("Autoscroll disabled")}
|
||||
>
|
||||
${icon(this.autoscroll ? ChevronsDown : Lock, "sm")}
|
||||
</button>
|
||||
<copy-button .text=${this.getLogsText()} title=${i18n("Copy logs")} .showText=${false} class="!bg-transparent hover:!bg-accent"></copy-button>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
${
|
||||
this.expanded
|
||||
? html`
|
||||
<div class="max-h-48 overflow-y-auto space-y-1 mt-2" ${ref(this.logsContainerRef)}>
|
||||
${repeat(
|
||||
this.logs,
|
||||
(_log, index) => index,
|
||||
(log) => html`
|
||||
<div class="text-xs font-mono ${log.type === "error" ? "text-destructive" : "text-muted-foreground"}">
|
||||
[${log.type}] ${log.text}
|
||||
</div>
|
||||
`,
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -9,6 +9,8 @@ import type { Attachment } from "../../utils/attachment-utils.js";
|
|||
import { i18n } from "../../utils/i18n.js";
|
||||
import "../../components/SandboxedIframe.js";
|
||||
import { ArtifactElement } from "./ArtifactElement.js";
|
||||
import type { Console } from "./Console.js";
|
||||
import "./Console.js";
|
||||
|
||||
@customElement("html-artifact")
|
||||
export class HtmlArtifact extends ArtifactElement {
|
||||
|
|
@ -22,14 +24,12 @@ export class HtmlArtifact extends ArtifactElement {
|
|||
|
||||
// Refs for DOM elements
|
||||
private sandboxIframeRef: Ref<SandboxIframe> = createRef();
|
||||
private consoleLogsRef: Ref<HTMLDivElement> = createRef();
|
||||
private consoleButtonRef: Ref<HTMLButtonElement> = createRef();
|
||||
private consoleRef: Ref<Console> = createRef();
|
||||
|
||||
// Store message handler so we can remove it
|
||||
private messageHandler?: (e: MessageEvent) => void;
|
||||
|
||||
@state() private viewMode: "preview" | "code" = "preview";
|
||||
@state() private consoleOpen = false;
|
||||
|
||||
private setViewMode(mode: "preview" | "code") {
|
||||
this.viewMode = mode;
|
||||
|
|
@ -62,13 +62,9 @@ export class HtmlArtifact extends ArtifactElement {
|
|||
if (oldValue !== value) {
|
||||
// Reset logs when content changes
|
||||
this.logs = [];
|
||||
if (this.consoleLogsRef.value) {
|
||||
this.consoleLogsRef.value.innerHTML = "";
|
||||
}
|
||||
this.requestUpdate();
|
||||
// Execute content in sandbox if it exists
|
||||
if (this.sandboxIframeRef.value && value) {
|
||||
this.updateConsoleButton();
|
||||
this.executeContent(value);
|
||||
}
|
||||
}
|
||||
|
|
@ -95,11 +91,15 @@ export class HtmlArtifact extends ArtifactElement {
|
|||
if (e.data.sandboxId !== sandboxId) return;
|
||||
|
||||
if (e.data.type === "console") {
|
||||
this.logs.push({
|
||||
type: e.data.method === "error" ? "error" : "log",
|
||||
text: e.data.text,
|
||||
});
|
||||
this.updateConsoleButton();
|
||||
// Create new array reference for Lit reactivity
|
||||
this.logs = [
|
||||
...this.logs,
|
||||
{
|
||||
type: e.data.method === "error" ? "error" : "log",
|
||||
text: e.data.text,
|
||||
},
|
||||
];
|
||||
this.requestUpdate(); // Re-render to show console
|
||||
}
|
||||
};
|
||||
window.addEventListener("message", this.messageHandler);
|
||||
|
|
@ -137,39 +137,6 @@ export class HtmlArtifact extends ArtifactElement {
|
|||
}
|
||||
}
|
||||
|
||||
private updateConsoleButton() {
|
||||
const button = this.consoleButtonRef.value;
|
||||
if (!button) return;
|
||||
|
||||
const errorCount = this.logs.filter((l) => l.type === "error").length;
|
||||
const text =
|
||||
errorCount > 0
|
||||
? `${i18n("console")} <span class="text-destructive">${errorCount} errors</span>`
|
||||
: `${i18n("console")} (${this.logs.length})`;
|
||||
button.innerHTML = `<span>${text}</span><span>${this.consoleOpen ? "▼" : "▶"}</span>`;
|
||||
}
|
||||
|
||||
private toggleConsole() {
|
||||
this.consoleOpen = !this.consoleOpen;
|
||||
this.requestUpdate();
|
||||
|
||||
// Populate console logs if opening
|
||||
if (this.consoleOpen) {
|
||||
requestAnimationFrame(() => {
|
||||
if (this.consoleLogsRef.value) {
|
||||
// Populate with existing logs
|
||||
this.consoleLogsRef.value.innerHTML = "";
|
||||
this.logs.forEach((log) => {
|
||||
const logEl = document.createElement("div");
|
||||
logEl.className = `text-xs font-mono ${log.type === "error" ? "text-destructive" : "text-muted-foreground"}`;
|
||||
logEl.textContent = `[${log.type}] ${log.text}`;
|
||||
this.consoleLogsRef.value!.appendChild(logEl);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public getLogs(): string {
|
||||
if (this.logs.length === 0) return i18n("No logs for {filename}").replace("{filename}", this.filename);
|
||||
return this.logs.map((l) => `[${l.type}] ${l.text}`).join("\n");
|
||||
|
|
@ -184,26 +151,7 @@ export class HtmlArtifact extends ArtifactElement {
|
|||
<sandbox-iframe class="flex-1" ${ref(this.sandboxIframeRef)}></sandbox-iframe>
|
||||
${
|
||||
this.logs.length > 0
|
||||
? html`
|
||||
<div class="border-t border-border">
|
||||
<button
|
||||
@click=${() => this.toggleConsole()}
|
||||
class="w-full px-3 py-1 text-xs text-left hover:bg-muted flex items-center justify-between"
|
||||
${ref(this.consoleButtonRef)}
|
||||
>
|
||||
<span
|
||||
>${i18n("console")}
|
||||
${
|
||||
this.logs.filter((l) => l.type === "error").length > 0
|
||||
? html`<span class="text-destructive">${this.logs.filter((l) => l.type === "error").length} errors</span>`
|
||||
: `(${this.logs.length})`
|
||||
}</span
|
||||
>
|
||||
<span>${this.consoleOpen ? "▼" : "▶"}</span>
|
||||
</button>
|
||||
${this.consoleOpen ? html` <div class="max-h-48 overflow-y-auto bg-muted/50 p-2" ${ref(this.consoleLogsRef)}></div> ` : ""}
|
||||
</div>
|
||||
`
|
||||
? html`<artifact-console .logs=${this.logs} ${ref(this.consoleRef)}></artifact-console>`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
209
packages/web-ui/src/tools/artifacts/artifacts-tool-renderer.ts
Normal file
209
packages/web-ui/src/tools/artifacts/artifacts-tool-renderer.ts
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
import { Diff, html, type TemplateResult } from "@mariozechner/mini-lit";
|
||||
import "@mariozechner/mini-lit/dist/CodeBlock.js";
|
||||
import type { ToolResultMessage } from "@mariozechner/pi-ai";
|
||||
import { FileCode2 } from "lucide";
|
||||
import "../../components/ConsoleBlock.js";
|
||||
import { i18n } from "../../utils/i18n.js";
|
||||
import { renderHeader } from "../renderer-registry.js";
|
||||
import type { ToolRenderer } from "../types.js";
|
||||
import type { ArtifactsParams } from "./artifacts.js";
|
||||
|
||||
// Helper to determine language for syntax highlighting
|
||||
function getLanguageFromFilename(filename?: string): string {
|
||||
if (!filename) return "text";
|
||||
const ext = filename.split(".").pop()?.toLowerCase();
|
||||
const languageMap: Record<string, string> = {
|
||||
js: "javascript",
|
||||
jsx: "javascript",
|
||||
ts: "typescript",
|
||||
tsx: "typescript",
|
||||
html: "html",
|
||||
css: "css",
|
||||
scss: "scss",
|
||||
json: "json",
|
||||
py: "python",
|
||||
md: "markdown",
|
||||
svg: "xml",
|
||||
xml: "xml",
|
||||
yaml: "yaml",
|
||||
yml: "yaml",
|
||||
sh: "bash",
|
||||
bash: "bash",
|
||||
sql: "sql",
|
||||
java: "java",
|
||||
c: "c",
|
||||
cpp: "cpp",
|
||||
cs: "csharp",
|
||||
go: "go",
|
||||
rs: "rust",
|
||||
php: "php",
|
||||
rb: "ruby",
|
||||
swift: "swift",
|
||||
kt: "kotlin",
|
||||
r: "r",
|
||||
};
|
||||
return languageMap[ext || ""] || "text";
|
||||
}
|
||||
|
||||
export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, undefined> {
|
||||
render(
|
||||
params: ArtifactsParams | undefined,
|
||||
result: ToolResultMessage<undefined> | undefined,
|
||||
isStreaming?: boolean,
|
||||
): TemplateResult {
|
||||
const state = result ? (result.isError ? "error" : "complete") : "inprogress";
|
||||
|
||||
// Helper to get command labels
|
||||
const getCommandLabels = (command: string): { streaming: string; complete: string } => {
|
||||
const labels: Record<string, { streaming: string; complete: string }> = {
|
||||
create: { streaming: i18n("Creating artifact"), complete: i18n("Created artifact") },
|
||||
update: { streaming: i18n("Updating artifact"), complete: i18n("Updated artifact") },
|
||||
rewrite: { streaming: i18n("Rewriting artifact"), complete: i18n("Rewrote artifact") },
|
||||
get: { streaming: i18n("Getting artifact"), complete: i18n("Got artifact") },
|
||||
delete: { streaming: i18n("Deleting artifact"), complete: i18n("Deleted artifact") },
|
||||
logs: { streaming: i18n("Getting logs"), complete: i18n("Got logs") },
|
||||
};
|
||||
return labels[command] || { streaming: i18n("Processing artifact"), complete: i18n("Processed artifact") };
|
||||
};
|
||||
|
||||
// Error handling
|
||||
if (result?.isError) {
|
||||
const command = params?.command;
|
||||
const filename = params?.filename;
|
||||
const labels = command
|
||||
? getCommandLabels(command)
|
||||
: { streaming: i18n("Processing artifact"), complete: i18n("Processed artifact") };
|
||||
const headerText = filename ? `${labels.streaming} ${filename}` : labels.streaming;
|
||||
|
||||
// For create/update/rewrite errors, show code block + console/error
|
||||
if (command === "create" || command === "update" || command === "rewrite") {
|
||||
const content = command === "update" ? params?.new_str || params?.old_str || "" : params?.content || "";
|
||||
|
||||
const isHtml = filename?.endsWith(".html");
|
||||
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, FileCode2, headerText)}
|
||||
${content ? html`<code-block .code=${content} language=${getLanguageFromFilename(filename)}></code-block>` : ""}
|
||||
${
|
||||
isHtml
|
||||
? html`<console-block .content=${result.output || i18n("An error occurred")} variant="error"></console-block>`
|
||||
: html`<div class="text-sm text-destructive">${result.output || i18n("An error occurred")}</div>`
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// For other errors, just show error message
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, FileCode2, headerText)}
|
||||
<div class="text-sm text-destructive">${result.output || i18n("An error occurred")}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Full params + result
|
||||
if (result && params) {
|
||||
const { command, filename, content } = params;
|
||||
const labels = command
|
||||
? getCommandLabels(command)
|
||||
: { streaming: i18n("Processing artifact"), complete: i18n("Processed artifact") };
|
||||
const headerText = filename ? `${labels.complete} ${filename}` : labels.complete;
|
||||
|
||||
// GET command: show code block with file content
|
||||
if (command === "get") {
|
||||
const fileContent = result.output || i18n("(no output)");
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, FileCode2, headerText)}
|
||||
<code-block .code=${fileContent} language=${getLanguageFromFilename(filename)}></code-block>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// LOGS command: show console block
|
||||
if (command === "logs") {
|
||||
const logs = result.output || i18n("(no output)");
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, FileCode2, headerText)}
|
||||
<console-block .content=${logs}></console-block>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// CREATE/UPDATE/REWRITE: always show code block, + console block for .html files
|
||||
if (command === "create" || command === "update" || command === "rewrite") {
|
||||
const codeContent = content || "";
|
||||
const isHtml = filename?.endsWith(".html");
|
||||
const logs = result.output || "";
|
||||
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, FileCode2, headerText)}
|
||||
${codeContent ? html`<code-block .code=${codeContent} language=${getLanguageFromFilename(filename)}></code-block>` : ""}
|
||||
${isHtml && logs ? html`<console-block .content=${logs}></console-block>` : ""}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// For DELETE, just show header
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, FileCode2, headerText)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Params only (streaming or waiting for result)
|
||||
if (params) {
|
||||
const { command, filename, content, old_str, new_str } = params;
|
||||
|
||||
// If no command yet
|
||||
if (!command) {
|
||||
return renderHeader(state, FileCode2, i18n("Preparing artifact..."));
|
||||
}
|
||||
|
||||
const labels = getCommandLabels(command);
|
||||
const headerText = filename ? `${labels.streaming} ${filename}` : labels.streaming;
|
||||
|
||||
// Render based on command type
|
||||
switch (command) {
|
||||
case "create":
|
||||
case "rewrite":
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, FileCode2, headerText)}
|
||||
${
|
||||
content
|
||||
? html`<code-block .code=${content} language=${getLanguageFromFilename(filename)} class="mt-2"></code-block>`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
|
||||
case "update":
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, FileCode2, headerText)}
|
||||
${
|
||||
old_str !== undefined && new_str !== undefined
|
||||
? Diff({ oldText: old_str, newText: new_str, className: "mt-2" })
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
|
||||
case "get":
|
||||
case "delete":
|
||||
case "logs":
|
||||
default:
|
||||
return renderHeader(state, FileCode2, headerText);
|
||||
}
|
||||
}
|
||||
|
||||
// No params or result yet
|
||||
return renderHeader(state, FileCode2, i18n("Preparing artifact..."));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Diff, icon } from "@mariozechner/mini-lit";
|
||||
import { Button, icon } from "@mariozechner/mini-lit";
|
||||
import { type AgentTool, type Message, StringEnum, type ToolCall, type ToolResultMessage } from "@mariozechner/pi-ai";
|
||||
import { type Static, Type } from "@sinclair/typebox";
|
||||
import { html, LitElement, type TemplateResult } from "lit";
|
||||
|
|
@ -7,14 +7,12 @@ import { createRef, type Ref, ref } from "lit/directives/ref.js";
|
|||
import { X } from "lucide";
|
||||
import type { Attachment } from "../../utils/attachment-utils.js";
|
||||
import { i18n } from "../../utils/i18n.js";
|
||||
import type { ToolRenderer } from "../types.js";
|
||||
import type { ArtifactElement } from "./ArtifactElement.js";
|
||||
import { HtmlArtifact } from "./HtmlArtifact.js";
|
||||
import { MarkdownArtifact } from "./MarkdownArtifact.js";
|
||||
import { SvgArtifact } from "./SvgArtifact.js";
|
||||
import { TextArtifact } from "./TextArtifact.js";
|
||||
import "@mariozechner/mini-lit/dist/MarkdownBlock.js";
|
||||
import "@mariozechner/mini-lit/dist/CodeBlock.js";
|
||||
|
||||
// Simple artifact model
|
||||
export interface Artifact {
|
||||
|
|
@ -38,13 +36,8 @@ const artifactsParamsSchema = Type.Object({
|
|||
});
|
||||
export type ArtifactsParams = Static<typeof artifactsParamsSchema>;
|
||||
|
||||
// Minimal helper to render plain text outputs consistently
|
||||
function plainOutput(text: string): TemplateResult {
|
||||
return html`<div class="text-xs text-muted-foreground whitespace-pre-wrap font-mono">${text}</div>`;
|
||||
}
|
||||
|
||||
@customElement("artifacts-panel")
|
||||
export class ArtifactsPanel extends LitElement implements ToolRenderer<ArtifactsParams, undefined> {
|
||||
export class ArtifactsPanel extends LitElement {
|
||||
@state() private _artifacts = new Map<string, Artifact>();
|
||||
@state() private _activeFilename: string | null = null;
|
||||
|
||||
|
|
@ -107,43 +100,6 @@ export class ArtifactsPanel extends LitElement implements ToolRenderer<Artifacts
|
|||
return "text";
|
||||
}
|
||||
|
||||
// Helper to determine language for syntax highlighting
|
||||
private getLanguageFromFilename(filename?: string): string {
|
||||
if (!filename) return "text";
|
||||
const ext = filename.split(".").pop()?.toLowerCase();
|
||||
const languageMap: Record<string, string> = {
|
||||
js: "javascript",
|
||||
jsx: "javascript",
|
||||
ts: "typescript",
|
||||
tsx: "typescript",
|
||||
html: "html",
|
||||
css: "css",
|
||||
scss: "scss",
|
||||
json: "json",
|
||||
py: "python",
|
||||
md: "markdown",
|
||||
svg: "xml",
|
||||
xml: "xml",
|
||||
yaml: "yaml",
|
||||
yml: "yaml",
|
||||
sh: "bash",
|
||||
bash: "bash",
|
||||
sql: "sql",
|
||||
java: "java",
|
||||
c: "c",
|
||||
cpp: "cpp",
|
||||
cs: "csharp",
|
||||
go: "go",
|
||||
rs: "rust",
|
||||
php: "php",
|
||||
rb: "ruby",
|
||||
swift: "swift",
|
||||
kt: "kotlin",
|
||||
r: "r",
|
||||
};
|
||||
return languageMap[ext || ""] || "text";
|
||||
}
|
||||
|
||||
// Get or create artifact element
|
||||
private getOrCreateArtifactElement(filename: string, content: string, title: string): ArtifactElement {
|
||||
let element = this.artifactElements.get(filename);
|
||||
|
|
@ -330,153 +286,6 @@ CRITICAL REMINDER FOR ALL ARTIFACTS:
|
|||
};
|
||||
}
|
||||
|
||||
// ToolRenderer implementation
|
||||
renderParams(params: ArtifactsParams, isStreaming?: boolean): TemplateResult {
|
||||
if (isStreaming && !params.command) {
|
||||
return html`<div class="text-sm text-muted-foreground">${i18n("Processing artifact...")}</div>`;
|
||||
}
|
||||
|
||||
let commandLabel = i18n("Processing");
|
||||
if (params.command) {
|
||||
switch (params.command) {
|
||||
case "create":
|
||||
commandLabel = i18n("Create");
|
||||
break;
|
||||
case "update":
|
||||
commandLabel = i18n("Update");
|
||||
break;
|
||||
case "rewrite":
|
||||
commandLabel = i18n("Rewrite");
|
||||
break;
|
||||
case "get":
|
||||
commandLabel = i18n("Get");
|
||||
break;
|
||||
case "delete":
|
||||
commandLabel = i18n("Delete");
|
||||
break;
|
||||
case "logs":
|
||||
commandLabel = i18n("Get logs");
|
||||
break;
|
||||
default:
|
||||
commandLabel = params.command.charAt(0).toUpperCase() + params.command.slice(1);
|
||||
}
|
||||
}
|
||||
const filename = params.filename || "";
|
||||
|
||||
switch (params.command) {
|
||||
case "create":
|
||||
return html`
|
||||
<div
|
||||
class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
|
||||
@click=${() => this.openArtifact(params.filename)}
|
||||
>
|
||||
<div>
|
||||
<span class="font-medium">${i18n("Create")}</span>
|
||||
<span class="text-muted-foreground ml-1">${filename}</span>
|
||||
</div>
|
||||
${
|
||||
params.content
|
||||
? html`<code-block
|
||||
.code=${params.content}
|
||||
language=${this.getLanguageFromFilename(params.filename)}
|
||||
class="mt-2"
|
||||
></code-block>`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
case "update":
|
||||
return html`
|
||||
<div
|
||||
class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
|
||||
@click=${() => this.openArtifact(params.filename)}
|
||||
>
|
||||
<div>
|
||||
<span class="font-medium">${i18n("Update")}</span>
|
||||
<span class="text-muted-foreground ml-1">${filename}</span>
|
||||
</div>
|
||||
${
|
||||
params.old_str !== undefined && params.new_str !== undefined
|
||||
? Diff({ oldText: params.old_str, newText: params.new_str, className: "mt-2" })
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
case "rewrite":
|
||||
return html`
|
||||
<div
|
||||
class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
|
||||
@click=${() => this.openArtifact(params.filename)}
|
||||
>
|
||||
<div>
|
||||
<span class="font-medium">${i18n("Rewrite")}</span>
|
||||
<span class="text-muted-foreground ml-1">${filename}</span>
|
||||
</div>
|
||||
${
|
||||
params.content
|
||||
? html`<code-block
|
||||
.code=${params.content}
|
||||
language=${this.getLanguageFromFilename(params.filename)}
|
||||
class="mt-2"
|
||||
></code-block>`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
case "get":
|
||||
return html`
|
||||
<div
|
||||
class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
|
||||
@click=${() => this.openArtifact(params.filename)}
|
||||
>
|
||||
<span class="font-medium">${i18n("Get")}</span>
|
||||
<span class="text-muted-foreground ml-1">${filename}</span>
|
||||
</div>
|
||||
`;
|
||||
case "delete":
|
||||
return html`
|
||||
<div
|
||||
class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
|
||||
@click=${() => this.openArtifact(params.filename)}
|
||||
>
|
||||
<span class="font-medium">${i18n("Delete")}</span>
|
||||
<span class="text-muted-foreground ml-1">${filename}</span>
|
||||
</div>
|
||||
`;
|
||||
case "logs":
|
||||
return html`
|
||||
<div
|
||||
class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
|
||||
@click=${() => this.openArtifact(params.filename)}
|
||||
>
|
||||
<span class="font-medium">${i18n("Get logs")}</span>
|
||||
<span class="text-muted-foreground ml-1">${filename}</span>
|
||||
</div>
|
||||
`;
|
||||
default:
|
||||
// Fallback for any command not yet handled during streaming
|
||||
return html`
|
||||
<div
|
||||
class="text-sm cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1"
|
||||
@click=${() => this.openArtifact(params.filename)}
|
||||
>
|
||||
<span class="font-medium">${commandLabel}</span>
|
||||
<span class="text-muted-foreground ml-1">${filename}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
renderResult(params: ArtifactsParams, result: ToolResultMessage<undefined>): TemplateResult {
|
||||
// Make result clickable to focus the referenced file when applicable
|
||||
const content = result.output || i18n("(no output)");
|
||||
return html`
|
||||
<div class="cursor-pointer hover:bg-muted/50 rounded-sm px-2 py-1" @click=${() => this.openArtifact(params.filename)}>
|
||||
${plainOutput(content)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Re-apply artifacts by scanning a message list (optional utility)
|
||||
public async reconstructFromMessages(messages: Array<Message | { role: "aborted" }>): Promise<void> {
|
||||
const toolCalls = new Map<string, ToolCall>();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export { ArtifactElement } from "./ArtifactElement.js";
|
||||
export { type Artifact, ArtifactsPanel, type ArtifactsParams } from "./artifacts.js";
|
||||
export { ArtifactsToolRenderer } from "./artifacts-tool-renderer.js";
|
||||
export { HtmlArtifact } from "./HtmlArtifact.js";
|
||||
export { MarkdownArtifact } from "./MarkdownArtifact.js";
|
||||
export { SvgArtifact } from "./SvgArtifact.js";
|
||||
|
|
|
|||
|
|
@ -11,25 +11,19 @@ registerToolRenderer("bash", new BashRenderer());
|
|||
const defaultRenderer = new DefaultRenderer();
|
||||
|
||||
/**
|
||||
* Render tool call parameters
|
||||
* Render tool - unified function that handles params, result, and streaming state
|
||||
*/
|
||||
export function renderToolParams(toolName: string, params: any, isStreaming?: boolean): TemplateResult {
|
||||
export function renderTool(
|
||||
toolName: string,
|
||||
params: any | undefined,
|
||||
result: ToolResultMessage | undefined,
|
||||
isStreaming?: boolean,
|
||||
): TemplateResult {
|
||||
const renderer = getToolRenderer(toolName);
|
||||
if (renderer) {
|
||||
return renderer.renderParams(params, isStreaming);
|
||||
return renderer.render(params, result, isStreaming);
|
||||
}
|
||||
return defaultRenderer.renderParams(params, isStreaming);
|
||||
}
|
||||
|
||||
/**
|
||||
* Render tool result
|
||||
*/
|
||||
export function renderToolResult(toolName: string, params: any, result: ToolResultMessage): TemplateResult {
|
||||
const renderer = getToolRenderer(toolName);
|
||||
if (renderer) {
|
||||
return renderer.renderResult(params, result);
|
||||
}
|
||||
return defaultRenderer.renderResult(params, result);
|
||||
return defaultRenderer.render(params, result, isStreaming);
|
||||
}
|
||||
|
||||
export { registerToolRenderer, getToolRenderer };
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { html, i18n, type TemplateResult } from "@mariozechner/mini-lit";
|
||||
import type { AgentTool, ToolResultMessage } from "@mariozechner/pi-ai";
|
||||
import { type Static, Type } from "@sinclair/typebox";
|
||||
import { Code } from "lucide";
|
||||
import { type SandboxFile, SandboxIframe, type SandboxResult } from "../components/SandboxedIframe.js";
|
||||
import type { Attachment } from "../utils/attachment-utils.js";
|
||||
|
||||
import { registerToolRenderer } from "./renderer-registry.js";
|
||||
import { registerToolRenderer, renderHeader } from "./renderer-registry.js";
|
||||
import type { ToolRenderer } from "./types.js";
|
||||
|
||||
// Execute JavaScript code with attachments using SandboxedIframe
|
||||
|
|
@ -92,6 +93,7 @@ export type JavaScriptReplToolResult = {
|
|||
};
|
||||
|
||||
const javascriptReplSchema = Type.Object({
|
||||
title: Type.String({ description: "Brief title describing what the code snippet tries to achieve" }),
|
||||
code: Type.String({ description: "JavaScript code to execute" }),
|
||||
});
|
||||
|
||||
|
|
@ -245,63 +247,76 @@ interface JavaScriptReplResult {
|
|||
}
|
||||
|
||||
export const javascriptReplRenderer: ToolRenderer<JavaScriptReplParams, JavaScriptReplResult> = {
|
||||
renderParams(params: JavaScriptReplParams, isStreaming?: boolean): TemplateResult {
|
||||
if (isStreaming && (!params.code || params.code.length === 0)) {
|
||||
return html`<div class="text-sm text-muted-foreground">Writing JavaScript code...</div>`;
|
||||
render(
|
||||
params: JavaScriptReplParams | undefined,
|
||||
result: ToolResultMessage<JavaScriptReplResult> | undefined,
|
||||
isStreaming?: boolean,
|
||||
): TemplateResult {
|
||||
// Determine status
|
||||
const state = result ? (result.isError ? "error" : "complete") : isStreaming ? "inprogress" : "inprogress";
|
||||
|
||||
// With result: show params + result
|
||||
if (result && params) {
|
||||
const output = result.output || "";
|
||||
const files = result.details?.files || [];
|
||||
|
||||
const attachments: Attachment[] = files.map((f, i) => {
|
||||
// Decode base64 content for text files to show in overlay
|
||||
let extractedText: string | undefined;
|
||||
const isTextBased =
|
||||
f.mimeType?.startsWith("text/") ||
|
||||
f.mimeType === "application/json" ||
|
||||
f.mimeType === "application/javascript" ||
|
||||
f.mimeType?.includes("xml");
|
||||
|
||||
if (isTextBased && f.contentBase64) {
|
||||
try {
|
||||
extractedText = atob(f.contentBase64);
|
||||
} catch (e) {
|
||||
console.warn("Failed to decode base64 content for", f.fileName);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
id: `repl-${Date.now()}-${i}`,
|
||||
type: f.mimeType?.startsWith("image/") ? "image" : "document",
|
||||
fileName: f.fileName || `file-${i}`,
|
||||
mimeType: f.mimeType || "application/octet-stream",
|
||||
size: f.size ?? 0,
|
||||
content: f.contentBase64,
|
||||
preview: f.mimeType?.startsWith("image/") ? f.contentBase64 : undefined,
|
||||
extractedText,
|
||||
};
|
||||
});
|
||||
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, Code, i18n("Executing JavaScript"))}
|
||||
<code-block .code=${params.code || ""} language="javascript"></code-block>
|
||||
${output ? html`<console-block .content=${output} .variant=${result.isError ? "error" : "default"}></console-block>` : ""}
|
||||
${
|
||||
attachments.length
|
||||
? html`<div class="flex flex-wrap gap-2">
|
||||
${attachments.map((att) => html`<attachment-tile .attachment=${att}></attachment-tile>`)}
|
||||
</div>`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="text-sm text-muted-foreground mb-2">${i18n("Executing JavaScript")}</div>
|
||||
<code-block .code=${params.code || ""} language="javascript"></code-block>
|
||||
`;
|
||||
},
|
||||
// Just params (streaming or waiting for result)
|
||||
if (params) {
|
||||
return html`
|
||||
<div class="space-y-3">
|
||||
${renderHeader(state, Code, i18n("Executing JavaScript"))}
|
||||
${params.code ? html`<code-block .code=${params.code} language="javascript"></code-block>` : ""}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderResult(_params: JavaScriptReplParams, result: ToolResultMessage<JavaScriptReplResult>): TemplateResult {
|
||||
// Console output is in the main output field, files are in details
|
||||
const output = result.output || "";
|
||||
const files = result.details?.files || [];
|
||||
|
||||
const attachments: Attachment[] = files.map((f, i) => {
|
||||
// Decode base64 content for text files to show in overlay
|
||||
let extractedText: string | undefined;
|
||||
const isTextBased =
|
||||
f.mimeType?.startsWith("text/") ||
|
||||
f.mimeType === "application/json" ||
|
||||
f.mimeType === "application/javascript" ||
|
||||
f.mimeType?.includes("xml");
|
||||
|
||||
if (isTextBased && f.contentBase64) {
|
||||
try {
|
||||
extractedText = atob(f.contentBase64);
|
||||
} catch (e) {
|
||||
console.warn("Failed to decode base64 content for", f.fileName);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
id: `repl-${Date.now()}-${i}`,
|
||||
type: f.mimeType?.startsWith("image/") ? "image" : "document",
|
||||
fileName: f.fileName || `file-${i}`,
|
||||
mimeType: f.mimeType || "application/octet-stream",
|
||||
size: f.size ?? 0,
|
||||
content: f.contentBase64,
|
||||
preview: f.mimeType?.startsWith("image/") ? f.contentBase64 : undefined,
|
||||
extractedText,
|
||||
};
|
||||
});
|
||||
|
||||
return html`
|
||||
<div class="flex flex-col gap-3">
|
||||
${output ? html`<console-block .content=${output}></console-block>` : ""}
|
||||
${
|
||||
attachments.length
|
||||
? html`<div class="flex flex-wrap gap-2">
|
||||
${attachments.map((att) => html`<attachment-tile .attachment=${att}></attachment-tile>`)}
|
||||
</div>`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
// No params or result yet
|
||||
return renderHeader(state, Code, i18n("Preparing JavaScript..."));
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { html, icon, type TemplateResult } from "@mariozechner/mini-lit";
|
||||
import { Loader } from "lucide";
|
||||
import type { ToolRenderer } from "./types.js";
|
||||
|
||||
// Registry of tool renderers
|
||||
|
|
@ -16,3 +18,39 @@ export function registerToolRenderer(toolName: string, renderer: ToolRenderer):
|
|||
export function getToolRenderer(toolName: string): ToolRenderer | undefined {
|
||||
return toolRenderers.get(toolName);
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper to render a header for tool renderers
|
||||
* Shows icon on left when complete/error, spinner on right when in progress
|
||||
*/
|
||||
export function renderHeader(state: "inprogress" | "complete" | "error", toolIcon: any, text: string): TemplateResult {
|
||||
const statusIcon = (iconComponent: any, color: string) =>
|
||||
html`<span class="inline-block ${color}">${icon(iconComponent, "sm")}</span>`;
|
||||
|
||||
switch (state) {
|
||||
case "inprogress":
|
||||
return html`
|
||||
<div class="flex items-center justify-between gap-2 text-sm text-muted-foreground">
|
||||
<div class="flex items-center gap-2">
|
||||
${statusIcon(toolIcon, "text-foreground")}
|
||||
<span>${text}</span>
|
||||
</div>
|
||||
${statusIcon(Loader, "text-foreground animate-spin")}
|
||||
</div>
|
||||
`;
|
||||
case "complete":
|
||||
return html`
|
||||
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
${statusIcon(toolIcon, "text-green-600 dark:text-green-500")}
|
||||
<span>${text}</span>
|
||||
</div>
|
||||
`;
|
||||
case "error":
|
||||
return html`
|
||||
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
${statusIcon(toolIcon, "text-destructive")}
|
||||
<span>${text}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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..."));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@ import type { ToolResultMessage } from "@mariozechner/pi-ai";
|
|||
import type { TemplateResult } from "lit";
|
||||
|
||||
export interface ToolRenderer<TParams = any, TDetails = any> {
|
||||
renderParams(params: TParams, isStreaming?: boolean): TemplateResult;
|
||||
renderResult(params: TParams, result: ToolResultMessage<TDetails>): TemplateResult;
|
||||
render(
|
||||
params: TParams | undefined,
|
||||
result: ToolResultMessage<TDetails> | undefined,
|
||||
isStreaming?: boolean,
|
||||
): TemplateResult;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue