> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/badlogic/pi-mono/llms.txt
> Use this file to discover all available pages before exploring further.

# Web UI Types

> Type definitions for the Web UI package

Core TypeScript types for the `@mariozechner/pi-web-ui` package.

## Import

```typescript theme={null}
import type {
  Attachment,
  MessageRenderer,
  ToolRenderer,
  SandboxRuntimeProvider,
  ConsoleLog,
  ArtifactMessage,
} from "@mariozechner/pi-web-ui";
```

## Message Types

### ArtifactMessage

Custom message type for artifact content (HTML, SVG, etc.).

```typescript theme={null}
interface ArtifactMessage {
  role: "artifact";
  type: "html" | "svg" | "markdown" | "text" | "image";
  title: string;
  content: string;
  timestamp: number;
}
```

Extend `CustomAgentMessages` to use in agent:

```typescript theme={null}
declare module "@mariozechner/pi-agent-core" {
  interface CustomAgentMessages {
    artifact: ArtifactMessage;
  }
}
```

### UserMessageWithAttachments

User message with file attachments.

```typescript theme={null}
interface UserMessageWithAttachments {
  role: "user";
  content: string | Content[];
  attachments?: Attachment[];
  timestamp: number;
}
```

## Attachment Types

### Attachment

File attachment data.

```typescript theme={null}
interface Attachment {
  name: string;
  type: string;  // MIME type
  data: string;  // base64 encoded
  size?: number; // bytes
}
```

### Example

```typescript theme={null}
const attachment: Attachment = {
  name: "screenshot.png",
  type: "image/png",
  data: "iVBORw0KGgoAAAANSUhEUgAA...",
  size: 12345,
};
```

## Renderer Types

### MessageRenderer

Custom message renderer function.

```typescript theme={null}
type MessageRenderer<T = any> = (props: {
  message: T;
  isStreaming?: boolean;
}) => React.ReactElement | null;
```

### Example

```typescript theme={null}
import { registerMessageRenderer } from "@mariozechner/pi-web-ui";

const artifactRenderer: MessageRenderer<ArtifactMessage> = ({ message }) => {
  return (
    <div className="artifact">
      <h3>{message.title}</h3>
      <div dangerouslySetInnerHTML={{ __html: message.content }} />
    </div>
  );
};

registerMessageRenderer("artifact", artifactRenderer);
```

### ToolRenderer

Custom tool result renderer.

```typescript theme={null}
interface ToolRenderResult {
  content: React.ReactElement;
  summary?: string;
}

type ToolRenderer = (props: {
  toolName: string;
  content: Content[];
  details: any;
  isStreaming?: boolean;
}) => ToolRenderResult;
```

### Example

```typescript theme={null}
import { registerToolRenderer } from "@mariozechner/pi-web-ui";

const searchRenderer: ToolRenderer = ({ details }) => {
  return {
    content: (
      <div>
        <h4>Search Results</h4>
        <p>Found {details.count} results</p>
      </div>
    ),
    summary: `Found ${details.count} results`,
  };
};

registerToolRenderer("search", searchRenderer);
```

## Sandbox Types

### SandboxRuntimeProvider

Runtime provider for sandboxed code execution.

```typescript theme={null}
interface SandboxRuntimeProvider {
  name: string;
  description: string;
  provideRuntime: (iframe: HTMLIFrameElement) => void;
}
```

### ConsoleLog

Console log entry.

```typescript theme={null}
interface ConsoleLog {
  type: "log" | "error" | "warn" | "info";
  message: string;
  timestamp?: number;
}
```

### DownloadableFile

File available for download from sandbox.

```typescript theme={null}
interface DownloadableFile {
  name: string;
  content: string | Blob;
  mimeType: string;
}
```

## Storage Types

### SessionData

Session data stored in IndexedDB.

```typescript theme={null}
interface SessionData {
  id: string;
  name?: string;
  messages: AgentMessage[];
  model: Model;
  thinkingLevel: ThinkingLevel;
  timestamp: number;
  lastModified: number;
}
```

### SessionMetadata

Session metadata for list display.

