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: #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!

[JensDallmann]

Hello,
I stumbled upon the same issue:
When I use the same api and id for two useChat-hooks in different components, the input state is not shared between those two useChat usages.

Any news?

Thank you and best regards

[lovetingyuan]

/**
 * An unique identifier for the chat. If not provided, a random one will be
 * generated. When provided, the `useChat` hook with the same `id` will
 * have shared states across components.
 */
id?: string;

id not work as described.
Please fix this, it is important for performance.

[pksorensen]

Can confirm still an issue on 4.2. Got it wokring passing initialMessages nad api and id props

[felipebayres]

Hello,
I stumbled upon the same issue:
When I use the same api and id for two useChat-hooks in different components, the input state is not shared between those two useChat usages.

I'm also having the same problem.