simple-aisimple-ai
GitHubGitHub

Chat input

Chat input with mentions and streaming status.

Preview

Open full screen

Installation

npx shadcn@latest add @simple-ai/chat-input

Usage

import {
  ChatInput,
  ChatInputEditor,
  ChatInputMentionButton,
  ChatInputSubmitButton,
} from "@/components/ui/chat-input"
import { InputGroupAddon } from "@/components/ui/input-group"

export function Prompt() {
  return (
    <ChatInput
      mentions={{
        member: { trigger: "@", items: [{ id: "1", name: "Alice" }] },
      }}
      onSubmit={(parsed, { clear }) => {
        console.log(parsed.text, parsed.member)
        clear()
      }}
      status="ready"
    >
      <ChatInputEditor placeholder="Type a message..." />
      <InputGroupAddon align="block-end">
        <ChatInputMentionButton />
        <div className="ml-auto">
          <ChatInputSubmitButton />
        </div>
      </InputGroupAddon>
    </ChatInput>
  )
}

Press Enter to submit, Shift+Enter for a new line. parsed.text is the plain string; mention buckets (parsed.member, …) are typed from the mentions map. Pass status from the AI SDK (ready / submitted / streaming / error) so the send button becomes stop/spinner. Submit already blurs the editor so the mobile keyboard closes. Call clear() after send; do not call focus() or the keyboard opens again.