use multiple useChat methods stop function not work

[silverWolf818]

I use multiple useChat with same id in multiple react component , like:

input.tsx

const { input, handleInputChange, handleSubmit, stop } = useChat({
    id
  })

loading.tsx

const { isLoading, stop } = useChat({ id })

trigger in loading component stop not work, just work in input component

[sunls2]

The same thing happened to me

[bricestacey]

I don't have the same use-case so not sure its relevant, but it feels eerily similar. I am using nextjs with a single useChat hook on different pages. I use a custom id per page and I am transitioning from A->B->A. When I return to A the streaming keeps going where it left off, but the stop function doesn't work.

[bricestacey]

Looking at the code -- it appears the useChat hook creates a new AbortController for each request. It's not keyed off the chat's id. I think this would produce the same outcome for multiple useChat hooks but also navigating from A->B->A. It might be though that the AbortController isn't memoized so it's lost when re-rendered... I'm not really sure.

[martinjo]

I think I have this problem as well. I start and stop the chat stream from different places in my UI and it seems very inconsistent. Now I keep a reference to the stop function from wherever I started the current chat stream, but it feels very fidgety.

[haryasa]

I also have a similar use case. Should we also cache the abort controller (e.g. using SWR) like the other states? I think it is a bit unintuitive if stop isn't shared across useChat calls while the other states do.