@mariozechner/pi-web-ui 0.5.44

package/example/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "pi-web-ui-example",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mariozechner/mini-lit": "^0.1.7",
+    "@mariozechner/pi-ai": "file:../../ai",
+    "@mariozechner/pi-web-ui": "file:../",
+    "@tailwindcss/vite": "^4.1.13",
+    "lit": "^3.3.1",
+    "lucide": "^0.544.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.3",
+    "vite": "^7.1.6"
+  }
+}

package/example/src/app.css

@@ -0,0 +1 @@
+@import "../../dist/app.css";

package/example/src/main.ts

@@ -0,0 +1,57 @@
+import { Button, icon } from "@mariozechner/mini-lit";
+import "@mariozechner/mini-lit/dist/ThemeToggle.js";
+import { ApiKeyPromptDialog, ApiKeysTab, ChatPanel, initAppStorage, ProxyTab, SettingsDialog } from "@mariozechner/pi-web-ui";
+import { html, render } from "lit";
+import { Settings } from "lucide";
+import "./app.css";
+
+// Initialize storage with default configuration (localStorage)
+initAppStorage();
+
+const systemPrompt = `You are a helpful AI assistant with access to various tools.
+
+Available tools:
+- JavaScript REPL: Execute JavaScript code in a sandboxed browser environment (can do calculations, get time, process data, create visualizations, etc.)
+- Artifacts: Create interactive HTML, SVG, Markdown, and text artifacts
+
+Feel free to use these tools when needed to provide accurate and helpful responses.`;
+
+// Create and configure the chat panel
+const chatPanel = new ChatPanel();
+chatPanel.systemPrompt = systemPrompt;
+chatPanel.additionalTools = [];
+chatPanel.onApiKeyRequired = async (provider: string) => {
+	return await ApiKeyPromptDialog.prompt(provider);
+};
+
+// Render the app structure
+const appHtml = html`
+	<div class="w-full h-screen flex flex-col bg-background text-foreground overflow-hidden">
+		<!-- Header -->
+		<div class="flex items-center justify-between border-b border-border shrink-0">
+			<div class="px-4 py-3">
+				<span class="text-base font-semibold text-foreground">Pi Web UI Example</span>
+			</div>
+			<div class="flex items-center gap-1 px-2">
+				<theme-toggle></theme-toggle>
+				${Button({
+					variant: "ghost",
+					size: "sm",
+					children: icon(Settings, "sm"),
+					onClick: () => SettingsDialog.open([new ApiKeysTab(), new ProxyTab()]),
+					title: "Settings",
+				})}
+			</div>
+		</div>
+
+		<!-- Chat Panel -->
+		${chatPanel}
+	</div>
+`;
+
+const app = document.getElementById("app");
+if (!app) {
+	throw new Error("App container not found");
+}
+
+render(appHtml, app);

package/example/src/test-sessions.ts

