Storybook stories for `ChatTypingIndicator`, documenting the animated three-dot typing indicator component across its size variants and configuration options. ## Key Components | Export | Type | Description | |---|---|---| | `Default` | `Story` | Medium-size dots, no label (baseline render) | | `Small` | `Story` | `size="sm"` — matches `ChatInput` in-flight state | | `Large` | `Story` | `size="lg"` large dot variant | | `WithText` | `Story` | Includes "Assistant is typing" label via `showText: true` | | `MutedDots` | `Story` | Overrides dot color using `dotClassName` | ## Usage Example ```typescript import { ChatTypingIndicator } from "../components/chat/chat-typing-indicator"; // Default medium dots // Small — used inside ChatInput while send is in flight // With label and custom dot color ``` ## Props Reference | Prop | Values | Description | |---|---|---| | `size` | `"sm"` \| `"md"` \| `"lg"` | Controls dot size; defaults to `"md"` | | `showText` | `boolean` | Renders "Assistant is typing" label alongside dots | | `dotClassName` | `string` | Tailwind class override for dot color (e.g., `bg-ods-text-secondary`) | ## Notes - Component is rendered under the message header as the Fae assistant streams a reply - The `sm` size variant is also embedded within `` during pending send state - Stories are wrapped in a `400px` max-width container with `var(--color-bg)` background to simulate real chat UI context **Source:** [`ChatTypingIndicator.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ChatTypingIndicator.stories.tsx)