### AI Agent Installation Prompt

Source: https://prompt-area.com/

Use this prompt with an AI coding agent to automate the installation and setup process.

```text
Fetch https://prompt-area.com/llms-full.txt and read the full documentation. Install the prompt-area component by running: npx shadcn@latest add https://prompt-area.com/r/prompt-area.json — then add the required CSS classes from the documentation to globals.css and help me build a prompt input. If there are any existing chat or prompt textarea inputs in the project, replace them with PromptArea using the context from the documentation.
```

--------------------------------

### Install Registry Components

Source: https://prompt-area.com/llms-full.txt

Commands to add specific components to your project using the shadcn CLI.

```bash
npx shadcn@latest add https://prompt-area.com/r/prompt-area.json
```

```bash
npx shadcn@latest add https://prompt-area.com/r/action-bar.json
```

```bash
npx shadcn@latest add https://prompt-area.com/r/status-bar.json
```

```bash
npx shadcn@latest add https://prompt-area.com/r/compact-prompt-area.json
```

```bash
npx shadcn@latest add https://prompt-area.com/r/chat-prompt-layout.json
```

--------------------------------

### Install ChatPromptLayout

Source: https://prompt-area.com/llms-full.txt

Command to add the ChatPromptLayout component to your project using the shadcn CLI.

```bash
npx shadcn@latest add https://prompt-area.com/r/chat-prompt-layout.json
```

--------------------------------

### Install Action Bar

Source: https://prompt-area.com/llms-full.txt

Use the shadcn CLI to add the Action Bar component to your project.

```bash
npx shadcn@latest add https://prompt-area.com/r/action-bar.json
```

--------------------------------

### Zero Dependencies

Source: https://prompt-area.com/llms-full.txt

Requires only React and existing shadcn/tailwind setup, with no additional external dependencies.

```plaintext
Only React + your existing shadcn/tailwind setup
```

--------------------------------

### Implement CompactPromptArea

Source: https://prompt-area.com/llms-full.txt

Example showing the integration of CompactPromptArea with triggers, state management, and custom slots.

```tsx
import { useCallback, useRef, useState } from 'react'
import { Mic } from 'lucide-react'
import { CompactPromptArea } from '@/registry/new-york/blocks/compact-prompt-area/compact-prompt-area'
import type { Segment, TriggerConfig, PromptAreaHandle } from '@/registry/new-york/blocks/prompt-area/types'

const triggers: TriggerConfig[] = [
  { char: '@', position: 'any', mode: 'dropdown', onSearch: (q) => USERS.filter(...) },
  { char: '/', position: 'start', mode: 'dropdown', chipStyle: 'inline', onSearch: (q) => COMMANDS.filter(...) },
]

function CompactPromptAreaExample() {
  const [segments, setSegments] = useState<Segment[]>([])
  const promptRef = useRef<PromptAreaHandle>(null)

  const handleSubmit = useCallback((segs: Segment[]) => {
    promptRef.current?.clear()
    setSegments([])
  }, [])

  return (
    <CompactPromptArea
      ref={promptRef}
      value={segments}
      onChange={setSegments}
      triggers={triggers}
      placeholder="Ask anything..."
      onSubmit={handleSubmit}
      onPlusClick={() => console.log('Plus clicked')}
      beforeSubmitSlot={
        <button aria-label="Voice input">
          <Mic className="size-4" />
        </button>
      }
    />
  )
}
```

--------------------------------

### Install Status Bar

Source: https://prompt-area.com/llms-full.txt

Use the shadcn CLI to add the Status Bar component to your project.

```bash
npx shadcn@latest add https://prompt-area.com/r/status-bar.json
```

--------------------------------

### Implement PromptArea with Mentions

Source: https://prompt-area.com/llms-full.txt

A React example demonstrating how to use the PromptArea component with trigger-based mentions.

```tsx
'use client'

import { useState } from 'react'
import { PromptArea } from '@/registry/new-york/blocks/prompt-area/prompt-area'
import type { Segment } from '@/registry/new-york/blocks/prompt-area/types'

const USERS = [
  { value: 'copywriter', label: 'Copywriter', description: 'Ad copy & content' },
  { value: 'strategist', label: 'Strategist', description: 'Campaign planning' },
  { value: 'analyst', label: 'Analyst', description: 'Performance insights' },
]

function MentionsExample() {
  const [segments, setSegments] = useState<Segment[]>([])
  return (
    <PromptArea
      value={segments}
      onChange={setSegments}
      triggers={[
        {
          char: '@',
          position: 'any',
          mode: 'dropdown',
          chipClassName: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
          onSearch: (q) =>
            USERS.filter((u) => u.label.toLowerCase().includes(q.toLowerCase())),
        },
      ]}
      placeholder="Type @ to mention an agent..."
      minHeight={48}
    />
  )
}
```

--------------------------------

### ChatPromptLayout Example

