ttolbel UI

Component

AI chat box

A composer with an animating height, an attachment menu, file chips, and a breathing typing indicator: the input bar for any chat-style assistant.

The primitive

AI responses may be inaccurate

ai chat box.tsx
<NativeAIChatBox
  onSend={async (text, files) => { /* send to your AI backend */ }}
  placeholder="Ask a question about your account..."
/>

Example

The composer sitting at the bottom of a support thread, where sending clears the draft and appends a new bubble above it.

AI responses may be inaccurate

ai-chat-box-example.tsx
<SupportThread messages={messages} />
<NativeAIChatBox onSend={onSendMessage} placeholder="Message support" />

Capabilities

PropTypeDescription
onSendrequired(text: string, files: File[]) => Promise<void>
onStop() => void
placeholderstring
disabledboolean
classNamestring