Component

Thread View

A conversation thread that renders messages with avatars, relative timestamps, reactions, reply indicators, and attachments. Backed by the headless @refraction-ui/thread-view core.

Default

A thread with a reaction, a nested reply count, an edited message, and an attachment.

A
Alice3:12 PM
Hey team — shipping the new thread view today 🚀
B
Bob3:14 PM
Nice! Does it support reactions and replies?
1 reply
A
Alice3:16 PM(edited)
Here is the spec.
📎thread-view-spec.pdf

Installation

$pnpm add @refraction-ui/react-thread-view

Usage

tsx
import { ThreadView, type MessageData } from '@refraction-ui/react'

const messages: MessageData[] = [
  {
    id: 'm1',
    author: { id: 'u1', name: 'Alice' },
    content: 'Shipping the new thread view today 🚀',
    timestamp: new Date(),
    reactions: [{ emoji: '🚀', count: 3, userReacted: true }],
  },
]

export function Conversation() {
  return (
    <ThreadView
      messages={messages}
      currentUserId="u1"
      onReact={(id, emoji) => toggleReaction(id, emoji)}
      onReply={(id, content) => sendReply(id, content)}
    />
  )
}

Props

PropTypeDefaultDescription
messagesMessageData[]--The thread to render. Each message carries an author, content, timestamp, and optional reactions, replies, attachments, and edited flag.
currentUserIdstring--Id of the viewing user, used for ARIA labelling and ownership cues.
onReply(messageId: string, content: string) => void--Called when the user submits a reply to a message.
onReact(messageId: string, emoji: string) => void--Called when the user toggles a reaction on a message.
classNamestring--Additional CSS classes to apply to the thread container.