@mariozechner/pi-web-ui 0.5.44 → 0.5.45

package/README.md

@@ -6,13 +6,13 @@ Built with [mini-lit](https://github.com/mariozechner/mini-lit) web components a
 
 ## Features
 
-- 🎨 **Modern Chat Interface** - Complete chat UI with message history, streaming responses, and tool execution
-- 🔧 **Tool Support** - Built-in renderers for calculator, bash, time, and custom tools
-- 📎 **Attachments** - PDF, Office documents, images with preview and text extraction
-- 🎭 **Artifacts** - HTML, SVG, Markdown, and text artifact rendering with sandboxed execution
-- 🔌 **Pluggable Transports** - Direct API calls or proxy server support
-- 🌐 **Platform Agnostic** - Works in browser extensions, web apps, VS Code extensions, Electron apps
-- 🎯 **TypeScript** - Full type safety with TypeScript
+- Modern Chat Interface - Complete chat UI with message history, streaming responses, and tool execution
+- Tool Support - Built-in renderers for calculator, bash, time, and custom tools
+- Attachments - PDF, Office documents, images with preview and text extraction
+- Artifacts - HTML, SVG, Markdown, and text artifact rendering with sandboxed execution
+- Pluggable Transports - Direct API calls or proxy server support
+- Platform Agnostic - Works in browser extensions, web apps, VS Code extensions, Electron apps
+- TypeScript - Full type safety with TypeScript
 
 ## Installation
 
@@ -25,14 +25,35 @@ npm install @mariozechner/pi-web-ui
 See the [example](./example) directory for a complete working application.
 
 ```typescript
-import { ChatPanel } from '@mariozechner/pi-web-ui';
-import { calculateTool, getCurrentTimeTool } from '@mariozechner/pi-ai';
+import { Agent, ChatPanel, ProviderTransport, AppStorage,
+         SessionIndexedDBBackend, setAppStorage } from '@mariozechner/pi-web-ui';
+import { getModel } from '@mariozechner/pi-ai';
 import '@mariozechner/pi-web-ui/app.css';
 
-// Create a chat panel
+// Set up storage
+const storage = new AppStorage({
+  sessions: new SessionIndexedDBBackend('my-app-sessions'),
+});
+setAppStorage(storage);
+
+// Create transport
+const transport = new ProviderTransport();
+
+// Create agent
+const agent = new Agent({
+  initialState: {
+    systemPrompt: 'You are a helpful assistant.',
+    model: getModel('anthropic', 'claude-sonnet-4-5-20250929'),
+    thinkingLevel: 'off',
+    messages: [],
+    tools: [],
+  },
+  transport,
+});
+
+// Create chat panel and attach agent
 const chatPanel = new ChatPanel();
-chatPanel.systemPrompt = 'You are a helpful assistant.';
-chatPanel.additionalTools = [calculateTool, getCurrentTimeTool];
+await chatPanel.setAgent(agent);
 
 document.body.appendChild(chatPanel);
 ```
@@ -49,96 +70,94 @@ npm run dev
 
 ### ChatPanel
 
-The main chat interface component. Manages agent sessions, model selection, and conversation flow.
+The main chat interface component. Displays messages, handles input, and coordinates with the Agent.
 
 ```typescript
-import { ChatPanel } from '@mariozechner/pi-web-ui';
+import { ChatPanel, ApiKeyPromptDialog } from '@mariozechner/pi-web-ui';
 
-const panel = new ChatPanel({
-  initialModel: 'anthropic/claude-sonnet-4-20250514',
-  systemPrompt: 'You are a helpful assistant.',
-  transportMode: 'direct', // or 'proxy'
-});
-```
-
-### AgentInterface
-
-Lower-level chat interface for custom implementations.
+const chatPanel = new ChatPanel();
 
-```typescript
-import { AgentInterface } from '@mariozechner/pi-web-ui';
+// Optional: Handle API key prompts
+chatPanel.onApiKeyRequired = async (provider: string) => {
+  return await ApiKeyPromptDialog.prompt(provider);
+};
 
-const chat = new AgentInterface();
-chat.session = myAgentSession;
+// Attach an agent
+await chatPanel.setAgent(agent);
 ```
 
-## State Management
-
-### AgentSession
+### Agent
 
-Manages conversation state, tool execution, and streaming.
+Core state manager that handles conversation state, tool execution, and streaming.
 
 ```typescript
-import { AgentSession, DirectTransport } from '@mariozechner/pi-web-ui';
-import { getModel, calculateTool, getCurrentTimeTool } from '@mariozechner/pi-ai';
+import { Agent, ProviderTransport } from '@mariozechner/pi-web-ui';
+import { getModel } from '@mariozechner/pi-ai';
 
-const session = new AgentSession({
+const agent = new Agent({
   initialState: {
-    model: getModel('anthropic', 'claude-3-5-haiku-20241022'),
+    model: getModel('anthropic', 'claude-sonnet-4-5-20250929'),
     systemPrompt: 'You are a helpful assistant.',
-    tools: [calculateTool, getCurrentTimeTool],
+    thinkingLevel: 'off',
     messages: [],
+    tools: [],
   },
-  transportMode: 'direct',
+  transport: new ProviderTransport(),
 });
 
-// Subscribe to state changes
-session.subscribe((state) => {
-  console.log('Messages:', state.messages);
-  console.log('Streaming:', state.streaming);
+// Subscribe to events
+agent.subscribe((event) => {
+  if (event.type === 'state-update') {
+    console.log('Messages:', event.state.messages);
+  }
 });
 
 // Send a message
-await session.send('What is 25 * 18?');
+await agent.send('Hello!');
+```
+
+### AgentInterface
+
+Lower-level chat interface for custom implementations. Used internally by ChatPanel.
+
+```typescript
+import { AgentInterface } from '@mariozechner/pi-web-ui';
+
+const chat = new AgentInterface();
+await chat.setAgent(agent);
 ```
 
-### Transports
+## Transports
 
 Transport layers handle communication with AI providers.
 
-#### DirectTransport
+### ProviderTransport
 
-Calls AI provider APIs directly from the browser using API keys stored locally.
+The main transport that calls AI provider APIs using stored API keys.
 
 ```typescript
-import { DirectTransport, KeyStore } from '@mariozechner/pi-web-ui';
+import { ProviderTransport } from '@mariozechner/pi-web-ui';
 
-// Set API keys
-const keyStore = new KeyStore();
-await keyStore.setKey('anthropic', 'sk-ant-...');
-await keyStore.setKey('openai', 'sk-...');
+const transport = new ProviderTransport();
 
-// Use direct transport (default)
-const session = new AgentSession({
-  transportMode: 'direct',
-  // ...
+const agent = new Agent({
+  initialState: { /* ... */ },
+  transport,
 });
 ```
 
-#### ProxyTransport
+### AppTransport
 
-Routes requests through a proxy server using auth tokens.
+Alternative transport for proxying requests through a custom server.
 
 ```typescript
-import { ProxyTransport, setAuthToken } from '@mariozechner/pi-web-ui';
+import { AppTransport } from '@mariozechner/pi-web-ui';
 
-// Set auth token
-setAuthToken('your-auth-token');
+const transport = new AppTransport();
 
-// Use proxy transport
-const session = new AgentSession({
-  transportMode: 'proxy',
-  // ...
+const agent = new Agent({
+  initialState: { /* ... */ },
+  transport,
 });
 ```
 
@@ -163,22 +182,46 @@ const myRenderer: ToolRenderer = {
 registerToolRenderer('my_tool', myRenderer);
 ```
 
-## Artifacts
+## Storage
+
+The package provides flexible storage backends for API keys, settings, and session persistence.
+
+### AppStorage
 
-Render rich content with sandboxed execution.
+Central storage configuration for the application.
 
 ```typescript
-import { artifactTools } from '@mariozechner/pi-web-ui';
-import { getModel } from '@mariozechner/pi-ai';
+import { AppStorage, setAppStorage, SessionIndexedDBBackend } from '@mariozechner/pi-web-ui';
 
-const session = new AgentSession({
-  initialState: {
-    tools: [...artifactTools],
-    // ...
-  }
+const storage = new AppStorage({
+  sessions: new SessionIndexedDBBackend('my-app-sessions'),
 });
 
-// AI can now create HTML artifacts, SVG diagrams, etc.
+setAppStorage(storage);
+```
+
+### Available Backends
+
+- `LocalStorageBackend` - Uses browser localStorage
+- `IndexedDBBackend` - Uses IndexedDB for larger data
+- `SessionIndexedDBBackend` - Specialized for session storage
+- `WebExtensionStorageBackend` - For browser extensions using chrome.storage API
+
+### Session Management
+
+```typescript
+import { getAppStorage } from '@mariozechner/pi-web-ui';
+
+const storage = getAppStorage();
+
+// Save session
+await storage.sessions?.saveSession(sessionId, agentState, undefined, title);
+
+// Load session
+const sessionData = await storage.sessions?.loadSession(sessionId);
+
+// List sessions
+const sessions = await storage.sessions?.listSessions();
 ```
 
 ## Styling
@@ -198,55 +241,91 @@ Or customize with your own Tailwind config:
 @tailwind utilities;
 ```
 
-## Platform Integration
+## Dialogs
 
-### Browser Extension
+The package includes several dialog components for common interactions.
+
+### SettingsDialog
+
+Settings dialog with tabbed interface for API keys, proxy configuration, etc.
 
 ```typescript
-import { ChatPanel, KeyStore } from '@mariozechner/pi-web-ui';
+import { SettingsDialog, ApiKeysTab, ProxyTab } from '@mariozechner/pi-web-ui';
 
-// Use chrome.storage for persistence
-const keyStore = new KeyStore({
-  get: async (key) => {
-    const result = await chrome.storage.local.get(key);
-    return result[key];
-  },
-  set: async (key, value) => {
-    await chrome.storage.local.set({ [key]: value });
-  }
+// Open settings with tabs
+SettingsDialog.open([new ApiKeysTab(), new ProxyTab()]);
+```
+
+### SessionListDialog
+
+Display and load saved sessions.
+
+```typescript
+import { SessionListDialog } from '@mariozechner/pi-web-ui';
+
+SessionListDialog.open(async (sessionId) => {
+  await loadSession(sessionId);
 });
 ```
 
-### Web Application
+### ApiKeyPromptDialog
+
+Prompt user for API key when needed.
 
 ```typescript
-import { ChatPanel } from '@mariozechner/pi-web-ui';
+import { ApiKeyPromptDialog } from '@mariozechner/pi-web-ui';
 
-// Uses localStorage by default
-const panel = new ChatPanel();
-document.querySelector('#app').appendChild(panel);
+const apiKey = await ApiKeyPromptDialog.prompt('anthropic');
 ```
 
-### VS Code Extension
+### PersistentStorageDialog
+
+Request persistent storage permission.
 
 ```typescript
-import { AgentSession, DirectTransport } from '@mariozechner/pi-web-ui';
+import { PersistentStorageDialog } from '@mariozechner/pi-web-ui';
 
-// Custom storage using VS Code's globalState
-const storage = {
-  get: async (key) => context.globalState.get(key),
-  set: async (key, value) => context.globalState.update(key, value)
-};
+await PersistentStorageDialog.request();
+```
+
+## Platform Integration
+
+### Browser Extension
+
+```typescript
+import { AppStorage, WebExtensionStorageBackend, Agent, ProviderTransport } from '@mariozechner/pi-web-ui';
+
+const storage = new AppStorage({
+  providerKeys: new WebExtensionStorageBackend(),
+  settings: new WebExtensionStorageBackend(),
+});
+setAppStorage(storage);
+```
+
+### Web Application
+
+```typescript
+import { AppStorage, SessionIndexedDBBackend, setAppStorage } from '@mariozechner/pi-web-ui';
+
+const storage = new AppStorage({
+  sessions: new SessionIndexedDBBackend('my-app-sessions'),
+});
+setAppStorage(storage);
 ```
 
 ## Examples
 
-See the [browser-extension](../browser-extension) package for a complete implementation example.
+- [example/](./example) - Complete web application with session management
+- [sitegeist](https://github.com/badlogic/sitegeist) - Browser extension for AI-powered web navigation
 
 ## API Reference
 
 See [src/index.ts](src/index.ts) for the full public API.
 
+## Known Bugs
+
+- **PersistentStorageDialog**: Currently broken and commented out in examples. The dialog for requesting persistent storage does not work correctly and needs to be fixed.
+
 ## License
 
 MIT

package/dist/ChatPanel.d.ts

@@ -1,23 +1,28 @@
-import { type AgentTool } from "@mariozechner/pi-ai";
 import { LitElement } from "lit";
+import type { Agent } from "./agent/agent.js";
 import "./components/AgentInterface.js";
+import type { AgentTool } from "@mariozechner/pi-ai";
+import type { AgentInterface } from "./components/AgentInterface.js";
+import type { SandboxRuntimeProvider } from "./components/sandbox/SandboxRuntimeProvider.js";
+import { ArtifactsPanel } from "./tools/artifacts/index.js";
 export declare class ChatPanel extends LitElement {
-    private session;
-    private artifactsPanel;
+    agent?: Agent;
+    agentInterface?: AgentInterface;
+    artifactsPanel?: ArtifactsPanel;
     private hasArtifacts;
     private artifactCount;
     private showArtifactsPanel;
     private windowWidth;
-    systemPrompt: string;
-    additionalTools: AgentTool<any, any>[];
-    sandboxUrlProvider?: () => string;
-    onApiKeyRequired?: (provider: string) => Promise<boolean>;
     private resizeHandler;
     createRenderRoot(): this;
-    connectedCallback(): Promise<void>;
+    connectedCallback(): void;
     disconnectedCallback(): void;
-    toggleArtifactsPanel(): void;
-    get artifactsPanelVisible(): boolean;
+    setAgent(agent: Agent, config?: {
+        onApiKeyRequired?: (provider: string) => Promise<boolean>;
+        onBeforeSend?: () => void | Promise<void>;
+        sandboxUrlProvider?: () => string;
+        toolsFactory?: (agent: Agent, agentInterface: AgentInterface, artifactsPanel: ArtifactsPanel, runtimeProvidersFactory: () => SandboxRuntimeProvider[]) => AgentTool<any>[];
+    }): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=ChatPanel.d.ts.map

package/dist/ChatPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../src/ChatPanel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,gCAAgC,CAAC;AAUxC,qBACa,SAAU,SAAQ,UAAU;IAC/B,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,cAAc,CAAkB;IACxC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,WAAW,CAAqB;IACrB,YAAY,SAAqC;IAClD,eAAe,EAAE,SAAS,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAM;IACvC,kBAAkB,CAAC,EAAE,MAAM,MAAM,CAAC;IAClC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAE1F,OAAO,CAAC,aAAa,CAGnB;IAEF,gBAAgB;IAID,iBAAiB;IAgGvB,oBAAoB;IAMtB,oBAAoB;IAM3B,IAAW,qBAAqB,IAAI,OAAO,CAE1C;IAED,MAAM;CAiEN"}
+{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../src/ChatPanel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,gCAAgC,CAAC;AACxC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AAC7F,OAAO,EAAE,cAAc,EAAyB,MAAM,4BAA4B,CAAC;AAOnF,qBACa,SAAU,SAAQ,UAAU;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IACvC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,WAAW,CAAK;IAEjC,OAAO,CAAC,aAAa,CAGnB;IAEF,gBAAgB;IAIP,iBAAiB;IAejB,oBAAoB;IAKvB,QAAQ,CACb,KAAK,EAAE,KAAK,EACZ,MAAM,CAAC,EAAE;QACR,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1D,YAAY,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAC1C,kBAAkB,CAAC,EAAE,MAAM,MAAM,CAAC;QAClC,YAAY,CAAC,EAAE,CACd,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,uBAAuB,EAAE,MAAM,sBAAsB,EAAE,KACnD,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;KACtB;IAuFF,MAAM;CAkDN"}