@mariozechner/pi-web-ui 0.5.44 → 0.5.45

package/src/tools/artifacts/HtmlArtifact.ts

@@ -1,35 +1,33 @@
-import { CopyButton, DownloadButton, PreviewCodeToggle } from "@mariozechner/mini-lit";
+import { Button, CopyButton, DownloadButton, icon, PreviewCodeToggle } from "@mariozechner/mini-lit";
 import hljs from "highlight.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, type Ref, ref } from "lit/directives/ref.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { RefreshCw } from "lucide";
 import type { SandboxIframe } from "../../components/SandboxedIframe.js";
-import type { Attachment } from "../../utils/attachment-utils.js";
+import { type MessageConsumer, RUNTIME_MESSAGE_ROUTER } from "../../components/sandbox/RuntimeMessageRouter.js";
+import type { SandboxRuntimeProvider } from "../../components/sandbox/SandboxRuntimeProvider.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 {
 	@property() override filename = "";
-	@property({ attribute: false }) override displayTitle = "";
-	@property({ attribute: false }) attachments: Attachment[] = [];
+	@property({ attribute: false }) runtimeProviders: SandboxRuntimeProvider[] = [];
 	@property({ attribute: false }) sandboxUrlProvider?: () => string;
 
 	private _content = "";
 	private logs: Array<{ type: "log" | "error"; text: string }> = [];
 
 	// Refs for DOM elements
-	private sandboxIframeRef: Ref<SandboxIframe> = createRef();
-	private consoleLogsRef: Ref<HTMLDivElement> = createRef();
-	private consoleButtonRef: Ref<HTMLButtonElement> = createRef();
-
-	// Store message handler so we can remove it
-	private messageHandler?: (e: MessageEvent) => void;
+	public sandboxIframeRef: Ref<SandboxIframe> = createRef();
+	private consoleRef: Ref<Console> = createRef();
 
 	@state() private viewMode: "preview" | "code" = "preview";
-	@state() private consoleOpen = false;
 
 	private setViewMode(mode: "preview" | "code") {
 		this.viewMode = mode;
@@ -47,11 +45,30 @@ export class HtmlArtifact extends ArtifactElement {
 		copyButton.title = i18n("Copy HTML");
 		copyButton.showText = false;
 
+		// Generate standalone HTML with all runtime code injected for download
+		const sandbox = this.sandboxIframeRef.value;
+		const sandboxId = `artifact-${this.filename}`;
+		const downloadContent =
+			sandbox?.prepareHtmlDocument(sandboxId, this._content, this.runtimeProviders || [], {
+				isHtmlArtifact: true,
+				isStandalone: true, // Skip runtime bridge and navigation interceptor for standalone downloads
+			}) || this._content;
+
 		return html`
 			<div class="flex items-center gap-2">
 				${toggle}
+				${Button({
+					variant: "ghost",
+					size: "sm",
+					onClick: () => {
+						this.logs = [];
+						this.executeContent(this._content);
+					},
+					title: i18n("Reload HTML"),
+					children: icon(RefreshCw, "sm"),
+				})}
 				${copyButton}
-				${DownloadButton({ content: this._content, filename: this.filename, mimeType: "text/html", title: i18n("Download HTML") })}
+				${DownloadButton({ content: downloadContent, filename: this.filename, mimeType: "text/html", title: i18n("Download HTML") })}
 			</div>
 		`;
 	}
@@ -62,19 +79,15 @@ 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);
 			}
 		}
 	}
 
