Intermediate
Render the Parts
This route answers with some reasoning first and then the answer. Right now the page prints parts[0].text, which is empty for the assistant.
Render each message by looping over its parts: a text part becomes a <p class="text">, a reasoning part becomes a closed <details id="thinking"> with a <summary>Thinking</summary>, and any other part type renders nothing. Put the output in #messages.
What Check tests
- After the answer, the assistant's reply is in a
.textparagraph - The reasoning is in a closed
<details id="thinking">and is not mixed into the answer - The user's question is shown as text too
- Nothing else is rendered for the assistant (step markers show nothing)
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.