<!-- source-hash: fe8d4775d6a56401707002b9d3c2df21 -->
A React component that displays an animated typing indicator with three pulsing dots, commonly used in chat interfaces to show when an assistant or user is typing a response.

## Key Components

- **ChatTypingIndicator** - Main component that renders animated dots with optional text
- **dotSizeClasses** - Responsive sizing options (sm, md, lg) for the pulsing dots
- **containerSizeClasses** - Container height classes that match the dot sizes
- **dotAnimation** - CSS keyframe animation for the pulsing effect

## Usage Example

```typescript
import { ChatTypingIndicator } from './chat-typing-indicator'

// Basic usage
<ChatTypingIndicator />

// With text and custom size
<ChatTypingIndicator 
  size="lg" 
  showText={true} 
  className="my-4"
/>

// Custom dot styling
<ChatTypingIndicator 
  size="md"
  dotClassName="bg-blue-500"
  showText={true}
/>
```

The component features three dots that pulse in sequence with staggered animation delays (0ms, 200ms, 400ms), creating a smooth wave effect. It supports three sizes (sm, md, lg), optional "Assistant is typing" text, and custom styling through className props. The animation uses CSS-in-JS with `dangerouslySetInnerHTML` to inject the keyframe animation directly into the component.