Chat New Alpha Light DOM & Tailwind

Usage

Chat’s message and layout primitives structure a conversation without owning application data. Messages, actions, empty content, and the composer stay as the original consumer nodes; your product remains responsible for persistence, loading, authorization, and submission.

Import the elements used by a composition:

import "@nordhealth/components/lib/Chat"
import "@nordhealth/components/lib/ChatLayoutScrollButton"
import "@nordhealth/components/lib/ChatMessageList"
import "@nordhealth/components/lib/ChatMessage"
import "@nordhealth/components/lib/ChatMessageBubble"
import "@nordhealth/components/lib/ChatMessageMetadata"
import "@nordhealth/components/lib/ChatSystemMessage"
import "@nordhealth/components/lib/ChatComposer"
import "@nordhealth/components/lib/ChatAttachment"
import "@nordhealth/components/lib/ChatComposerDrawer"
import "@nordhealth/components/lib/ChatComposerInput"
import "@nordhealth/components/lib/ChatToken"
import "@nordhealth/components/lib/ChatSendButton"
import "@nordhealth/components/lib/ChatTokenizedText"
import "@nordhealth/components/lib/ChatToolCalls"
import "@nordhealth/components/lib/ChatDictationButton"

The panel example combines a named conversation log, assistant and user turns, a date divider, consumer-owned composer, empty state, and scroll affordance.

Composition

Chat is the scroll container for a Message List and consumer-owned Composer. Message, Bubble, Metadata, and System Message structure each turn, while the composer family covers input, drawers, tokens, send actions, tool activity, and optional dictation. Import only the elements used by the product composition.

• Chat Attachment — an image or file attached to a message, pending or sent.
• Chat Layout Scroll Button — the jump-to-latest button that tracks new messages.
• Chat Message List — the accessible, scrollable conversation log.
• Chat Message — groups one turn's avatar, name, bubbles, and metadata.
• Chat Message Bubble — styles a single message fragment (solid or ghost).
• Chat Message Metadata — optional timestamps, delivery status, and footer actions.
• Chat System Message — dividers and status updates between turns.
• Chat Composer — the message-composition shell holding the input and its actions.
• Chat Composer Drawer — a collapsible region for attachments, feedback, or context.
• Chat Composer Input — the rich plain-text input with tokens and triggers.
• Chat Send Button — the send/stop action for the composer.
• Chat Token — an atomic inline token for a mention, entity, or tag.
• Chat Tokenized Text — safely rebuilds tokens from a serialized string.
• Chat Tool Calls — shows LLM tool or function activity with status.
• Chat Dictation Button — speech-to-text capture for the composer.

Examples

Messages and grouping

Set Message sender to assistant or user. The private message context aligns its Bubble and Metadata descendants at the logical edge, including RTL, without reversing semantic or keyboard order. Optional avatar and name properties provide a simple sender treatment; use the corresponding slots when the product needs custom content.

For consecutive fragments from one sender, mark bubbles first, middle, and last. Only the sender-side corners tighten. Filled, ghost, and error variants share Nord semantic color and spacing roles.

Choose compact, balanced, or spacious density on Chat, Message List, or a specific Message override. Message List’s independent gap property accepts Nord spacing values from none through xxl.

Metadata and system updates

Metadata renders only when it has a string timestamp, slotted timestamp, footer, actions, or status. Use slot="timestamp" for localized content such as Nord Timestamp. Delivery statuses are sending, sent, delivered, read, and error; visible text and symbols communicate meaning without color alone.

System Message separates conversation sections or announces status. Use variant="divider" announce="off" for decorative date headings. Use polite for ordinary background changes and reserve assertive for genuinely urgent updates.

Full conversation content

Message List is a named polite role="log". It announces additions, not every text mutation in a streamed response, and exposes aria-busy only while streaming is true. Its empty slot is shown until message rows arrive. The full-featured story includes document tokens, a date divider, grouped assistant bubbles, a ghost bubble with timestamp metadata, a system update, and a delivered user reply. Its deliberate first → last → ghost middle group order exercises non-sequential grouping without adding a disclosure or source-content panel. Code-oriented content is intentionally excluded from Nord’s product-domain Chat examples.

Streaming and older messages

Chat owns the scroll container. It positions the first asynchronous content fill instantly, follows later growth while locked, and respects reduced-motion preferences. If the reader scrolls upward, automatic following stops; new content sets hasNewMessages and emits nord-new-messages-change. Calling scrollToBottom() or naturally reaching the bottom clears that state.

With load-older enabled, Message List’s leading sentinel emits one nord-load-more event when eligible. Prepend the original older nodes in response. The surrounding Chat preserves the reader’s visual anchor from the previous scrollHeight and scrollTop. requestOlder() provides the same intent when a product uses its own trigger.

The scroll affordance emits cancelable nord-scroll-to-latest. Its visible attribute is an explicit override; remove the attribute to return control to the surrounding Chat. Supply label for visible wording such as “3 new messages”; the icon-only state retains a localized accessible name.

Composing messages

Composer is a framework-neutral form shell. It supplies a rich input and send button when their named regions are omitted. Set slot="drawer", header-actions, header-context, input, footer-actions, send-actions, or send-button on direct children to document their role while preserving source and keyboard order. Listen for cancelable nord-submit and nord-stop; the submit event exposes the trimmed plain-string value.

Set the value JavaScript property for controlled usage and echo native input changes back from any framework. Omit it for uncontrolled usage. disabled, loading, and stop-shown coordinate the input and send action. Error and warning status records can appear at the logical top or bottom.

Drawer

Drawer preserves consumer nodes while presenting attachments, progress, or contextual feedback. Omit open for uncontrolled disclosure and use default-open only for its initial state; set open and echo the proposed nord-toggle.open value for controlled usage. count is displayed with the localized label.

Rich input

Composer Input is a form-associated Shadow-DOM plain-text control. Tokens remain atomic during selection, deletion, copy, cut, paste, undo, redo, and form serialization. Configure mentions or commands by setting the triggers JavaScript property to framework-neutral records containing a trigger character, sync or async source, and onSelect mapper. Async searches receive an AbortSignal and are canceled on replacement or disconnect.

insertText(), insertToken(), setSelectionRange(), and setValue() provide imperative integration points without exposing the editable Shadow DOM. nord-files, nord-token-change, and native composed input/change events carry serializable data for every framework. File events expose metadata only; products remain responsible for reading and uploading accepted files.

Send actions and tokenized output

Send Button works independently or reads Composer state through private context. In stop mode it emits nord-stop instead of submitting. Tokenized Text safely turns exact, boundary-matched serialized values into semantic Nord tokens and leaves unknown or hostile strings as text.

Composer, Drawer, Token, Send Button, and Tokenized Text use strict scoped light-DOM styles so their CSS does not become a global selector surface. The shared stylesheet uses :deep() only for intentional compound-child styling; it never stamps consumer content. Composer Input retains Shadow DOM because it captures form and editing data.

Tool calls

Tool Calls presents an ordered immutable snapshot of tool activity. One call stays inline; multiple calls use an accessible disclosure which surfaces the latest activity. Supported statuses are pending, running, complete, error, and unknown. Error text remains visible alongside the status icon, and durations appear only for completed calls.

Set the calls JavaScript property to an array of records and use stable key values while streaming. The renderable stats and resultDetail fields accept an Element, Text, string, or number, never framework-owned render values. Consumer nodes remain unscoped and retain their identity, listeners, state, order, and text across updates.

Use default-open for initial uncontrolled expansion or set the open property for controlled expansion. nord-toggle bubbles with read-only open and optional callKey fields; controlled consumers echo event.open back to the property.

Dictation

Dictation Button is a Shadow-DOM speech data-capture control. It feature-detects standard and prefixed Web Speech recognition and exposes framework-neutral start(), stop(), abort(), and toggle() methods. Repeated starts are ignored; disconnecting, aborting, or disabling during capture releases recognition listeners immediately.

The default unsupported-behavior="hide" renders no control when speech recognition is unavailable. Use unsupported-behavior="disable" to provide a labelled disabled fallback, and always retain keyboard text entry.

Every interim and final update emits nord-transcript; final text additionally emits nord-dictation-result. Integrate with Composer Input through its public insertText() method rather than reaching through its Shadow DOM. Speech recognition may send audio to a browser, operating-system, or remote provider, so request microphone access only after explicit user activation and disclose the applicable privacy behavior at the point of use.

Accessibility

• Give every Message List a concise aria-label which distinguishes that log from other live regions.
• Keep messages and actions in chronological source order. Sender alignment uses logical grid placement and never changes tab order.
• Use System Message announcements for concise state changes instead of expanding the log’s live-region relevance to streamed text.
• Delivery statuses include wording and symbols; error and progress are not color-only.
• Empty, loading, and scroll controls restore only hidden and inert state the component added. Consumer-owned state is preserved.
• Scoped light-DOM styles use exact hosts and reviewed named-slot targets. Consumer nodes are never stamped with the nord-chat ownership scope.
• Reduced motion, forced colors, zoom, RTL, and text resizing retain readable ordering and operable controls.