@@ -0,0 +1,104 @@
+const simpleHtml = {
+    "systemPrompt": "You are a helpful AI assistant with access to various tools.\n\nAvailable tools:\n- Calculator: Perform mathematical calculations\n- Current Time: Get the current date and time in any timezone\n- Artifacts: Create interactive HTML, SVG, Markdown, and text artifacts\n\nFeel free to use these tools when needed to provide accurate and helpful responses.",
+    "model": {
+        "id": "claude-sonnet-4-5-20250929",
+        "name": "Claude Sonnet 4.5",
+        "api": "anthropic-messages",
+        "provider": "anthropic",
+        "baseUrl": "https://api.anthropic.com",
+        "reasoning": true,
+        "input": [
+            "text",
+            "image"
+        ],
+        "cost": {
+            "input": 3,
+            "output": 15,
+            "cacheRead": 0.3,
+            "cacheWrite": 3.75
+        },
+        "contextWindow": 200000,
+        "maxTokens": 64000
+    },
+    "messages": [
+        {
+            "role": "user",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "simple html"
+                }
+            ]
+        },
+        {
+            "role": "assistant",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "I'll create a simple HTML page for you!"
+                },
+                {
+                    "type": "toolCall",
+                    "id": "toolu_01JXaq9rMAUt1goJ5tMQXgLh",
+                    "name": "artifacts",
+                    "arguments": {
+                        "command": "create",
+                        "filename": "index.html",
+                        "title": "Simple HTML Page",
+                        "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Simple HTML Page</title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            max-width: 800px;\n            margin: 0 auto;\n            padding: 20px;\n            background-color: #f5f5f5;\n        }\n        \n        header {\n            background-color: #4CAF50;\n            color: white;\n            padding: 20px;\n            text-align: center;\n            border-radius: 8px;\n        }\n        \n        main {\n            background-color: white;\n            padding: 20px;\n            margin-top: 20px;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        \n        button {\n            background-color: #4CAF50;\n            color: white;\n            padding: 10px 20px;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            font-size: 16px;\n        }\n        \n        button:hover {\n            background-color: #45a049;\n        }\n    </style>\n</head>\n<body>\n    <header>\n        <h1>Welcome to My Simple Page</h1>\n    </header>\n    \n    <main>\n        <h2>Hello!</h2>\n        <p>This is a simple HTML page with some basic styling.</p>\n        \n        <h3>Features:</h3>\n        <ul>\n            <li>Clean design</li>\n            <li>Responsive layout</li>\n            <li>Interactive button</li>\n        </ul>\n        \n        <button onclick=\"showMessage()\">Click Me!</button>\n        <p id=\"message\"></p>\n    </main>\n    \n    <script>\n        function showMessage() {\n            document.getElementById('message').textContent = '✨ Thanks for clicking!';\n        }\n    </script>\n</body>\n</html>"
+                    }
+                }
+            ],
+            "api": "anthropic-messages",
+            "provider": "anthropic",
+            "model": "claude-sonnet-4-5-20250929",
+            "usage": {
+                "input": 2108,
+                "output": 666,
+                "cacheRead": 0,
+                "cacheWrite": 0,
+                "cost": {
+                    "input": 0.006324,
+                    "output": 0.00999,
+                    "cacheRead": 0,
+                    "cacheWrite": 0,
+                    "total": 0.016314000000000002
+                }
+            },
+            "stopReason": "toolUse"
+        },
+        {
+            "role": "toolResult",
+            "toolCallId": "toolu_01JXaq9rMAUt1goJ5tMQXgLh",
+            "toolName": "artifacts",
+            "output": "Created file index.html\n\nExecution timed out. Partial logs:\nKeine Logs für index.html",
+            "isError": false
+        },
+        {
+            "role": "assistant",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "I've created a simple HTML page for you! It includes:\n\n- **Clean header** with a green background\n- **Main content area** with a white card-style design\n- **A list** showing some features\n- **An interactive button** that displays a message when clicked\n- **Responsive styling** that looks good on different screen sizes\n\nThe page has a light gray background and uses simple, clean styling. Try clicking the button to see it in action! \n\nWould you like me to modify anything or add more features?"
+                }
+            ],
+            "api": "anthropic-messages",
+            "provider": "anthropic",
+            "model": "claude-sonnet-4-5-20250929",
+            "usage": {
+                "input": 2811,
+                "output": 115,
+                "cacheRead": 0,
+                "cacheWrite": 0,
+                "cost": {
+                    "input": 0.008433,
+                    "output": 0.001725,
+                    "cacheRead": 0,
+                    "cacheWrite": 0,
+                    "total": 0.010158
+                }
+            },
+            "stopReason": "stop"
+        }
+    ]
+};

package/example/tsconfig.json

@@ -0,0 +1,15 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "ES2022",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"moduleResolution": "bundler",
+		"strict": true,
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"experimentalDecorators": true,
+		"useDefineForClassFields": false
+	},
+	"include": ["src/**/*"]
+}

package/example/vite.config.ts

@@ -0,0 +1,6 @@
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [tailwindcss()],
+});

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@mariozechner/pi-web-ui",
+  "version": "0.5.44",
+  "description": "Reusable web UI components for AI chat interfaces powered by @mariozechner/pi-ai",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./app.css": "./dist/app.css"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "tsc -p tsconfig.build.json && tailwindcss -i ./src/app.css -o ./dist/app.css --minify",
+    "dev": "concurrently --names \"build,example\" --prefix-colors \"cyan,green\" \"tsc -p tsconfig.build.json --watch\" \"tailwindcss -i ./src/app.css -o ./dist/app.css --watch\" \"npm run dev --prefix example\"",
+    "typecheck": "tsc --noEmit",
+    "check": "npm run typecheck"
+  },
+  "dependencies": {
+    "@mariozechner/mini-lit": "^0.1.8",
+    "@mariozechner/pi-ai": "^0.5.43",
+    "docx-preview": "^0.3.7",
+    "jszip": "^3.10.1",
+    "lit": "^3.3.1",
+    "lucide": "^0.544.0",
+    "pdfjs-dist": "^5.4.149",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.0.0-beta.14",
+    "concurrently": "^9.2.1",
+    "typescript": "^5.7.3"
+  },
+  "keywords": [
+    "ai",
+    "chat",
+    "ui",
+    "components",
+    "llm",
+    "web-components",
+    "mini-lit"
+  ],
+  "author": "Mario Zechner",
+  "license": "MIT"
+}