```typescript theme={null}
interface SessionMetadata {
  id: string;
  name?: string;
  timestamp: number;
  lastModified: number;
  messageCount: number;
}
```

## Settings Types

### CustomProvider

Custom API provider configuration.

```typescript theme={null}
interface CustomProvider {
  id: string;
  name: string;
  type: CustomProviderType;
  baseUrl: string;
  apiKey?: string;
  models?: string[];
}
```

### CustomProviderType

```typescript theme={null}
type CustomProviderType = "openai" | "anthropic" | "openai-compatible" | "auto-discovery";
```

## Component Props Types

### ChatPanelProps

```typescript theme={null}
interface ChatPanelProps {
  agent: Agent;
  onSendMessage: (text: string, attachments?: Attachment[]) => void;
  theme?: "light" | "dark";
  className?: string;
}
```

### AgentInterfaceProps

```typescript theme={null}
interface AgentInterfaceProps {
  agent: Agent;
  onSendMessage: (text: string, attachments?: Attachment[]) => void;
  showSidebar?: boolean;
  enableAttachments?: boolean;
  onOpenSettings?: () => void;
  onOpenModelSelector?: () => void;
}
```

### MessageListProps

```typescript theme={null}
interface MessageListProps {
  messages: AgentMessage[];
  streamMessage?: AgentMessage | null;
  className?: string;
}
```

### InputProps

```typescript theme={null}
interface InputProps {
  onSubmit: (text: string, attachments?: Attachment[]) => void;
  placeholder?: string;
  enableAttachments?: boolean;
  disabled?: boolean;
  className?: string;
}
```

### ModelSelectorProps

```typescript theme={null}
interface ModelSelectorProps {
  open: boolean;
  onClose: () => void;
  currentModel: Model;
  onSelectModel: (model: Model, thinkingLevel: ThinkingLevel) => void;
}
```

### SettingsDialogProps

```typescript theme={null}
interface SettingsDialogProps {
  open: boolean;
  onClose: () => void;
  tabs?: string[];
}
```

## Example: Type-Safe Usage

```typescript theme={null}
import type {
  Attachment,
  MessageRenderer,
  ToolRenderer,
  ArtifactMessage,
  SessionData,
} from "@mariozechner/pi-web-ui";
import { Agent } from "@mariozechner/pi-agent-core";
import { getModel } from "@mariozechner/pi-ai";

// Custom message type
declare module "@mariozechner/pi-agent-core" {
  interface CustomAgentMessages {
    artifact: ArtifactMessage;
  }
}

// Type-safe attachment
const attachment: Attachment = {
  name: "file.txt",
  type: "text/plain",
  data: btoa("Hello, world!"),
};

// Type-safe message renderer
const artifactRenderer: MessageRenderer<ArtifactMessage> = ({ message }) => {
  return <div>{message.content}</div>;
};

// Type-safe tool renderer
const searchRenderer: ToolRenderer = ({ details }) => {
  return {
    content: <div>Found {details.count} results</div>,
    summary: `${details.count} results`,
  };
};

// Type-safe session data
const session: SessionData = {
  id: "session-123",
  name: "My Chat",
  messages: [],
  model: getModel("anthropic", "claude-4.5-sonnet-20250514"),
  thinkingLevel: "medium",
  timestamp: Date.now(),
  lastModified: Date.now(),
};
```

## Storage Backend Types

### StorageBackend

Generic storage interface.

```typescript theme={null}
interface StorageBackend {
  get<T>(key: string): Promise<T | undefined>;
  set<T>(key: string, value: T): Promise<void>;
  delete(key: string): Promise<void>;
  list(): Promise<string[]>;
}
```

### IndexedDBConfig

IndexedDB configuration.

```typescript theme={null}
interface IndexedDBConfig {
  databaseName: string;
  version: number;
  stores: StoreConfig[];
}
```

### StoreConfig

IndexedDB store configuration.

```typescript theme={null}
interface StoreConfig {
  name: string;
  keyPath: string;
  indexes?: IndexConfig[];
}
```

### IndexConfig

IndexedDB index configuration.

```typescript theme={null}
interface IndexConfig {
  name: string;
  keyPath: string | string[];
  unique?: boolean;
}
```