Source: https://prompt-area.com/llms-full.txt

Demonstrates how to use ChatPromptLayout to build a chat interface with a PromptArea for user input and a display for messages.

```APIDOC
## ChatPromptLayout Example

This example showcases the `ChatPromptLayout` component, integrating `PromptArea` for input and displaying chat messages.

### Components Used
- `ChatPromptLayout`: The main layout for the chat interface.
- `PromptArea`: For user text input, supporting segments and auto-grow.
- `ActionBar`: For action buttons, like the send button.

### Features
- User messages are appended to the chat history upon submission.
- Input is cleared after submission.
- Placeholder text guides the user.
- Send button is disabled when the input is empty.

### Request Example
```tsx
import { useCallback, useRef, useState } from 'react'
import { ArrowUp } from 'lucide-react'
import { PromptArea } from '@/registry/new-york/blocks/prompt-area/prompt-area'
import { ActionBar } from '@/registry/new-york/blocks/action-bar/action-bar'
import { ChatPromptLayout } from '@/registry/new-york/blocks/chat-prompt-layout/chat-prompt-layout'
import { segmentsToPlainText } from '@/registry/new-york/blocks/prompt-area/prompt-area-engine'
import type { Segment, PromptAreaHandle } from '@/registry/new-york/blocks/prompt-area/types'

type Message = { id: number; role: 'user' | 'assistant'; content: string }

function ChatPromptLayoutExample() {
  const [segments, setSegments] = useState<Segment[]>([])
  const [messages, setMessages] = useState<Message[]>([])
  const promptRef = useRef<PromptAreaHandle>(null)

  const isEmpty = segments.length === 0 ||
    (segments.length === 1 && segments[0].type === 'text' && segments[0].text === '')

  const handleSubmit = useCallback(() => {
    if (isEmpty) return
    const text = segmentsToPlainText(segments)
    setMessages(prev => [...prev, { id: Date.now(), role: 'user', content: text }])
    promptRef.current?.clear()
    setSegments([])
  }, [isEmpty, segments])

  return (
    <ChatPromptLayout
      className="h-[600px]"
      prompt={
        <div className="border-t p-4">
          <div className="mx-auto max-w-3xl rounded-lg border p-4">
            <PromptArea
              ref={promptRef}
              value={segments}
              onChange={setSegments}
              placeholder="Type a message..."
              onSubmit={handleSubmit}
              autoGrow
            />
            <ActionBar
              right={
                <button aria-label="Send" disabled={isEmpty} onClick={handleSubmit}>
                  <ArrowUp className="size-4" />
                </button>
              }
            />
          </div>
        </div>
      }
    >
      <div className="mx-auto max-w-3xl space-y-4 p-4">
        {messages.map(msg => (
          <div key={msg.id} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
            <div className={`max-w-[80%] rounded-2xl px-4 py-2.5 text-sm ${ 
              msg.role === 'user'
                ? 'bg-primary text-primary-foreground'
                : 'bg-muted text-foreground'
            }`}>
              {msg.content}
            </div>
          </div>
        ))}
      </div>
    </ChatPromptLayout>
  )
}
```
```

--------------------------------

### Install Compact Prompt Area

Source: https://prompt-area.com/llms-full.txt

Use the shadcn CLI to add the Compact Prompt Area component to your project.

```bash
npx shadcn@latest add https://prompt-area.com/r/compact-prompt-area.json
```

--------------------------------

### Install Prompt Area Component

Source: https://prompt-area.com/partners

Use this command to add the Prompt Area component to your project via the shadcn registry.

```bash
npx shadcn@latest add https://prompt-area.com/r/prompt-area.json
```

--------------------------------

### Rotating Placeholder Example

Source: https://prompt-area.com/llms-full.txt

Shows how to implement rotating placeholder text in the PromptArea component using an array of strings.

```APIDOC
## Rotating Placeholder

When `placeholder` is passed as a `string[]`, the placeholder animates between items.

### Features
- Rotates through the array on a 3-second interval.
- Uses `framer-motion` for slide-up/slide-down transitions (300ms, `easeInOut`).
- Hidden from screen readers (`aria-hidden="true"`).
- Automatically stops cycling when only one string is provided.

### Request Example
```tsx
import { useState } from 'react'
import { PromptArea } from '@/registry/new-york/blocks/prompt-area/prompt-area'
import type { Segment } from '@/registry/new-york/blocks/prompt-area/types'

function RotatingPlaceholdersExample() {
  const [segments, setSegments] = useState<Segment[]>([])
  return (
    <PromptArea
      value={segments}
      onChange={setSegments}
      placeholder={[
        'Ask a question...', 
        'Write a story...', 
        'Summarize an article...', 
        'Generate some code...', 
      ]}
      onSubmit={() => { setSegments([]) }}
      minHeight={48}
    />
  )
}
```
```

--------------------------------

### Trigger Chips Example

Source: https://prompt-area.com/llms-full.txt

