Merge pull request #1319 from BudEcosystem/bugfix/agent-new

athul-ab · web-flow · commit cacc66bf4349 · 2026-02-16T15:26:03.000+05:30
Bugfix/agent new
diff --git a/services/budadmin/src/components/auth/contactAdmin.tsx b/services/budadmin/src/components/auth/contactAdmin.tsx
@@ -165,9 +165,11 @@ const ContactAdmin = ({ onSubmit }: ContactAdminKeyProps) => {
           }}
         >
           <Text_12_400_EEEEEE className="text-[#EC7575]">
-            {authError.includes("Cannot read properties")
-              ? "Something went wrong, please try again later."
-              : authError}
+            {typeof window !== "undefined" && !navigator.onLine
+              ? "No internet connection"
+              : authError.includes("Cannot read properties")
+                ? "Something went wrong, please try again later."
+                : authError}
           </Text_12_400_EEEEEE>
         </motion.div>
       )}
diff --git a/services/budadmin/src/components/auth/login.tsx b/services/budadmin/src/components/auth/login.tsx
@@ -293,9 +293,11 @@ const LoginPage = ({ onSubmit }: LoginPageModalProps) => {
           }}
         >
           <Text_12_400_EEEEEE className="text-[#EC7575]">
-            {authError.includes("Cannot read properties")
-              ? "Something went wrong, please try again later."
-              : authError}
+            {typeof window !== "undefined" && !navigator.onLine
+              ? "No internet connection"
+              : authError.includes("Cannot read properties")
+                ? "Something went wrong, please try again later."
+                : authError}
           </Text_12_400_EEEEEE>
         </motion.div>
       )}
diff --git a/services/budadmin/src/components/auth/resetPassword.tsx b/services/budadmin/src/components/auth/resetPassword.tsx
@@ -282,9 +282,11 @@ const ResetPasswordPage = ({ onSubmit }: ResetPasswordProps) => {
           }}
         >
           <Text_12_400_EEEEEE className="text-[#EC7575]">
-            {authError.includes("Cannot read properties")
-              ? "Something went wrong, please try again later."
-              : authError}
+            {typeof window !== "undefined" && !navigator.onLine
+              ? "No internet connection"
+              : authError.includes("Cannot read properties")
+                ? "Something went wrong, please try again later."
+                : authError}
           </Text_12_400_EEEEEE>
         </motion.div>
       )}
diff --git a/services/budadmin/src/components/ui/bud/deploymentDrawer/DeployModelSelect.tsx b/services/budadmin/src/components/ui/bud/deploymentDrawer/DeployModelSelect.tsx
@@ -4,7 +4,7 @@ import { Text_12_300_EEEEEE, Text_12_600_EEEEEE } from "../../text";
 import { ModelListCard } from "./ModelListCard";
 import { Tag } from "../dataEntry/TagsInput";
 import { useDrawer } from "src/hooks/useDrawer";
