Start cleaning up Bootstrapper

src/common/components/useNextLoadProgress.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRouter } from 'next/router';
+import type { Router } from 'next/router';
 import { default as NProgress } from 'nprogress';
 
 
@@ -7,10 +7,7 @@ import { default as NProgress } from 'nprogress';
  * Not show the bar for very fast loads (with a delay), and for the same route
  * NOTE: make sure that the applicatio is importing nprogress.css!
  */
-export function useNextLoadProgress(delay: number = 250) {
-
-  // external state
-  const router = useRouter();
+export function useNextLoadProgress(route: string, events: typeof Router.events, delay = 250) {
 
   // this fires both when the page is refreshed, and when the route changes
   React.useEffect(() => {
@@ -28,7 +25,7 @@ export function useNextLoadProgress(delay: number = 250) {
     };
 
     const handleStart = (newRoute: string) => {
-      if (newRoute === router.route) return;
+      if (newRoute === route) return;
 
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => {
@@ -36,15 +33,15 @@ export function useNextLoadProgress(delay: number = 250) {
       }, delay);
     };
 
-    router.events.on('routeChangeStart', handleStart);
-    router.events.on('routeChangeComplete', handleStop);
-    router.events.on('routeChangeError', handleStop);
+    events.on('routeChangeStart', handleStart);
+    events.on('routeChangeComplete', handleStop);
+    events.on('routeChangeError', handleStop);
 
     return () => {
       handleStop();
-      router.events.off('routeChangeStart', handleStart);
-      router.events.off('routeChangeComplete', handleStop);
-      router.events.off('routeChangeError', handleStop);
+      events.off('routeChangeStart', handleStart);
+      events.off('routeChangeComplete', handleStop);
+      events.off('routeChangeError', handleStop);
     };
-  }, [delay, router]);
+  }, [delay, events, route]);
 }

src/common/providers/ProviderBootstrapLogic.tsx

@@ -1,39 +1,35 @@
 import * as React from 'react';
-
-import { navigateToNews } from '~/common/app.routes';
-import { useNextLoadProgress } from '~/common/components/useNextLoadProgress';
-
+import { useRouter } from 'next/router';
 
 import { markNewsAsSeen, shallRedirectToNews } from '../../apps/news/news.version';
 
+import { navigateToNews, ROUTE_APP_CHAT } from '~/common/app.routes';
+import { useNextLoadProgress } from '~/common/components/useNextLoadProgress';
+
 
 export function ProviderBootstrapLogic(props: { children: React.ReactNode }) {
 
-  // wire-up the NextJS router to a top-level loading bar - this will alleviate
-  // the perceived delay on the first 'backend' (provider) capabiliies load
-  useNextLoadProgress();
+  // external state
+  const { route, events } = useRouter();
 
-  // NOTE: just a pass-through for now. Will be used for the following:
-  //  - loading the latest news (see ChatPage -> useRedirectToNewsOnUpdates)
-  //  - loading the commander
-  //  - ...
+  // wire-up the NextJS router to a loading bar to be displayed while routes change
+  useNextLoadProgress(route, events);
+
+
+  // logic
+  const doRedirectToNews = (route === ROUTE_APP_CHAT) && shallRedirectToNews();
+
+
+  // redirect Chat -> News if fresh news
   const isRedirecting = React.useMemo(() => {
-
-    // redirect to the news page if the news is outdated
-    let doRedirect = shallRedirectToNews();
-    if (doRedirect) {
+    if (doRedirectToNews) {
       markNewsAsSeen();
       void navigateToNews();
+      return true;
     }
+    return false;
+  }, [doRedirectToNews]);
 
-    // redirect to the commander if the app is running on mobile
-    // if (!doRedirect && getIsMobile()) {
-    //   doRedirect = true;
-    //   void showCommander();
-    // }
 
-    return doRedirect;
-  }, []);
-
-  return /*isRedirecting ? null :*/ props.children;
+  return isRedirecting ? null : props.children;
 }

src/modules/llms/vendors/localai/localai.vendor.ts

@@ -22,6 +22,7 @@ export const ModelVendorLocalAI: IModelVendor<SourceSetupLocalAI, OpenAIAccessSc
   location: 'local',
   instanceLimit: 4,
   hasBackendCap: () => {
+    // this is to show the green mark on the vendor icon in the setup screen
     const { hasLlmLocalAIHost, hasLlmLocalAIKey } = backendCaps();
     return hasLlmLocalAIHost || hasLlmLocalAIKey;
   },