mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-18 09:20:15 +01:00
* Feature: Dynamic MCP Server with Full UI Management * 🚦 feat: Add MCP Connection Status icons to MCPBuilder panel (#10805) * feature: Add MCP server connection status icons to MCPBuilder panel * refactor: Simplify MCPConfigDialog rendering in MCPBuilderPanel --------- Co-authored-by: Atef Bellaaj <slalom.bellaaj@external.daimlertruck.com> Co-authored-by: Danny Avila <danny@librechat.ai> * fix: address code review feedback for MCP server management - Fix OAuth secret preservation to avoid mutating input parameter by creating a merged config copy in ServerConfigsDB.update() - Improve error handling in getResourcePermissionsMap to propagate critical errors instead of silently returning empty Map - Extract duplicated MCP server filter logic by exposing selectableServers from useMCPServerManager hook and using it in MCPSelect component * test: Update PermissionService tests to throw errors on invalid resource types - Changed the test for handling invalid resource types to ensure it throws an error instead of returning an empty permissions map. - Updated the expectation to check for the specific error message when an invalid resource type is provided. * feat: Implement retry logic for MCP server creation to handle race conditions - Enhanced the createMCPServer method to include retry logic with exponential backoff for handling duplicate key errors during concurrent server creation. - Updated tests to verify that all concurrent requests succeed and that unique server names are generated. - Added a helper function to identify MongoDB duplicate key errors, improving error handling during server creation. * refactor: StatusIcon to use CircleCheck for connected status - Replaced the PlugZap icon with CircleCheck in the ConnectedStatusIcon component to better represent the connected state. - Ensured consistent icon usage across the component for improved visual clarity. * test: Update AccessControlService tests to throw errors on invalid resource types - Modified the test for invalid resource types to ensure it throws an error with a specific message instead of returning an empty permissions map. - This change enhances error handling and improves test coverage for the AccessControlService. * fix: Update error message for missing server name in MCP server retrieval - Changed the error message returned when the server name is not provided from 'MCP ID is required' to 'Server name is required' for better clarity and accuracy in the API response. --------- Co-authored-by: Atef Bellaaj <slalom.bellaaj@external.daimlertruck.com> Co-authored-by: Danny Avila <danny@librechat.ai>
526 lines
16 KiB
TypeScript
526 lines
16 KiB
TypeScript
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import type {
|
|
UseQueryOptions,
|
|
UseMutationResult,
|
|
QueryObserverResult,
|
|
} from '@tanstack/react-query';
|
|
import { Constants, initialModelsConfig } from '../config';
|
|
import { defaultOrderQuery } from '../types/assistants';
|
|
import { MCPServerConnectionStatusResponse } from '../types/queries';
|
|
import * as dataService from '../data-service';
|
|
import * as m from '../types/mutations';
|
|
import * as q from '../types/queries';
|
|
import { QueryKeys } from '../keys';
|
|
import * as s from '../schemas';
|
|
import * as t from '../types';
|
|
import * as permissions from '../accessPermissions';
|
|
import { ResourceType } from '../accessPermissions';
|
|
|
|
export { hasPermissions } from '../accessPermissions';
|
|
|
|
export const useGetSharedMessages = (
|
|
shareId: string,
|
|
config?: UseQueryOptions<t.TSharedMessagesResponse>,
|
|
): QueryObserverResult<t.TSharedMessagesResponse> => {
|
|
return useQuery<t.TSharedMessagesResponse>(
|
|
[QueryKeys.sharedMessages, shareId],
|
|
() => dataService.getSharedMessages(shareId),
|
|
{
|
|
refetchOnWindowFocus: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnMount: false,
|
|
...config,
|
|
},
|
|
);
|
|
};
|
|
|
|
export const useGetSharedLinkQuery = (
|
|
conversationId: string,
|
|
config?: UseQueryOptions<t.TSharedLinkGetResponse>,
|
|
): QueryObserverResult<t.TSharedLinkGetResponse> => {
|
|
const queryClient = useQueryClient();
|
|
return useQuery<t.TSharedLinkGetResponse>(
|
|
[QueryKeys.sharedLinks, conversationId],
|
|
() => dataService.getSharedLink(conversationId),
|
|
{
|
|
enabled:
|
|
!!conversationId &&
|
|
conversationId !== Constants.NEW_CONVO &&
|
|
conversationId !== Constants.PENDING_CONVO,
|
|
refetchOnWindowFocus: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnMount: false,
|
|
onSuccess: (data) => {
|
|
queryClient.setQueryData([QueryKeys.sharedLinks, conversationId], {
|
|
conversationId: data.conversationId,
|
|
shareId: data.shareId,
|
|
});
|
|
},
|
|
...config,
|
|
},
|
|
);
|
|
};
|
|
|
|
export const useGetConversationByIdQuery = (
|
|
id: string,
|
|
config?: UseQueryOptions<s.TConversation>,
|
|
): QueryObserverResult<s.TConversation> => {
|
|
return useQuery<s.TConversation>(
|
|
[QueryKeys.conversation, id],
|
|
() => dataService.getConversationById(id),
|
|
{
|
|
refetchOnWindowFocus: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnMount: false,
|
|
...config,
|
|
},
|
|
);
|
|
};
|
|
|
|
//This isn't ideal because its just a query and we're using mutation, but it was the only way
|
|
//to make it work with how the Chat component is structured
|
|
export const useGetConversationByIdMutation = (id: string): UseMutationResult<s.TConversation> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation(() => dataService.getConversationById(id), {
|
|
// onSuccess: (res: s.TConversation) => {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries([QueryKeys.conversation, id]);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useUpdateMessageMutation = (
|
|
id: string,
|
|
): UseMutationResult<unknown, unknown, t.TUpdateMessageRequest, unknown> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation((payload: t.TUpdateMessageRequest) => dataService.updateMessage(payload), {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries([QueryKeys.messages, id]);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useUpdateMessageContentMutation = (
|
|
conversationId: string,
|
|
): UseMutationResult<unknown, unknown, t.TUpdateMessageContent, unknown> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation(
|
|
(payload: t.TUpdateMessageContent) => dataService.updateMessageContent(payload),
|
|
{
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries([QueryKeys.messages, conversationId]);
|
|
},
|
|
},
|
|
);
|
|
};
|
|
|
|
export const useUpdateUserKeysMutation = (): UseMutationResult<
|
|
t.TUser,
|
|
unknown,
|
|
t.TUpdateUserKeyRequest,
|
|
unknown
|
|
> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation((payload: t.TUpdateUserKeyRequest) => dataService.updateUserKey(payload), {
|
|
onSuccess: (data, variables) => {
|
|
queryClient.invalidateQueries([QueryKeys.name, variables.name]);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useClearConversationsMutation = (): UseMutationResult<unknown> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation(() => dataService.clearAllConversations(), {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries([QueryKeys.allConversations]);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useRevokeUserKeyMutation = (name: string): UseMutationResult<unknown> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation(() => dataService.revokeUserKey(name), {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries([QueryKeys.name, name]);
|
|
if (s.isAssistantsEndpoint(name)) {
|
|
queryClient.invalidateQueries([QueryKeys.assistants, name, defaultOrderQuery]);
|
|
queryClient.invalidateQueries([QueryKeys.assistantDocs]);
|
|
queryClient.invalidateQueries([QueryKeys.assistants]);
|
|
queryClient.invalidateQueries([QueryKeys.assistant]);
|
|
queryClient.invalidateQueries([QueryKeys.mcpTools]);
|
|
queryClient.invalidateQueries([QueryKeys.actions]);
|
|
queryClient.invalidateQueries([QueryKeys.tools]);
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useRevokeAllUserKeysMutation = (): UseMutationResult<unknown> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation(() => dataService.revokeAllUserKeys(), {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries([QueryKeys.name]);
|
|
queryClient.invalidateQueries([
|
|
QueryKeys.assistants,
|
|
s.EModelEndpoint.assistants,
|
|
defaultOrderQuery,
|
|
]);
|
|
queryClient.invalidateQueries([
|
|
QueryKeys.assistants,
|
|
s.EModelEndpoint.azureAssistants,
|
|
defaultOrderQuery,
|
|
]);
|
|
queryClient.invalidateQueries([QueryKeys.assistantDocs]);
|
|
queryClient.invalidateQueries([QueryKeys.assistants]);
|
|
queryClient.invalidateQueries([QueryKeys.assistant]);
|
|
queryClient.invalidateQueries([QueryKeys.mcpTools]);
|
|
queryClient.invalidateQueries([QueryKeys.actions]);
|
|
queryClient.invalidateQueries([QueryKeys.tools]);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useGetModelsQuery = (
|
|
config?: UseQueryOptions<t.TModelsConfig>,
|
|
): QueryObserverResult<t.TModelsConfig> => {
|
|
return useQuery<t.TModelsConfig>([QueryKeys.models], () => dataService.getModels(), {
|
|
initialData: initialModelsConfig,
|
|
refetchOnWindowFocus: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnMount: false,
|
|
staleTime: Infinity,
|
|
...config,
|
|
});
|
|
};
|
|
|
|
export const useCreatePresetMutation = (): UseMutationResult<
|
|
s.TPreset,
|
|
unknown,
|
|
s.TPreset,
|
|
unknown
|
|
> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation((payload: s.TPreset) => dataService.createPreset(payload), {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries([QueryKeys.presets]);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useDeletePresetMutation = (): UseMutationResult<
|
|
m.PresetDeleteResponse,
|
|
unknown,
|
|
s.TPreset | undefined,
|
|
unknown
|
|
> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation((payload: s.TPreset | undefined) => dataService.deletePreset(payload), {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries([QueryKeys.presets]);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useUpdateTokenCountMutation = (): UseMutationResult<
|
|
t.TUpdateTokenCountResponse,
|
|
unknown,
|
|
{ text: string },
|
|
unknown
|
|
> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation(({ text }: { text: string }) => dataService.updateTokenCount(text), {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries([QueryKeys.tokenCount]);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useRegisterUserMutation = (
|
|
options?: m.RegistrationOptions,
|
|
): UseMutationResult<t.TError, unknown, t.TRegisterUser, unknown> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation<t.TRegisterUserResponse, t.TError, t.TRegisterUser>(
|
|
(payload: t.TRegisterUser) => dataService.register(payload),
|
|
{
|
|
...options,
|
|
onSuccess: (...args) => {
|
|
queryClient.invalidateQueries([QueryKeys.user]);
|
|
if (options?.onSuccess) {
|
|
options.onSuccess(...args);
|
|
}
|
|
},
|
|
},
|
|
);
|
|
};
|
|
|
|
export const useUserKeyQuery = (
|
|
name: string,
|
|
config?: UseQueryOptions<t.TCheckUserKeyResponse>,
|
|
): QueryObserverResult<t.TCheckUserKeyResponse> => {
|
|
return useQuery<t.TCheckUserKeyResponse>(
|
|
[QueryKeys.name, name],
|
|
() => {
|
|
if (!name) {
|
|
return Promise.resolve({ expiresAt: '' });
|
|
}
|
|
return dataService.userKeyQuery(name);
|
|
},
|
|
{
|
|
refetchOnWindowFocus: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnMount: false,
|
|
retry: false,
|
|
...config,
|
|
},
|
|
);
|
|
};
|
|
|
|
export const useRequestPasswordResetMutation = (): UseMutationResult<
|
|
t.TRequestPasswordResetResponse,
|
|
unknown,
|
|
t.TRequestPasswordReset,
|
|
unknown
|
|
> => {
|
|
return useMutation((payload: t.TRequestPasswordReset) =>
|
|
dataService.requestPasswordReset(payload),
|
|
);
|
|
};
|
|
|
|
export const useResetPasswordMutation = (): UseMutationResult<
|
|
unknown,
|
|
unknown,
|
|
t.TResetPassword,
|
|
unknown
|
|
> => {
|
|
return useMutation((payload: t.TResetPassword) => dataService.resetPassword(payload));
|
|
};
|
|
|
|
export const useAvailablePluginsQuery = <TData = s.TPlugin[]>(
|
|
config?: UseQueryOptions<s.TPlugin[], unknown, TData>,
|
|
): QueryObserverResult<TData> => {
|
|
return useQuery<s.TPlugin[], unknown, TData>(
|
|
[QueryKeys.availablePlugins],
|
|
() => dataService.getAvailablePlugins(),
|
|
{
|
|
refetchOnWindowFocus: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnMount: false,
|
|
...config,
|
|
},
|
|
);
|
|
};
|
|
|
|
export const useUpdateUserPluginsMutation = (
|
|
_options?: m.UpdatePluginAuthOptions,
|
|
): UseMutationResult<t.TUser, unknown, t.TUpdateUserPlugins, unknown> => {
|
|
const queryClient = useQueryClient();
|
|
const { onSuccess, ...options } = _options ?? {};
|
|
return useMutation((payload: t.TUpdateUserPlugins) => dataService.updateUserPlugins(payload), {
|
|
...options,
|
|
onSuccess: (...args) => {
|
|
queryClient.invalidateQueries([QueryKeys.user]);
|
|
onSuccess?.(...args);
|
|
if (args[1]?.action === 'uninstall' && args[1]?.pluginKey?.startsWith(Constants.mcp_prefix)) {
|
|
const serverName = args[1]?.pluginKey?.substring(Constants.mcp_prefix.length);
|
|
queryClient.invalidateQueries([QueryKeys.mcpAuthValues, serverName]);
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useReinitializeMCPServerMutation = (): UseMutationResult<
|
|
{
|
|
success: boolean;
|
|
message: string;
|
|
serverName: string;
|
|
oauthRequired?: boolean;
|
|
oauthUrl?: string;
|
|
},
|
|
unknown,
|
|
string,
|
|
unknown
|
|
> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation((serverName: string) => dataService.reinitializeMCPServer(serverName), {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries([QueryKeys.mcpTools]);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useCancelMCPOAuthMutation = (): UseMutationResult<
|
|
m.CancelMCPOAuthResponse,
|
|
unknown,
|
|
string,
|
|
unknown
|
|
> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation((serverName: string) => dataService.cancelMCPOAuth(serverName), {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries([QueryKeys.mcpConnectionStatus]);
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useGetCustomConfigSpeechQuery = (
|
|
config?: UseQueryOptions<t.TCustomConfigSpeechResponse>,
|
|
): QueryObserverResult<t.TCustomConfigSpeechResponse> => {
|
|
return useQuery<t.TCustomConfigSpeechResponse>(
|
|
[QueryKeys.customConfigSpeech],
|
|
() => dataService.getCustomConfigSpeech(),
|
|
{
|
|
refetchOnWindowFocus: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnMount: false,
|
|
...config,
|
|
},
|
|
);
|
|
};
|
|
|
|
export const useUpdateFeedbackMutation = (
|
|
conversationId: string,
|
|
messageId: string,
|
|
): UseMutationResult<t.TUpdateFeedbackResponse, Error, t.TUpdateFeedbackRequest> => {
|
|
const queryClient = useQueryClient();
|
|
return useMutation(
|
|
(payload: t.TUpdateFeedbackRequest) =>
|
|
dataService.updateFeedback(conversationId, messageId, payload),
|
|
{
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries([QueryKeys.messages, messageId]);
|
|
},
|
|
},
|
|
);
|
|
};
|
|
|
|
export const useSearchPrincipalsQuery = (
|
|
params: q.PrincipalSearchParams,
|
|
config?: UseQueryOptions<q.PrincipalSearchResponse>,
|
|
): QueryObserverResult<q.PrincipalSearchResponse> => {
|
|
return useQuery<q.PrincipalSearchResponse>(
|
|
[QueryKeys.principalSearch, params],
|
|
() => dataService.searchPrincipals(params),
|
|
{
|
|
enabled: !!params.q && params.q.length >= 2,
|
|
refetchOnWindowFocus: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnMount: false,
|
|
staleTime: 30000,
|
|
...config,
|
|
},
|
|
);
|
|
};
|
|
|
|
export const useGetAccessRolesQuery = (
|
|
resourceType: ResourceType,
|
|
config?: UseQueryOptions<q.AccessRolesResponse>,
|
|
): QueryObserverResult<q.AccessRolesResponse> => {
|
|
return useQuery<q.AccessRolesResponse>(
|
|
[QueryKeys.accessRoles, resourceType],
|
|
() => dataService.getAccessRoles(resourceType),
|
|
{
|
|
enabled: !!resourceType,
|
|
refetchOnWindowFocus: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnMount: false,
|
|
staleTime: 5 * 60 * 1000, // Cache for 5 minutes
|
|
...config,
|
|
},
|
|
);
|
|
};
|
|
|
|
export const useGetResourcePermissionsQuery = (
|
|
resourceType: ResourceType,
|
|
resourceId: string,
|
|
config?: UseQueryOptions<permissions.TGetResourcePermissionsResponse>,
|
|
): QueryObserverResult<permissions.TGetResourcePermissionsResponse> => {
|
|
return useQuery<permissions.TGetResourcePermissionsResponse>(
|
|
[QueryKeys.resourcePermissions, resourceType, resourceId],
|
|
() => dataService.getResourcePermissions(resourceType, resourceId),
|
|
{
|
|
enabled: !!resourceType && !!resourceId,
|
|
refetchOnWindowFocus: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnMount: false,
|
|
staleTime: 2 * 60 * 1000, // Cache for 2 minutes
|
|
...config,
|
|
},
|
|
);
|
|
};
|
|
|
|
export const useUpdateResourcePermissionsMutation = (): UseMutationResult<
|
|
permissions.TUpdateResourcePermissionsResponse,
|
|
Error,
|
|
{
|
|
resourceType: ResourceType;
|
|
resourceId: string;
|
|
data: permissions.TUpdateResourcePermissionsRequest;
|
|
}
|
|
> => {
|
|
const queryClient = useQueryClient();
|
|
|
|
return useMutation({
|
|
mutationFn: ({ resourceType, resourceId, data }) =>
|
|
dataService.updateResourcePermissions(resourceType, resourceId, data),
|
|
onSuccess: (_, variables) => {
|
|
queryClient.invalidateQueries({
|
|
queryKey: [QueryKeys.accessRoles, variables.resourceType],
|
|
});
|
|
|
|
queryClient.invalidateQueries({
|
|
queryKey: [QueryKeys.resourcePermissions, variables.resourceType, variables.resourceId],
|
|
});
|
|
|
|
queryClient.invalidateQueries({
|
|
queryKey: [QueryKeys.effectivePermissions, variables.resourceType, variables.resourceId],
|
|
});
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useGetEffectivePermissionsQuery = (
|
|
resourceType: ResourceType,
|
|
resourceId: string,
|
|
config?: UseQueryOptions<permissions.TEffectivePermissionsResponse>,
|
|
): QueryObserverResult<permissions.TEffectivePermissionsResponse> => {
|
|
return useQuery<permissions.TEffectivePermissionsResponse>({
|
|
queryKey: [QueryKeys.effectivePermissions, resourceType, resourceId],
|
|
queryFn: () => dataService.getEffectivePermissions(resourceType, resourceId),
|
|
enabled: !!resourceType && !!resourceId,
|
|
refetchOnWindowFocus: false,
|
|
staleTime: 30000,
|
|
...config,
|
|
});
|
|
};
|
|
|
|
export const useGetAllEffectivePermissionsQuery = (
|
|
resourceType: ResourceType,
|
|
config?: UseQueryOptions<permissions.TAllEffectivePermissionsResponse>,
|
|
): QueryObserverResult<permissions.TAllEffectivePermissionsResponse> => {
|
|
return useQuery<permissions.TAllEffectivePermissionsResponse>({
|
|
queryKey: [QueryKeys.effectivePermissions, 'all', resourceType],
|
|
queryFn: () => dataService.getAllEffectivePermissions(resourceType),
|
|
enabled: !!resourceType,
|
|
refetchOnWindowFocus: false,
|
|
staleTime: 30000,
|
|
...config,
|
|
});
|
|
};
|
|
|
|
export const useMCPServerConnectionStatusQuery = (
|
|
serverName: string,
|
|
config?: UseQueryOptions<MCPServerConnectionStatusResponse>,
|
|
): QueryObserverResult<MCPServerConnectionStatusResponse> => {
|
|
return useQuery<MCPServerConnectionStatusResponse>(
|
|
[QueryKeys.mcpConnectionStatus, serverName],
|
|
() => dataService.getMCPServerConnectionStatus(serverName),
|
|
{
|
|
refetchOnWindowFocus: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnMount: false,
|
|
staleTime: 10000, // 10 seconds
|
|
enabled: !!serverName,
|
|
...config,
|
|
},
|
|
);
|
|
};
|