Prompt Input

Usage

"use client";

import { Fragment, useCallback, useEffect, useRef, useState } from "react";

import { ArrowUp01Icon, Attachment01Icon } from "@thenamespace/uikit/icons";

Use PromptInput as the message composer for chat and agent interfaces.

Secondary

"use client";

import { Fragment, useCallback, useEffect, useRef, useState } from "react";

import { ArrowUp01Icon, Attachment01Icon } from "@thenamespace/uikit/icons";

Use the secondary variant when the composer sits on a default surface.

Inline

"use client";

import { Fragment, useCallback, useEffect, useRef, useState } from "react";

import { ArrowUp01Icon, Attachment01Icon } from "@thenamespace/uikit/icons";

Use the inline layout when attachment, input, and send controls should stay aligned in one row while the textarea autosizes as users type or add line breaks.

Compact

"use client";

import { Fragment, useCallback, useEffect, useRef, useState } from "react";

import { ArrowUp01Icon, Attachment01Icon } from "@thenamespace/uikit/icons";

Use the compact layout when the composer should start as a single-row pill and switch to the stacked composer once text wraps or attachments are added.

Review Composer

"use client";

import { useState } from "react";

import {

Compose PromptInput with workflow controls to build compact agent surfaces such as review follow-ups and commit actions.

With Suggestions

"use client";

import { useState } from "react";

import {

Compose PromptInput with PromptSuggestion to create a landing-style composer with quick-start prompts.

Run State

"use client";

import { useCallback, useEffect, useRef, useState } from "react";

import { PromptInput } from "@thenamespace/uikit";

Prompt input supports submitted, streaming, ready, and error states for send/stop behavior.

Queue

"use client";

import { useCallback, useEffect, useRef, useState } from "react";

import {

Use PromptInput.Queue to show queued follow-up prompts in a compact card above the composer shell. Place it as a sibling of PromptInput.Shell inside PromptInput. Keep queue rows text-only for a clean surface — store attachments in your queue model and restore them to PromptInput.Attachments when the user edits a queued prompt.

With Attachments

Pair PromptInput with ChatAttachmentInput.Dropzone to accept dropped files. While a file is dragged over the shell, the composer shows a dotted accent border.

Anatomy

import { PromptInput } from "@thenamespace/uikit";

<PromptInput
  value={value}
  layout="stacked"
  onSubmit={send}
  onValueChange={setValue}
>
  <PromptInput.Queue>
    <PromptInput.Queue.List values={queuedPrompts} onReorder={setQueuedPrompts}>
      {queuedPrompts.map((prompt) => (
        <PromptInput.Queue.Item key={prompt.id} value={prompt}>
          <PromptInput.Queue.Item.Handle />
          <PromptInput.Queue.Item.Body>
            <PromptInput.Queue.Item.Icon />
            <PromptInput.Queue.Item.Content>
              Queued prompt text
            </PromptInput.Queue.Item.Content>
          </PromptInput.Queue.Item.Body>
          <PromptInput.Queue.Item.Actions>
            <PromptInput.Queue.Item.Remove />
            <PromptInput.Queue.Item.More />
          </PromptInput.Queue.Item.Actions>
        </PromptInput.Queue.Item>
      ))}
    </PromptInput.Queue.List>
  </PromptInput.Queue>
  <PromptInput.Shell>
    <PromptInput.Content>
      <PromptInput.TextArea placeholder="What do you want to know?" />
    </PromptInput.Content>
    <PromptInput.Toolbar>
      <PromptInput.ToolbarStart>
        <PromptInput.Action aria-label="Attach file">...</PromptInput.Action>
      </PromptInput.ToolbarStart>
      <PromptInput.ToolbarEnd>
        <PromptInput.Send />
      </PromptInput.ToolbarEnd>
    </PromptInput.Toolbar>
  </PromptInput.Shell>
  <PromptInput.Footer>
    AI can make mistakes. Check important info.
  </PromptInput.Footer>
</PromptInput>;

CSS Classes

• .prompt-input - Root state wrapper
• .prompt-input__shell - Composer surface
• .prompt-input__content - Textarea and attachment content area
• .prompt-input__attachments - Attachment preview row
• .prompt-input__textarea - Text area
• .prompt-input__toolbar - Absolute toolbar row
• .prompt-input__toolbar-start - Leading toolbar actions
• .prompt-input__toolbar-end - Trailing toolbar actions
• .prompt-input__footer - Disclaimer/footer text
• .prompt-input__send - Send/stop button
• .prompt-input__queue - Queued prompts container
• .prompt-input__queue-list - Scrollable queue list
• .prompt-input__queue-item - Single queued prompt row
• .prompt-input__queue-item-handle - Drag handle (presentational)
• .prompt-input__queue-item-icon - Leading queue item icon
• .prompt-input__queue-item-body - Main queue row content stack
• .prompt-input__queue-item-content - Clamped prompt text (2 lines)
• .prompt-input__queue-item-description - Secondary queue item text
• .prompt-input__queue-item-actions - Trailing row actions
• .prompt-input__queue-item-attachments - Attachment preview row inside a queue item
• .prompt-input__queue-item-attachments-overflow - Hidden attachment count label

API Reference

PromptInput

PromptInput.TextArea

Extends Namespace UIKit TextArea props.

PromptInput.Action

Extends Namespace UIKit Button props.

PromptInput.Send

Extends Namespace UIKit Button props. Uses the current prompt status to render send, loading, stop, or error icons.

PromptInput.Shell, Content, Attachments, Toolbar, ToolbarStart, ToolbarEnd, Footer

Layout slots for composing the prompt input. Each slot supports the corresponding native element props.

PromptInput.Queue

PromptInput.Queue.List

PromptInput.Queue.Item

PromptInput.Queue.Item.Body, Handle, Icon, Content, Description, Attachments, Actions

Presentational slots for queue row structure. Wrap Icon and Content in Body so the icon sits beside the clamped text and stays vertically centered. Content clamps text to two lines with an ellipsis.

PromptInput.Queue.Item.AttachmentsOverflow

Optional overflow label when you choose to render attachment previews inside a queue row.

PromptInput.Queue.Item.Remove, More, Action

Action buttons for queue rows. Remove and More include default labels and icons. Extend Namespace UIKit Button props.