import { Canvas, Meta } from '@storybook/blocks'
import * as Stories from './ChatBox.stories'

<Meta of={Stories} />

# ChatBox

A floating chat widget for customer support with AI responses, email capture, and session persistence.

## Usage

```tsx
import { ChatBox } from '@/components/chatbox'

<ChatBox
  title="Support"
  welcomeMessage="How can I help you today?"
  enableEmailCapture
  position="bottom-right"
/>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `"Support"` | Header title |
| `welcomeMessage` | `string` | - | Initial greeting message |
| `placeholder` | `string` | `"Type your message..."` | Input placeholder |
| `position` | `'bottom-right' \| 'bottom-left'` | `'bottom-right'` | Trigger button position |
| `showOnMount` | `boolean` | `false` | Auto-open on page load |
| `enableEmailCapture` | `boolean` | `true` | Show email collection prompt |
| `emailPromptDelay` | `number` | `1` | AI responses before showing email prompt |
| `persistSession` | `boolean` | `true` | Save messages to localStorage |
| `avatar` | `string` | `"/org-ai.png"` | Avatar image URL |
| `apiEndpoint` | `string` | `"https://apis.do/chat"` | Backend API URL |

## Features

- Floating trigger button with unread badge
- Animated panel open/close
- Mobile-responsive with drag-to-close
- Session persistence in localStorage
- Email capture with configurable delay
- Error handling with retry button
- Typing indicator while AI responds

## Examples

### Default

Standard support chat configuration.

<Canvas of={Stories.Default} />

### Bottom Left Position

Trigger button in the bottom-left corner.

<Canvas of={Stories.BottomLeft} />

### Custom Branding

Custom title, welcome message, and placeholder.

<Canvas of={Stories.CustomBranding} />

### Auto Open

Chat panel opens automatically on page load.

<Canvas of={Stories.AutoOpen} />

### No Email Capture

Email collection prompt disabled.

<Canvas of={Stories.NoEmailCapture} />

### Minimal

Using all default values.

<Canvas of={Stories.Minimal} />