HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
ChatView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA conversation's turns in a scrolling transcript that keeps the user's place.StableSince 0.1.0FeedbackUsageimport'@fusion.dev/helix/chat'import'@fusion.dev/helix-headless/chat'Preview
API ReferenceRoothelix-chatA conversation's turns in a scrolling transcript that keeps the user's place.
PropTypeDescriptionarrivalLabelstringDefault"{author}: {text}"What a screen reader hears when a turn arrives. {author} is who wrote
it, as its name says it, and {text} its words. A turn with no author a
reader can be told, a turn by them with no author-label, says its
words alone.authorStylesRecord<string, string>Default{}Declarations for the turns from turns by each author, keyed by author,
as JSON in the attribute: {"ada": "--chat-message-background-color: …"}.defaultPinnedbooleanDefaulttrueWhether the transcript opens pinned to the bottom, when pinned is not
set.emptyTextstringDefault"Nothing to show"The text shown and announced when there are no rows and none are loading.failedLabelstringDefault"Not sent"What a turn from turns that did not send says, and what a screen reader
hears before its words. A turn you write as a child says its own
failed-label.failedTurnLabelstringDefault"{failed}: {text}"What a screen reader hears for a turn that did not send. {failed} is the
turn's failed-label and {text} is its words.fallbackLabelstringDefault"Conversation"The conversation's name, read by screen readers, where label is empty.history""|"loading"|"more"Default""Whether there are older turns to load, and whether they are loading.historyTextstringDefault"Loading earlier messages"The text shown while older turns load.labelstringDefault""The conversation's name, read by screen readers.loadingbooleanDefaultfalseWhether the rows are still loading.loadingTextstringDefault"Loading"The text shown and announced while the rows load.meLabelstringDefault"You"The word a screen reader says for me when it names a turn.messageLabelstringDefault"{author}, {time}"The name a screen reader gives a turn with both an author and a time.
{author} is who wrote it and {time} is when, as the turn shows it. A
turn with only one of the two is named by that one.pinnedbooleanWhether the transcript follows new turns to the bottom.resumeLabelstringDefault"Jump to latest"The words on the button that returns to the newest turn, where resume is empty.thresholdnumberDefault48How near the bottom still counts as being at it, in pixels.turnLabelstringDefault"Message"The name a screen reader gives a turn with neither an author it can say
nor a time: a turn by them with no author-label, say.turnsreadonlyChatTurn[]Default[]The turns as data, for a transcript too long to hold as elements.typingstringDefault""Who on the other side is typing, by name, or empty while nobody is.typingLabelstringDefault"{author} is typing"What the status band says while someone is typing. {author} is the
name in typing.
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.actionsControls for the whole conversation, beside the header.composerThe composer, below the transcript.headerContent above the transcript.resumeThe control that returns to the bottom.statusStatus beside the composer, such as someone typing or a lost connection.
EventTypeDescriptionhelix-before-pinHelixBeforePinEventFired when the user pins or unpins the transcript by scrolling. Cancelable.helix-historyHelixHistoryEventFired when the user reaches the oldest turn while history is more. It reports the position and cannot be canceled.helix-pinHelixPinEventFired after the transcript is pinned or unpinned, with true or false in detail.value.helix-sendHelixSendEventFired when the user sends a turn from the composer or retries a failed one. It is fired inside and handled here, so you can listen for it on the conversation. Cancelable: canceling it sends nothing and leaves the decision to you.
MethodTypeDescriptionresume() => voidPuts the transcript back at its most recent turn.
PartDescriptionactionsThe controls for the conversation, at the header's trailing edge.afterThe space the turns below the rendered ones would take. Only for turns from turns.beforeThe space the turns above the rendered ones would take. Only for turns from turns.composerThe region the composer sits in.emptyShown when the conversation has no turns.headerThe region above the transcript.historyShown at the top of the transcript while older turns load.indicatorThe three dots before the words that say who is typing, which the styled tier animates as a message's are. Hidden from screen readers.liveThe region where screen readers announce each turn once it has arrived. Visually hidden in the styled tier.loadingShown while the history loads.logThe transcript, which scrolls.messageThe message drawn for a turn from turns, forwarded whole.message-actionsThe controls on a turn from turns, beside its time.message-avatarThe avatar box of a turn from turns.message-avatar-mineThe avatar box of a turn from turns by me.message-bodyThe content of a turn from turns, and the line under it.message-body-mineThe content of a turn from turns by me, and the line under it.message-contentThe text of a turn from turns.message-content-mineThe text of a turn from turns by me.message-content-sendingThe text of a turn from turns while it is sending.message-content-streamingThe text of a turn from turns while it is streaming.message-indicatorThe default indicator of a turn from turns.message-markThe status icon beside a failed turn from turns.message-metaThe line under a turn from turns, with its time, state, and controls.message-meta-failedThe line under a turn from turns that failed, which shows the failure.message-meta-mineThe line under a turn from turns by me.message-mineThe message drawn for a turn from turns by me.message-retryThe retry button on a failed turn from turns.message-sourcesThe sources of a turn from turns.message-stateThe state text of a turn from turns, when there is one to show.message-timeThe time of a turn from turns.message-workThe box around a turn's work, for a turn from turns, which has none.resumeThe control shown while the user is scrolled away from the bottom.resume-buttonThe button the resume region shows when nothing is slotted into it.resume-markThe arrow on the default resume-button.statusThe status region, outside the log.turnThe wrapper around the message drawn for one turn from turns.typingThe words that say who is typing, in the status band, while typing names someone.
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-colorColor of the edge around the resume control.--chat-resume-border-widthWidth of the edge around the resume control, which sits over content.--chat-resume-shadowShadow under the resume control, which floats over the transcript.--chat-ruleThe hairline under the header.--chat-scrollbar-thumb-colorThe thumb of the transcript's scrollbar. Defaults to --helix-scrollbar-thumb-color.--chat-scrollbar-thumb-hover-colorThe thumb while the pointer is over the transcript. Defaults to --helix-scrollbar-thumb-hover-color.--chat-scrollbar-track-colorThe track of the transcript's scrollbar. Defaults to --helix-scrollbar-track-color.--chat-typing-colorThe color of the dots and the words that say who is typing.--chat-typing-gapThe space between the dots and the words that say who is typing.
Custom stateDescriptionemptyThe conversation has no turns.loadingOlder turns are loading: history is loading.pinnedThe transcript follows its newest turn.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.typingtyping names someone on the other side.
Composerhelix-chat-composerA field for writing a turn in a conversation.
PropTypeDescriptiondisabledbooleanDefaultfalseWhether the control is disabled and cannot be used.feedbackstringDefault""A message about the draft, shown under the field. While set, the composer
is invalid, does not send, and does not submit, as a field's feedback
does, and the message is announced as it appears.labelstringDefault"Message"The field's name, read by screen readers.maxLengthnumberThe most characters a draft can have. The field stops taking more.minLengthnumberThe fewest characters a draft can have, once the reader has written in
the field, as on a <textarea>.namestringDefault""The name the control's value is submitted under.placeholderstringDefault""Placeholder text shown in an empty field.requiredbooleanDefaultfalseWhether the form needs a draft to submit. An empty draft never sends,
required or not.rowsnumberDefault1How many rows the field opens at.sendLabelstringDefault"Send"Label for the send button.submitOn"button"|"enter"Default"enter"What sends the turn: enter for the Enter key, or button for the send
button only.typingTimeoutnumberDefault3000How long after the last keystroke the user still counts as typing, in
milliseconds. The attribute also takes a CSS time, such as 3s.valuestringDefault""The text the user has written.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.typingbooleanWhether the user is writing: true from their first keystroke until they
send, clear the field, or pause for typing-timeout milliseconds.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescriptionendContent under the field, beside the send button.startContent under the field at the leading edge, such as an attachment button or a model picker.
EventTypeDescriptionhelix-sendHelixSendEventFired when the user sends their turn, and cancelable.helix-typingHelixTypingEventThe user started or stopped writing, with typing saying which, as the composer's typing does.inputEventThe user changed the text. Read it from value, for a typing indicator or a saved draft. Bubbles and is composed, as a native field's is.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidMoves focus to the control, as focusing a native control does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.send() => booleanSends what is written, and returns whether the send went through.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.
PartDescriptioncomposerThe whole composer.endThe box around the end slot.feedbackThe feedback message, under the field while it is set.fieldThe text field.markThe icon inside the send button.sendThe send button.startThe box around the start slot.toolsThe row under the field.
CSS PropertyDescription--chat-composer-background-colorFill behind the composer.--chat-composer-border-widthWidth of the composer's edge, so your theme can remove it.--chat-composer-max-block-sizeMaximum height the field grows to.
Custom stateDescriptioninvalidThe draft fails required, minlength, maxlength, or a custom error, and the reader has tried to send or submit it, or edited the field and left it. Or feedback is set.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Messagehelix-chat-messageOne turn in a conversation, with its state, such as sending or failed.
PropTypeDescriptionatstringDefault""The turn's time, in any format Date parses.authorstringThe turn's author.authorLabelstringDefault""The author's name, as a screen reader says it at the start of the turn,
such as "Support" or "Ada Lovelace".failedLabelstringDefault"Not sent"Label for a message that did not send.localestringDefault""The locale the timestamp and the words are in, as a BCP 47 tag such as
de. Empty reads the nearest lang, then the browser's language.retryLabelstringDefault"Try again"Label for the retry button on a failed message.sendingLabelstringDefault"Sending"The label shown while the message is sending.separation"filled"|"plain"How the turn is set apart. filled draws a bubble, and plain draws the
turn as text on the transcript.state"failed"|"sending"|"sent"|"streaming"The turn's state.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The turn's content.actionsControls for the turn.avatarThe author's avatar.indicatorThe indicator shown before the first token arrives. Replaces the three dots.sourcesThe turn's sources, such as citations, documents, or a retrieved page.workWhat an agent did to arrive at the turn, such as a Log of its steps, above the content. A screen reader hears the turn without it.
EventTypeDescriptionhelix-sendHelixSendEventFired when the user retries a failed message. Cancelable: if it is not canceled, the turn is sent again. Canceling it leaves the failure and the retry button as they were.
PartDescriptionactionsThe controls on the turn, beside its time.avatarThe box around the avatar slot.bodyThe content and the line under it.contentThe turn's content.indicatorThe three dots, shown when nothing is in the indicator slot.markThe status icon beside a failure.messageThe whole turn.metaThe time and the state together.retryThe retry button on a failed message.sourcesThe turn's sources, under it and outside the bubble.stateThe text that names the turn's state, when there is one to show.timeThe turn's time.workThe box around the work slot, above the content.
CSS PropertyDescription--chat-indicator-background-colorFill behind a slotted indicator, drawn as a chip so its icon and its text read as one unit.--chat-message-background-colorFill behind a turn.--chat-message-background-color-meFill behind turns by me.--chat-message-colorText color in a turn.--chat-message-color-meText color in turns by me.--chat-message-measureMaximum width of a turn before its text wraps.--chat-message-meta-colorColor of the line under a turn, with its time and state.--chat-message-padding-blockSpace above and below a turn's content inside its bubble.--chat-message-padding-inlineSpace either side of a turn's content inside its bubble.--chat-message-radiusCorner radius of a turn's bubble.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-chatA conversation's turns in a scrolling transcript that keeps the user's place.
PropTypeDescriptionarrivalLabelstringDefault"{author}: {text}"What a screen reader hears when a turn arrives. {author} is who wrote
it, as its name says it, and {text} its words. A turn with no author a
reader can be told, a turn by them with no author-label, says its
words alone.authorStylesRecord<string, string>Default{}Declarations for the turns from turns by each author, keyed by author,
as JSON in the attribute: {"ada": "--chat-message-background-color: …"}.defaultPinnedbooleanDefaulttrueWhether the transcript opens pinned to the bottom, when pinned is not
set.emptyTextstringDefault"Nothing to show"The text shown and announced when there are no rows and none are loading.failedLabelstringDefault"Not sent"What a turn from turns that did not send says, and what a screen reader
hears before its words. A turn you write as a child says its own
failed-label.failedTurnLabelstringDefault"{failed}: {text}"What a screen reader hears for a turn that did not send. {failed} is the
turn's failed-label and {text} is its words.fallbackLabelstringDefault"Conversation"The conversation's name, read by screen readers, where label is empty.history""|"loading"|"more"Default""Whether there are older turns to load, and whether they are loading.historyTextstringDefault"Loading earlier messages"The text shown while older turns load.labelstringDefault""The conversation's name, read by screen readers.loadingbooleanDefaultfalseWhether the rows are still loading.loadingTextstringDefault"Loading"The text shown and announced while the rows load.meLabelstringDefault"You"The word a screen reader says for me when it names a turn.messageLabelstringDefault"{author}, {time}"The name a screen reader gives a turn with both an author and a time.
{author} is who wrote it and {time} is when, as the turn shows it. A
turn with only one of the two is named by that one.pinnedbooleanWhether the transcript follows new turns to the bottom.resumeLabelstringDefault"Jump to latest"The words on the button that returns to the newest turn, where resume is empty.thresholdnumberDefault48How near the bottom still counts as being at it, in pixels.turnLabelstringDefault"Message"The name a screen reader gives a turn with neither an author it can say
nor a time: a turn by them with no author-label, say.turnsreadonlyChatTurn[]Default[]The turns as data, for a transcript too long to hold as elements.typingstringDefault""Who on the other side is typing, by name, or empty while nobody is.typingLabelstringDefault"{author} is typing"What the status band says while someone is typing. {author} is the
name in typing.
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.actionsControls for the whole conversation, beside the header.composerThe composer, below the transcript.headerContent above the transcript that names the conversation.resumeThe control that returns to the bottom, shown while the user has scrolled away. Defaults to a button named by resume-label.statusStatus beside the composer, such as someone typing or a lost connection.
EventTypeDescriptionhelix-before-pinHelixBeforePinEventFired when the user pins or unpins the transcript by scrolling. Cancelable.helix-historyHelixHistoryEventFired when the user reaches the oldest turn while history is more. It reports the position and cannot be canceled.helix-pinHelixPinEventFired after the transcript is pinned or unpinned, with true or false in detail.value.helix-sendHelixSendEventFired when the user sends a turn from the composer or retries a failed one. It is fired inside and handled here, so you can listen for it on the conversation. Cancelable: canceling it sends nothing and leaves the decision to you.
MethodTypeDescriptionresume() => voidPuts the transcript back at its most recent turn.
PartDescriptionactionsThe controls for the conversation, at the header's trailing edge.afterThe space the turns below the rendered ones would take. Only for turns from turns.beforeThe space the turns above the rendered ones would take. Only for turns from turns.composerThe region the composer sits in.emptyShown when the conversation has no turns.headerThe region above the transcript.historyShown at the top of the transcript while older turns load.indicatorThe three dots before the words that say who is typing, which the styled tier animates as a message's are. Hidden from screen readers.liveThe region where screen readers announce each turn once it has arrived. Visually hidden in the styled tier.loadingShown while the history loads.logThe transcript, which scrolls. On this tier, it needs only a block size.messageThe message drawn for a turn from turns, forwarded whole.message-actionsThe controls on a turn from turns, beside its time.message-avatarThe avatar box of a turn from turns.message-avatar-mineThe avatar box of a turn from turns by me.message-bodyThe content of a turn from turns, and the line under it.message-body-mineThe content of a turn from turns by me, and the line under it.message-contentThe text of a turn from turns.message-content-mineThe text of a turn from turns by me.message-content-sendingThe text of a turn from turns while it is sending.message-content-streamingThe text of a turn from turns while it is streaming.message-indicatorThe default indicator of a turn from turns.message-markThe status icon beside a failed turn from turns.message-metaThe line under a turn from turns, with its time, state, and controls.message-meta-failedThe line under a turn from turns that failed, which shows the failure.message-meta-mineThe line under a turn from turns by me.message-mineThe message drawn for a turn from turns by me.message-retryThe retry button on a failed turn from turns.message-sourcesThe sources of a turn from turns.message-stateThe state text of a turn from turns, when there is one to show.message-timeThe time of a turn from turns.message-workThe box around a turn's work, for a turn from turns, which has none.resumeThe control shown while the user is scrolled away from the bottom.resume-buttonThe button the resume region shows when nothing is slotted into it.resume-markThe arrow on the default resume-button.statusThe status region, outside the log.turnThe wrapper around the message drawn for one turn from turns.typingThe words that say who is typing, in the status band, while typing names someone.
Custom stateDescriptionemptyThe conversation has no turns.loadingOlder turns are loading: history is loading.pinnedThe transcript follows its newest turn.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.typingtyping names someone on the other side.
Composerhelix-headless-chat-composerA field for writing a turn in a conversation.
PropTypeDescriptiondisabledbooleanDefaultfalseWhether the control is disabled and cannot be used.feedbackstringDefault""A message about the draft, shown under the field. While set, the composer
is invalid, does not send, and does not submit, as a field's feedback
does, and the message is announced as it appears.labelstringDefault"Message"The field's name, read by screen readers.maxLengthnumberThe most characters a draft can have. The field stops taking more.minLengthnumberThe fewest characters a draft can have, once the reader has written in
the field, as on a <textarea>.namestringDefault""The name the control's value is submitted under.placeholderstringDefault""Placeholder text shown in an empty field.requiredbooleanDefaultfalseWhether the form needs a draft to submit. An empty draft never sends,
required or not.rowsnumberDefault1How many rows the field opens at.sendLabelstringDefault"Send"Label for the send button.submitOn"button"|"enter"Default"enter"What sends the turn: enter for the Enter key, or button for the send
button only.typingTimeoutnumberDefault3000How long after the last keystroke the user still counts as typing, in
milliseconds. The attribute also takes a CSS time, such as 3s.valuestringDefault""The text the user has written.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.typingbooleanWhether the user is writing: true from their first keystroke until they
send, clear the field, or pause for typing-timeout milliseconds.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescriptionendContent under the field, beside the send button.startContent under the field at the leading edge, such as an attachment button or a model picker.
EventTypeDescriptionhelix-sendHelixSendEventFired when the user sends their turn, and cancelable.helix-typingHelixTypingEventThe user started or stopped writing, with typing saying which, as the composer's typing does.inputEventThe user changed the text. Read it from value, for a typing indicator or a saved draft. Bubbles and is composed, as a native field's is.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidMoves focus to the control, as focusing a native control does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.send() => booleanSends what is written, and returns whether the send went through.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.
PartDescriptioncomposerThe whole composer.endThe box around the end slot.feedbackThe feedback message, under the field while it is set.fieldThe text field.markThe icon inside the send button.sendThe send button.startThe box around the start slot.toolsThe row under the field.
Custom stateDescriptioninvalidThe draft fails required, minlength, maxlength, or a custom error, and the reader has tried to send or submit it, or edited the field and left it. Or feedback is set.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Messagehelix-headless-chat-messageOne turn in a conversation, with its state, such as sending or failed.
PropTypeDescriptionatstringDefault""The turn's time, in any format Date parses.authorstringThe turn's author.authorLabelstringDefault""The author's name, as a screen reader says it at the start of the turn,
such as "Support" or "Ada Lovelace".failedLabelstringDefault"Not sent"Label for a message that did not send.localestringDefault""The locale the timestamp and the words are in, as a BCP 47 tag such as
de. Empty reads the nearest lang, then the browser's language.retryLabelstringDefault"Try again"Label for the retry button on a failed message.sendingLabelstringDefault"Sending"The label shown while the message is sending.state"failed"|"sending"|"sent"|"streaming"The turn's state.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The turn's content.actionsControls for the turn, such as copy, retry, or react.avatarThe author's avatar.indicatorThe indicator shown before the first token arrives. Defaults to the typing indicator.sourcesThe turn's sources, such as citations, documents, or a retrieved page.workWhat an agent did to arrive at the turn, such as a Log of its steps, above the content. A screen reader hears the turn without it.
EventTypeDescriptionhelix-sendHelixSendEventFired when the user retries a failed message. Cancelable: if it is not canceled, the turn is sent again. Canceling it leaves the failure and the retry button as they were.
PartDescriptionactionsThe controls on the turn, beside its time.avatarThe box around the avatar slot.bodyThe content and the line under it.contentYour own markup.indicatorThe default indicator, drawn only when nothing is in the indicator slot.markThe status icon beside a failure.messageThe whole turn.metaThe line under a turn, with its time, state, and controls.retryThe retry button on a failed message.sourcesThe turn's sources, under it and outside the bubble.stateThe text that names the turn's state, when there is one to show.timeThe turn's time.workThe box around the work slot, above the content.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionBuilt From ComponentsAn answer built from Helix components, with a heading, steps that include a command, a table, a warning, and a link.Command PaletteA command palette that opens with a shortcut from anywhere, sits near the top of the screen, and closes with Esc.Each AuthorTurns set as data, each author's drawn in a fill of their own through author-styles.EventsThe events for sending a message and for pinning the transcript by scrolling.FullscreenA conversation that fills the page, flat and full height, with its turns in a column of readable width.HistoryOlder turns that load as you reach the top, without moving what you were reading.IndicatorThe indicator shown while a reply is on its way, as it comes and replaced with your own.LauncherAn icon button in the corner that opens 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.Rendered MarkdownThe same answer rendered from Markdown and styled by data-prose, with its code fence shown as a Code Block and its alert as a Callout.Reply With SourcesAn assistant reply with its sources, actions for the answer, and the indicator shown before the first token.Reply With StepsAn agent reply that shows each step of its work, then streams the answer.Reply With WorkAn agent's answer with the work it did to reach it, kept as a log above the reply.SidebarA drawer from the trailing edge, with the conversation filling the panel.StreamingAn answer that arrives a word at a time, from the wait to the last word.TranscriptTwo thousand turns set as data, with only the visible ones drawn.TranscriptTwo thousand turns set as data, with only the visible ones drawn.TypingWho on the other side is typing, said in the status band with three dots.