How can i get isLoading / isStreaming when using ai/rsc generative UI?

[vucinatim]

I want to show a loading indicator inside the "Submit" button and also disable it while the response is being streamed back.

With the useChat hook you can easily get the current isLoading state while the model is streaming a response.
But how should we do this with ai/rsc generative ui? Using aiState and uiState for this seems impossible.. And the only place where isLoading can be determined (due to the "done" prop) is in text and function callback / generator. But there is no way to send that information back to the client where the chat messages are sent.

"use client";

import { useUIState, useActions } from "ai/rsc";
import type { AI } from "./action";
import ChatInput from "@/components/chat-input";

export default function Page() {
  const [inputValue, setInputValue] = useState("");
  const [messages, setMessages] = useUIState<typeof AI>();
  const { submitUserMessage } = useActions<typeof AI>();

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    // Add user message to UI state
    setMessages((currentMessages) => [
      ...currentMessages,
      {
        id: Date.now(),
        display: <div>{inputValue}</div>,
        isLoading: true,
      },
    ]);

    // Submit and get response message
    const responseMessage = await submitUserMessage(inputValue);
    setMessages((currentMessages) => [...currentMessages, responseMessage]);

    setInputValue("");
  };

  return (
    <div className="relative flex flex-col bg-gray-100 h-[100dvh] w-[100dvw]">
      <div className="overflow-y-scroll grow px-6 flex flex-col gap-y-6">
        {
          // View messages in UI state
          messages.map((message) => (
            <div className="bg-white text-black" key={message.id}>
              {message.display}
            </div>
          ))
        }
      </div>

      <ChatInput
        isLoading={isLoading} // Where can i get this information?
        input={inputValue}
        handleSubmit={handleSubmit}
        handleInputChange={(event) => {
          setInputValue(event.target.value);
        }}
      />
    </div>
  );
}

[vucinatim]

I found out the answer by myself but with some hardship since there are no official examples of this.

You need to use StreamableValue

// action.tsx
const progressState = createStreamableValue({
  isStreaming: true,
});

...

//Somewhere in the callbacks:
progressState.done({ isStreaming: false });

...

return { id: Date.now(), display: ui, progressState: progressState.value };

// page.tsx
const [data, error, pending] = useStreamableValue(
  messages[messages.length - 1]?.progressState
);

//...

<ChatInput
  multiModal
  isLoading={data?.isStreaming || false} // How can we get this?
  input={inputValue}
  handleSubmit={handleSubmit}
  handleInputChange={(event) => {
    setInputValue(event.target.value);
  }}
/>;

[fjun99]

nice implementation.

[psai-terwin]

anyway to get abort / stop functionality with this?

[zaluty]

hate to say it but the vercel Ai sdk needs a lot of improvements