Committing manually like the monkey I am

packages/web-ui/src/tools/artifacts/DocxArtifact.ts

@@ -0,0 +1,213 @@
+import { DownloadButton } from "@mariozechner/mini-lit";
+import { renderAsync } from "docx-preview";
+import { html, type TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { i18n } from "../../utils/i18n.js";
+import { ArtifactElement } from "./ArtifactElement.js";
+
+@customElement("docx-artifact")
+export class DocxArtifact extends ArtifactElement {
+	@property({ type: String }) private _content = "";
+	@state() private error: string | null = 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%";
+	}
+
+	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/vnd.openxmlformats-officedocument.wordprocessingml.document",
+					title: i18n("Download"),
+				})}
+			</div>
+		`;
+	}
+
+	override async updated(changedProperties: Map<string, any>) {
+		super.updated(changedProperties);
+
+		if (changedProperties.has("_content") && this._content && !this.error) {
+			await this.renderDocx();
+		}
+	}
+
+	private async renderDocx() {
+		const container = this.querySelector("#docx-container");
+		if (!container || !this._content) return;
+
+		try {
+			const arrayBuffer = this.base64ToArrayBuffer(this._content);
+
+			// Clear container first
+			container.innerHTML = "";
+
+			// Create a wrapper div for the document
+			const wrapper = document.createElement("div");
+			wrapper.className = "docx-wrapper-custom";
+			container.appendChild(wrapper);
+
+			// Render the DOCX file into the wrapper
+			await renderAsync(arrayBuffer, wrapper as HTMLElement, undefined, {
+				className: "docx",
+				inWrapper: true,
+				ignoreWidth: true,
+				ignoreHeight: false,
+				ignoreFonts: false,
+				breakPages: true,
+				ignoreLastRenderedPageBreak: true,
+				experimental: false,
+				trimXmlDeclaration: true,
+				useBase64URL: false,
+				renderHeaders: true,
+				renderFooters: true,
+				renderFootnotes: true,
+				renderEndnotes: true,
+			});
+
+			// Apply custom styles to match theme and fix sizing
+			const style = document.createElement("style");
+			style.textContent = `
+				#docx-container {
+					padding: 0;
+				}
+
+				#docx-container .docx-wrapper-custom {
+					max-width: 100%;
+					overflow-x: auto;
+				}
+
+				#docx-container .docx-wrapper {
+					max-width: 100% !important;
+					margin: 0 !important;
+					background: transparent !important;
+					padding: 0em !important;
+				}
+
+				#docx-container .docx-wrapper > section.docx {
+					box-shadow: none !important;
+					border: none !important;
+					border-radius: 0 !important;
+					margin: 0 !important;
+					padding: 2em !important;
+					background: white !important;
+					color: black !important;
+					max-width: 100% !important;
+					width: 100% !important;
+					min-width: 0 !important;
+					overflow-x: auto !important;
+				}
+
+				/* Fix tables and wide content */
+				#docx-container table {
+					max-width: 100% !important;
+					width: auto !important;
+					overflow-x: auto !important;
+					display: block !important;
+				}
+
+				#docx-container img {
+					max-width: 100% !important;
+					height: auto !important;
+				}
+
+				/* Fix paragraphs and text */
+				#docx-container p,
+				#docx-container span,
+				#docx-container div {
+					max-width: 100% !important;
+					word-wrap: break-word !important;
+					overflow-wrap: break-word !important;
+				}
+
+				/* Hide page breaks in web view */
+				#docx-container .docx-page-break {
+					display: none !important;
+				}
+			`;
+			container.appendChild(style);
+		} catch (error: any) {
+			console.error("Error rendering DOCX:", error);
+			this.error = error?.message || i18n("Failed to load document");
+		}
+	}
+
+	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 document")}</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="docx-container" class="flex-1 overflow-auto"></div>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"docx-artifact": DocxArtifact;
+	}
+}

packages/web-ui/src/tools/artifacts/ExcelArtifact.ts

@@ -0,0 +1,231 @@
+import { DownloadButton } from "@mariozechner/mini-lit";
+import { html, type TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import * as XLSX from "xlsx";
+import { i18n } from "../../utils/i18n.js";
+import { ArtifactElement } from "./ArtifactElement.js";
+
+@customElement("excel-artifact")
+export class ExcelArtifact extends ArtifactElement {
+	@property({ type: String }) private _content = "";
+	@state() private error: string | null = 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%";
+	}
+
+	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;
+	}
+
+	private getMimeType(): string {
+		const ext = this.filename.split(".").pop()?.toLowerCase();
+		if (ext === "xls") return "application/vnd.ms-excel";
+		return "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+	}
+
+	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 async updated(changedProperties: Map<string, any>) {
+		super.updated(changedProperties);
+
+		if (changedProperties.has("_content") && this._content && !this.error) {
+			await this.renderExcel();
+		}
+	}
+
+	private async renderExcel() {
+		const container = this.querySelector("#excel-container");
+		if (!container || !this._content) return;
+
+		try {
+			const arrayBuffer = this.base64ToArrayBuffer(this._content);
+			const workbook = XLSX.read(arrayBuffer, { type: "array" });
+
+			container.innerHTML = "";
+			const wrapper = document.createElement("div");
+			wrapper.className = "overflow-auto h-full flex flex-col";
+			container.appendChild(wrapper);
+
+			// Create tabs for multiple sheets
+			if (workbook.SheetNames.length > 1) {
+				const tabContainer = document.createElement("div");
+				tabContainer.className = "flex gap-2 mb-4 border-b border-border sticky top-0 bg-background z-10";
+
+				const sheetContents: HTMLElement[] = [];
+
+				workbook.SheetNames.forEach((sheetName, index) => {
+					// Create tab button
+					const tab = document.createElement("button");
+					tab.textContent = sheetName;
+					tab.className =
+						index === 0
+							? "px-4 py-2 text-sm font-medium border-b-2 border-primary text-primary"
+							: "px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-b-2 hover:border-border transition-colors";
+
+					// Create sheet content
+					const sheetDiv = document.createElement("div");
+					sheetDiv.style.display = index === 0 ? "flex" : "none";
+					sheetDiv.className = "flex-1 overflow-auto";
+					sheetDiv.appendChild(this.renderExcelSheet(workbook.Sheets[sheetName], sheetName));
+					sheetContents.push(sheetDiv);
+
+					// Tab click handler
+					tab.onclick = () => {
+						// Update tab styles
+						tabContainer.querySelectorAll("button").forEach((btn, btnIndex) => {
+							if (btnIndex === index) {
+								btn.className = "px-4 py-2 text-sm font-medium border-b-2 border-primary text-primary";
+							} else {
+								btn.className =
+									"px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-b-2 hover:border-border transition-colors";
+							}
+						});
+						// Show/hide sheets
+						sheetContents.forEach((content, contentIndex) => {
+							content.style.display = contentIndex === index ? "flex" : "none";
+						});
+					};
+
+					tabContainer.appendChild(tab);
+				});
+
+				wrapper.appendChild(tabContainer);
+				sheetContents.forEach((content) => {
+					wrapper.appendChild(content);
+				});
+			} else {
+				// Single sheet
+				const sheetName = workbook.SheetNames[0];
+				wrapper.appendChild(this.renderExcelSheet(workbook.Sheets[sheetName], sheetName));
+			}
+		} catch (error: any) {
+			console.error("Error rendering Excel:", error);
+			this.error = error?.message || i18n("Failed to load spreadsheet");
+		}
+	}
+
+	private renderExcelSheet(worksheet: any, sheetName: string): HTMLElement {
+		const sheetDiv = document.createElement("div");
+
+		// Generate HTML table
+		const htmlTable = XLSX.utils.sheet_to_html(worksheet, { id: `sheet-${sheetName}` });
+		const tempDiv = document.createElement("div");
+		tempDiv.innerHTML = htmlTable;
+
+		// Find and style the table
+		const table = tempDiv.querySelector("table");
+		if (table) {
+			table.className = "w-full border-collapse text-foreground";
+
+			// Style all cells
+			table.querySelectorAll("td, th").forEach((cell) => {
+				const cellEl = cell as HTMLElement;
+				cellEl.className = "border border-border px-3 py-2 text-sm text-left";
+			});
+
+			// Style header row
+			const headerCells = table.querySelectorAll("thead th, tr:first-child td");
+			if (headerCells.length > 0) {
+				headerCells.forEach((th) => {
+					const thEl = th as HTMLElement;
+					thEl.className =
+						"border border-border px-3 py-2 text-sm font-semibold bg-muted text-foreground sticky top-0";
+				});
+			}
+
+			// Alternate row colors
+			table.querySelectorAll("tbody tr:nth-child(even)").forEach((row) => {
+				const rowEl = row as HTMLElement;
+				rowEl.className = "bg-muted/30";
+			});
+
+			sheetDiv.appendChild(table);
+		}
+
+		return sheetDiv;
+	}
+
+	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 spreadsheet")}</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="excel-container" class="flex-1 overflow-auto"></div>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"excel-artifact": ExcelArtifact;
+	}
+}

packages/web-ui/src/tools/artifacts/GenericArtifact.ts

@@ -0,0 +1,117 @@
+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("generic-artifact")
+export class GenericArtifact 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 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;
+	}
+
+	private getMimeType(): string {
+		const ext = this.filename.split(".").pop()?.toLowerCase();
+		// Add common MIME types
+		const mimeTypes: Record<string, string> = {
+			pdf: "application/pdf",
+			zip: "application/zip",
+			tar: "application/x-tar",
+			gz: "application/gzip",
+			rar: "application/vnd.rar",
+			"7z": "application/x-7z-compressed",
+			mp3: "audio/mpeg",
+			mp4: "video/mp4",
+			avi: "video/x-msvideo",
+			mov: "video/quicktime",
+			wav: "audio/wav",
+			ogg: "audio/ogg",
+			json: "application/json",
+			xml: "application/xml",
+			bin: "application/octet-stream",
+		};
+		return mimeTypes[ext || ""] || "application/octet-stream";
+	}
+
+	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 items-center justify-center bg-background p-8">
+				<div class="text-center max-w-md">
+					<div class="text-muted-foreground text-lg mb-4">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-16 w-16 mx-auto mb-4 text-muted-foreground/50"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="1.5"
+								d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+							/>
+						</svg>
+						<div class="font-medium text-foreground mb-2">${this.filename}</div>
+						<p class="text-sm">
+							${i18n("Preview not available for this file type.")} ${i18n("Click the download button above to view it on your computer.")}
+						</p>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"generic-artifact": GenericArtifact;
+	}
+}

packages/web-ui/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;
+	}
+}

packages/web-ui/src/tools/artifacts/artifacts.ts

@@ -11,9 +11,13 @@ import type { SandboxRuntimeProvider } from "../../components/sandbox/SandboxRun
 import { buildArtifactsDescription } from "../../prompts/tool-prompts.js";
 import { i18n } from "../../utils/i18n.js";
 import type { ArtifactElement } from "./ArtifactElement.js";
+import { DocxArtifact } from "./DocxArtifact.js";
+import { ExcelArtifact } from "./ExcelArtifact.js";
+import { GenericArtifact } from "./GenericArtifact.js";
 import { HtmlArtifact } from "./HtmlArtifact.js";
 import { ImageArtifact } from "./ImageArtifact.js";
 import { MarkdownArtifact } from "./MarkdownArtifact.js";
+import { PdfArtifact } from "./PdfArtifact.js";
 import { SvgArtifact } from "./SvgArtifact.js";
 import { TextArtifact } from "./TextArtifact.js";
 
@@ -93,11 +97,16 @@ export class ArtifactsPanel extends LitElement {
 	}
 
 	// Helper to determine file type from extension
-	private getFileType(filename: string): "html" | "svg" | "markdown" | "image" | "text" {
+	private getFileType(
+		filename: string,
+	): "html" | "svg" | "markdown" | "image" | "pdf" | "excel" | "docx" | "text" | "generic" {
 		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 === "pdf") return "pdf";
+		if (ext === "xlsx" || ext === "xls") return "excel";
+		if (ext === "docx") return "docx";
 		if (
 			ext === "png" ||
 			ext === "jpg" ||
@@ -108,7 +117,31 @@ export class ArtifactsPanel extends LitElement {
 			ext === "ico"
 		)
 			return "image";
-		return "text";
+		// Text files
+		if (
+			ext === "txt" ||
+			ext === "json" ||
+			ext === "xml" ||
+			ext === "yaml" ||
+			ext === "yml" ||
+			ext === "csv" ||
+			ext === "js" ||
+			ext === "ts" ||
+			ext === "jsx" ||
+			ext === "tsx" ||
+			ext === "py" ||
+			ext === "java" ||
+			ext === "c" ||
+			ext === "cpp" ||
+			ext === "h" ||
+			ext === "css" ||
+			ext === "scss" ||
+			ext === "sass" ||
+			ext === "less"
+		)
+			return "text";
+		// Everything else gets generic fallback
+		return "generic";
 	}
 
 	// Get or create artifact element
@@ -130,8 +163,16 @@ export class ArtifactsPanel extends LitElement {
 				element = new MarkdownArtifact();
 			} else if (type === "image") {
 				element = new ImageArtifact();
-			} else {
+			} else if (type === "pdf") {
+				element = new PdfArtifact();
+			} else if (type === "excel") {
+				element = new ExcelArtifact();
+			} else if (type === "docx") {
+				element = new DocxArtifact();
+			} else if (type === "text") {
 				element = new TextArtifact();
+			} else {
+				element = new GenericArtifact();
 			}
 			element.filename = filename;
 			element.content = content;

packages/web-ui/src/utils/i18n.ts

@@ -41,6 +41,11 @@ declare module "@mariozechner/mini-lit" {
 		"Failed to load PDF": string;
 		"Failed to load document": string;
 		"Failed to load spreadsheet": string;
+		"Error loading PDF": string;
+		"Error loading document": string;
+		"Error loading spreadsheet": string;
+		"Preview not available for this file type.": string;
+		"Click the download button above to view it on your computer.": string;
 		"No content available": string;
 		"Failed to display text content": string;
 		"API keys are required to use AI models. Get your keys from the provider's website.": string;
@@ -207,6 +212,12 @@ export const translations = {
 		"Failed to load PDF": "Failed to load PDF",
 		"Failed to load document": "Failed to load document",
 		"Failed to load spreadsheet": "Failed to load spreadsheet",
+		"Error loading PDF": "Error loading PDF",
+		"Error loading document": "Error loading document",
+		"Error loading spreadsheet": "Error loading spreadsheet",
+		"Preview not available for this file type.": "Preview not available for this file type.",
+		"Click the download button above to view it on your computer.":
+			"Click the download button above to view it on your computer.",
 		"No content available": "No content available",
 		"Failed to display text content": "Failed to display text content",
 		"API keys are required to use AI models. Get your keys from the provider's website.":
@@ -377,6 +388,12 @@ export const translations = {
 		"Failed to load PDF": "PDF konnte nicht geladen werden",
 		"Failed to load document": "Dokument konnte nicht geladen werden",
 		"Failed to load spreadsheet": "Tabelle konnte nicht geladen werden",
+		"Error loading PDF": "Fehler beim Laden des PDFs",
+		"Error loading document": "Fehler beim Laden des Dokuments",
+		"Error loading spreadsheet": "Fehler beim Laden der Tabelle",
+		"Preview not available for this file type.": "Vorschau für diesen Dateityp nicht verfügbar.",
+		"Click the download button above to view it on your computer.":
+			"Klicken Sie oben auf die Download-Schaltfläche, um die Datei auf Ihrem Computer anzuzeigen.",
 		"No content available": "Kein Inhalt verfügbar",
 		"Failed to display text content": "Textinhalt konnte nicht angezeigt werden",
 		"API keys are required to use AI models. Get your keys from the provider's website.":