@openhands/agent-canvas 1.0.0-alpha.8 → 1.0.0-beta.1

package/dist/contexts/conversation-websocket-context.js

@@ -3,37 +3,37 @@ import { useCommandStore as t } from "../stores/command-store.js";
 import { setConversationState as n } from "../utils/conversation-local-storage.js";
 import { useConversationStore as r } from "../stores/conversation-store.js";
 import { useConversationStateStore as ee } from "../stores/conversation-state-store.js";
-import { isActionEvent as te, isAgentErrorEvent as ne, isAgentServerEvent as re, isAgentStatusConversationStateUpdateEvent as ie, isBrowserNavigateActionEvent as ae, isBrowserObservationEvent as oe, isCanvasUIActionEvent as se, isConversationStateUpdateEvent as i, isDisplayableErrorEvent as a, isExecuteBashActionEvent as o, isExecuteBashObservationEvent as s, isFullStateConversationStateUpdateEvent as ce, isPlanningFileEditorObservationEvent as le, isStatsConversationStateUpdateEvent as ue, isSwitchLLMObservationEvent as de, isUserMessageEvent as fe } from "../types/agent-server/type-guards.js";
-import { useEventStore as c } from "../stores/use-event-store.js";
-import { ConversationClient as pe } from "../node_modules/@openhands/typescript-client/dist/client/conversation-client.js";
-import { useQueryClient as me } from "../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js";
-import { usePostHog as he } from "../node_modules/posthog-js/react/dist/esm/index.js";
-import { useWebSocket as ge } from "../hooks/use-websocket.js";
-import { SERVER_CONNECTION_ERROR_MESSAGE as _e } from "../constants/server-connection-error.js";
-import { useErrorMessageStore as ve } from "../stores/error-message-store.js";
-import { useOptimisticUserMessageStore as ye } from "../stores/optimistic-user-message-store.js";
-import { handleCanvasUIAction as be } from "../services/canvas-ui.js";
-import { handleActionEventCacheInvalidation as xe } from "../utils/cache-utils.js";
-import { buildWebSocketUrl as Se } from "../utils/websocket-url.js";
-import { getAgentServerClientOptions as Ce } from "../api/agent-server-client-options.js";
-import we from "../api/event-service/event-service.api.js";
-import { trackError as l } from "../utils/error-handler.js";
-import { useReadConversationFile as Te } from "../hooks/mutation/use-read-conversation-file.js";
-import Ee from "../stores/metrics-store.js";
-import { useConversationHistory as De } from "../hooks/query/use-conversation-history.js";
-import { recordModelSwitchMessage as Oe } from "../hooks/chat/record-model-switch-message.js";
-import { invalidateConversationQueries as ke, updateConversationLlmModelInCache as Ae } from "../hooks/mutation/conversation-mutation-utils.js";
-import je, { createContext as Me, useCallback as u, useContext as d, useEffect as f, useLayoutEffect as Ne, useMemo as p, useRef as m, useState as h } from "react";
+import { isActionEvent as te, isAgentErrorEvent as ne, isAgentServerEvent as re, isAgentStatusConversationStateUpdateEvent as ie, isBrowserNavigateActionEvent as ae, isBrowserObservationEvent as oe, isCanvasUIActionEvent as se, isConversationStateUpdateEvent as i, isDisplayableErrorEvent as a, isExecuteBashActionEvent as o, isExecuteBashObservationEvent as s, isFullStateConversationStateUpdateEvent as ce, isPlanningFileEditorObservationEvent as le, isStatsConversationStateUpdateEvent as ue, isSwitchLLMObservationEvent as de, isUserMessageEvent as c } from "../types/agent-server/type-guards.js";
+import { useEventStore as l } from "../stores/use-event-store.js";
+import { ConversationClient as fe } from "../node_modules/@openhands/typescript-client/dist/client/conversation-client.js";
+import { useQueryClient as pe } from "../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js";
+import { usePostHog as me } from "../node_modules/posthog-js/react/dist/esm/index.js";
+import { useWebSocket as he } from "../hooks/use-websocket.js";
+import { SERVER_CONNECTION_ERROR_MESSAGE as ge } from "../constants/server-connection-error.js";
+import { useErrorMessageStore as _e } from "../stores/error-message-store.js";
+import { useOptimisticUserMessageStore as ve } from "../stores/optimistic-user-message-store.js";
+import { handleCanvasUIAction as ye } from "../services/canvas-ui.js";
+import { handleActionEventCacheInvalidation as be } from "../utils/cache-utils.js";
+import { buildWebSocketUrl as xe } from "../utils/websocket-url.js";
+import { getAgentServerClientOptions as Se } from "../api/agent-server-client-options.js";
+import Ce from "../api/event-service/event-service.api.js";
+import { trackError as u } from "../utils/error-handler.js";
+import { useReadConversationFile as we } from "../hooks/mutation/use-read-conversation-file.js";
+import Te from "../stores/metrics-store.js";
+import { useConversationHistory as Ee } from "../hooks/query/use-conversation-history.js";
+import { recordModelSwitchMessage as De } from "../hooks/chat/record-model-switch-message.js";
+import { invalidateConversationQueries as Oe, updateConversationLlmModelInCache as ke } from "../hooks/mutation/conversation-mutation-utils.js";
+import Ae, { createContext as je, useCallback as d, useContext as f, useEffect as p, useLayoutEffect as Me, useMemo as m, useRef as Ne, useState as h } from "react";
 import { jsx as Pe } from "react/jsx-runtime";
 //#region src/contexts/conversation-websocket-context.tsx
