fix: improve assistant fetching efficiency (onyx-dot-app#5047)

* Improve assistant fetching efficiency

* More fix

* Fix weird build stuff

* Improve

Author: Weves

web/src/app/ee/admin/performance/usage/PersonaMessagesChart.tsx

@@ -5,7 +5,6 @@ import {
   usePersonaMessages,
   usePersonaUniqueUsers,
 } from "../lib";
-import { useAssistants } from "@/components/context/AssistantsContext";
 import { DateRangePickerValue } from "@/components/dateRangeSelectors/AdminDateRangeSelector";
 import Text from "@/components/ui/text";
 import Title from "@/components/ui/title";
@@ -19,18 +18,20 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useState, useMemo, useEffect } from "react";
+import { Persona } from "@/app/admin/assistants/interfaces";
 
 export function PersonaMessagesChart({
+  availablePersonas,
   timeRange,
 }: {
+  availablePersonas: Persona[];
   timeRange: DateRangePickerValue;
 }) {
   const [selectedPersonaId, setSelectedPersonaId] = useState<
     number | undefined
   >(undefined);
   const [searchQuery, setSearchQuery] = useState("");
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
-  const { allAssistants: personaList } = useAssistants();
 
   const {
     data: personaMessagesData,
@@ -48,11 +49,11 @@ export function PersonaMessagesChart({
   const hasError = personaMessagesError || personaUniqueUsersError;
 
   const filteredPersonaList = useMemo(() => {
-    if (!personaList) return [];
-    return personaList.filter((persona) =>
+    if (!availablePersonas) return [];
+    return availablePersonas.filter((persona) =>
       persona.name.toLowerCase().includes(searchQuery.toLowerCase())
     );
-  }, [personaList, searchQuery]);
+  }, [availablePersonas, searchQuery]);
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     e.stopPropagation();
@@ -142,7 +143,7 @@ export function PersonaMessagesChart({
         <ThreeDotsLoader />
       </div>
     );
-  } else if (!personaList || hasError) {
+  } else if (!availablePersonas || hasError) {
     content = (
       <div className="h-80 text-red-600 text-bold flex flex-col">
         <p className="m-auto">Failed to fetch data...</p>

web/src/app/ee/admin/performance/usage/page.tsx

@@ -10,9 +10,11 @@ import { AdminPageTitle } from "@/components/admin/Title";
 import { FiActivity } from "react-icons/fi";
 import UsageReports from "./UsageReports";
 import { Separator } from "@/components/ui/separator";
+import { useAdminPersonas } from "@/app/admin/assistants/hooks";
 
 export default function AnalyticsPage() {
   const [timeRange, setTimeRange] = useTimeRange();
+  const { personas } = useAdminPersonas();
 
   return (
     <main className="pt-4 mx-auto container">
@@ -27,7 +29,10 @@ export default function AnalyticsPage() {
       <QueryPerformanceChart timeRange={timeRange} />
       <FeedbackChart timeRange={timeRange} />
       <OnyxBotChart timeRange={timeRange} />
-      <PersonaMessagesChart timeRange={timeRange} />
+      <PersonaMessagesChart
+        availablePersonas={personas}
+        timeRange={timeRange}
+      />
       <Separator />
       <UsageReports />
     </main>

web/src/app/layout.tsx

@@ -17,7 +17,6 @@ import {
   EnterpriseSettings,
   ApplicationStatus,
 } from "./admin/settings/interfaces";
-import { fetchAssistantData } from "@/lib/chat/fetchAssistantdata";
 import { AppProvider } from "@/components/context/AppProvider";
 import { PHProvider } from "./providers";
 import { getAuthTypeMetadataSS, getCurrentUserSS } from "@/lib/userSS";
@@ -31,6 +30,7 @@ import { DocumentsProvider } from "./chat/my-documents/DocumentsContext";
 import CloudError from "@/components/errorPages/CloudErrorPage";
 import Error from "@/components/errorPages/ErrorPage";
 import AccessRestrictedPage from "@/components/errorPages/AccessRestrictedPage";
+import { fetchAssistantData } from "@/lib/chat/fetchAssistantdata";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -71,7 +71,7 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const [combinedSettings, assistantsData, user, authTypeMetadata] =
+  const [combinedSettings, assistants, user, authTypeMetadata] =
     await Promise.all([
       fetchSettingsSS(),
       fetchAssistantData(),
@@ -145,17 +145,12 @@ export default async function RootLayout({
     );
   }
 
-  const { assistants, hasAnyConnectors, hasImageCompatibleModel } =
-    assistantsData;
-
   return getPageContent(
     <AppProvider
       authTypeMetadata={authTypeMetadata}
       user={user}
       settings={combinedSettings}
       assistants={assistants}
-      hasAnyConnectors={hasAnyConnectors}
-      hasImageCompatibleModel={hasImageCompatibleModel}
     >
       <DocumentsProvider>
         <Suspense fallback={null}>

web/src/components/context/AppProvider.tsx

@@ -14,8 +14,6 @@ interface AppProviderProps {
   user: User | null;
   settings: CombinedSettings;
   assistants: MinimalPersonaSnapshot[];
-  hasAnyConnectors: boolean;
-  hasImageCompatibleModel: boolean;
   authTypeMetadata: AuthTypeMetadata;
 }
 
@@ -24,8 +22,6 @@ export const AppProvider = ({
   user,
   settings,
   assistants,
-  hasAnyConnectors,
-  hasImageCompatibleModel,
   authTypeMetadata,
 }: AppProviderProps) => {
   return (
@@ -36,11 +32,7 @@ export const AppProvider = ({
         authTypeMetadata={authTypeMetadata}
       >
         <ProviderContextProvider>
-          <AssistantsProvider
-            initialAssistants={assistants}
-            hasAnyConnectors={hasAnyConnectors}
-            hasImageCompatibleModel={hasImageCompatibleModel}
-          >
+          <AssistantsProvider initialAssistants={assistants}>
             <ModalProvider user={user}>{children}</ModalProvider>
           </AssistantsProvider>
         </ProviderContextProvider>

web/src/components/context/AssistantsContext.tsx

@@ -25,9 +25,6 @@ interface AssistantsContextProps {
   ownedButHiddenAssistants: MinimalPersonaSnapshot[];
   refreshAssistants: () => Promise<void>;
   isImageGenerationAvailable: boolean;
-  // Admin only
-  editablePersonas: MinimalPersonaSnapshot[];
-  allAssistants: MinimalPersonaSnapshot[];
   pinnedAssistants: MinimalPersonaSnapshot[];
   setPinnedAssistants: Dispatch<SetStateAction<MinimalPersonaSnapshot[]>>;
 }
@@ -41,22 +38,11 @@ export const AssistantsProvider: React.FC<{
   initialAssistants: MinimalPersonaSnapshot[];
   hasAnyConnectors?: boolean;
   hasImageCompatibleModel?: boolean;
-}> = ({
-  children,
-  initialAssistants,
-  hasAnyConnectors,
-  hasImageCompatibleModel,
-}) => {
+}> = ({ children, initialAssistants }) => {
   const [assistants, setAssistants] = useState<MinimalPersonaSnapshot[]>(
     initialAssistants || []
   );
-  const { user, isAdmin, isCurator } = useUser();
-  const [editablePersonas, setEditablePersonas] = useState<
-    MinimalPersonaSnapshot[]
-  >([]);
-  const [allAssistants, setAllAssistants] = useState<MinimalPersonaSnapshot[]>(
-    []
-  );
+  const { user } = useUser();
 
   const [pinnedAssistants, setPinnedAssistants] = useState<
     MinimalPersonaSnapshot[]
@@ -107,37 +93,6 @@ export const AssistantsProvider: React.FC<{
     checkImageGenerationAvailability();
   }, []);
 
-  const fetchPersonas = async () => {
-    if (!isAdmin && !isCurator) {
-      return;
-    }
-
-    try {
-      const [editableResponse, allResponse] = await Promise.all([
-        fetch("/api/admin/persona?get_editable=true"),
-        fetch("/api/admin/persona"),
-      ]);
-
-      if (editableResponse.ok) {
-        const editablePersonas = await editableResponse.json();
-        setEditablePersonas(editablePersonas);
-      }
-
-      if (allResponse.ok) {
-        const allPersonas = await allResponse.json();
-        setAllAssistants(allPersonas);
-      } else {
-        console.error("Error fetching personas:", allResponse);
-      }
-    } catch (error) {
-      console.error("Error fetching personas:", error);
-    }
-  };
-
-  useEffect(() => {
-    fetchPersonas();
-  }, [isAdmin, isCurator]);
-
   const refreshAssistants = async () => {
     try {
       const response = await fetch("/api/persona", {
@@ -148,13 +103,7 @@ export const AssistantsProvider: React.FC<{
       });
       if (!response.ok) throw new Error("Failed to fetch assistants");
       let assistants: MinimalPersonaSnapshot[] = await response.json();
-
-      let filteredAssistants = filterAssistants(assistants);
-
-      setAssistants(filteredAssistants);
-
-      // Fetch and update allAssistants for admins and curators
-      await fetchPersonas();
+      setAssistants(filterAssistants(assistants));
     } catch (error) {
       console.error("Error refreshing assistants:", error);
     }
@@ -197,8 +146,6 @@ export const AssistantsProvider: React.FC<{
         finalAssistants,
         ownedButHiddenAssistants,
         refreshAssistants,
-        editablePersonas,
-        allAssistants,
         isImageGenerationAvailable,
         setPinnedAssistants,
         pinnedAssistants,

web/src/lib/chat/fetchAssistantdata.ts

@@ -1,65 +1,20 @@
-import { fetchSS } from "@/lib/utilsSS";
 import { MinimalPersonaSnapshot } from "@/app/admin/assistants/interfaces";
-import { fetchLLMProvidersSS } from "@/lib/llm/fetchLLMs";
 import { fetchAssistantsSS } from "../assistants/fetchAssistantsSS";
-import { modelSupportsImageInput } from "../llm/utils";
 import { filterAssistants } from "../assistants/utils";
 
-interface AssistantData {
-  assistants: MinimalPersonaSnapshot[];
-  hasAnyConnectors: boolean;
-  hasImageCompatibleModel: boolean;
-}
-export async function fetchAssistantData(): Promise<AssistantData> {
-  // Default state if anything fails
-  const defaultState: AssistantData = {
-    assistants: [],
-    hasAnyConnectors: false,
-    hasImageCompatibleModel: false,
-  };
-
+export async function fetchAssistantData(): Promise<MinimalPersonaSnapshot[]> {
   try {
-    // Fetch core assistants data first
+    // Fetch core assistants data
     const [assistants, assistantsFetchError] = await fetchAssistantsSS();
     if (assistantsFetchError) {
       // This is not a critical error and occurs when the user is not logged in
       console.warn(`Failed to fetch assistants - ${assistantsFetchError}`);
-      return defaultState;
+      return [];
     }
 
-    // Parallel fetch of additional data
-    const [ccPairsResponse, llmProviders] = await Promise.all([
-      fetchSS("/manage/connector-status").catch((error) => {
-        console.error("Failed to fetch connectors:", error);
-        return null;
-      }),
-      fetchLLMProvidersSS().catch((error) => {
-        console.error("Failed to fetch LLM providers:", error);
-        return [];
-      }),
-    ]);
-
-    const hasAnyConnectors = ccPairsResponse?.ok
-      ? (await ccPairsResponse.json()).length > 0
-      : false;
-
-    const hasImageCompatibleModel = llmProviders.some(
-      (provider) =>
-        provider.provider === "openai" ||
-        provider.model_configurations.some((modelConfiguration) =>
-          modelSupportsImageInput(llmProviders, modelConfiguration.name)
-        )
-    );
-
-    let filteredAssistants = filterAssistants(assistants);
-
-    return {
-      assistants: filteredAssistants,
-      hasAnyConnectors,
-      hasImageCompatibleModel,
-    };
+    return filterAssistants(assistants);
   } catch (error) {
     console.error("Unexpected error in fetchAssistantData:", error);
-    return defaultState;
+    return [];
   }
 }