A React component that renders an animated three-dot typing indicator for chat interfaces, with configurable size, optional label text, and customizable dot styling.
## Key Components
### `ChatTypingIndicator`
A `forwardRef` component accepting `ChatTypingIndicatorProps`:
| Prop | Type | Default | Description |
|---|---|---|---|
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Controls dot and container dimensions |
| `showText` | `boolean` | `false` | Toggles "Assistant is typing" label |
| `dotClassName` | `string` | `undefined` | Overrides default dot color (`bg-ods-text-primary`) |
| `className` | `string` | `undefined` | Additional classes for the root element |
**Animation:** Uses an injected `dotPulse` keyframe (`scale` + `opacity` pulse over 1.4s) with staggered delays — `0ms`, `200ms`, `400ms` — across the three dots.
**Size variants:**
| Size | Dot | Container height |
|---|---|---|
| `sm` | `w-1 h-1` | `h-4` |
| `md` | `w-1.5 h-1.5` | `h-6` |
| `lg` | `w-2 h-2` | `h-8` |
## Usage Example
```typescript
import { ChatTypingIndicator } from "./chat-typing-indicator"
// Default medium indicator
// Large with label
// Custom dot color
// Inside a chat message bubble
```
> **Note:** The component injects a `