-var g = Me(void 0);
+var g = je(void 0);
 function _(e) {
 	return e.llm_message.content.filter((e) => e.type === "text").map((e) => e.text).join("");
 }
-function v({ children: Me, conversationId: d, conversationUrl: v, sessionApiKey: y, subConversations: b, subConversationIds: x }) {
-	let [S, C] = h("CONNECTING"), [w, T] = h("CONNECTING"), E = je.useRef(!1), D = je.useRef(!1), O = he(), k = me(), A = c((e) => e.addEvent), Fe = c((e) => e.addEvents), { setErrorMessage: j, removeErrorMessage: Ie, clearConnectionError: M } = ve(), N = ye((e) => e.consumeMatchingPendingMessage), { setExecutionStatus: P } = ee(), { appendInput: F, appendOutput: I } = t(), [L, R] = h(!0), [z, Le] = h(null), { setPlanContent: B } = r(), { mutate: V } = Te(), H = m(0), U = m(null), Re = (e) => e?.toUpperCase().endsWith("PLAN.MD") ?? !1, W = u(() => {
-		M();
-	}, [M]), G = u((e) => {
+function v({ children: je, conversationId: f, conversationUrl: v, sessionApiKey: y, subConversations: b, subConversationIds: Fe }) {
+	let [x, S] = h("CONNECTING"), [C, w] = h("CONNECTING"), T = Ae.useRef(!1), E = Ae.useRef(!1), D = me(), O = pe(), k = l((e) => e.addEvent), Ie = l((e) => e.addEvents), Le = l((e) => e.clearEventsForConversation), { setErrorMessage: A, removeErrorMessage: Re, clearConnectionError: j } = _e(), M = ve((e) => e.consumeMatchingPendingMessage), { setExecutionStatus: N } = ee(), { appendInput: P, appendOutput: F } = t(), ze = e((e) => e.reset), [I, L] = h(!0), [R, Be] = h(null), { setPlanContent: z } = r(), { mutate: B } = we(), V = Ne(0), H = Ne(null), Ve = (e) => e?.toUpperCase().endsWith("PLAN.MD") ?? !1, U = d(() => {
+		j();
+	}, [j]), W = d((e) => {
 		if (e.value.usage_to_metrics?.agent) {
 			let t = e.value.usage_to_metrics.agent, n = {
 				cost: t.accumulated_cost,
@@ -47,78 +47,90 @@ function v({ children: Me, conversationId: d, conversationUrl: v, sessionApiKey:
 					per_turn_token: t.accumulated_token_usage.per_turn_token
 				} : null
 			};
-			Ee.getState().setMetrics(n);
+			Te.getState().setMetrics(n);
 		}
-	}, []), { data: K, isPending: q, isError: ze } = De(d), Be = !!d && q;
-	Ne(() => {
-		!K || K.events.length === 0 || Fe(K.events);
-	}, [K, Fe]);
-	let J = p(() => {
-		if (q) return null;
-		let e = K?.events ?? [], t = e[e.length - 1];
+	}, []), { data: G, isPending: K, isError: He } = Ee(f), Ue = !!f && K;
+	Me(() => {
+		let e = f ?? null;
+		l.getState().loadedConversationId !== e && (Le(e), ze());
+	}, [
+		f,
+		Le,
+		ze
+	]), Me(() => {
+		if (!(!G || G.events.length === 0) && (Ie(G.events), f)) for (let e of G.events) c(e) && M(f, _(e));
+	}, [
+		G,
+		Ie,
+		f,
+		M
+	]);
+	let q = m(() => {
+		if (K) return null;
+		let e = G?.events ?? [], t = e[e.length - 1];
 		return !t || !("timestamp" in t) || !t.timestamp ? null : t.timestamp;
-	}, [K, q]), Y = p(() => !d || !v || q && !ze ? null : Se(d, v), [
-		d,
+	}, [G, K]), J = m(() => !f || !v || K && !He ? null : xe(f, v), [
+		f,
 		v,
-		q,
-		ze
-	]), X = p(() => {
+		K,
+		He
+	]), Y = m(() => {
 		if (!b?.length) return null;
 		let e = b[0];
-		return !e?.id || !e.conversation_url ? null : Se(e.id, e.conversation_url);
-	}, [b]), Ve = p(() => X ? S === "CONNECTING" || w === "CONNECTING" ? "CONNECTING" : S === "OPEN" && w === "OPEN" ? "OPEN" : S === "CLOSED" && w === "CLOSED" ? "CLOSED" : S === "CLOSING" || w === "CLOSING" ? "CLOSING" : "CLOSED" : S, [
-		S,
-		w,
-		X
+		return !e?.id || !e.conversation_url ? null : xe(e.id, e.conversation_url);
+	}, [b]), We = m(() => Y ? x === "CONNECTING" || C === "CONNECTING" ? "CONNECTING" : x === "OPEN" && C === "OPEN" ? "OPEN" : x === "CLOSED" && C === "CLOSED" ? "CLOSED" : x === "CLOSING" || C === "CLOSING" ? "CLOSING" : "CLOSED" : x, [
+		x,
+		C,
+		Y
 	]);
-	f(() => {
-		z !== null && H.current >= z && L && R(!1);
+	p(() => {
+		R !== null && V.current >= R && I && L(!1);
 	}, [
-		z,
-		L,
-		H
-	]), f(() => {
-		if (!L && U.current) {
-			let { path: e, conversationId: t } = U.current;
-			V({
+		R,
+		I,
+		V
+	]), p(() => {
+		if (!I && H.current) {
+			let { path: e, conversationId: t } = H.current;
+			B({
 				conversationId: t,
 				filePath: e
 			}, {
 				onSuccess: (e) => {
-					B(e);
+					z(e);
 				},
 				onError: (e) => {
 					console.warn("Failed to read conversation file:", e);
 				}
-			}), U.current = null;
+			}), H.current = null;
 		}
 	}, [
-		L,
-		V,
-		B
-	]), f(() => {
-		E.current = !1, R(!!x?.length), Le(null), H.current = 0, U.current = null;
-	}, [x]), f(() => {
-		E.current = !1, D.current = !1, U.current = null;
-	}, [d]);
-	let He = p(() => Be || L, [Be, L]), Ue = u((t) => {
+		I,
+		B,
+		z
+	]), p(() => {
+		T.current = !1, L(!!Fe?.length), Be(null), V.current = 0, H.current = null;
+	}, [Fe]), p(() => {
+		T.current = !1, E.current = !1, H.current = null;
+	}, [f]);
+	let X = m(() => Ue || I, [Ue, I]), Ge = d((t) => {
 		try {
 			let r = JSON.parse(t.data);
 			if (re(r)) {
-				let t = !c.getState().eventIds.has(r.id) && de(r) ? r : null;
-				if (A(r), a(r)) {
+				let t = !l.getState().eventIds.has(r.id) && de(r) ? r : null;
+				if (k(r), a(r)) {
 					let e = r;
-					l({
+					u({
 						message: e.detail,
 						source: "conversation",
 						metadata: {
 							eventId: e.id,
 							errorCode: e.code
 						},
-						posthog: O
-					}), j(e.detail);
-				} else W();
-				if (ne(r) && l({
+						posthog: D
+					}), A(e.detail);
+				} else U();
+				if (ne(r) && u({
 					message: r.error,
 					source: "agent",
 					metadata: {
@@ -126,51 +138,51 @@ function v({ children: Me, conversationId: d, conversationUrl: v, sessionApiKey:
 						toolName: r.tool_name,
 						toolCallId: r.tool_call_id
 					},
-					posthog: O
-				}), fe(r) && d && (N(d, _(r)), n(d, { draftMessage: null })), te(r) && xe(r, d || "test-conversation-id", k), i(r) && (ce(r) && P(r.value.execution_status), ie(r) && P(r.value), ue(r) && G(r)), o(r) && F(r.action.command), s(r) && I(r.observation.content.filter((e) => e.type === "text").map((e) => e.text).join("\n")), oe(r)) {
+					posthog: D
+				}), c(r) && f && (M(f, _(r)), n(f, { draftMessage: null })), te(r) && be(r, f || "test-conversation-id", O), i(r) && (ce(r) && N(r.value.execution_status), ie(r) && N(r.value), ue(r) && W(r)), o(r) && P(r.action.command), s(r) && F(r.observation.content.filter((e) => e.type === "text").map((e) => e.text).join("\n")), oe(r)) {
 					let { screenshot_data: t } = r.observation;
 					if (t) {
 						let n = t.startsWith("data:") ? t : `data:image/png;base64,${t}`;
 						e.getState().setScreenshotSrc(n);
 					}
 				}
-				ae(r) && e.getState().setUrl(r.action.url), d && t && !t.observation.is_error && (Oe(d, t.observation.profile_name), t.observation.active_model && Ae(k, d, t.observation.active_model), ke(k, d)), se(r) && be(r.action);
+				ae(r) && e.getState().setUrl(r.action.url), f && t && !t.observation.is_error && (De(f, t.observation.profile_name), t.observation.active_model && ke(O, f, t.observation.active_model), Oe(O, f)), se(r) && ye(r.action);
 			}
 		} catch (e) {
 			console.warn("Failed to parse WebSocket message as JSON:", e);
 		}
 	}, [
+		k,
 		A,
-		j,
+		M,
+		O,
+		f,
 		N,
-		k,
-		d,
 		P,
 		F,
-		I,
-		G,
 		W,
-		O
-	]), We = u((e) => {
+		U,
+		D
+	]), Ke = d((e) => {
 		try {
 			let t = JSON.parse(e.data);
-			if (L && (H.current += 1, z !== null && H.current >= z && R(!1)), re(t)) {
-				if (A({
+			if (I && (V.current += 1, R !== null && V.current >= R && L(!1)), re(t)) {
+				if (k({
 					...t,
 					isFromPlanningAgent: !0
 				}), a(t)) {
 					let e = t;
-					l({
+					u({
 						message: e.detail,
 						source: "planning_conversation",
 						metadata: {
 							eventId: e.id,
 							errorCode: e.code
 						},
-						posthog: O
-					}), j(e.detail);
-				} else W();
-				if (ne(t) && l({
+						posthog: D
+					}), A(e.detail);
+				} else U();
+				if (ne(t) && u({
 					message: t.error,
 					source: "planning_agent",
 					metadata: {
@@ -178,20 +190,20 @@ function v({ children: Me, conversationId: d, conversationUrl: v, sessionApiKey:
 						toolName: t.tool_name,
 						toolCallId: t.tool_call_id
 					},
-					posthog: O
-				}), fe(t) && d && (N(d, _(t)), n(d, { draftMessage: null })), te(t) && xe(t, b?.[0]?.id || "test-conversation-id", k), i(t) && (ce(t) && P(t.value.execution_status), ie(t) && P(t.value), ue(t) && G(t)), o(t) && F(t.action.command), s(t) && I(t.observation.content.filter((e) => e.type === "text").map((e) => e.text).join("\n")), le(t)) {
+					posthog: D
+				}), c(t) && f && (M(f, _(t)), n(f, { draftMessage: null })), te(t) && be(t, b?.[0]?.id || "test-conversation-id", O), i(t) && (ce(t) && N(t.value.execution_status), ie(t) && N(t.value), ue(t) && W(t)), o(t) && P(t.action.command), s(t) && F(t.observation.content.filter((e) => e.type === "text").map((e) => e.text).join("\n")), le(t)) {
 					let { path: e } = t.observation;
-					if (Re(e)) {
+					if (Ve(e)) {
 						let t = b?.[0]?.id;
-						t && e && (L ? U.current = {
+						t && e && (I ? H.current = {
 							path: e,
 							conversationId: t
-						} : V({
+						} : B({
 							conversationId: t,
 							filePath: e
 						}, {
 							onSuccess: (e) => {
-								B(e);
+								z(e);
 							},
 							onError: (e) => {
 								console.warn("Failed to read conversation file:", e);
@@ -204,48 +216,48 @@ function v({ children: Me, conversationId: d, conversationUrl: v, sessionApiKey:
 			console.warn("Failed to parse WebSocket message as JSON:", e);
 		}
 	}, [
-		A,
-		L,
-		z,
-		j,
-		N,
 		k,
+		I,
+		R,
+		A,
+		M,
+		O,
 		b,
-		d,
+		f,
+		N,
 		P,
 		F,
-		I,
-		V,
 		B,
-		G,
+		z,
 		W,
-		O
-	]), Ge = p(() => {
-		let e = J ? {
+		U,
+		D
+	]), qe = m(() => {
+		let e = q ? {
 			resend_mode: "since",
-			after_timestamp: J
+			after_timestamp: q
 		} : { resend_mode: "all" };
 		return y && (e.session_api_key = y), {
 			queryParams: e,
 			reconnect: { enabled: !0 },
 			onOpen: () => {
-				C("OPEN"), E.current = !0, M();
+				S("OPEN"), T.current = !0, j();
 			},
 			onClose: () => {
-				C("CLOSED");
+				S("CLOSED");
 			},
 			onError: () => {
-				C("CLOSED"), E.current && j(_e, "connection");
+				S("CLOSED"), T.current && A(ge, "connection");
 			},
-			onMessage: Ue
+			onMessage: Ge
 		};
 	}, [
-		Ue,
+		Ge,
+		A,
 		j,
-		M,
 		y,
-		J
-	]), Ke = p(() => {
+		q
+	]), Je = m(() => {
 		let e = { resend_all: !0 };
 		y && (e.session_api_key = y);
 		let t = b?.[0];
@@ -253,52 +265,52 @@ function v({ children: Me, conversationId: d, conversationUrl: v, sessionApiKey:
 			queryParams: e,
 			reconnect: { enabled: !0 },
 			onOpen: async () => {
-				if (T("OPEN"), D.current = !0, M(), t?.id && t.conversation_url) try {
-					let e = await we.getEventCount(t.id, t.conversation_url, t.session_api_key);
-					Le(e), e === 0 && R(!1);
+				if (w("OPEN"), E.current = !0, j(), t?.id && t.conversation_url) try {
+					let e = await Ce.getEventCount(t.id, t.conversation_url, t.session_api_key);
+					Be(e), e === 0 && L(!1);
 				} catch {
-					R(!1);
+					L(!1);
 				}
 			},
 			onClose: () => {
-				T("CLOSED");
+				w("CLOSED");
 			},
 			onError: () => {
-				T("CLOSED"), D.current && j(_e, "connection");
+				w("CLOSED"), E.current && A(ge, "connection");
 			},
-			onMessage: We
+			onMessage: Ke
 		};
 	}, [
-		We,
+		Ke,
+		A,
 		j,
-		M,
 		y,
 		b
-	]), { socket: Z, reconnect: qe } = ge(Y || "", Ge), { socket: Q, reconnect: Je } = ge(X || "", Ke), Ye = u(() => {
-		if (Ie(), r.getState().conversationMode === "plan" && X) {
-			Je();
+	]), { socket: Z, reconnect: Ye } = he(J || "", qe), { socket: Q, reconnect: Xe } = he(Y || "", Je), Ze = d(() => {
+		if (Re(), r.getState().conversationMode === "plan" && Y) {
+			Xe();
 			return;
 		}
-		qe();
+		Ye();
 	}, [
-		X,
-		qe,
-		Je,
-		Ie
-	]), $ = u(async (e) => {
+		Y,
+		Ye,
+		Xe,
+		Re
+	]), $ = d(async (e) => {
 		let t = r.getState().conversationMode === "plan" ? Q : Z;
 		if (t?.readyState !== WebSocket.OPEN) {
-			if (!d) {
+			if (!f) {
 				let e = /* @__PURE__ */ Error("No conversation ID available");
-				throw j(e.message), e;
+				throw A(e.message), e;
 			}
 			try {
-				return await new pe(Ce()).sendEvent(d, {
+				return await new fe(Se()).sendEvent(f, {
 					role: "user",
 					content: e.content
 				}, { run: !0 }), { queued: !0 };
 			} catch (e) {
-				throw j(e instanceof Error ? e.message : "Failed to queue message for delivery"), e;
+				throw A(e instanceof Error ? e.message : "Failed to queue message for delivery"), e;
 			}
 		}
 		try {
@@ -307,72 +319,72 @@ function v({ children: Me, conversationId: d, conversationUrl: v, sessionApiKey:
 				run: !0
 			})), { queued: !1 };
 		} catch (e) {
-			throw j(e instanceof Error ? e.message : "Failed to send message"), e;
+			throw A(e instanceof Error ? e.message : "Failed to send message"), e;
 		}
 	}, [
 		Z,
 		Q,
-		j,
-		d
+		A,
+		f
 	]);
-	f(() => {
-		Z && Y && (() => {
+	p(() => {
+		Z && J && (() => {
 			switch (Z.readyState) {
 				case WebSocket.CONNECTING:
-					C("CONNECTING");
+					S("CONNECTING");
 					break;
 				case WebSocket.OPEN:
-					C("OPEN");
+					S("OPEN");
 					break;
 				case WebSocket.CLOSING:
-					C("CLOSING");
+					S("CLOSING");
 					break;
 				case WebSocket.CLOSED:
-					C("CLOSED");
+					S("CLOSED");
 					break;
 				default:
-					C("CLOSED");
+					S("CLOSED");
 					break;
 			}
 		})();
-	}, [Z, Y]), f(() => {
-		Q && X && (() => {
+	}, [Z, J]), p(() => {
+		Q && Y && (() => {
 			switch (Q.readyState) {
 				case WebSocket.CONNECTING:
-					T("CONNECTING");
+					w("CONNECTING");
 					break;
 				case WebSocket.OPEN:
-					T("OPEN");
+					w("OPEN");
 					break;
 				case WebSocket.CLOSING:
-					T("CLOSING");
+					w("CLOSING");
 					break;
 				case WebSocket.CLOSED:
-					T("CLOSED");
+					w("CLOSED");
 					break;
 				default:
-					T("CLOSED");
+					w("CLOSED");
 					break;
 			}
 		})();
-	}, [Q, X]);
-	let Xe = p(() => ({
-		connectionState: Ve,
+	}, [Q, Y]);
+	let Qe = m(() => ({
+		connectionState: We,
 		sendMessage: $,
-		isLoadingHistory: He,
-		reconnect: Ye
+		isLoadingHistory: X,
+		reconnect: Ze
 	}), [
-		Ve,
+		We,
 		$,
-		He,
-		Ye
+		X,
+		Ze
 	]);
 	return /* @__PURE__ */ Pe(g.Provider, {
-		value: Xe,
-		children: Me
+		value: Qe,
+		children: je
 	});
 }
-var y = () => d(g) || null;
+var y = () => f(g) || null;
 //#endregion
 export { v as ConversationWebSocketProvider, y as useConversationWebSocket };