Skip to main content
The MessageInput component provides a user-friendly input interface for chat applications. It features auto-resizing textarea, Enter to send functionality, and dynamic send/stop button states based on chat status.

​
Installation

Install the MessageInput component using the shadcn CLI: 
pnpm dlx shadcn@latest add https://registry.intface.io/message-input.json

​
Usage

import { MessageInput } from "@/components/chat/message-input";
import { useState } from "react";

export default function Chat() {
  const [status, setStatus] = useState("idle");

  const handleSend = (message: string) => {
    console.log("Sending message:", message);
    setStatus("streaming");
  };

  const handleStop = () => {
    console.log("Stopping generation");
    setStatus("idle");
  };

  return (
    <MessageInput
      status={status}
      onSendMessage={handleSend}
      onStop={handleStop}
      className="max-w-2xl"
    />
  );
}

​
Props

​
status
ChatStatus
required
The current chat status. Controls the input state and button appearance (send vs stop).
​
onSendMessage
(content: string) => void
Callback function called when the user sends a message. Receives the trimmed message content.
​
onStop
() => void
required
Callback function called when the user wants to stop AI response generation.
​
className
string
Additional CSS classes to apply to the input container.