Activate dropdowns or callbacks by typing trigger characters like '@', '/', or '#'. This enables dynamic suggestions and command execution.

```javascript
Type `@`, `/`, `#` (or any character) to activate dropdowns or callbacks
```

--------------------------------

### Implement Status Bar with PromptArea

Source: https://prompt-area.com/llms-full.txt

Example showing a StatusBar positioned above a PromptArea component within a container.

```tsx
import { useState } from 'react'
import { GitBranch, ChevronDown } from 'lucide-react'
import { PromptArea } from '@/registry/new-york/blocks/prompt-area/prompt-area'
import { StatusBar } from '@/registry/new-york/blocks/status-bar/status-bar'
import type { Segment } from '@/registry/new-york/blocks/prompt-area/types'

function StatusBarAboveExample() {
  const [segments, setSegments] = useState<Segment[]>([])
  return (
    <div className="rounded-lg border">
      <StatusBar
        className="border-b"
        left={
          <div className="flex items-center gap-1.5">
            <span className="bg-muted rounded px-1.5 py-0.5 font-medium">prompt-area</span>
            <GitBranch className="text-muted-foreground size-3" />
            <span className="text-muted-foreground">main</span>
          </div>
        }
        right={
          <button className="text-muted-foreground flex items-center gap-1">
            Default <ChevronDown className="size-3" />
          </button>
        }
      />
      <div className="p-4">
        <PromptArea
          value={segments}
          onChange={setSegments}
          placeholder="Type a message..."
          onSubmit={() => setSegments([])}
          minHeight={48}
        />
      </div>
    </div>
  )
}
```

--------------------------------

### ChatPromptLayout Example

Source: https://prompt-area.com/llms-full.txt

Demonstrates how to use ChatPromptLayout to build a chat interface with a PromptArea for user input and a display area for messages. Handles message submission and clearing the input.

```tsx
import { useCallback, useRef, useState } from 'react'
import { ArrowUp } from 'lucide-react'
import { PromptArea } from '@/registry/new-york/blocks/prompt-area/prompt-area'
import { ActionBar } from '@/registry/new-york/blocks/action-bar/action-bar'
import { ChatPromptLayout } from '@/registry/new-york/blocks/chat-prompt-layout/chat-prompt-layout'
import { segmentsToPlainText } from '@/registry/new-york/blocks/prompt-area/prompt-area-engine'
import type { Segment, PromptAreaHandle } from '@/registry/new-york/blocks/prompt-area/types'

type Message = { id: number; role: 'user' | 'assistant'; content: string }

function ChatPromptLayoutExample() {
  const [segments, setSegments] = useState<Segment[]>([])
  const [messages, setMessages] = useState<Message[]>([])
  const promptRef = useRef<PromptAreaHandle>(null)

  const isEmpty = segments.length === 0 ||
    (segments.length === 1 && segments[0].type === 'text' && segments[0].text === '')

  const handleSubmit = useCallback(() => {
    if (isEmpty) return
    const text = segmentsToPlainText(segments)
    setMessages(prev => [...prev, { id: Date.now(), role: 'user', content: text }])
    promptRef.current?.clear()
    setSegments([])
  }, [isEmpty, segments])

  return (
    <ChatPromptLayout
      className="h-[600px]"
      prompt={
        <div className="border-t p-4">
          <div className="mx-auto max-w-3xl rounded-lg border p-4">
            <PromptArea
              ref={promptRef}
              value={segments}
              onChange={setSegments}
              placeholder="Type a message..."
              onSubmit={handleSubmit}
              autoGrow
            />
            <ActionBar
              right={
                <button aria-label="Send" disabled={isEmpty} onClick={handleSubmit}>
                  <ArrowUp className="size-4" />
                </button>
              }
            />
          </div>
        </div>
      }
    >
      <div className="mx-auto max-w-3xl space-y-4 p-4">
        {messages.map(msg => (
          <div key={msg.id} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
            <div className={`max-w-[80%] rounded-2xl px-4 py-2.5 text-sm ${
              msg.role === 'user'
                ? 'bg-primary text-primary-foreground'
                : 'bg-muted text-foreground'
            }`}>
              {msg.content}
            </div>
          </div>
        ))}
      </div>
    </ChatPromptLayout>
  )
}

