diff --git a/frontend/src/components/features/controls/agent-status-bar.tsx b/frontend/src/components/features/controls/agent-status-bar.tsx index 400c12d023..7fc7f3a2a2 100644 --- a/frontend/src/components/features/controls/agent-status-bar.tsx +++ b/frontend/src/components/features/controls/agent-status-bar.tsx @@ -5,11 +5,16 @@ import toast from "react-hot-toast"; import { RootState } from "#/store"; import { AgentState } from "#/types/agent-state"; import { AGENT_STATUS_MAP } from "../../agent-status-map.constant"; +import { + useWsClient, + WsClientProviderStatus, +} from "#/context/ws-client-provider"; export function AgentStatusBar() { const { t, i18n } = useTranslation(); const { curAgentState } = useSelector((state: RootState) => state.agent); const { curStatusMessage } = useSelector((state: RootState) => state.status); + const { status } = useWsClient(); const [statusMessage, setStatusMessage] = React.useState(""); @@ -37,7 +42,11 @@ export function AgentStatusBar() { }, [curStatusMessage.id]); React.useEffect(() => { - setStatusMessage(AGENT_STATUS_MAP[curAgentState].message); + if (status === WsClientProviderStatus.DISCONNECTED) { + setStatusMessage("Trying to reconnect..."); + } else { + setStatusMessage(AGENT_STATUS_MAP[curAgentState].message); + } }, [curAgentState]); return ( diff --git a/frontend/src/context/ws-client-provider.tsx b/frontend/src/context/ws-client-provider.tsx index 11b5ca95b3..bdfa8b8b0b 100644 --- a/frontend/src/context/ws-client-provider.tsx +++ b/frontend/src/context/ws-client-provider.tsx @@ -81,6 +81,9 @@ export function updateStatusWhenErrorMessagePresent(data: ErrorArg | unknown) { !!val && typeof val === "object"; const isString = (val: unknown): val is string => typeof val === "string"; if (isObject(data) && "message" in data && isString(data.message)) { + if (data.message === "websocket error") { + return; + } let msgId: string | undefined; if ( "data" in data &&