import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
import * as ModernChatInputStories from './modern-chat-input.stories';

<Meta of={ModernChatInputStories} />

<Title />
<Subtitle>An advanced, high-performance chat input for the Xertica Assistant.</Subtitle>

<Description />

<Primary />

---

## Usage Patterns

### Standard Floating Input
Optimized for chat interfaces with multi-line support, voice recording, and action chips.

<Canvas>
  <ModernChatInputStories.Default />
</Canvas>

### Full-Page Variant
Adjusts maximum width and alignment for use in standalone chat pages.

<Canvas>
  <ModernChatInputStories.FullPage />
</Canvas>

---

## Feature Flags

Each input capability can be individually toggled via boolean props.
All flags default to `true` for full backward compatibility.

| Prop | Controls | Default |
|---|---|---|
| `enableAudioInput` | Voice recording button | `true` |
| `enableFileAttachment` | File attachment (paperclip) button | `true` |
| `enableDocumentCreation` | "Create document" menu item | `true` |
| `enablePodcastGeneration` | "Generate podcast" menu item | `true` |
| `enableSearch` | "Search" menu item | `true` |

> [!NOTE]
> When all three action types (`enableDocumentCreation`, `enablePodcastGeneration`, `enableSearch`) are set to `false`, the "+" menu button is completely hidden.

### Text Only
All action buttons disabled — only the text input and send button remain.

<Canvas>
  <ModernChatInputStories.TextOnly />
</Canvas>

### Selective Actions
Only document creation and search are enabled for a focused workflow.

<Canvas>
  <ModernChatInputStories.SelectiveActions />
</Canvas>

---

## AI Best Practices

> [!IMPORTANT]
> - **Action Workflow** — Handle the `onSubmit` callback's optional `action` parameter to distinguish between standard text messages and intent-driven generations (Documents, Podcasts, Search).
> - **State Sync** — Always maintain the `value` in a parent state and update it via `onChange` and `onVoiceRecording` to ensure consistent data binding.
> - **Dynamic Sizing** — The input automatically expands up to 100px based on content; ensure the parent container can accommodate these height changes without layout shift.
> - **Feature Flags** — Pass flags like `enableSearch={false}` or `enableAudioInput={false}` to tailor input capabilities per use-case. Flags are independent and can be combined freely.