When to reach for Think, how to show the model's progress, and the decisions it leaves to you.
When to use
Think shows a model's reasoning in a block the reader can fold away. Use it for the text a reasoning model writes before its answer, so the reader can check how it got there without wading through it every time.
Put it above the answer, inside the same reply, so the reasoning reads as part of that message.
Show it while the model is still thinking, with loading, so the reader sees that work is happening before the first word of the answer.
Use something else when
The model runs separate steps, like searching, reading and calling tools, each with its own status. That is ThoughtChain.
You want to show what the answer was drawn from. That is Sources.
The folded text is ordinary content, like an FAQ answer or a settings group. That is Collapse.
Title, loading and blink
The header is the part every reader sees, so it carries the state.
Change the title when the model finishes, from “Thinking” to something with a result in it, like “Thought for 4 seconds”.
Turn loading and blink off when it is done. Neither turns itself off, so a block left with them on keeps spinning and shimmering after the answer is complete.
blink draws the title in a lighter color while it shimmers. Use it only while the model is working, and keep that title short.
Keep the default icon unless your product already has a mark for reasoning. Use the same icon in every reply.
Folding
The block starts unfolded, which is right while the reasoning streams in. Once the answer arrives, the reasoning mostly gets in the way.
To fold it when the answer starts, control it with expanded and onExpand. Set your state to false at that point, and update it in onExpand, or clicking the header stops working.
Older replies in a long conversation can start folded with defaultExpanded set to false.
Folded reasoning leaves the page. With the default destroyOnHidden, a folded block renders no content, so find-in-page and a screen reader do not reach it, and anything inside loses its state.
The reasoning text
The reasoning is set in the description color, lighter than the answer, with a line down its side. Keep it that way, so it never reads as the answer itself.
Models often write their reasoning in Markdown. Render it the same way you render the answer, or the reader sees raw asterisks.
Long reasoning makes the reply tall. Cap the height of the content part with classNames and let it scroll, rather than pushing the answer off screen.
Restyling it
Use the semantic keys: root, status for the header and content for the reasoning. A part with a key keeps its name across versions, and a part reached by class name may not.