fix(ai-sdk/react): Fix subscribeToMessages callback dependency in useChat

[jeffcarbs]

Background

Follow-up to:

• fix(ai-sdk/react) Add options.id to subscribeToMessages callback dependency array #7387

That PR fixed stale subscriptions when the chat ID changes. However, it was incomplete since it only handled the case where the new ID was passed in the options. It's also possible for you to pass in a chat instance directly which could have a new ID.

Summary

Tweak the logic there to use the chatRef.current.id in the dependency array, so no matter how the ID changes we'll refresh the subscription callbacks.

Manual Verification

Didn't do manually testing since the unit tests for this specific case (plus the one I added) seemed sufficient.

Checklist

• Tests have been added / updated (for bug fixes / features)
• Documentation has been added / updated (for bug fixes / features)
• A patch changeset for relevant packages has been added (for bug fixes / features - run pnpm changeset in the project root)
• I have reviewed this pull request (self-review)

[jeffcarbs]

This test is largely copied from the test added in #7387:

ai/packages/react/src/use-chat.ui.test.tsx

Lines 2352 to 2415 in 68d8803

	it('should handle streaming correctly when id changes from undefined to defined', async () => {
	const controller = new TestResponseController();
	server.urls['/api/chat'].response = {
	type: 'controlled-stream',
	controller,
	};
	// First, change the ID from undefined to 'chat-123'
	await userEvent.click(screen.getByTestId('change-id'));
	// Then send a message
	await userEvent.click(screen.getByTestId('send-message'));
	await waitFor(() => {
	expect(screen.getByTestId('status')).toHaveTextContent('submitted');
	});
	controller.write(formatChunk({ type: 'text-start', id: '0' }));
	controller.write(
	formatChunk({ type: 'text-delta', id: '0', delta: 'Hello' }),
	);
	// Verify streaming is working - text should appear immediately
	await waitFor(() => {
	expect(
	JSON.parse(screen.getByTestId('messages').textContent ?? ''),
	).toContainEqual(
	expect.objectContaining({
	role: 'assistant',
	parts: expect.arrayContaining([
	expect.objectContaining({
	type: 'text',
	text: 'Hello',
	}),
	]),
	}),
	);
	});
	controller.write(formatChunk({ type: 'text-delta', id: '0', delta: ',' }));
	controller.write(
	formatChunk({ type: 'text-delta', id: '0', delta: ' world' }),
	);
	controller.write(formatChunk({ type: 'text-delta', id: '0', delta: '.' }));
	controller.write(formatChunk({ type: 'text-end', id: '0' }));
	controller.close();
	await waitFor(() => {
	expect(
	JSON.parse(screen.getByTestId('messages').textContent ?? ''),
	).toContainEqual(
	expect.objectContaining({
	role: 'assistant',
	parts: expect.arrayContaining([
	expect.objectContaining({
	type: 'text',
	text: 'Hello, world.',
	state: 'done',
	}),
	]),
	}),
	);
	});
	});

[lgrammel]

is this changing the id on the chat instance in the way you describe in the bug report? ie without your fix would this test fail?

[jeffcarbs]

Yes, you can see here it resets the chat instance to one with a new ID:

ai/packages/react/src/use-chat.ui.test.tsx

Lines 2252 to 2262 in fa8e472

	<button
	data-testid="do-change-chat"
	onClick={() => {
	setChat(
	new Chat({
	id: 'second-id',
	generateId: mockId(),
	}),
	);
	}}
	/>

The test fails before the change: