EditableTurn
StableA message the person sent, which they can edit and send again, with its earlier versions kept.
Also known as edit message, edit prompt, resend
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Edit and send again
<EditableTurn
versions={versions}
current={current}
onChangeVersion={setCurrent}
onResend={(text) => sendEdit(text)}
onCopy={copy}
/>Press Edit, change the question, and Send. Then use the pager to go back.
When to use it
Lets people fix or rephrase what they asked without starting over, and go back to what they had before.
Made of: Message bubble · Version pager · Copy · Edit · Edit box with note · Cancel and Send
Use it for
- Fixing a typo or adding detail to a question already sent.
- Trying a question two ways and comparing the replies.
Not for
- Moving between regenerated versions of a reply: use VersionPager.
- A person's message that cannot be changed: use Message.
- Editing text the AI wrote: use InlineEdit.
Do and avoid
Do
- Keep every version and its replies.
- Say that sending an edit writes the replies after it again.
- Put focus back on Edit when editing ends.
Avoid
- Do not show Edit only on hover.
- Do not throw the old version away.
- Do not let people send an empty edit.
On a phone
- Edit and Copy sit under the bubble at all times, because a phone has no hover.
- The edit box takes the full width on a narrow screen.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| versionsrequired | string[] | none | Every version of this message, oldest first. |
| current | number | none | Which version shows, 1-based. Defaults to the newest. |
| onChangeVersion | (version: number) => void | none | Shows another version and the replies that followed it. |
| onResendrequired | (text: string) => void | none | Sends the edited text as a new version. |
| onCopy | (text: string) => void | none | Copies the message. The button is hidden when omitted. |
| labels | EditableTurnLabels | none | Overrides edit, copy, copied, send, cancel, field and note. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
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.
- one version
- The message with Copy and Edit under it. No pager.
- editing
- The bubble becomes an edit box with a note, Cancel and Send. Escape cancels, Ctrl or Cmd + Enter sends, and focus goes back to Edit.
- several versions
- A pager (◀ 2 of 2 ▶) moves between the versions the person sent.
- empty edit
- Send is turned off while the box is empty.
- focus
- Copy, Edit and the pager arrows show a focus ring on keyboard focus.
Tokens
Change one of these and every part that uses it follows.
--surface-sunken--surface--line-strong--fg-muted--radius-card
Built in
- Edit and Copy are labelled buttons under the bubble, reachable by Tab.
- Editing moves focus into the box with the cursor at the end; Escape cancels and Ctrl or Cmd with Enter sends.
- When editing ends, focus goes back to Edit.
- The pager says which version shows, for example Version 2 of 2.
What you need to do
- Keep the replies of each version, so going back shows what the person saw then.
- Tell people that sending an edit writes the replies after it again; the note under the box does this.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide