🗨️ refactor: Optimize Prompt Queries

feat: Refactor prompt and prompt group schemas; move types to separate file feat: Implement paginated access to prompt groups with filtering and public visibility refactor: Add PromptGroups context provider and integrate it into relevant components refactor: Optimize filter change handling and query invalidation in usePromptGroupsNav hook refactor: Simplify context usage in FilterPrompts and GroupSidePanel components
2025-12-17 00:40:14 +01:00 · 2025-08-11 22:06:15 -04:00 · 2025-08-11 22:06:15 -04:00 · dcd96c29c5
commit dcd96c29c5
parent 53c31b85d0
22 changed files with 583 additions and 259 deletions
--- a/client/src/Providers/PromptGroupsContext.tsx
+++ b/client/src/Providers/PromptGroupsContext.tsx
@ -0,0 +1,76 @@
+import React, { createContext, useContext, ReactNode, useMemo } from 'react';
+import type { TPromptGroup } from 'librechat-data-provider';
+import type { PromptOption } from '~/common';
+import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
+import { useGetAllPromptGroups } from '~/data-provider';
+import { usePromptGroupsNav } from '~/hooks';
+import { mapPromptGroups } from '~/utils';
+
+type AllPromptGroupsData =
+  | {
+      promptsMap: Record<string, TPromptGroup>;
+      promptGroups: PromptOption[];
+    }
+  | undefined;
+
+type PromptGroupsContextType =
+  | (ReturnType<typeof usePromptGroupsNav> & {
+      allPromptGroups: {
+        data: AllPromptGroupsData;
+        isLoading: boolean;
+      };
+    })
+  | null;
+
+const PromptGroupsContext = createContext<PromptGroupsContextType>(null);
+
+export const PromptGroupsProvider = ({ children }: { children: ReactNode }) => {
+  const promptGroupsNav = usePromptGroupsNav();
+  const { data: allGroupsData, isLoading: isLoadingAll } = useGetAllPromptGroups(undefined, {
+    select: (data) => {
+      const mappedArray: PromptOption[] = data.map((group) => ({
+        id: group._id ?? '',
+        type: 'prompt',
+        value: group.command ?? group.name,
+        label: `${group.command != null && group.command ? `/${group.command} - ` : ''}${
+          group.name
+        }: ${
+          (group.oneliner?.length ?? 0) > 0
+            ? group.oneliner
+            : (group.productionPrompt?.prompt ?? '')
+        }`,
+        icon: <CategoryIcon category={group.category ?? ''} className="h-5 w-5" />,
+      }));
+
+      const promptsMap = mapPromptGroups(data);
+
+      return {
+        promptsMap,
+        promptGroups: mappedArray,
+      };
+    },
+  });
+
+  const contextValue = useMemo(
+    () => ({
+      ...promptGroupsNav,
+      allPromptGroups: {
+        data: allGroupsData,
+        isLoading: isLoadingAll,
+      },
+    }),
+    [promptGroupsNav, allGroupsData, isLoadingAll],
+  );
+
+  return (
+    <PromptGroupsContext.Provider value={contextValue}>{children}</PromptGroupsContext.Provider>
+  );
+};
+
+export const usePromptGroupsContext = () => {
+  const context = useContext(PromptGroupsContext);
+  if (!context) {
+    throw new Error('usePromptGroupsContext must be used within a PromptGroupsProvider');
+  }
+  return context;
+};
--- a/client/src/Providers/index.ts
+++ b/client/src/Providers/index.ts
@ -24,4 +24,5 @@ export * from './SearchContext';
 export * from './BadgeRowContext';
 export * from './SidePanelContext';
 export * from './ArtifactsContext';
+export * from './PromptGroupsContext';
 export { default as BadgeRowProvider } from './BadgeRowContext';
--- a/client/src/components/Chat/Input/PromptsCommand.tsx
+++ b/client/src/components/Chat/Input/PromptsCommand.tsx
@ -5,11 +5,10 @@ import { useSetRecoilState, useRecoilValue } from 'recoil';
 import { PermissionTypes, Permissions } from 'librechat-data-provider';
 import type { TPromptGroup } from 'librechat-data-provider';
 import type { PromptOption } from '~/common';
