useObject hook's isLoading remains true after stopping the stream

[coji]

Description

After the recent fix to the useObject hook in the Vercel AI SDK, the isLoading and stop functionality now work as expected during the streaming process. However, a new issue has been identified: when the stop function is called, the isLoading state remains true instead of switching to false.

To reproduce this issue:

1. Use the next-openai example from the Vercel AI SDK repository.
2. Run the application and click the "Generate notifications" button.
3. While notifications are being generated, click the "STOP" button.
4. Observe that the stream stops (which is correct), but the loading indicator remains visible, and the "Generate notifications" button remains disabled.

Expected behavior:

• When the stop function is called, the isLoading state should immediately become false, hiding the loading indicator and re-enabling the "Generate notifications" button.

Actual behavior:

• When the stop function is called, the stream stops, but the isLoading state remains true, leaving the UI in a loading state.

Code example

"use client";

import { experimental_useObject as useObject } from "ai/react";
import { notificationSchema } from "../api/use-object/schema";

export default function Page() {
  const { submit, isLoading, object, stop } = useObject({
    api: "/api/use-object",
    schema: notificationSchema,
  });

  return (
    <div className="flex flex-col items-center min-h-screen p-4 m-4">
      <button
        className="px-4 py-2 mt-4 text-white bg-blue-500 rounded-md disabled:bg-blue-200"
        onClick={async () => {
          submit("Messages during finals week.");
        }}
        disabled={isLoading}
      >
        Generate notifications
      </button>

      {isLoading && (
        <div className="mt-4 text-gray-500">
          <div>Loading...</div>
          <button
            type="button"
            className="px-4 py-2 border-blue-500 border rounded-md text-blue-500  mt-4"
            onClick={() => stop()}
          >
            STOP
          </button>
        </div>
      )}

      <div className="flex flex-col gap-4 mt-4">
        {object?.notifications?.map((notification, index) => (
          <div
            className="flex items-start gap-4 p-4 bg-gray-100 rounded-md dark:bg-gray-800"
            key={index}
          >
            <div className="flex-1 space-y-1">
              <div className="flex items-center justify-between">
                <p className="font-medium dark:text-white">
                  {notification?.name}
                </p>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {notification?.minutesAgo}
                  {notification?.minutesAgo != null ? " minutes ago" : ""}
                </p>
              </div>
              <p className="text-gray-700 dark:text-gray-300">
                {notification?.message}
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Additional context

I have recorded a video demonstrating this behavior:

CleanShot.2024-06-28.at.08.42.17.mp4

This issue was identified after the fix for the previous useObject hook issues was implemented. While the stop functionality now correctly interrupts the stream, the UI does not update to reflect that the loading process has ended.

Environment:

• Node.js: v20.13.0
• Vercel AI SDK versions:
  • @ai-sdk/openai: 0.0.34
  • @ai-sdk/react: 0.0.14
  • ai: 3.2.14
• React version: 18.3.1
• Next.js version: 14.2.4
• AI Provider: OpenAI

This issue impacts the user experience as it leaves the UI in an inconsistent state after stopping the stream. Users may be confused about whether the process has actually stopped and whether they can start a new generation.

This is a follow-up to the previous issue #2122 , which was resolved but led to the discovery of this new problem.

[dearfrankg]

I get this error:

Unhandled Runtime Error
AbortError: BodyStreamBuffer was aborted

> 30 |             onClick={() => stop()}
     |                            ^

Environment:

Node.js: v20.13.0
npm: 10.8.0
Vercel AI SDK versions:
@ai-sdk/openai: 0.0.34
@ai-sdk/react: 0.0.14
ai: 3.2.14
React version: 18.3.1
Next.js version: 14.2.4
AI Provider: OpenAI

[lgrammel]

#2132