Skip to content

← All components

Brand and content

ChatThread

Accessible message transcript with decorative avatars.

Live example

  1. cofob

    Ship the semantic contract first.
  2. cofob: Then every adapter stays aligned.

  3. reader

    The consecutive messages read as one group.
  4. reader: Read the implementation notes

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { ChatThread } from "@cofob/design-system-react";

/**
 * Complete ChatThread parameter reference.
 * @param messages
 *   type: readonly ChatMessage[]
 *   required
 *   example: {messages}
 * @param label
 *   type: string | renderable content
 *   default: "Conversation"
 *   example: "Accessible label"
 * @param list attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function ChatThreadExample() {
  return (
    <ChatThread messages={messages} />
  );
}

Svelte

svelte
<script lang="ts">
  import { ChatThread } from "@cofob/design-system-svelte";

  // Complete ChatThread parameter reference.
  // messages
  //   type: readonly ChatMessage[]
  //   required
  //   example: {messages}
  // label
  //   type: string | renderable content
  //   default: "Conversation"
  //   example: "Accessible label"
  // list attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<ChatThread messages={messages} />

HTML

html
<!--
  Complete ChatThread parameter reference.
  messages
    type: readonly ChatMessage[]
    required
    example: {messages}
  label
    type: string | renderable content
    default: "Conversation"
    example: "Accessible label"
  list attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<ol class="cf-chat-thread">…</ol>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
messagesrequiredreadonly ChatMessage[]requiredReact · Svelte · HTML{messages}Ordered accessible chat messages with author, body, time, ownership, and avatar.
labelstring | renderable content"Conversation"React · Svelte · HTML"Accessible label"Visible or accessible name, depending on the component.
list attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.