@mariozechner/pi-web-ui 0.5.44

package/src/tools/artifacts/HtmlArtifact.ts

@@ -0,0 +1,221 @@
+import { CopyButton, DownloadButton, 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 type { SandboxIframe } from "../../components/SandboxedIframe.js";
+import type { Attachment } from "../../utils/attachment-utils.js";
+import { i18n } from "../../utils/i18n.js";
+import "../../components/SandboxedIframe.js";
+import { ArtifactElement } from "./ArtifactElement.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 }) 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;
+
+	@state() private viewMode: "preview" | "code" = "preview";
+	@state() private consoleOpen = false;
+
+	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;
+
+		return html`
+			<div class="flex items-center gap-2">
+				${toggle}
+				${copyButton}
+				${DownloadButton({ content: this._content, 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 = [];
+			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) {
+		const sandbox = this.sandboxIframeRef.value;
+		if (!sandbox) return;
+
+		// Configure sandbox URL provider if provided (for browser extensions)
+		if (this.sandboxUrlProvider) {
+			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();
+			}
+		};
+		window.addEventListener("message", this.messageHandler);
+
+		// Load content (iframe persists, doesn't get removed)
+		sandbox.loadContent(sandboxId, html, this.attachments);
+	}
+
+	override get content(): string {
+		return this._content;
+	}
+
+	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;
+		}
+	}
+
+	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);
+		}
+	}
+
+	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");
+	}
+
+	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`
+									<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>
+								`
+								: ""
+						}
+					</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/MarkdownArtifact.ts

@@ -0,0 +1,81 @@
+import { CopyButton, DownloadButton, PreviewCodeToggle } from "@mariozechner/mini-lit";
+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 { 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 {
+		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/SvgArtifact.ts

@@ -0,0 +1,77 @@
+import { CopyButton, DownloadButton, PreviewCodeToggle } from "@mariozechner/mini-lit";
+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 = "";
+	@property({ attribute: false }) override displayTitle = "";
+
+	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;
+	}
+}

package/src/tools/artifacts/TextArtifact.ts

@@ -0,0 +1,148 @@
+import { CopyButton, DownloadButton } from "@mariozechner/mini-lit";
+import hljs from "highlight.js";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { i18n } from "../../utils/i18n.js";
+import { ArtifactElement } from "./ArtifactElement.js";
+
+// Known code file extensions for highlighting
+const CODE_EXTENSIONS = [
+	"js",
+	"javascript",
+	"ts",
+	"typescript",
+	"jsx",
+	"tsx",
+	"py",
+	"python",
+	"java",
+	"c",
+	"cpp",
+	"cs",
+	"php",
+	"rb",
+	"ruby",
+	"go",
+	"rust",
+	"swift",
+	"kotlin",
+	"scala",
+	"dart",
+	"html",
+	"css",
+	"scss",
+	"sass",
+	"less",
+	"json",
+	"xml",
+	"yaml",
+	"yml",
+	"toml",
+	"sql",
+	"sh",
+	"bash",
+	"ps1",
+	"bat",
+	"r",
+	"matlab",
+	"julia",
+	"lua",
+	"perl",
+	"vue",
+	"svelte",
+];
+
+@customElement("text-artifact")
+export class TextArtifact extends ArtifactElement {
+	@property() override filename = "";
+	@property({ attribute: false }) override displayTitle = "";
+
+	private _content = "";
+	override get content(): string {
+		return this._content;
+	}
+	override set content(value: string) {
+		this._content = value;
+		this.requestUpdate();
+	}
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this; // light DOM
+	}
+
+	private isCode(): boolean {
+		const ext = this.filename.split(".").pop()?.toLowerCase() || "";
+		return CODE_EXTENSIONS.includes(ext);
+	}
+
+	private getLanguageFromExtension(ext: string): string {
+		const languageMap: Record<string, string> = {
+			js: "javascript",
+			ts: "typescript",
+			py: "python",
+			rb: "ruby",
+			yml: "yaml",
+			ps1: "powershell",
+			bat: "batch",
+		};
+		return languageMap[ext] || ext;
+	}
+
+	private getMimeType(): string {
+		const ext = this.filename.split(".").pop()?.toLowerCase() || "";
+		if (ext === "svg") return "image/svg+xml";
+		if (ext === "md" || ext === "markdown") return "text/markdown";
+		return "text/plain";
+	}
+
+	public getHeaderButtons() {
+		const copyButton = new CopyButton();
+		copyButton.text = this.content;
+		copyButton.title = i18n("Copy");
+		copyButton.showText = false;
+
+		return html`
+			<div class="flex items-center gap-1">
+				${copyButton}
+				${DownloadButton({
+					content: this.content,
+					filename: this.filename,
+					mimeType: this.getMimeType(),
+					title: i18n("Download"),
+				})}
+			</div>
+		`;
+	}
+
+	override render() {
+		const isCode = this.isCode();
+		const ext = this.filename.split(".").pop() || "";
+		return html`
+			<div class="h-full flex flex-col">
+				<div class="flex-1 overflow-auto">
+					${
+						isCode
+							? html`
+								<pre class="m-0 p-4 text-xs"><code class="hljs language-${this.getLanguageFromExtension(
+									ext.toLowerCase(),
+								)}">${unsafeHTML(
+									hljs.highlight(this.content, {
+										language: this.getLanguageFromExtension(ext.toLowerCase()),
+										ignoreIllegals: true,
+									}).value,
+								)}</code></pre>
+							`
+							: html` <pre class="m-0 p-4 text-xs font-mono">${this.content}</pre> `
+					}
+				</div>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"text-artifact": TextArtifact;
+	}
+}