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
This commit is contained in:
Atef Bellaaj 2025-07-22 16:59:11 +02:00 committed by Danny Avila
parent 60db466298
commit 3105c17713
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956

View file

@ -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]);
}