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
  • 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 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

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
  }}
/>

Examples

In a Chat Form

<ChatForm isPending={isPending} handleSubmit={handleSubmit}>
  {({ files, setFiles }) => (
    <MessageInput
      value={input}
      onChange={handleInputChange}
      isGenerating={isLoading}
      stop={stop}
      allowAttachments
      files={files}
      setFiles={setFiles}
    />
  )}
</ChatForm>

Theming

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

ChatMessage List