Conversational AI · specialized

Chat thread

conversational.chat-thread

Chat thread: An interface pattern for prompts, messages, sources, or AI-generated responses.

chat threadthe AI conversation elementthe prompt or response surface

States4

Touch targetDisplay

Evidence4

Introduced by1 kits

Visual specimen

Same contract. Every kit voice.

What should we focus on?

I’ll turn the source into a clear, evidenced system.

MAVAN renderingdefault

Translation table

What code calls it.

Webmessage and form compositionThis component is composed from multiple web primitives.pattern

ARIAlogThe primary accessibility role or state pattern.direct

SwiftUICustom View compositionSwiftUI has no single direct equivalent; compose and name the behavior explicitly.approximation

AppKitCustom NSView compositionAppKit has no single direct equivalent; use a custom view or controller composition.approximation

Anatomy

Every part, named.

1Speaker or source identity
2Message or prompt content
3Response state
4Actions or provenance

Often confused with

Similar shape. Different contract.

Message bubbleconversational.message

Shares a visual family, but has a different role, state model, or interaction contract.

Streaming responsefeedback.streaming

Can look similar in context, but belongs to a different semantic and behavioral family.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Chat thread component (conversational.chat-thread). Chat thread: An interface pattern for prompts, messages, sources, or AI-generated responses. Support these states: default, loading, empty, error. Use semantic design tokens rather than raw visual values. Preserve a minimum appropriatepx touch target where interactive. Provide and verify: implementation, state-matrix, responsive, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.

Studio contract

What must be proven.

Required states

default · loading · empty · error

Required evidence

implementation · state-matrix · responsive · reduced-motion

Source union

lumen