Chat
@allem-ui/chat
AI chat interface components — message bubbles, typing indicators, auto-resizing input, and code blocks.
Installation
npm install @allem-ui/chatComponents
ChatContainer + ChatList + ChatBubble
Compose a full chat interface with message bubbles, auto-scrolling, and input.
A
Hello! How can I help?
Tell me about Allem UI
A
Allem UI is the most complete React component library!
TypingIndicator
Animated three-dot indicator showing someone is typing.
CodeBlock
Syntax-styled code block with language label and copy button, designed for chat messages.
typescript
const greeting = "Hello, Allem UI!";
console.log(greeting);ChatBubble Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant* | "sent" | "received" | — | Message direction |
| avatar | string | — | Name for avatar initials (received messages) |
| timestamp | Date | string | — | Message timestamp |
| status | "sending" | "sent" | "delivered" | "read" | — | Delivery status (sent messages) |
| children* | ReactNode | — | Message content |
ChatInput Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onSend* | (message: string) => void | — | Called when user sends a message |
| placeholder | string | — | Input placeholder text |
| isLoading | boolean | false | Show loading state on send button |
| disabled | boolean | false | Disable the input |
ChatContainer Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes |
ChatList Props
| Prop | Type | Default | Description |
|---|---|---|---|
| autoScroll | boolean | true | Auto-scroll to latest message |
| className | string | — | Additional CSS classes |
TypingIndicator Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes |
CodeBlock Props
| Prop | Type | Default | Description |
|---|---|---|---|
| code* | string | — | Code content |
| language | string | — | Language label |
| className | string | — | Additional CSS classes |
MessageGroup Props
| Prop | Type | Default | Description |
|---|---|---|---|
| avatar | string | — | Avatar initials |
| variant* | "sent" | "received" | — | Message direction |
| children* | ReactNode | — | ChatBubble elements |
| className | string | — | Additional CSS classes |