Compound component set providing the structural layout for an AI chat interface, including header (with avatar, connection status, ticket info, and MSP branding), scrollable content area, and footer regions. ## Key Components | Export | Type | Description | |---|---|---| | `ChatContainer` | `forwardRef` | Root full-screen flex wrapper with ODS background and padding | | `ChatHeader` | `forwardRef` | Header with avatar, connection indicator, ticket status, MSP org card, and action buttons | | `ChatContent` | `forwardRef` | Flex-growing scrollable content region between header and footer | | `ChatFooter` | `forwardRef` | Sticky bottom area housing the input composer | | `ConnectionIndicator` | `FC` | Internal pulsing dot reflecting `connected` / `connecting` / `disconnected` states | ### `ChatHeader` Notable Props | Prop | Type | Default | Description | |---|---|---|---| | `connectionStatus` | `'connected' \| 'connecting' \| 'disconnected'` | `'disconnected'` | Drives `ConnectionIndicator` color | | `ticketInfo` | `object` | — | Renders a ticket title, meta, and `TicketStatusTag` in the sub-row | | `mspOrganization` | `object` | — | Shows `MspOrganizationCard` when no `ticketInfo` is present | | `fullWidth` | `boolean` | `false` | Drops the `max-w-ods-content-narrow` column constraint for side-panel use | | `bare` | `boolean` | `false` | Removes card chrome (border, background, rounding) | | `isLoading` | `boolean` | `false` | Renders skeleton placeholders in place of avatar and name | ### `ChatFooterProps` | Prop | Type | Description | |---|---|---| | `fullWidth` | `boolean` | Drops inner `max-w-ods-content-narrow` wrapper | | `contentClassName` | `string` *(deprecated)* | Legacy escape hatch for custom width/padding overrides | ## Usage Example ```typescript import { ChatContainer, ChatHeader, ChatContent, ChatFooter, } from "@openframe/ui/chat" export function MyChatPanel() { return ( startNewSession()} onClose={() => closePanel()} ticketInfo={{ title: "Printer not responding", meta: "#4821 · Open", status: "open", statusName: "Open", }} fullWidth /> {/* message bubbles */} {/* composer input */} ) } ``` ## Source [`chat-container.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/chat-container.tsx)