Chat Composer Input Alpha

Usage

Chat Composer Input is the editable Shadow-DOM control for the Chat family. It remains framework-neutral and participates in native forms, reset, validation, input, and change behavior.

import "@nordhealth/components/lib/ChatComposerInput"

Composition

Tokens and suggestions

Tokens stay atomic during selection, deletion, copy, cut, paste, undo, redo, and form serialization. Configure triggers as JavaScript records with a trigger character, synchronous or asynchronous source, and onSelect mapper. Replacement searches cancel the prior AbortSignal, and disconnecting cancels pending work.

Give a trigger renderItem to control how each suggestion is presented — an avatar for a mention, an icon for a command — and set group on items to list them under headings. Suggestions keep one flat arrow-navigation order regardless of grouping, Tab commits the highlighted item, and the highlight is always scrolled into view.

Tokens accept a render function for richer content than a label, and expandable: true adds an action that turns the chip back into editable text. Long pastes converted by paste-as-token are expandable by default, so a collapsed paste stays inspectable rather than only removable. Consumer strings are never parsed as HTML: render returns DOM nodes.

Use insertText(), insertToken(), setSelectionRange(), and setValue() for integration without reaching into Shadow DOM. Native composed events and the typed nord-files, nord-token-change, and nord-token-expand events expose serializable data; applications remain responsible for reading and uploading accepted files.

Owning a keystroke

Built-in Enter and history handling runs only when nothing else has claimed the key. Add a capture-phase keydown listener and call preventDefault() to take a keystroke completely — to make Enter insert a newline on a touch keyboard, or to send on Cmd/Ctrl + Enter. An open suggestion menu still consumes its own keys first, and Enter never submits mid-IME-composition.

Examples

Multiline entry

Enter submits from Composer Input, while Shift + Enter inserts a newline. Set max-rows to limit the visible growth before the editor scrolls; it does not limit the message value or number of lines.

Message history

Arrow Up and Arrow Down recall recent entries when the caret is at the corresponding multiline boundary. This is on by default; add no-history to opt out. Supply the history JavaScript property as an array of strings. The current draft is restored when navigation returns past the newest entry, and successful Composer submissions are recorded automatically. At a valid boundary the input first emits the cancelable nord-history-request event with read-only direction, current value, selectionStart, and selectionEnd fields. Cancel it when the application owns history resolution, including remote or paginated history; otherwise the input applies its local history entry.

Pasted text and files

With paste-as-token, plain text at or above paste-token-threshold becomes one atomic token. The cancelable nord-paste-token event exposes the proposed text and token before insertion, so application policy can reject or replace it without a framework-specific hook.

Pasted or dropped files are checked against accept, max-files, and max-file-size. The nord-files event contains immutable accepted and rejected file metadata. Composer Input never reads or uploads the files; the application owns preview, storage, retry, and removal behavior.

Accessibility

Provide a concise label. The editor exposes multiline textbox semantics and becomes a combobox while suggestions are active, with keyboard navigation, selected/disabled option state, and polite result announcements. Always retain keyboard text entry when pairing it with dictation.