# AI Prompt Input
Prompt input surface for AI-assisted workflows with attach, optimize, and submit actions.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { AIPromptInput } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/ai-prompt-input
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=ai-prompt-input--default&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="224" title="AI Prompt Input component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
<AIPromptInput value={prompt} onChange={(e) => setPrompt(e.target.value)} onSubmit={handleGenerate} />
```

## Props

<PropsTable
  props={[
  {
    name: "value",
    type: "string",
    description: "Controlled value of the textarea.",
  },
  {
    name: "onChange",
    type: "(e: React.ChangeEvent<HTMLTextAreaElement>) => void",
    description: "Fired when the textarea value changes.",
  },
  {
    name: "onSubmit",
    type: "() => void",
    description: "Fired when the submit button is clicked.",
  },
  {
    name: "onStop",
    type: "() => void",
    description: "Fired when the stop button is clicked during generation.",
  },
  {
    name: "onAttach",
    type: "() => void",
    description: "Fired when the attach action is clicked. Hides the attach button when omitted.",
  },
  {
    name: "onOptimize",
    type: "() => void",
    description: "Fired when the optimize action is clicked. Hides the optimize button when omitted.",
  },
  {
    name: "attachments",
    type: "React.ReactNode",
    description: "Render-prop slot for attachment chips above the textarea.",
  },
  {
    name: "isGenerating",
    type: "boolean",
    description: "When true, the submit button becomes a stop button.",
  },
  {
    name: "isOptimizing",
    type: "boolean",
    description: "When true, shows a loading spinner on the optimize button.",
  },
  {
    name: "placeholder",
    type: "string",
    description: "Placeholder text for the textarea.",
  },
  {
    name: "showAttach",
    type: "boolean",
    default: "true",
    description: "Whether the attach button is rendered.",
  },
  {
    name: "showMic",
    type: "boolean",
    default: "true",
    description: "Whether the mic button is rendered.",
  },
  {
    name: "variant",
    type: '"default"',
    default: '"default"',
    description: "Visual variant.",
  },
  {
    name: "size",
    type: '"default" | "sm"',
    default: '"default"',
    description: "Size scale.",
  },
]}
/>