Chat Thread

Open source

A vertical stack of chat bubbles composing a back-and-forth conversation.

Source Open issues Report a bug

Version: v2.0.3
Stability: stable
License: MIT
Related: Chat Bubble; AI Prompt; Scroll Area

You

Is the Q3 launch still on track?

Support

Yes — the rollout is staged behind a flag and we are on schedule for the end of the quarter.

previews.components.chat-thread.default.blade.php Blade

<x-ui.chat-thread class="mx-auto w-full max-w-md" />

Installation

terminal

php artisan ui:add chat-thread

Registry contract

php artisan ui:add chat-thread writes only the files below. The CLI validates each file hash before writing and asks before it replaces a local change, unless you pass --force.

blade resources/views/components/ui/chat-thread.blade.php

Registry dependencies: chat-bubble
Packages: composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: install command, usage, props, guidance and the rules. Copy it, or open a prompt about this component in an assistant.

chat-thread.md

# Brok UI: Chat Thread (`chat-thread`)

A vertical stack of chat bubbles composing a back-and-forth conversation.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add chat-thread
```

## Usage

```blade
<x-ui.chat-thread class="mx-auto w-full max-w-md" />
```

## Props

- `messages` (mixed|null, default `null`)

## Use when

- Use to group related content into scannable units for browsing, prioritization, or rearrangement.
- Composing a conversation out of chat bubbles in order.
- Rendering a transcript or a support thread from an array of messages.

## Avoid when

- Do not use card-like structures when dense row-by-row comparison would be clearer in a list or table.
- Building the composer; ai-prompt is the input surface.
- Showing a single message, where chat-bubble stands alone.

## Anti-patterns

- Turning every object into a card

## Rules

- Use the `<brok:chat-thread>` tag (or `<x-ui.chat-thread>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/chat-thread
- Registry JSON (files, props, contract): https://brokui.dev/r/open/chat-thread.json

Ask about Chat Thread in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

API

manifest knowledge + registry-derived coverage

Props

Props accepted by this component: name, type, default value and description.
Prop	Type	Default	Description
messages	mixed \| null	null

Slots

default —

Data slots

Stable hooks for CSS overrides and browser tests.

chat-thread

Behavior

messages renders one chat-bubble per entry, passing each turn's role, name and avatar through.
Without messages the default slot lays out hand-written bubbles.
Composes chat-bubble for each turn and provides a small fallback conversation when no messages are supplied.
Declares registry capability flags: a11y, responsive, rtl, darkMode, localized.

Guidance

Card-based organization

Organize browsable objects into scannable units.

Use when

Use to group related content into scannable units for browsing, prioritization, or rearrangement.
Composing a conversation out of chat bubbles in order.
Rendering a transcript or a support thread from an array of messages.

Avoid when

Do not use card-like structures when dense row-by-row comparison would be clearer in a list or table.
Building the composer; ai-prompt is the input surface.
Showing a single message, where chat-bubble stands alone.

Use instead

Table for exact comparison
List for compact scanning

Anti-patterns

Turning every object into a card

Anatomy: root
Theming hooks: chat-thread

Accessibility

WCAG 2.2 AA Keyboard focus-visible RTL-ready Localized labels Dark mode

Keyboard: No component-owned keyboard interaction; native element behavior applies.
Focus: none

Bubbles keep their reading order in the DOM, so the thread is read in sequence.
Each bubble inherits its own labelling from chat-bubble.

Semantic HTML and a stable data-slot attribute for styling and scripting hooks.
Focus-visible rings use the ring token, so keyboard focus is always visible.
Disabled and invalid states are conveyed to assistive tech, not by color alone.
Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces in the preview.
Labels go through __() and layout uses logical properties (ms-*, text-start), so it mirrors under dir="rtl" — flip the preview to RTL to confirm.
Dark mode uses the same semantic tokens under the dark class; high contrast follows forced-color system tokens.

Livewire

Safe

Livewire can update this component through forwarded wire:* attributes.

Source

The exact, editable file ui:add writes into your app. Previews render this same code; there are no preview-only components.

resources/views/components/ui/chat-thread.blade.php Blade

@props([
    'messages' => null,
])

@php
    // Sensible demo conversation when no messages are supplied.
    $turns = is_array($messages) && ! empty($messages) ? $messages : [
        ['role' => 'user', 'name' => __('You'), 'content' => __('Is the Q3 launch still on track?')],
        ['role' => 'other', 'name' => __('Support'), 'content' => __('Yes — the rollout is staged behind a flag and we are on schedule for the end of the quarter.')],
    ];
@endphp

<div
    data-slot="chat-thread"
    {{ $attributes->merge(['class' => 'flex flex-col gap-4 text-foreground']) }}
>
    @foreach ($turns as $turn)
        <x-ui.chat-bubble
            :role="$turn['role'] ?? 'user'"
            :name="$turn['name'] ?? null"
            :avatar="$turn['avatar'] ?? null"
        >{{ $turn['content'] ?? '' }}</x-ui.chat-bubble>
    @endforeach
</div>

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.

Owner: Platform UI (@JoshJML)
Current version: 2.0.3
Status: Stable
License: open
Accessibility reviewed: No review date recorded
Last breaking change: No date recorded
Deprecation: Not deprecated
Contract: v6
Foundation: ≥ 1.0.0