frontend: Claude-style AI chat (tool cards, reasoning, queue, suggestions)

Wire the existing ai-elements into the chat:
- collapsible tool-call cards (name, params, result, status) for native tool
  parts on the streamed path
- a reasoning block (shimmer while thinking, "Thought for Ns") when the model
  emits reasoning; backend forwards it via toUIMessageStream({ sendReasoning })
- a message queue: typing + Enter while the assistant is responding queues the
  message (shown above the input, removable) and auto-sends when it goes idle
- starter suggestion chips on the empty state, each tied to a tool

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
2026-06-14 20:06:57 +03:00
parent d096c4fe9d
commit 9086867782
4 changed files with 134 additions and 5 deletions
+3 -1
View File
@@ -143,7 +143,9 @@ chatRouter.post("/", async (req, res, next) => {
tools,
stopWhen: stepCountIs(6),
});
writer.merge(result.toUIMessageStream());
// Forward reasoning parts (when the model emits them) so the client
// can render a Claude-style thinking block.
writer.merge(result.toUIMessageStream({ sendReasoning: true }));
}
},
onError: (error) =>