ChatInput Component

The ChatInput component provides a text input interface for users to compose and send messages.

Import

import { ChatInput } from 'aichatkit'

Usage

Basic Example

basic-chat-input.tsx

import { ChatInput } from 'aichatkit'
 
function BasicChatInput() {
  const handleSend = (message: string) => {
    console.log('Sending message:', message)
  }
 
  return (
    <ChatInput 
      onSend={handleSend}
      placeholder="Type your message..."
    />
  )
}

With File Upload

file-upload-input.tsx

<ChatInput 
  onSend={handleSend}
  onFileUpload={handleFileUpload}
  enableFileUpload={true}
  acceptedFileTypes={['image/*', '.pdf']}
  maxFileSize={10 * 1024 * 1024} // 10MB
/>

API Reference

Props

Prop	Type	Default	Description
`onSend`	`(message: string) => void`	-	Callback when message is sent
`onFileUpload`	`(files: File[]) => void`	-	Callback when files are uploaded
`placeholder`	`string`	`'Type a message...'`	Input placeholder text
`disabled`	`boolean`	`false`	Whether input is disabled
`enableFileUpload`	`boolean`	`false`	Enable file upload functionality
`acceptedFileTypes`	`string[]`	`['*']`	Accepted file types
`maxFileSize`	`number`	`10485760`	Maximum file size in bytes
`maxLength`	`number`	`2000`	Maximum message length

The ChatInput component supports keyboard shortcuts like Ctrl+Enter for sending messages.

MessageList ThinkingIndicator