diff --git a/client/src/components/Chat/Menus/Endpoints/components/EndpointItem.tsx b/client/src/components/Chat/Menus/Endpoints/components/EndpointItem.tsx index 8b7c4f8486..27c1236cb2 100644 --- a/client/src/components/Chat/Menus/Endpoints/components/EndpointItem.tsx +++ b/client/src/components/Chat/Menus/Endpoints/components/EndpointItem.tsx @@ -1,4 +1,5 @@ import { useMemo } from 'react'; +import { VisuallyHidden } from '@ariakit/react'; import { Spinner, TooltipAnchor } from '@librechat/client'; import { CheckCircle2, MousePointerClick, SettingsIcon } from 'lucide-react'; import { EModelEndpoint, isAgentsEndpoint, isAssistantsEndpoint } from 'librechat-data-provider'; @@ -126,6 +127,8 @@ export function EndpointItem({ endpoint, endpointIndex }: EndpointItemProps) { ); + const isEndpointSelected = selectedEndpoint === endpoint.value; + if (endpoint.hasModels) { const filteredModels = searchValue ? filterModels( @@ -153,9 +156,17 @@ export function EndpointItem({ endpoint, endpointIndex }: EndpointItemProps) { label={
{renderIconLabel()} - {isUserProvided && ( - - )} +
+ {isUserProvided && ( + + )} + {isEndpointSelected && ( + <> +
} > @@ -200,6 +211,7 @@ export function EndpointItem({ endpoint, endpointIndex }: EndpointItemProps) { id={`endpoint-${endpoint.value}-menu`} key={`endpoint-${endpoint.value}-item`} onClick={() => handleSelectEndpoint(endpoint)} + aria-selected={isEndpointSelected || undefined} className="group flex w-full cursor-pointer items-center justify-between gap-1.5 py-2 text-sm" > {renderIconLabel()} @@ -218,8 +230,11 @@ export function EndpointItem({ endpoint, endpointIndex }: EndpointItemProps) { } /> )} - {selectedEndpoint === endpoint.value && !isAssistantsNotLoaded && ( -