-	private executeContent(html: string) {
+	public executeContent(html: string) {
 		const sandbox = this.sandboxIframeRef.value;
 		if (!sandbox) return;
 
@@ -83,29 +96,40 @@ export class HtmlArtifact extends ArtifactElement {
 			sandbox.sandboxUrlProvider = this.sandboxUrlProvider;
 		}
 
-		// Remove previous message handler if it exists
-		if (this.messageHandler) {
-			window.removeEventListener("message", this.messageHandler);
-		}
-
 		const sandboxId = `artifact-${this.filename}`;
 
-		// Set up message listener to collect logs
-		this.messageHandler = (e: MessageEvent) => {
-			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 consumer for console messages
+		const consumer: MessageConsumer = {
+			handleMessage: async (message: any): Promise<void> => {
+				if (message.type === "console") {
+					// Create new array reference for Lit reactivity
+					this.logs = [
+						...this.logs,
+						{
+							type: message.method === "error" ? "error" : "log",
+							text: message.text,
+						},
+					];
+					this.requestUpdate(); // Re-render to show console
+				}
+			},
 		};
-		window.addEventListener("message", this.messageHandler);
 
-		// Load content (iframe persists, doesn't get removed)
-		sandbox.loadContent(sandboxId, html, this.attachments);
+		// Inject window.complete() call at the end of the HTML to signal when page is loaded
+		// HTML artifacts don't time out - they call complete() when ready
+		let modifiedHtml = html;
+		if (modifiedHtml.includes("</html>")) {
+			modifiedHtml = modifiedHtml.replace(
+				"</html>",
+				"<script>if (window.complete) window.complete();</script></html>",
+			);
+		} else {
+			// If no closing </html> tag, append the script
+			modifiedHtml += "<script>if (window.complete) window.complete();</script>";
+		}
+
+		// Load content - this handles sandbox registration, consumer registration, and iframe creation
+		sandbox.loadContent(sandboxId, modifiedHtml, this.runtimeProviders, [consumer]);
 	}
 
 	override get content(): string {
@@ -114,11 +138,9 @@ export class HtmlArtifact extends ArtifactElement {
 
 	override disconnectedCallback() {
 		super.disconnectedCallback();
-		// Clean up message handler when element is removed from DOM
-		if (this.messageHandler) {
-			window.removeEventListener("message", this.messageHandler);
-			this.messageHandler = undefined;
-		}
+		// Unregister sandbox when element is removed from DOM
+		const sandboxId = `artifact-${this.filename}`;
+		RUNTIME_MESSAGE_ROUTER.unregisterSandbox(sandboxId);
 	}
 
 	override firstUpdated() {
@@ -137,39 +159,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 +173,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>

package/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`
+			<div class="flex items-center gap-1">
+				${DownloadButton({
+					content: this.decodeBase64(),
+					filename: this.filename,
+					mimeType: this.getMimeType(),
+					title: i18n("Download"),
+				})}
+			</div>
+		`;
+	}
+
+	override render(): TemplateResult {
+		return html`
+			<div class="h-full flex flex-col bg-background overflow-auto">
+				<div class="flex-1 flex items-center justify-center p-4">
+					<img
+						src="${this.getImageUrl()}"
+						alt="${this.filename}"
+						class="max-w-full max-h-full object-contain"
+						@error=${(e: Event) => {
+							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";
+						}}
+					/>
+				</div>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"image-artifact": ImageArtifact;
+	}
+}

package/src/tools/artifacts/MarkdownArtifact.ts

@@ -10,7 +10,6 @@ import { ArtifactElement } from "./ArtifactElement.js";
 @customElement("markdown-artifact")
 export class MarkdownArtifact extends ArtifactElement {
 	@property() override filename = "";
-	@property({ attribute: false }) override displayTitle = "";
 
 	private _content = "";
 	override get content(): string {

package/src/tools/artifacts/PdfArtifact.ts

@@ -0,0 +1,201 @@
+import { DownloadButton } from "@mariozechner/mini-lit";
+import { html, type TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import * as pdfjsLib from "pdfjs-dist";
+import { i18n } from "../../utils/i18n.js";
+import { ArtifactElement } from "./ArtifactElement.js";
+
+// Configure PDF.js worker
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString();
+
+@customElement("pdf-artifact")
+export class PdfArtifact extends ArtifactElement {
+	@property({ type: String }) private _content = "";
+	@state() private error: string | null = null;
+	private currentLoadingTask: any = null;
+
+	get content(): string {
+		return this._content;
+	}
+
+	set content(value: string) {
+		this._content = value;
+		this.error = null;
+		this.requestUpdate();
+	}
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this;
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.style.display = "block";
+		this.style.height = "100%";
+	}
+
+	override disconnectedCallback(): void {
+		super.disconnectedCallback();
+		this.cleanup();
+	}
+
+	private cleanup() {
+		if (this.currentLoadingTask) {
+			this.currentLoadingTask.destroy();
+			this.currentLoadingTask = null;
+		}
+	}
+
+	private base64ToArrayBuffer(base64: string): ArrayBuffer {
+		// Remove data URL prefix if present
+		let base64Data = base64;
+		if (base64.startsWith("data:")) {
+			const base64Match = base64.match(/base64,(.+)/);
+			if (base64Match) {
+				base64Data = base64Match[1];
+			}
+		}
+
+		const binaryString = atob(base64Data);
+		const bytes = new Uint8Array(binaryString.length);
+		for (let i = 0; i < binaryString.length; i++) {
+			bytes[i] = binaryString.charCodeAt(i);
+		}
+		return bytes.buffer;
+	}
+
+	private decodeBase64(): Uint8Array {
+		let base64Data = this._content;
+		if (this._content.startsWith("data:")) {
+			const base64Match = this._content.match(/base64,(.+)/);
+			if (base64Match) {
+				base64Data = base64Match[1];
+			}
+		}
+
+		const binaryString = atob(base64Data);
+		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`
+			<div class="flex items-center gap-1">
+				${DownloadButton({
+					content: this.decodeBase64(),
+					filename: this.filename,
+					mimeType: "application/pdf",
+					title: i18n("Download"),
+				})}
+			</div>
+		`;
+	}
+
+	override async updated(changedProperties: Map<string, any>) {
+		super.updated(changedProperties);
+
+		if (changedProperties.has("_content") && this._content && !this.error) {
+			await this.renderPdf();
+		}
+	}
+
+	private async renderPdf() {
+		const container = this.querySelector("#pdf-container");
+		if (!container || !this._content) return;
+
+		let pdf: any = null;
+
+		try {
+			const arrayBuffer = this.base64ToArrayBuffer(this._content);
+
+			// Cancel any existing loading task
+			if (this.currentLoadingTask) {
+				this.currentLoadingTask.destroy();
+			}
+
+			// Load the PDF
+			this.currentLoadingTask = pdfjsLib.getDocument({ data: arrayBuffer });
+			pdf = await this.currentLoadingTask.promise;
+			this.currentLoadingTask = null;
+
+			// Clear container
+			container.innerHTML = "";
+			const wrapper = document.createElement("div");
+			wrapper.className = "p-4";
+			container.appendChild(wrapper);
+
+			// Render all pages
+			for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
+				const page = await pdf.getPage(pageNum);
+
+				const pageContainer = document.createElement("div");
+				pageContainer.className = "mb-4 last:mb-0";
+
+				const canvas = document.createElement("canvas");
+				const context = canvas.getContext("2d");
+
+				const viewport = page.getViewport({ scale: 1.5 });
+				canvas.height = viewport.height;
+				canvas.width = viewport.width;
+
+				canvas.className = "w-full max-w-full h-auto block mx-auto bg-white rounded shadow-sm border border-border";
+
+				if (context) {
+					context.fillStyle = "white";
+					context.fillRect(0, 0, canvas.width, canvas.height);
+				}
+
+				await page.render({
+					canvasContext: context!,
+					viewport: viewport,
+					canvas: canvas,
+				}).promise;
+
+				pageContainer.appendChild(canvas);
+
+				if (pageNum < pdf.numPages) {
+					const separator = document.createElement("div");
+					separator.className = "h-px bg-border my-4";
+					pageContainer.appendChild(separator);
+				}
+
+				wrapper.appendChild(pageContainer);
+			}
+		} catch (error: any) {
+			console.error("Error rendering PDF:", error);
+			this.error = error?.message || i18n("Failed to load PDF");
+		} finally {
+			if (pdf) {
+				pdf.destroy();
+			}
+		}
+	}
+
+	override render(): TemplateResult {
+		if (this.error) {
+			return html`
+				<div class="h-full flex items-center justify-center bg-background p-4">
+					<div class="bg-destructive/10 border border-destructive text-destructive p-4 rounded-lg max-w-2xl">
+						<div class="font-medium mb-1">${i18n("Error loading PDF")}</div>
+						<div class="text-sm opacity-90">${this.error}</div>
+					</div>
+				</div>
+			`;
+		}
+
+		return html`
+			<div class="h-full flex flex-col bg-background overflow-auto">
+				<div id="pdf-container" class="flex-1 overflow-auto"></div>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"pdf-artifact": PdfArtifact;
+	}
+}

package/src/tools/artifacts/SvgArtifact.ts

@@ -9,7 +9,6 @@ import { ArtifactElement } from "./ArtifactElement.js";
 @customElement("svg-artifact")
 export class SvgArtifact extends ArtifactElement {
 	@property() override filename = "";
-	@property({ attribute: false }) override displayTitle = "";
 
 	private _content = "";
 	override get content(): string {

package/src/tools/artifacts/TextArtifact.ts

@@ -56,7 +56,6 @@ const CODE_EXTENSIONS = [
 @customElement("text-artifact")
 export class TextArtifact extends ArtifactElement {
 	@property() override filename = "";
-	@property({ attribute: false }) override displayTitle = "";
 
 	private _content = "";
 	override get content(): string {