```

--------------------------------

### Imperative API Methods

Source: https://prompt-area.com/llms-full.txt

Offers an imperative API for controlling the prompt area, including focus, blur, inserting chips, getting plain text, and clearing the input.

```javascript
focus()
```

```javascript
blur()
```

```javascript
insertChip()
```

```javascript
getPlainText()
```

```javascript
clear()
```

--------------------------------

### Remove List Prefix

Source: https://prompt-area.com/llms-full.txt

Removes the list prefix (e.g., bullet or number) when Backspace is pressed at or before the start of the content.

```typescript
removeListPrefix(segments, cursorPos): { segments; cursorOffset } | null
```

--------------------------------

### JavaScript Initialization and Event Handling

Source: https://prompt-area.com/

Initializes Prompt Area with specific IDs and sets up an event listener for resizing. This code is typically used for dynamic DOM manipulation and component initialization.

```javascript
$RB=\[\];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a\[b\]
,e=a\[b+1\]
;null!==e.parentNode&&e.parentNode.removeChild(e)
;var f=c.parentNode
;if(f){var g=c.previousSibling
,h=0
;do{if(c&&8===c.nodeType){var d=c.data
;if("/$"===d||"/&"===d)if(0===h)break
;else h--
;else"$"!==d&&"$?!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++
}
d=c.nextSibling
;f.removeChild(c)
;c=d
}
while(c)
;for(;e.firstChild;)
f.insertBefore(e.firstChild,c)
;g.data="$"
;g._reactRetry&&requestAnimationFrame(g._reactRetry)
}
a.length=0
}
$RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)}
$RC("B:0","S:0")
```

--------------------------------

### Get List Context from Text

Source: https://prompt-area.com/llms-full.txt

Detects if the cursor is within a list line by analyzing the text and cursor position. Recognizes bullet and numbered list prefixes.

```typescript
type ListContext = {
  lineStart: number         // Offset where line begins
  prefix: string            // Full prefix with indentation (e.g., "  • ")
  indent: number            // Indentation level (each = 2 spaces)
  listType: 'bullet' | 'numbered'
  number?: number           // For numbered lists
  contentStart: number      // Offset where content after prefix starts
}

getListContext(text, cursorPos): ListContext | null
```

--------------------------------

### CompactPromptArea API

Source: https://prompt-area.com/llms-full.txt

Documentation for the CompactPromptArea component, detailing its props and behavior.

```APIDOC
## CompactPromptArea Props

Accepts all core PromptArea props (`value`, `onChange`, `triggers`, `placeholder`, `disabled`, `markdown`, `onSubmit`, `onEscape`, `onChipClick`, `onChipAdd`, `onChipDelete`, `onPaste`, `images`, `onImagePaste`, `onImageRemove`, `files`, `onFileRemove`), plus:

| Prop               | Type              | Default      | Description                                         |
| ------------------ | ----------------- | ------------ | --------------------------------------------------- |
| `plusButtonIcon`    | `React.ReactNode` | `<Plus />`   | Icon for the circular plus button                   |
| `onPlusClick`      | `() => void`      | -            | Click handler for the plus button                   |
| `submitButtonIcon` | `React.ReactNode` | `<ArrowUp />`| Icon for the circular submit button                 |
| `beforeSubmitSlot` | `React.ReactNode` | -            | Slot rendered before the submit button (e.g., mic)  |
| `maxHeight`        | `number`          | `320`        | Maximum height the expanded area can reach          |
| `className`        | `string`          | -            | CSS class for the outer container                   |
| `aria-label`       | `string`          | -            | Accessible label                                    |
| `data-test-id`     | `string`          | -            | Test ID for e2e testing                             |

## CompactPromptArea Behavior

- **Collapsed**: pill-shaped (`rounded-full`) with the plus button on the left and submit on the right
- **Expanded** (focused or has content): rounded rectangle (`rounded-2xl`) with the plus button at bottom-left and submit at bottom-right
- Submit button is disabled when content is empty or `disabled={true}`
- Internally uses `autoGrow` with `minHeight: 48` (expanded) or `24` (collapsed)

## CompactPromptArea Example

```tsx
import { useCallback, useRef, useState } from 'react'
import { Mic } from 'lucide-react'
import { CompactPromptArea } from '@/registry/new-york/blocks/compact-prompt-area/compact-prompt-area'
import type { Segment, TriggerConfig, PromptAreaHandle } from '@/registry/new-york/blocks/prompt-area/types'

const triggers: TriggerConfig[] = [
  { char: '@', position: 'any', mode: 'dropdown', onSearch: (q) => USERS.filter(...) },
  { char: '/', position: 'start', mode: 'dropdown', chipStyle: 'inline', onSearch: (q) => COMMANDS.filter(...) },
]

function CompactPromptAreaExample() {
  const [segments, setSegments] = useState<Segment[]>([])
  const promptRef = useRef<PromptAreaHandle>(null)

  const handleSubmit = useCallback((segs: Segment[]) => {
    promptRef.current?.clear()
    setSegments([])
  }, [])

  return (
    <CompactPromptArea
      ref={promptRef}
      value={segments}
      onChange={setSegments}
      triggers={triggers}
      placeholder="Ask anything..."
      onSubmit={handleSubmit}
      onPlusClick={() => console.log('Plus clicked')}
      beforeSubmitSlot={
        <button aria-label="Voice input">
          <Mic className="size-4" />
        </button>
      }
    />
  )
}
```
```

--------------------------------

### Companion Components

Source: https://prompt-area.com/llms-full.txt

Includes companion components like ActionBar, StatusBar, CompactPromptArea, and ChatPromptLayout for building complete UIs.

```plaintext
ActionBar, StatusBar, CompactPromptArea, ChatPromptLayout
```

--------------------------------

### PromptArea Handle Methods

Source: https://prompt-area.com/llms-full.txt

Methods available through the PromptArea's ref for programmatic control.

```APIDOC
## PromptArea Handle Methods