-import { removeCharIfLast, mapPromptGroups, detectVariables } from '~/utils';
+import { removeCharIfLast, detectVariables } from '~/utils';
 import VariableDialog from '~/components/Prompts/Groups/VariableDialog';
-import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
+import { usePromptGroupsContext } from '~/Providers';
 import { useLocalize, useHasAccess } from '~/hooks';
-import { useGetAllPromptGroups } from '~/data-provider';
 import MentionItem from './MentionItem';
 import store from '~/store';

@ -60,30 +59,8 @@ function PromptsCommand({
    permission: Permissions.USE,
  });

-  const { data, isLoading } = useGetAllPromptGroups(undefined, {
-    enabled: hasAccess,
-    select: (data) => {
-      const mappedArray = data.map((group) => ({
-        id: group._id,
-        value: group.command ?? group.name,
-        label: `${group.command != null && group.command ? `/${group.command} - ` : ''}${
-          group.name
-        }: ${
-          (group.oneliner?.length ?? 0) > 0
-            ? group.oneliner
-            : (group.productionPrompt?.prompt ?? '')
-        }`,
-        icon: <CategoryIcon category={group.category ?? ''} className="h-5 w-5" />,
-      }));
-
-      const promptsMap = mapPromptGroups(data);
-
-      return {
-        promptsMap,
-        promptGroups: mappedArray,
-      };
-    },
-  });
+  const { allPromptGroups } = usePromptGroupsContext();
+  const { data, isLoading } = allPromptGroups;

  const [activeIndex, setActiveIndex] = useState(0);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
