Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-25 11:46:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🔧 fix: Merge and Rebase Conflicts

Browse source 
- Move AgentCategory from api/models to @packages/data-schemas structure
  - Add schema, types, methods, and model following codebase conventions
  - Implement auto-seeding of default categories during AppService startup
  - Update marketplace controller to use new data-schemas methods
  - Remove old model file and standalone seed script

refactor: unify agent marketplace to single endpoint with cursor pagination

  - Replace multiple marketplace routes with unified /marketplace endpoint
  - Add query string controls: category, search, limit, cursor, promoted, requiredPermission
  - Implement cursor-based pagination replacing page-based system
  - Integrate ACL permissions for proper access control
  - Fix ObjectId constructor error in Agent model
  - Update React components to use unified useGetMarketplaceAgentsQuery hook
  - Enhance type safety and remove deprecated useDynamicAgentQuery
  - Update tests for new marketplace architecture
  -Known issues:
  see more button after category switching + Unit tests

feat: add icon property to ProcessedAgentCategory interface

- Add useMarketplaceAgentsInfiniteQuery and useGetAgentCategoriesQuery to client/src/data-provider/Agents/
  - Replace manual pagination in AgentGrid with infinite query pattern
  - Update imports to use local data provider instead of librechat-data-provider
  - Add proper permission handling with PERMISSION_BITS.VIEW/EDIT constants
  - Improve agent access control by adding requiredPermission validation in backend
  - Remove manual cursor/state management in favor of infinite query built-ins
  - Maintain existing search and category filtering functionality

refactor: consolidate agent marketplace endpoints into main agents API and improve data management consistency

  - Remove dedicated marketplace controller and routes, merging functionality into main agents v1 API
  - Add countPromotedAgents function to Agent model for promoted agents count
  - Enhance getListAgents handler with marketplace filtering (category, search, promoted status)
  - Move getAgentCategories from marketplace to v1 controller with same functionality
  - Update agent mutations to invalidate marketplace queries and handle multiple permission levels
  - Improve cache management by updating all agent query variants (VIEW/EDIT permissions)
  - Consolidate agent data access patterns for better maintainability and consistency
  - Remove duplicate marketplace route definitions and middleware

selected view only agents injected in the drop down

fix: remove minlength validation for support contact name in agent schema

feat: add validation and error messages for agent name in AgentConfig and AgentPanel

fix: update agent permission check logic in AgentPanel to simplify condition

Fix linting WIP

Fix Unit tests WIP

ESLint fixes

eslint fix

refactor: enhance isDuplicateVersion function in Agent model for improved comparison logic

- Introduced handling for undefined/null values in array and object comparisons.
- Normalized array comparisons to treat undefined/null as empty arrays.
- Added deep comparison for objects and improved handling of primitive values.
- Enhanced projectIds comparison to ensure consistent MongoDB ObjectId handling.

refactor: remove redundant properties from IAgent interface in agent schema

chore: update localization for agent detail component and clean up imports

ci: update access middleware tests

chore: remove unused PermissionTypes import from Role model

ci: update AclEntry model tests

ci: update button accessibility labels in AgentDetail tests

refactor: update exhaustive dep. lint warning
This commit is contained in:
Atef Bellaaj 2025-06-13 15:06:36 +02:00 • committed by Danny Avila
parent f59ef0ecb0
commit 526b1980bc
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
60 changed files with 1524 additions and 2004 deletions
Download patch file Download diff file Expand all files Collapse all files

1
client/package.json
View file