### Description
Provides methods to interact with the PromptArea component programmatically via its ref.

### Methods
- **focus()**: Focus the editor.
- **blur()**: Blur the editor.
- **insertChip(chip)**: Insert a chip at the cursor position.
- **getPlainText()**: Get the plain text content of the editor.
- **clear()**: Clear all content and undo history.
```

--------------------------------

### Initialize Dark Mode

Source: https://prompt-area.com/

This script initializes dark mode based on local storage or system preferences. It should be run early in the application lifecycle.

```javascript
function(){try{var t=localStorage.getItem('theme');var d=t==='dark'||(t!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches);if(d)document.documentElement.classList.add('dark')}catch(e){}}()
```

--------------------------------

### Implement Trigger Presets in PromptArea

Source: https://prompt-area.com/llms-full.txt

Demonstrates integrating mention, command, and hashtag triggers into a PromptArea component using state management hooks.

```tsx
import { PromptArea } from '@/registry/new-york/blocks/prompt-area/prompt-area'
import { usePromptAreaState } from '@/registry/new-york/blocks/prompt-area/use-prompt-area-state'
import { mentionTrigger, commandTrigger, hashtagTrigger } from '@/registry/new-york/blocks/prompt-area/trigger-presets'
import { getChipsByTrigger } from '@/registry/new-york/blocks/prompt-area/segment-helpers'

function ChatInput() {
  const { bind, plainText, isEmpty, chips, clear, focus } = usePromptAreaState()
  const mentions = getChipsByTrigger(bind.value, '@')

  return (
    <>
      <PromptArea
        {...bind}
        triggers={[
          mentionTrigger({ onSearch: searchAgents }),
          commandTrigger({ onSearch: searchCommands }),
          hashtagTrigger({ onSearch: searchTags }),
        ]}
        placeholder="Try @mention, /command, and #tags..."
        onSubmit={() => {
          sendMessage(plainText, mentions)
          clear()
        }}
      />
      <button disabled={isEmpty} onClick={() => focus()}>
        Send
      </button>
    </>
  )
}
```

--------------------------------

### Inline Markdown Preview

Source: https://prompt-area.com/llms-full.txt

Supports live preview of markdown formatting including bold, italic, and bold-italic text.

```plaintext
Live preview of **bold**, *italic*, and ***bold-italic***
```

--------------------------------

### Keyboard Shortcuts

Source: https://prompt-area.com/llms-full.txt

Provides standard keyboard shortcuts for common actions like bolding, italicizing, submitting, and dismissing.

```plaintext
Cmd+B bold, Cmd+I italic, Enter submit, Escape dismiss
```

--------------------------------

### PromptArea Properties

Source: https://prompt-area.com/llms-full.txt

Configuration options for the PromptArea component.

```APIDOC
## PromptArea Properties

### Description
Defines the configurable properties for the PromptArea component.

### Parameters
#### Request Body
- **value** (Segment[]) - Required - Controlled segment array
- **onChange** ((segments: Segment[]) => void) - Required - Called on content changes
- **triggers** (TriggerConfig[]) - Optional - Trigger character configurations
- **placeholder** (string | string[]) - Optional - Placeholder text when empty. Pass an array to animate between them.
- **className** (string) - Optional - CSS class for the container
- **disabled** (boolean) - Optional - Disable the input (default: false)
- **markdown** (boolean) - Optional - Enable inline markdown rendering
- **onSubmit** ((segments: Segment[]) => void) - Optional - Called on Enter (without Shift)
- **onEscape** (() => void) - Optional - Called on Escape
- **onChipClick** ((chip: ChipSegment) => void) - Optional - Called when a chip is clicked
- **onChipAdd** ((chip: ChipSegment) => void) - Optional - Called when a chip is added
- **onChipDelete** ((chip: ChipSegment) => void) - Optional - Called when a chip is deleted
- **onLinkClick** ((url: string) => void) - Optional - Called on Cmd/Ctrl+Click on a URL
- **onPaste** ((data: { segments: Segment[]; source: 'internal' | 'external' }) => void) - Optional - Called after paste with segments and source
- **onUndo** ((segments: Segment[]) => void) - Optional - Called after undo
- **onRedo** ((segments: Segment[]) => void) - Optional - Called after redo
- **minHeight** (number) - Optional - Minimum height in pixels (default: 80)
- **maxHeight** (number) - Optional - Maximum height in pixels
- **autoFocus** (boolean) - Optional - Auto-focus on mount (default: false)
- **autoGrow** (boolean) - Optional - Expand on focus, shrink on blur (default: false)
- **aria-label** (string) - Optional - Accessible label (default: 'Text input')
- **data-test-id** (string) - Optional - Test ID for e2e testing
- **images** (PromptAreaImage[]) - Optional - Array of image attachments to display
- **imagePosition** ('above' | 'below') - Optional - Where to render images relative to text (default: 'above')
- **onImagePaste** ((file: File) => void) - Optional - Called when user pastes an image
- **onImageRemove** ((image: PromptAreaImage) => void) - Optional - Called when user removes an image
- **onImageClick** ((image: PromptAreaImage) => void) - Optional - Called when user clicks an image
- **files** (PromptAreaFile[]) - Optional - Array of file attachments to display
- **filePosition** ('above' | 'below') - Optional - Where to render files relative to text (default: 'above')
- **onFileRemove** ((file: PromptAreaFile) => void) - Optional - Called when user removes a file
- **onFileClick** ((file: PromptAreaFile) => void) - Optional - Called when user clicks a file
```

--------------------------------

### Keyboard Shortcuts

Source: https://prompt-area.com/llms-full.txt

A list of keyboard shortcuts available within the Prompt Area for various actions.

```APIDOC
## Keyboard Shortcuts

