ContinueNotice
StableSays why a reply ended early and offers to carry on.
Also known as continue generating, truncated response
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Hit the length limit
Here is the full list of the 40 stations on the line, with opening years: 1. Baixa-Chiado (1998), 2. Cais do Sodré (1998), 3. Rossio (1963)…
The reply stopped at the length limit.
<ContinueNotice reason="length" onContinue={continueReply} />Press Continue to carry on from where it stopped.
When to use it
Makes an unfinished reply look unfinished, and gives a one-press way to finish it.
Made of: Icon · Reason · Continue or Try again
Use it for
- A reply that hit the length limit.
- A reply the person stopped.
- A reply cut off by a lost connection.
Not for
- Running out of messages for the day: use RateLimitNotice.
- A request the AI will not answer: use RefusalNotice.
- Any other error: use ErrorState.
Do and avoid
Day three starts in Sintra. Take the early train, then walk up to
The reply stopped at the length limit.
Day three starts in Sintra. Take the early train, then walk up to
Do
- Say why it stopped, in plain words.
- Continue from where it stopped, not from the start.
Avoid
- Do not show it on a reply that finished.
- Do not use red. Stopping early is not an error.
- Do not blame the person.
On a phone
- The button drops under the line on a narrow screen.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| reasonrequired | "length" | "stopped" | "lost" | none | Why the reply ended early. |
| onContinuerequired | () => void | none | Carries on from where it ended, or tries again after a lost connection. |
| busy | boolean | none | True while the continuation starts. The button keeps its place and ignores presses. |
| labels | ContinueNoticeLabels | none | Overrides length, stopped, lost, continue and retry. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one ContinueNotice switches all of this from its properties panel, across 6 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Reason | reason | Length, Stopped, Lost |
| Busy | busy | On or off |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- length limit
- Says the reply stopped at the length limit, with Continue.
- stopped
- Says the person stopped the reply, with Continue.
- connection lost
- A warning mark, and Try again in place of Continue.
- busy
- The button shows a spinner, keeps its place and ignores presses.
Tokens
Change one of these and every part that uses it follows.
--fg-muted--radius-control
Built in
- The reason is text next to an icon, not the icon alone.
- While busy, the button says it is working and ignores presses but keeps focus.
What you need to do
- Put it straight after the reply it belongs to.
- Turn on busy while the continuation starts, so a second press does nothing.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide