<!-- source-hash: 748948c6317fda009af640633bb6c0e5 -->
Composable React components for building a full-screen chat interface shell, including layout, header, content area, and footer sections with ODS design token styling.

## Key Components

| Component | Description |
|-----------|-------------|
| `ChatContainer` | Root full-screen wrapper with ODS background and responsive padding |
| `ChatHeader` | Rich header with avatar, user info, connection status, ticket context, and action buttons |
| `ChatContent` | Flex-grow scrollable content region between header and footer |
| `ChatFooter` | Sticky footer wrapper with optional full-width or narrow-column layout |
| `ConnectionIndicator` | Internal dot badge showing `connected` / `connecting` / `disconnected` states using ODS attention tokens |

## Usage Example

```typescript
import {
  ChatContainer,
  ChatHeader,
  ChatContent,
  ChatFooter,
} from "./chat-container"

export function MyChatShell() {
  return (
    <ChatContainer>
      <ChatHeader
        userName='Grace "Fae" Meadows'
        userTitle="Your Personal Assistant"
        connectionStatus="connected"
        serverUrl="mcp.flamingo.run"
        showNewChat
        onNewChat={() => console.log("new chat")}
        onClose={() => console.log("close")}
        ticketInfo={{
          title: "Printer offline – Ticket #4821",
          meta: "Assigned to: J. Smith",
          status: "in-progress",
        }}
        fullWidth
      />
      <ChatContent>
        {/* message list */}
      </ChatContent>
      <ChatFooter fullWidth>
        {/* input bar */}
      </ChatFooter>
    </ChatContainer>
  )
}
```

## Notes

- `fullWidth` on both `ChatHeader` and `ChatFooter` drops the default `max-w-ods-content-narrow` (≈600px) column — use this when embedding the chat in a side panel.
- `ChatFooter.contentClassName` is a legacy escape hatch for custom `max-w` overrides; prefer `fullWidth` for standard full-panel layouts.
- `ChatHeader` accepts a `bare` prop to remove card chrome (shadow, border, background) for flush-mounted contexts.
- All components are `forwardRef`-compatible and spread unknown props to their root `<div>`.