Refactor websocket

[tofarr]

Refactor client side web socket control for better maintainability.

• [] Include this change in the Release Notes. If checked, you must provide an end-user friendly description for your change below

---

So, when implementing the reconnect, I kept hitting walls. Eventually I figured some of the problem was the way we use sockets on the client side - it feels that we are trying to use it like JQuery. This refactor:

• Turns the websocket from a hook in into a component, so that it is added / removed like any other (And removing closes the socket automatically)
• Formalizes the state a socket expose in it's hook (A status enum, an array of events, and a send method)
• Formalizes the inputs to the socket (token, ghToken, settings, and a new enabled flag)
• Separates the socket state from the events the client executes (Initial query, etc.)

This will make reconnect logic far easier to implement, as it can mostly be isolated to WsClientProvider.

---

To run this PR locally, use the following command:

docker run -it --rm   -p 3000:3000   -v /var/run/docker.sock:/var/run/docker.sock   --add-host host.docker.internal:host-gateway   -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:c642be1-nikolaik   --name openhands-app-c642be1   docker.all-hands.dev/all-hands-ai/openhands:c642be1

[amanape]

We actually have a useEffectOnce!

OpenHands/frontend/src/utils/use-effect-once.ts

Lines 7 to 18 in bf8ccc8

	export const useEffectOnce = (callback: () => void) => {
	const isUsedRef = React.useRef(false);
	React.useEffect(() => {
	if (isUsedRef.current) {
	return;
	}
	isUsedRef.current = true;
	callback();
	}, [isUsedRef.current]);
	};

[amanape]

With that we may also be able to avoid persisting timeout (or having a timeout altogether) across re-renders

[tofarr]

UseEffectOnce will execute the effect once the first time the component mounts, but then not again after this, which means if the tokens or enabled flag changes then the effect will not re-execute.

I thought about adding a custom effect useEffectIfActuallyChanged, but decided against it because this is what useEffect is actually meant to do, and it only does not to test whether components actually mount and unmount properly. Our websocket is a rare corner case where we don't want the mount / unmount behavior.

[amanape]

I'm referring to the one below the comment which is already executed only once when the component mounts, as implied by the empty dependency array, not the one above 😄

[tofarr]

Maybe I misunderstood? I was talking about this one:

 React.useEffect(() => {
    const timeout = closeRef.current;
    if (timeout != null) {
      clearTimeout(timeout);
    }

    return () => {
      closeRef.current = setTimeout(() => {
        wsRef.current?.close();
      }, 100);
    };
  }, []);

In this case, if I useEffectOnce...

• useEffectOnce does not return a destructor - the destructor is what I am primarily interested in here - it is where I close the websocket if it is still open
• Even if it did return a destructor, when should it be invoked? It would need timeout logic like I have - otherwise the destructor would always be invoked the first time the component is unmounted, closing the websocket.

[amanape]

Note that the warning will always be rendered

[amanape]

This actually may be annoying. With these changes we're either always going to show this error or never since the parent does not have access to the context. 🤔

[amanape]

If this is to prevent the failing test, I've already fixed it in #4887

[amanape]

BTW we have some improved (but still unused) types in frontend/src/types/core. No need to change them yet, just making you aware of it if you aren't already