Chat messages disappearing when clicked on New Chat button and coming back to last chat, chats showing after page refresh

[pravinjakfs]

I have attached a video of the issue here:

https://github.com/vercel/ai-chatbot/assets/67234192/2a7023a5-e34f-435f-bcb8-00dd2cc30cbf

[Godrules500]

Having the same issue. Any luck resolving this?

[Godrules500]

@pravinjakfs

I was able to put this at the top of chat.tsx.

  // This is used to fix Vercel ai/rsc bug where the state is not correctly maintained/updated
  //    causing the aiState to get out of sync.
  // It shows up when you navigate away from the current route and then then back to the same route quickly.
  // This invalidates the cache and refreshes the AI states
  useEffect(() => {
    router.refresh()
  }, [router])

  useEffect(() => {
    // Do not update the aiState and local key chat Id if its the same. If this is removed, it was creating several new chatIds, getting out of sync when saving.
    if (aiState.chat.chatId === chatId) return
    // Update the aiState chatId when going to a new chat. If not, it will save with the wrong chatId.
    aiState.chat.chatId = chatId!
    setAIState(aiState)

    // Update the local storage chat Id.
    setNewChatId(chatId)
  }, [aiState, chatId, setAIState, setNewChatId])

It seems to be functioning much more consistently and causing the aiState to be in sync. Essentially I am trying to revalidate the cache (someone please inform my noob ways if there is a better way!) because the aiState was getting out of sync.