While using LangChain Stream, not able to determine when Stream is completed

[waseemhnyc]

Hey everyone. I am attempting to use this template and replace the direct OpenAI calls with LangChain.

I updated the code in /app/api/chat/route.ts. I used the LangChain example here as a reference: https://github.com/vercel-labs/ai/tree/main/examples/next-langchain

Notice in the screenshot below that once the stream has completed, the button stop generating is still showing. The reason why its showing is cause: isLoading in chat-panel.tsx is still set to true.

Trying to understand why is it that with the OpenAI example isLoading is flipped to false after streaming is complete. I tried to analyze the API call with OpenAI /app/api/chat/route.ts to see if its responding with something to notify that streaming is over but dont see anything there. I see that the stop generating button is calling the stop method from useChat:

{isLoading ? (
        <Button
          variant="outline"
          onClick={() => stop()}
          className="bg-background"
        >
          <IconStop className="mr-2" />
          Stop generating
        </Button>
      ) : (

import { useChat, type Message } from 'ai/react'
  const { messages, append, reload, stop, isLoading, input, setInput } =
    useChat({
      initialMessages,
      id,
      body: {
        id,
        previewToken
      }
    })

I think I am on the right track but wonder if there is something missing in the docs about this or if anyone has an example that would be helpful in understanding this.

[aranlucas]

It's a problem with SDK at the moment https://github.com/vercel-labs/ai/issues/205

The handlers that are being returned don't necessarily call writer.close()

[waseemhnyc]

Ahhh @aranlucas. It was helpful to go through https://github.com/vercel-labs/ai/issues/205 to get better context. Thanks!

[Seokhyeon315]

@waseemhnyc I have exactly same issue. Have you fixed this?

[waseemhnyc]

Hey @Seokhyeon315. @aranlucas goes through a potential solution here. I also looked at their example resume-chat to see it implemented. Hope it helps!

[leerob]

^ Looks like there was a resolution 😄