Chat

Chat renders a scrolling thread of message bubbles plus a composer with a send button. It is controlled: pass the messages array and an onSend(content) handler that appends the new message — the component only tracks the draft text. Each message carries a sender ('user' or 'other'), so bubbles align to the correct side. The view auto-scrolls to the latest message, Enter sends while Shift+Enter adds a line, and typingIndicator shows an animated "typing" state.

Example

Preview

Officina Bot

This is a real interactive Chat primitive.

06:08 PM

import { Chat } from '@officina/ui';
import { useState } from 'react';

function Conversation() {
  const [messages, setMessages] = useState([
    { id: '1', content: 'Hey there!', sender: 'other', senderName: 'Bot', timestamp: new Date() },
  ]);
  return (
    <Chat
      messages={messages}
      onSend={(content) =>
        setMessages((prev) => [
          ...prev,
          {
            id: crypto.randomUUID(),
            content,
            sender: 'user',
            status: 'sent',
            timestamp: new Date(),
          },
        ])
      }
    />
  );
}

API

Prop	Type	Default	Description
messages*	ChatMessage[]	—	Conversation messages in chronological order.
onSend*	(content: string) => void	—	Called with the message text when the user sends.
disabled	boolean	false	Disable the composer.
emptyState	ReactNode	—	Content shown when there are no messages.
loading	boolean	false	Show a loading state for an in-flight response.
placeholder	string	Type a message…	Placeholder for the composer input.
typingIndicator	boolean	false	Show an animated typing indicator.

Example

API

On this page