@mariozechner/pi-web-ui 0.5.44 → 0.5.46

package/example/src/main.ts

@@ -1,57 +1,410 @@
-import { Button, icon } from "@mariozechner/mini-lit";
+import { Button, icon, Input } from "@mariozechner/mini-lit";
 import "@mariozechner/mini-lit/dist/ThemeToggle.js";
-import { ApiKeyPromptDialog, ApiKeysTab, ChatPanel, initAppStorage, ProxyTab, SettingsDialog } from "@mariozechner/pi-web-ui";
+import { getModel } from "@mariozechner/pi-ai";
+import {
+	Agent,
+	type AgentState,
+	ApiKeyPromptDialog,
+	ApiKeysTab,
+	type AppMessage,
+	AppStorage,
+	ChatPanel,
+	createJavaScriptReplTool,
+	IndexedDBStorageBackend,
+	// PersistentStorageDialog, // TODO: Fix - currently broken
+	ProviderKeysStore,
+	ProviderTransport,
+	ProxyTab,
+	SessionListDialog,
+	SessionsStore,
+	setAppStorage,
+	SettingsDialog,
+	SettingsStore,
+} from "@mariozechner/pi-web-ui";
 import { html, render } from "lit";
-import { Settings } from "lucide";
+import { Bell, History, Plus, Settings } from "lucide";
 import "./app.css";
+import { createSystemNotification, customMessageTransformer, registerCustomMessageRenderers } from "./custom-messages.js";
 
-// Initialize storage with default configuration (localStorage)
-initAppStorage();
+// Register custom message renderers
+registerCustomMessageRenderers();
 
-const systemPrompt = `You are a helpful AI assistant with access to various tools.
+// Create stores
+const settings = new SettingsStore();
+const providerKeys = new ProviderKeysStore();
+const sessions = new SessionsStore();
+
+// Gather configs
+const configs = [settings.getConfig(), SessionsStore.getMetadataConfig(), providerKeys.getConfig(), sessions.getConfig()];
+
+// Create backend
+const backend = new IndexedDBStorageBackend({
+	dbName: "pi-web-ui-example",
+	version: 1,
+	stores: configs,
+});
+
+// Wire backend to stores
+settings.setBackend(backend);
+providerKeys.setBackend(backend);
+sessions.setBackend(backend);
+
+// Create and set app storage
+const storage = new AppStorage(settings, providerKeys, sessions, backend);
+setAppStorage(storage);
+
+let currentSessionId: string | undefined;
+let currentTitle = "";
+let isEditingTitle = false;
+let agent: Agent;
+let chatPanel: ChatPanel;
+let agentUnsubscribe: (() => void) | undefined;
+
+const generateTitle = (messages: AppMessage[]): string => {
+	const firstUserMsg = messages.find((m) => m.role === "user");
+	if (!firstUserMsg || firstUserMsg.role !== "user") return "";
+
+	let text = "";
+	const content = firstUserMsg.content;
+
+	if (typeof content === "string") {
+		text = content;
+	} else {
+		const textBlocks = content.filter((c: any) => c.type === "text");
+		text = textBlocks.map((c: any) => c.text || "").join(" ");
+	}
+
+	text = text.trim();
+	if (!text) return "";
+
+	const sentenceEnd = text.search(/[.!?]/);
+	if (sentenceEnd > 0 && sentenceEnd <= 50) {
+		return text.substring(0, sentenceEnd + 1);
+	}
+	return text.length <= 50 ? text : text.substring(0, 47) + "...";
+};
+
+const shouldSaveSession = (messages: AppMessage[]): boolean => {
+	const hasUserMsg = messages.some((m: any) => m.role === "user");
+	const hasAssistantMsg = messages.some((m: any) => m.role === "assistant");
+	return hasUserMsg && hasAssistantMsg;
+};
+
+const saveSession = async () => {
+	if (!storage.sessions || !currentSessionId || !agent || !currentTitle) return;
+
+	const state = agent.state;
+	if (!shouldSaveSession(state.messages)) return;
+
+	try {
+		// Create session data
+		const sessionData = {
+			id: currentSessionId,
+			title: currentTitle,
+			model: state.model!,
+			thinkingLevel: state.thinkingLevel,
+			messages: state.messages,
+			createdAt: new Date().toISOString(),
+			lastModified: new Date().toISOString(),
+		};
+
+		// Create session metadata
+		const metadata = {
+			id: currentSessionId,
+			title: currentTitle,
+			createdAt: sessionData.createdAt,
+			lastModified: sessionData.lastModified,
+			messageCount: state.messages.length,
+			usage: {
+				input: 0,
+				output: 0,
+				cacheRead: 0,
+				cacheWrite: 0,
+				cost: {
+					input: 0,
+					output: 0,
+					cacheRead: 0,
+					cacheWrite: 0,
+					total: 0,
+				},
+			},
+			modelId: state.model?.id || null,
+			thinkingLevel: state.thinkingLevel,
+			preview: generateTitle(state.messages),
+		};
+
+		await storage.sessions.save(sessionData, metadata);
+	} catch (err) {
+		console.error("Failed to save session:", err);
+	}
+};
+
+const updateUrl = (sessionId: string) => {
+	const url = new URL(window.location.href);
+	url.searchParams.set("session", sessionId);
+	window.history.replaceState({}, "", url);
+};
+
+const createAgent = async (initialState?: Partial<AgentState>) => {
+	if (agentUnsubscribe) {
+		agentUnsubscribe();
+	}
+
+	const transport = new ProviderTransport();
+
+	agent = new Agent({
+		initialState: initialState || {
+			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.`;
+Feel free to use these tools when needed to provide accurate and helpful responses.`,
+			model: getModel("anthropic", "claude-sonnet-4-5-20250929"),
+			thinkingLevel: "off",
+			messages: [],
+			tools: [],
+		},
+		transport,
+		// Custom transformer: convert system notifications to user messages with <system> tags
+		messageTransformer: customMessageTransformer,
+	});
+
+	agentUnsubscribe = agent.subscribe((event: any) => {
+		if (event.type === "state-update") {
+			const messages = event.state.messages;
 
-// 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);
+			// Generate title after first successful response
+			if (!currentTitle && shouldSaveSession(messages)) {
+				currentTitle = generateTitle(messages);
+			}
+
+			// Create session ID on first successful save
+			if (!currentSessionId && shouldSaveSession(messages)) {
+				currentSessionId = crypto.randomUUID();
+				updateUrl(currentSessionId);
+			}
+
+			// Auto-save
+			if (currentSessionId) {
+				saveSession();
+			}
+
+			renderApp();
+		}
+	});
+
+	await chatPanel.setAgent(agent, {
+		onApiKeyRequired: async (provider: string) => {
+			return await ApiKeyPromptDialog.prompt(provider);
+		},
+		toolsFactory: (agent, agentInterface, artifactsPanel, runtimeProvidersFactory) => {
+			// Create javascript_repl tool with access to attachments + artifacts
+			const replTool = createJavaScriptReplTool();
+			replTool.runtimeProvidersFactory = runtimeProvidersFactory;
+			return [replTool];
+		}
+	});
 };
 
-// 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",
-				})}
+const loadSession = async (sessionId: string): Promise<boolean> => {
+	if (!storage.sessions) return false;
+
+	const sessionData = await storage.sessions.get(sessionId);
+	if (!sessionData) {
+		console.error("Session not found:", sessionId);
+		return false;
+	}
+
+	currentSessionId = sessionId;
+	const metadata = await storage.sessions.getMetadata(sessionId);
+	currentTitle = metadata?.title || "";
+
+	await createAgent({
+		model: sessionData.model,
+		thinkingLevel: sessionData.thinkingLevel,
+		messages: sessionData.messages,
+		tools: [],
+	});
+
+	updateUrl(sessionId);
+	renderApp();
+	return true;
+};
+
+const newSession = () => {
+	const url = new URL(window.location.href);
+	url.search = "";
+	window.location.href = url.toString();
+};
+
+// ============================================================================
+// RENDER
+// ============================================================================
+const renderApp = () => {
+	const app = document.getElementById("app");
+	if (!app) return;
+
+	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="flex items-center gap-2 px-4 py-">
+					${Button({
+						variant: "ghost",
+						size: "sm",
+						children: icon(History, "sm"),
+						onClick: () => {
+							SessionListDialog.open(
+								async (sessionId) => {
+									await loadSession(sessionId);
+								},
+								(deletedSessionId) => {
+									// Only reload if the current session was deleted
+									if (deletedSessionId === currentSessionId) {
+										newSession();
+									}
+								},
+							);
+						},
+						title: "Sessions",
+					})}
+					${Button({
+						variant: "ghost",
+						size: "sm",
+						children: icon(Plus, "sm"),
+						onClick: newSession,
+						title: "New Session",
+					})}
+
+					${currentTitle
+						? isEditingTitle
+							? html`<div class="flex items-center gap-2">
+									${Input({
+										type: "text",
+										value: currentTitle,
+										className: "text-sm w-64",
+										onChange: async (e: Event) => {
+											const newTitle = (e.target as HTMLInputElement).value.trim();
+											if (newTitle && newTitle !== currentTitle && storage.sessions && currentSessionId) {
+												await storage.sessions.updateTitle(currentSessionId, newTitle);
+												currentTitle = newTitle;
+											}
+											isEditingTitle = false;
+											renderApp();
+										},
+										onKeyDown: async (e: KeyboardEvent) => {
+											if (e.key === "Enter") {
+												const newTitle = (e.target as HTMLInputElement).value.trim();
+												if (newTitle && newTitle !== currentTitle && storage.sessions && currentSessionId) {
+													await storage.sessions.updateTitle(currentSessionId, newTitle);
+													currentTitle = newTitle;
+												}
+												isEditingTitle = false;
+												renderApp();
+											} else if (e.key === "Escape") {
+												isEditingTitle = false;
+												renderApp();
+											}
+										},
+									})}
+								</div>`
+							: html`<button
+									class="px-2 py-1 text-sm text-foreground hover:bg-secondary rounded transition-colors"
+									@click=${() => {
+										isEditingTitle = true;
+										renderApp();
+										requestAnimationFrame(() => {
+											const input = app?.querySelector('input[type="text"]') as HTMLInputElement;
+											if (input) {
+												input.focus();
+												input.select();
+											}
+										});
+									}}
+									title="Click to edit title"
+								>
+									${currentTitle}
+								</button>`
+						: html`<span class="text-base font-semibold text-foreground">Pi Web UI Example</span>`}
+				</div>
+				<div class="flex items-center gap-1 px-2">
+					${Button({
+						variant: "ghost",
+						size: "sm",
+						children: icon(Bell, "sm"),
+						onClick: () => {
+							// Demo: Inject custom message
+							if (agent) {
+								agent.appendMessage(
+									createSystemNotification("This is a custom message! It appears in the UI but is never sent to the LLM."),
+								);
+							}
+						},
+						title: "Demo: Add Custom Notification",
+					})}
+					<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>
+	`;
+
+	render(appHtml, app);
+};
+
+// ============================================================================
+// INIT
+// ============================================================================
+async function initApp() {
+	const app = document.getElementById("app");
+	if (!app) throw new Error("App container not found");
+
+	// Show loading
+	render(
+		html`
+			<div class="w-full h-screen flex items-center justify-center bg-background text-foreground">
+				<div class="text-muted-foreground">Loading...</div>
+			</div>
+		`,
+		app,
+	);
+
+	// TODO: Fix PersistentStorageDialog - currently broken
+	// Request persistent storage
+	// if (storage.sessions) {
+	// 	await PersistentStorageDialog.request();
+	// }
+
+	// Create ChatPanel
+	chatPanel = new ChatPanel();
+
+	// Check for session in URL
+	const urlParams = new URLSearchParams(window.location.search);
+	const sessionIdFromUrl = urlParams.get("session");
 
-		<!-- Chat Panel -->
-		${chatPanel}
-	</div>
-`;
+	if (sessionIdFromUrl) {
+		const loaded = await loadSession(sessionIdFromUrl);
+		if (!loaded) {
+			// Session doesn't exist, redirect to new session
+			newSession();
+			return;
+		}
+	} else {
+		await createAgent();
+	}
 
-const app = document.getElementById("app");
-if (!app) {
-	throw new Error("App container not found");
+	renderApp();
 }
 
-render(appHtml, app);
+initApp();

package/package.json

@@ -1,45 +1,50 @@
 {
-  "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"
+	"name": "@mariozechner/pi-web-ui",
+	"version": "0.5.46",
+	"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 --preserveWatchOutput\" \"tailwindcss -i ./src/app.css -o ./dist/app.css --watch\" \"npm run dev --prefix example\"",
+		"typecheck": "tsc --noEmit && cd example && tsc --noEmit",
+		"check": "npm run typecheck"
+	},
+	"dependencies": {
+		"@mariozechner/pi-ai": "^0.5.43",
+		"@mariozechner/pi-tui": "^0.5.46",
+		"docx-preview": "^0.3.7",
+		"jszip": "^3.10.1",
+		"lit": "^3.3.1",
+		"lucide": "^0.544.0",
+		"ollama": "^0.6.0",
+		"pdfjs-dist": "^5.4.296",
+		"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
+	},
+	"peerDependencies": {
+		"@mariozechner/mini-lit": "^0.1.10"
+	},
+	"devDependencies": {
+		"@mariozechner/mini-lit": "^0.1.10",
+		"@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/scripts/count-prompt-tokens.ts

@@ -0,0 +1,88 @@
+#!/usr/bin/env tsx
+/**
+ * Count tokens in system prompts using Anthropic's token counter API
+ */
+
+import * as prompts from "../src/prompts/prompts.js";
+
+const ANTHROPIC_API_KEY = process.env.ANTHROPIC_API_KEY;
+
+if (!ANTHROPIC_API_KEY) {
+	console.error("Error: ANTHROPIC_API_KEY environment variable not set");
+	process.exit(1);
+}
+
+interface TokenCountResponse {
+	input_tokens: number;
+}
+
+async function countTokens(text: string): Promise<number> {
+	const response = await fetch("https://api.anthropic.com/v1/messages/count_tokens", {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			"x-api-key": ANTHROPIC_API_KEY,
+			"anthropic-version": "2023-06-01",
+		},
+		body: JSON.stringify({
+			model: "claude-3-5-sonnet-20241022",
+			messages: [
+				{
+					role: "user",
+					content: text,
+				},
+			],
+		}),
+	});
+
+	if (!response.ok) {
+		const error = await response.text();
+		throw new Error(`API error: ${response.status} ${error}`);
+	}
+
+	const data = (await response.json()) as TokenCountResponse;
+	return data.input_tokens;
+}
+
+async function main() {
+	console.log("Counting tokens in prompts...\n");
+
+	const promptsToCount: Array<{ name: string; content: string }> = [
+		{
+			name: "ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RW",
+			content: prompts.ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RW,
+		},
+		{
+			name: "ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RO",
+			content: prompts.ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RO,
+		},
+		{
+			name: "ATTACHMENTS_RUNTIME_DESCRIPTION",
+			content: prompts.ATTACHMENTS_RUNTIME_DESCRIPTION,
+		},
+		{
+			name: "JAVASCRIPT_REPL_TOOL_DESCRIPTION (without runtime providers)",
+			content: prompts.JAVASCRIPT_REPL_TOOL_DESCRIPTION([]),
+		},
+		{
+			name: "ARTIFACTS_TOOL_DESCRIPTION (without runtime providers)",
+			content: prompts.ARTIFACTS_TOOL_DESCRIPTION([]),
+		},
+	];
+
+	let total = 0;
+
+	for (const prompt of promptsToCount) {
+		try {
+			const tokens = await countTokens(prompt.content);
+			total += tokens;
+			console.log(`${prompt.name}: ${tokens.toLocaleString()} tokens`);
+		} catch (error) {
+			console.error(`Error counting tokens for ${prompt.name}:`, error);
+		}
+	}
+
+	console.log(`\nTotal: ${total.toLocaleString()} tokens`);
+}
+
+main();