mirror of
https://github.com/getcompanion-ai/co-mono.git
synced 2026-04-15 18:01:22 +00:00
Make renderHeader and renderCollapsibleHeader accept string | TemplateResult
- 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
parent
547be7ce37
commit
58b9c36268
4 changed files with 84 additions and 103 deletions
|
|
@ -1711,8 +1711,8 @@ export const MODELS = {
|
|||
reasoning: true,
|
||||
input: ["text", "image"],
|
||||
cost: {
|
||||
input: 0.19,
|
||||
output: 0.78,
|
||||
input: 0.3,
|
||||
output: 1.2,
|
||||
cacheRead: 0,
|
||||
cacheWrite: 0,
|
||||
},
|
||||
|
|
@ -2042,23 +2042,6 @@ export const MODELS = {
|
|||
contextWindow: 131072,
|
||||
maxTokens: 131072,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"deepseek/deepseek-chat-v3.1:free": {
|
||||
id: "deepseek/deepseek-chat-v3.1:free",
|
||||
name: "DeepSeek: DeepSeek V3.1 (free)",
|
||||
api: "openai-completions",
|
||||
provider: "openrouter",
|
||||
baseUrl: "https://openrouter.ai/api/v1",
|
||||
reasoning: true,
|
||||
input: ["text"],
|
||||
cost: {
|
||||
input: 0,
|
||||
output: 0,
|
||||
cacheRead: 0,
|
||||
cacheWrite: 0,
|
||||
},
|
||||
contextWindow: 163800,
|
||||
maxTokens: 4096,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"deepseek/deepseek-chat-v3.1": {
|
||||
id: "deepseek/deepseek-chat-v3.1",
|
||||
name: "DeepSeek: DeepSeek V3.1",
|
||||
|
|
@ -2238,13 +2221,13 @@ export const MODELS = {
|
|||
reasoning: true,
|
||||
input: ["text"],
|
||||
cost: {
|
||||
input: 0.14,
|
||||
output: 0.86,
|
||||
input: 0,
|
||||
output: 0,
|
||||
cacheRead: 0,
|
||||
cacheWrite: 0,
|
||||
},
|
||||
contextWindow: 131072,
|
||||
maxTokens: 131072,
|
||||
contextWindow: 32768,
|
||||
maxTokens: 32768,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"qwen/qwen3-235b-a22b-thinking-2507": {
|
||||
id: "qwen/qwen3-235b-a22b-thinking-2507",
|
||||
|
|
@ -3300,23 +3283,6 @@ export const MODELS = {
|
|||
contextWindow: 32768,
|
||||
maxTokens: 4096,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"cohere/command-r-plus-08-2024": {
|
||||
id: "cohere/command-r-plus-08-2024",
|
||||
name: "Cohere: Command R+ (08-2024)",
|
||||
api: "openai-completions",
|
||||
provider: "openrouter",
|
||||
baseUrl: "https://openrouter.ai/api/v1",
|
||||
reasoning: false,
|
||||
input: ["text"],
|
||||
cost: {
|
||||
input: 2.5,
|
||||
output: 10,
|
||||
cacheRead: 0,
|
||||
cacheWrite: 0,
|
||||
},
|
||||
contextWindow: 128000,
|
||||
maxTokens: 4000,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"cohere/command-r-08-2024": {
|
||||
id: "cohere/command-r-08-2024",
|
||||
name: "Cohere: Command R (08-2024)",
|
||||
|
|
@ -3334,6 +3300,23 @@ export const MODELS = {
|
|||
contextWindow: 128000,
|
||||
maxTokens: 4000,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"cohere/command-r-plus-08-2024": {
|
||||
id: "cohere/command-r-plus-08-2024",
|
||||
name: "Cohere: Command R+ (08-2024)",
|
||||
api: "openai-completions",
|
||||
provider: "openrouter",
|
||||
baseUrl: "https://openrouter.ai/api/v1",
|
||||
reasoning: false,
|
||||
input: ["text"],
|
||||
cost: {
|
||||
input: 2.5,
|
||||
output: 10,
|
||||
cacheRead: 0,
|
||||
cacheWrite: 0,
|
||||
},
|
||||
contextWindow: 128000,
|
||||
maxTokens: 4000,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"microsoft/phi-3.5-mini-128k-instruct": {
|
||||
id: "microsoft/phi-3.5-mini-128k-instruct",
|
||||
name: "Microsoft: Phi-3.5 Mini 128K Instruct",
|
||||
|
|
@ -3368,22 +3351,22 @@ export const MODELS = {
|
|||
contextWindow: 65000,
|
||||
maxTokens: 4096,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"meta-llama/llama-3.1-8b-instruct": {
|
||||
id: "meta-llama/llama-3.1-8b-instruct",
|
||||
name: "Meta: Llama 3.1 8B Instruct",
|
||||
"meta-llama/llama-3.1-70b-instruct": {
|
||||
id: "meta-llama/llama-3.1-70b-instruct",
|
||||
name: "Meta: Llama 3.1 70B Instruct",
|
||||
api: "openai-completions",
|
||||
provider: "openrouter",
|
||||
baseUrl: "https://openrouter.ai/api/v1",
|
||||
reasoning: false,
|
||||
input: ["text"],
|
||||
cost: {
|
||||
input: 0.02,
|
||||
output: 0.03,
|
||||
input: 0.39999999999999997,
|
||||
output: 0.39999999999999997,
|
||||
cacheRead: 0,
|
||||
cacheWrite: 0,
|
||||
},
|
||||
contextWindow: 16384,
|
||||
maxTokens: 16384,
|
||||
contextWindow: 131072,
|
||||
maxTokens: 4096,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"meta-llama/llama-3.1-405b-instruct": {
|
||||
id: "meta-llama/llama-3.1-405b-instruct",
|
||||
|
|
@ -3402,22 +3385,22 @@ export const MODELS = {
|
|||
contextWindow: 32768,
|
||||
maxTokens: 16384,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"meta-llama/llama-3.1-70b-instruct": {
|
||||
id: "meta-llama/llama-3.1-70b-instruct",
|
||||
name: "Meta: Llama 3.1 70B Instruct",
|
||||
"meta-llama/llama-3.1-8b-instruct": {
|
||||
id: "meta-llama/llama-3.1-8b-instruct",
|
||||
name: "Meta: Llama 3.1 8B Instruct",
|
||||
api: "openai-completions",
|
||||
provider: "openrouter",
|
||||
baseUrl: "https://openrouter.ai/api/v1",
|
||||
reasoning: false,
|
||||
input: ["text"],
|
||||
cost: {
|
||||
input: 0.39999999999999997,
|
||||
output: 0.39999999999999997,
|
||||
input: 0.02,
|
||||
output: 0.03,
|
||||
cacheRead: 0,
|
||||
cacheWrite: 0,
|
||||
},
|
||||
contextWindow: 131072,
|
||||
maxTokens: 4096,
|
||||
maxTokens: 16384,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"mistralai/mistral-nemo": {
|
||||
id: "mistralai/mistral-nemo",
|
||||
|
|
@ -3589,23 +3572,6 @@ export const MODELS = {
|
|||
contextWindow: 128000,
|
||||
maxTokens: 4096,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"mistralai/mistral-small": {
|
||||
id: "mistralai/mistral-small",
|
||||
name: "Mistral Small",
|
||||
api: "openai-completions",
|
||||
provider: "openrouter",
|
||||
baseUrl: "https://openrouter.ai/api/v1",
|
||||
reasoning: false,
|
||||
input: ["text"],
|
||||
cost: {
|
||||
input: 0.19999999999999998,
|
||||
output: 0.6,
|
||||
cacheRead: 0,
|
||||
cacheWrite: 0,
|
||||
},
|
||||
contextWindow: 32768,
|
||||
maxTokens: 4096,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"mistralai/mistral-tiny": {
|
||||
id: "mistralai/mistral-tiny",
|
||||
name: "Mistral Tiny",
|
||||
|
|
@ -3623,6 +3589,23 @@ export const MODELS = {
|
|||
contextWindow: 32768,
|
||||
maxTokens: 4096,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"mistralai/mistral-small": {
|
||||
id: "mistralai/mistral-small",
|
||||
name: "Mistral Small",
|
||||
api: "openai-completions",
|
||||
provider: "openrouter",
|
||||
baseUrl: "https://openrouter.ai/api/v1",
|
||||
reasoning: false,
|
||||
input: ["text"],
|
||||
cost: {
|
||||
input: 0.19999999999999998,
|
||||
output: 0.6,
|
||||
cacheRead: 0,
|
||||
cacheWrite: 0,
|
||||
},
|
||||
contextWindow: 32768,
|
||||
maxTokens: 4096,
|
||||
} satisfies Model<"openai-completions">,
|
||||
"mistralai/mixtral-8x7b-instruct": {
|
||||
id: "mistralai/mixtral-8x7b-instruct",
|
||||
name: "Mistral: Mixtral 8x7B Instruct",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,11 @@ export function getToolRenderer(toolName: string): ToolRenderer | undefined {
|
|||
* 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 {
|
||||
export function renderHeader(
|
||||
state: "inprogress" | "complete" | "error",
|
||||
toolIcon: any,
|
||||
text: string | TemplateResult,
|
||||
): TemplateResult {
|
||||
const statusIcon = (iconComponent: any, color: string) =>
|
||||
html`<span class="inline-block ${color}">${icon(iconComponent, "sm")}</span>`;
|
||||
|
||||
|
|
@ -35,7 +39,7 @@ export function renderHeader(state: "inprogress" | "complete" | "error", toolIco
|
|||
<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>
|
||||
${text}
|
||||
</div>
|
||||
${statusIcon(Loader, "text-foreground animate-spin")}
|
||||
</div>
|
||||
|
|
@ -44,14 +48,14 @@ export function renderHeader(state: "inprogress" | "complete" | "error", toolIco
|
|||
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>
|
||||
${text}
|
||||
</div>
|
||||
`;
|
||||
case "error":
|
||||
return html`
|
||||
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
${statusIcon(toolIcon, "text-destructive")}
|
||||
<span>${text}</span>
|
||||
${text}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
@ -64,7 +68,7 @@ export function renderHeader(state: "inprogress" | "complete" | "error", toolIco
|
|||
export function renderCollapsibleHeader(
|
||||
state: "inprogress" | "complete" | "error",
|
||||
toolIcon: any,
|
||||
text: string,
|
||||
text: string | TemplateResult,
|
||||
contentRef: Ref<HTMLElement>,
|
||||
chevronRef: Ref<HTMLElement>,
|
||||
defaultExpanded = false,
|
||||
|
|
@ -102,7 +106,7 @@ export function renderCollapsibleHeader(
|
|||
<div class="flex items-center gap-2">
|
||||
${state === "inprogress" ? statusIcon(Loader, "text-foreground animate-spin") : ""}
|
||||
${statusIcon(toolIcon, toolIconColor)}
|
||||
<span>${text}</span>
|
||||
${text}
|
||||
</div>
|
||||
<span class="inline-block text-muted-foreground" ${ref(chevronRef)}>
|
||||
${icon(defaultExpanded ? ChevronDown : ChevronRight, "sm")}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue