Status line
A line under the conversation for what your app is doing — searching, uploading, waiting in a queue — shown and hidden by your code.
-
<aparte-chat-status>
On this page
<!-- Yours to turn on and off: core never shows it by itself. -->
<aparte-chat-bubble message-id="u1" data-role="user" content="Find where the transport is configured."></aparte-chat-bubble>
<aparte-chat-status visible text="Searching the docs…"></aparte-chat-status>Some waits only your app knows about: it is searching the docs, uploading a file, holding a
place in a queue. <aparte-chat-status> says so in one quiet line. It is yours to turn on with
visible and off again; core never shows it by itself.
It is not the indicator for the pause before the first word of a reply: the reply’s own
waiting indicator covers that, and showing both is two
indicators for one wait. The framework wrappers render one inside the transcript, driven by
their isTyping prop.
Variants
Section titled “Variants”Without text
Section titled “Without text”<aparte-chat-status visible></aparte-chat-status>Without text, the line is a single pulsing dot.
<aparte-chat-status visible=""></aparte-chat-status><aparte-chat-status visible=""></aparte-chat-status>The aparte-* tags are typed JSX intrinsics as soon as you import from @aparte/react. A presence attribute takes '', never true — React stringifies it, and visible={false} would render visible="false", which hasAttribute reads as on.
<template>
<aparte-chat-status visible=""></aparte-chat-status>
</template>Declared through Vue’s GlobalComponents, so vue-tsc checks the tag in any template. A presence attribute takes '' to set and null to remove, never false.
<aparte-chat-status visible=""></aparte-chat-status>Declared through SvelteHTMLElements, so svelte-check covers the attributes and the on: handlers. A presence attribute takes '', never false.
import { AparteChatStatusDirective } from '@aparte/angular';<aparte-chat-status [visible]="true"></aparte-chat-status>A standalone directive whose selector IS the tag, so the real element sits in the template — @if, @for and content projection all reach it — and no CUSTOM_ELEMENTS_SCHEMA is needed.
Installation and the framework-specific traps: React · Vue · Svelte · Angular.
Customize
Section titled “Customize”| Variable | What it sets |
|---|---|
--aparte-status-color | The colour of the text and the dot. |
--aparte-status-font-size | The size of the text. |
--aparte-status-dot-size | The dot’s diameter. |
To draw the line yourself, aparteGlobalConfig.setStatusRenderer() replaces its contents; the
element keeps showing and hiding it, and keeps its accessible name.
<aparte-chat-status> · class AparteChatStatus
Attributes
| Attribute | Description |
|---|---|
visible | Shows or hides the indicator. |
text | The line to show. Absent, the line is dots-only and the accessible name falls back to the locale’s typing word (“Typing” in English). |
Methods
| Method | Description |
|---|---|
show(): void | Show the typing indicator |
hide(): void | Hide the typing indicator |
toggle(): void | Toggle visibility |
isVisible(): boolean | Check if visible |
CSS variables
| Variable | Default | Description |
|---|---|---|
--aparte-status-color | var(--aparte-text-muted) | Colour of the label text and of the pulsing dot in the default line. |
--aparte-status-font-size | var(--aparte-font-size-md) | Size of the visible label (italic by default) in the default line. |
--aparte-status-dot-size | 6px | Diameter of the single pulsing dot in the default line. |
--aparte-message-padding-block | var(--aparte-space-8) | Vertical padding of the row, read because the container also carries .aparte-message — the status line borrows a bubble’s row metrics so it lines up with the transcript. |
--aparte-message-padding-inline | var(--aparte-space-6) | Horizontal padding of the row, same reason. |
--aparte-message-max-width | 800px | Width cap of that same row. |
Accessibility
Section titled “Accessibility”- The line is a polite live region: what it says is announced when it appears, without interrupting.
- With
text, that text is what is announced; without it, the locale’stypingword (“Typing” in English) is, from a visually hidden label. - The dot stops pulsing under
prefers-reduced-motion.
Related
Section titled “Related”- Waiting indicator — the wait before a reply’s first word.
- Conversation — the transcript the line sits under.