<!-- source-hash: 6d1785ee322c618d61267609c25a54fb -->
Portable, library-safe chat panel component that strips all hub-specific dependencies and routes navigation, identity, and transport decisions through a unified `useRequiredChatRuntime()` hook, enabling embedding in any host application.

## Key Components

### `EmbeddableChat` (default export)
The primary component rendering a full-featured AI chat panel with:
- **Controlled/uncontrolled open state** via `open`, `defaultOpen`, and `onOpenChange` props
- **Dual-mode support** — Guide (SSE/RAG) and Mingo (NATS/agent) modes with an in-panel toggle
- **Injected Mingo state** via `mingoState` for host-managed transport (survives panel unmounting)
- **Preview/marketing mode** via `previewMode` — renders a non-interactive visual mock

### `EmbeddableChatProps`
```typescript
interface EmbeddableChatProps {
  open?: boolean
  onOpenChange?: (open: boolean) => void
  defaultOpen?: boolean
  showInternalTrigger?: boolean
  previewMode?: boolean
  modes?: UseUnifiedChatModes         // Guide + Mingo transport config
  mingoState?: UnifiedChatState       // Host-injected Mingo state
  mingoDialogCapabilities?: { ... }   // Rename/archive/restore capabilities
  extras?: ChatCardDispatchExtras     // Entity card builder overrides
  enabledRagTableIds?: ReadonlyArray<string> | null
  suggestedQueries?: ReadonlyArray<string> | null
  baseRoute?: string
  chipBasePlatform?: string
}
```

### Key Runtime Dependencies
- **`useRequiredChatRuntime()`** — provides `user`, `source`, and navigation context (replaces hub's `useAuth`, `currentPlatform`, `useNavLink`)
- **`useUnifiedChat()`** — orchestrates Guide/Mingo mode switching and transport adapters
- **`useSseChatAdapter()`** — SSE transport for Guide mode (replaces `useDocChat`)
- **`NavLinkAnchorViaRuntime`** — runtime-aware link rendering (replaces hub's `NavLinkAnchor`)

## Usage Example

```typescript
import { EmbeddableChat } from '@openframe/lib'
import { HubRuntimeProvider } from './hub-runtime-provider'

function App() {
  return (
    <HubRuntimeProvider>
      <EmbeddableChat
        showInternalTrigger
        modes={{
          guide: { tableIdForDocumentType: (type) => myTableMap[type] ?? null },
          mingo: { natsConfig: myNatsConfig, fetchDialogs: fetchDialogs }
        }}
        enabledRagTableIds={['kb_articles', 'tickets']}
        suggestedQueries={['How do I reset a password?', 'Show open tickets']}
        extras={{ buildProgramCardProps: myBuilder }}
      />
    </HubRuntimeProvider>
  )
}
```

## Drawer Behavior

| Constant | Value | Description |
|---|---|---|
| `DRAWER_DEFAULT_WIDTH_RATIO` | `0.5` | 50% of viewport width on desktop |
| `DRAWER_WIDTH_KEY` | `mingo-chat-width-v3` | `localStorage` key for persisted width |
| `DRAWER_DEFAULT_WIDTH_PX` | `750` | SSR fallback before viewport is known |

## Source

[`embeddable-chat.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/embeddable-chat.tsx) · [OpenFrame OSS Lib](https://github.com/flamingo-stack/openframe-oss-lib) · Community: [OpenMSP Slack](https://join.slack.com/t/openmsp/shared_invite/zt-36bl7mx0h-3~U2nFH6nqHqoTPXMaHEHA)