Using the same id with useChat is not hooking into the existing session

[Godrules500]

Description

It could be that I am misunderstanding the documentation, but

in Component 1 I have const {messages} = useChat({id:'myChatId', initialMessages}) and in component 2 (a child component in this case) I have: const {messages} = useChat({id:'myChatId'}) messages however is empty and I cannot actually hook into the existing chat session or its data.

Am I misunderstanding this and could I get some guidance please. If I don't have to pass in handleInputChange, input, setInput, messages, setMessages, etc everywhere I want to use it, I'd prefer to do that.

Code example

No response

Additional context

No response

[Godrules500]

If I call

useEffect(() => { if (initialMessages) { setMessages(initialMessages) } }, [initialMessages, setMessages])

it works. But apparently setting initialMessages didn't allow it to connect from other components.

[lgrammel]

With the current useChat implementation, you'd need to pass the initialMessages to both places and init with: const {messages} = useChat({id:'myChatId', initialMessages})

[ingara]

We also bumped into issues with sharing a chat between components and ended up writing a companion package for solving our use case: https://www.npmjs.com/package/@soolv/ai-chat-provider. See also: https://github.com/vercel/ai/discussions/3339

[matthiasbayer]

With the current useChat implementation, you'd need to pass the initialMessages to both places and init with: const {messages} = useChat({id:'myChatId', initialMessages})

I also stumbled on that unexpected behavior today. This might need some clarification in the docs.

[hgrias]

I am running into this issue when trying to set and receive input state via setInput and input returns on useChat. Parent and child components are both using useChat hook with same id and api parameters, but state is not synced between them.

[Godrules500]

I am running into this issue when trying to set and receive input state via setInput and input returns on useChat. Parent and child components are both using useChat hook with same id and api parameters, but state is not synced between them.

One thing I had to do, at least for set messages, was a kind of fake await.

setMessages(myAwesomeNewMessages)
await sleep(0)

export const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))

not sure if that will help at all!

[hgrias]

@Godrules500 Unfortunately, that did not work, but appreciate the reply!

[hgrias]

With the current useChat implementation, you'd need to pass the initialMessages to both places and init with: const {messages} = useChat({id:'myChatId', initialMessages})

I am trying to do this with input and initialInput, however, still not working. @lgrammel any insight would be appreciated!