Docs
Message Input

Message Input

A textarea component with file attachment support, auto-resizing, and drag-and-drop capabilities.

The MessageInput component provides a rich textarea experience with support for file attachments, auto-resizing, and drag-and-drop file uploads.

Features

  • Auto-resizing textarea
  • File attachments support
  • Drag and drop file uploads
  • Submit on Enter (configurable)
  • Stop generation button
  • Double-enter interrupt behavior
  • Fully customizable styling

Installation

npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/message-input.json

Usage

Basic Usage

import { MessageInput } from "@/components/ui/message-input"
 
export function BasicMessageInput() {
  return (
    <MessageInput
      value={input}
      onChange={handleInputChange}
      isGenerating={false}
    />
  )
}

With Interrupt Behavior

export function MessageInputWithInterrupt() {
  return (
    <MessageInput
      value={input}
      onChange={handleInputChange}
      isGenerating={isGenerating}
      stop={handleStop}
      enableInterrupt={true}
    />
  )
}

When enableInterrupt is enabled and isGenerating is true, pressing Enter once will show a prompt asking the user to press Enter again to interrupt the generation. The prompt will disappear either when the user presses Enter again (triggering the stop function) or when the generation completes.

With File Attachments

import { MessageInput } from "@/components/ui/message-input"
 
export function MessageInputWithAttachments() {
  const [files, setFiles] = useState<File[] | null>(null)
 
  return (
    <MessageInput
      value={input}
      onChange={handleInputChange}
      isGenerating={false}
      allowAttachments
      files={files}
      setFiles={setFiles}
    />
  )
}

With Stop Button

import { MessageInput } from "@/components/ui/message-input"
 
export function MessageInputWithStop() {
  return (
    <MessageInput
      value={input}
      onChange={handleInputChange}
      isGenerating={true}
      stop={() => {
        // Handle stop generation
      }}
    />
  )
}

Props

The MessageInput component accepts two sets of props depending on whether file attachments are enabled.

Props

PropTypeDescriptionDefault
valuestringCurrent input valueRequired
submitOnEnterbooleanWhether to submit on Enter keytrue
stop() => voidFunction to stop generation-
isGeneratingbooleanWhether AI is generatingRequired
placeholderstringInput placeholder text"Ask AI..."
allowAttachmentsbooleanEnable file attachments
enableInterruptbooleanEnable double-enter interrupttrue

With Attachments

When allowAttachments is true, these additional props are required:

PropTypeDescription
filesFile[] | nullCurrently attached files
setFilesReact.Dispatch<React.SetStateAction<File[] | null>>Files state setter

The component also accepts all standard textarea HTML attributes.

Features

Auto-resizing

The textarea automatically resizes based on content up to a maximum height of 240px.

<MessageInput value={input} onChange={handleInputChange} isGenerating={false} />

File Attachments

Enable file attachments with drag-and-drop support:

<MessageInput
  value={input}
  onChange={handleInputChange}
  isGenerating={false}
  allowAttachments
  files={files}
  setFiles={setFiles}
/>

Submit Behavior

Control whether Enter key submits the form:

<MessageInput
  value={input}
  onChange={handleInputChange}
  isGenerating={false}
  submitOnEnter={false} // Disable submit on Enter
/>

Generation Control

Show stop button during generation:

<MessageInput
  value={input}
  onChange={handleInputChange}
  isGenerating={true}
  stop={() => {
    // Handle stop
  }}
/>

Interrupt Behavior

The double-enter interrupt behavior is enabled by default. To disable it:

<MessageInput
  value={input}
  onChange={handleInputChange}
  isGenerating={isGenerating}
  stop={handleStop}
  enableInterrupt={false}
/>

Theming

The Chat component is using theme colors and fully themable with CSS variables.

ChatMessage List