refactor(MessageHandler -> useServerStream): convert all relating files to TS and correct typings based on this change: properly refactor MessageHandler to a custom hook, where it's passed a submission object to instantiate the stream. This is the bare minimum groundwork for potentially having multiple streams running, which would be a big project to modularize a lot of the global state into maps/multiple streams, particular useful for having multiple views in place

client/src/routes/Root.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useState } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { Outlet } from 'react-router-dom';
+import {
+  useGetEndpointsQuery,
+  useGetPresetsQuery,
+  useGetSearchEnabledQuery,
+} from 'librechat-data-provider';
+
+import { Nav, MobileNav } from '~/components/Nav';
+import { useAuthContext, useServerStream } from '~/hooks';
+import store from '~/store';
+
+export default function Root() {
+  const [navVisible, setNavVisible] = useState(() => {
+    const savedNavVisible = localStorage.getItem('navVisible');
+    return savedNavVisible !== null ? JSON.parse(savedNavVisible) : false;
+  });
+
+  const submission = useRecoilValue(store.submission);
+  useServerStream(submission ?? null);
+
+  const setIsSearchEnabled = useSetRecoilState(store.isSearchEnabled);
+  const setEndpointsConfig = useSetRecoilState(store.endpointsConfig);
+  const setPresets = useSetRecoilState(store.presets);
+  const { user, isAuthenticated } = useAuthContext();
+
+  const searchEnabledQuery = useGetSearchEnabledQuery();
+  const endpointsQuery = useGetEndpointsQuery();
+  const presetsQuery = useGetPresetsQuery({ enabled: !!user });
+
+  useEffect(() => {
+    localStorage.setItem('navVisible', JSON.stringify(navVisible));
+  }, [navVisible]);
+
+  useEffect(() => {
+    if (endpointsQuery.data) {
+      setEndpointsConfig(endpointsQuery.data);
+    } else if (endpointsQuery.isError) {
+      console.error('Failed to get endpoints', endpointsQuery.error);
+    }
+  }, [endpointsQuery.data, endpointsQuery.isError]);
+
+  useEffect(() => {
+    if (presetsQuery.data) {
+      setPresets(presetsQuery.data);
+    } else if (presetsQuery.isError) {
+      console.error('Failed to get presets', presetsQuery.error);
+    }
+  }, [presetsQuery.data, presetsQuery.isError]);
+
+  useEffect(() => {
+    if (searchEnabledQuery.data) {
+      setIsSearchEnabled(searchEnabledQuery.data);
+    } else if (searchEnabledQuery.isError) {
+      console.error('Failed to get search enabled', searchEnabledQuery.error);
+    }
+  }, [searchEnabledQuery.data, searchEnabledQuery.isError]);
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className="flex h-screen">
+        <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
+        <div className="flex h-full w-full flex-1 flex-col bg-gray-50">
+          <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white pt-10 dark:bg-gray-800 md:pt-0">
+            <MobileNav setNavVisible={setNavVisible} />
+            <Outlet />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}