@oh-my-pi/pi-web-ui 1.337.0

package/src/tools/artifacts/HtmlArtifact.ts

@@ -0,0 +1,203 @@
+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 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";
+import { icon } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { CopyButton } from "@mariozechner/mini-lit/dist/CopyButton.js";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
+import { PreviewCodeToggle } from "@mariozechner/mini-lit/dist/PreviewCodeToggle.js";
+
+@customElement("html-artifact")
+export class HtmlArtifact extends ArtifactElement {
+	@property() override filename = "";
+	@property({ attribute: false }) runtimeProviders: SandboxRuntimeProvider[] = [];
+	@property({ attribute: false }) sandboxUrlProvider?: () => string;
+
+	private _content = "";
+	private logs: Array<{ type: "log" | "error"; text: string }> = [];
+
+	// Refs for DOM elements
+	public sandboxIframeRef: Ref<SandboxIframe> = createRef();
+	private consoleRef: Ref<Console> = createRef();
+
+	@state() private viewMode: "preview" | "code" = "preview";
+
+	private setViewMode(mode: "preview" | "code") {
+		this.viewMode = mode;
+	}
+
+	public getHeaderButtons() {
+		const toggle = new PreviewCodeToggle();
+		toggle.mode = this.viewMode;
+		toggle.addEventListener("mode-change", (e: Event) => {
+			this.setViewMode((e as CustomEvent).detail);
+		});
+
+		const copyButton = new CopyButton();
+		copyButton.text = this._content;
+		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: downloadContent,
+					filename: this.filename,
+					mimeType: "text/html",
+					title: i18n("Download HTML"),
+				})}
+			</div>
+		`;
+	}
+
+	override set content(value: string) {
+		const oldValue = this._content;
+		this._content = value;
+		if (oldValue !== value) {
+			// Reset logs when content changes
+			this.logs = [];
+			this.requestUpdate();
+			// Execute content in sandbox if it exists
+			if (this.sandboxIframeRef.value && value) {
+				this.executeContent(value);
+			}
+		}
+	}
+
+	public executeContent(html: string) {
+		const sandbox = this.sandboxIframeRef.value;
+		if (!sandbox) return;
+
+		// Configure sandbox URL provider if provided (for browser extensions)
+		if (this.sandboxUrlProvider) {
+			sandbox.sandboxUrlProvider = this.sandboxUrlProvider;
+		}
+
+		const sandboxId = `artifact-${this.filename}`;
+
+		// 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
+				}
+			},
+		};
+
+		// 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 {
+		return this._content;
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		// Unregister sandbox when element is removed from DOM
+		const sandboxId = `artifact-${this.filename}`;
+		RUNTIME_MESSAGE_ROUTER.unregisterSandbox(sandboxId);
+	}
+
+	override firstUpdated() {
+		// Execute initial content
+		if (this._content && this.sandboxIframeRef.value) {
+			this.executeContent(this._content);
+		}
+	}
+
+	override updated(changedProperties: Map<string | number | symbol, unknown>) {
+		super.updated(changedProperties);
+		// If we have content but haven't executed yet (e.g., during reconstruction),
+		// execute when the iframe ref becomes available
+		if (this._content && this.sandboxIframeRef.value && this.logs.length === 0) {
+			this.executeContent(this._content);
+		}
+	}
+
+	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");
+	}
+
+	override render() {
+		return html`
+			<div class="h-full flex flex-col">
+				<div class="flex-1 overflow-hidden relative">
+					<!-- Preview container - always in DOM, just hidden when not active -->
+					<div class="absolute inset-0 flex flex-col" style="display: ${this.viewMode === "preview" ? "flex" : "none"}">
+						<sandbox-iframe class="flex-1" ${ref(this.sandboxIframeRef)}></sandbox-iframe>
+						${
+							this.logs.length > 0
+								? html`<artifact-console .logs=${this.logs} ${ref(this.consoleRef)}></artifact-console>`
+								: ""
+						}
+					</div>
+
+					<!-- Code view - always in DOM, just hidden when not active -->
+					<div
+						class="absolute inset-0 overflow-auto bg-background"
+						style="display: ${this.viewMode === "code" ? "block" : "none"}"
+					>
+						<pre class="m-0 p-4 text-xs"><code class="hljs language-html">${unsafeHTML(
+							hljs.highlight(this._content, { language: "html" }).value,
+						)}</code></pre>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+}

package/src/tools/artifacts/ImageArtifact.ts

@@ -0,0 +1,116 @@
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
+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