@ -4,6 +4,7 @@
"description": "",
"type": "module",
"scripts": {
"typecheck": "tsc --noEmit",
"data-provider": "cd .. && npm run build:data-provider",
"build:file": "cross-env NODE_ENV=production vite build --debug > vite-output.log 2>&1",
"build": "cross-env NODE_ENV=production vite build && node ./scripts/post-build.cjs",

13
client/src/common/agents-types.ts
View file

@ -1,5 +1,10 @@
import { AgentCapabilities, ArtifactModes } from 'librechat-data-provider';
import type { Agent, AgentProvider, AgentModelParameters } from 'librechat-data-provider';
import type {
Agent,
AgentProvider,
AgentModelParameters,
SupportContact,
} from 'librechat-data-provider';
import type { OptionWithIcon, ExtendedFile } from './types';
export type TAgentOption = OptionWithIcon &
@ -18,11 +23,6 @@ export type TAgentCapabilities = {
[AgentCapabilities.hide_sequential_outputs]?: boolean;
};
export type SupportContact = {
name?: string;
email?: string;
};
export type AgentForm = {
agent?: TAgentOption;
id: string;
@ -37,4 +37,5 @@ export type AgentForm = {
[AgentCapabilities.artifacts]?: ArtifactModes | string;
recursion_limit?: number;
support_contact?: SupportContact;
category: string;
} & TAgentCapabilities;

13
client/src/components/Nav/NewChat.tsx
View file

@ -1,17 +1,9 @@
import React, { useCallback, useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { useNavigate } from 'react-router-dom';
import { useQueryClient } from '@tanstack/react-query';
import {
QueryKeys,
Constants,
EModelEndpoint,
PermissionTypes,
Permissions,
} from 'librechat-data-provider';
import type { TMessage, TStartupConfig } from 'librechat-data-provider';
import { QueryKeys, Constants, PermissionTypes, Permissions } from 'librechat-data-provider';
import type { TMessage } from 'librechat-data-provider';
import { NewChatIcon, MobileSidebar, Sidebar } from '~/components/svg';
import { getDefaultModelSpec, getModelSpecPreset } from '~/utils';
import { TooltipAnchor, Button } from '~/components/ui';
import { useLocalize, useNewConvo, useHasAccess } from '~/hooks';
import { AuthContext } from '~/hooks/AuthContext';
@ -37,7 +29,6 @@ export default function NewChat({
const navigate = useNavigate();
const localize = useLocalize();
const { conversation } = store.useCreateConversationAtom(index);
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const authContext = useContext(AuthContext);
const hasAccessToAgents = useHasAccess({
permissionType: PermissionTypes.AGENTS,

50
client/src/components/SidePanel/Agents/AgentAvatar.tsx
View file

@ -14,7 +14,12 @@ import type {
AgentCreateParams,
AgentListResponse,
} from 'librechat-data-provider';
import { useUploadAgentAvatarMutation, useGetFileConfig } from '~/data-provider';
import {
useUploadAgentAvatarMutation,
useGetFileConfig,
allAgentViewAndEditQueryKeys,
invalidateAgentMarketplaceQueries,
} from '~/data-provider';
import { AgentAvatarRender, NoImage, AvatarMenu } from './Images';
import { useToastContext } from '~/Providers';
import { useLocalize } from '~/hooks';
@ -57,30 +62,31 @@ function Avatar({
const newUrl = data.avatar?.filepath ?? '';
setPreviewUrl(newUrl);
const res = queryClient.getQueryData<AgentListResponse>([
QueryKeys.agents,
defaultOrderQuery,
]);
((keys) => {
keys.forEach((key) => {
const res = queryClient.getQueryData<AgentListResponse>([QueryKeys.agents, key]);
if (!res?.data) {
return;
}
if (!res?.data) {
return;
}
const agents = res.data.map((agent) => {
if (agent.id === agent_id) {
return {
...agent,
...data,
};
}
return agent;
});
queryClient.setQueryData<AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
...res,
data: agents,
});
const agents = res.data.map((agent) => {
if (agent.id === agent_id) {
return {
...agent,
...data,
};
}
return agent;
});
queryClient.setQueryData<AgentListResponse>([QueryKeys.agents, key], {
...res,
data: agents,
});
});
})(allAgentViewAndEditQueryKeys);
invalidateAgentMarketplaceQueries(queryClient);
setProgress(1);
},
onError: (error) => {

11
client/src/components/SidePanel/Agents/AgentCategorySelector.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
useFormContext,
@ -10,7 +10,6 @@ import {
} from 'react-hook-form';
import ControlCombobox from '~/components/ui/ControlCombobox';
import { useAgentCategories } from '~/hooks/Agents';
import { OptionWithIcon } from '~/common/types';
import { cn } from '~/utils';
/**
@ -20,7 +19,9 @@ const useCategorySync = (agent_id: string | null) => {
const [handled, setHandled] = useState(false);
return {
syncCategory: (field: ControllerRenderProps<FieldValues, FieldPath<FieldValues>>) => {
syncCategory: <T extends FieldPath<FieldValues>>(
field: ControllerRenderProps<FieldValues, T>,
) => {
// Only run once and only for new agents
if (!handled && agent_id === '' && !field.value) {
field.onChange('general');
@ -33,7 +34,7 @@ const useCategorySync = (agent_id: string | null) => {
/**
* A component for selecting agent categories with form validation
*/
const AgentCategorySelector: React.FC = () => {
const AgentCategorySelector: React.FC<{ className?: string }> = ({ className }) => {
const { t } = useTranslation();
const formContext = useFormContext();
const { categories } = useAgentCategories();
@ -81,7 +82,7 @@ const AgentCategorySelector: React.FC = () => {
field.onChange(value);
}}
items={comboboxItems}
className=""
className={cn(className)}
ariaLabel={ariaLabel}
isCollapsed={false}
showCarat={true}

37
client/src/components/SidePanel/Agents/AgentConfig.tsx
View file

@ -39,7 +39,10 @@ export default function AgentConfig({
const [showToolDialog, setShowToolDialog] = useState(false);
const { actions, setAction, groupedTools: allTools, setActivePanel } = useAgentPanelContext();
const { control } = methods;
const {
control,
formState: { errors },
} = methods;
const provider = useWatch({ control, name: 'provider' });
const model = useWatch({ control, name: 'model' });
const agent = useWatch({ control, name: 'agent' });
@ -190,21 +193,33 @@ export default function AgentConfig({
/>
<label className={labelClass} htmlFor="name">
{localize('com_ui_name')}
<span className="text-red-500">*</span>
</label>
<Controller
name="name"
rules={{ required: localize('com_ui_agent_name_is_required') }}
control={control}
render={({ field }) => (
<input
{...field}
value={field.value ?? ''}
maxLength={256}
className={inputClass}
id="name"
type="text"
placeholder={localize('com_agents_name_placeholder')}
aria-label="Agent name"
/>
<>
<input
{...field}
value={field.value ?? ''}
maxLength={256}
className={inputClass}
id="name"
type="text"
placeholder={localize('com_agents_name_placeholder')}
aria-label="Agent name"
/>
<div
className={cn(
'mt-1 w-56 text-sm text-red-500',
errors.name ? 'visible h-auto' : 'invisible h-0',
)}
>
{errors.name ? errors.name.message : ' '}
</div>
</>
)}
/>
<Controller

33
client/src/components/SidePanel/Agents/AgentDetail.tsx
View file

@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import type t from 'librechat-data-provider';
import { AgentListResponse, PERMISSION_BITS, QueryKeys } from 'librechat-data-provider';
interface SupportContact {
name?: string;
email?: string;
@ -12,19 +12,12 @@ interface AgentWithSupport extends t.Agent {
support_contact?: SupportContact;
}
import useLocalize from '~/hooks/useLocalize';
import { useToast } from '~/hooks';
import {
Dialog,
DialogContent,
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '~/components/ui';
import { DotsIcon } from '~/components/svg';
import { useQueryClient } from '@tanstack/react-query';
import { Dialog, DialogContent, Button } from '~/components/ui';
import { renderAgentAvatar } from '~/utils/agents';
import useLocalize from '~/hooks/useLocalize';
import { DotsIcon } from '~/components/svg';
import { useToast } from '~/hooks';
interface AgentDetailProps {
agent: AgentWithSupport; // The agent data to display
@ -42,7 +35,7 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
const dialogRef = useRef<HTMLDivElement>(null);
const dropdownRef = useRef<HTMLDivElement>(null);
const [dropdownOpen, setDropdownOpen] = useState(false);
const queryClient = useQueryClient();
// Close dropdown when clicking outside the dropdown menu
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
@ -66,6 +59,14 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
*/
const handleStartChat = () => {
if (agent) {
const keys = [QueryKeys.agents, { requiredPermission: PERMISSION_BITS.EDIT }];
const listResp = queryClient.getQueryData<AgentListResponse>(keys);
if (listResp != null) {
if (!listResp.data.some((a) => a.id === agent.id)) {
const currentAgents = [agent, ...JSON.parse(JSON.stringify(listResp.data))];
queryClient.setQueryData<AgentListResponse>(keys, { ...listResp, data: currentAgents });
}
}
navigate(`/c/new?agent_id=${agent.id}`);
}
};
@ -80,7 +81,7 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
.writeText(chatUrl)
.then(() => {
showToast({
message: 'Link copied',
message: localize('com_agents_link_copied'),
});
})
.catch(() => {
@ -130,7 +131,7 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
variant="ghost"
size="icon"
className="h-8 w-8 rounded-lg text-text-secondary hover:bg-surface-hover hover:text-text-primary dark:hover:bg-surface-hover"
aria-label="More options"
aria-label={localize('com_agents_more_options')}
aria-expanded={dropdownOpen}
aria-haspopup="menu"
onClick={(e) => {

118
client/src/components/SidePanel/Agents/AgentGrid.tsx
View file

@ -1,61 +1,85 @@
import React, { useState } from 'react';
import React, { useMemo } from 'react';
import type t from 'librechat-data-provider';
import { useDynamicAgentQuery, useAgentCategories } from '~/hooks/Agents';
import { useMarketplaceAgentsInfiniteQuery } from '~/data-provider/Agents';
import { useAgentCategories } from '~/hooks/Agents';
import useLocalize from '~/hooks/useLocalize';
import { Button } from '~/components/ui';
import { Spinner } from '~/components/svg';
import { SmartLoader, useHasData } from './SmartLoader';
import { useHasData } from './SmartLoader';
import ErrorDisplay from './ErrorDisplay';
import AgentCard from './AgentCard';
import { cn } from '~/utils';
import { PERMISSION_BITS } from 'librechat-data-provider';
interface AgentGridProps {
category: string; // Currently selected category
searchQuery: string; // Current search query
onSelectAgent: (agent: t.Agent) => void; // Callback when agent is selected
}
// Interface for the actual data structure returned by the API
interface AgentGridData {
agents: t.Agent[];
pagination?: {
hasMore: boolean;
current: number;
total: number;
};
}
/**
* Component for displaying a grid of agent cards
*/
const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAgent }) => {
const localize = useLocalize();
const [page, setPage] = useState(1);
// Get category data from API
const { categories } = useAgentCategories();
// Single dynamic query that handles all cases - much cleaner!
// Build query parameters based on current state
const queryParams = useMemo(() => {
const params: {
requiredPermission: number;
category?: string;
search?: string;
limit: number;
promoted?: 0 | 1;
} = {
requiredPermission: PERMISSION_BITS.VIEW, // View permission for marketplace viewing
limit: 6,
};
// Handle search
if (searchQuery) {
params.search = searchQuery;
// Include category filter for search if it's not 'all' or 'promoted'
if (category !== 'all' && category !== 'promoted') {
params.category = category;
}
} else {
// Handle category-based queries
if (category === 'promoted') {
params.promoted = 1;
} else if (category !== 'all') {
params.category = category;
}
// For 'all' category, no additional filters needed
}
return params;
}, [category, searchQuery]);
// Use infinite query for marketplace agents
const {
data: rawData,
data,
isLoading,
error,
isFetching,
fetchNextPage,
hasNextPage,
refetch,
} = useDynamicAgentQuery({
category,
searchQuery,
page,
limit: 6,
});
isFetchingNextPage,
} = useMarketplaceAgentsInfiniteQuery(queryParams);
// Type the data properly
const data = rawData as AgentGridData | undefined;
// Flatten all pages into a single array of agents
const currentAgents = useMemo(() => {
if (!data?.pages) return [];
return data.pages.flatMap((page) => page.data || []);
}, [data?.pages]);
// Check if we have meaningful data to prevent unnecessary loading states
const hasData = useHasData(data);
const hasData = useHasData(data?.pages?.[0]);
/**
* Get category display name from API data or use fallback
@ -82,16 +106,11 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
* Load more agents when "See More" button is clicked
*/
const handleLoadMore = () => {
setPage((prevPage) => prevPage + 1);
if (hasNextPage && !isFetching) {
fetchNextPage();
}
};
/**
* Reset page when category or search changes
*/
React.useEffect(() => {
setPage(1);
}, [category, searchQuery]);
/**
* Get the appropriate title for the agents grid based on current state
*/
@ -163,7 +182,7 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
<h2
className="text-xl font-bold text-gray-900 dark:text-white"
id={`category-heading-${category}`}
aria-label={`${getGridTitle()}, ${data?.agents?.length || 0} agents available`}
aria-label={`${getGridTitle()}, ${currentAgents.length || 0} agents available`}
>
{getGridTitle()}
</h2>
@ -171,7 +190,7 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
)}
{/* Handle empty results with enhanced accessibility */}
{(!data?.agents || data.agents.length === 0) && !isLoading && !isFetching ? (
{(!currentAgents || currentAgents.length === 0) && !isLoading && !isFetching ? (
<div
className="py-12 text-center text-gray-500"
role="status"
@ -198,22 +217,22 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
{/* Announcement for screen readers */}
<div id="search-results-count" className="sr-only" aria-live="polite" aria-atomic="true">
{localize('com_agents_grid_announcement', {
count: data?.agents?.length || 0,
count: currentAgents?.length || 0,
category: getCategoryDisplayName(category),
})}
</div>
{/* Agent grid - 2 per row with proper semantic structure */}
{data?.agents && data.agents.length > 0 && (
{currentAgents && currentAgents.length > 0 && (
<div
className="grid grid-cols-1 gap-6 md:grid-cols-2"
role="grid"
aria-label={localize('com_agents_grid_announcement', {
count: data.agents.length,
count: currentAgents.length,
category: getCategoryDisplayName(category),
})}
>
{data.agents.map((agent: t.Agent, index: number) => (
{currentAgents.map((agent: t.Agent, index: number) => (
<div key={`${agent.id}-${index}`} role="gridcell">
<AgentCard agent={agent} onClick={() => onSelectAgent(agent)} />
</div>
@ -222,7 +241,7 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
)}
{/* Loading indicator when fetching more with accessibility */}
{isFetching && page > 1 && (
{isFetching && hasNextPage && (
<div
className="flex justify-center py-4"
role="status"
@ -235,7 +254,7 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
)}
{/* Load more button with enhanced accessibility */}
{data?.pagination?.hasMore && !isFetching && (
{hasNextPage && !isFetching && (
<div className="mt-8 flex justify-center">
<Button
variant="outline"
@ -260,17 +279,10 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
</div>
);
// Use SmartLoader to prevent unnecessary loading flashes
return (
<SmartLoader
isLoading={isLoading}
hasData={hasData}
delay={200} // Show loading only after 200ms delay
loadingComponent={loadingSkeleton}
>
{mainContent}
</SmartLoader>
);
if (isLoading || (isFetching && !isFetchingNextPage)) {
return loadingSkeleton;
}
return mainContent;
};
export default AgentGrid;

2
client/src/components/SidePanel/Agents/AgentMarketplace.tsx
View file

@ -6,7 +6,7 @@ import { useSetRecoilState, useRecoilValue } from 'recoil';
import type t from 'librechat-data-provider';
import type { ContextType } from '~/common';
import { useGetAgentCategoriesQuery, useGetEndpointsQuery } from '~/data-provider';
import { useGetEndpointsQuery, useGetAgentCategoriesQuery } from '~/data-provider';
import { useDocumentTitle } from '~/hooks';
import useLocalize from '~/hooks/useLocalize';
import { TooltipAnchor, Button } from '~/components/ui';

10
client/src/components/SidePanel/Agents/AgentPanel.tsx
View file

@ -242,6 +242,12 @@ export default function AgentPanel({
status: 'error',
});
}
if (!name) {
return showToast({
message: localize('com_agents_missing_name'),
status: 'error',
});
}
create.mutate({
name,
@ -274,12 +280,12 @@ export default function AgentPanel({
return true;
}
if (agentQuery.data?.author === user?.id || user?.role === SystemRoles.ADMIN) {
if (user?.role === SystemRoles.ADMIN) {
return true;
}
return canEdit;
}, [agentQuery.data?.author, agentQuery.data?.id, user?.id, user?.role, canEdit]);
}, [agentQuery.data?.id, user?.role, canEdit]);
return (
<FormProvider {...methods}>

33
client/src/components/SidePanel/Agents/AgentSelect.tsx
View file

@ -1,7 +1,11 @@
import { EarthIcon } from 'lucide-react';
import { useCallback, useEffect, useRef } from 'react';
import { useFormContext, Controller } from 'react-hook-form';
import { AgentCapabilities, defaultAgentFormValues } from 'librechat-data-provider';
import {
AgentCapabilities,
defaultAgentFormValues,
PERMISSION_BITS,
} from 'librechat-data-provider';
import type { UseMutationResult, QueryObserverResult } from '@tanstack/react-query';
import type { Agent, AgentCreateParams } from 'librechat-data-provider';
import type { TAgentCapabilities, AgentForm } from '~/common';
@ -28,18 +32,21 @@ export default function AgentSelect({
const { control, reset } = useFormContext();
const { data: startupConfig } = useGetStartupConfig();
const { data: agents = null } = useListAgentsQuery(undefined, {
select: (res) =>
res.data.map((agent) =>
processAgentOption({
agent: {
...agent,
name: agent.name || agent.id,
},
instanceProjectId: startupConfig?.instanceProjectId,
}),
),
});
const { data: agents = null } = useListAgentsQuery(
{ requiredPermission: PERMISSION_BITS.EDIT },
{
select: (res) =>
res.data.map((agent) =>
processAgentOption({
agent: {
...agent,
name: agent.name || agent.id,
},
instanceProjectId: startupConfig?.instanceProjectId,
}),
),
},
);
const resetAgentForm = useCallback(
(fullAgent: Agent) => {

51
client/src/components/SidePanel/Agents/ErrorDisplay.tsx
View file

@ -67,23 +67,25 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({ error, onRetry, cont
errorData = error;
}
// Use user-friendly message from backend if available
if (errorData && typeof errorData === 'object' && (errorData as any)?.userMessage) {
// Handle network errors first
let errorMessage = '';
if (isErrorInstance(error)) {
errorMessage = error.message;
} else if (isErrorObject(error) && (error as any)?.message) {
errorMessage = (error as any).message;
}
const errorCode = isErrorObject(error) ? (error as any)?.code : '';
// Handle timeout errors specifically
if (errorCode === 'ECONNABORTED' || errorMessage?.includes('timeout')) {
return {
title: getContextualTitle(),
message: (errorData as any).userMessage,
suggestion:
(errorData as any).suggestion || localize('com_agents_error_suggestion_generic'),
title: localize('com_agents_error_timeout_title'),
message: localize('com_agents_error_timeout_message'),
suggestion: localize('com_agents_error_timeout_suggestion'),
};
}
// Handle network errors
const errorMessage = isErrorInstance(error)
? error.message
: isErrorObject(error) && (error as any)?.message
? (error as any).message
: '';
const errorCode = isErrorObject(error) ? (error as any)?.code : '';
if (errorCode === 'NETWORK_ERROR' || errorMessage?.includes('Network Error')) {
return {
title: localize('com_agents_error_network_title'),
@ -92,7 +94,7 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({ error, onRetry, cont
};
}
// Handle specific HTTP status codes
// Handle specific HTTP status codes before generic userMessage
const status = isErrorObject(error) ? (error as any)?.response?.status : null;
if (status) {
if (status === 404) {
@ -108,7 +110,8 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({ error, onRetry, cont
title: localize('com_agents_error_invalid_request'),
message:
(errorData as any)?.userMessage || localize('com_agents_error_bad_request_message'),
suggestion: localize('com_agents_error_bad_request_suggestion'),
suggestion:
(errorData as any)?.suggestion || localize('com_agents_error_bad_request_suggestion'),
};
}
@ -121,9 +124,19 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({ error, onRetry, cont
}
}
// Fallback to generic error
// Use user-friendly message from backend if available (after specific status code handling)
if (errorData && typeof errorData === 'object' && (errorData as any)?.userMessage) {
return {
title: getContextualTitle(),
message: (errorData as any).userMessage,
suggestion:
(errorData as any).suggestion || localize('com_agents_error_suggestion_generic'),
};
}
// Fallback to generic error with contextual title
return {
title: localize('com_agents_error_title'),
title: getContextualTitle(),
message: localize('com_agents_error_generic'),
suggestion: localize('com_agents_error_suggestion_generic'),
};
@ -193,9 +206,9 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({ error, onRetry, cont
{/* Error content with proper headings and structure */}
<div className="space-y-3">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white" id="error-title">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white" id="error-title">
{title}
</h2>
</h3>
<p
className="text-gray-600 dark:text-gray-400"
id="error-message"

10
client/src/components/SidePanel/Agents/Sharing/ManagePermissionsDialog.tsx
View file

@ -62,9 +62,13 @@ export default function ManagePermissionsDialog({
useEffect(() => {
if (permissionsData) {
setManagedShares(currentShares);
setManagedIsPublic(isPublic);
setManagedPublicRole(publicRole);
const shares = permissionsData.principals || [];
const isPublicValue = permissionsData.public || false;
const publicRoleValue = permissionsData.publicAccessRoleId || ACCESS_ROLE_IDS.AGENT_VIEWER;
setManagedShares(shares);
setManagedIsPublic(isPublicValue);
setManagedPublicRole(publicRoleValue);
setHasChanges(false);
}
}, [permissionsData, isModalOpen]);

5
client/src/components/SidePanel/Agents/SmartLoader.tsx
View file

@ -1,7 +1,6 @@
import { AgentListResponse } from 'librechat-data-provider';
import React, { useState, useEffect } from 'react';
import { cn } from '~/utils';
interface SmartLoaderProps {
/** Whether the content is currently loading */
isLoading: boolean;
@ -69,7 +68,7 @@ export const SmartLoader: React.FC<SmartLoaderProps> = ({
* Hook to determine if we have meaningful data to show
* Helps prevent loading states when we already have cached content
*/
export const useHasData = (data: unknown): boolean => {
export const useHasData = (data: AgentListResponse | undefined): boolean => {
if (!data) return false;
// Type guard for object data

251
client/src/components/SidePanel/Agents/__tests__/Accessibility.spec.tsx
View file

@ -1,11 +1,12 @@
import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { render, screen, fireEvent } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import CategoryTabs from '../CategoryTabs';
import AgentGrid from '../AgentGrid';
import AgentCard from '../AgentCard';
import SearchBar from '../SearchBar';
import ErrorDisplay from '../ErrorDisplay';
import * as t from 'librechat-data-provider';
// Mock matchMedia
Object.defineProperty(window, 'matchMedia', {
@ -22,36 +23,110 @@ Object.defineProperty(window, 'matchMedia', {
})),
});
// Mock hooks
jest.mock(
'~/hooks/useLocalize',
() => () =>
jest.fn((key: string, options?: any) => {
const translations: Record<string, string> = {
com_agents_category_tabs_label: 'Agent Categories',
com_agents_category_tab_label: `${options?.category} category, ${options?.position} of ${options?.total}`,
com_agents_search_instructions: 'Type to search agents by name or description',
com_agents_search_aria: 'Search agents',
com_agents_search_placeholder: 'Search agents...',
com_agents_clear_search: 'Clear search',
com_agents_agent_card_label: `${options?.name} agent. ${options?.description}`,
com_agents_no_description: 'No description available',
com_agents_grid_announcement: `Showing ${options?.count} agents in ${options?.category} category`,
com_agents_load_more_label: `Load more agents from ${options?.category} category`,
com_agents_error_retry: 'Try Again',
com_agents_loading: 'Loading...',
com_agents_empty_state_heading: 'No agents found',
com_agents_search_empty_heading: 'No search results',
};
return translations[key] || key;
}),
);
jest.mock('~/hooks/Agents', () => ({
useDynamicAgentQuery: jest.fn(),
// Mock Recoil
jest.mock('recoil', () => ({
useRecoilValue: jest.fn(() => 'en'),
RecoilRoot: ({ children }: any) => children,
atom: jest.fn(() => ({})),
atomFamily: jest.fn(() => ({})),
selector: jest.fn(() => ({})),
selectorFamily: jest.fn(() => ({})),
useRecoilState: jest.fn(() => ['en', jest.fn()]),
useSetRecoilState: jest.fn(() => jest.fn()),
}));
const { useDynamicAgentQuery } = require('~/hooks/Agents');
// Mock react-i18next
jest.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => key,
i18n: { changeLanguage: jest.fn() },
}),
}));
// Create the localize function once to be reused
const mockLocalize = jest.fn((key: string, options?: any) => {
const translations: Record<string, string> = {
com_agents_category_tabs_label: 'Agent Categories',
com_agents_category_tab_label: `${options?.category} category, ${options?.position} of ${options?.total}`,
com_agents_search_instructions: 'Type to search agents by name or description',
com_agents_search_aria: 'Search agents',
com_agents_search_placeholder: 'Search agents...',
com_agents_clear_search: 'Clear search',
com_agents_agent_card_label: `${options?.name} agent. ${options?.description}`,
com_agents_no_description: 'No description available',
com_agents_grid_announcement: `Showing ${options?.count} agents in ${options?.category} category`,
com_agents_load_more_label: `Load more agents from ${options?.category} category`,
com_agents_error_retry: 'Try Again',
com_agents_loading: 'Loading...',
com_agents_empty_state_heading: 'No agents found',
com_agents_search_empty_heading: 'No search results',
com_agents_created_by: 'by',
com_agents_top_picks: 'Top Picks',
// ErrorDisplay translations
com_agents_error_suggestion_generic: 'Try refreshing the page or check your network connection',
com_agents_error_network_title: 'Network Error',
com_agents_error_network_message: 'Unable to connect to the server',
com_agents_error_network_suggestion: 'Check your internet connection and try again',
com_agents_error_not_found_title: 'Not Found',
com_agents_error_not_found_suggestion: 'The requested resource could not be found',
com_agents_error_invalid_request: 'Invalid Request',
com_agents_error_bad_request_message: 'The request was invalid',
com_agents_error_bad_request_suggestion: 'Please check your input and try again',
com_agents_error_server_title: 'Server Error',
com_agents_error_server_message: 'An internal server error occurred',
com_agents_error_server_suggestion: 'Please try again later',
com_agents_error_title: 'Error',
com_agents_error_generic: 'An unexpected error occurred',
com_agents_error_search_title: 'Search Error',
com_agents_error_category_title: 'Category Error',
com_agents_search_no_results: `No results found for "${options?.query}"`,
com_agents_category_empty: `No agents found in ${options?.category} category`,
com_agents_error_not_found_message: 'The requested resource could not be found',
};
return translations[key] || key;
});
// Mock useLocalize specifically
jest.mock('~/hooks/useLocalize', () => ({
__esModule: true,
default: () => mockLocalize,
}));
// Mock hooks
jest.mock('~/hooks', () => ({
useLocalize: () => mockLocalize,
useDebounce: jest.fn(),
}));
jest.mock('~/data-provider/Agents', () => ({
useMarketplaceAgentsInfiniteQuery: jest.fn(),
}));
jest.mock('~/hooks/Agents', () => ({
useAgentCategories: jest.fn(),
}));
// Mock utility functions
jest.mock('~/utils/agents', () => ({
renderAgentAvatar: jest.fn(() => <div data-testid="agent-avatar" />),
getContactDisplayName: jest.fn((agent) => agent.authorName),
}));
// Mock SmartLoader
jest.mock('../SmartLoader', () => ({
SmartLoader: ({ children, isLoading }: any) => (isLoading ? <div>Loading...</div> : children),
useHasData: jest.fn(() => true),
}));
// Import the actual modules to get the mocked functions
import { useMarketplaceAgentsInfiniteQuery } from '~/data-provider/Agents';
import { useAgentCategories } from '~/hooks/Agents';
import { useDebounce } from '~/hooks';
// Get typed mock functions
const mockUseMarketplaceAgentsInfiniteQuery = jest.mocked(useMarketplaceAgentsInfiniteQuery);
const mockUseAgentCategories = jest.mocked(useAgentCategories);
const mockUseDebounce = jest.mocked(useDebounce);
// Create wrapper with QueryClient
const createWrapper = () => {
@ -66,14 +141,29 @@ const createWrapper = () => {
describe('Accessibility Improvements', () => {
beforeEach(() => {
useDynamicAgentQuery.mockClear();
mockUseMarketplaceAgentsInfiniteQuery.mockClear();
mockUseAgentCategories.mockClear();
mockUseDebounce.mockClear();
// Default mock implementations
mockUseDebounce.mockImplementation((value) => value);
mockUseAgentCategories.mockReturnValue({
categories: [
{ value: 'promoted', label: 'Top Picks' },
{ value: 'all', label: 'All' },
{ value: 'productivity', label: 'Productivity' },
],
emptyCategory: { value: 'all', label: 'All' },
isLoading: false,
error: null,
});
});
describe('CategoryTabs Accessibility', () => {
const categories = [
{ name: 'promoted', count: 5 },
{ name: 'all', count: 20 },
{ name: 'productivity', count: 8 },
{ value: 'promoted', label: 'Top Picks', count: 5 },
{ value: 'all', label: 'All', count: 20 },
{ value: 'productivity', label: 'Productivity', count: 8 },
];
it('implements proper tablist role and ARIA attributes', () => {
@ -96,7 +186,7 @@ describe('Accessibility Improvements', () => {
const tabs = screen.getAllByRole('tab');
expect(tabs).toHaveLength(3);
tabs.forEach((tab, index) => {
tabs.forEach((tab) => {
expect(tab).toHaveAttribute('aria-selected');
expect(tab).toHaveAttribute('aria-controls');
expect(tab).toHaveAttribute('id');
@ -114,7 +204,7 @@ describe('Accessibility Improvements', () => {
/>,
);
const promotedTab = screen.getByRole('tab', { name: /promoted category/ });
const promotedTab = screen.getByRole('tab', { name: /Top Picks tab/ });
// Test arrow key navigation
fireEvent.keyDown(promotedTab, { key: 'ArrowRight' });
@ -141,8 +231,8 @@ describe('Accessibility Improvements', () => {
/>,
);
const promotedTab = screen.getByRole('tab', { name: /promoted category/ });
const allTab = screen.getByRole('tab', { name: /all category/ });
const promotedTab = screen.getByRole('tab', { name: /Top Picks tab/ });
const allTab = screen.getByRole('tab', { name: /All tab/ });
// Active tab should be focusable
expect(promotedTab).toHaveAttribute('tabIndex', '0');
@ -159,7 +249,7 @@ describe('Accessibility Improvements', () => {
expect(searchRegion).toBeInTheDocument();
// Check input accessibility
const searchInput = screen.getByRole('searchbox');
const searchInput = screen.getByRole('textbox');
expect(searchInput).toHaveAttribute('id', 'agent-search');
expect(searchInput).toHaveAttribute('aria-label', 'Search agents');
expect(searchInput).toHaveAttribute(
@ -167,10 +257,9 @@ describe('Accessibility Improvements', () => {
'search-instructions search-results-count',
);
// Check hidden label
expect(screen.getByText('Type to search agents by name or description')).toHaveClass(
'sr-only',
);
// Check hidden label exists
const hiddenLabel = screen.getByLabelText('Search agents');
expect(hiddenLabel).toBeInTheDocument();
});
it('provides accessible clear button', () => {
@ -197,10 +286,24 @@ describe('Accessibility Improvements', () => {
name: 'Test Agent',
description: 'A test agent for testing',
authorName: 'Test Author',
created_at: 1704067200000,
avatar: null,
instructions: 'Test instructions',
provider: 'openai' as const,
model: 'gpt-4',
model_parameters: {
temperature: 0.7,
maxContextTokens: 4096,
max_context_tokens: 4096,
max_output_tokens: 1024,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0,
},
};
it('provides comprehensive ARIA labels', () => {
render(<AgentCard agent={mockAgent} onClick={jest.fn()} />);
render(<AgentCard agent={mockAgent as t.Agent} onClick={jest.fn()} />);
const card = screen.getByRole('button');
expect(card).toHaveAttribute('aria-label', 'Test Agent agent. A test agent for testing');
@ -210,14 +313,14 @@ describe('Accessibility Improvements', () => {
it('handles agents without descriptions', () => {
const agentWithoutDesc = { ...mockAgent, description: undefined };
render(<AgentCard agent={agentWithoutDesc} onClick={jest.fn()} />);
render(<AgentCard agent={agentWithoutDesc as any as t.Agent} onClick={jest.fn()} />);
expect(screen.getByText('No description available')).toBeInTheDocument();
});
it('supports keyboard interaction', () => {
const onClick = jest.fn();
render(<AgentCard agent={mockAgent} onClick={onClick} />);
render(<AgentCard agent={mockAgent as t.Agent} onClick={onClick} />);
const card = screen.getByRole('button');
@ -231,19 +334,20 @@ describe('Accessibility Improvements', () => {
describe('AgentGrid Accessibility', () => {
beforeEach(() => {
useDynamicAgentQuery.mockReturnValue({
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
data: {
agents: [
{ id: '1', name: 'Agent 1', description: 'First agent' },
{ id: '2', name: 'Agent 2', description: 'Second agent' },
pages: [
{
data: [
{ id: '1', name: 'Agent 1', description: 'First agent' },
{ id: '2', name: 'Agent 2', description: 'Second agent' },
],
},
],
pagination: { hasMore: false, total: 2, current: 1 },
},
isLoading: false,
isFetching: false,
error: null,
refetch: jest.fn(),
});
} as any);
});
it('implements proper tabpanel structure', () => {
@ -272,7 +376,7 @@ describe('Accessibility Improvements', () => {
// Check grid role
const grid = screen.getByRole('grid');
expect(grid).toBeInTheDocument();
expect(grid).toHaveAttribute('aria-label', 'Showing 2 agents in all category');
expect(grid).toHaveAttribute('aria-label', 'Showing 2 agents in All category');
// Check gridcells
const gridcells = screen.getAllByRole('gridcell');
@ -280,13 +384,16 @@ describe('Accessibility Improvements', () => {
});
it('announces loading states to screen readers', () => {
useDynamicAgentQuery.mockReturnValue({
data: { agents: [{ id: '1', name: 'Agent 1' }] },
isLoading: false,
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
data: {
pages: [{ data: [{ id: '1', name: 'Agent 1' }] }],
},
isFetching: true,
hasNextPage: true,
isFetchingNextPage: true,
isLoading: false,
error: null,
refetch: jest.fn(),
});
} as any);
const Wrapper = createWrapper();
render(
@ -295,20 +402,26 @@ describe('Accessibility Improvements', () => {
</Wrapper>,
);
// Check for loading announcement
const loadingStatus = screen.getByRole('status', { name: 'Loading...' });
// Check for loading announcement when fetching more data
const loadingStatus = screen.getByRole('status');
expect(loadingStatus).toBeInTheDocument();
expect(loadingStatus).toHaveAttribute('aria-live', 'polite');
expect(loadingStatus).toHaveAttribute('aria-label', 'Loading...');
// Check for screen reader text
const srText = screen.getByText('Loading...');
expect(srText).toHaveClass('sr-only');
});
it('provides accessible empty states', () => {
useDynamicAgentQuery.mockReturnValue({
data: { agents: [], pagination: { hasMore: false, total: 0, current: 1 } },
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
data: {
pages: [{ data: [] }],
},
isLoading: false,
isFetching: false,
error: null,
refetch: jest.fn(),
});
} as any);
const Wrapper = createWrapper();
render(
@ -343,7 +456,7 @@ describe('Accessibility Improvements', () => {
expect(alert).toHaveAttribute('aria-atomic', 'true');
// Check heading structure
const heading = screen.getByRole('heading', { level: 2 });
const heading = screen.getByRole('heading', { level: 3 });
expect(heading).toHaveAttribute('id', 'error-title');
});
@ -382,7 +495,7 @@ describe('Accessibility Improvements', () => {
it('provides visible focus indicators on interactive elements', () => {
render(
<CategoryTabs
categories={[{ name: 'test', count: 1 }]}
categories={[{ value: 'test', label: 'Test', count: 1 }]}
activeTab="test"
isLoading={false}
onChange={jest.fn()}
@ -391,7 +504,7 @@ describe('Accessibility Improvements', () => {
const tab = screen.getByRole('tab');
expect(tab.className).toContain('focus:outline-none');
expect(tab.className).toContain('focus:ring-2');
expect(tab.className).toContain('focus:bg-gray-100');
});
});
@ -418,5 +531,3 @@ describe('Accessibility Improvements', () => {
});
});
});
export default {};

31
client/src/components/SidePanel/Agents/__tests__/AgentCard.spec.tsx
View file

@ -21,8 +21,21 @@ describe('AgentCard', () => {
name: 'Test Support',
email: 'test@example.com',
},
avatar: '/test-avatar.png',
} as t.Agent;
avatar: { filepath: '/test-avatar.png', source: 'local' },
created_at: 1672531200000,
instructions: 'Test instructions',
provider: 'openai' as const,
model: 'gpt-4',
model_parameters: {
temperature: 0.7,
maxContextTokens: 4096,
max_context_tokens: 4096,
max_output_tokens: 1024,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0,
},
};
const mockOnClick = jest.fn();
@ -39,7 +52,7 @@ describe('AgentCard', () => {
expect(screen.getByText('Test Support')).toBeInTheDocument();
});
it('displays avatar when provided as string', () => {
it('displays avatar when provided as object', () => {
render(<AgentCard agent={mockAgent} onClick={mockOnClick} />);
const avatarImg = screen.getByAltText('Test Agent avatar');
@ -47,17 +60,17 @@ describe('AgentCard', () => {
expect(avatarImg).toHaveAttribute('src', '/test-avatar.png');
});
it('displays avatar when provided as object with filepath', () => {
const agentWithObjectAvatar = {
it('displays avatar when provided as string', () => {
const agentWithStringAvatar = {
...mockAgent,
avatar: { filepath: '/object-avatar.png' },
avatar: '/string-avatar.png' as any, // Legacy support for string avatars
};
render(<AgentCard agent={agentWithObjectAvatar} onClick={mockOnClick} />);
render(<AgentCard agent={agentWithStringAvatar} onClick={mockOnClick} />);
const avatarImg = screen.getByAltText('Test Agent avatar');
expect(avatarImg).toBeInTheDocument();
expect(avatarImg).toHaveAttribute('src', '/object-avatar.png');
expect(avatarImg).toHaveAttribute('src', '/string-avatar.png');
});
it('displays Bot icon fallback when no avatar is provided', () => {
@ -66,7 +79,7 @@ describe('AgentCard', () => {
avatar: undefined,
};
render(<AgentCard agent={agentWithoutAvatar} onClick={mockOnClick} />);
render(<AgentCard agent={agentWithoutAvatar as any as t.Agent} onClick={mockOnClick} />);
// Check for Bot icon presence by looking for the svg with lucide-bot class
const botIcon = document.querySelector('.lucide-bot');

83
client/src/components/SidePanel/Agents/__tests__/AgentDetail.spec.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MemoryRouter, useNavigate } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@ -19,6 +19,7 @@ jest.mock('react-router-dom', () => ({
jest.mock('~/hooks', () => ({
useToast: jest.fn(),
useMediaQuery: jest.fn(() => false), // Mock as desktop by default
}));
jest.mock('~/hooks/useLocalize', () => ({
@ -33,11 +34,7 @@ jest.mock('~/utils/agents', () => ({
}));
// Mock clipboard API
Object.assign(navigator, {
clipboard: {
writeText: jest.fn(),
},
});
const mockWriteText = jest.fn();
const mockNavigate = jest.fn();
const mockShowToast = jest.fn();
@ -55,17 +52,23 @@ const mockAgent: t.Agent = {
provider: 'openai',
instructions: 'You are a helpful test agent',
tools: [],
code_interpreter: false,
file_search: false,
author: 'test-user-id',
author_name: 'Test User',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
created_at: new Date().getTime(),
version: 1,
support_contact: {
name: 'Support Team',
email: 'support@test.com',
},
model_parameters: {
model: undefined,
temperature: null,
maxContextTokens: null,
max_context_tokens: null,
max_output_tokens: null,
top_p: null,
frequency_penalty: null,
presence_penalty: null,
},
};
// Helper function to render with providers
@ -95,8 +98,19 @@ describe('AgentDetail', () => {
(useToast as jest.Mock).mockReturnValue({ showToast: mockShowToast });
(useLocalize as jest.Mock).mockReturnValue(mockLocalize);
// Reset clipboard mock
(navigator.clipboard.writeText as jest.Mock).mockResolvedValue(undefined);
// Setup clipboard mock if it doesn't exist
if (!navigator.clipboard) {
Object.defineProperty(navigator, 'clipboard', {
value: {
writeText: mockWriteText,
},
configurable: true,
});
} else {
// If clipboard exists, spy on it
jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(mockWriteText);
}
mockWriteText.mockResolvedValue(undefined);
});
const defaultProps = {
@ -145,7 +159,7 @@ describe('AgentDetail', () => {
it('should render 3-dot menu button', () => {
renderWithProviders(<AgentDetail {...defaultProps} />);
const menuButton = screen.getByRole('button', { name: 'More options' });
const menuButton = screen.getByRole('button', { name: 'com_agents_more_options' });
expect(menuButton).toBeInTheDocument();
expect(menuButton).toHaveAttribute('aria-haspopup', 'menu');
});
@ -185,7 +199,7 @@ describe('AgentDetail', () => {
const user = userEvent.setup();
renderWithProviders(<AgentDetail {...defaultProps} />);
const menuButton = screen.getByRole('button', { name: 'More options' });
const menuButton = screen.getByRole('button', { name: 'com_agents_more_options' });
await user.click(menuButton);
expect(screen.getByRole('button', { name: 'com_agents_copy_link' })).toBeInTheDocument();
@ -196,7 +210,7 @@ describe('AgentDetail', () => {
renderWithProviders(<AgentDetail {...defaultProps} />);
// Open dropdown
const menuButton = screen.getByRole('button', { name: 'More options' });
const menuButton = screen.getByRole('button', { name: 'com_agents_more_options' });
await user.click(menuButton);
expect(screen.getByRole('button', { name: 'com_agents_copy_link' })).toBeInTheDocument();
@ -217,18 +231,24 @@ describe('AgentDetail', () => {
renderWithProviders(<AgentDetail {...defaultProps} />);
// Open dropdown
const menuButton = screen.getByRole('button', { name: 'More options' });
const menuButton = screen.getByRole('button', { name: 'com_agents_more_options' });
await user.click(menuButton);
// Click copy link
const copyLinkButton = screen.getByRole('button', { name: 'com_agents_copy_link' });
await user.click(copyLinkButton);
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
`${window.location.origin}/c/new?agent_id=test-agent-id`,
);
expect(mockShowToast).toHaveBeenCalledWith({
message: 'Link copied',
// Wait for async clipboard operation to complete
await waitFor(() => {
expect(mockWriteText).toHaveBeenCalledWith(
`${window.location.origin}/c/new?agent_id=test-agent-id`,
);
});
await waitFor(() => {
expect(mockShowToast).toHaveBeenCalledWith({
message: 'com_agents_link_copied',
});
});
// Dropdown should close
@ -241,17 +261,22 @@ describe('AgentDetail', () => {
it('should show error toast when clipboard write fails', async () => {
const user = userEvent.setup();
(navigator.clipboard.writeText as jest.Mock).mockRejectedValue(new Error('Clipboard error'));
mockWriteText.mockRejectedValue(new Error('Clipboard error'));
renderWithProviders(<AgentDetail {...defaultProps} />);
// Open dropdown and click copy link
const menuButton = screen.getByRole('button', { name: 'More options' });
const menuButton = screen.getByRole('button', { name: 'com_agents_more_options' });
await user.click(menuButton);
const copyLinkButton = screen.getByRole('button', { name: 'com_agents_copy_link' });
await user.click(copyLinkButton);
// Wait for clipboard operation to fail and error toast to show
await waitFor(() => {
expect(mockWriteText).toHaveBeenCalled();
});
await waitFor(() => {
expect(mockShowToast).toHaveBeenCalledWith({
message: 'com_agents_link_copy_failed',
@ -261,7 +286,7 @@ describe('AgentDetail', () => {
it('should call onClose when dialog is closed', () => {
const mockOnClose = jest.fn();
render(<AgentDetail {...defaultProps} onClose={mockOnClose} isOpen={false} />);
renderWithProviders(<AgentDetail {...defaultProps} onClose={mockOnClose} isOpen={false} />);
// Since we're testing the onOpenChange callback, we need to trigger it
// This would normally be done by the Dialog component when ESC is pressed or overlay is clicked
@ -274,16 +299,16 @@ describe('AgentDetail', () => {
it('should have proper ARIA attributes', () => {
renderWithProviders(<AgentDetail {...defaultProps} />);
const menuButton = screen.getByRole('button', { name: 'More options' });
const menuButton = screen.getByRole('button', { name: 'com_agents_more_options' });
expect(menuButton).toHaveAttribute('aria-haspopup', 'menu');
expect(menuButton).toHaveAttribute('aria-label', 'More options');
expect(menuButton).toHaveAttribute('aria-label', 'com_agents_more_options');
});
it('should support keyboard navigation for dropdown', async () => {
const user = userEvent.setup();
renderWithProviders(<AgentDetail {...defaultProps} />);
const menuButton = screen.getByRole('button', { name: 'More options' });
const menuButton = screen.getByRole('button', { name: 'com_agents_more_options' });
// Focus and open with Enter key
menuButton.focus();
@ -296,7 +321,7 @@ describe('AgentDetail', () => {
const user = userEvent.setup();
renderWithProviders(<AgentDetail {...defaultProps} />);
const menuButton = screen.getByRole('button', { name: 'More options' });
const menuButton = screen.getByRole('button', { name: 'com_agents_more_options' });
await user.click(menuButton);
const copyLinkButton = screen.getByRole('button', { name: 'com_agents_copy_link' });

487
client/src/components/SidePanel/Agents/__tests__/AgentGrid.integration.spec.tsx
View file

@ -1,17 +1,30 @@
import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import AgentGrid from '../AgentGrid';
import { useDynamicAgentQuery } from '~/hooks/Agents';
import type t from 'librechat-data-provider';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
// Mock the marketplace agent query hook
jest.mock('~/data-provider/Agents', () => ({
useMarketplaceAgentsInfiniteQuery: jest.fn(),
}));
// Mock the dynamic agent query hook
jest.mock('~/hooks/Agents', () => ({
useDynamicAgentQuery: jest.fn(),
useAgentCategories: jest.fn(() => ({
categories: [],
isLoading: false,
error: null,
})),
}));
// Mock SmartLoader
jest.mock('../SmartLoader', () => ({
useHasData: jest.fn(() => true),
}));
// Mock useLocalize hook
jest.mock('~/hooks/useLocalize', () => () => (key: string) => {
jest.mock('~/hooks/useLocalize', () => () => (key: string, options?: any) => {
const mockTranslations: Record<string, string> = {
com_agents_top_picks: 'Top Picks',
com_agents_all: 'All Agents',
@ -22,318 +35,342 @@ jest.mock('~/hooks/useLocalize', () => () => (key: string) => {
com_agents_error_searching: 'Error searching agents',
com_agents_no_results: 'No agents found. Try another search term.',
com_agents_none_in_category: 'No agents found in this category',
com_agents_search_empty_heading: 'No results found',
com_agents_empty_state_heading: 'No agents available',
com_agents_loading: 'Loading...',
com_agents_grid_announcement: '{{count}} agents in {{category}}',
com_agents_load_more_label: 'Load more agents from {{category}}',
};
return mockTranslations[key] || key;
let translation = mockTranslations[key] || key;
if (options) {
Object.keys(options).forEach((optionKey) => {
translation = translation.replace(new RegExp(`{{${optionKey}}}`, 'g'), options[optionKey]);
});
}
return translation;
});
// Mock getCategoryDisplayName and getCategoryDescription
jest.mock('~/utils/agents', () => ({
getCategoryDisplayName: (category: string) => {
const names: Record<string, string> = {
promoted: 'Top Picks',
all: 'All',
general: 'General',
hr: 'HR',
finance: 'Finance',
};
return names[category] || category;
},
getCategoryDescription: (category: string) => {
const descriptions: Record<string, string> = {
promoted: 'Our recommended agents',
all: 'Browse all available agents',
general: 'General purpose agents',
hr: 'HR agents',
finance: 'Finance agents',
};
return descriptions[category] || '';
},
// Mock ErrorDisplay component
jest.mock('../ErrorDisplay', () => ({
__esModule: true,
default: ({ error, onRetry }: { error: any; onRetry: () => void }) => (
<div>
<div>
{`Error: `}
{typeof error === 'string' ? error : error?.message || 'Unknown error'}
</div>
<button onClick={onRetry}>{`Retry`}</button>
</div>
),
}));
const mockUseDynamicAgentQuery = useDynamicAgentQuery as jest.MockedFunction<
typeof useDynamicAgentQuery
>;
// Mock AgentCard component
jest.mock('../AgentCard', () => ({
__esModule: true,
default: ({ agent, onClick }: { agent: t.Agent; onClick: () => void }) => (
<div data-testid={`agent-card-${agent.id}`} onClick={onClick}>
<h3>{agent.name}</h3>
<p>{agent.description}</p>
</div>
),
}));
describe('AgentGrid Integration with useDynamicAgentQuery', () => {
// Import the actual modules to get the mocked functions
import { useMarketplaceAgentsInfiniteQuery } from '~/data-provider/Agents';
const mockUseMarketplaceAgentsInfiniteQuery = jest.mocked(useMarketplaceAgentsInfiniteQuery);
describe('AgentGrid Integration with useGetMarketplaceAgentsQuery', () => {
const mockOnSelectAgent = jest.fn();
const mockAgents: Partial<t.Agent>[] = [
const mockAgents: t.Agent[] = [
{
id: '1',
name: 'Test Agent 1',
description: 'First test agent',
avatar: '/avatar1.png',
avatar: { filepath: '/avatar1.png', source: 'local' },
category: 'finance',
authorName: 'Author 1',
created_at: 1672531200000,
instructions: null,
provider: 'custom',
model: 'gpt-4',
model_parameters: {
temperature: null,
maxContextTokens: null,
max_context_tokens: null,
max_output_tokens: null,
top_p: null,
frequency_penalty: null,
presence_penalty: null,
},
},
{
id: '2',
name: 'Test Agent 2',
description: 'Second test agent',
avatar: { filepath: '/avatar2.png' },
avatar: { filepath: '/avatar2.png', source: 'local' },
category: 'finance',
authorName: 'Author 2',
created_at: 1672531200000,
instructions: null,
provider: 'custom',
model: 'gpt-4',
model_parameters: {
temperature: 0.7,
top_p: 0.9,
frequency_penalty: 0,
maxContextTokens: null,
max_context_tokens: null,
max_output_tokens: null,
presence_penalty: null,
},
},
];
const defaultMockQueryResult = {
data: {
agents: mockAgents,
pagination: {
current: 1,
hasMore: true,
total: 10,
},
pages: [
{
data: mockAgents,
},
],
},
isLoading: false,
error: null,
isFetching: false,
queryType: 'promoted' as const,
};
isFetchingNextPage: false,
hasNextPage: true,
fetchNextPage: jest.fn(),
refetch: jest.fn(),
} as any;
beforeEach(() => {
jest.clearAllMocks();
mockUseDynamicAgentQuery.mockReturnValue(defaultMockQueryResult);
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue(defaultMockQueryResult);
});
describe('Query Integration', () => {
it('should call useDynamicAgentQuery with correct parameters', () => {
it('should call useGetMarketplaceAgentsQuery with correct parameters for category search', () => {
render(
<AgentGrid category="finance" searchQuery="test query" onSelectAgent={mockOnSelectAgent} />,
);
expect(mockUseDynamicAgentQuery).toHaveBeenCalledWith({
expect(mockUseMarketplaceAgentsInfiniteQuery).toHaveBeenCalledWith({
requiredPermission: 1,
category: 'finance',
searchQuery: 'test query',
page: 1,
search: 'test query',
limit: 6,
});
});
it('should update page when "See More" is clicked', async () => {
render(<AgentGrid category="hr" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
const seeMoreButton = screen.getByText('See more');
fireEvent.click(seeMoreButton);
await waitFor(() => {
expect(mockUseDynamicAgentQuery).toHaveBeenCalledWith({
category: 'hr',
searchQuery: '',
page: 2,
limit: 6,
});
});
});
it('should reset page when category changes', () => {
const { rerender } = render(
<AgentGrid category="general" searchQuery="" onSelectAgent={mockOnSelectAgent} />,
);
// Simulate clicking "See More" to increment page
const seeMoreButton = screen.getByText('See more');
fireEvent.click(seeMoreButton);
// Change category - should reset page to 1
rerender(<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
expect(mockUseDynamicAgentQuery).toHaveBeenLastCalledWith({
category: 'finance',
searchQuery: '',
page: 1,
limit: 6,
});
});
it('should reset page when search query changes', () => {
const { rerender } = render(
<AgentGrid category="hr" searchQuery="" onSelectAgent={mockOnSelectAgent} />,
);
// Change search query - should reset page to 1
rerender(
<AgentGrid category="hr" searchQuery="new search" onSelectAgent={mockOnSelectAgent} />,
);
expect(mockUseDynamicAgentQuery).toHaveBeenLastCalledWith({
category: 'hr',
searchQuery: 'new search',
page: 1,
limit: 6,
});
});
});
describe('Different Query Types Display', () => {
it('should display correct title for promoted category', () => {
mockUseDynamicAgentQuery.mockReturnValue({
...defaultMockQueryResult,
queryType: 'promoted',
});
it('should call useGetMarketplaceAgentsQuery with promoted=1 for promoted category', () => {
render(<AgentGrid category="promoted" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
expect(screen.getByText('Top Picks')).toBeInTheDocument();
expect(screen.getByText('Our recommended agents')).toBeInTheDocument();
expect(mockUseMarketplaceAgentsInfiniteQuery).toHaveBeenCalledWith({
requiredPermission: 1,
promoted: 1,
limit: 6,
});
});
it('should display correct title for search results', () => {
mockUseDynamicAgentQuery.mockReturnValue({
...defaultMockQueryResult,
queryType: 'search',
});
render(
<AgentGrid category="all" searchQuery="test search" onSelectAgent={mockOnSelectAgent} />,
);
expect(screen.getByText('Results for "test search"')).toBeInTheDocument();
});
it('should display correct title for specific category', () => {
mockUseDynamicAgentQuery.mockReturnValue({
...defaultMockQueryResult,
queryType: 'category',
});
render(<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
expect(screen.getByText('Finance')).toBeInTheDocument();
expect(screen.getByText('Finance agents')).toBeInTheDocument();
});
it('should display correct title for all category', () => {
mockUseDynamicAgentQuery.mockReturnValue({
...defaultMockQueryResult,
queryType: 'all',
});
it('should call useGetMarketplaceAgentsQuery without category filter for "all" category', () => {
render(<AgentGrid category="all" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
expect(screen.getByText('All')).toBeInTheDocument();
expect(screen.getByText('Browse all available agents')).toBeInTheDocument();
expect(mockUseMarketplaceAgentsInfiniteQuery).toHaveBeenCalledWith({
requiredPermission: 1,
limit: 6,
});
});
it('should not include category in search when category is "all" or "promoted"', () => {
render(<AgentGrid category="all" searchQuery="test" onSelectAgent={mockOnSelectAgent} />);
expect(mockUseMarketplaceAgentsInfiniteQuery).toHaveBeenCalledWith({
requiredPermission: 1,
search: 'test',
limit: 6,
});
});
});
describe('Loading and Error States', () => {
it('should show loading skeleton when isLoading is true and no data', () => {
mockUseDynamicAgentQuery.mockReturnValue({
...defaultMockQueryResult,
data: undefined,
isLoading: true,
});
render(<AgentGrid category="general" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
// Should show loading skeletons
const loadingElements = screen.getAllByRole('generic');
const hasLoadingClass = loadingElements.some((el) => el.className.includes('animate-pulse'));
expect(hasLoadingClass).toBe(true);
// Create wrapper with QueryClient
const createWrapper = () => {
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false } },
});
it('should show error message when there is an error', () => {
mockUseDynamicAgentQuery.mockReturnValue({
...defaultMockQueryResult,
data: undefined,
error: new Error('Test error'),
});
return ({ children }: { children: React.ReactNode }) => (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
};
render(<AgentGrid category="general" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
describe('Agent Display', () => {
it('should render agent cards when data is available', () => {
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
expect(screen.getByText('Error loading agents')).toBeInTheDocument();
});
it('should show loading spinner when fetching more data', () => {
mockUseDynamicAgentQuery.mockReturnValue({
...defaultMockQueryResult,
isFetching: true,
});
render(<AgentGrid category="general" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
// Should show agents and loading spinner for pagination
expect(screen.getByTestId('agent-card-1')).toBeInTheDocument();
expect(screen.getByTestId('agent-card-2')).toBeInTheDocument();
expect(screen.getByText('Test Agent 1')).toBeInTheDocument();
expect(screen.getByText('Test Agent 2')).toBeInTheDocument();
});
});
describe('Agent Interaction', () => {
it('should call onSelectAgent when agent card is clicked', () => {
render(<AgentGrid category="general" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
const agentCard = screen.getByLabelText('Test Agent 1 agent card');
fireEvent.click(agentCard);
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
fireEvent.click(screen.getByTestId('agent-card-1'));
expect(mockOnSelectAgent).toHaveBeenCalledWith(mockAgents[0]);
});
});
describe('Pagination', () => {
it('should show "See More" button when hasMore is true', () => {
mockUseDynamicAgentQuery.mockReturnValue({
describe('Loading States', () => {
it('should show loading state when isLoading is true', () => {
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
...defaultMockQueryResult,
data: {
agents: mockAgents,
pagination: {
current: 1,
hasMore: true,
total: 10,
},
},
isLoading: true,
data: undefined,
});
render(<AgentGrid category="general" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
expect(screen.getByText('See more')).toBeInTheDocument();
// Should show skeleton loading state
expect(document.querySelector('.animate-pulse')).toBeInTheDocument();
});
it('should not show "See More" button when hasMore is false', () => {
mockUseDynamicAgentQuery.mockReturnValue({
it('should show empty state when no agents are available', () => {
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
...defaultMockQueryResult,
data: {
agents: mockAgents,
pagination: {
current: 1,
hasMore: false,
total: 2,
},
pages: [
{
data: [],
},
],
},
});
render(<AgentGrid category="general" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
expect(screen.queryByText('See more')).not.toBeInTheDocument();
expect(screen.getByText('No agents available')).toBeInTheDocument();
});
});
describe('Empty States', () => {
it('should show empty state for search results', () => {
mockUseDynamicAgentQuery.mockReturnValue({
describe('Error Handling', () => {
it('should show error display when query has error', () => {
const mockError = new Error('Failed to fetch agents');
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
...defaultMockQueryResult,
data: {
agents: [],
pagination: { current: 1, hasMore: false, total: 0 },
},
queryType: 'search',
error: mockError,
isError: true,
data: undefined,
});
const Wrapper = createWrapper();
render(
<AgentGrid category="all" searchQuery="no results" onSelectAgent={mockOnSelectAgent} />,
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
expect(screen.getByText('No agents found. Try another search term.')).toBeInTheDocument();
expect(screen.getByText('Error: Failed to fetch agents')).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument();
});
});
describe('Search Results', () => {
it('should show search results title when searching', () => {
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid
category="finance"
searchQuery="automation"
onSelectAgent={mockOnSelectAgent}
/>
</Wrapper>,
);
expect(screen.getByText('Results for "automation"')).toBeInTheDocument();
});
it('should show empty state for category with no agents', () => {
mockUseDynamicAgentQuery.mockReturnValue({
it('should show empty search results message', () => {
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
...defaultMockQueryResult,
data: {
agents: [],
pagination: { current: 1, hasMore: false, total: 0 },
pages: [
{
data: [],
},
],
},
queryType: 'category',
});
render(<AgentGrid category="hr" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid
category="finance"
searchQuery="nonexistent"
onSelectAgent={mockOnSelectAgent}
/>
</Wrapper>,
);
expect(screen.getByText('No agents found in this category')).toBeInTheDocument();
expect(screen.getByText('No results found')).toBeInTheDocument();
expect(screen.getByText('No agents found. Try another search term.')).toBeInTheDocument();
});
});
describe('Load More Functionality', () => {
it('should show "See more" button when hasNextPage is true', () => {
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
expect(
screen.getByRole('button', { name: 'Load more agents from Finance' }),
).toBeInTheDocument();
});
it('should not show "See more" button when hasNextPage is false', () => {
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
...defaultMockQueryResult,
hasNextPage: false,
});
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
expect(screen.queryByRole('button', { name: /Load more agents/ })).not.toBeInTheDocument();
});
});
});

2
client/src/components/SidePanel/Agents/__tests__/CategoryTabs.spec.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import CategoryTabs from '../CategoryTabs';

5
client/src/components/SidePanel/Agents/__tests__/ErrorDisplay.spec.tsx
View file

@ -38,6 +38,9 @@ const mockLocalize = jest.fn((key: string, options?: any) => {
com_agents_error_server_suggestion: 'Please try again in a few moments.',
com_agents_error_search_title: 'Search Error',
com_agents_error_category_title: 'Category Error',
com_agents_error_timeout_title: 'Connection Timeout',
com_agents_error_timeout_message: 'The request took too long to complete.',
com_agents_error_timeout_suggestion: 'Please check your internet connection and try again.',
com_agents_search_no_results: `No agents found for "${options?.query}"`,
com_agents_category_empty: `No agents found in the ${options?.category} category`,
com_agents_error_retry: 'Try Again',
@ -298,5 +301,3 @@ describe('ErrorDisplay', () => {
});
});
});
export default {};

4
client/src/components/SidePanel/Agents/__tests__/SearchBar.spec.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import SearchBar from '../SearchBar';
@ -9,7 +9,7 @@ jest.mock('~/hooks/useLocalize', () => () => (key: string) => key);
// Mock useDebounce hook
jest.mock('~/hooks', () => ({
useDebounce: (value: string, delay: number) => value, // Return value immediately for testing
useDebounce: (value: string) => value, // Return value immediately for testing
}));
describe('SearchBar', () => {

3
client/src/data-provider/Agents/index.ts
View file

@ -1,2 +1,5 @@
export * from './queries';
export * from './mutations';
// Re-export specific marketplace queries for easier imports
export { useGetAgentCategoriesQuery, useMarketplaceAgentsInfiniteQuery } from './queries';

230
client/src/data-provider/Agents/mutations.ts
View file

@ -1,12 +1,15 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { dataService, MutationKeys, QueryKeys, defaultOrderQuery } from 'librechat-data-provider';
import { dataService, MutationKeys, PERMISSION_BITS, QueryKeys } from 'librechat-data-provider';
import type * as t from 'librechat-data-provider';
import type { UseMutationResult } from '@tanstack/react-query';
import type { QueryClient, UseMutationResult } from '@tanstack/react-query';
/**
* AGENTS
*/
export const allAgentViewAndEditQueryKeys: t.AgentListParams[] = [
{ requiredPermission: PERMISSION_BITS.VIEW },
{ requiredPermission: PERMISSION_BITS.EDIT },
];
/**
* Create a new agent
*/
@ -18,21 +21,22 @@ export const useCreateAgentMutation = (
onMutate: (variables) => options?.onMutate?.(variables),
onError: (error, variables, context) => options?.onError?.(error, variables, context),
onSuccess: (newAgent, variables, context) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([
QueryKeys.agents,
defaultOrderQuery,
]);
((keys: t.AgentListParams[]) => {
keys.forEach((key) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([QueryKeys.agents, key]);
if (!listRes) {
return options?.onSuccess?.(newAgent, variables, context);
}
const currentAgents = [newAgent, ...JSON.parse(JSON.stringify(listRes.data))];
if (!listRes) {
return options?.onSuccess?.(newAgent, variables, context);
}
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, key], {
...listRes,
data: currentAgents,
});
});
})(allAgentViewAndEditQueryKeys);
invalidateAgentMarketplaceQueries(queryClient);
const currentAgents = [newAgent, ...JSON.parse(JSON.stringify(listRes.data))];
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
...listRes,
data: currentAgents,
});
return options?.onSuccess?.(newAgent, variables, context);
},
});
@ -63,30 +67,33 @@ export const useUpdateAgentMutation = (
return options?.onError?.(typedError, variables, context);
},
onSuccess: (updatedAgent, variables, context) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([
QueryKeys.agents,
defaultOrderQuery,
]);
((keys: t.AgentListParams[]) => {
keys.forEach((key) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([QueryKeys.agents, key]);
if (!listRes) {
return options?.onSuccess?.(updatedAgent, variables, context);
}
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
...listRes,
data: listRes.data.map((agent) => {
if (agent.id === variables.agent_id) {
return updatedAgent;
if (!listRes) {
return options?.onSuccess?.(updatedAgent, variables, context);
}
return agent;
}),
});
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, key], {
...listRes,
data: listRes.data.map((agent) => {
if (agent.id === variables.agent_id) {
return updatedAgent;
}
return agent;
}),
});
});
})(allAgentViewAndEditQueryKeys);
queryClient.setQueryData<t.Agent>([QueryKeys.agent, variables.agent_id], updatedAgent);
queryClient.setQueryData<t.Agent>(
[QueryKeys.agent, variables.agent_id, 'expanded'],
updatedAgent,
);
invalidateAgentMarketplaceQueries(queryClient);
return options?.onSuccess?.(updatedAgent, variables, context);
},
},
@ -108,24 +115,28 @@ export const useDeleteAgentMutation = (
onMutate: (variables) => options?.onMutate?.(variables),
onError: (error, variables, context) => options?.onError?.(error, variables, context),
onSuccess: (_data, variables, context) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([
QueryKeys.agents,
defaultOrderQuery,
]);
const data = ((keys: t.AgentListParams[]) => {
let data: t.Agent[] = [];
keys.forEach((key) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([QueryKeys.agents, key]);
if (!listRes) {
return options?.onSuccess?.(_data, variables, context);
}
if (!listRes) {
return options?.onSuccess?.(_data, variables, context);
}
const data = listRes.data.filter((agent) => agent.id !== variables.agent_id);
data = listRes.data.filter((agent) => agent.id !== variables.agent_id);
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
...listRes,
data,
});
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, key], {
...listRes,
data,
});
});
return data;
})(allAgentViewAndEditQueryKeys);
queryClient.removeQueries([QueryKeys.agent, variables.agent_id]);
queryClient.removeQueries([QueryKeys.agent, variables.agent_id, 'expanded']);
invalidateAgentMarketplaceQueries(queryClient);
return options?.onSuccess?.(_data, variables, data);
},
@ -147,22 +158,23 @@ export const useDuplicateAgentMutation = (
onMutate: options?.onMutate,
onError: options?.onError,
onSuccess: ({ agent, actions }, variables, context) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([
QueryKeys.agents,
defaultOrderQuery,
]);
if (listRes) {
const currentAgents = [agent, ...listRes.data];
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
...listRes,
data: currentAgents,
((keys: t.AgentListParams[]) => {
keys.forEach((key) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([QueryKeys.agents, key]);
if (listRes) {
const currentAgents = [agent, ...listRes.data];
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, key], {
...listRes,
data: currentAgents,
});
}
});
}
})(allAgentViewAndEditQueryKeys);
const existingActions = queryClient.getQueryData<t.Action[]>([QueryKeys.actions]) || [];
queryClient.setQueryData<t.Action[]>([QueryKeys.actions], existingActions.concat(actions));
invalidateAgentMarketplaceQueries(queryClient);
return options?.onSuccess?.({ agent, actions }, variables, context);
},
@ -207,26 +219,25 @@ export const useUpdateAgentAction = (
onMutate: (variables) => options?.onMutate?.(variables),
onError: (error, variables, context) => options?.onError?.(error, variables, context),
onSuccess: (updateAgentActionResponse, variables, context) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([
QueryKeys.agents,
defaultOrderQuery,
]);
if (!listRes) {
return options?.onSuccess?.(updateAgentActionResponse, variables, context);
}
const updatedAgent = updateAgentActionResponse[0];
((keys: t.AgentListParams[]) => {
keys.forEach((key) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([QueryKeys.agents, key]);
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
...listRes,
data: listRes.data.map((agent) => {
if (agent.id === variables.agent_id) {
return updatedAgent;
if (!listRes) {
return options?.onSuccess?.(updateAgentActionResponse, variables, context);
}
return agent;
}),
});
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, key], {
...listRes,
data: listRes.data.map((agent) => {
if (agent.id === variables.agent_id) {
return updatedAgent;
}
return agent;
}),
});
});
})(allAgentViewAndEditQueryKeys);
queryClient.setQueryData<t.Action[]>([QueryKeys.actions], (prev) => {
if (!prev) {
@ -280,28 +291,28 @@ export const useDeleteAgentAction = (
return action.action_id !== variables.action_id;
});
});
((keys: t.AgentListParams[]) => {
keys.forEach((key) => {
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, key], (prev) => {
if (!prev) {
return prev;
}
queryClient.setQueryData<t.AgentListResponse>(
[QueryKeys.agents, defaultOrderQuery],
(prev) => {
if (!prev) {
return prev;
}
return {
...prev,
data: prev.data.map((agent) => {
if (agent.id === variables.agent_id) {
return {
...agent,
tools: agent.tools?.filter((tool) => !tool.includes(domain ?? '')),
};
}
return agent;
}),
};
},
);
return {
...prev,
data: prev.data.map((agent) => {
if (agent.id === variables.agent_id) {
return {
...agent,
tools: agent.tools?.filter((tool) => !tool.includes(domain ?? '')),
};
}
return agent;
}),
};
});
});
})(allAgentViewAndEditQueryKeys);
const updaterFn = (prev) => {
if (!prev) {
return prev;
@ -342,25 +353,30 @@ export const useRevertAgentVersionMutation = (
onSuccess: (revertedAgent, variables, context) => {
queryClient.setQueryData<t.Agent>([QueryKeys.agent, variables.agent_id], revertedAgent);
const listRes = queryClient.getQueryData<t.AgentListResponse>([
QueryKeys.agents,
defaultOrderQuery,
]);
((keys: t.AgentListParams[]) => {
keys.forEach((key) => {
const listRes = queryClient.getQueryData<t.AgentListResponse>([QueryKeys.agents, key]);
if (listRes) {
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
...listRes,
data: listRes.data.map((agent) => {
if (agent.id === variables.agent_id) {
return revertedAgent;
}
return agent;
}),
if (listRes) {
queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, key], {
...listRes,
data: listRes.data.map((agent) => {
if (agent.id === variables.agent_id) {
return revertedAgent;
}
return agent;
}),
});
}
});
}
})(allAgentViewAndEditQueryKeys);
return options?.onSuccess?.(revertedAgent, variables, context);
},
},
);
};
export const invalidateAgentMarketplaceQueries = (queryClient: QueryClient) => {
queryClient.invalidateQueries([QueryKeys.marketplaceAgents]);
};

211
client/src/data-provider/Agents/queries.ts
View file

@ -1,12 +1,19 @@
import { QueryKeys, dataService, EModelEndpoint, defaultOrderQuery } from 'librechat-data-provider';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import type { QueryObserverResult, UseQueryOptions } from '@tanstack/react-query';
import { QueryKeys, dataService, EModelEndpoint, PERMISSION_BITS } from 'librechat-data-provider';
import { useQuery, useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
import type {
QueryObserverResult,
UseQueryOptions,
UseInfiniteQueryOptions,
} from '@tanstack/react-query';
import type t from 'librechat-data-provider';
/**
* AGENTS
*/
export const defaultAgentParams: t.AgentListParams = {
limit: 10,
requiredPermission: PERMISSION_BITS.EDIT,
};
/**
* Hook for getting all available tools for A
*/
@ -27,7 +34,7 @@ export const useAvailableAgentToolsQuery = (): QueryObserverResult<t.TPlugin[]>
* Hook for listing all Agents, with optional parameters provided for pagination and sorting
*/
export const useListAgentsQuery = <TData = t.AgentListResponse>(
params: t.AgentListParams = defaultOrderQuery,
params: t.AgentListParams = defaultAgentParams,
config?: UseQueryOptions<t.AgentListResponse, unknown, TData>,
): QueryObserverResult<TData> => {
const queryClient = useQueryClient();
@ -76,143 +83,6 @@ export const useGetAgentByIdQuery = (
);
};
/**
* MARKETPLACE QUERIES
*/
/**
* Hook for getting all agent categories with counts
*/
export const useGetAgentCategoriesQuery = <TData = t.TMarketplaceCategory[]>(
config?: UseQueryOptions<t.TMarketplaceCategory[], unknown, TData>,
): QueryObserverResult<TData> => {
const queryClient = useQueryClient();
const endpointsConfig = queryClient.getQueryData<t.TEndpointsConfig>([QueryKeys.endpoints]);
const enabled = !!endpointsConfig?.[EModelEndpoint.agents];
return useQuery<t.TMarketplaceCategory[], unknown, TData>(
[QueryKeys.agents, 'categories'],
() => dataService.getAgentCategories(),
{
staleTime: 1000 * 60 * 15, // 15 minutes - categories rarely change
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
retry: false,
...config,
enabled: config?.enabled !== undefined ? config.enabled && enabled : enabled,
},
);
};
/**
* Hook for getting promoted/top picks agents with pagination
*/
export const useGetPromotedAgentsQuery = <TData = t.AgentListResponse>(
params: { page?: number; limit?: number; showAll?: string } = { page: 1, limit: 6 },
config?: UseQueryOptions<t.AgentListResponse, unknown, TData>,
): QueryObserverResult<TData> => {
const queryClient = useQueryClient();
const endpointsConfig = queryClient.getQueryData<t.TEndpointsConfig>([QueryKeys.endpoints]);
const enabled = !!endpointsConfig?.[EModelEndpoint.agents];
return useQuery<t.AgentListResponse, unknown, TData>(
[QueryKeys.agents, 'promoted', params],
() => dataService.getPromotedAgents(params),
{
staleTime: 1000 * 60, // 1 minute stale time
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
retry: false,
keepPreviousData: true,
...config,
enabled: config?.enabled !== undefined ? config.enabled && enabled : enabled,
},
);
};
/**
* Hook for getting all agents with pagination (for "all" category)
*/
export const useGetAllAgentsQuery = <TData = t.AgentListResponse>(
params: { page?: number; limit?: number } = { page: 1, limit: 6 },
config?: UseQueryOptions<t.AgentListResponse, unknown, TData>,
): QueryObserverResult<TData> => {
const queryClient = useQueryClient();
const endpointsConfig = queryClient.getQueryData<t.TEndpointsConfig>([QueryKeys.endpoints]);
const enabled = !!endpointsConfig?.[EModelEndpoint.agents];
return useQuery<t.AgentListResponse, unknown, TData>(
[QueryKeys.agents, 'all', params],
() => dataService.getAllAgents(params),
{
staleTime: 1000 * 60, // 1 minute stale time
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
retry: false,
keepPreviousData: true,
...config,
enabled: config?.enabled !== undefined ? config.enabled && enabled : enabled,
},
);
};
/**
* Hook for getting agents by category with pagination
*/
export const useGetAgentsByCategoryQuery = <TData = t.AgentListResponse>(
params: { category: string; page?: number; limit?: number },
config?: UseQueryOptions<t.AgentListResponse, unknown, TData>,
): QueryObserverResult<TData> => {
const queryClient = useQueryClient();
const endpointsConfig = queryClient.getQueryData<t.TEndpointsConfig>([QueryKeys.endpoints]);
const enabled = !!endpointsConfig?.[EModelEndpoint.agents];
return useQuery<t.AgentListResponse, unknown, TData>(
[QueryKeys.agents, 'category', params],
() => dataService.getAgentsByCategory(params),
{
staleTime: 1000 * 60, // 1 minute stale time
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
retry: false,
keepPreviousData: true,
...config,
enabled: config?.enabled !== undefined ? config.enabled && enabled : enabled,
},
);
};
/**
* Hook for searching agents with pagination and filtering
*/
export const useSearchAgentsQuery = <TData = t.AgentListResponse>(
params: { q: string; category?: string; page?: number; limit?: number },
config?: UseQueryOptions<t.AgentListResponse, unknown, TData>,
): QueryObserverResult<TData> => {
const queryClient = useQueryClient();
const endpointsConfig = queryClient.getQueryData<t.TEndpointsConfig>([QueryKeys.endpoints]);
const enabled = !!endpointsConfig?.[EModelEndpoint.agents] && !!params.q;
return useQuery<t.AgentListResponse, unknown, TData>(
[QueryKeys.agents, 'search', params],
() => dataService.searchAgents(params),
{
staleTime: 1000 * 60, // 1 minute stale time
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
retry: false,
keepPreviousData: true,
...config,
enabled: config?.enabled !== undefined ? config.enabled && enabled : enabled,
},
);
};
/**
* Hook for retrieving full agent details including sensitive configuration (EDIT permission)
*/
@ -235,3 +105,60 @@ export const useGetExpandedAgentByIdQuery = (
},
);
};
/**
* MARKETPLACE
*/
/**
* Hook for getting agent categories for marketplace tabs
*/
export const useGetAgentCategoriesQuery = (
config?: UseQueryOptions<t.TMarketplaceCategory[]>,
): QueryObserverResult<t.TMarketplaceCategory[]> => {
return useQuery<t.TMarketplaceCategory[]>(
[QueryKeys.agentCategories],
() => dataService.getAgentCategories(),
{
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
staleTime: 5 * 60 * 1000, // Cache for 5 minutes
...config,
},
);
};
/**
* Hook for infinite loading of marketplace agents with cursor-based pagination
*/
export const useMarketplaceAgentsInfiniteQuery = (
params: {
requiredPermission: number;
category?: string;
search?: string;
limit?: number;
promoted?: 0 | 1;
cursor?: string; // For pagination
},
config?: UseInfiniteQueryOptions<t.AgentListResponse, unknown>,
) => {
return useInfiniteQuery<t.AgentListResponse>({
queryKey: [QueryKeys.marketplaceAgents, params],
queryFn: ({ pageParam }) => {
const queryParams = { ...params };
if (pageParam) {
queryParams.cursor = pageParam.toString();
}
return dataService.getMarketplaceAgents(queryParams);
},
getNextPageParam: (lastPage) => lastPage?.after ?? undefined,
enabled: !!params.requiredPermission,
keepPreviousData: true,
staleTime: 2 * 60 * 1000, // 2 minutes
cacheTime: 10 * 60 * 1000, // 10 minutes
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
...config,
});
};

73
client/src/hooks/Agents/__tests__/useAgentCategories.spec.tsx
View file

@ -1,6 +1,8 @@
import { renderHook } from '@testing-library/react';
import React from 'react';
import { renderHook, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import useAgentCategories from '../useAgentCategories';
import { AGENT_CATEGORIES, EMPTY_AGENT_CATEGORY } from '~/constants/agentCategories';
import { EMPTY_AGENT_CATEGORY } from '~/constants/agentCategories';
// Mock the useLocalize hook
jest.mock('~/hooks/useLocalize', () => ({
@ -11,25 +13,68 @@ jest.mock('~/hooks/useLocalize', () => ({
},
}));
describe('useAgentCategories', () => {
it('should return processed categories with correct structure', () => {
const { result } = renderHook(() => useAgentCategories());
// Mock the data provider
jest.mock('~/data-provider/Agents', () => ({
useGetAgentCategoriesQuery: jest.fn(() => ({
data: [
{ value: 'general', label: 'com_ui_agent_category_general' },
{ value: 'hr', label: 'com_ui_agent_category_hr' },
{ value: 'rd', label: 'com_ui_agent_category_rd' },
{ value: 'finance', label: 'com_ui_agent_category_finance' },
{ value: 'it', label: 'com_ui_agent_category_it' },
{ value: 'sales', label: 'com_ui_agent_category_sales' },
{ value: 'aftersales', label: 'com_ui_agent_category_aftersales' },
{ value: 'promoted', label: 'Promoted' }, // Should be filtered out
{ value: 'all', label: 'All' }, // Should be filtered out
],
isLoading: false,
error: null,
})),
}));
// Check that we have the expected number of categories
expect(result.current.categories.length).toBe(AGENT_CATEGORIES.length);
const createWrapper = () => {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: false,
},
},
});
return ({ children }: { children: React.ReactNode }) => (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
};
describe('useAgentCategories', () => {
it('should return processed categories with correct structure', async () => {
const { result } = renderHook(() => useAgentCategories(), {
wrapper: createWrapper(),
});
await waitFor(() => {
// Check that we have the expected number of categories (excluding 'promoted' and 'all')
expect(result.current.categories.length).toBe(7);
});
// Check that the first category has the expected structure
const firstCategory = result.current.categories[0];
const firstOriginalCategory = AGENT_CATEGORIES[0];
expect(firstCategory.value).toBe(firstOriginalCategory.value);
// Check that labels are properly translated
expect(firstCategory.label).toBe('General (Translated)');
expect(firstCategory.value).toBe('general');
expect(firstCategory.label).toBe('com_ui_agent_category_general');
expect(firstCategory.className).toBe('w-full');
// Verify special categories are filtered out
const categoryValues = result.current.categories.map((cat) => cat.value);
expect(categoryValues).not.toContain('promoted');
expect(categoryValues).not.toContain('all');
// Check the empty category
expect(result.current.emptyCategory.value).toBe(EMPTY_AGENT_CATEGORY.value);
expect(result.current.emptyCategory.label).toBeTruthy();
expect(result.current.emptyCategory.label).toBe('General (Translated)');
expect(result.current.emptyCategory.className).toBe('w-full');
// Check loading state
expect(result.current.isLoading).toBe(false);
expect(result.current.error).toBeNull();
});
});

360
client/src/hooks/Agents/__tests__/useDynamicAgentQuery.spec.ts
View file

@ -1,360 +0,0 @@
import { renderHook } from '@testing-library/react';
import { useDynamicAgentQuery } from '../useDynamicAgentQuery';
import {
useGetPromotedAgentsQuery,
useGetAgentsByCategoryQuery,
useSearchAgentsQuery,
} from '~/data-provider';
// Mock the data provider queries
jest.mock('~/data-provider', () => ({
useGetPromotedAgentsQuery: jest.fn(),
useGetAgentsByCategoryQuery: jest.fn(),
useSearchAgentsQuery: jest.fn(),
}));
const mockUseGetPromotedAgentsQuery = useGetPromotedAgentsQuery as jest.MockedFunction<
typeof useGetPromotedAgentsQuery
>;
const mockUseGetAgentsByCategoryQuery = useGetAgentsByCategoryQuery as jest.MockedFunction<
typeof useGetAgentsByCategoryQuery
>;
const mockUseSearchAgentsQuery = useSearchAgentsQuery as jest.MockedFunction<
typeof useSearchAgentsQuery
>;
describe('useDynamicAgentQuery', () => {
const defaultMockQueryResult = {
data: undefined,
isLoading: false,
error: null,
isFetching: false,
refetch: jest.fn(),
};
beforeEach(() => {
jest.clearAllMocks();
// Set default mock returns
mockUseGetPromotedAgentsQuery.mockReturnValue(defaultMockQueryResult as any);
mockUseGetAgentsByCategoryQuery.mockReturnValue(defaultMockQueryResult as any);
mockUseSearchAgentsQuery.mockReturnValue(defaultMockQueryResult as any);
});
describe('Search Query Type', () => {
it('should use search query when searchQuery is provided', () => {
const mockSearchResult = {
...defaultMockQueryResult,
data: { agents: [], pagination: { hasMore: false } },
};
mockUseSearchAgentsQuery.mockReturnValue(mockSearchResult as any);
const { result } = renderHook(() =>
useDynamicAgentQuery({
category: 'hr',
searchQuery: 'test search',
page: 1,
limit: 6,
}),
);
// Should call search query with correct parameters
expect(mockUseSearchAgentsQuery).toHaveBeenCalledWith(
{
q: 'test search',
category: 'hr',
page: 1,
limit: 6,
},
expect.objectContaining({
enabled: true,
staleTime: 120000,
refetchOnWindowFocus: false,
keepPreviousData: true,
refetchOnMount: false,
refetchOnReconnect: false,
retry: 1,
}),
);
// Should return search query result
expect(result.current.data).toBe(mockSearchResult.data);
expect(result.current.queryType).toBe('search');
});
it('should not include category in search when category is "all" or "promoted"', () => {
renderHook(() =>
useDynamicAgentQuery({
category: 'all',
searchQuery: 'test search',
page: 1,
limit: 6,
}),
);
expect(mockUseSearchAgentsQuery).toHaveBeenCalledWith(
{
q: 'test search',
page: 1,
limit: 6,
// No category parameter should be included
},
expect.any(Object),
);
});
});
describe('Promoted Query Type', () => {
it('should use promoted query when category is "promoted" and no search', () => {
const mockPromotedResult = {
...defaultMockQueryResult,
data: { agents: [], pagination: { hasMore: false } },
};
mockUseGetPromotedAgentsQuery.mockReturnValue(mockPromotedResult as any);
const { result } = renderHook(() =>
useDynamicAgentQuery({
category: 'promoted',
searchQuery: '',
page: 2,
limit: 8,
}),
);
// Should call promoted query with correct parameters (no showAll)
expect(mockUseGetPromotedAgentsQuery).toHaveBeenCalledWith(
{
page: 2,
limit: 8,
},
expect.objectContaining({
enabled: true,
}),
);
expect(result.current.data).toBe(mockPromotedResult.data);
expect(result.current.queryType).toBe('promoted');
});
});
describe('All Agents Query Type', () => {
it('should use promoted query with showAll when category is "all" and no search', () => {
const mockAllResult = {
...defaultMockQueryResult,
data: { agents: [], pagination: { hasMore: false } },
};
// Mock the second call to useGetPromotedAgentsQuery (for "all" category)
mockUseGetPromotedAgentsQuery
.mockReturnValueOnce(defaultMockQueryResult as any) // First call for promoted
.mockReturnValueOnce(mockAllResult as any); // Second call for all
const { result } = renderHook(() =>
useDynamicAgentQuery({
category: 'all',
searchQuery: '',
page: 1,
limit: 6,
}),
);
// Should call promoted query with showAll parameter
expect(mockUseGetPromotedAgentsQuery).toHaveBeenCalledWith(
{
page: 1,
limit: 6,
showAll: 'true',
},
expect.objectContaining({
enabled: true,
}),
);
expect(result.current.queryType).toBe('all');
});
});
describe('Category Query Type', () => {
it('should use category query for specific categories', () => {
const mockCategoryResult = {
...defaultMockQueryResult,
data: { agents: [], pagination: { hasMore: false } },
};
mockUseGetAgentsByCategoryQuery.mockReturnValue(mockCategoryResult as any);
const { result } = renderHook(() =>
useDynamicAgentQuery({
category: 'finance',
searchQuery: '',
page: 3,
limit: 10,
}),
);
expect(mockUseGetAgentsByCategoryQuery).toHaveBeenCalledWith(
{
category: 'finance',
page: 3,
limit: 10,
},
expect.objectContaining({
enabled: true,
}),
);
expect(result.current.data).toBe(mockCategoryResult.data);
expect(result.current.queryType).toBe('category');
});
});
describe('Query Configuration', () => {
it('should apply correct query configuration to all queries', () => {
renderHook(() =>
useDynamicAgentQuery({
category: 'hr',
searchQuery: '',
page: 1,
limit: 6,
}),
);
const expectedConfig = expect.objectContaining({
staleTime: 120000,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
retry: 1,
keepPreviousData: true,
});
expect(mockUseGetAgentsByCategoryQuery).toHaveBeenCalledWith(
expect.any(Object),
expectedConfig,
);
});
it('should enable only the correct query based on query type', () => {
renderHook(() =>
useDynamicAgentQuery({
category: 'hr',
searchQuery: '',
page: 1,
limit: 6,
}),
);
// Category query should be enabled
expect(mockUseGetAgentsByCategoryQuery).toHaveBeenCalledWith(
expect.any(Object),
expect.objectContaining({ enabled: true }),
);
// Other queries should be disabled
expect(mockUseSearchAgentsQuery).toHaveBeenCalledWith(
expect.any(Object),
expect.objectContaining({ enabled: false }),
);
expect(mockUseGetPromotedAgentsQuery).toHaveBeenCalledWith(
expect.any(Object),
expect.objectContaining({ enabled: false }),
);
});
});
describe('Default Parameters', () => {
it('should use default page and limit when not provided', () => {
renderHook(() =>
useDynamicAgentQuery({
category: 'general',
searchQuery: '',
}),
);
expect(mockUseGetAgentsByCategoryQuery).toHaveBeenCalledWith(
{
category: 'general',
page: 1,
limit: 6,
},
expect.any(Object),
);
});
});
describe('Return Values', () => {
it('should return all necessary query properties', () => {
const mockResult = {
data: { agents: [{ id: '1', name: 'Test Agent' }] },
isLoading: true,
error: null,
isFetching: false,
refetch: jest.fn(),
};
mockUseGetAgentsByCategoryQuery.mockReturnValue(mockResult as any);
const { result } = renderHook(() =>
useDynamicAgentQuery({
category: 'it',
searchQuery: '',
page: 1,
limit: 6,
}),
);
expect(result.current).toEqual({
data: mockResult.data,
isLoading: mockResult.isLoading,
error: mockResult.error,
isFetching: mockResult.isFetching,
refetch: mockResult.refetch,
queryType: 'category',
});
});
});
describe('Edge Cases', () => {
it('should handle empty search query as no search', () => {
renderHook(() =>
useDynamicAgentQuery({
category: 'promoted',
searchQuery: '', // Empty string should not trigger search
page: 1,
limit: 6,
}),
);
// Should use promoted query, not search query
expect(mockUseGetPromotedAgentsQuery).toHaveBeenCalledWith(
expect.any(Object),
expect.objectContaining({ enabled: true }),
);
expect(mockUseSearchAgentsQuery).toHaveBeenCalledWith(
expect.any(Object),
expect.objectContaining({ enabled: false }),
);
});
it('should fallback to promoted query for unknown query types', () => {
const mockPromotedResult = {
...defaultMockQueryResult,
data: { agents: [] },
};
mockUseGetPromotedAgentsQuery.mockReturnValue(mockPromotedResult as any);
const { result } = renderHook(() =>
useDynamicAgentQuery({
category: 'unknown-category',
searchQuery: '',
page: 1,
limit: 6,
}),
);
// Should determine this as 'category' type and use category query
expect(result.current.queryType).toBe('category');
});
});
});

1
client/src/hooks/Agents/index.ts
View file

@ -1,5 +1,4 @@
export { default as useAgentsMap } from './useAgentsMap';
export { default as useSelectAgent } from './useSelectAgent';
export { default as useAgentCategories } from './useAgentCategories';
export { useDynamicAgentQuery } from './useDynamicAgentQuery';
export type { ProcessedAgentCategory } from './useAgentCategories';

3
client/src/hooks/Agents/useAgentCategories.tsx
View file

@ -1,7 +1,7 @@
import { useMemo } from 'react';
import useLocalize from '~/hooks/useLocalize';
import { useGetAgentCategoriesQuery } from '~/data-provider';
import { useGetAgentCategoriesQuery } from '~/data-provider/Agents';
import { EMPTY_AGENT_CATEGORY } from '~/constants/agentCategories';
// This interface matches the structure used by the ControlCombobox component
@ -9,6 +9,7 @@ export interface ProcessedAgentCategory {
label: string; // Translated label
value: string; // Category value
className?: string;
icon?: string;
}
/**

13
client/src/hooks/Agents/useAgentsMap.ts
View file

@ -1,4 +1,4 @@
import { TAgentsMap } from 'librechat-data-provider';
import { PERMISSION_BITS, TAgentsMap } from 'librechat-data-provider';
import { useMemo } from 'react';
import { useListAgentsQuery } from '~/data-provider';
import { mapAgents } from '~/utils';
@ -8,10 +8,13 @@ export default function useAgentsMap({
}: {
isAuthenticated: boolean;
}): TAgentsMap | undefined {
const { data: agentsList = null } = useListAgentsQuery(undefined, {
select: (res) => mapAgents(res.data),
enabled: isAuthenticated,
});
const { data: agentsList = null } = useListAgentsQuery(
{ requiredPermission: PERMISSION_BITS.EDIT },
{
select: (res) => mapAgents(res.data),
enabled: isAuthenticated,
},
);
const agents = useMemo<TAgentsMap | undefined>(() => {
return agentsList !== null ? agentsList : undefined;

112
client/src/hooks/Agents/useDynamicAgentQuery.ts
View file

@ -1,112 +0,0 @@
import { useMemo } from 'react';
import type { UseQueryOptions } from '@tanstack/react-query';
import type t from 'librechat-data-provider';
import {
useGetPromotedAgentsQuery,
useGetAgentsByCategoryQuery,
useSearchAgentsQuery,
} from '~/data-provider';
interface UseDynamicAgentQueryParams {
category: string;
searchQuery: string;
page?: number;
limit?: number;
}
/**
* Single dynamic query hook that replaces 4 separate conditional queries
* Determines the appropriate query based on category and search state
*/
export const useDynamicAgentQuery = ({
category,
searchQuery,
page = 1,
limit = 6,
}: UseDynamicAgentQueryParams) => {
// Shared query configuration optimized to prevent unnecessary loading states
const queryConfig: UseQueryOptions<t.AgentListResponse> = useMemo(
() => ({
staleTime: 1000 * 60 * 2, // 2 minutes - agents don't change frequently
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
retry: 1,
keepPreviousData: true,
// Removed placeholderData due to TypeScript compatibility - keepPreviousData is sufficient
}),
[],
);
// Determine query type and parameters based on current state
const queryType = useMemo(() => {
if (searchQuery) return 'search';
if (category === 'promoted') return 'promoted';
if (category === 'all') return 'all';
return 'category';
}, [category, searchQuery]);
// Search query - when user is searching
const searchQuery_result = useSearchAgentsQuery(
{
q: searchQuery,
...(category !== 'all' && category !== 'promoted' && { category }),
page,
limit,
},
{
...queryConfig,
enabled: queryType === 'search',
},
);
// Promoted agents query - for "Top Picks" tab
const promotedQuery = useGetPromotedAgentsQuery(
{ page, limit },
{
...queryConfig,
enabled: queryType === 'promoted',
},
);
// All agents query - for "All" tab (promoted endpoint with showAll parameter)
const allAgentsQuery = useGetPromotedAgentsQuery(
{ page, limit, showAll: 'true' },
{
...queryConfig,
enabled: queryType === 'all',
},
);
// Category-specific query - for individual categories
const categoryQuery = useGetAgentsByCategoryQuery(
{ category, page, limit },
{
...queryConfig,
enabled: queryType === 'category',
},
);
// Return the active query based on current state
const activeQuery = useMemo(() => {
switch (queryType) {
case 'search':
return searchQuery_result;
case 'promoted':
return promotedQuery;
case 'all':
return allAgentsQuery;
case 'category':
return categoryQuery;
default:
return promotedQuery; // fallback
}
}, [queryType, searchQuery_result, promotedQuery, allAgentsQuery, categoryQuery]);
return {
...activeQuery,
queryType, // Expose query type for debugging/logging
};
};

46
client/src/hooks/Input/useMentions.ts
View file

@ -8,6 +8,7 @@ import {
isAgentsEndpoint,
getConfigDefaults,
isAssistantsEndpoint,
PERMISSION_BITS,
} from 'librechat-data-provider';
import type { TAssistantsMap, TEndpointsConfig } from 'librechat-data-provider';
import type { MentionOption } from '~/common';
@ -79,28 +80,31 @@ export default function useMentions({
() => startupConfig?.interface ?? defaultInterface,
[startupConfig?.interface],
);
const { data: agentsList = null } = useListAgentsQuery(undefined, {
enabled: hasAgentAccess && interfaceConfig.modelSelect === true,
select: (res) => {
const { data } = res;
return data.map(({ id, name, avatar }) => ({
value: id,
label: name ?? '',
type: EModelEndpoint.agents,
icon: EndpointIcon({
conversation: {
agent_id: id,
endpoint: EModelEndpoint.agents,
iconURL: avatar?.filepath,
},
containerClassName: 'shadow-stroke overflow-hidden rounded-full',
endpointsConfig: endpointsConfig,
context: 'menu-item',
size: 20,
}),
}));
const { data: agentsList = null } = useListAgentsQuery(
{ requiredPermission: PERMISSION_BITS.VIEW },
{
enabled: hasAgentAccess && interfaceConfig.modelSelect === true,
select: (res) => {
const { data } = res;
return data.map(({ id, name, avatar }) => ({
value: id,
label: name ?? '',
type: EModelEndpoint.agents,
icon: EndpointIcon({
conversation: {
agent_id: id,
endpoint: EModelEndpoint.agents,
iconURL: avatar?.filepath,
},
containerClassName: 'shadow-stroke overflow-hidden rounded-full',
endpointsConfig: endpointsConfig,
context: 'menu-item',
size: 20,
}),
}));
},
},
});
);
const assistantListMap = useMemo(
() => ({
[EModelEndpoint.assistants]: listMap[EModelEndpoint.assistants]

10
client/src/hooks/Nav/useSideNavLinks.ts
View file

@ -1,11 +1,5 @@
import { useMemo } from 'react';
import {
MessageSquareQuote,
ArrowRightToLine,
Settings2, Database,
Bookmark,
LayoutGrid,
} from 'lucide-react';
import { MessageSquareQuote, ArrowRightToLine, Settings2, Database, Bookmark } from 'lucide-react';
import {
isAssistantsEndpoint,
isAgentsEndpoint,
@ -27,7 +21,6 @@ import FilesPanel from '~/components/SidePanel/Files/Panel';
import MCPPanel from '~/components/SidePanel/MCP/MCPPanel';
import { useGetStartupConfig } from '~/data-provider';
import { useHasAccess } from '~/hooks';
import { useNavigate } from 'react-router-dom';
export default function useSideNavLinks({
hidePanel,
@ -44,7 +37,6 @@ export default function useSideNavLinks({
interfaceConfig: Partial<TInterfaceConfig>;
endpointsConfig: TEndpointsConfig;
}) {
const navigate = useNavigate();
const hasAccessToPrompts = useHasAccess({
permissionType: PermissionTypes.PROMPTS,
permission: Permissions.USE,

9
client/src/locales/en/translation.json
View file

@ -1132,9 +1132,7 @@
"com_agents_link_copied": "Link copied",
"com_agents_link_copy_failed": "Failed to copy link",
"com_agents_more_options": "More options",
"com_agents_close": "Close",
"com_agents_loading": "Loading...",
"com_agents_loading_description": "Loading agent description...",
"com_agents_error_loading": "Error loading agents",
"com_agents_error_searching": "Error searching agents",
"com_agents_error_title": "Something went wrong",
@ -1154,6 +1152,9 @@
"com_agents_error_server_suggestion": "Please try again in a few moments.",
"com_agents_error_search_title": "Search Error",
"com_agents_error_category_title": "Category Error",
"com_agents_error_timeout_title": "Connection Timeout",
"com_agents_error_timeout_message": "The request took too long to complete.",
"com_agents_error_timeout_suggestion": "Please check your internet connection and try again.",
"com_agents_search_no_results": "No agents found for \"{{query}}\"",
"com_agents_category_empty": "No agents found in the {{category}} category",
"com_agents_error_retry": "Try Again",
@ -1170,5 +1171,7 @@
"com_agents_no_results": "No agents found. Try another search term.",
"com_agents_results_for": "Results for '{{query}}'",
"com_nav_agents_marketplace": "Agent Marketplace",
"com_agents_marketplace_subtitle": "Discover and use powerful AI agents to enhance your workflows and productivity"
"com_agents_marketplace_subtitle": "Discover and use powerful AI agents to enhance your workflows and productivity",
"com_ui_agent_name_is_required": "Agent name is required",
"com_agents_missing_name": "Please type in a name before creating an agent."
}

10
client/src/utils/__tests__/agents.spec.tsx
View file

@ -33,7 +33,7 @@ describe('Agent Utilities', () => {
id: '1',
name: 'Test Agent',
avatar: '/path/to/avatar.png',
} as t.Agent;
} as unknown as t.Agent;
expect(getAgentAvatarUrl(agent)).toBe('/path/to/avatar.png');
});
@ -62,7 +62,7 @@ describe('Agent Utilities', () => {
id: '1',
name: 'Test Agent',
avatar: '/test-avatar.png',
} as t.Agent;
} as unknown as t.Agent;
render(<div>{renderAgentAvatar(agent)}</div>);
@ -90,7 +90,7 @@ describe('Agent Utilities', () => {
id: '1',
name: 'Test Agent',
avatar: '/test-avatar.png',
} as t.Agent;
} as unknown as t.Agent;
const { rerender } = render(<div>{renderAgentAvatar(agent, { size: 'sm' })}</div>);
expect(screen.getByAltText('Test Agent avatar')).toHaveClass('h-12', 'w-12');
@ -107,7 +107,7 @@ describe('Agent Utilities', () => {
id: '1',
name: 'Test Agent',
avatar: '/test-avatar.png',
} as t.Agent;
} as unknown as t.Agent;
render(<div>{renderAgentAvatar(agent, { className: 'custom-class' })}</div>);
@ -120,7 +120,7 @@ describe('Agent Utilities', () => {
id: '1',
name: 'Test Agent',
avatar: '/test-avatar.png',
} as t.Agent;
} as unknown as t.Agent;
const { rerender } = render(<div>{renderAgentAvatar(agent, { showBorder: true })}</div>);
expect(screen.getByAltText('Test Agent avatar')).toHaveClass('border-2');