fixed request page hook (#2724)

* fixed request page hook

* fix build

* signin page imports

* fix build

web/components/layout/auth/DesktopSidebar.tsx

@@ -135,12 +135,12 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
       <div
         ref={sidebarRef}
         className={cn(
-          "hidden md:flex md:flex-col z-30 bg-background dark:bg-gray-900 transition-all duration-300 h-screen bg-white pb-4",
+          "hidden md:flex md:flex-col z-30 bg-background dark:bg-gray-900 transition-all duration-300 h-screen bg-white ",
           largeWith,
           "fixed top-0 left-0"
         )}
       >
-        <div className="w-full flex flex-grow flex-col overflow-y-auto border-r dark:border-gray-700 justify-between">
+        <div className="w-full flex flex-grow flex-col overflow-y-auto border-r  dark:border-gray-700 justify-between pb-4">
           <div className="flex items-center gap-2 h-14 border-b dark:border-gray-700">
             <div className="flex items-center gap-2 w-full">
               {!isCollapsed && <OrgDropdown />}

web/components/shared/themed/themedTextDropDown.tsx

@@ -8,6 +8,7 @@ import {
 } from "@tremor/react";
 import { useState } from "react";
 import { Result } from "../../../lib/result";
+import clsx from "clsx";
 
 interface ThemedTextDropDownProps {
   options: string[];
@@ -44,7 +45,12 @@ export function ThemedTextDropDown(props: ThemedTextDropDownProps) {
               <TabList variant="solid" defaultValue="1">
                 <Tab
                   value="1"
-                  className="text-xs px-2 py-0.5"
+                  className={clsx(
+                    tabMode === "smart"
+                      ? "bg-sky-100 dark:bg-sky-900"
+                      : "bg-gray-200",
+                    "text-xs px-2 py-0.5"
+                  )}
                   onClick={() => {
                     setTabMode("smart");
                   }}
@@ -53,7 +59,12 @@ export function ThemedTextDropDown(props: ThemedTextDropDownProps) {
                 </Tab>
                 <Tab
                   value="2"
-                  className="text-xs px-2 py-0.5"
+                  className={clsx(
+                    tabMode === "raw"
+                      ? "bg-sky-100 dark:bg-sky-900"
+                      : "bg-gray-200",
+                    "text-xs px-2 py-0.5"
+                  )}
                   onClick={() => {
                     setTabMode("raw");
                   }}
@@ -82,7 +93,7 @@ export function ThemedTextDropDown(props: ThemedTextDropDownProps) {
             await onSearchHandler?.(query);
           }}
         >
-          {[value, ...Array.from(new Set([...parentOptions, query]))]
+          {Array.from(new Set([value, ...parentOptions, query]))
             .filter(Boolean)
             .sort()
             .map((option, i) => (

web/components/templates/requestsV2/requestsPageV2.tsx

@@ -282,7 +282,6 @@ const RequestsPageV2 = (props: RequestsPageV2Props) => {
     refetch,
     filterMap,
     searchPropertyFilters,
-    remove,
   } = useRequestsPageV2(
     page,
     currentPageSize,

web/components/templates/requestsV2/useRequestsPageV2.tsx

@@ -55,12 +55,16 @@ const useRequestsPageV2 = (
     filterMap[modelFilterIdx] = {
       label: "Model",
       operators: textWithSuggestions(
-        models?.data
-          ?.filter((model) => model.model)
-          .map((model) => ({
-            key: model.model,
-            param: model.model,
-          })) || []
+        Array.from(
+          new Set(
+            models?.data
+              ?.filter((model) => model.model)
+              .map((model) => model.model)
+          )
+        ).map((modelName) => ({
+          key: modelName,
+          param: modelName,
+        })) || []
       ),
       table: "request_response_rmt",
       column: "model",
@@ -97,7 +101,6 @@ const useRequestsPageV2 = (
     isCountLoading: count.isLoading,
     properties,
     refetch: requests.refetch,
-    remove: requests.remove,
     searchPropertyFilters,
     filterMap,
     filter,

web/services/hooks/requests.tsx

@@ -1,16 +1,16 @@
 import { useQueries, useQuery } from "@tanstack/react-query";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useOrg } from "../../components/layout/organizationContext";
+import {
+  getModelFromPath,
+  mapGeminiPro,
+} from "../../components/templates/requestsV2/builder/mappers/geminiMapper";
 import { HeliconeRequest } from "../../lib/api/request/request";
 import { getJawnClient } from "../../lib/clients/jawn";
 import { Result } from "../../lib/result";
 import { FilterNode } from "../lib/filters/filterDefs";
 import { placeAssetIdValues } from "../lib/requestTraverseHelper";
 import { SortLeafRequest } from "../lib/sorts/requests/sorts";
-import {
-  getModelFromPath,
-  mapGeminiPro,
-} from "../../components/templates/requestsV2/builder/mappers/geminiMapper";
 
 function formatDateForClickHouse(date: Date): string {
   return date.toISOString().slice(0, 19).replace("T", " ");
@@ -47,7 +47,6 @@ const useGetRequestsWithBodies = (
   isCached: boolean = false
 ) => {
   const org = useOrg();
-  const [requests, setRequests] = useState<HeliconeRequest[]>([]);
 
   const { data, isLoading, refetch, isRefetching } = useQuery({
     queryKey: [
@@ -88,7 +87,7 @@ const useGetRequestsWithBodies = (
   const requestsWithSignedUrls = useMemo(() => data?.data ?? [], [data]);
 
   const urlQueries = useQueries({
-    queries: requestsWithSignedUrls.map((request, index: number) => ({
+    queries: requestsWithSignedUrls.map((request) => ({
       queryKey: ["request-content", request.signed_body_url],
       queryFn: async () => {
         if (requestBodyCache.has(request.request_id)) {
@@ -112,49 +111,43 @@ const useGetRequestsWithBodies = (
       },
       keepPreviousData: true,
       enabled: !!request.signed_body_url,
-      onSuccess: (content: any) => {
-        if (content) {
-          setRequests((prev) => {
-            const newRequests = [...prev];
-            const model =
-              request.model_override ||
-              request.response_model ||
-              request.request_model ||
-              content.response?.model ||
-              content.request?.model ||
-              content.response?.body?.model ||
-              getModelFromPath(request.target_url) ||
-              "";
+    })),
+  });
 
-            let updatedRequest = {
-              ...newRequests[index],
-              request_body: content.request,
-              response_body: content.response,
-            };
+  const requests = useMemo(() => {
+    return requestsWithSignedUrls.map((request, index) => {
+      const content = urlQueries[index].data;
+      if (!content) return request;
 
-            if (
-              request.provider === "GOOGLE" &&
-              model.toLowerCase().includes("gemini")
-            ) {
-              updatedRequest.llmSchema = mapGeminiPro(
-                updatedRequest as HeliconeRequest,
-                model
-              );
-            }
+      const model =
+        request.model_override ||
+        request.response_model ||
+        request.request_model ||
+        content.response?.model ||
+        content.request?.model ||
+        content.response?.body?.model ||
+        getModelFromPath(request.target_url) ||
+        "";
 
-            newRequests[index] = updatedRequest;
-            return newRequests;
-          });
-        }
-      },
-    })),
-  });
+      let updatedRequest = {
+        ...request,
+        request_body: content.request,
+        response_body: content.response,
+      };
 
-  useEffect(() => {
-    if (!isLoading && requests.length === 0) {
-      setRequests(requestsWithSignedUrls);
-    }
-  }, [requestsWithSignedUrls, isLoading]);
+      if (
+        request.provider === "GOOGLE" &&
+        model.toLowerCase().includes("gemini")
+      ) {
+        updatedRequest.llmSchema = mapGeminiPro(
+          updatedRequest as HeliconeRequest,
+          model
+        );
+      }
+
+      return updatedRequest;
+    });
+  }, [requestsWithSignedUrls, urlQueries]);
 
   const isUrlsFetching = urlQueries.some((query) => query.isFetching);
 
@@ -165,9 +158,6 @@ const useGetRequestsWithBodies = (
     requests: requests,
     completedQueries: urlQueries.filter((query) => query.isSuccess).length,
     totalQueries: requestsWithSignedUrls.length,
-    remove: () => {
-      setRequests([]);
-    },
   };
 };