@@ -0,0 +1,83 @@
+import hljs from "highlight.js";
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { i18n } from "../../utils/i18n.js";
+import "@mariozechner/mini-lit/dist/MarkdownBlock.js";
+import { CopyButton } from "@mariozechner/mini-lit/dist/CopyButton.js";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
+import { PreviewCodeToggle } from "@mariozechner/mini-lit/dist/PreviewCodeToggle.js";
+import { ArtifactElement } from "./ArtifactElement.js";
+
+@customElement("markdown-artifact")
+export class MarkdownArtifact extends ArtifactElement {
+	@property() override filename = "";
+
+	private _content = "";
+	override get content(): string {
+		return this._content;
+	}
+	override set content(value: string) {
+		this._content = value;
+		this.requestUpdate();
+	}
+
+	@state() private viewMode: "preview" | "code" = "preview";
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this; // light DOM
+	}
+
+	private setViewMode(mode: "preview" | "code") {
+		this.viewMode = mode;
+	}
+
+	public getHeaderButtons() {
+		const toggle = new PreviewCodeToggle();
+		toggle.mode = this.viewMode;
+		toggle.addEventListener("mode-change", (e: Event) => {
+			this.setViewMode((e as CustomEvent).detail);
+		});
+
+		const copyButton = new CopyButton();
+		copyButton.text = this._content;
+		copyButton.title = i18n("Copy Markdown");
+		copyButton.showText = false;
+
+		return html`
+			<div class="flex items-center gap-2">
+				${toggle} ${copyButton}
+				${DownloadButton({
+					content: this._content,
+					filename: this.filename,
+					mimeType: "text/markdown",
+					title: i18n("Download Markdown"),
+				})}
+			</div>
+		`;
+	}
+
+	override render() {
+		return html`
+			<div class="h-full flex flex-col">
+				<div class="flex-1 overflow-auto">
+					${
+						this.viewMode === "preview"
+							? html`<div class="p-4"><markdown-block .content=${this.content}></markdown-block></div>`
+							: html`<pre
+								class="m-0 p-4 text-xs whitespace-pre-wrap break-words"
+						  ><code class="hljs language-markdown">${unsafeHTML(
+								hljs.highlight(this.content, { language: "markdown", ignoreIllegals: true }).value,
+							)}</code></pre>`
+					}
+				</div>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"markdown-artifact": MarkdownArtifact;
+	}
+}

package/src/tools/artifacts/PdfArtifact.ts

@@ -0,0 +1,201 @@
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
+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

@@ -0,0 +1,82 @@
+import { CopyButton } from "@mariozechner/mini-lit/dist/CopyButton.js";
+import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
+import { PreviewCodeToggle } from "@mariozechner/mini-lit/dist/PreviewCodeToggle.js";
+import hljs from "highlight.js";
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { i18n } from "../../utils/i18n.js";
+import { ArtifactElement } from "./ArtifactElement.js";
+
+@customElement("svg-artifact")
+export class SvgArtifact extends ArtifactElement {
+	@property() override filename = "";
+
+	private _content = "";
+	override get content(): string {
+		return this._content;
+	}
+	override set content(value: string) {
+		this._content = value;
+		this.requestUpdate();
+	}
+
+	@state() private viewMode: "preview" | "code" = "preview";
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this; // light DOM
+	}
+
+	private setViewMode(mode: "preview" | "code") {
+		this.viewMode = mode;
+	}
+
+	public getHeaderButtons() {
+		const toggle = new PreviewCodeToggle();
+		toggle.mode = this.viewMode;
+		toggle.addEventListener("mode-change", (e: Event) => {
+			this.setViewMode((e as CustomEvent).detail);
+		});
+
+		const copyButton = new CopyButton();
+		copyButton.text = this._content;
+		copyButton.title = i18n("Copy SVG");
+		copyButton.showText = false;
+
+		return html`
+			<div class="flex items-center gap-2">
+				${toggle} ${copyButton}
+				${DownloadButton({
+					content: this._content,
+					filename: this.filename,
+					mimeType: "image/svg+xml",
+					title: i18n("Download SVG"),
+				})}
+			</div>
+		`;
+	}
+
+	override render() {
+		return html`
+			<div class="h-full flex flex-col">
+				<div class="flex-1 overflow-auto">
+					${
+						this.viewMode === "preview"
+							? html`<div class="h-full flex items-center justify-center">
+								${unsafeHTML(this.content.replace(/<svg(\s|>)/i, (_m, p1) => `<svg class="w-full h-full"${p1}`))}
+						  </div>`
+							: html`<pre class="m-0 p-4 text-xs"><code class="hljs language-xml">${unsafeHTML(
+									hljs.highlight(this.content, { language: "xml", ignoreIllegals: true }).value,
+								)}</code></pre>`
+					}
+				</div>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"svg-artifact": SvgArtifact;
+	}
+}