-import { Checkbox } from "antd";
+import { Checkbox, Spin } from "antd";
 
 function DeployModelSelect({
   multiSelect,
@@ -22,7 +22,8 @@ function DeployModelSelect({
   hideSelect,
   emptyComponent = <Text_12_300_EEEEEE className="pl-5">
     To add new models for the provider, click the &quot;+Cloud Model&quot; button
-  </Text_12_300_EEEEEE>
+  </Text_12_300_EEEEEE>,
+  isLoadingMore,
 }: {
   multiSelect?: boolean;
   multiSelectedModels?: Model[];
@@ -38,6 +39,7 @@ function DeployModelSelect({
   children: React.ReactNode;
   hideSelect?: boolean;
   emptyComponent?: React.ReactNode;
+  isLoadingMore?: boolean;
 }) {
   const [selectAllModels, setSelectAllModels] = useState<boolean>(false);
 
@@ -123,6 +125,11 @@ function DeployModelSelect({
                 )}
               </div>
             ))}
+            {isLoadingMore && (
+              <div className="flex justify-center items-center py-4">
+                <Spin size="small" />
+              </div>
+            )}
           </>
         ) : (
           <div className="flex justify-center items-center min-h-[4rem]">
diff --git a/services/budadmin/src/flows/AddModel/Cloud/ModelList.tsx b/services/budadmin/src/flows/AddModel/Cloud/ModelList.tsx
@@ -5,19 +5,23 @@ import { BudDrawerLayout } from "@/components/ui/bud/dataEntry/BudDrawerLayout";
 import { BudForm } from "@/components/ui/bud/dataEntry/BudForm";
 import DeployModelSelect from "@/components/ui/bud/deploymentDrawer/DeployModelSelect";
 import ModelFilter from "@/components/ui/bud/deploymentDrawer/ModelFilter";
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useRef, useCallback } from "react";
 import { useDrawer } from "src/hooks/useDrawer";
 import { useModels } from "src/hooks/useModels";
 import { useDeployModel } from "src/stores/useDeployModel";
 
+const PAGE_SIZE = 50;
+
 export default function ModelList() {
   const { openDrawerWithStep } = useDrawer();
 
-  const [page, setPage] = React.useState(1);
-  const [limit, setLimit] = React.useState(100);
+  const pageRef = useRef(1);
 
   const { selectedProvider, modalityType } = useDeployModel();
   const [models, setModels] = React.useState([]);
+  const [hasMore, setHasMore] = React.useState(true);
+  const [isLoadingMore, setIsLoadingMore] = React.useState(false);
+  const lastScrollTop = useRef(0);
   const { isExpandedViewOpen } = useContext(BudFormContext);
 
   const { loading, fetchModels } = useModels();
@@ -27,36 +31,105 @@ export default function ModelList() {
   const { selectedModel, setSelectedModel, currentWorkflow, updateCloudModel } =
     useDeployModel();
 
+  const getFilterParams = useCallback(() => {
+    const endpoints =
+      modalityType?.endpoints && modalityType.endpoints.length > 0
+        ? modalityType.endpoints
+        : undefined;
+    const modalities =
+      !endpoints &&
+      modalityType?.modalities &&
+      modalityType.modalities.length > 0
+        ? modalityType.modalities
+        : undefined;
+
+    return {
+      table_source: "cloud_model" as const,
+      source: selectedProvider?.type,
+      modality: modalities,
+      supported_endpoints: endpoints,
+    };
+  }, [
+    selectedProvider?.type,
+    modalityType?.modalities,
+    modalityType?.endpoints,
+  ]);
+
   useEffect(() => {
     if (currentWorkflow?.workflow_steps?.model) {
       setSelectedModel(currentWorkflow.workflow_steps.model);
     }
   }, [currentWorkflow]);
 
   useEffect(() => {
-    const endpoints = modalityType?.endpoints && modalityType.endpoints.length > 0
-      ? modalityType.endpoints
-      : undefined;
-    const modalities = !endpoints && modalityType?.modalities && modalityType.modalities.length > 0
-      ? modalityType.modalities
-      : undefined;
-
     if (!selectedProvider?.type) {
       setModels([]);
+      setHasMore(false);
       return;
     }
 
+    pageRef.current = 1;
+    setHasMore(true);
+
     fetchModels({
-      page,
-      limit,
-      table_source: "cloud_model",
-      source: selectedProvider?.type,
-      modality: modalities,
-      supported_endpoints: endpoints,
+      page: 1,
+      limit: PAGE_SIZE,
+      ...getFilterParams(),
     }).then((data) => {
-      setModels(data);
+      const items = data || [];
+      setModels(items);
+      setHasMore(items.length >= PAGE_SIZE);
     });
-  }, [selectedProvider?.type, modalityType?.modalities, modalityType?.endpoints, page, limit, fetchModels]);
+  }, [
+    selectedProvider?.type,
+    modalityType?.modalities,
+    modalityType?.endpoints,
+    fetchModels,
+    getFilterParams,
+  ]);
+
+  const loadMore = useCallback(() => {
+    if (isLoadingMore || !hasMore || loading) return;
+
+    setIsLoadingMore(true);
+    const nextPage = pageRef.current + 1;
+
+    fetchModels({
+      page: nextPage,
+      limit: PAGE_SIZE,
+      ...getFilterParams(),
+    })
+      .then((data) => {
+        const items = data || [];
+        if (items.length > 0) {
+          setModels((prev) => [...prev, ...items]);
+          pageRef.current = nextPage;
+        }
+        setHasMore(items.length >= PAGE_SIZE);
+      })
+      .finally(() => {
+        setIsLoadingMore(false);
+      });
+  }, [isLoadingMore, hasMore, loading, fetchModels, getFilterParams]);
+
+  const handleScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      const target = e.currentTarget;
+      const { scrollTop, scrollHeight, clientHeight } = target;
+
+      if (scrollTop <= lastScrollTop.current) {
+        lastScrollTop.current = scrollTop;
+        return;
+      }
+      lastScrollTop.current = scrollTop;
+
+      const isNearBottom = scrollTop + clientHeight >= scrollHeight - 100;
+      if (isNearBottom) {
+        loadMore();
+      }
+    },
+    [loadMore],
+  );
 
   useEffect(() => {
     if (!selectedModel) {
@@ -96,7 +169,7 @@ export default function ModelList() {
         }
       }}
     >
-      <BudWraperBox>
+      <BudWraperBox onScroll={handleScroll}>
         <BudDrawerLayout>
           <DrawerTitleCard
             title={`Select a Model from ${selectedProvider?.name}`}
@@ -108,6 +181,7 @@ export default function ModelList() {
             setSelectedModel={setSelectedModel}
             selectedModel={selectedModel}
             hideSeeMore
+            isLoadingMore={isLoadingMore}
           >
             <ModelFilter
               search={search}
diff --git a/services/budadmin/src/pages/api/requests.ts b/services/budadmin/src/pages/api/requests.ts
@@ -47,6 +47,10 @@ axiosInstance.defaults.paramsSerializer = {
   serialize: serializeParams,
 };
 
+let lastNoInternetToast = 0;
+let lastSlowNetworkToast = 0;
+const NETWORK_TOAST_INTERVAL = 5 * 60 * 1000; // 5 minutes
+
 let Token = null;
 export let isRefreshing = false;
 export let refreshSubscribers: ((token: string) => void)[] = [];
@@ -70,13 +74,17 @@ if (typeof window !== "undefined") {
 
 axiosInstance.interceptors.request.use(
   async (config) => {
-    // ✅ Check Internet Connection
+    // ✅ Check Internet Connection (toast throttled to once per 5 minutes)
     if (typeof window !== "undefined" && !navigator.onLine) {
-      errorToast("No internet connection");
+      const now = Date.now();
+      if (now - lastNoInternetToast >= NETWORK_TOAST_INTERVAL) {
+        lastNoInternetToast = now;
+        errorToast("No internet connection");
+      }
       return Promise.reject(new Error("No internet connection"));
     }
 
-    // ✅ Optional: Network quality check
+    // ✅ Optional: Network quality check (toast throttled to once per 5 minutes)
     const connection =
       (navigator as any).connection ||
       (navigator as any)["mozConnection"] ||
@@ -88,8 +96,11 @@ axiosInstance.interceptors.request.use(
         ["2g", "slow-2g"].includes(effectiveType) || downlink < 0.5;
 
       if (slowConnection) {
-        errorToast("Network is too slow or throttled");
-        return Promise.reject(new Error("Poor network connection"));
+        const now = Date.now();
+        if (now - lastSlowNetworkToast >= NETWORK_TOAST_INTERVAL) {
+          lastSlowNetworkToast = now;
+          errorToast("Network is too slow or throttled");
+        }
       }
     }
 
diff --git a/services/budadmin/src/pages/home/modelRepo/index.tsx b/services/budadmin/src/pages/home/modelRepo/index.tsx
@@ -400,14 +400,14 @@ export default function ModelRepo() {
     }
   }, [filterReset]);
 
-  // Initial load
+  // Initial load - wait for permissions to be ready before fetching data
   useEffect(() => {
-    if (isMounted && hasPermission(PermissionEnum.ModelView)) {
+    if (isMounted && !loadingUser && hasPermission(PermissionEnum.ModelView)) {
       getTasks();
       getAuthors();
       load(filter, 1, false);
     }
-  }, [isMounted]);
+  }, [isMounted, loadingUser]);
 
   // Search with debounce
   useEffect(() => {
diff --git a/services/budadmin/src/pages/home/projects/index.tsx b/services/budadmin/src/pages/home/projects/index.tsx
@@ -81,13 +81,13 @@ const Projects = () => {
     }
   }, [getGlobalProjects, hasPermission, hideLoader, showLoader, setPageSize]);
 
-  // Initial load
+  // Initial load - wait for permissions to be ready before fetching data
   useEffect(() => {
-    if (isMounted) {
+    if (isMounted && !loadingUser) {
       setCurrentPage(1);
       load(1, pageSize);
     }
-  }, [isMounted, load, pageSize]);
+  }, [isMounted, loadingUser, load, pageSize]);
 
   // Search with debounce
   useEffect(() => {
