Issues with chat list updating and multiple chat creation

[eyenalxai]

Newly initiated chats do not appear in the chats list until the page is refreshed, but you can still create the new chat.

A second new chat can't be created without a page refresh following the creation of the first one.

video.mp4

[eyenalxai]

I believe the issue of not being able to initiate new empty chats could potentially be resolved by executing

router.replace(`/chat/${id}`)

in the onSubmit function of the PromptForm. Would that be a good solution?

upd: neither push nor replace were a good solution, but promising maybe? 🥲

[eyenalxai]

onSubmit={async value => {
  await append({
    id,
    content: value,
    role: 'user'
  })
  if (pathname !== `/chat/${id}`) {
    await router.push(`/chat/${id}`)
    await router.refresh()
  }
}}

This works but it is too hacky I guess :(

[DanielhCarranza]

How did you get that pathname? Can you show the full file you made the changes? I'm facing the same issue. Also, if you could make a pull request it would be awesome.

[eyenalxai]

How did you get that pathname? Can you show the full file you made the changes?

I get pathname here:
https://github.com/eyenalxai/omuwabuzi/blob/bd7ce3e3daf944cc110e0f6fc95ab7a4b0a8afce/components/chat-panel.tsx#L36

And use it there:
https://github.com/eyenalxai/omuwabuzi/blob/bd7ce3e3daf944cc110e0f6fc95ab7a4b0a8afce/components/chat-panel.tsx#L73

Also, if you could make a pull request it would be awesome.

I don't think that solution is good enough because it leads to resetting the scroll position and other inconveniences.

[EduardoFazolo]

Newly initiated chats do not appear in the chats list until the page is refreshed, but you can still create the new chat.

A second new chat can't be created without a page refresh following the creation of the first one.

video.mp4

I took a look at this issue and compared the current behavior to how chatgpt implements the same flow that you showed in the video and came up with a simple solution that feels intuitive, non hacky and looks more like the way chatgpt does it:

• When we click on new chat, set the href to a new /chat/id which currently only redirects to /. This allows the creation of a new chat with a new id.
• And then reload the chat history to show the previous chat, if there was one
• Actually, an even easier solution is to copy what was done when a chat is deleted, by replacing the Link with a button:

<button
  onClick={() => {
    router.refresh()
    router.push('/')
  }}
...

• This still doesn't fix the issue of the current chat not being added to the history

I'll try to open a PR on this issue today.

[eyenalxai]

Newly initiated chats do not appear in the chats list until the page is refreshed, but you can still create the new chat.
A second new chat can't be created without a page refresh following the creation of the first one.
video.mp4

I took a look at this issue and compared the current behavior to how chatgpt implements the same flow that you showed in the video and came up with a simple solution that feels intuitive, non hacky and looks more like the way chatgpt does it:

• When we click on new chat, set the href to a new /chat/id which currently only redirects to /. This allows the creation of a new chat with a new id.
• And then reload the chat history to show the previous chat, if there was one
• Actually, an even easier solution is to copy what was done when a chat is deleted, by replacing the Link with a button:

<button
  onClick={() => {
    router.refresh()
    router.push('/')
  }}
...

• This still doesn't fix the issue of the current chat not being added to the history

I'll try to open a PR on this issue today.

Seems just as hacky as my "solution" 🥲

[EduardoFazolo]

Seems just as hacky as my "solution" 🥲

Imo, I thought your solution was only "hacky" because it solves the problem by redirecting to the current chat's id, which is an actual good solution, but this solution doesn't allow the user to F5 to create a new chat, like chatgpt.

If you mean it's hacky because it refreshes and redirects, then that's because we're trying to solve a mutation problem using RSC. I don't think there's a great or "non hacky" solution in that case.
The only thing I can think of is by remaking the Sidebar component as non RSC and have it inside the same Context as the chat.

If anyone else has a better solution that wouldn't require this boring refactor, I'd really love to see and learn.