#Agent Loading State

1 messages · Page 1 of 1 (latest)

copper moss
#

Hi I am trying to find a way to display a loading spinner when the agent state is being reloaded from an existing thread id. Using LangGraph on the back end, and there is a weird delay to the user as the state is being loaded. I’ve looked high and low for a way to do this?

ocean pantherBOT
#

Hey @copper moss, You could try this approach: To display a loading spinner while the agent state is being reloaded from a thread ID, you could use the isLoading property from useCopilotContext() in CopilotKit. This property should reflect the loading state during thread rehydration. Here's one way you could implement a loading indicator:

import { useCopilotContext } from "@copilotkit/react-core";
import { LoadingSpinnerIcon } from "@copilotkit/react-ui";
<!-- empty-paragraph -->
function LoadingIndicator() {
  const { isLoading } = useCopilotContext();
  return (
    isLoading ? (
      <div className="flex items-center gap-2">
        <LoadingSpinnerIcon />
        <span>Loading agent state...</span>
      </div>
    ) : null
  );
}
<!-- empty-paragraph -->
```You could try wrapping your chat or agent UI with this indicator. The `isLoading` state should become `true` while the agent is rehydrating from the thread ID, and you can customize the spinner or message however you'd like during this time.
Let me know if this approach works for your use case!
copper moss
#

Hi yes I though that would work but the state of that hook doesn’t seem to change

#

The value of it seems to match the working eg when the agent is running

#

So the screen flashes when the ask/thinking button would switch

ocean pantherBOT
#

I'll check with the team about the hook state not changing properly and the flashing issue you're experiencing, then get back to you.

wicked cipher
#

Hey @copper moss, have you tried using the useCoAgent hook to check the state of your agent?

https://docs.copilotkit.ai/reference/hooks/useCoAgent

Give this a try-

  1. Use the useCoAgent hook to access your agent's state and node name. These allow you to determine if the agent is still loading or processing.
  2. Implement custom loading logic by checking for specific properties in your agent's state (e.g., a missing property, an isProcessing flag, or a particular nodeName).
  3. Display a loading spinner in your UI based on this logic.
import { useCoAgent } from "@copilotkit/react-core";

const { state: agentState, nodeName } = useCoAgent({
  name: "your_agent_name",
  initialState: { /* your initial state */ },
});

const isLoading = !agentState?.specificProperty || agentState?.isProcessing;

return (
  isLoading ? (
    <div className="flex items-center space-x-2">
      <LoaderCircleIcon className="animate-spin" />
      <span>Reloading agent state...</span>
    </div>
  ) : (
    // Your agent content here
  )
);

It would also be possible to combine this with the chat loading state from useCopilotChatHeadless_c if needed.

useCoAgent

The useCoAgent hook allows you to share state bidirectionally between your application and the agent.

copper moss
#

I did try something along those lines the issue is that the messages state is empty and that for some use cases is the only state

#

I will look into it again today

#

The issue isn’t when the when the agent is running or not it’s specific to the rehydration that happens before it’s ready

#

Ok so headless lets me access the messages once loaded for an existing chat but the issue then is the same for new chats? Unfortunately the issue loading also does not trigger

#

I think some works needs to be done on loading vs running naming conventions

#

In the network trace you can see a is new thread flag

#

That could be useful if there is a way to get to that via the ui

#

That is in the load agent state response

copper moss
#

I don’t think it’s doable without a few more hooks into the graph calls

ocean pantherBOT
#

You're right about the loading state limitations for thread rehydration. Here's another approach you could try:

import { useCopilotChatHeadless_c } from "@copilotkit/react-core";
import { useEffect, useState } from "react";

const { messages } = useCopilotChatHeadless_c();
const [isRehydrating, setIsRehydrating] = useState(true);

useEffect(() => {
  if (messages?.length > 0) setIsRehydrating(false);
}, [messages]);

return isRehydrating ? <LoadingSpinner /> : <ChatUI />;

If this approach doesn't solve your specific rehydration scenario, would you be interested in submitting a feature request or potentially contributing a PR?

copper moss
#

I did attempt that approach but it works only when you know it’s a reload, vs a new unused thread id. , ideally exposing a few flags would help it events along the way. I’ll put an issue up on GitHub and poke around the code to see where to wire it in