--- a/client/src/components/Chat/PromptCard.tsx
+++ b/client/src/components/Chat/PromptCard.tsx
@ -1,15 +0,0 @@
-import { TPromptGroup } from 'librechat-data-provider';
-import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
-
-export default function PromptCard({ promptGroup }: { promptGroup?: TPromptGroup }) {
-  return (
-    <div className="hover:bg-token-main-surface-secondary relative flex w-40 cursor-pointer flex-col gap-2 rounded-2xl border px-3 pb-4 pt-3 text-start align-top text-[15px] shadow-[0_0_2px_0_rgba(0,0,0,0.05),0_4px_6px_0_rgba(0,0,0,0.02)] transition-colors duration-300 ease-in-out fade-in hover:bg-slate-100 dark:border-gray-600 dark:hover:bg-gray-700">
-      <div className="">
-        <CategoryIcon className="size-4" category={promptGroup?.category ?? ''} />
-      </div>
-      <p className="break-word line-clamp-3 text-balance text-gray-600 dark:text-gray-400">
-        {(promptGroup?.oneliner ?? '') || promptGroup?.productionPrompt?.prompt}
-      </p>
-    </div>
-  );
-}
--- a/client/src/components/Chat/Prompts.tsx
+++ b/client/src/components/Chat/Prompts.tsx
@ -1,96 +0,0 @@
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { usePromptGroupsNav } from '~/hooks';
-import PromptCard from './PromptCard';
-import { Button } from '../ui';
-
-export default function Prompts() {
-  const { prevPage, nextPage, hasNextPage, promptGroups, hasPreviousPage, setPageSize, pageSize } =
-    usePromptGroupsNav();
-
-  const renderPromptCards = (start = 0, count) => {
-    return promptGroups
-      .slice(start, count + start)
-      .map((promptGroup) => <PromptCard key={promptGroup._id} promptGroup={promptGroup} />);
-  };
-
-  const getRows = () => {
-    switch (pageSize) {
-      case 4:
-        return [4];
-      case 8:
-        return [4, 4];
-      case 12:
-        return [4, 4, 4];
-      default:
-        return [];
-    }
-  };
-
-  const rows = getRows();
-
-  return (
-    <div className="mx-3 flex h-full max-w-3xl flex-col items-stretch justify-center gap-4">
-      <div className="mt-2 flex justify-end gap-2">
-        <Button
-          variant={'ghost'}
-          onClick={() => setPageSize(4)}
-          className={`rounded px-3 py-2 hover:bg-transparent ${
-            pageSize === 4 ? 'text-white' : 'text-gray-500 dark:text-gray-500'
-          }`}
-        >
-          4
-        </Button>
-        <Button
-          variant={'ghost'}
-          onClick={() => setPageSize(8)}
-          className={`rounded px-3 py-2 hover:bg-transparent ${
-            pageSize === 8 ? 'text-white' : 'text-gray-500 dark:text-gray-500'
-          }`}
-        >
-          8
-        </Button>
-        <Button
-          variant={'ghost'}
-          onClick={() => setPageSize(12)}
-          className={`rounded p-2 hover:bg-transparent ${
-            pageSize === 12 ? 'text-white' : 'text-gray-500 dark:text-gray-500'
-          }`}
-        >
-          12
-        </Button>
-      </div>
-      <div className="flex h-full flex-col items-start gap-2">
-        <div
-          className={
-            'flex min-h-[121.1px] min-w-full max-w-3xl flex-col gap-4 overflow-y-auto md:min-w-[22rem] lg:min-w-[43rem]'
-          }
-        >
-          {rows.map((rowSize, index) => (
-            <div key={index} className="flex flex-wrap justify-center gap-4">
-              {renderPromptCards(rowSize * index, rowSize)}
-            </div>
-          ))}
-        </div>
-        <div className="flex w-full justify-between">
-          <Button
-            variant={'ghost'}
-            onClick={prevPage}
-            disabled={!hasPreviousPage}
-            className="m-0 self-start p-0 hover:bg-transparent"
-            aria-label="previous"
-          >
-            <ChevronLeft className={`${hasPreviousPage ? '' : 'text-gray-500'}`} />
-          </Button>
-          <Button
-            variant={'ghost'}
-            onClick={nextPage}
-            disabled={!hasNextPage}
-            className="m-0 self-end p-0 hover:bg-transparent"
-          >
-            <ChevronRight className={`${hasNextPage ? '' : 'text-gray-500'}`} />
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/client/src/components/Prompts/Groups/FilterPrompts.tsx
+++ b/client/src/components/Prompts/Groups/FilterPrompts.tsx
@ -1,25 +1,21 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import { useRecoilState } from 'recoil';
 import { ListFilter, User, Share2 } from 'lucide-react';
 import { SystemCategories } from 'librechat-data-provider';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { Dropdown, AnimatedSearchInput } from '@librechat/client';
 import type { Option } from '~/common';
-import { usePromptGroupsNav, useLocalize, useCategories } from '~/hooks';
+import { useLocalize, useCategories } from '~/hooks';
+import { usePromptGroupsContext } from '~/Providers';
 import { cn } from '~/utils';
 import store from '~/store';

-export default function FilterPrompts({
-  setName,
-  className = '',
-}: Pick<ReturnType<typeof usePromptGroupsNav>, 'setName'> & {
-  className?: string;
-}) {
+export default function FilterPrompts({ className = '' }: { className?: string }) {
  const localize = useLocalize();
-  const [displayName, setDisplayName] = useState('');
-  const setCategory = useSetRecoilState(store.promptsCategory);
-  const categoryFilter = useRecoilValue(store.promptsCategory);
+  const { setName } = usePromptGroupsContext();
  const { categories } = useCategories('h-4 w-4');
+  const [displayName, setDisplayName] = useState('');
  const [isSearching, setIsSearching] = useState(false);
+  const [categoryFilter, setCategory] = useRecoilState(store.promptsCategory);

  const filterOptions = useMemo(() => {
    const baseOptions: Option[] = [
--- a/client/src/components/Prompts/Groups/GroupSidePanel.tsx
+++ b/client/src/components/Prompts/Groups/GroupSidePanel.tsx
@ -3,30 +3,31 @@ import { useLocation } from 'react-router-dom';
 import { useMediaQuery } from '@librechat/client';
 import PanelNavigation from '~/components/Prompts/Groups/PanelNavigation';
 import ManagePrompts from '~/components/Prompts/ManagePrompts';
+import { usePromptGroupsContext } from '~/Providers';
 import List from '~/components/Prompts/Groups/List';
-import { usePromptGroupsNav } from '~/hooks';
 import { cn } from '~/utils';

 export default function GroupSidePanel({
  children,
  isDetailView,
  className = '',
-  /* usePromptGroupsNav */
-  nextPage,
-  prevPage,
-  isFetching,
-  hasNextPage,
-  groupsQuery,
-  promptGroups,
-  hasPreviousPage,
 }: {
  children?: React.ReactNode;
  isDetailView?: boolean;
  className?: string;
-} & ReturnType<typeof usePromptGroupsNav>) {
+}) {
  const location = useLocation();
  const isSmallerScreen = useMediaQuery('(max-width: 1024px)');
  const isChatRoute = useMemo(() => location.pathname?.startsWith('/c/'), [location.pathname]);
+  const {
+    nextPage,
+    prevPage,
+    isFetching,
+    hasNextPage,
+    groupsQuery,
+    promptGroups,
+    hasPreviousPage,
+  } = usePromptGroupsContext();

  return (
    <div
--- a/client/src/components/Prompts/PromptForm.tsx
+++ b/client/src/components/Prompts/PromptForm.tsx
@ -3,10 +3,15 @@ import React from 'react';
 import debounce from 'lodash/debounce';
 import { useRecoilValue } from 'recoil';
 import { Menu, Rocket } from 'lucide-react';
+import { useParams } from 'react-router-dom';
 import { useForm, FormProvider } from 'react-hook-form';
-import { useParams, useOutletContext } from 'react-router-dom';
 import { Button, Skeleton, useToastContext } from '@librechat/client';
-import { Permissions, PermissionTypes, PermissionBits } from 'librechat-data-provider';
+import {
+  Permissions,
+  ResourceType,
+  PermissionBits,
+  PermissionTypes,
+} from 'librechat-data-provider';
 import type { TCreatePrompt, TPrompt, TPromptGroup } from 'librechat-data-provider';
 import {
  useGetPrompts,
@ -15,8 +20,9 @@ import {
  useUpdatePromptGroup,
  useMakePromptProduction,
 } from '~/data-provider';
-import { useResourcePermissions, usePromptGroupsNav, useHasAccess, useLocalize } from '~/hooks';
+import { useResourcePermissions, useHasAccess, useLocalize } from '~/hooks';
 import CategorySelector from './Groups/CategorySelector';
+import { usePromptGroupsContext } from '~/Providers';
 import NoPromptGroup from './Groups/NoPromptGroup';
 import PromptVariables from './PromptVariables';
 import { cn, findPromptGroup } from '~/utils';
@ -173,16 +179,14 @@ const PromptForm = () => {
  const [showSidePanel, setShowSidePanel] = useState(false);
  const sidePanelWidth = '320px';

-  // Fetch group early so it is available for later hooks.
  const { data: group, isLoading: isLoadingGroup } = useGetPromptGroup(promptId);
  const { data: prompts = [], isLoading: isLoadingPrompts } = useGetPrompts(
    { groupId: promptId },
    { enabled: !!promptId },
  );

-  // Check permissions for the promptGroup
  const { hasPermission, isLoading: permissionsLoading } = useResourcePermissions(
-    'promptGroup',
+    ResourceType.PROMPTGROUP,
    group?._id || '',
  );

@ -206,7 +210,7 @@ const PromptForm = () => {

  const selectedPromptId = useMemo(() => selectedPrompt?._id, [selectedPrompt?._id]);

-  const { groupsQuery } = useOutletContext<ReturnType<typeof usePromptGroupsNav>>();
+  const { groupsQuery } = usePromptGroupsContext();

  const updateGroupMutation = useUpdatePromptGroup({
    onError: () => {
--- a/client/src/components/Prompts/PromptsAccordion.tsx
+++ b/client/src/components/Prompts/PromptsAccordion.tsx
@ -1,10 +1,10 @@
 import PromptSidePanel from '~/components/Prompts/Groups/GroupSidePanel';
 import AutoSendPrompt from '~/components/Prompts/Groups/AutoSendPrompt';
 import FilterPrompts from '~/components/Prompts/Groups/FilterPrompts';
-import { usePromptGroupsNav } from '~/hooks';
+import { usePromptGroupsContext } from '~/Providers';

 export default function PromptsAccordion() {
-  const groupsNav = usePromptGroupsNav();
+  const groupsNav = usePromptGroupsContext();
  return (
    <div className="flex h-full w-full flex-col">
      <PromptSidePanel className="mt-2 space-y-2 lg:w-full xl:w-full" {...groupsNav}>
--- a/client/src/components/Prompts/PromptsView.tsx
+++ b/client/src/components/Prompts/PromptsView.tsx
@ -3,14 +3,14 @@ import { Outlet, useParams, useNavigate } from 'react-router-dom';
 import { PermissionTypes, Permissions } from 'librechat-data-provider';
 import FilterPrompts from '~/components/Prompts/Groups/FilterPrompts';
 import DashBreadcrumb from '~/routes/Layouts/DashBreadcrumb';
-import { usePromptGroupsNav, useHasAccess } from '~/hooks';
 import GroupSidePanel from './Groups/GroupSidePanel';
+import { PromptGroupsProvider } from '~/Providers';
+import { useHasAccess } from '~/hooks';
 import { cn } from '~/utils';

 export default function PromptsView() {
  const params = useParams();
  const navigate = useNavigate();
-  const groupsNav = usePromptGroupsNav();
  const isDetailView = useMemo(() => !!(params.promptId || params['*'] === 'new'), [params]);
  const hasAccess = useHasAccess({
    permissionType: PermissionTypes.PROMPTS,
@ -34,23 +34,25 @@ export default function PromptsView() {
  }

  return (
-    <div className="flex h-screen w-full flex-col bg-surface-primary p-0 lg:p-2">
-      <DashBreadcrumb />
-      <div className="flex w-full flex-grow flex-row divide-x overflow-hidden dark:divide-gray-600">
-        <GroupSidePanel isDetailView={isDetailView} {...groupsNav}>
-          <div className="mx-2 mt-1 flex flex-row items-center justify-between">
-            <FilterPrompts setName={groupsNav.setName} />
+    <PromptGroupsProvider>
+      <div className="flex h-screen w-full flex-col bg-surface-primary p-0 lg:p-2">
+        <DashBreadcrumb />
+        <div className="flex w-full flex-grow flex-row divide-x overflow-hidden dark:divide-gray-600">
+          <GroupSidePanel isDetailView={isDetailView}>
+            <div className="mx-2 mt-1 flex flex-row items-center justify-between">
+              <FilterPrompts />
+            </div>
+          </GroupSidePanel>
+          <div
+            className={cn(
+              'scrollbar-gutter-stable w-full overflow-y-auto lg:w-3/4 xl:w-3/4',
+              isDetailView ? 'block' : 'hidden md:block',
+            )}
+          >
+            <Outlet />
          </div>
-        </GroupSidePanel>
-        <div
-          className={cn(
-            'scrollbar-gutter-stable w-full overflow-y-auto lg:w-3/4 xl:w-3/4',
-            isDetailView ? 'block' : 'hidden md:block',
-          )}
-        >
-          <Outlet context={groupsNav} />
        </div>
      </div>
-    </div>
+    </PromptGroupsProvider>
  );
 }
--- a/client/src/hooks/Prompts/usePromptGroupsNav.ts
+++ b/client/src/hooks/Prompts/usePromptGroupsNav.ts
@ -1,10 +1,10 @@
+import { useMemo, useRef, useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { useMemo, useRef, useEffect, useCallback } from 'react';
 import { usePromptGroupsInfiniteQuery } from '~/data-provider';
-import debounce from 'lodash/debounce';
-import store from '~/store';
 import { useQueryClient } from '@tanstack/react-query';
 import { QueryKeys } from 'librechat-data-provider';
+import debounce from 'lodash/debounce';
+import store from '~/store';

 export default function usePromptGroupsNav() {
  const queryClient = useQueryClient();
@ -14,6 +14,7 @@ export default function usePromptGroupsNav() {
  const [pageNumber, setPageNumber] = useRecoilState(store.promptsPageNumber);

  const maxPageNumberReached = useRef(1);
+  const prevFiltersRef = useRef({ name, category, pageSize });

  useEffect(() => {
    if (pageNumber > 1 && pageNumber > maxPageNumberReached.current) {
@ -29,10 +30,25 @@ export default function usePromptGroupsNav() {
  });

  useEffect(() => {
+    const filtersChanged =
+      prevFiltersRef.current.name !== name ||
+      prevFiltersRef.current.category !== category ||
+      prevFiltersRef.current.pageSize !== pageSize;
+
+    if (!filtersChanged) {
+      return;
+    }
    maxPageNumberReached.current = 1;
    setPageNumber(1);
-    queryClient.resetQueries([QueryKeys.promptGroups, name, category, pageSize]);
-  }, [pageSize, name, category, setPageNumber]);
+
+    // Only reset queries if we're not already on page 1
+    // This prevents double queries when filters change
+    if (pageNumber !== 1) {
+      queryClient.invalidateQueries([QueryKeys.promptGroups, name, category, pageSize]);
+    }
+
+    prevFiltersRef.current = { name, category, pageSize };
+  }, [pageSize, name, category, setPageNumber, pageNumber, queryClient]);

  const promptGroups = useMemo(() => {
    return groupsQuery.data?.pages[pageNumber - 1 + '']?.promptGroups || [];
@ -52,10 +68,11 @@ export default function usePromptGroupsNav() {
  const hasNextPage = !!groupsQuery.hasNextPage || maxPageNumberReached.current > pageNumber;
  const hasPreviousPage = !!groupsQuery.hasPreviousPage || pageNumber > 1;

-  const debouncedSetName = useCallback(
-    debounce((nextValue: string) => {
-      setName(nextValue);
-    }, 850),
+  const debouncedSetName = useMemo(
+    () =>
+      debounce((nextValue: string) => {
+        setName(nextValue);
+      }, 850),
    [setName],
  );

--- a/client/src/routes/Root.tsx
+++ b/client/src/routes/Root.tsx
@ -9,6 +9,7 @@ import {
  useFileMap,
 } from '~/hooks';
 import {
+  PromptGroupsProvider,
  AssistantsMapContext,
  AgentsMapContext,
  SetConvoProvider,
@ -68,16 +69,18 @@ export default function Root() {
      <FileMapContext.Provider value={fileMap}>
        <AssistantsMapContext.Provider value={assistantsMap}>
          <AgentsMapContext.Provider value={agentsMap}>
-            <Banner onHeightChange={setBannerHeight} />
-            <div className="flex" style={{ height: `calc(100dvh - ${bannerHeight}px)` }}>
-              <div className="relative z-0 flex h-full w-full overflow-hidden">
-                <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
-                <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
-                  <MobileNav setNavVisible={setNavVisible} />
-                  <Outlet context={{ navVisible, setNavVisible } satisfies ContextType} />
+            <PromptGroupsProvider>
+              <Banner onHeightChange={setBannerHeight} />
+              <div className="flex" style={{ height: `calc(100dvh - ${bannerHeight}px)` }}>
+                <div className="relative z-0 flex h-full w-full overflow-hidden">
+                  <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
+                  <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
+                    <MobileNav setNavVisible={setNavVisible} />
+                    <Outlet context={{ navVisible, setNavVisible } satisfies ContextType} />
+                  </div>
                </div>
              </div>
-            </div>
+            </PromptGroupsProvider>
          </AgentsMapContext.Provider>
          {config?.interface?.termsOfService?.modalAcceptance === true && (
            <TermsAndConditionsModal