AI Frontend · Exercise 6 of 6 Previous
Advanced
Mini Mitra: Guard, Stop, Error
Build the composer of Mitra with useChat. The input is #prompt, the button is #send, messages go in #messages (a <p> per message with class user or assistant).
Rules: #send is disabled for empty or whitespace-only text; submitting while an answer is on its way does nothing; while busy the button becomes #stop (calls stop()) and #send is not rendered; a failure shows Mitra is busy. Please try again in a moment. (for a 429) or Mitra could not answer. Please try again. in #error, and the next successful send clears it. Use a <form> so Enter works too.
What Check tests
#sendis disabled while the input is empty or only spaces- A question is sent: it appears in
#messagesand the Stop button replaces Send - Stop keeps the partial answer and brings Send back
- A 429 shows the busy sentence in
#error(not JSON) - A server crash shows the generic sentence
- The next successful send clears the error and finishes with
ready
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.