From d7d79bd533079522f902fca20c65935b215d5bfc Mon Sep 17 00:00:00 2001 From: Mario Zechner Date: Thu, 9 Oct 2025 04:34:42 +0200 Subject: [PATCH] Add image artifact support with proper binary downloads - Add ImageArtifact component for displaying images (.png, .jpg, .jpeg, .gif, .webp, .bmp, .ico) - Images stored as base64, displayed via data URLs - Download button properly decodes base64 to Uint8Array for valid binary downloads - Fix Lit ChildPart error: use CSS rotation instead of innerHTML manipulation in collapsible headers Changes: - web-ui/src/tools/artifacts/ImageArtifact.ts: New image artifact component - web-ui/src/tools/artifacts/artifacts.ts: Add "image" file type support - web-ui/src/tools/renderer-registry.ts: Fix collapsible chevron to use CSS rotation - web-ui/src/index.ts: Export ImageArtifact --- packages/web-ui/src/index.ts | 1 + .../src/tools/artifacts/ImageArtifact.ts | 116 ++++++++++++++++++ .../web-ui/src/tools/artifacts/artifacts.ts | 15 ++- 3 files changed, 131 insertions(+), 1 deletion(-) create mode 100644 packages/web-ui/src/tools/artifacts/ImageArtifact.ts diff --git a/packages/web-ui/src/index.ts b/packages/web-ui/src/index.ts index 334da2e3..26311589 100644 --- a/packages/web-ui/src/index.ts +++ b/packages/web-ui/src/index.ts @@ -66,6 +66,7 @@ export { ArtifactPill } from "./tools/artifacts/ArtifactPill.js"; export { type Artifact, ArtifactsPanel, type ArtifactsParams } from "./tools/artifacts/artifacts.js"; export { ArtifactsToolRenderer } from "./tools/artifacts/artifacts-tool-renderer.js"; export { HtmlArtifact } from "./tools/artifacts/HtmlArtifact.js"; +export { ImageArtifact } from "./tools/artifacts/ImageArtifact.js"; export { MarkdownArtifact } from "./tools/artifacts/MarkdownArtifact.js"; export { SvgArtifact } from "./tools/artifacts/SvgArtifact.js"; export { TextArtifact } from "./tools/artifacts/TextArtifact.js"; diff --git a/packages/web-ui/src/tools/artifacts/ImageArtifact.ts b/packages/web-ui/src/tools/artifacts/ImageArtifact.ts new file mode 100644 index 00000000..8bc2cc99 --- /dev/null +++ b/packages/web-ui/src/tools/artifacts/ImageArtifact.ts @@ -0,0 +1,116 @@ +import { DownloadButton } from "@mariozechner/mini-lit"; +import { html, type TemplateResult } from "lit"; +import { customElement, property } from "lit/decorators.js"; +import { i18n } from "../../utils/i18n.js"; +import { ArtifactElement } from "./ArtifactElement.js"; + +@customElement("image-artifact") +export class ImageArtifact extends ArtifactElement { + @property({ type: String }) private _content = ""; + + get content(): string { + return this._content; + } + + set content(value: string) { + this._content = value; + this.requestUpdate(); + } + + protected override createRenderRoot(): HTMLElement | DocumentFragment { + return this; + } + + override connectedCallback(): void { + super.connectedCallback(); + this.style.display = "block"; + this.style.height = "100%"; + } + + private getMimeType(): string { + const ext = this.filename.split(".").pop()?.toLowerCase(); + if (ext === "jpg" || ext === "jpeg") return "image/jpeg"; + if (ext === "gif") return "image/gif"; + if (ext === "webp") return "image/webp"; + if (ext === "svg") return "image/svg+xml"; + if (ext === "bmp") return "image/bmp"; + if (ext === "ico") return "image/x-icon"; + return "image/png"; + } + + private getImageUrl(): string { + // If content is already a data URL, use it directly + if (this._content.startsWith("data:")) { + return this._content; + } + // Otherwise assume it's base64 and construct data URL + return `data:${this.getMimeType()};base64,${this._content}`; + } + + private decodeBase64(): Uint8Array { + let base64Data: string; + + // If content is a data URL, extract the base64 part + if (this._content.startsWith("data:")) { + const base64Match = this._content.match(/base64,(.+)/); + if (base64Match) { + base64Data = base64Match[1]; + } else { + // Not a base64 data URL, return empty + return new Uint8Array(0); + } + } else { + // Otherwise use content as-is + base64Data = this._content; + } + + // Decode base64 to binary string + const binaryString = atob(base64Data); + + // Convert binary string to Uint8Array + const bytes = new Uint8Array(binaryString.length); + for (let i = 0; i < binaryString.length; i++) { + bytes[i] = binaryString.charCodeAt(i); + } + + return bytes; + } + + public getHeaderButtons() { + return html` +
+ ${DownloadButton({ + content: this.decodeBase64(), + filename: this.filename, + mimeType: this.getMimeType(), + title: i18n("Download"), + })} +
+ `; + } + + override render(): TemplateResult { + return html` +
+
+ ${this.filename} { + const target = e.target as HTMLImageElement; + target.src = + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='50' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EImage Error%3C/text%3E%3C/svg%3E"; + }} + /> +
+
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "image-artifact": ImageArtifact; + } +} diff --git a/packages/web-ui/src/tools/artifacts/artifacts.ts b/packages/web-ui/src/tools/artifacts/artifacts.ts index b8a3a6a0..1b25feac 100644 --- a/packages/web-ui/src/tools/artifacts/artifacts.ts +++ b/packages/web-ui/src/tools/artifacts/artifacts.ts @@ -12,6 +12,7 @@ import { buildArtifactsDescription } from "../../prompts/tool-prompts.js"; import { i18n } from "../../utils/i18n.js"; import type { ArtifactElement } from "./ArtifactElement.js"; import { HtmlArtifact } from "./HtmlArtifact.js"; +import { ImageArtifact } from "./ImageArtifact.js"; import { MarkdownArtifact } from "./MarkdownArtifact.js"; import { SvgArtifact } from "./SvgArtifact.js"; import { TextArtifact } from "./TextArtifact.js"; @@ -92,11 +93,21 @@ export class ArtifactsPanel extends LitElement { } // Helper to determine file type from extension - private getFileType(filename: string): "html" | "svg" | "markdown" | "text" { + private getFileType(filename: string): "html" | "svg" | "markdown" | "image" | "text" { const ext = filename.split(".").pop()?.toLowerCase(); if (ext === "html") return "html"; if (ext === "svg") return "svg"; if (ext === "md" || ext === "markdown") return "markdown"; + if ( + ext === "png" || + ext === "jpg" || + ext === "jpeg" || + ext === "gif" || + ext === "webp" || + ext === "bmp" || + ext === "ico" + ) + return "image"; return "text"; } @@ -117,6 +128,8 @@ export class ArtifactsPanel extends LitElement { element = new SvgArtifact(); } else if (type === "markdown") { element = new MarkdownArtifact(); + } else if (type === "image") { + element = new ImageArtifact(); } else { element = new TextArtifact(); }