| Shortcut            | Action                                   |
| ------------------- | ---------------------------------------- |
| `Enter`             | Submit (or continue list if in list)     |
| `Shift+Enter`       | Insert newline                           |
| `Escape`            | Dismiss dropdown / fire onEscape         |
| `Cmd/Ctrl+B`        | Toggle **bold** (requires active selection) |
| `Cmd/Ctrl+I`        | Toggle *italic* (requires active selection) |
| `Cmd/Ctrl+Z`        | Undo                                     |
| `Cmd/Ctrl+Shift+Z`  | Redo                                     |
| `Tab`               | Indent list item (markdown mode only)    |
| `Shift+Tab`         | Outdent list item (markdown mode only)   |
| `ArrowUp/Down`      | Navigate dropdown suggestions            |
| `Backspace` on chip | Delete chip (or revert if auto-resolved) |
| `Space`             | Auto-resolve trigger (if `resolveOnSpace: true` and query non-empty) |
```

--------------------------------

### Convenience Hook

Source: https://prompt-area.com/llms-full.txt

The `usePromptAreaState()` hook simplifies boilerplate code for managing prompt area state.

```javascript
usePromptAreaState()
```

--------------------------------

### Configure Required CSS

Source: https://prompt-area.com/llms-full.txt

Add these classes to your globals.css file after the @layer base directive to ensure proper component styling.

```css
@layer components {
  .prompt-area-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    vertical-align: baseline;
    margin: 0 1px;
    background-color: var(--secondary);
    color: var(--foreground);
  }
  .prompt-area-md-marker {
    font-size: 0;
    display: inline;
  }
  .prompt-area-chip--inline {
    padding: 0;
    border-radius: 0;
    margin: 0;
    font-weight: 700;
  }
}
```

--------------------------------

### Next.js Configuration and Assets

Source: https://prompt-area.com/contact

This snippet configures Next.js, including static assets like CSS and fonts. It's part of the application's build and rendering process.

```javascript
self.__next_f=self.__next_f||[];self.__next_f.push([0])
```

```javascript
self.__next_f.push([1,"1:\"$Sreact.fragment\"\n7:I[7871,[],\"default\"]\n:HL[\"/_next/static/chunks/bec3ea1e3ddb077a.css?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\",\"style\"]\n:HL[\"/_next/static/media/GeistMonoVF-s.p.2f937313.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}\n]:HL[\"/_next/static/media/GeistVF-s.p.92592eb2.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}\n2:Tf38," ] )
```

--------------------------------

### IME Support

Source: https://prompt-area.com/llms-full.txt

Ensures proper composition handling for CJK (Chinese, Japanese, Korean) input methods.

```plaintext
Proper composition handling for CJK input
```

--------------------------------

### ChatPromptLayout API

Source: https://prompt-area.com/llms-full.txt

Documentation for the ChatPromptLayout component, detailing its props and scroll navigation behavior.

```APIDOC
## Chat Prompt Layout

A full-height chat layout with scrollable messages and a bottom-anchored prompt slot. Includes contextual scroll navigation buttons.

```bash
npx shadcn@latest add https://prompt-area.com/r/chat-prompt-layout.json
```

**Note**: This component uses `framer-motion` for scroll button animations.

#### ChatPromptLayout Props

| Prop           | Type              | Default           | Description                                 |
| -------------- | ----------------- | ----------------- | ------------------------------------------- |
| `children`     | `React.ReactNode` | required          | Chat messages in the scrollable area        |
| `prompt`       | `React.ReactNode` | required          | Prompt area at the bottom (slot)            |
| `className`    | `string`          | -                 | CSS class for the root container            |
| `aria-label`   | `string`          | `'Chat layout'`   | Accessible label for the layout region      |
| `data-test-id` | `string`          | -                 | Test ID for e2e testing                     |

