Message Bubble

Component 3

About

Conversation bubbles with a typing indicator, streamed replies, timestamps, and delivery status.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Message Bubble to your project and fits it to your theme.

Code

How Message Bubble is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from 'react'
import MessageBubble, { type MessageStatus } from '@/components/ui/message-bubble'

const reply =
  'The email field is missing a persistent label. I can add one and preserve the current layout.'

const frames: {
  status: MessageStatus
  reply: 'none' | 'typing' | 'streaming' | 'done'
  wait: number
}[] = [
  { status: 'sending', reply: 'none', wait: 700 },
  { status: 'sent', reply: 'none', wait: 700 },
  { status: 'read', reply: 'typing', wait: 1500 },
  { status: 'read', reply: 'streaming', wait: 1800 },
  { status: 'read', reply: 'done', wait: 3200 },
]

export default function Demo() {
  const [index, setIndex] = React.useState(3)
  const [round, setRound] = React.useState(0)
  const frame = frames[index]

  React.useEffect(() => {
    const timer = setTimeout(() => {
      if (index === frames.length - 1) setRound((value) => value + 1)
      setIndex((value) => (value + 1) % frames.length)
    }, frame.wait)
    return () => clearTimeout(timer)
  }, [frame.wait, index])

  return (
    <div className="flex min-h-64 w-full max-w-lg flex-col gap-3" key={round}>
      <MessageBubble from="system">Today</MessageBubble>
      <MessageBubble from="user" status={frame.status} time="09:41">
        Find the accessibility issue in this form.
      </MessageBubble>
      {frame.reply !== 'none' && (
        <MessageBubble
          streaming={frame.reply === 'streaming'}
          time={frame.reply === 'done' ? '09:41' : undefined}
          typing={frame.reply === 'typing'}
        >
          {reply}
        </MessageBubble>
      )}
    </div>
  )
}