mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-31 23:58:50 +01:00
🏪 feat: Agent Marketplace
bugfix: Enhance Agent and AgentCategory schemas with new fields for category, support contact, and promotion status refactored and moved agent category methods and schema to data-schema package 🔧 fix: Merge and Rebase Conflicts - 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 🔧 fix: Fixed agent actions access feat: Add role-level permissions for agent sharing people picker - Add PEOPLE_PICKER permission type with VIEW_USERS and VIEW_GROUPS permissions - Create custom middleware for query-aware permission validation - Implement permission-based type filtering in PeoplePicker component - Hide people picker UI when user lacks permissions, show only public toggle - Support granular access: users-only, groups-only, or mixed search modes refactor: Replace marketplace interface config with permission-based system - Add MARKETPLACE permission type to handle marketplace access control - Update interface configuration to use role-based marketplace settings (admin/user) - Replace direct marketplace boolean config with permission-based checks - Modify frontend components to use marketplace permissions instead of interface config - Update agent query hooks to use marketplace permissions for determining permission levels - Add marketplace configuration structure similar to peoplePicker in YAML config - Backend now sets MARKETPLACE permissions based on interface configuration - When marketplace enabled: users get agents with EDIT permissions in dropdown lists (builder mode) - When marketplace disabled: users get agents with VIEW permissions in dropdown lists (browse mode) 🔧 fix: Redirect to New Chat if No Marketplace Access and Required Agent Name Placeholder (#8213) * Fix: Fix the redirect to new chat page if access to marketplace is denied * Fixed the required agent name placeholder --------- Co-authored-by: Atef Bellaaj <slalom.bellaaj@external.daimlertruck.com> chore: fix tests, remove unnecessary imports refactor: Implement permission checks for file access via agents - Updated `hasAccessToFilesViaAgent` to utilize permission checks for VIEW and EDIT access. - Replaced project-based access validation with permission-based checks. - Enhanced tests to cover new permission logic and ensure proper access control for files associated with agents. - Cleaned up imports and initialized models in test files for consistency. refactor: Enhance test setup and cleanup for file access control - Introduced modelsToCleanup array to track models added during tests for proper cleanup. - Updated afterAll hooks in test files to ensure all collections are cleared and only added models are deleted. - Improved consistency in model initialization across test files. - Added comments for clarity on cleanup processes and test data management. chore: Update Jest configuration and test setup for improved timeout handling - Added a global test timeout of 30 seconds in jest.config.js. - Configured jest.setTimeout in jestSetup.js to allow individual test overrides if needed. - Enhanced test reliability by ensuring consistent timeout settings across all tests. refactor: Implement file access filtering based on agent permissions - Introduced `filterFilesByAgentAccess` function to filter files based on user access through agents. - Updated `getFiles` and `primeFiles` functions to utilize the new filtering logic. - Moved `hasAccessToFilesViaAgent` function from the File model to permission services, adjusting imports accordingly - Enhanced tests to ensure proper access control and filtering behavior for files associated with agents. fix: make support_contact field a nested object rather than a sub-document refactor: Update support_contact field initialization in agent model - Removed handling for empty support_contact object in createAgent function. - Changed default value of support_contact in agent schema to undefined. test: Add comprehensive tests for support_contact field handling and versioning refactor: remove unused avatar upload mutation field and add informational toast for success chore: add missing SidePanelProvider for AgentMarketplace and organize imports fix: resolve agent selection race condition in marketplace HandleStartChat - Set agent in localStorage before newConversation to prevent useSelectorEffects from auto-selecting previous agent fix: resolve agent dropdown showing raw ID instead of agent info from URL - Add proactive agent fetching when agent_id is present in URL parameters - Inject fetched agent into agents cache so dropdowns display proper name/avatar - Use useAgentsMap dependency to ensure proper cache initialization timing - Prevents raw agent IDs from showing in UI when visiting shared agent links Fix: Agents endpoint renamed to "My Agent" for less confusion with the Marketplace agents. chore: fix ESLint issues and Test Mocks ci: update permissions structure in loadDefaultInterface tests - Refactored permissions for MEMORY and added new permissions for MARKETPLACE and PEOPLE_PICKER. - Ensured consistent structure for permissions across different types. feat: support_contact validation to allow empty email strings
This commit is contained in:
“Praneeth
Danny Avila
parent
76d75030b9
commit
6bb6d2044b
95 changed files with 3770 additions and 2728 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import React, { useCallback, useContext } from 'react';
|
|||
import { LayoutGrid } from 'lucide-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { QueryKeys, Constants, Permissions, PermissionTypes } from 'librechat-data-provider';
|
||||
import { NewChatIcon, MobileSidebar, Sidebar, TooltipAnchor, Button } from '@librechat/client';
|
||||
import { QueryKeys, Constants, PermissionTypes, Permissions } from 'librechat-data-provider';
|
||||
import { TooltipAnchor, NewChatIcon, MobileSidebar, Sidebar, Button } from '@librechat/client';
|
||||
import type { TMessage } from 'librechat-data-provider';
|
||||
import { useLocalize, useNewConvo, useHasAccess, AuthContext } from '~/hooks';
|
||||
import store from '~/store';
|
||||
|
|
@ -32,6 +32,10 @@ export default function NewChat({
|
|||
permissionType: PermissionTypes.AGENTS,
|
||||
permission: Permissions.USE,
|
||||
});
|
||||
const hasAccessToMarketplace = useHasAccess({
|
||||
permissionType: PermissionTypes.MARKETPLACE,
|
||||
permission: Permissions.USE,
|
||||
});
|
||||
|
||||
const clickHandler: React.MouseEventHandler<HTMLButtonElement> = useCallback(
|
||||
(e) => {
|
||||
|
|
@ -65,9 +69,8 @@ export default function NewChat({
|
|||
authContext?.isAuthenticated !== undefined &&
|
||||
(authContext?.isAuthenticated === false || authContext?.user !== undefined);
|
||||
|
||||
// Show agent marketplace when auth is ready and user has access
|
||||
// Note: endpointsConfig[agents] is null, but we can still show the marketplace
|
||||
const showAgentMarketplace = authReady && hasAccessToAgents;
|
||||
// Show agent marketplace when marketplace permission is enabled, auth is ready, and user has access to agents
|
||||
const showAgentMarketplace = authReady && hasAccessToAgents && hasAccessToMarketplace;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -3,10 +3,9 @@ import * as Popover from '@radix-ui/react-popover';
|
|||
import { useToastContext } from '@librechat/client';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
fileConfig as defaultFileConfig,
|
||||
QueryKeys,
|
||||
defaultOrderQuery,
|
||||
mergeFileConfig,
|
||||
fileConfig as defaultFileConfig,
|
||||
} from 'librechat-data-provider';
|
||||
import type { UseMutationResult } from '@tanstack/react-query';
|
||||
import type {
|
||||
|
|
@ -15,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 { useLocalize } from '~/hooks';
|
||||
import { formatBytes } from '~/utils';
|
||||
|
|
@ -46,41 +50,41 @@ function Avatar({
|
|||
onMutate: () => {
|
||||
setProgress(0.4);
|
||||
},
|
||||
onSuccess: (data, vars) => {
|
||||
if (vars.postCreation === false) {
|
||||
showToast({ message: localize('com_ui_upload_success') });
|
||||
} else if (lastSeenCreatedId.current !== createMutation.data?.id) {
|
||||
onSuccess: (data) => {
|
||||
if (lastSeenCreatedId.current !== createMutation.data?.id) {
|
||||
lastSeenCreatedId.current = createMutation.data?.id ?? '';
|
||||
}
|
||||
showToast({ message: localize('com_ui_upload_agent_avatar') });
|
||||
|
||||
setInput(null);
|
||||
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) => {
|
||||
|
|
@ -137,7 +141,6 @@ function Avatar({
|
|||
|
||||
uploadAvatar({
|
||||
agent_id: createMutation.data.id,
|
||||
postCreation: true,
|
||||
formData,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import {
|
|||
ControllerRenderProps,
|
||||
} from 'react-hook-form';
|
||||
import { useAgentCategories } from '~/hooks/Agents';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
/**
|
||||
* Custom hook to handle category synchronization
|
||||
|
|
@ -18,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');
|
||||
|
|
@ -31,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();
|
||||
|
|
@ -79,7 +82,7 @@ const AgentCategorySelector: React.FC = () => {
|
|||
field.onChange(value);
|
||||
}}
|
||||
items={comboboxItems}
|
||||
className=""
|
||||
className={cn(className)}
|
||||
ariaLabel={ariaLabel}
|
||||
isCollapsed={false}
|
||||
showCarat={true}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,10 @@ export default function AgentConfig({ createMutation }: Pick<AgentPanelProps, 'c
|
|||
groupedTools: allTools,
|
||||
} = 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' });
|
||||
|
|
@ -195,21 +198,33 @@ export default function AgentConfig({ createMutation }: Pick<AgentPanelProps, 'c
|
|||
/>
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Dialog, Button, DotsIcon, DialogContent, useToastContext } from '@librechat/client';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { Dialog, DialogContent, Button, DotsIcon, useToastContext } from '@librechat/client';
|
||||
import {
|
||||
QueryKeys,
|
||||
Constants,
|
||||
EModelEndpoint,
|
||||
PERMISSION_BITS,
|
||||
LocalStorageKeys,
|
||||
AgentListResponse,
|
||||
} from 'librechat-data-provider';
|
||||
import type t from 'librechat-data-provider';
|
||||
import { useChatContext } from '~/Providers';
|
||||
import { renderAgentAvatar } from '~/utils';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
|
|
@ -13,7 +22,6 @@ interface SupportContact {
|
|||
interface AgentWithSupport extends t.Agent {
|
||||
support_contact?: SupportContact;
|
||||
}
|
||||
|
||||
interface AgentDetailProps {
|
||||
agent: AgentWithSupport; // The agent data to display
|
||||
isOpen: boolean; // Whether the detail dialog is open
|
||||
|
|
@ -25,12 +33,13 @@ interface AgentDetailProps {
|
|||
*/
|
||||
const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) => {
|
||||
const localize = useLocalize();
|
||||
const navigate = useNavigate();
|
||||
// const navigate = useNavigate();
|
||||
const { conversation, newConversation } = useChatContext();
|
||||
const { showToast } = useToastContext();
|
||||
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) => {
|
||||
|
|
@ -54,7 +63,31 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
|
|||
*/
|
||||
const handleStartChat = () => {
|
||||
if (agent) {
|
||||
navigate(`/c/new?agent_id=${agent.id}`);
|
||||
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 });
|
||||
}
|
||||
}
|
||||
|
||||
localStorage.setItem(`${LocalStorageKeys.AGENT_ID_PREFIX}0`, agent.id);
|
||||
|
||||
queryClient.setQueryData<t.TMessage[]>(
|
||||
[QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
|
||||
[],
|
||||
);
|
||||
queryClient.invalidateQueries([QueryKeys.messages]);
|
||||
|
||||
newConversation({
|
||||
template: {
|
||||
conversationId: Constants.NEW_CONVO as string,
|
||||
endpoint: EModelEndpoint.agents,
|
||||
agent_id: agent.id,
|
||||
title: `Chat with ${agent.name || 'Agent'}`,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -68,7 +101,7 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
|
|||
.writeText(chatUrl)
|
||||
.then(() => {
|
||||
showToast({
|
||||
message: 'Link copied',
|
||||
message: localize('com_agents_link_copied'),
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
|
|
@ -118,7 +151,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) => {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import { Button, Spinner } from '@librechat/client';
|
||||
import { PERMISSION_BITS } from 'librechat-data-provider';
|
||||
import type t from 'librechat-data-provider';
|
||||
import { useDynamicAgentQuery, useAgentCategories } from '~/hooks/Agents';
|
||||
import { SmartLoader, useHasData } from './SmartLoader';
|
||||
import { useMarketplaceAgentsInfiniteQuery } from '~/data-provider/Agents';
|
||||
import { useAgentCategories } from '~/hooks/Agents';
|
||||
import useLocalize from '~/hooks/useLocalize';
|
||||
import { useHasData } from './SmartLoader';
|
||||
import ErrorDisplay from './ErrorDisplay';
|
||||
import AgentCard from './AgentCard';
|
||||
import { cn } from '~/utils';
|
||||
|
|
@ -14,45 +16,68 @@ interface AgentGridProps {
|
|||
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
|
||||
|
|
@ -79,16 +104,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
|
||||
*/
|
||||
|
|
@ -160,7 +180,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>
|
||||
|
|
@ -168,7 +188,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"
|
||||
|
|
@ -195,22 +215,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>
|
||||
|
|
@ -219,7 +239,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"
|
||||
|
|
@ -232,7 +252,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"
|
||||
|
|
@ -257,17 +277,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;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { useOutletContext } from 'react-router-dom';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useSetRecoilState, useRecoilValue } from 'recoil';
|
||||
import { TooltipAnchor, Button, NewChatIcon } from '@librechat/client';
|
||||
import { useSearchParams, useParams, useNavigate } from 'react-router-dom';
|
||||
import { PermissionTypes, Permissions, QueryKeys, Constants } from 'librechat-data-provider';
|
||||
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, useHasAccess, useLocalize } from '~/hooks';
|
||||
import { SidePanelProvider, useChatContext } from '~/Providers';
|
||||
import { MarketplaceProvider } from './MarketplaceContext';
|
||||
import { useDocumentTitle, useLocalize } from '~/hooks';
|
||||
import { SidePanelGroup } from '~/components/SidePanel';
|
||||
import { OpenSidebar } from '~/components/Chat/Menus';
|
||||
import CategoryTabs from './CategoryTabs';
|
||||
|
|
@ -30,6 +33,8 @@ interface AgentMarketplaceProps {
|
|||
const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) => {
|
||||
const localize = useLocalize();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { conversation, newConversation } = useChatContext();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const { category } = useParams();
|
||||
const setHideSidePanel = useSetRecoilState(store.hideSidePanel);
|
||||
|
|
@ -138,12 +143,18 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
|
|||
/**
|
||||
* Handle new chat button click
|
||||
*/
|
||||
|
||||
const handleNewChat = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
if (e.button === 0 && (e.ctrlKey || e.metaKey)) {
|
||||
window.open('/c/new', '_blank');
|
||||
return;
|
||||
}
|
||||
navigate('/c/new');
|
||||
queryClient.setQueryData<t.TMessage[]>(
|
||||
[QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
|
||||
[],
|
||||
);
|
||||
queryClient.invalidateQueries([QueryKeys.messages]);
|
||||
newConversation();
|
||||
};
|
||||
|
||||
// Check if a detail view should be open based on URL
|
||||
|
|
@ -164,131 +175,154 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
|
|||
|
||||
const fullCollapse = useMemo(() => localStorage.getItem('fullPanelCollapse') === 'true', []);
|
||||
|
||||
const hasAccessToMarketplace = useHasAccess({
|
||||
permissionType: PermissionTypes.MARKETPLACE,
|
||||
permission: Permissions.USE,
|
||||
});
|
||||
useEffect(() => {
|
||||
let timeoutId: ReturnType<typeof setTimeout>;
|
||||
if (!hasAccessToMarketplace) {
|
||||
timeoutId = setTimeout(() => {
|
||||
navigate('/c/new');
|
||||
}, 1000);
|
||||
}
|
||||
return () => {
|
||||
clearTimeout(timeoutId);
|
||||
};
|
||||
}, [hasAccessToMarketplace, navigate]);
|
||||
|
||||
if (!hasAccessToMarketplace) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className={`relative flex w-full grow overflow-hidden bg-presentation ${className}`}>
|
||||
<MarketplaceProvider>
|
||||
<SidePanelGroup
|
||||
defaultLayout={defaultLayout}
|
||||
fullPanelCollapse={fullCollapse}
|
||||
defaultCollapsed={defaultCollapsed}
|
||||
>
|
||||
<main className="flex h-full flex-col overflow-y-auto" role="main">
|
||||
{/* Simplified header for agents marketplace - only show nav controls when needed */}
|
||||
<div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white p-2 font-semibold text-text-primary dark:bg-gray-800">
|
||||
<div className="mx-1 flex items-center gap-2">
|
||||
{!navVisible && <OpenSidebar setNavVisible={setNavVisible} />}
|
||||
{!navVisible && (
|
||||
<TooltipAnchor
|
||||
description={localize('com_ui_new_chat')}
|
||||
render={
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
data-testid="agents-new-chat-button"
|
||||
aria-label={localize('com_ui_new_chat')}
|
||||
className="rounded-xl border border-border-light bg-surface-secondary p-2 hover:bg-surface-hover max-md:hidden"
|
||||
onClick={handleNewChat}
|
||||
>
|
||||
<NewChatIcon />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="container mx-auto max-w-4xl px-4 py-8">
|
||||
{/* Hero Section - ChatGPT Style */}
|
||||
<div className="mb-8 mt-12 text-center">
|
||||
<h1 className="mb-3 text-5xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||
{localize('com_agents_marketplace')}
|
||||
</h1>
|
||||
<p className="mx-auto mb-6 max-w-2xl text-lg text-gray-600 dark:text-gray-300">
|
||||
{localize('com_agents_marketplace_subtitle')}
|
||||
</p>
|
||||
|
||||
{/* Search bar */}
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<SearchBar value={searchQuery} onSearch={handleSearch} />
|
||||
<SidePanelProvider>
|
||||
<SidePanelGroup
|
||||
defaultLayout={defaultLayout}
|
||||
fullPanelCollapse={fullCollapse}
|
||||
defaultCollapsed={defaultCollapsed}
|
||||
>
|
||||
<main className="flex h-full flex-col overflow-y-auto" role="main">
|
||||
{/* Simplified header for agents marketplace - only show nav controls when needed */}
|
||||
<div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white p-2 font-semibold text-text-primary dark:bg-gray-800">
|
||||
<div className="mx-1 flex items-center gap-2">
|
||||
{!navVisible && <OpenSidebar setNavVisible={setNavVisible} />}
|
||||
{!navVisible && (
|
||||
<TooltipAnchor
|
||||
description={localize('com_ui_new_chat')}
|
||||
render={
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
data-testid="agents-new-chat-button"
|
||||
aria-label={localize('com_ui_new_chat')}
|
||||
className="rounded-xl border border-border-light bg-surface-secondary p-2 hover:bg-surface-hover max-md:hidden"
|
||||
onClick={handleNewChat}
|
||||
>
|
||||
<NewChatIcon />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="container mx-auto max-w-4xl px-4 py-8">
|
||||
{/* Hero Section - ChatGPT Style */}
|
||||
<div className="mb-8 mt-12 text-center">
|
||||
<h1 className="mb-3 text-5xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||
{localize('com_agents_marketplace')}
|
||||
</h1>
|
||||
<p className="mx-auto mb-6 max-w-2xl text-lg text-gray-600 dark:text-gray-300">
|
||||
{localize('com_agents_marketplace_subtitle')}
|
||||
</p>
|
||||
|
||||
{/* Category tabs */}
|
||||
<CategoryTabs
|
||||
categories={categoriesQuery.data || []}
|
||||
activeTab={activeTab}
|
||||
isLoading={categoriesQuery.isLoading}
|
||||
onChange={handleTabChange}
|
||||
/>
|
||||
{/* Search bar */}
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<SearchBar value={searchQuery} onSearch={handleSearch} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category header - only show when not searching */}
|
||||
{!searchQuery && (
|
||||
<div className="mb-6">
|
||||
{(() => {
|
||||
// Get category data for display
|
||||
const getCategoryData = () => {
|
||||
if (activeTab === 'promoted') {
|
||||
{/* Category tabs */}
|
||||
<CategoryTabs
|
||||
categories={categoriesQuery.data || []}
|
||||
activeTab={activeTab}
|
||||
isLoading={categoriesQuery.isLoading}
|
||||
onChange={handleTabChange}
|
||||
/>
|
||||
|
||||
{/* Category header - only show when not searching */}
|
||||
{!searchQuery && (
|
||||
<div className="mb-6">
|
||||
{(() => {
|
||||
// Get category data for display
|
||||
const getCategoryData = () => {
|
||||
if (activeTab === 'promoted') {
|
||||
return {
|
||||
name: localize('com_agents_top_picks'),
|
||||
description: localize('com_agents_recommended'),
|
||||
};
|
||||
}
|
||||
if (activeTab === 'all') {
|
||||
return {
|
||||
name: 'All Agents',
|
||||
description: 'Browse all shared agents across all categories',
|
||||
};
|
||||
}
|
||||
|
||||
// Find the category in the API data
|
||||
const categoryData = categoriesQuery.data?.find(
|
||||
(cat) => cat.value === activeTab,
|
||||
);
|
||||
if (categoryData) {
|
||||
return {
|
||||
name: categoryData.label,
|
||||
description: categoryData.description || '',
|
||||
};
|
||||
}
|
||||
|
||||
// Fallback for unknown categories
|
||||
return {
|
||||
name: localize('com_agents_top_picks'),
|
||||
description: localize('com_agents_recommended'),
|
||||
name: activeTab.charAt(0).toUpperCase() + activeTab.slice(1),
|
||||
description: '',
|
||||
};
|
||||
}
|
||||
if (activeTab === 'all') {
|
||||
return {
|
||||
name: 'All Agents',
|
||||
description: 'Browse all shared agents across all categories',
|
||||
};
|
||||
}
|
||||
|
||||
// Find the category in the API data
|
||||
const categoryData = categoriesQuery.data?.find(
|
||||
(cat) => cat.value === activeTab,
|
||||
);
|
||||
if (categoryData) {
|
||||
return {
|
||||
name: categoryData.label,
|
||||
description: categoryData.description || '',
|
||||
};
|
||||
}
|
||||
|
||||
// Fallback for unknown categories
|
||||
return {
|
||||
name: activeTab.charAt(0).toUpperCase() + activeTab.slice(1),
|
||||
description: '',
|
||||
};
|
||||
};
|
||||
|
||||
const { name, description } = getCategoryData();
|
||||
const { name, description } = getCategoryData();
|
||||
|
||||
return (
|
||||
<div className="text-left">
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{name}</h2>
|
||||
{description && (
|
||||
<p className="mt-2 text-gray-600 dark:text-gray-300">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
return (
|
||||
<div className="text-left">
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{name}
|
||||
</h2>
|
||||
{description && (
|
||||
<p className="mt-2 text-gray-600 dark:text-gray-300">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Agent grid */}
|
||||
<AgentGrid
|
||||
category={activeTab}
|
||||
searchQuery={searchQuery}
|
||||
onSelectAgent={handleAgentSelect}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Agent detail dialog */}
|
||||
{isDetailOpen && selectedAgent && (
|
||||
<AgentDetail
|
||||
agent={selectedAgent}
|
||||
isOpen={isDetailOpen}
|
||||
onClose={handleDetailClose}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Agent grid */}
|
||||
<AgentGrid
|
||||
category={activeTab}
|
||||
searchQuery={searchQuery}
|
||||
onSelectAgent={handleAgentSelect}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Agent detail dialog */}
|
||||
{isDetailOpen && selectedAgent && (
|
||||
<AgentDetail
|
||||
agent={selectedAgent}
|
||||
isOpen={isDetailOpen}
|
||||
onClose={handleDetailClose}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
</SidePanelGroup>
|
||||
</main>
|
||||
</SidePanelGroup>
|
||||
</SidePanelProvider>
|
||||
</MarketplaceProvider>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -215,6 +215,12 @@ export default function AgentPanel() {
|
|||
status: 'error',
|
||||
});
|
||||
}
|
||||
if (!name) {
|
||||
return showToast({
|
||||
message: localize('com_agents_missing_name'),
|
||||
status: 'error',
|
||||
});
|
||||
}
|
||||
|
||||
create.mutate({
|
||||
name,
|
||||
|
|
@ -247,12 +253,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}>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@ import type { UseMutationResult, QueryObserverResult } from '@tanstack/react-que
|
|||
import type { Agent, AgentCreateParams } from 'librechat-data-provider';
|
||||
import type { TAgentCapabilities, AgentForm } from '~/common';
|
||||
import { cn, createProviderOption, processAgentOption, getDefaultAgentFormValues } from '~/utils';
|
||||
import { useListAgentsQuery, useGetStartupConfig } from '~/data-provider';
|
||||
import {
|
||||
useAgentListingDefaultPermissionLevel,
|
||||
useGetStartupConfig,
|
||||
useListAgentsQuery,
|
||||
} from '~/data-provider';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
const keys = new Set(Object.keys(defaultAgentFormValues));
|
||||
|
|
@ -28,18 +32,23 @@ 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 permissionLevel = useAgentListingDefaultPermissionLevel();
|
||||
|
||||
const { data: agents = null } = useListAgentsQuery(
|
||||
{ requiredPermission: permissionLevel },
|
||||
{
|
||||
select: (res) =>
|
||||
res.data.map((agent) =>
|
||||
processAgentOption({
|
||||
agent: {
|
||||
...agent,
|
||||
name: agent.name || agent.id,
|
||||
},
|
||||
instanceProjectId: startupConfig?.instanceProjectId,
|
||||
}),
|
||||
),
|
||||
},
|
||||
);
|
||||
|
||||
const resetAgentForm = useCallback(
|
||||
(fullAgent: Agent) => {
|
||||
|
|
|
|||
|
|
@ -66,23 +66,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'),
|
||||
|
|
@ -91,7 +93,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) {
|
||||
|
|
@ -107,7 +109,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'),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -120,9 +123,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'),
|
||||
};
|
||||
|
|
@ -192,9 +205,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"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
import React, { useMemo } from 'react';
|
||||
|
||||
import { EModelEndpoint } from 'librechat-data-provider';
|
||||
|
||||
import React from 'react';
|
||||
import { ChatContext } from '~/Providers';
|
||||
import { useChatHelpers } from '~/hooks';
|
||||
|
||||
/**
|
||||
* Minimal marketplace provider that provides only what SidePanel actually needs
|
||||
|
|
@ -13,32 +11,7 @@ interface MarketplaceProviderProps {
|
|||
}
|
||||
|
||||
export const MarketplaceProvider: React.FC<MarketplaceProviderProps> = ({ children }) => {
|
||||
// Create more complete context to prevent FileRow and other component errors
|
||||
// when agents with files are opened in the marketplace
|
||||
const marketplaceContext = useMemo(
|
||||
() => ({
|
||||
conversation: {
|
||||
endpoint: EModelEndpoint.agents,
|
||||
conversationId: 'marketplace',
|
||||
title: 'Agent Marketplace',
|
||||
},
|
||||
// File-related context properties to prevent FileRow errors
|
||||
files: new Map(),
|
||||
setFiles: () => {},
|
||||
setFilesLoading: () => {},
|
||||
// Other commonly used context properties to prevent undefined errors
|
||||
isSubmitting: false,
|
||||
setIsSubmitting: () => {},
|
||||
latestMessage: null,
|
||||
setLatestMessage: () => {},
|
||||
// Minimal functions to prevent errors when components try to use them
|
||||
ask: () => {},
|
||||
regenerate: () => {},
|
||||
stopGenerating: () => {},
|
||||
submitMessage: () => {},
|
||||
}),
|
||||
[],
|
||||
);
|
||||
const chatHelpers = useChatHelpers(0, 'new');
|
||||
|
||||
return <ChatContext.Provider value={marketplaceContext as any}>{children}</ChatContext.Provider>;
|
||||
return <ChatContext.Provider value={chatHelpers as any}>{children}</ChatContext.Provider>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { ACCESS_ROLE_IDS } from 'librechat-data-provider';
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { ACCESS_ROLE_IDS, PermissionTypes } from 'librechat-data-provider';
|
||||
import { Share2Icon, Users, Loader, Shield, Link, CopyCheck } from 'lucide-react';
|
||||
import {
|
||||
useGetResourcePermissionsQuery,
|
||||
|
|
@ -15,8 +15,8 @@ import {
|
|||
useToastContext,
|
||||
} from '@librechat/client';
|
||||
import type { TPrincipal } from 'librechat-data-provider';
|
||||
import { useLocalize, useCopyToClipboard, useHasAccess } from '~/hooks';
|
||||
import ManagePermissionsDialog from './ManagePermissionsDialog';
|
||||
import { useLocalize, useCopyToClipboard } from '~/hooks';
|
||||
import PublicSharingToggle from './PublicSharingToggle';
|
||||
import PeoplePicker from './PeoplePicker/PeoplePicker';
|
||||
import AccessRolesPicker from './AccessRolesPicker';
|
||||
|
|
@ -38,6 +38,29 @@ export default function GrantAccessDialog({
|
|||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
|
||||
// Check if user has permission to access people picker
|
||||
const canViewUsers = useHasAccess({
|
||||
permissionType: PermissionTypes.PEOPLE_PICKER,
|
||||
permission: Permissions.VIEW_USERS,
|
||||
});
|
||||
const canViewGroups = useHasAccess({
|
||||
permissionType: PermissionTypes.PEOPLE_PICKER,
|
||||
permission: Permissions.VIEW_GROUPS,
|
||||
});
|
||||
const hasPeoplePickerAccess = canViewUsers || canViewGroups;
|
||||
|
||||
// Determine type filter based on permissions
|
||||
const peoplePickerTypeFilter = useMemo(() => {
|
||||
if (canViewUsers && canViewGroups) {
|
||||
return null; // Both types allowed
|
||||
} else if (canViewUsers) {
|
||||
return 'user' as const;
|
||||
} else if (canViewGroups) {
|
||||
return 'group' as const;
|
||||
}
|
||||
return null;
|
||||
}, [canViewUsers, canViewGroups]);
|
||||
|
||||
const {
|
||||
data: permissionsData,
|
||||
// isLoading: isLoadingPermissions,
|
||||
|
|
@ -177,26 +200,31 @@ export default function GrantAccessDialog({
|
|||
</OGDialogTitle>
|
||||
|
||||
<div className="space-y-6 p-2">
|
||||
<PeoplePicker
|
||||
onSelectionChange={setNewShares}
|
||||
placeholder={localize('com_ui_search_people_placeholder')}
|
||||
/>
|
||||
{hasPeoplePickerAccess && (
|
||||
<>
|
||||
<PeoplePicker
|
||||
onSelectionChange={setNewShares}
|
||||
placeholder={localize('com_ui_search_people_placeholder')}
|
||||
typeFilter={peoplePickerTypeFilter}
|
||||
/>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-4 w-4 text-text-secondary" />
|
||||
<label className="text-sm font-medium text-text-primary">
|
||||
{localize('com_ui_permission_level')}
|
||||
</label>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-4 w-4 text-text-secondary" />
|
||||
<label className="text-sm font-medium text-text-primary">
|
||||
{localize('com_ui_permission_level')}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<AccessRolesPicker
|
||||
resourceType={resourceType}
|
||||
selectedRoleId={defaultPermissionId}
|
||||
onRoleChange={setDefaultPermissionId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<AccessRolesPicker
|
||||
resourceType={resourceType}
|
||||
selectedRoleId={defaultPermissionId}
|
||||
onRoleChange={setDefaultPermissionId}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<PublicSharingToggle
|
||||
isPublic={isPublic}
|
||||
publicRole={publicRole}
|
||||
|
|
@ -206,11 +234,13 @@ export default function GrantAccessDialog({
|
|||
/>
|
||||
<div className="flex justify-between border-t pt-4">
|
||||
<div className="flex gap-2">
|
||||
<ManagePermissionsDialog
|
||||
agentDbId={agentDbId}
|
||||
agentName={agentName}
|
||||
resourceType={resourceType}
|
||||
/>
|
||||
{hasPeoplePickerAccess && (
|
||||
<ManagePermissionsDialog
|
||||
agentDbId={agentDbId}
|
||||
agentName={agentName}
|
||||
resourceType={resourceType}
|
||||
/>
|
||||
)}
|
||||
{agentId && (
|
||||
<Button
|
||||
variant="outline"
|
||||
|
|
|
|||
|
|
@ -61,9 +61,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]);
|
||||
|
|
|
|||
|
|
@ -10,12 +10,14 @@ interface PeoplePickerProps {
|
|||
onSelectionChange: (principals: TPrincipal[]) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
typeFilter?: 'user' | 'group' | null;
|
||||
}
|
||||
|
||||
export default function PeoplePicker({
|
||||
onSelectionChange,
|
||||
placeholder,
|
||||
className = '',
|
||||
typeFilter = null,
|
||||
}: PeoplePickerProps) {
|
||||
const localize = useLocalize();
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
|
@ -25,8 +27,9 @@ export default function PeoplePicker({
|
|||
() => ({
|
||||
q: searchQuery,
|
||||
limit: 30,
|
||||
...(typeFilter && { type: typeFilter }),
|
||||
}),
|
||||
[searchQuery],
|
||||
[searchQuery, typeFilter],
|
||||
);
|
||||
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {};
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
/* eslint-disable @typescript-eslint/no-require-imports */
|
||||
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';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import type t from 'librechat-data-provider';
|
||||
import { Constants, EModelEndpoint } from 'librechat-data-provider';
|
||||
|
||||
import AgentDetail from '../AgentDetail';
|
||||
import { useToast } from '~/hooks';
|
||||
import useLocalize from '~/hooks/useLocalize';
|
||||
|
||||
// Mock dependencies
|
||||
jest.mock('react-router-dom', () => ({
|
||||
|
|
@ -19,11 +20,8 @@ jest.mock('react-router-dom', () => ({
|
|||
|
||||
jest.mock('~/hooks', () => ({
|
||||
useToast: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('~/hooks/useLocalize', () => ({
|
||||
__esModule: true,
|
||||
default: jest.fn(),
|
||||
useMediaQuery: jest.fn(() => false), // Mock as desktop by default
|
||||
useLocalize: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('~/utils/agents', () => ({
|
||||
|
|
@ -32,12 +30,17 @@ jest.mock('~/utils/agents', () => ({
|
|||
)),
|
||||
}));
|
||||
|
||||
jest.mock('~/Providers', () => ({
|
||||
useChatContext: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('@tanstack/react-query', () => ({
|
||||
...jest.requireActual('@tanstack/react-query'),
|
||||
useQueryClient: jest.fn(),
|
||||
}));
|
||||
|
||||
// Mock clipboard API
|
||||
Object.assign(navigator, {
|
||||
clipboard: {
|
||||
writeText: jest.fn(),
|
||||
},
|
||||
});
|
||||
const mockWriteText = jest.fn();
|
||||
|
||||
const mockNavigate = jest.fn();
|
||||
const mockShowToast = jest.fn();
|
||||
|
|
@ -55,17 +58,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
|
||||
|
|
@ -93,10 +102,37 @@ describe('AgentDetail', () => {
|
|||
jest.clearAllMocks();
|
||||
(useNavigate as jest.Mock).mockReturnValue(mockNavigate);
|
||||
(useToast as jest.Mock).mockReturnValue({ showToast: mockShowToast });
|
||||
const { useLocalize } = require('~/hooks');
|
||||
(useLocalize as jest.Mock).mockReturnValue(mockLocalize);
|
||||
|
||||
// Reset clipboard mock
|
||||
(navigator.clipboard.writeText as jest.Mock).mockResolvedValue(undefined);
|
||||
// Mock useChatContext
|
||||
const { useChatContext } = require('~/Providers');
|
||||
(useChatContext as jest.Mock).mockReturnValue({
|
||||
conversation: { conversationId: 'test-convo-id' },
|
||||
newConversation: jest.fn(),
|
||||
});
|
||||
|
||||
// Mock useQueryClient
|
||||
const { useQueryClient } = require('@tanstack/react-query');
|
||||
(useQueryClient as jest.Mock).mockReturnValue({
|
||||
getQueryData: jest.fn(),
|
||||
setQueryData: jest.fn(),
|
||||
invalidateQueries: jest.fn(),
|
||||
});
|
||||
|
||||
// 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 +181,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');
|
||||
});
|
||||
|
|
@ -162,12 +198,36 @@ describe('AgentDetail', () => {
|
|||
describe('Interactions', () => {
|
||||
it('should navigate to chat when Start Chat button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const mockNewConversation = jest.fn();
|
||||
const mockQueryClient = {
|
||||
getQueryData: jest.fn().mockReturnValue(null),
|
||||
setQueryData: jest.fn(),
|
||||
invalidateQueries: jest.fn(),
|
||||
};
|
||||
|
||||
// Update mocks for this test
|
||||
const { useChatContext } = require('~/Providers');
|
||||
(useChatContext as jest.Mock).mockReturnValue({
|
||||
conversation: { conversationId: 'test-convo-id' },
|
||||
newConversation: mockNewConversation,
|
||||
});
|
||||
|
||||
const { useQueryClient } = require('@tanstack/react-query');
|
||||
(useQueryClient as jest.Mock).mockReturnValue(mockQueryClient);
|
||||
|
||||
renderWithProviders(<AgentDetail {...defaultProps} />);
|
||||
|
||||
const startChatButton = screen.getByRole('button', { name: 'com_agents_start_chat' });
|
||||
await user.click(startChatButton);
|
||||
|
||||
expect(mockNavigate).toHaveBeenCalledWith('/c/new?agent_id=test-agent-id');
|
||||
expect(mockNewConversation).toHaveBeenCalledWith({
|
||||
template: {
|
||||
conversationId: Constants.NEW_CONVO,
|
||||
endpoint: EModelEndpoint.agents,
|
||||
agent_id: 'test-agent-id',
|
||||
title: 'Chat with Test Agent',
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should not navigate when agent is null', async () => {
|
||||
|
|
@ -185,7 +245,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 +256,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 +277,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 +307,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 +332,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 +345,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 +367,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' });
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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 {};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable @typescript-eslint/no-require-imports */
|
||||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
|
|
@ -17,6 +18,11 @@ jest.mock('~/Providers', () => ({
|
|||
useChatContext: jest.fn(),
|
||||
}));
|
||||
|
||||
// Mock useChatHelpers to avoid Recoil dependency
|
||||
jest.mock('~/hooks', () => ({
|
||||
useChatHelpers: jest.fn(),
|
||||
}));
|
||||
|
||||
const mockedUseChatContext = useChatContext as jest.MockedFunction<typeof useChatContext>;
|
||||
|
||||
// Test component that consumes the context
|
||||
|
|
@ -35,6 +41,16 @@ const TestConsumer: React.FC = () => {
|
|||
describe('MarketplaceProvider', () => {
|
||||
beforeEach(() => {
|
||||
mockedUseChatContext.mockClear();
|
||||
|
||||
// Mock useChatHelpers return value
|
||||
const { useChatHelpers } = require('~/hooks');
|
||||
(useChatHelpers as jest.Mock).mockReturnValue({
|
||||
conversation: {
|
||||
endpoint: EModelEndpoint.agents,
|
||||
conversationId: 'marketplace',
|
||||
title: 'Agent Marketplace',
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('provides correct marketplace context values', () => {
|
||||
|
|
@ -46,7 +62,7 @@ describe('MarketplaceProvider', () => {
|
|||
},
|
||||
};
|
||||
|
||||
mockedUseChatContext.mockReturnValue(mockContext);
|
||||
mockedUseChatContext.mockReturnValue(mockContext as ReturnType<typeof useChatContext>);
|
||||
|
||||
render(
|
||||
<MarketplaceProvider>
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
||||
|
|
|
|||
|
|
@ -1,2 +1,5 @@
|
|||
export * from './queries';
|
||||
export * from './mutations';
|
||||
|
||||
// Re-export specific marketplace queries for easier imports
|
||||
export { useGetAgentCategoriesQuery, useMarketplaceAgentsInfiniteQuery } from './queries';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
},
|
||||
});
|
||||
|
|
@ -58,30 +62,33 @@ export const useUpdateAgentMutation = (
|
|||
return options?.onError?.(error, 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);
|
||||
},
|
||||
},
|
||||
|
|
@ -103,24 +110,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);
|
||||
},
|
||||
|
|
@ -142,22 +153,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);
|
||||
},
|
||||
|
|
@ -177,8 +189,7 @@ export const useUploadAgentAvatarMutation = (
|
|||
unknown // context
|
||||
> => {
|
||||
return useMutation([MutationKeys.agentAvatarUpload], {
|
||||
mutationFn: ({ postCreation, ...variables }: t.AgentAvatarVariables) =>
|
||||
dataService.uploadAgentAvatar(variables),
|
||||
mutationFn: (variables: t.AgentAvatarVariables) => dataService.uploadAgentAvatar(variables),
|
||||
...(options || {}),
|
||||
});
|
||||
};
|
||||
|
|
@ -202,26 +213,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) {
|
||||
|
|
@ -275,28 +285,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;
|
||||
|
|
@ -337,25 +347,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]);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,41 @@
|
|||
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,
|
||||
Permissions,
|
||||
EModelEndpoint,
|
||||
PERMISSION_BITS,
|
||||
PermissionTypes,
|
||||
} 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';
|
||||
import { useHasAccess } from '~/hooks';
|
||||
|
||||
/**
|
||||
* Hook to determine the appropriate permission level for agent queries based on marketplace configuration
|
||||
*/
|
||||
export const useAgentListingDefaultPermissionLevel = () => {
|
||||
const hasMarketplaceAccess = useHasAccess({
|
||||
permissionType: PermissionTypes.MARKETPLACE,
|
||||
permission: Permissions.USE,
|
||||
});
|
||||
|
||||
// When marketplace is active: EDIT permissions (builder mode)
|
||||
// When marketplace is not active: VIEW permissions (browse mode)
|
||||
return hasMarketplaceAccess ? PERMISSION_BITS.EDIT : PERMISSION_BITS.VIEW;
|
||||
};
|
||||
|
||||
/**
|
||||
* AGENTS
|
||||
*/
|
||||
|
||||
export const defaultAgentParams: t.AgentListParams = {
|
||||
limit: 10,
|
||||
requiredPermission: PERMISSION_BITS.EDIT,
|
||||
};
|
||||
/**
|
||||
* Hook for getting all available tools for A
|
||||
*/
|
||||
|
|
@ -27,7 +56,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 +105,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 +127,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,
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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,7 +1,6 @@
|
|||
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';
|
||||
export { default as useAgentCapabilities } from './useAgentCapabilities';
|
||||
export { default as useGetAgentsConfig } from './useGetAgentsConfig';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { TAgentsMap } from 'librechat-data-provider';
|
||||
import { useMemo } from 'react';
|
||||
import { useListAgentsQuery } from '~/data-provider';
|
||||
import { useListAgentsQuery, useAgentListingDefaultPermissionLevel } from '~/data-provider';
|
||||
import { mapAgents } from '~/utils';
|
||||
|
||||
export default function useAgentsMap({
|
||||
|
|
@ -8,10 +8,15 @@ export default function useAgentsMap({
|
|||
}: {
|
||||
isAuthenticated: boolean;
|
||||
}): TAgentsMap | undefined {
|
||||
const { data: agentsList = null } = useListAgentsQuery(undefined, {
|
||||
select: (res) => mapAgents(res.data),
|
||||
enabled: isAuthenticated,
|
||||
});
|
||||
const permissionLevel = useAgentListingDefaultPermissionLevel();
|
||||
|
||||
const { data: agentsList = null } = useListAgentsQuery(
|
||||
{ requiredPermission: permissionLevel },
|
||||
{
|
||||
select: (res) => mapAgents(res.data),
|
||||
enabled: isAuthenticated,
|
||||
},
|
||||
);
|
||||
|
||||
const agents = useMemo<TAgentsMap | undefined>(() => {
|
||||
return agentsList !== null ? agentsList : undefined;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
};
|
||||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ jest.mock('react-router-dom', () => ({
|
|||
|
||||
jest.mock('@tanstack/react-query', () => ({
|
||||
useQueryClient: jest.fn(),
|
||||
useQuery: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('~/Providers', () => ({
|
||||
|
|
@ -51,6 +52,15 @@ jest.mock('~/hooks/Conversations/useDefaultConvo', () => ({
|
|||
default: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('~/hooks/AuthContext', () => ({
|
||||
useAuthContext: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('~/hooks/Agents/useAgentsMap', () => ({
|
||||
__esModule: true,
|
||||
default: jest.fn(() => ({})),
|
||||
}));
|
||||
|
||||
jest.mock('~/utils', () => ({
|
||||
getConvoSwitchLogic: jest.fn(() => ({
|
||||
template: {},
|
||||
|
|
@ -63,6 +73,8 @@ jest.mock('~/utils', () => ({
|
|||
getModelSpecIconURL: jest.fn(() => 'icon-url'),
|
||||
removeUnavailableTools: jest.fn((preset) => preset),
|
||||
logger: { log: jest.fn() },
|
||||
getInitialTheme: jest.fn(() => 'light'),
|
||||
applyFontSize: jest.fn(),
|
||||
}));
|
||||
|
||||
// Mock the tQueryParamsSchema
|
||||
|
|
@ -82,6 +94,21 @@ jest.mock('librechat-data-provider', () => ({
|
|||
EModelEndpoint: { custom: 'custom', assistants: 'assistants', agents: 'agents' },
|
||||
}));
|
||||
|
||||
// Mock data-provider hooks
|
||||
jest.mock('~/data-provider', () => ({
|
||||
useGetAgentByIdQuery: jest.fn(() => ({
|
||||
data: null,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})),
|
||||
useAgentListingDefaultPermissionLevel: jest.fn(() => 'view'),
|
||||
useListAgentsQuery: jest.fn(() => ({
|
||||
data: null,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})),
|
||||
}));
|
||||
|
||||
// Mock global window.history
|
||||
global.window = Object.create(window);
|
||||
global.window.history = {
|
||||
|
|
@ -103,6 +130,14 @@ describe('useQueryParams', () => {
|
|||
// Reset mock for window.history.replaceState
|
||||
jest.spyOn(window.history, 'replaceState').mockClear();
|
||||
|
||||
// Reset data-provider mocks
|
||||
const dataProvider = jest.requireMock('~/data-provider');
|
||||
(dataProvider.useGetAgentByIdQuery as jest.Mock).mockReturnValue({
|
||||
data: null,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
// Create mocks for all dependencies
|
||||
const mockSearchParams = new URLSearchParams();
|
||||
(useSearchParams as jest.Mock).mockReturnValue([mockSearchParams, jest.fn()]);
|
||||
|
|
@ -147,6 +182,13 @@ describe('useQueryParams', () => {
|
|||
|
||||
const mockGetDefaultConversation = jest.fn().mockReturnValue({});
|
||||
(useDefaultConvo as jest.Mock).mockReturnValue(mockGetDefaultConversation);
|
||||
|
||||
// Mock useAuthContext
|
||||
const { useAuthContext } = jest.requireMock('~/hooks/AuthContext');
|
||||
(useAuthContext as jest.Mock).mockReturnValue({
|
||||
user: { id: 'test-user-id' },
|
||||
isAuthenticated: true,
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,26 @@
|
|||
import { useEffect, useCallback, useRef } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { QueryClient, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
QueryKeys,
|
||||
EModelEndpoint,
|
||||
isAgentsEndpoint,
|
||||
tQueryParamsSchema,
|
||||
isAssistantsEndpoint,
|
||||
PERMISSION_BITS,
|
||||
} from 'librechat-data-provider';
|
||||
import type {
|
||||
TPreset,
|
||||
TEndpointsConfig,
|
||||
TStartupConfig,
|
||||
AgentListResponse,
|
||||
} from 'librechat-data-provider';
|
||||
import type { TPreset, TEndpointsConfig, TStartupConfig } from 'librechat-data-provider';
|
||||
import type { ZodAny } from 'zod';
|
||||
import { getConvoSwitchLogic, getModelSpecIconURL, removeUnavailableTools, logger } from '~/utils';
|
||||
import useDefaultConvo from '~/hooks/Conversations/useDefaultConvo';
|
||||
import { useAuthContext, useAgentsMap, useDefaultConvo, useSubmitMessage } from '~/hooks';
|
||||
import { useChatContext, useChatFormContext } from '~/Providers';
|
||||
import useSubmitMessage from '~/hooks/Messages/useSubmitMessage';
|
||||
import { useGetAgentByIdQuery } from '~/data-provider';
|
||||
import store from '~/store';
|
||||
|
||||
/**
|
||||
|
|
@ -73,6 +79,21 @@ const processValidSettings = (queryParams: Record<string, string>) => {
|
|||
return validSettings;
|
||||
};
|
||||
|
||||
const injectAgentIntoAgentsMap = (queryClient: QueryClient, agent: any) => {
|
||||
const editCacheKey = [QueryKeys.agents, { requiredPermission: PERMISSION_BITS.EDIT }];
|
||||
const editCache = queryClient.getQueryData<AgentListResponse>(editCacheKey);
|
||||
|
||||
if (editCache?.data && !editCache.data.some((cachedAgent) => cachedAgent.id === agent.id)) {
|
||||
// Inject agent into EDIT cache so dropdown can display it
|
||||
const updatedCache = {
|
||||
...editCache,
|
||||
data: [agent, ...editCache.data],
|
||||
};
|
||||
queryClient.setQueryData(editCacheKey, updatedCache);
|
||||
logger.log('agent', 'Injected URL agent into cache:', agent);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Hook that processes URL query parameters to initialize chat with specified settings and prompt.
|
||||
* Handles model switching, prompt auto-filling, and optional auto-submission with race condition protection.
|
||||
|
|
@ -104,6 +125,14 @@ export default function useQueryParams({
|
|||
const queryClient = useQueryClient();
|
||||
const { conversation, newConversation } = useChatContext();
|
||||
|
||||
// Extract agent_id from URL for proactive fetching
|
||||
const urlAgentId = searchParams.get('agent_id') || '';
|
||||
|
||||
// Use the existing query hook to fetch agent if present in URL
|
||||
const { data: urlAgent } = useGetAgentByIdQuery(urlAgentId, {
|
||||
enabled: !!urlAgentId, // Only fetch if agent_id exists in URL
|
||||
});
|
||||
|
||||
/**
|
||||
* Applies settings from URL query parameters to create a new conversation.
|
||||
* Handles model spec lookup, endpoint normalization, and conversation switching logic.
|
||||
|
|
@ -418,4 +447,12 @@ export default function useQueryParams({
|
|||
}
|
||||
}
|
||||
}, [conversation, processSubmission, areSettingsApplied]);
|
||||
|
||||
const { isAuthenticated } = useAuthContext();
|
||||
const agentsMap = useAgentsMap({ isAuthenticated });
|
||||
useEffect(() => {
|
||||
if (urlAgent) {
|
||||
injectAgentIntoAgentsMap(queryClient, urlAgent);
|
||||
}
|
||||
}, [urlAgent, queryClient, agentsMap]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
"com_agents_mcp_trust_subtext": "Custom connectors are not verified by LibreChat",
|
||||
"com_agents_mcps_disabled": "You need to create an agent before adding MCPs.",
|
||||
"com_agents_missing_provider_model": "Please select a provider and model before creating an agent.",
|
||||
"com_agents_name_placeholder": "Optional: The name of the agent",
|
||||
"com_agents_name_placeholder": "The name of the agent",
|
||||
"com_agents_no_access": "You don't have access to edit this agent.",
|
||||
"com_agents_no_agent_id_error": "No agent ID found. Please ensure the agent is created first.",
|
||||
"com_agents_not_available": "Agent Not Available",
|
||||
|
|
@ -1097,6 +1097,7 @@
|
|||
"com_ui_update_mcp_error": "There was an error creating or updating the MCP.",
|
||||
"com_ui_update_mcp_success": "Successfully created or updated MCP",
|
||||
"com_ui_upload": "Upload",
|
||||
"com_ui_upload_agent_avatar": "Successfully updated agent avatar",
|
||||
"com_ui_upload_code_files": "Upload for Code Interpreter",
|
||||
"com_ui_upload_delay": "Uploading \"{{0}}\" is taking more time than anticipated. Please wait while the file finishes indexing for retrieval.",
|
||||
"com_ui_upload_error": "There was an error uploading your file",
|
||||
|
|
@ -1207,9 +1208,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",
|
||||
|
|
@ -1229,6 +1228,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",
|
||||
|
|
@ -1245,5 +1247,8 @@
|
|||
"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."
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue