@mariozechner/pi-web-ui 0.27.9 → 0.28.0

package/example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-web-ui-example",
-  "version": "1.15.9",
+  "version": "1.16.0",
   "private": true,
   "type": "module",
   "scripts": {

package/example/src/custom-messages.ts

@@ -1,8 +1,8 @@
+import { Alert } from "@mariozechner/mini-lit/dist/Alert.js";
 import type { Message } from "@mariozechner/pi-ai";
-import { html } from "lit";
-import { registerMessageRenderer } from "@mariozechner/pi-web-ui";
 import type { AppMessage, MessageRenderer } from "@mariozechner/pi-web-ui";
-import { Alert } from "@mariozechner/mini-lit/dist/Alert.js";
+import { registerMessageRenderer } from "@mariozechner/pi-web-ui";
+import { html } from "lit";
 
 // ============================================================================
 // 1. EXTEND AppMessage TYPE VIA DECLARATION MERGING
@@ -85,10 +85,7 @@ export function customMessageTransformer(messages: AppMessage[]): Message[] {
 
 			// Keep LLM-compatible messages + custom messages
 			return (
-				m.role === "user" ||
-				m.role === "assistant" ||
-				m.role === "toolResult" ||
-				m.role === "system-notification"
+				m.role === "user" || m.role === "assistant" || m.role === "toolResult" || m.role === "system-notification"
 			);
 		})
 		.map((m) => {
@@ -103,7 +100,7 @@ export function customMessageTransformer(messages: AppMessage[]): Message[] {
 
 			// Strip attachments from user messages
 			if (m.role === "user") {
-				const { attachments, ...rest } = m as any;
+				const { attachments: _, ...rest } = m as any;
 				return rest as Message;
 			}
 

package/example/src/main.ts

@@ -7,27 +7,31 @@ import {
 	type AppMessage,
 	AppStorage,
 	ChatPanel,
-	createJavaScriptReplTool,
 	CustomProvidersStore,
+	createJavaScriptReplTool,
 	IndexedDBStorageBackend,
 	// PersistentStorageDialog, // TODO: Fix - currently broken
 	ProviderKeysStore,
-	ProviderTransport,
 	ProvidersModelsTab,
+	ProviderTransport,
 	ProxyTab,
 	SessionListDialog,
 	SessionsStore,
-	setAppStorage,
 	SettingsDialog,
 	SettingsStore,
+	setAppStorage,
 } from "@mariozechner/pi-web-ui";
 import { html, render } from "lit";
 import { Bell, History, Plus, Settings } from "lucide";
 import "./app.css";
-import { createSystemNotification, customMessageTransformer, registerCustomMessageRenderers } from "./custom-messages.js";
-import { Button } from "@mariozechner/mini-lit/dist/Button.js";
 import { icon } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
 import { Input } from "@mariozechner/mini-lit/dist/Input.js";
+import {
+	createSystemNotification,
+	customMessageTransformer,
+	registerCustomMessageRenderers,
+} from "./custom-messages.js";
 
 // Register custom message renderers
 registerCustomMessageRenderers();
@@ -92,7 +96,7 @@ const generateTitle = (messages: AppMessage[]): string => {
 	if (sentenceEnd > 0 && sentenceEnd <= 50) {
 		return text.substring(0, sentenceEnd + 1);
 	}
-	return text.length <= 50 ? text : text.substring(0, 47) + "...";
+	return text.length <= 50 ? text : `${text.substring(0, 47)}...`;
 };
 
 const shouldSaveSession = (messages: AppMessage[]): boolean => {
@@ -211,12 +215,12 @@ Feel free to use these tools when needed to provide accurate and helpful respons
 		onApiKeyRequired: async (provider: string) => {
 			return await ApiKeyPromptDialog.prompt(provider);
 		},
-		toolsFactory: (agent, agentInterface, artifactsPanel, runtimeProvidersFactory) => {
+		toolsFactory: (_agent, _agentInterface, _artifactsPanel, runtimeProvidersFactory) => {
 			// Create javascript_repl tool with access to attachments + artifacts
 			const replTool = createJavaScriptReplTool();
 			replTool.runtimeProvidersFactory = runtimeProvidersFactory;
 			return [replTool];
-		}
+		},
 	});
 };
 
@@ -290,9 +294,10 @@ const renderApp = () => {
 						title: "New Session",
 					})}
 
-					${currentTitle
-						? isEditingTitle
-							? html`<div class="flex items-center gap-2">
+					${
+						currentTitle
+							? isEditingTitle
+								? html`<div class="flex items-center gap-2">
 									${Input({
 										type: "text",
 										value: currentTitle,
@@ -322,7 +327,7 @@ const renderApp = () => {
 										},
 									})}
 								</div>`
-							: html`<button
+								: html`<button
 									class="px-2 py-1 text-sm text-foreground hover:bg-secondary rounded transition-colors"
 									@click=${() => {
 										isEditingTitle = true;
@@ -339,7 +344,8 @@ const renderApp = () => {
 								>
 									${currentTitle}
 								</button>`
-						: html`<span class="text-base font-semibold text-foreground">Pi Web UI Example</span>`}
+							: 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({
@@ -350,7 +356,9 @@ const renderApp = () => {
 							// 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."),
+									createSystemNotification(
+										"This is a custom message! It appears in the UI but is never sent to the LLM.",
+									),
 								);
 							}
 						},

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mariozechner/pi-web-ui",
-	"version": "0.27.9",
+	"version": "0.28.0",
 	"description": "Reusable web UI components for AI chat interfaces powered by @mariozechner/pi-ai",
 	"type": "module",
 	"main": "dist/index.js",
@@ -14,12 +14,12 @@
 		"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\"",
 		"dev:tsc": "concurrently --names \"build\" --prefix-colors \"cyan\" \"tsc -p tsconfig.build.json --watch --preserveWatchOutput\" \"tailwindcss -i ./src/app.css -o ./dist/app.css --watch\"",
-		"check": "tsgo --noEmit && cd example && tsgo --noEmit"
+		"check": "biome check --write . && tsc --noEmit && cd example && biome check --write . && tsc --noEmit"
 	},
 	"dependencies": {
 		"@lmstudio/sdk": "^1.5.0",
-		"@mariozechner/pi-ai": "^0.27.9",
-		"@mariozechner/pi-tui": "^0.27.9",
+		"@mariozechner/pi-ai": "^0.28.0",
+		"@mariozechner/pi-tui": "^0.28.0",
 		"docx-preview": "^0.3.7",
 		"jszip": "^3.10.1",
 		"lucide": "^0.544.0",