fix: unify provider retrieval into swr hook (#8609)

Author: wenxi-onyx

web/src/components/chat/ProviderContext.tsx

@@ -1,5 +1,8 @@
 "use client";
-import { WellKnownLLMProviderDescriptor } from "@/app/admin/configuration/llm/interfaces";
+import {
+  WellKnownLLMProviderDescriptor,
+  LLMProviderDescriptor,
+} from "@/app/admin/configuration/llm/interfaces";
 import React, {
   createContext,
   useContext,
@@ -8,57 +11,101 @@ import React, {
   useCallback,
 } from "react";
 import { useUser } from "@/providers/UserProvider";
-import { useRouter } from "next/navigation";
-import { checkLlmProvider } from "../initialSetup/welcome/lib";
+import { useLLMProviders } from "@/lib/hooks/useLLMProviders";
+import { useLLMProviderOptions } from "@/lib/hooks/useLLMProviderOptions";
+import { testDefaultProvider as testDefaultProviderSvc } from "@/lib/llm/svc";
 
 interface ProviderContextType {
   shouldShowConfigurationNeeded: boolean;
   providerOptions: WellKnownLLMProviderDescriptor[];
-  refreshProviderInfo: () => Promise<void>; // Add this line
+  refreshProviderInfo: () => Promise<void>;
+  // Expose configured provider instances for components that need it (e.g., onboarding)
+  llmProviders: LLMProviderDescriptor[] | undefined;
+  isLoadingProviders: boolean;
+  hasProviders: boolean;
 }
 
 const ProviderContext = createContext<ProviderContextType | undefined>(
   undefined
 );
 
+const DEFAULT_LLM_PROVIDER_TEST_COMPLETE_KEY = "defaultLlmProviderTestComplete";
+
+function checkDefaultLLMProviderTestComplete() {
+  if (typeof window === "undefined") return true;
+  return (
+    localStorage.getItem(DEFAULT_LLM_PROVIDER_TEST_COMPLETE_KEY) === "true"
+  );
+}
+
+function setDefaultLLMProviderTestComplete() {
+  if (typeof window === "undefined") return;
+  localStorage.setItem(DEFAULT_LLM_PROVIDER_TEST_COMPLETE_KEY, "true");
+}
+
 export function ProviderContextProvider({
   children,
 }: {
   children: React.ReactNode;
 }) {
   const { user } = useUser();
-  const router = useRouter();
 
-  const [validProviderExists, setValidProviderExists] = useState<boolean>(true);
-  const [providerOptions, setProviderOptions] = useState<
-    WellKnownLLMProviderDescriptor[]
-  >([]);
+  // Use SWR hooks instead of raw fetch
+  const {
+    llmProviders,
+    isLoading: isLoadingProviders,
+    refetch: refetchProviders,
+  } = useLLMProviders();
+  const { llmProviderOptions: providerOptions, refetch: refetchOptions } =
+    useLLMProviderOptions();
 
-  const fetchProviderInfo = useCallback(async () => {
-    const { providers, options, defaultCheckSuccessful } =
-      await checkLlmProvider(user);
+  const [defaultCheckSuccessful, setDefaultCheckSuccessful] =
+    useState<boolean>(true);
 
-    setValidProviderExists(providers.length > 0 && defaultCheckSuccessful);
-    setProviderOptions(options);
-  }, [user, setValidProviderExists, setProviderOptions]);
+  // Test the default provider - only runs if test hasn't passed yet
+  const testDefaultProvider = useCallback(async () => {
+    const shouldCheck =
+      !checkDefaultLLMProviderTestComplete() &&
+      (!user || user.role === "admin");
 
+    if (shouldCheck) {
+      const success = await testDefaultProviderSvc();
+      setDefaultCheckSuccessful(success);
+      if (success) {
+        setDefaultLLMProviderTestComplete();
+      }
+    }
+  }, [user]);
+
+  // Test default provider on mount
   useEffect(() => {
-    fetchProviderInfo();
-  }, [router, user, fetchProviderInfo]);
+    testDefaultProvider();
+  }, [testDefaultProvider]);
+
+  const hasProviders = (llmProviders?.length ?? 0) > 0;
+  const validProviderExists = hasProviders && defaultCheckSuccessful;
 
   const shouldShowConfigurationNeeded =
-    !validProviderExists && providerOptions.length > 0;
+    !validProviderExists && (providerOptions?.length ?? 0) > 0;
 
-  const refreshProviderInfo = async () => {
-    await fetchProviderInfo();
-  };
+  const refreshProviderInfo = useCallback(async () => {
+    // Refetch provider lists and re-test default provider if needed
+    await Promise.all([
+      refetchProviders(),
+      refetchOptions(),
+      testDefaultProvider(),
+    ]);
+  }, [refetchProviders, refetchOptions, testDefaultProvider]);
 
   return (
     <ProviderContext.Provider
       value={{
         shouldShowConfigurationNeeded,
-        providerOptions,
-        refreshProviderInfo, // Add this line
+        providerOptions: providerOptions ?? [],
+        refreshProviderInfo,
+        llmProviders,
+        isLoadingProviders,
+        hasProviders,
       }}
     >
       {children}

web/src/components/initialSetup/welcome/constants.ts

@@ -0,0 +1,19 @@
+import useSWR from "swr";
+import { WellKnownLLMProviderDescriptor } from "@/app/admin/configuration/llm/interfaces";
+import { errorHandlingFetcher } from "@/lib/fetcher";
+
+export function useLLMProviderOptions() {
+  const { data, error, mutate } = useSWR<
+    WellKnownLLMProviderDescriptor[] | undefined
+  >("/api/admin/llm/built-in/options", errorHandlingFetcher, {
+    revalidateOnFocus: false,
+    dedupingInterval: 60000, // Dedupe requests within 1 minute
+  });
+
+  return {
+    llmProviderOptions: data,
+    isLoading: !error && !data,
+    error,
+    refetch: mutate,
+  };
+}

web/src/components/initialSetup/welcome/lib.ts

@@ -0,0 +1,23 @@
+/**
+ * LLM action functions for mutations.
+ *
+ * These are async functions for one-off actions that don't need SWR caching.
+ *
+ * Endpoints:
+ * - /api/admin/llm/test/default - Test the default LLM provider connection
+ */
+
+/**
+ * Test the default LLM provider.
+ * Returns true if the default provider is configured and working, false otherwise.
+ */
+export async function testDefaultProvider(): Promise<boolean> {
+  try {
+    const response = await fetch("/api/admin/llm/test/default", {
+      method: "POST",
+    });
+    return response?.ok || false;
+  } catch {
+    return false;
+  }
+}

web/src/lib/hooks/useLLMProviderOptions.ts

@@ -1,4 +1,4 @@
-import { useReducer, useCallback, useState, useEffect, useRef } from "react";
+import { useReducer, useCallback, useEffect, useRef } from "react";
 import { onboardingReducer, initialState } from "./reducer";
 import {
   OnboardingActions,
@@ -12,6 +12,7 @@ import { updateUserPersonalization } from "@/lib/userSettings";
 import { useUser } from "@/providers/UserProvider";
 import { MinimalPersonaSnapshot } from "@/app/admin/assistants/interfaces";
 import { useLLMProviders } from "@/lib/hooks/useLLMProviders";
+import { useProviderStatus } from "@/components/chat/ProviderContext";
 
 export function useOnboardingState(liveAssistant?: MinimalPersonaSnapshot): {
   state: OnboardingState;
@@ -21,43 +22,28 @@ export function useOnboardingState(liveAssistant?: MinimalPersonaSnapshot): {
 } {
   const [state, dispatch] = useReducer(onboardingReducer, initialState);
   const { user, refreshUser } = useUser();
-  // Use the SWR hook for LLM providers - no persona ID for the general providers list
+
+  // Get provider data from ProviderContext instead of duplicating the call
   const {
     llmProviders,
-    isLoading: isLoadingProviders,
-    refetch: refreshLlmProviders,
-  } = useLLMProviders();
+    isLoadingProviders,
+    hasProviders: hasLlmProviders,
+    providerOptions,
+    refreshProviderInfo,
+  } = useProviderStatus();
+
+  // Only fetch persona-specific providers (different endpoint)
   const { refetch: refreshPersonaProviders } = useLLMProviders(
     liveAssistant?.id
   );
-  const hasLlmProviders = (llmProviders?.length ?? 0) > 0;
+
   const userName = user?.personalization?.name;
-  const [llmDescriptors, setLlmDescriptors] = useState<
-    WellKnownLLMProviderDescriptor[]
-  >([]);
+  const llmDescriptors = providerOptions;
+
   const nameUpdateTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
     null
   );
 
-  useEffect(() => {
-    refreshLlmProviders();
-    const fetchLlmDescriptors = async () => {
-      try {
-        const response = await fetch("/api/admin/llm/built-in/options");
-        if (!response.ok) {
-          setLlmDescriptors([]);
-          return;
-        }
-        const data = await response.json();
-        setLlmDescriptors(Array.isArray(data) ? data : []);
-      } catch (_e) {
-        setLlmDescriptors([]);
-      }
-    };
-
-    fetchLlmDescriptors();
-  }, []);
-
   // Navigate to the earliest incomplete step in the onboarding flow.
   // Step order: Welcome -> Name -> LlmSetup -> Complete
   // We check steps in order and stop at the first incomplete one.
@@ -134,13 +120,13 @@ export function useOnboardingState(liveAssistant?: MinimalPersonaSnapshot): {
     }
 
     if (state.currentStep === OnboardingStep.LlmSetup) {
-      refreshLlmProviders();
+      refreshProviderInfo();
       if (liveAssistant) {
         refreshPersonaProviders();
       }
     }
     dispatch({ type: OnboardingActionType.NEXT_STEP });
-  }, [state, refreshLlmProviders, llmProviders, refreshPersonaProviders]);
+  }, [state, refreshProviderInfo, llmProviders, refreshPersonaProviders]);
 
   const prevStep = useCallback(() => {
     dispatch({ type: OnboardingActionType.PREV_STEP });