Stop, Edit, Retry, Undo

By the Syncfusion DevTutorials team · Last updated October 26, 2026

Give users control over AI output: stop a runaway answer, fix the question, keep every version when they retry, and undo an applied suggestion to the exact state before.

What User Control Means

User control = the user can steer the AI at any moment: stop it, fix the question, ask again, or take back a change.

In this lesson, you will add four controls to the order-support app: Stop, Edit, Retry and Undo.

AI output changes from run to run, and it is sometimes wrong. So the user needs a way out at every step.

A support agent asks the AI to draft a reply to Asha. Halfway through, the draft starts to ramble about "our delivery partners and our service". The agent wants it to stop. There is no button.

Press Play, or use Next to go one step at a time.

• Frame 1: the moment the user wants to stop. Both answers look the same so far.
• Frame 2: the end. Without Stop, the answer ran on. With Stop, it ended where the user wanted.
• The score: how many words the user has to read.

Simple lesson: a user who cannot stop the AI has to wait for it.

A Real-World Example

Think about a sat-nav in a car.

• You can cancel the route when you change your mind.
• You can change the address when you typed the wrong one.
• You can ask for another route and compare.
• If it sends you down a wrong turn, you can go back to where you were.

A sat-nav with none of these would be frightening to use.

AI features need the same four controls:

• Cancel the route = Stop.
• Change the address = Edit the question.
• Another route = Retry.
• Go back = Undo.

Click the button. The Build tab plays the undo scenario through the naive interface.

• Moment by moment: the user applies an AI rewrite to the ticket note, fixes a typo, then wants the original back.
• The note at the end: it is not the original.
• The checks: which control is missing.

Simple lesson: each control answers one "I want to…" moment.

What You Will Learn

In this lesson, you will learn:

1. How to stop an answer mid-stream.
2. How to let users fix the question and get a new answer.
3. How Retry can keep every version.
4. Why undo must go back to a snapshot, not just the last edit.
5. The checks your controls must pass.

Stop

Stop = end the answer where it is, and keep the words written so far.

Show Stop while the answer streams. When pressed:

• the stream ends (abort the request, as in Lesson 2);
• the words so far stay on screen;
• Edit and Retry appear, so the user can try again.

Simple lesson: Stop keeps what is useful and saves reading time.

Edit the Question

The user asked about order #A-1024, but meant #A-1042. The answer is correct, for the wrong order.

Edit = open the question again, change it, and get a new answer in the same place.

Without Edit, the user retypes the whole question in a new message, and the wrong answer stays in the thread to confuse the next reader.

Simple lesson: a wrong question needs a fix, not a new conversation.

Retry and Versions

Why Retry Matters

AI output changes each time. The first try is often not the best try.

Retry = ask for another answer to the same question.

Keep Every Version

Version = one answer to the same question. Retry adds a new version. It does not replace the old one.

Step through both frames.

• Frame 1: without Retry, the one-word subject line "Sorry" is all the user gets.
• Frame 2: with Retry, version 2 appears, and version 1 is kept to compare.

Keep versions in a list, and show "Version 2 of 2" with arrows:

function useVersions() {
  const [versions, setVersions] = useState<string[]>([]);
  const [current, setCurrent] = useState(0);
  const add = (text: string) => setVersions((v) => { setCurrent(v.length); return [...v, text]; });
  return { versions, current, setCurrent, add };
}

Simple lesson: keep every version, so trying again is safe.

Undo

The Problem

The user applies an AI rewrite to the ticket note. Then they fix a typo. Then they decide the rewrite was a mistake.

What does Undo give back?

Step through all three frames.

• Frame 1: the AI rewrite replaces the user's note.
• Frame 2: the user fixes a typo in it.
• Frame 3: three kinds of undo. Only the snapshot brings back the original note.

Snapshot Undo

Snapshot = a saved copy of the user's work, taken just before the AI changed it.

Save the snapshot when the suggestion is applied. Undo goes back to it:

function useSnapshotUndo<T>(value: T, setValue: (v: T) => void) {
  const [snapshot, setSnapshot] = useState<T | null>(null);
  const apply = (next: T) => { setSnapshot(value); setValue(next); };
  const undo = () => { if (snapshot !== null) { setValue(snapshot); setSnapshot(null); } };
  return { apply, undo, canUndo: snapshot !== null };
}

Simple lesson: undo goes back to the exact state before the AI touched the user's work.

Lab Exercise: Give the User Control

Your task: change the Lesson 4 choices in the Build tab so all four scenarios pass. Then press Check all scenarios.

Click the button and open the Build tab.

• Stop, Edit and Retry: tick them on.
• Undo: choose the kind that brings back the original note.
• Play each scenario: watch the scripted user press each control.

Simple lesson: Stop, Edit, Retry and Undo each get the user out of one kind of trouble.

What Changes per Framework

Build It in React

The Build tab uses switches. In the Code tab you write the same controls as a React component. The scripted agent runs it, and the lab acts as the user: it presses Stop, fixes the question, presses Retry, then Apply and Undo.

Two ideas carry the whole lesson. Keep every version in a list, so Retry adds instead of replacing:

const retry = () => { setShown(versions.length); setVersions([...versions, ""]); agent.retry(); };

And save a snapshot before the AI changes the user's work, so Undo can bring it back word for word:

const apply = () => { setBefore(note); setNote(versions[shown]); };
const undo = () => { if (before !== null) setNote(before); };

TL;DR

1. User control = the user can steer the AI at any moment.
2. Stop = end the answer where it is, keep the words so far.
3. Edit = fix the question and get a new answer in the same place.
4. Retry = another answer to the same question. Keep every version.
5. Undo = go back to a snapshot from before the AI changed the user's work.

Common mistakes

Check Your Understanding

Exercises

What to Remember

• Users need a way out at every step.
• Stop ends the answer and keeps the words so far.
• Edit fixes the question in place.
• Retry adds a version and never replaces one.
• Undo goes back to a snapshot from before the AI change.
• Show the controls where the user needs them, not in a menu.

Further Reading

• Guidelines for Human-AI Interaction, by Microsoft Research: see "Support efficient correction" and "Support efficient dismissal".
• User control and freedom, by Nielsen Norman Group: why every action needs an emergency exit.

Next: Ask Before Acting, where the agent wants to refund, send and tag, and you decide when it must ask first.