Beginner
Add a Stop Button with useChat
The route streams a long answer, slowly. Show a button #stop only while the chat is submitted or streaming, and make it call stop(). Show each message as a <p> with the class user or assistant inside #messages.
After stopping, the words that already arrived must stay on screen, #stop must be gone, and the status must be ready again.
What Check tests
- Before asking, there is no
#stopbutton - While the answer is on its way,
#stopis shown - Clicking
#stopkeeps the words that arrived, removes the button and returns toready - A stopped answer stays stopped: after a while the text has not grown
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.