HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
ChatView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA conversation: the turns, and where the reader is in them.ExperimentalSince 0.1.0FeedbackUsageimport'@fusion.dev/helix/chat'import'@fusion.dev/helix-headless/chat'Preview
API ReferenceRoothelix-chatA conversation: the turns, and where the reader is in them.
PropTypeDefaultDescriptiondefaultPinnedbooleantrueWhether to open pinned, where nothing declared it.emptyTextstring"Nothing to show"What is said where there are none, and none are coming.labelstring""Accessible name for the conversation.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.pinnedbooleanWhether the transcript follows new turns to the bottom.thresholdnumber48How near the bottom still counts as being at it, in pixels.
ReadTypeDescriptionmessagesHelixHeadlessChatMessage[]The turns declared as children, in the order they are written.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The turns, as `helix-chat-message` children.actionsBeside the header: what can be done to the conversation itself.composerBelow the transcript, where the reader writes.headerAbove the transcript.resumeThe way back to the bottom.statusBeside the composer: somebody typing, connection lost.
EventTypeDescriptionhelix-before-pinHelixBeforePinEventFired when the reader pins or unpins the transcript by scrolling. Cancelable.
MethodTypeDescriptionresume() => voidPuts the transcript back at its most recent turn.
PartDescriptionactionsThe controls for the conversation, at the header's trailing edge.composerThe region the composer sits in.emptyShown when the conversation has no turns.headerThe region above the transcript.loadingShown while the history is still on its way.logThe transcript, which is the thing that scrolls.resumeThe affordance offered while the reader is away from the bottom.statusThe status region, which is not part of the log.
CSS PropertyDescription--chat-gapSpace between turns.--chat-max-block-sizeHow tall the conversation may get before the transcript scrolls.--chat-padding-inlineSpace either side of every region.--chat-resume-border-colorThe edge around the way back.--chat-resume-border-widthHow thick that edge is, for a surface over content.--chat-resume-shadowThe lift under the way back, which floats over the transcript.--chat-ruleThe hairline under the header.
Composerhelix-chat-composerWhere the reader writes their turn.
PropTypeDefaultDescriptiondisabledbooleanfalseWhether the composer refuses input, while a turn is in flight say.labelstring"Message"Accessible name for the field.placeholderstring""Shown in an empty field.rowsnumber1How many rows the field opens at.sendLabelstring"Send"Label for the control that sends.submitOn"button"|"enter""enter"What sends: pressing Enter, or only the control.valuestring""What the reader has written.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionendUnder the field, beside the send control.startUnder the field, at the leading edge: attachments, a model picker.
EventTypeDescriptionhelix-sendHelixSendEventFired when the reader offers their turn, and cancelable.
MethodTypeDescriptionsend() => booleanOffers what is written, and reports whether it stood.
PartDescriptioncomposerThe whole composer.endThe trailing slot's box.fieldThe text field.markThe glyph inside the send control.sendThe control that offers the turn.startThe leading slot's box.toolsThe row under the field.
CSS PropertyDescription--chat-composer-background-colorFill behind the composer.--chat-composer-border-widthThe composer's edge, so a theme can remove it.--chat-composer-max-block-sizeHow tall the field may grow.
Messagehelix-chat-messageOne turn in a conversation, and what has happened to it.
PropTypeDefaultDescriptionatstring""When it was said, as anything `Date` parses.authorstringWho said it.failedLabelstring"Not sent"Label for a message that did not send.localestring""Locale for the timestamp.retryLabelstring"Try again"Label for the control offered on a failed message.sendingLabelstring"Sending"What to call each state, for a reader who cannot see it.separation"filled"|"plain"Where the turn's surface ends.state"failed"|"sending"|"sent"|"streaming"What has happened to it.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)What was said.actionsWhat can be done with it.avatarWho said it.sourcesWhat it was said from: citations, documents, a retrieved page.
EventTypeDescriptionhelix-sendHelixSendEventFired when the reader asks to send a failed message again, and cancelable.
PartDescriptionactionsThe controls offered on the turn, beside its time.avatarThe leading slot's box.bodyWhat was said, and the line under it.contentWhat was said.markThe status glyph beside a failure.messageThe whole turn.metaThe time and the state together.retryThe control offered on a failed message.sourcesWhat the turn was drawn from, under it and outside the bubble.stateWhat has happened to it, where that is worth saying.timeWhen it was said.
CSS PropertyDescription--chat-message-background-colorFill behind a turn.--chat-message-background-color-meFill behind the reader's own turns.--chat-message-colorInk in a turn.--chat-message-measureHow wide a turn may get before it wraps.
Roothelix-headless-chatA conversation: the turns, and where the reader is in them.
PropTypeDefaultDescriptiondefaultPinnedbooleantrueWhether to open pinned, where nothing declared it.emptyTextstring"Nothing to show"What is said where there are none, and none are coming.labelstring""Accessible name for the conversation.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.pinnedbooleanWhether the transcript follows new turns to the bottom.thresholdnumber48How near the bottom still counts as being at it, in pixels.
ReadTypeDescriptionmessagesHelixHeadlessChatMessage[]The turns declared as children, in the order they are written.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The turns, as `helix-chat-message` children.actionsBeside the header: what can be done to the conversation itself.composerBelow the transcript, where the reader writes.headerAbove the transcript: what this conversation is.resumeThe way back to the bottom, shown while the reader has scrolled away.statusBeside the composer: somebody typing, connection lost.
EventTypeDescriptionhelix-before-pinHelixBeforePinEventFired when the reader pins or unpins the transcript by scrolling. Cancelable.
MethodTypeDescriptionresume() => voidPuts the transcript back at its most recent turn.
PartDescriptionactionsThe controls for the conversation, at the header's trailing edge.composerThe region the composer sits in.emptyShown when the conversation has no turns.headerThe region above the transcript.loadingShown while the history is still on its way.logThe transcript, which is the thing that scrolls.resumeThe affordance offered while the reader is away from the bottom.statusThe status region, which is not part of the log.
Composerhelix-headless-chat-composerWhere the reader writes their turn.
PropTypeDefaultDescriptiondisabledbooleanfalseWhether the composer refuses input, while a turn is in flight say.labelstring"Message"Accessible name for the field.placeholderstring""Shown in an empty field.rowsnumber1How many rows the field opens at.sendLabelstring"Send"Label for the control that sends.submitOn"button"|"enter""enter"What sends: pressing Enter, or only the control.valuestring""What the reader has written.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionendUnder the field, beside the send control.startUnder the field, at the leading edge: attachments, a model picker.
EventTypeDescriptionhelix-sendHelixSendEventFired when the reader offers their turn, and cancelable.
MethodTypeDescriptionsend() => booleanOffers what is written, and reports whether it stood.
PartDescriptioncomposerThe whole composer.endThe trailing slot's box.fieldThe text field.markThe glyph inside the send control.sendThe control that offers the turn.startThe leading slot's box.toolsThe row under the field.
Messagehelix-headless-chat-messageOne turn in a conversation, and what has happened to it.
PropTypeDefaultDescriptionatstring""When it was said, as anything `Date` parses.authorstringWho said it.failedLabelstring"Not sent"Label for a message that did not send.localestring""Locale for the timestamp.retryLabelstring"Try again"Label for the control offered on a failed message.sendingLabelstring"Sending"What to call each state, for a reader who cannot see it.state"failed"|"sending"|"sent"|"streaming"What has happened to it.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)What was said.actionsWhat can be done with it: copy, retry, react.avatarWho said it.sourcesWhat it was said from: citations, documents, a retrieved page.
EventTypeDescriptionhelix-sendHelixSendEventFired when the reader asks to send a failed message again, and cancelable.
PartDescriptionactionsThe controls offered on the turn, beside its time.avatarThe leading slot's box.bodyWhat was said, and the line under it.contentThe consumer's own markup.markThe status glyph beside a failure.messageThe whole turn.metaThe line under a turn: its time, its state, and its controls.retryThe control offered on a failed message.sourcesWhat the turn was drawn from, under it and outside the bubble.stateWhat has happened to it, where that is worth saying.timeWhen it was said.
ExamplesNameDescriptionAssistantAn assistant answering: what it drew the answer from, what can be done with it, and the wait before the first token.CommandThe command palette: summoned from anywhere, anchored near the top, and gone when it is answered.EventsA turn sent and a transcript pinned, which are the reader's two asks.FullscreenThe whole screen: a dialog at full size with the conversation filling it.LauncherThe floating one: an icon in the corner, and the conversation in a popover over the page.PreviewA conversation with the four states a turn can be in, and a composer under it.PreviewA conversation with the four states a turn can be in, and a composer under it.SidebarThe sidebar: a drawer from the trailing edge, with the conversation filling the panel.