<!-- source-hash: 8291e5c1b6ca756b6bd0c1207bec4218 -->
Provides the React context for configuring the chat panel's API endpoints, navigation behavior, and identity settings across host and embedded deployments.

## Key Components

### `ChatRuntime` Interface

The core configuration shape with three top-level concerns:

- **`endpoints`** — All API URLs consumed by the chat panel:
  - `chatStreamUrl` — POST streaming chat
  - `approvalToolUrl` — POST agent tool approval/rejection
  - `commandsUrl` — GET slash-command catalog
  - `buildListUrl` — Entity-card list URL builder
  - `attachmentUploadUrl` / `attachmentViewUrlPrefix` — File attachment support
  - `identityUrl` — Session capability resolution
  - Optional: `findTicketUrl`, `ticketActionUrl`, `listEngagementsUrl`, `docsSearchUrl`, `docsResolveLinkUrl`, `emptyStateUrl`, `aiAgentConfigUrl`, `imageProxyUrlPrefix`, `ogPlaceholderUrl`, `supabaseStorageOrigin`

- **`navigation`** — Click-routing behavior:
  - `mode: 'host' | 'embed'` — Host uses in-app router; embed forces new-tab
  - `defaultContentOrigin` — Required for embed mode to absolutize relative URLs
  - `navigate` — Optional in-app routing callback (host mode)
  - `decideNewTab` / `openExternal` — Optional override hooks

- **`composeContentUrl`** (`ComposeContentUrl`) — Optional platform-aware content href composer; falls back to relative paths when unset

### Context Exports

- `ChatRuntimeContext` — The React context object
- `useChatRuntime()` — Hook to consume the context within the chat tree

## Usage Example

```typescript
// Host mode (e.g. hub.openframe.ai)
const runtime = React.useMemo<ChatRuntime>(() => ({
  endpoints: {
    chatStreamUrl: '/api/docs/chat',
    approvalToolUrl: '/api/chat/agent/confirm-tool',
    commandsUrl: '/api/docs/commands',
    buildListUrl: (type, ids) => `/api/list/${type}?ids=${ids.join(',')}`,
    attachmentUploadUrl: '/api/storage/upload/chat-attachments',
    attachmentViewUrlPrefix: '/api/storage/view/chat-attachments/',
    identityUrl: '/api/chat/identity',
  },
  navigation: {
    mode: 'host',
    navigate: ({ href }) => { router.push(href); return true },
  },
}), [router])

// Embedded app (e.g. user1.openframe.ai)
const embeddedRuntime = React.useMemo<ChatRuntime>(() => ({
  endpoints: {
    chatStreamUrl: '/api/mingo-guide/docs/chat',
    // ...other proxied paths
    buildListUrl: (type, ids) => null,
    attachmentUploadUrl: '/api/mingo-guide/storage/upload',
    attachmentViewUrlPrefix: 'https://hub.openframe.ai/api/storage/view/',
    identityUrl: '/api/mingo-guide/chat/identity',
  },
  navigation: {
    mode: 'embed',
    defaultContentOrigin: 'https://hub.openframe.ai',
  },
}), [])

return (
  <ChatRuntimeContext.Provider value={embeddedRuntime}>
    <ChatPanel />
  </ChatRuntimeContext.Provider>
)

// Inside chat components
const runtime = useChatRuntime()
const { chatStreamUrl } = runtime.endpoints
```

> **Performance note:** Always memoize the value passed to `<ChatRuntimeContext.Provider>`. Inline object literals recreated on each render will invalidate downstream `useMemo` consumers across the entire chat tree.

## Source

[`chat-runtime-context.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/chat-runtime-context.tsx)