Message Input

A primitive component for handling message input with textarea, toolbar, submit button, and error display. Provides form submission and state management for chat interfaces.

Installation

npx tambo add message-input

Note: This component is automatically included when you install any of the "Message Thread" blocks.

Sub-components

<MessageInputTextarea /> - The main text input area where users type their messages. Automatically resizes based on content and handles keyboard shortcuts for submission.
<MessageInputToolbar /> - Container for toolbar elements positioned alongside the input. Typically contains the submit button and other action buttons.
<MessageInputSubmitButton /> - Button to submit the message form. Shows loading state during submission and is disabled when input is empty.
<MessageInputError /> - Displays error messages when message submission fails. Automatically shows/hides based on submission state.

Usage

tsx

import { 
  MessageInput, 
  MessageInputTextarea, 
  MessageInputToolbar,
  MessageInputSubmitButton,
  MessageInputError 
} from "@/components/ui/message-input";

// Basic usage
<MessageInput contextKey="my-thread" variant="default">
  <MessageInputTextarea />
  <MessageInputToolbar>
    <MessageInputSubmitButton />
  </MessageInputToolbar>
  <MessageInputError />
</MessageInput>

// With solid variant
<MessageInput contextKey="my-thread" variant="solid">
  <MessageInputTextarea placeholder="Type your message..." />
  <MessageInputToolbar>
    <MessageInputSubmitButton />
  </MessageInputToolbar>
</MessageInput>

Default Message Input

Solid Variant

Bordered Variant

Minimal Input (No Toolbar)

Props

MessageInput

Prop	Type	Description
contextKey	string	The context key identifying which thread to send messages to
variant	"default" \| "solid" \| "bordered"	Optional styling variant for the input container
children	React.ReactNode	The child elements to render within the form container