ChatInput

Auto-growing message composer with action bar. Compound: ChatInput + ChatInput.TextArea + ChatInput.ActionBar + ChatInput.Action.

Preview

Usage

import { ChatInput } from '@ramtt/ui'

<ChatInput>
  <ChatInput.TextArea placeholder="Reply..." value={text} onChange={setText} onSubmit={send} />
  <ChatInput.ActionBar>
    <ChatInput.Action icon={<AttachIcon />} label="Attach" />
    <ChatInput.Action icon={<SendIcon />} label="Send" onClick={send} />
  </ChatInput.ActionBar>
</ChatInput>

Props

Prop	Type	Default	Description
children*	`ReactNode`	—	TextArea + ActionBar
className	`string`	—	Additional Tailwind classes on the rounded shell