Message Input

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

npx shadcn@latest add https://registry.intface.io/message-input.json

yarn shadcn@latest add https://registry.intface.io/message-input.json

bunx --bun 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

ChatStatus

required

The current chat status. Controls the input state and button appearance (send vs stop).

(content: string) => void

Callback function called when the user sends a message. Receives the trimmed message content.

() => void

required

Callback function called when the user wants to stop AI response generation.

string

Additional CSS classes to apply to the input container.

Getting started

Components

Installation

Usage

Props

​Installation

​Usage

​Props

Installation

Usage

Props