#### Scroll Navigation

Scroll buttons appear/hide with hysteresis to prevent flicker:
- **"Go to top"** appears when scrolled > 300px from top, hides when < 100px from top
- **"Go to bottom"** appears when scrolled > 300px from bottom, hides when < 100px from bottom
- Buttons use `smooth` scrolling and `framer-motion` enter/exit animations
```

--------------------------------

### Trigger Presets

Source: https://prompt-area.com/llms-full.txt

Pre-built trigger configurations for common patterns like mentions, commands, and hashtags.

```APIDOC
## Trigger Presets

Pre-built trigger configuration factories for common patterns. Import from `trigger-presets` (installed with prompt-area).

```tsx
import { PromptArea } from '@/registry/new-york/blocks/prompt-area/prompt-area'
import { usePromptAreaState } from '@/registry/new-york/blocks/prompt-area/use-prompt-area-state'
import { mentionTrigger, commandTrigger, hashtagTrigger } from '@/registry/new-york/blocks/prompt-area/trigger-presets'
import { getChipsByTrigger } from '@/registry/new-york/blocks/prompt-area/segment-helpers'

function ChatInput() {
  const { bind, plainText, isEmpty, chips, clear, focus } = usePromptAreaState()
  const mentions = getChipsByTrigger(bind.value, '@')

  return (
    <>
      <PromptArea
        {...bind}
        triggers={[
          mentionTrigger({ onSearch: searchAgents }),
          commandTrigger({ onSearch: searchCommands }),
          hashtagTrigger({ onSearch: searchTags }),
        ]}
        placeholder="Try @mention, /command, and #tags..."
        onSubmit={() => {
          sendMessage(plainText, mentions)
          clear()
        }}
      />
      <button disabled={isEmpty} onClick={() => focus()}>
        Send
      </button>
    </>
  )
}
```

### mentionTrigger(opts?)

Creates a **mention** trigger (`@`). Defaults: `position: 'any'`, `mode: 'dropdown'`, `chipStyle: 'pill'`, `accessibilityLabel: 'mention'`.

### commandTrigger(opts?)

Creates a **command** trigger (`/`). Defaults: `position: 'start'`, `mode: 'dropdown'`, `chipStyle: 'inline'`, `accessibilityLabel: 'command'`.

### hashtagTrigger(opts?)

Creates a **hashtag** trigger (`#`). Defaults: `position: 'any'`, `mode: 'dropdown'`, `chipStyle: 'pill'`, `resolveOnSpace: true`, `accessibilityLabel: 'tag'`.

### callbackTrigger(opts)

Creates a **callback** trigger that fires `onActivate` instead of showing a dropdown. Requires `char`. Defaults: `position: 'start'`, `mode: 'callback'`. Useful for opening file pickers, model selectors, etc.

