ChatThread

The conversation container that ties all arclo components together. A compound component for rendering chat UIs with user, assistant, and system messages — complete with avatars, timestamps, and auto-scrolling.

ChatThread — Live Demo

Today's conversation — Claude 3.5 Sonnet

You2:34 PM

Can you optimize this Fibonacci function? It's running really slow for large inputs.

Click "Start conversation" to see the assistant reply

ChatThread.Avatar — Variants

Avatar styles

Initials

Custom color

Ocean

Forest

Sunset

Icon

Sizes

In conversation

You

What models do you support?

Claude

I support Claude Sonnet, Opus, and Haiku — each optimized for different use cases.

GPT-4

I'm GPT-4, trained by OpenAI. I excel at reasoning and creative tasks.

Import

tsx

import { ChatThread } from "@arc-lo/ui";

Basic usage

tsx

<ChatThread.Root>
  <ChatThread.Messages>
    <ChatThread.UserMessage name="You">
      Hello!
    </ChatThread.UserMessage>
    <ChatThread.AssistantMessage name="Claude">
      Hi there! How can I help?
    </ChatThread.AssistantMessage>
    <ChatThread.ScrollAnchor />
  </ChatThread.Messages>
</ChatThread.Root>

With all parts

tsx

<ChatThread.Root className="h-[600px]">
  <ChatThread.Messages>
    <ChatThread.SystemMessage>
      New conversation started
    </ChatThread.SystemMessage>

    <ChatThread.UserMessage
      name="You"
      timestamp="2:34 PM"
      avatar={<Avatar src="/me.jpg" />}
    >
      Can you analyze this code?
    </ChatThread.UserMessage>

    <ChatThread.AssistantMessage
      name="Claude"
      timestamp="2:34 PM"
      avatar={<ClaudeIcon />}
    >
      <ThinkingBlock.Root state="done">
        <ThinkingBlock.Trigger>Analyzing</ThinkingBlock.Trigger>
        <ThinkingBlock.Content>...</ThinkingBlock.Content>
      </ThinkingBlock.Root>

      <StreamingText.Root stream={stream}>
        <StreamingText.Content />
        <StreamingText.Cursor />
      </StreamingText.Root>

      <FeedbackBar.Root onFeedback={handleFeedback}>
        <FeedbackBar.ThumbsUp />
        <FeedbackBar.ThumbsDown />
        <FeedbackBar.Copy />
      </FeedbackBar.Root>
    </ChatThread.AssistantMessage>

    <ChatThread.ScrollAnchor />
  </ChatThread.Messages>
</ChatThread.Root>

Using the generic Message

tsx

// UserMessage, AssistantMessage, SystemMessage are
// convenience wrappers around Message with role pre-set.
<ChatThread.Message role="user" name="You">
  Same as ChatThread.UserMessage
</ChatThread.Message>

Sub-components

Part	Description
`Root`	Flex column container for the entire thread
`Messages`	Scrollable area that holds all messages
`Message`	Generic message with explicit role prop
`UserMessage`	Right-aligned message with accent background
`AssistantMessage`	Left-aligned message with subtle border
`SystemMessage`	Centered, muted, smaller informational text
`ScrollAnchor`	Auto-scrolls to bottom when new messages arrive

Props

Root

Prop	Type	Default	Description
`children`	`ReactNode`	—	Thread content (Messages, etc.)
`className`	`string`	—	Additional CSS classes

Messages

Prop	Type	Default	Description
`children`	`ReactNode`	—	Message components
`className`	`string`	—	Additional CSS classes

Message / UserMessage / AssistantMessage / SystemMessage

Prop	Type	Default	Description
`role`	`"user" \| "assistant" \| "system"`	—	Message role (pre-set on convenience wrappers)
`avatar`	`ReactNode`	—	Avatar element (icon, image, initials)
`name`	`string`	—	Display name for the author
`timestamp`	`string`	—	Timestamp string
`children`	`ReactNode`	—	Message content — any arclo components work here

ScrollAnchor

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes