<!-- source-hash: 292551494d3d57529210cbc9d678d8e9 -->
Storybook stories for the `ChatContainer` composite component, demonstrating the full Fae client-facing chat shell across layout and state variants.

## Key Components

- **`FaeChatShell`** — Internal interactive wrapper that composes `ChatContainer`, `ChatHeader`, `ChatContent`, `ChatFooter`, `ChatMessageList`, `ChatInput`, `QuickActionWall`, and `ModelDisplay` into a working chat UI. Manages local message state and simulates user message submission.
- **`FAE_MESSAGES`** — Sample conversation seed data pre-populating the message list with a realistic Fae/user exchange.
- **`SAMPLE_QUICK_ACTIONS`** — Three quick-action chips (`Computer slow`, `Check updates`, `Internet problems`) used in the `QuickActionWall`.

### Exported Stories

| Story | Description |
|---|---|
| `Fae` | Default Fae chat shell with no extras |
| `FaeWithTicket` | Header shows active ticket info row |
| `ClientChatWithMspOrganization` | MSP branding bar rendered in header |
| `ClientChatMspOrganizationLoading` | MSP branding slot in skeleton/loading state |
| `FaeFullWidth` | Drops centered column; fills full container width |
| `FaeBareHeader` | Strips card chrome from header for embedded contexts |
| `FaeModelLoading` | `ModelDisplaySkeleton` shown while model metadata resolves |

## Usage Example

```typescript
// Render the default Fae story in isolation
import { Fae } from './ChatContainer.stories'

// In a test or custom harness:
<Fae.render />

// Or control FaeChatShell props directly:
<FaeChatShell
  withTicketInfo
  fullWidth
  modelLoading={false}
/>
```

## Source

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