All presets accept any additional `TriggerConfig` fields as overrides, including a custom `char` to change the trigger character.
```

--------------------------------

### Trigger Presets

Source: https://prompt-area.com/llms-full.txt

Provides preset functions for common trigger types: mention, command, hashtag, and callback.

```javascript
mentionTrigger()
```

```javascript
commandTrigger()
```

```javascript
hashtagTrigger()
```

```javascript
callbackTrigger()
```

--------------------------------

### Next.js Dynamic Imports and Suspense Configuration

Source: https://prompt-area.com/press

This configuration defines dynamic imports for Next.js components and sets up suspense for efficient loading. It includes configurations for various layouts and features like analytics.

```javascript
self.__next_f.push([1,"8:\"$Sreact.suspense\"\n9:I[7263, [\"/\_next/static/chunks/9670fe4d9292a68a.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\",\"/\_next/static/chunks/f42b195a487b6abb.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\"], \"SidebarLayout\" ]\na:I[25270, [\"/\_next/static/chunks/221e0744b683f94b.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\",\"/\_next/static/chunks/54acdc74ad0965ad.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\"], \"default\" ]\nb:I[85455, [\"/\_next/static/chunks/221e0744b683f94b.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\",\"/\_next/static/chunks/54acdc74ad0965ad.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\"], \"default\" ]\nc:I[51506, [\"/\_next/static/chunks/9670fe4d9292a68a.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\",\"/\_next/static/chunks/f42b195a487b6abb.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\"], \"\" ]\nd:I[51101, [\"/\_next/static/chunks/9670fe4d9292a68a.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\",\"/\_next/static/chunks/f42b195a487b6abb.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\"], \"Analytics\" ]\ne:I[95324, [\"/\_next/static/chunks/9670fe4d9292a68a.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\",\"/\_next/static/chunks/f42b195a487b6abb.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\"], \"\" ]\n
```

--------------------------------

### Rotating Placeholder Animation

Source: https://prompt-area.com/llms-full.txt

Configures the PromptArea to cycle through an array of placeholder strings with a slide animation. The animation stops if only one placeholder is provided. Requires framer-motion for transitions.

```tsx
import { useState } from 'react'
import { PromptArea } from '@/registry/new-york/blocks/prompt-area/prompt-area'
import type { Segment } from '@/registry/new-york/blocks/prompt-area/types'

function RotatingPlaceholdersExample() {
  const [segments, setSegments] = useState<Segment[]>([])
  return (
    <PromptArea
      value={segments}
      onChange={setSegments}
      placeholder={[
        'Ask a question...', 
        'Write a story...', 
        'Summarize an article...', 
        'Generate some code...', 
      ]}
      onSubmit={() => { setSegments([]) }}
      minHeight={48}
    />
  )
}

```

--------------------------------

### Initialize Prompt Area Component

Source: https://prompt-area.com/contact

This code initializes the Prompt Area component and its associated functionalities. It's designed to be integrated into a React application.

```javascript
$RB=\[\];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a\[b\] ,e=a\[b+1\];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g.
cl\u0065try&&requestAnimationFrame(g.
cl\u0065try)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:0","S:0")
```

--------------------------------

### Undo/Redo Functionality

Source: https://prompt-area.com/llms-full.txt

Provides full undo/redo support with Ctrl+Z / Ctrl+Shift+Z and a debounced history of 100 snapshots.

```plaintext
Full Ctrl+Z / Ctrl+Shift+Z with debounced snapshots (100-entry history)
```

--------------------------------

### Next.js Script for Theme and Analytics

Source: https://prompt-area.com/press

This script handles theme detection and application for Next.js projects. It also includes configuration for analytics and other dynamic imports.

```javascript
self.__next_f.push([1,"0:{\"P\":null,\"b\":\"Lb2Om5dtFDxPlfwBeTrX2\",\"c\":[\"\",\"press\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"press\",{\"children\":[\"\_PAGE\",{}]}"]},\"$undefined\",\"$undefined\",true],[[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\": \"stylesheet\",\"href\": \"/\_next/static/chunks/bec3ea1e3ddb077a.css?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\",\"precedence\": \"next\",\"crossOrigin\": \"$undefined\",\"nonce\": \"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\": \"/\_next/static/chunks/9670fe4d9292a68a.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\",\"async\":true,\"nonce\": \"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\": \"/\_next/static/chunks/f42b195a487b6abb.js?dpl=dpl_D8huXcvBwki5RQ7FPScWxahzbPZm\",\"async\":true,\"nonce\": \"$undefined\"}]]],[\"$\",\"html\",null,{\"lang\": \"en\",\"suppressHydrationWarning\":true,\"children\":[[ \"$\", \"head\", null, { \"children\": [ [ \"$\", \"link\", null, { \"rel\": \"help\", \"type\": \"text/plain\", \"href\": \"/llms.txt\", \"title\": \"LLM Documentation\" } ], [ \"$\", \"link\", null, { \"rel\": \"alternate\", \"type\": \"text/plain\", \"href\": \"/llms-full.txt\", \"title\": \"LLM Documentation (Full)\" } ], [ \"$\", \"script\", null, { \"dangerouslySetInnerHTML\": { \"\_\_html\": \"(function(){try{var t=localStorage.getItem('theme');var d=t==='dark'||(t!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches);if(d)document.documentElement.classList.add('dark')}catch(e){}})()\" } } ], [ \"$\", \"script\", null, { \"type\": \"application/ld+json\", \"dangerouslySetInnerHTML\": { \"\_\_html\": \"$2\" } } ] ] } ], \"$L3\" ] } ] ] } ], \"$L4\", { \"children\": [ \"$L5\", {}, null, false, false ] }, null, false, false ], \"$L6\", false ] ] })

```

--------------------------------

### usePromptAreaState Hook

Source: https://prompt-area.com/llms-full.txt

A convenience hook for managing PromptArea state, including editor content, chips, and imperative handles.

```APIDOC
## usePromptAreaState

### Description
Manages useState<Segment[]>, useRef<PromptAreaHandle>, and derived values for the PromptArea component.

### Options
- **initialValue** (Segment[]) - Optional - Initial segment value (Default: [])

### Return Type: PromptAreaState
- **bind** (object) - Props to spread onto <PromptArea {...bind} />
- **plainText** (string) - Derived plain text (memoized)
- **isEmpty** (boolean) - True when empty or whitespace-only (memoized)
- **hasChips** (boolean) - True when at least one chip exists (memoized)
- **chips** (ChipSegment[]) - All chip segments (memoized)
- **clear()** (function) - Clear all content
- **focus()** (function) - Focus the editor
- **blur()** (function) - Blur the editor
- **insertChip** (function) - Insert a chip at the current cursor position
```