package/src/ChatPanel.ts

@@ -0,0 +1,214 @@
+import { Badge, html } from "@mariozechner/mini-lit";
+import { type AgentTool, getModel } from "@mariozechner/pi-ai";
+import { LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "./components/AgentInterface.js";
+import { AgentSession, type AgentSessionState, type ThinkingLevel } from "./state/agent-session.js";
+import { ArtifactsPanel } from "./tools/artifacts/index.js";
+import { createJavaScriptReplTool } from "./tools/javascript-repl.js";
+import { registerToolRenderer } from "./tools/renderer-registry.js";
+import { getAuthToken } from "./utils/auth-token.js";
+import { i18n } from "./utils/i18n.js";
+
+const BREAKPOINT = 800; // px - switch between overlay and side-by-side
+
+@customElement("pi-chat-panel")
+export class ChatPanel extends LitElement {
+	@state() private session!: AgentSession;
+	@state() private artifactsPanel!: ArtifactsPanel;
+	@state() private hasArtifacts = false;
+	@state() private artifactCount = 0;
+	@state() private showArtifactsPanel = false;
+	@state() private windowWidth = window.innerWidth;
+	@property({ type: String }) systemPrompt = "You are a helpful AI assistant.";
+	@property({ type: Array }) additionalTools: AgentTool<any, any>[] = [];
+	@property({ attribute: false }) sandboxUrlProvider?: () => string;
+	@property({ attribute: false }) onApiKeyRequired?: (provider: string) => Promise<boolean>;
+
+	private resizeHandler = () => {
+		this.windowWidth = window.innerWidth;
+		this.requestUpdate();
+	};
+
+	createRenderRoot() {
+		return this;
+	}
+
+	override async connectedCallback() {
+		super.connectedCallback();
+
+		// Listen to window resize
+		window.addEventListener("resize", this.resizeHandler);
+
+		// Ensure panel fills height and allows flex layout
+		this.style.display = "flex";
+		this.style.flexDirection = "column";
+		this.style.height = "100%";
+		this.style.minHeight = "0";
+
+		// Create JavaScript REPL tool with attachments provider
+		const javascriptReplTool = createJavaScriptReplTool();
+		if (this.sandboxUrlProvider) {
+			javascriptReplTool.sandboxUrlProvider = this.sandboxUrlProvider;
+		}
+
+		// Set up artifacts panel
+		this.artifactsPanel = new ArtifactsPanel();
+		if (this.sandboxUrlProvider) {
+			this.artifactsPanel.sandboxUrlProvider = this.sandboxUrlProvider;
+		}
+		registerToolRenderer("artifacts", this.artifactsPanel);
+
+		// Attachments provider for both REPL and artifacts
+		const getAttachments = () => {
+			// Get all attachments from conversation messages
+			const attachments: any[] = [];
+			for (const message of this.session.state.messages) {
+				if (message.role === "user") {
+					const content = Array.isArray(message.content) ? message.content : [message.content];
+					for (const block of content) {
+						if (typeof block !== "string" && block.type === "image") {
+							attachments.push({
+								id: `image-${attachments.length}`,
+								fileName: "image.png",
+								mimeType: block.mimeType || "image/png",
+								size: 0,
+								content: block.data,
+							});
+						}
+					}
+				}
+			}
+			return attachments;
+		};
+
+		javascriptReplTool.attachmentsProvider = getAttachments;
+		this.artifactsPanel.attachmentsProvider = getAttachments;
+
+		this.artifactsPanel.onArtifactsChange = () => {
+			const count = this.artifactsPanel.artifacts?.size ?? 0;
+			const created = count > this.artifactCount;
+			this.hasArtifacts = count > 0;
+			this.artifactCount = count;
+
+			// Auto-open when new artifacts are created
+			if (this.hasArtifacts && created) {
+				this.showArtifactsPanel = true;
+			}
+			this.requestUpdate();
+		};
+
+		this.artifactsPanel.onClose = () => {
+			this.showArtifactsPanel = false;
+			this.requestUpdate();
+		};
+
+		this.artifactsPanel.onOpen = () => {
+			this.showArtifactsPanel = true;
+			this.requestUpdate();
+		};
+
+		const initialState = {
+			systemPrompt: this.systemPrompt,
+			model: getModel("anthropic", "claude-sonnet-4-5-20250929"),
+			tools: [...this.additionalTools, javascriptReplTool, this.artifactsPanel.tool],
+			thinkingLevel: "off" as ThinkingLevel,
+			messages: [],
+		} satisfies Partial<AgentSessionState>;
+		// initialState = { ...initialState, ...(simpleHtml as any) };
+		// initialState = { ...initialState, ...(longSession as any) };
+
+		// Create agent session first so attachments provider works
+		this.session = new AgentSession({
+			initialState,
+			authTokenProvider: async () => getAuthToken(),
+			transportMode: "provider", // Use provider mode by default (API keys from storage, optional CORS proxy)
+		});
+
+		// Reconstruct artifacts panel from initial messages (session must exist first)
+		await this.artifactsPanel.reconstructFromMessages(initialState.messages);
+		this.hasArtifacts = this.artifactsPanel.artifacts.size > 0;
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener("resize", this.resizeHandler);
+	}
+
+	// Expose method to toggle artifacts panel
+	public toggleArtifactsPanel() {
+		this.showArtifactsPanel = !this.showArtifactsPanel;
+		this.requestUpdate();
+	}
+
+	// Check if artifacts panel is currently visible
+	public get artifactsPanelVisible(): boolean {
+		return this.showArtifactsPanel;
+	}
+
+	render() {
+		if (!this.session) {
+			return html`<div class="flex items-center justify-center h-full">
+				<div class="text-muted-foreground">Loading...</div>
+			</div>`;
+		}
+
+		const isMobile = this.windowWidth < BREAKPOINT;
+
+		// Set panel props
+		if (this.artifactsPanel) {
+			this.artifactsPanel.collapsed = !this.showArtifactsPanel;
+			this.artifactsPanel.overlay = isMobile;
+		}
+
+		return html`
+			<div class="relative w-full h-full overflow-hidden flex">
+				<div class="h-full" style="${!isMobile && this.showArtifactsPanel && this.hasArtifacts ? "width: 50%;" : "width: 100%;"}">
+						<agent-interface
+							.session=${this.session}
+							.enableAttachments=${true}
+							.enableModelSelector=${true}
+							.enableThinking=${true}
+							.showThemeToggle=${false}
+							.showDebugToggle=${false}
+							.onApiKeyRequired=${this.onApiKeyRequired}
+						></agent-interface>
+					</div>
+
+					<!-- Floating pill when artifacts exist and panel is collapsed -->
+					${
+						this.hasArtifacts && !this.showArtifactsPanel
+							? html`
+								<button
+									class="absolute z-30 top-4 left-1/2 -translate-x-1/2 pointer-events-auto"
+									@click=${() => {
+										this.showArtifactsPanel = true;
+										this.requestUpdate();
+									}}
+									title=${i18n("Show artifacts")}
+								>
+									${Badge(html`
+										<span class="inline-flex items-center gap-1">
+											<span>${i18n("Artifacts")}</span>
+											${
+												this.artifactCount > 1
+													? html`<span
+														class="text-[10px] leading-none bg-primary-foreground/20 text-primary-foreground rounded px-1 font-mono tabular-nums"
+														>${this.artifactCount}</span
+													>`
+													: ""
+											}
+										</span>
+									`)}
+								</button>
+							`
+							: ""
+					}
+
+				<div class="h-full ${isMobile ? "absolute inset-0 pointer-events-none" : ""}" style="${!isMobile ? (!this.hasArtifacts || !this.showArtifactsPanel ? "display: none;" : "width: 50%;") : ""}">
+					${this.artifactsPanel}
+				</div>
+			</div>
+		`;
+	}
+}

package/src/app.css

@@ -0,0 +1,44 @@
+/* Import Claude theme from mini-lit */
+@import "@mariozechner/mini-lit/styles/themes/default.css";
+
+/* Tell Tailwind to scan mini-lit components */
+/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind 4 source directive */
+@source "../../../node_modules/@mariozechner/mini-lit/dist";
+
+/* Import Tailwind */
+/* biome-ignore lint/correctness/noInvalidPositionAtImportRule: fuck you */
+@import "tailwindcss";
+
+body {
+	font-size: 16px;
+	-webkit-font-smoothing: antialiased;
+}
+
+* {
+	scrollbar-width: thin;
+	scrollbar-color: var(--color-border) rgba(0, 0, 0, 0);
+}
+
+*::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+	background-color: var(--color-border);
+	border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+	background-color: rgba(0, 0, 0, 0);
+}
+
+/* Fix cursor for dialog close buttons */
+.fixed.inset-0 button[aria-label*="Close"],
+.fixed.inset-0 button[type="button"] {
+	cursor: pointer;
+}