How to properly handle route navigation for new chat?

[hoanginc144]

I'm trying to upgrade to V5 for my personal chat app and my implementation of navigation to a /chat/[id] route after first message submission on /chat just broke on V5

My current V4 approach:

...
if (isNewChat) {
router.push(`chat/${id}`)
}
handleSubmit(...)
...

With V5 I do the same:

...
if (isNewChat) {
router.push(`chat/${id}`)
}
sendMessage(...)
...

What happens in V5: The message gets submitted, but navigating to the new route resets the messages array and also the stream does not continue (so user just sees a blank screen without any messages).

Note that with V4 even when navigating to the new route the messages array do not get reset and the streaming starts normally. I'm perplexed as how to fix this as it looks like the state of messages is no longer persisted with route change in V5. The reason I don't want to use window.history.replaceState is because I want the user to be able to go back to /chat with the browser back button. Would really appreciate some guidance here, thank you!

[lgrammel]

Check out this example https://github.com/vercel/ai/tree/main/examples/next

[hoanginc144]

Thank you @lgrammel , I actually did try the solution in the link you paste before posting. It however presents new complexity as it refreshes the page after the streaming is completed. For long response, after the streaming is done the page refreshes thus the usual scroll to bottom will kick in regardless of where the user has previously scrolled to during streaming leading to an unpleasant experience.

That said, I'm looking to understand why the new useChat behaves quite different from the old one when it comes to this, if you could shed some light on this it'd be great as it'd help me understand the fundamentals better, thanks again for chiming in!

[iteratetograceness]

Hi @hoanginc144! Could you link/show me your v4 approach (or a minimal repro)? Invoking router.push before submission would actually be quite racy/unreliable.

Will dig into this further and share more fleshed out thoughts on your other concerns tomorrow!

[hoanginc144]

Sure thing, here's a mini repo to test it out. Hope to hear your thoughts on this, thanks a lot!

[jeremyphilemon]

@iteratetograceness

some thoughts on routing:

• on /chat, after submitting we immediately render the chat ID page component on the same route. so it's an immediate render
• use history.replace + router.push to change the URL immediately AND reflect the next.js router state
• to prevent things from remounting via navigating from /chat to /chat/:id, we make them ONE actual route and rewrite /chat to /chat/:id where ID is empty
  • this is critical so client side states (useState) won't be reset
  • alternatively, we can use global client state manager like Jotai/SWR instead of useState etc., to manage all states that's shared between these pages and won't be reset

[iteratetograceness]

@jeremyphilemon oh I like the single route approach! I also have a bit of a native alternative related to the global cache idea that I started exploring on a separate branch.

Let's discuss further irl tomorrow!

[iteratetograceness]

#7217

[haggen]

I'm having issues with this on version 5.0.52.

I pass a different chat identifier and a new messages array when I call useChat() but it still mangles previous route state with the new route state when I use client navigation, a.k.a. <Link /> component.