mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-26 21:28:50 +01:00
wip: needs to be pared down so much, but is functional and relatively robust
This commit is contained in:
Dustin Healy
parent
94c329680f
commit
dd8a9d5d45
27 changed files with 1767 additions and 285 deletions
|
|
@ -1,9 +1,12 @@
|
|||
import React, { memo, useCallback, useState } from 'react';
|
||||
import { SettingsIcon } from 'lucide-react';
|
||||
import React, { memo, useCallback, useState, useMemo } from 'react';
|
||||
import { SettingsIcon, PlugZap } from 'lucide-react';
|
||||
import { Constants } from 'librechat-data-provider';
|
||||
import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
|
||||
import { useMCPConnectionStatusQuery, useMCPAuthValuesQuery } from '~/data-provider';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { QueryKeys } from 'librechat-data-provider';
|
||||
import type { TUpdateUserPlugins, TPlugin } from 'librechat-data-provider';
|
||||
import MCPConfigDialog, { type ConfigFieldDetail } from '~/components/ui/MCPConfigDialog';
|
||||
import { MCPConfigDialog, type ConfigFieldDetail } from '~/components/ui/MCP';
|
||||
import { useToastContext, useBadgeRowContext } from '~/Providers';
|
||||
import MultiSelect from '~/components/ui/MultiSelect';
|
||||
import { MCPIcon } from '~/components/svg';
|
||||
|
|
@ -18,15 +21,47 @@ function MCPSelect() {
|
|||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
const { mcpSelect, startupConfig } = useBadgeRowContext();
|
||||
const { mcpValues, setMCPValues, mcpServerNames, mcpToolDetails, isPinned } = mcpSelect;
|
||||
const { mcpValues, setMCPValues, mcpToolDetails, isPinned } = mcpSelect;
|
||||
|
||||
// Get real connection status from MCPManager
|
||||
const { data: statusQuery } = useMCPConnectionStatusQuery();
|
||||
|
||||
const mcpServerStatuses = statusQuery?.connectionStatus || {};
|
||||
|
||||
console.log('mcpServerStatuses', mcpServerStatuses);
|
||||
console.log('statusQuery', statusQuery);
|
||||
|
||||
const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
|
||||
const [selectedToolForConfig, setSelectedToolForConfig] = useState<TPlugin | null>(null);
|
||||
|
||||
// Fetch auth values for the selected server
|
||||
const { data: authValuesData } = useMCPAuthValuesQuery(selectedToolForConfig?.name || '', {
|
||||
enabled: isConfigModalOpen && !!selectedToolForConfig?.name,
|
||||
});
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const updateUserPluginsMutation = useUpdateUserPluginsMutation({
|
||||
onSuccess: () => {
|
||||
setIsConfigModalOpen(false);
|
||||
onSuccess: async (data, variables) => {
|
||||
showToast({ message: localize('com_nav_mcp_vars_updated'), status: 'success' });
|
||||
|
||||
// // For 'uninstall' actions (revoke), remove the server from selected values
|
||||
// if (variables.action === 'uninstall') {
|
||||
// const serverName = variables.pluginKey.replace(Constants.mcp_prefix, '');
|
||||
// const currentValues = mcpValues ?? [];
|
||||
// const filteredValues = currentValues.filter((name) => name !== serverName);
|
||||
// setMCPValues(filteredValues);
|
||||
// }
|
||||
|
||||
// Wait for all refetches to complete before ending loading state
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries([QueryKeys.tools]),
|
||||
queryClient.refetchQueries([QueryKeys.tools]),
|
||||
queryClient.invalidateQueries([QueryKeys.mcpAuthValues]),
|
||||
queryClient.refetchQueries([QueryKeys.mcpAuthValues]),
|
||||
queryClient.invalidateQueries([QueryKeys.mcpConnectionStatus]),
|
||||
queryClient.refetchQueries([QueryKeys.mcpConnectionStatus]),
|
||||
]);
|
||||
},
|
||||
onError: (error: unknown) => {
|
||||
console.error('Error updating MCP auth:', error);
|
||||
|
|
@ -53,10 +88,12 @@ function MCPSelect() {
|
|||
const handleConfigSave = useCallback(
|
||||
(targetName: string, authData: Record<string, string>) => {
|
||||
if (selectedToolForConfig && selectedToolForConfig.name === targetName) {
|
||||
const basePluginKey = getBaseMCPPluginKey(selectedToolForConfig.pluginKey);
|
||||
|
||||
// Use the pluginKey directly since it's already in the correct format
|
||||
console.log(
|
||||
`[MCP Select] Saving config for ${targetName}, pluginKey: ${`${Constants.mcp_prefix}${targetName}`}`,
|
||||
);
|
||||
const payload: TUpdateUserPlugins = {
|
||||
pluginKey: basePluginKey,
|
||||
pluginKey: `${Constants.mcp_prefix}${targetName}`,
|
||||
action: 'install',
|
||||
auth: authData,
|
||||
};
|
||||
|
|
@ -69,10 +106,12 @@ function MCPSelect() {
|
|||
const handleConfigRevoke = useCallback(
|
||||
(targetName: string) => {
|
||||
if (selectedToolForConfig && selectedToolForConfig.name === targetName) {
|
||||
const basePluginKey = getBaseMCPPluginKey(selectedToolForConfig.pluginKey);
|
||||
|
||||
// Use the pluginKey directly since it's already in the correct format
|
||||
console.log(
|
||||
`[MCP Select] Revoking config for ${targetName}, pluginKey: ${`${Constants.mcp_prefix}${targetName}`}`,
|
||||
);
|
||||
const payload: TUpdateUserPlugins = {
|
||||
pluginKey: basePluginKey,
|
||||
pluginKey: `${Constants.mcp_prefix}${targetName}`,
|
||||
action: 'uninstall',
|
||||
auth: {},
|
||||
};
|
||||
|
|
@ -82,49 +121,138 @@ function MCPSelect() {
|
|||
[selectedToolForConfig, updateUserPluginsMutation],
|
||||
);
|
||||
|
||||
// Create stable callback references to prevent stale closures
|
||||
const handleSave = useCallback(
|
||||
(authData: Record<string, string>) => {
|
||||
if (selectedToolForConfig) {
|
||||
handleConfigSave(selectedToolForConfig.name, authData);
|
||||
}
|
||||
},
|
||||
[selectedToolForConfig, handleConfigSave],
|
||||
);
|
||||
|
||||
const handleRevoke = useCallback(() => {
|
||||
if (selectedToolForConfig) {
|
||||
handleConfigRevoke(selectedToolForConfig.name);
|
||||
}
|
||||
}, [selectedToolForConfig, handleConfigRevoke]);
|
||||
|
||||
// Only allow connected servers to be selected
|
||||
const handleSetSelectedValues = useCallback(
|
||||
(values: string[]) => {
|
||||
// Filter to only include connected servers
|
||||
const connectedValues = values.filter((serverName) => {
|
||||
const serverStatus = mcpServerStatuses?.[serverName];
|
||||
return serverStatus?.connected || false;
|
||||
});
|
||||
setMCPValues(connectedValues);
|
||||
},
|
||||
[setMCPValues, mcpServerStatuses],
|
||||
);
|
||||
|
||||
const renderItemContent = useCallback(
|
||||
(serverName: string, defaultContent: React.ReactNode) => {
|
||||
const tool = mcpToolDetails?.find((t) => t.name === serverName);
|
||||
const hasAuthConfig = tool?.authConfig && tool.authConfig.length > 0;
|
||||
const serverStatus = mcpServerStatuses?.[serverName];
|
||||
const connected = serverStatus?.connected || false;
|
||||
const hasAuthConfig = serverStatus?.hasAuthConfig || false;
|
||||
|
||||
// Common wrapper for the main content (check mark + text)
|
||||
// Ensures Check & Text are adjacent and the group takes available space.
|
||||
const mainContentWrapper = (
|
||||
<div className="flex flex-grow items-center">{defaultContent}</div>
|
||||
);
|
||||
// Icon logic:
|
||||
// - connected with auth config = gear (green)
|
||||
// - connected without auth config = no icon (just text)
|
||||
// - not connected = zap (orange)
|
||||
let icon: React.ReactNode = null;
|
||||
let tooltip = 'Configure server';
|
||||
|
||||
if (tool && hasAuthConfig) {
|
||||
return (
|
||||
<div className="flex w-full items-center justify-between">
|
||||
{mainContentWrapper}
|
||||
if (connected) {
|
||||
if (hasAuthConfig) {
|
||||
icon = <SettingsIcon className="h-4 w-4 text-green-500" />;
|
||||
tooltip = 'Configure connected server';
|
||||
} else {
|
||||
// No icon for connected servers without auth config
|
||||
tooltip = 'Connected server (no configuration needed)';
|
||||
}
|
||||
} else {
|
||||
icon = <PlugZap className="h-4 w-4 text-orange-400" />;
|
||||
tooltip = 'Configure server';
|
||||
}
|
||||
|
||||
const onClick = () => {
|
||||
const serverConfig = startupConfig?.mcpServers?.[serverName];
|
||||
if (serverConfig) {
|
||||
const serverTool = {
|
||||
name: serverName,
|
||||
pluginKey: `${Constants.mcp_prefix}${serverName}`,
|
||||
authConfig: Object.entries(serverConfig.customUserVars || {}).map(([key, config]) => ({
|
||||
authField: key,
|
||||
label: config.title,
|
||||
description: config.description,
|
||||
requiresOAuth: serverConfig.requiresOAuth || false,
|
||||
})),
|
||||
authenticated: connected,
|
||||
};
|
||||
setSelectedToolForConfig(serverTool);
|
||||
setIsConfigModalOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className={`flex flex-grow items-center ${!connected ? 'opacity-50' : ''}`}>
|
||||
{defaultContent}
|
||||
</div>
|
||||
{icon && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
setSelectedToolForConfig(tool);
|
||||
setIsConfigModalOpen(true);
|
||||
onClick();
|
||||
}}
|
||||
className="ml-2 flex h-6 w-6 items-center justify-center rounded p-1 hover:bg-surface-secondary"
|
||||
aria-label={`Configure ${serverName}`}
|
||||
aria-label={tooltip}
|
||||
title={tooltip}
|
||||
>
|
||||
<SettingsIcon className={`h-4 w-4 ${tool.authenticated ? 'text-green-500' : ''}`} />
|
||||
{icon}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// For items without a settings icon, return the consistently wrapped main content.
|
||||
return mainContentWrapper;
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[mcpToolDetails, setSelectedToolForConfig, setIsConfigModalOpen],
|
||||
[mcpServerStatuses, setSelectedToolForConfig, setIsConfigModalOpen, startupConfig],
|
||||
);
|
||||
|
||||
// Don't render if no servers are selected and not pinned
|
||||
if ((!mcpValues || mcpValues.length === 0) && !isPinned) {
|
||||
// Memoize schema and initial values to prevent unnecessary re-renders
|
||||
const fieldsSchema = useMemo(() => {
|
||||
const schema: Record<string, ConfigFieldDetail> = {};
|
||||
if (selectedToolForConfig?.authConfig) {
|
||||
selectedToolForConfig.authConfig.forEach((field) => {
|
||||
schema[field.authField] = {
|
||||
title: field.label,
|
||||
description: field.description,
|
||||
};
|
||||
});
|
||||
}
|
||||
return schema;
|
||||
}, [selectedToolForConfig?.authConfig]);
|
||||
|
||||
const initialValues = useMemo(() => {
|
||||
const initial: Record<string, string> = {};
|
||||
// Always start with empty values for security - never prefill sensitive data
|
||||
if (selectedToolForConfig?.authConfig) {
|
||||
selectedToolForConfig.authConfig.forEach((field) => {
|
||||
initial[field.authField] = '';
|
||||
});
|
||||
}
|
||||
return initial;
|
||||
}, [selectedToolForConfig?.authConfig]);
|
||||
|
||||
// Don't render if no MCP servers are available at all
|
||||
if (!mcpServerStatuses || Object.keys(mcpServerStatuses).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!mcpToolDetails || mcpToolDetails.length === 0) {
|
||||
// Don't render if no servers are selected and not pinned
|
||||
if ((!mcpValues || mcpValues.length === 0) && !isPinned) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -133,9 +261,9 @@ function MCPSelect() {
|
|||
return (
|
||||
<>
|
||||
<MultiSelect
|
||||
items={mcpServerNames}
|
||||
items={Object.keys(mcpServerStatuses) || []}
|
||||
selectedValues={mcpValues ?? []}
|
||||
setSelectedValues={setMCPValues}
|
||||
setSelectedValues={handleSetSelectedValues}
|
||||
defaultSelectedValues={mcpValues ?? []}
|
||||
renderSelectedValues={renderSelectedValues}
|
||||
renderItemContent={renderItemContent}
|
||||
|
|
@ -151,39 +279,13 @@ function MCPSelect() {
|
|||
isOpen={isConfigModalOpen}
|
||||
onOpenChange={setIsConfigModalOpen}
|
||||
serverName={selectedToolForConfig.name}
|
||||
fieldsSchema={(() => {
|
||||
const schema: Record<string, ConfigFieldDetail> = {};
|
||||
if (selectedToolForConfig?.authConfig) {
|
||||
selectedToolForConfig.authConfig.forEach((field) => {
|
||||
schema[field.authField] = {
|
||||
title: field.label,
|
||||
description: field.description,
|
||||
};
|
||||
});
|
||||
}
|
||||
return schema;
|
||||
})()}
|
||||
initialValues={(() => {
|
||||
const initial: Record<string, string> = {};
|
||||
// Note: Actual initial values might need to be fetched if they are stored user-specifically
|
||||
if (selectedToolForConfig?.authConfig) {
|
||||
selectedToolForConfig.authConfig.forEach((field) => {
|
||||
initial[field.authField] = ''; // Or fetched value
|
||||
});
|
||||
}
|
||||
return initial;
|
||||
})()}
|
||||
onSave={(authData) => {
|
||||
if (selectedToolForConfig) {
|
||||
handleConfigSave(selectedToolForConfig.name, authData);
|
||||
}
|
||||
}}
|
||||
onRevoke={() => {
|
||||
if (selectedToolForConfig) {
|
||||
handleConfigRevoke(selectedToolForConfig.name);
|
||||
}
|
||||
}}
|
||||
fieldsSchema={fieldsSchema}
|
||||
initialValues={initialValues}
|
||||
onSave={handleSave}
|
||||
onRevoke={handleRevoke}
|
||||
isSubmitting={updateUserPluginsMutation.isLoading}
|
||||
isConnected={mcpServerStatuses?.[selectedToolForConfig.name]?.connected || false}
|
||||
authConfig={selectedToolForConfig.authConfig}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import {
|
|||
useUpdateUserPluginsMutation,
|
||||
useReinitializeMCPServerMutation,
|
||||
} from 'librechat-data-provider/react-query';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { QueryKeys } from 'librechat-data-provider';
|
||||
import type { TUpdateUserPlugins } from 'librechat-data-provider';
|
||||
import { Button, Input, Label } from '~/components/ui';
|
||||
import { useGetStartupConfig } from '~/data-provider';
|
||||
|
|
@ -29,6 +31,7 @@ export default function MCPPanel() {
|
|||
);
|
||||
const [rotatingServers, setRotatingServers] = useState<Set<string>>(new Set());
|
||||
const reinitializeMCPMutation = useReinitializeMCPServerMutation();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const mcpServerDefinitions = useMemo(() => {
|
||||
if (!startupConfig?.mcpServers) {
|
||||
|
|
@ -50,11 +53,43 @@ export default function MCPPanel() {
|
|||
}, [startupConfig?.mcpServers]);
|
||||
|
||||
const updateUserPluginsMutation = useUpdateUserPluginsMutation({
|
||||
onSuccess: () => {
|
||||
onSuccess: async (data, variables) => {
|
||||
showToast({ message: localize('com_nav_mcp_vars_updated'), status: 'success' });
|
||||
|
||||
// Refetch tools query to refresh authentication state in the dropdown
|
||||
queryClient.refetchQueries([QueryKeys.tools]);
|
||||
|
||||
// For 'uninstall' actions (revoke), remove the server from selected values
|
||||
if (variables.action === 'uninstall') {
|
||||
const serverName = variables.pluginKey.replace(Constants.mcp_prefix, '');
|
||||
// Note: MCPPanel doesn't directly manage selected values, but this ensures
|
||||
// the tools query is refreshed so MCPSelect will pick up the changes
|
||||
}
|
||||
|
||||
// Only reinitialize for 'install' actions (save), not 'uninstall' actions (revoke)
|
||||
if (variables.action === 'install') {
|
||||
// Extract server name from pluginKey (e.g., "mcp_myServer" -> "myServer")
|
||||
const serverName = variables.pluginKey.replace(Constants.mcp_prefix, '');
|
||||
|
||||
// Reinitialize the MCP server to pick up the new authentication values
|
||||
try {
|
||||
await reinitializeMCPMutation.mutateAsync(serverName);
|
||||
console.log(
|
||||
`[MCP Panel] Successfully reinitialized server ${serverName} after auth update`,
|
||||
);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
`[MCP Panel] Error reinitializing server ${serverName} after auth update:`,
|
||||
error,
|
||||
);
|
||||
// Don't show error toast to user as the auth update was successful
|
||||
}
|
||||
}
|
||||
// For 'uninstall' actions (revoke), the backend already disconnects the connections
|
||||
// so no additional action is needed here
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Error updating MCP custom user variables:', error);
|
||||
onError: (error: unknown) => {
|
||||
console.error('Error updating MCP auth:', error);
|
||||
showToast({
|
||||
message: localize('com_nav_mcp_vars_update_error'),
|
||||
status: 'error',
|
||||
|
|
@ -98,17 +133,79 @@ export default function MCPPanel() {
|
|||
async (serverName: string) => {
|
||||
setRotatingServers((prev) => new Set(prev).add(serverName));
|
||||
try {
|
||||
await reinitializeMCPMutation.mutateAsync(serverName);
|
||||
showToast({
|
||||
message: `MCP server '${serverName}' reinitialized successfully`,
|
||||
status: 'success',
|
||||
});
|
||||
const response = await reinitializeMCPMutation.mutateAsync(serverName);
|
||||
|
||||
// Check if OAuth is required
|
||||
if (response.oauthRequired) {
|
||||
if (response.authorizationUrl) {
|
||||
// Show OAuth URL to user
|
||||
showToast({
|
||||
message: `OAuth required for ${serverName}. Please visit the authorization URL.`,
|
||||
status: 'info',
|
||||
});
|
||||
|
||||
// Open OAuth URL in new window/tab
|
||||
window.open(response.authorizationUrl, '_blank', 'noopener,noreferrer');
|
||||
|
||||
// Show a more detailed message with the URL
|
||||
setTimeout(() => {
|
||||
showToast({
|
||||
message: `OAuth URL opened for ${serverName}. Complete authentication and try reinitializing again.`,
|
||||
status: 'info',
|
||||
});
|
||||
}, 1000);
|
||||
} else {
|
||||
showToast({
|
||||
message: `OAuth authentication required for ${serverName}. Please configure OAuth credentials.`,
|
||||
status: 'warning',
|
||||
});
|
||||
}
|
||||
} else if (response.oauthCompleted) {
|
||||
showToast({
|
||||
message:
|
||||
response.message ||
|
||||
`MCP server '${serverName}' reinitialized successfully after OAuth`,
|
||||
status: 'success',
|
||||
});
|
||||
} else {
|
||||
showToast({
|
||||
message: response.message || `MCP server '${serverName}' reinitialized successfully`,
|
||||
status: 'success',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error reinitializing MCP server:', error);
|
||||
showToast({
|
||||
message: 'Failed to reinitialize MCP server',
|
||||
status: 'error',
|
||||
});
|
||||
|
||||
// Check if the error response contains OAuth information
|
||||
if (error?.response?.data?.oauthRequired) {
|
||||
const errorData = error.response.data;
|
||||
if (errorData.authorizationUrl) {
|
||||
showToast({
|
||||
message: `OAuth required for ${serverName}. Please visit the authorization URL.`,
|
||||
status: 'info',
|
||||
});
|
||||
|
||||
// Open OAuth URL in new window/tab
|
||||
window.open(errorData.authorizationUrl, '_blank', 'noopener,noreferrer');
|
||||
|
||||
setTimeout(() => {
|
||||
showToast({
|
||||
message: `OAuth URL opened for ${serverName}. Complete authentication and try reinitializing again.`,
|
||||
status: 'info',
|
||||
});
|
||||
}, 1000);
|
||||
} else {
|
||||
showToast({
|
||||
message: errorData.message || `OAuth authentication required for ${serverName}`,
|
||||
status: 'warning',
|
||||
});
|
||||
}
|
||||
} else {
|
||||
showToast({
|
||||
message: 'Failed to reinitialize MCP server',
|
||||
status: 'error',
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setRotatingServers((prev) => {
|
||||
const next = new Set(prev);
|
||||
|
|
|
|||
161
client/src/components/ui/MCP/CustomUserVarsSection.tsx
Normal file
161
client/src/components/ui/MCP/CustomUserVarsSection.tsx
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { Input, Label, Button } from '~/components/ui';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { useMCPAuthValuesQuery } from '~/data-provider/Tools/queries';
|
||||
|
||||
export interface CustomUserVarConfig {
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
interface CustomUserVarsSectionProps {
|
||||
serverName: string;
|
||||
fields: Record<string, CustomUserVarConfig>;
|
||||
onSave: (authData: Record<string, string>) => void;
|
||||
onRevoke: () => void;
|
||||
isSubmitting?: boolean;
|
||||
}
|
||||
|
||||
interface AuthFieldProps {
|
||||
name: string;
|
||||
config: CustomUserVarConfig;
|
||||
hasValue: boolean;
|
||||
control: any;
|
||||
errors: any;
|
||||
}
|
||||
|
||||
function AuthField({ name, config, hasValue, control, errors }: AuthFieldProps) {
|
||||
const localize = useLocalize();
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor={name} className="text-sm font-medium">
|
||||
{config.title}
|
||||
</Label>
|
||||
{hasValue ? (
|
||||
<div className="flex min-w-fit items-center gap-2 whitespace-nowrap rounded-full border border-border-medium px-2 py-0.5 text-xs font-medium text-text-secondary">
|
||||
<div className="h-1.5 w-1.5 rounded-full bg-green-500" />
|
||||
<span>{localize('com_ui_set')}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex min-w-fit items-center gap-2 whitespace-nowrap rounded-full border border-border-medium px-2 py-0.5 text-xs font-medium text-text-secondary">
|
||||
<div className="h-1.5 w-1.5 rounded-full border border-border-medium" />
|
||||
<span>{localize('com_ui_unset')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
defaultValue=""
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
id={name}
|
||||
type="text"
|
||||
{...field}
|
||||
placeholder={
|
||||
hasValue
|
||||
? `Update ${config.title} (currently saved)`
|
||||
: localize('com_ui_mcp_enter_var', { 0: config.title })
|
||||
}
|
||||
className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{config.description && (
|
||||
<p
|
||||
className="text-xs text-text-secondary [&_a]:text-blue-500 [&_a]:hover:text-blue-600 dark:[&_a]:text-blue-400 dark:[&_a]:hover:text-blue-300"
|
||||
dangerouslySetInnerHTML={{ __html: config.description }}
|
||||
/>
|
||||
)}
|
||||
{errors[name] && <p className="text-xs text-red-500">{errors[name]?.message}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CustomUserVarsSection({
|
||||
serverName,
|
||||
fields,
|
||||
onSave,
|
||||
onRevoke,
|
||||
isSubmitting = false,
|
||||
}: CustomUserVarsSectionProps) {
|
||||
const localize = useLocalize();
|
||||
|
||||
// Fetch auth value flags for the server
|
||||
const { data: authValuesData } = useMCPAuthValuesQuery(serverName, {
|
||||
enabled: !!serverName,
|
||||
});
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<Record<string, string>>({
|
||||
defaultValues: useMemo(() => {
|
||||
const initial: Record<string, string> = {};
|
||||
Object.keys(fields).forEach((key) => {
|
||||
initial[key] = '';
|
||||
});
|
||||
return initial;
|
||||
}, [fields]),
|
||||
});
|
||||
|
||||
const onFormSubmit = (data: Record<string, string>) => {
|
||||
onSave(data);
|
||||
};
|
||||
|
||||
const handleRevokeClick = () => {
|
||||
onRevoke();
|
||||
// Reset form after revoke
|
||||
reset();
|
||||
};
|
||||
|
||||
// Don't render if no fields to configure
|
||||
if (!fields || Object.keys(fields).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<form onSubmit={handleSubmit(onFormSubmit)} className="space-y-4">
|
||||
{Object.entries(fields).map(([key, config]) => {
|
||||
const hasValue = authValuesData?.authValueFlags?.[key] || false;
|
||||
|
||||
return (
|
||||
<AuthField
|
||||
key={key}
|
||||
name={key}
|
||||
config={config}
|
||||
hasValue={hasValue}
|
||||
control={control}
|
||||
errors={errors}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</form>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button
|
||||
onClick={handleRevokeClick}
|
||||
className="bg-red-600 text-white hover:bg-red-700 dark:hover:bg-red-800"
|
||||
disabled={isSubmitting}
|
||||
size="sm"
|
||||
>
|
||||
{localize('com_ui_revoke')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit(onFormSubmit)}
|
||||
className="bg-green-500 text-white hover:bg-green-600"
|
||||
disabled={isSubmitting}
|
||||
size="sm"
|
||||
>
|
||||
{isSubmitting ? localize('com_ui_saving') : localize('com_ui_save')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
108
client/src/components/ui/MCP/MCPConfigDialog.tsx
Normal file
108
client/src/components/ui/MCP/MCPConfigDialog.tsx
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
import React, { useMemo, useCallback } from 'react';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { useMCPConnectionStatusQuery } from '~/data-provider/Tools/queries';
|
||||
import { CustomUserVarsSection, ServerInitializationSection } from './';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { QueryKeys } from 'librechat-data-provider';
|
||||
|
||||
import {
|
||||
OGDialog,
|
||||
OGDialogContent,
|
||||
OGDialogHeader,
|
||||
OGDialogTitle,
|
||||
OGDialogDescription,
|
||||
} from '~/components/ui/OriginalDialog';
|
||||
|
||||
export interface ConfigFieldDetail {
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface MCPConfigDialogProps {
|
||||
isOpen: boolean;
|
||||
onOpenChange: (isOpen: boolean) => void;
|
||||
fieldsSchema: Record<string, ConfigFieldDetail>;
|
||||
initialValues: Record<string, string>;
|
||||
onSave: (updatedValues: Record<string, string>) => void;
|
||||
isSubmitting?: boolean;
|
||||
onRevoke?: () => void;
|
||||
serverName: string;
|
||||
isConnected?: boolean;
|
||||
authConfig?: Array<{
|
||||
authField: string;
|
||||
label: string;
|
||||
description: string;
|
||||
requiresOAuth?: boolean;
|
||||
}>;
|
||||
}
|
||||
|
||||
export default function MCPConfigDialog({
|
||||
isOpen,
|
||||
onOpenChange,
|
||||
fieldsSchema,
|
||||
onSave,
|
||||
isSubmitting = false,
|
||||
onRevoke,
|
||||
serverName,
|
||||
}: MCPConfigDialogProps) {
|
||||
const localize = useLocalize();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Get connection status to determine OAuth requirements with aggressive refresh
|
||||
const { data: statusQuery, refetch: refetchConnectionStatus } = useMCPConnectionStatusQuery({
|
||||
refetchOnMount: true,
|
||||
refetchOnWindowFocus: true,
|
||||
staleTime: 0,
|
||||
cacheTime: 0,
|
||||
});
|
||||
const mcpServerStatuses = statusQuery?.connectionStatus || {};
|
||||
|
||||
// Derive real-time connection status and OAuth requirements
|
||||
const serverStatus = mcpServerStatuses[serverName];
|
||||
const isRealTimeConnected = serverStatus?.connected || false;
|
||||
const requiresOAuth = useMemo(() => {
|
||||
return serverStatus?.requiresOAuth || false;
|
||||
}, [serverStatus?.requiresOAuth]);
|
||||
|
||||
const hasFields = Object.keys(fieldsSchema).length > 0;
|
||||
const dialogTitle = hasFields
|
||||
? localize('com_ui_configure_mcp_variables_for', { 0: serverName })
|
||||
: `${serverName} MCP Server`;
|
||||
const dialogDescription = hasFields
|
||||
? localize('com_ui_mcp_dialog_desc')
|
||||
: `Manage connection and settings for the ${serverName} MCP server.`;
|
||||
|
||||
return (
|
||||
<OGDialog open={isOpen} onOpenChange={onOpenChange}>
|
||||
<OGDialogContent className="flex max-h-[90vh] w-full max-w-md flex-col">
|
||||
<OGDialogHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<OGDialogTitle>{dialogTitle}</OGDialogTitle>
|
||||
{isRealTimeConnected && (
|
||||
<div className="flex items-center gap-2 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900 dark:text-green-300">
|
||||
<div className="h-1.5 w-1.5 rounded-full bg-green-500" />
|
||||
<span>{localize('com_ui_active')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<OGDialogDescription>{dialogDescription}</OGDialogDescription>
|
||||
</OGDialogHeader>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
{/* Custom User Variables Section */}
|
||||
<CustomUserVarsSection
|
||||
serverName={serverName}
|
||||
fields={fieldsSchema}
|
||||
onSave={onSave}
|
||||
onRevoke={onRevoke || (() => {})}
|
||||
isSubmitting={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Server Initialization Section */}
|
||||
<ServerInitializationSection serverName={serverName} requiresOAuth={requiresOAuth} />
|
||||
</OGDialogContent>
|
||||
</OGDialog>
|
||||
);
|
||||
}
|
||||
228
client/src/components/ui/MCP/ServerInitializationSection.tsx
Normal file
228
client/src/components/ui/MCP/ServerInitializationSection.tsx
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Button } from '~/components/ui';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { useToastContext } from '~/Providers';
|
||||
import {
|
||||
useReinitializeMCPServerMutation,
|
||||
useMCPOAuthStatusQuery,
|
||||
useCompleteMCPServerReinitializeMutation,
|
||||
} from 'librechat-data-provider/react-query';
|
||||
import { useMCPConnectionStatusQuery } from '~/data-provider/Tools/queries';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { QueryKeys } from 'librechat-data-provider';
|
||||
|
||||
import { RefreshCw, Link } from 'lucide-react';
|
||||
|
||||
interface ServerInitializationSectionProps {
|
||||
serverName: string;
|
||||
requiresOAuth: boolean;
|
||||
}
|
||||
|
||||
export default function ServerInitializationSection({
|
||||
serverName,
|
||||
requiresOAuth,
|
||||
}: ServerInitializationSectionProps) {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [oauthUrl, setOauthUrl] = useState<string | null>(null);
|
||||
const [oauthFlowId, setOauthFlowId] = useState<string | null>(null);
|
||||
|
||||
const { data: statusQuery } = useMCPConnectionStatusQuery();
|
||||
const mcpServerStatuses = statusQuery?.connectionStatus || {};
|
||||
const serverStatus = mcpServerStatuses[serverName];
|
||||
const isConnected = serverStatus?.connected || false;
|
||||
|
||||
// Helper function to invalidate caches after successful connection
|
||||
const handleSuccessfulConnection = useCallback(
|
||||
async (message: string) => {
|
||||
showToast({ message, status: 'success' });
|
||||
|
||||
// Force immediate refetch to update UI
|
||||
await Promise.all([
|
||||
queryClient.refetchQueries([QueryKeys.mcpConnectionStatus]),
|
||||
queryClient.refetchQueries([QueryKeys.tools]),
|
||||
]);
|
||||
},
|
||||
[showToast, queryClient],
|
||||
);
|
||||
|
||||
// Main initialization mutation
|
||||
const reinitializeMutation = useReinitializeMCPServerMutation();
|
||||
|
||||
// OAuth completion mutation (stores our tools)
|
||||
const completeReinitializeMutation = useCompleteMCPServerReinitializeMutation();
|
||||
|
||||
// Override the mutation success handlers
|
||||
const handleInitializeServer = useCallback(() => {
|
||||
// Reset OAuth state before starting
|
||||
setOauthUrl(null);
|
||||
setOauthFlowId(null);
|
||||
|
||||
// Trigger initialization
|
||||
reinitializeMutation.mutate(serverName, {
|
||||
onSuccess: (response) => {
|
||||
if (response.oauthRequired) {
|
||||
if (response.authURL && response.flowId) {
|
||||
setOauthUrl(response.authURL);
|
||||
setOauthFlowId(response.flowId);
|
||||
// Keep loading state - OAuth completion will handle success
|
||||
} else {
|
||||
showToast({
|
||||
message: `OAuth authentication required for ${serverName}. Please configure OAuth credentials.`,
|
||||
status: 'warning',
|
||||
});
|
||||
}
|
||||
} else if (response.success) {
|
||||
handleSuccessfulConnection(
|
||||
response.message || `MCP server '${serverName}' initialized successfully`,
|
||||
);
|
||||
}
|
||||
},
|
||||
onError: (error: any) => {
|
||||
console.error('Error initializing MCP server:', error);
|
||||
showToast({
|
||||
message: 'Failed to initialize MCP server',
|
||||
status: 'error',
|
||||
});
|
||||
},
|
||||
});
|
||||
}, [reinitializeMutation, serverName, showToast, handleSuccessfulConnection]);
|
||||
|
||||
// OAuth status polling (only when we have a flow ID)
|
||||
const oauthStatusQuery = useMCPOAuthStatusQuery(oauthFlowId || '', {
|
||||
enabled: !!oauthFlowId,
|
||||
refetchInterval: oauthFlowId ? 2000 : false,
|
||||
retry: false,
|
||||
onSuccess: (data) => {
|
||||
if (data?.completed) {
|
||||
// Immediately reset OAuth state to stop polling
|
||||
setOauthUrl(null);
|
||||
setOauthFlowId(null);
|
||||
|
||||
// OAuth completed, trigger completion mutation
|
||||
completeReinitializeMutation.mutate(serverName, {
|
||||
onSuccess: (response) => {
|
||||
handleSuccessfulConnection(
|
||||
response.message || `MCP server '${serverName}' initialized successfully after OAuth`,
|
||||
);
|
||||
},
|
||||
onError: (error: any) => {
|
||||
// Check if it initialized anyway
|
||||
if (isConnected) {
|
||||
handleSuccessfulConnection('MCP server initialized successfully after OAuth');
|
||||
return;
|
||||
}
|
||||
|
||||
console.error('Error completing MCP initialization:', error);
|
||||
showToast({
|
||||
message: 'Failed to complete MCP server initialization after OAuth',
|
||||
status: 'error',
|
||||
});
|
||||
|
||||
// OAuth state already reset above
|
||||
},
|
||||
});
|
||||
} else if (data?.failed) {
|
||||
showToast({
|
||||
message: `OAuth authentication failed: ${data.error || 'Unknown error'}`,
|
||||
status: 'error',
|
||||
});
|
||||
// Reset OAuth state on failure
|
||||
setOauthUrl(null);
|
||||
setOauthFlowId(null);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Reset OAuth state when component unmounts or server changes
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setOauthUrl(null);
|
||||
setOauthFlowId(null);
|
||||
};
|
||||
}, [serverName]);
|
||||
|
||||
const isLoading =
|
||||
reinitializeMutation.isLoading ||
|
||||
completeReinitializeMutation.isLoading ||
|
||||
(!!oauthFlowId && oauthStatusQuery.isFetching);
|
||||
|
||||
// Show subtle reinitialize option if connected
|
||||
if (isConnected) {
|
||||
return (
|
||||
<div className="flex justify-start">
|
||||
<button
|
||||
onClick={handleInitializeServer}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-600 disabled:opacity-50 dark:text-gray-500 dark:hover:text-gray-400"
|
||||
>
|
||||
<RefreshCw className={`h-3 w-3 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
{isLoading ? localize('com_ui_loading') : 'Reinitialize'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-[#991b1b] bg-[#2C1315] p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-red-700 dark:text-red-300">
|
||||
{requiresOAuth
|
||||
? `${serverName} not authenticated (OAuth Required)`
|
||||
: `${serverName} not initialized`}
|
||||
</span>
|
||||
</div>
|
||||
{/* Only show authenticate button when OAuth URL is not present */}
|
||||
{!oauthUrl && (
|
||||
<Button
|
||||
onClick={handleInitializeServer}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-2 bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 dark:hover:bg-blue-800"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<RefreshCw className="h-4 w-4 animate-spin" />
|
||||
{localize('com_ui_loading')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
{requiresOAuth
|
||||
? localize('com_ui_authenticate')
|
||||
: localize('com_ui_mcp_initialize')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* OAuth URL display */}
|
||||
{oauthUrl && (
|
||||
<div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-700 dark:bg-blue-900/20">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<div className="flex h-4 w-4 items-center justify-center rounded-full bg-blue-500">
|
||||
<Link className="h-2.5 w-2.5 text-white" />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-blue-700 dark:text-blue-300">
|
||||
{localize('com_ui_authorization_url')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
onClick={() => window.open(oauthUrl, '_blank', 'noopener,noreferrer')}
|
||||
className="w-full bg-blue-600 text-white hover:bg-blue-700 dark:hover:bg-blue-800"
|
||||
>
|
||||
{localize('com_ui_continue_oauth')}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-blue-600 dark:text-blue-400">
|
||||
{localize('com_ui_oauth_flow_desc')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
5
client/src/components/ui/MCP/index.ts
Normal file
5
client/src/components/ui/MCP/index.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export { default as MCPConfigDialog } from './MCPConfigDialog';
|
||||
export { default as CustomUserVarsSection } from './CustomUserVarsSection';
|
||||
export { default as ServerInitializationSection } from './ServerInitializationSection';
|
||||
export type { ConfigFieldDetail } from './MCPConfigDialog';
|
||||
export type { CustomUserVarConfig } from './CustomUserVarsSection';
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { Input, Label, OGDialog, Button } from '~/components/ui';
|
||||
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
export interface ConfigFieldDetail {
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface MCPConfigDialogProps {
|
||||
isOpen: boolean;
|
||||
onOpenChange: (isOpen: boolean) => void;
|
||||
fieldsSchema: Record<string, ConfigFieldDetail>;
|
||||
initialValues: Record<string, string>;
|
||||
onSave: (updatedValues: Record<string, string>) => void;
|
||||
isSubmitting?: boolean;
|
||||
onRevoke?: () => void;
|
||||
serverName: string;
|
||||
}
|
||||
|
||||
export default function MCPConfigDialog({
|
||||
isOpen,
|
||||
onOpenChange,
|
||||
fieldsSchema,
|
||||
initialValues,
|
||||
onSave,
|
||||
isSubmitting = false,
|
||||
onRevoke,
|
||||
serverName,
|
||||
}: MCPConfigDialogProps) {
|
||||
const localize = useLocalize();
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors, _ },
|
||||
} = useForm<Record<string, string>>({
|
||||
defaultValues: initialValues,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
reset(initialValues);
|
||||
}
|
||||
}, [isOpen, initialValues, reset]);
|
||||
|
||||
const onFormSubmit = (data: Record<string, string>) => {
|
||||
onSave(data);
|
||||
};
|
||||
|
||||
const handleRevoke = () => {
|
||||
if (onRevoke) {
|
||||
onRevoke();
|
||||
}
|
||||
};
|
||||
|
||||
const dialogTitle = localize('com_ui_configure_mcp_variables_for', { 0: serverName });
|
||||
const dialogDescription = localize('com_ui_mcp_dialog_desc');
|
||||
|
||||
return (
|
||||
<OGDialog open={isOpen} onOpenChange={onOpenChange}>
|
||||
<OGDialogTemplate
|
||||
className="sm:max-w-lg"
|
||||
title={dialogTitle}
|
||||
description={dialogDescription}
|
||||
headerClassName="px-6 pt-6 pb-4"
|
||||
main={
|
||||
<form onSubmit={handleSubmit(onFormSubmit)} className="space-y-4 px-6 pb-2">
|
||||
{Object.entries(fieldsSchema).map(([key, details]) => (
|
||||
<div key={key} className="space-y-2">
|
||||
<Label htmlFor={key} className="text-sm font-medium">
|
||||
{details.title}
|
||||
</Label>
|
||||
<Controller
|
||||
name={key}
|
||||
control={control}
|
||||
defaultValue={initialValues[key] || ''}
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
id={key}
|
||||
type="text"
|
||||
{...field}
|
||||
placeholder={localize('com_ui_mcp_enter_var', { 0: details.title })}
|
||||
className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{details.description && (
|
||||
<p
|
||||
className="text-xs text-text-secondary [&_a]:text-blue-500 [&_a]:hover:text-blue-600 dark:[&_a]:text-blue-400 dark:[&_a]:hover:text-blue-300"
|
||||
dangerouslySetInnerHTML={{ __html: details.description }}
|
||||
/>
|
||||
)}
|
||||
{errors[key] && <p className="text-xs text-red-500">{errors[key]?.message}</p>}
|
||||
</div>
|
||||
))}
|
||||
</form>
|
||||
}
|
||||
selection={{
|
||||
selectHandler: handleSubmit(onFormSubmit),
|
||||
selectClasses: 'bg-green-500 hover:bg-green-600 text-white',
|
||||
selectText: isSubmitting ? localize('com_ui_saving') : localize('com_ui_save'),
|
||||
}}
|
||||
buttons={
|
||||
onRevoke && (
|
||||
<Button
|
||||
onClick={handleRevoke}
|
||||
className="bg-red-600 text-white hover:bg-red-700 dark:hover:bg-red-800"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{localize('com_ui_revoke')}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
footerClassName="flex justify-end gap-2 px-6 pb-6 pt-2"
|
||||
showCancelButton={true}
|
||||
/>
|
||||
</OGDialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -40,3 +40,76 @@ export const useGetToolCalls = <TData = t.ToolCallResults>(
|
|||
},
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Hook for getting MCP connection status
|
||||
*/
|
||||
export const useMCPConnectionStatusQuery = <TData = t.TMCPConnectionStatusResponse>(
|
||||
config?: UseQueryOptions<t.TMCPConnectionStatusResponse, unknown, TData>,
|
||||
): QueryObserverResult<TData, unknown> => {
|
||||
return useQuery<t.TMCPConnectionStatusResponse, unknown, TData>(
|
||||
[QueryKeys.mcpConnectionStatus],
|
||||
() => dataService.getMCPConnectionStatus(),
|
||||
{
|
||||
// refetchOnWindowFocus: false,
|
||||
// refetchOnReconnect: false,
|
||||
// refetchOnMount: true,
|
||||
...config,
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Hook for getting MCP auth value flags for a specific server
|
||||
*/
|
||||
export const useMCPAuthValuesQuery = (
|
||||
serverName: string,
|
||||
config?: UseQueryOptions<
|
||||
{ success: boolean; serverName: string; authValueFlags: Record<string, boolean> },
|
||||
unknown,
|
||||
{ success: boolean; serverName: string; authValueFlags: Record<string, boolean> }
|
||||
>,
|
||||
): QueryObserverResult<
|
||||
{ success: boolean; serverName: string; authValueFlags: Record<string, boolean> },
|
||||
unknown
|
||||
> => {
|
||||
return useQuery<
|
||||
{ success: boolean; serverName: string; authValueFlags: Record<string, boolean> },
|
||||
unknown,
|
||||
{ success: boolean; serverName: string; authValueFlags: Record<string, boolean> }
|
||||
>([QueryKeys.mcpAuthValues, serverName], () => dataService.getMCPAuthValues(serverName), {
|
||||
// refetchOnWindowFocus: false,
|
||||
// refetchOnReconnect: false,
|
||||
// refetchOnMount: true,
|
||||
enabled: !!serverName,
|
||||
...config,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Hook for getting MCP OAuth status for a specific flow
|
||||
*/
|
||||
export const useMCPOAuthStatusQuery = (
|
||||
flowId: string,
|
||||
config?: UseQueryOptions<
|
||||
{ status: string; completed: boolean; failed: boolean; error?: string },
|
||||
unknown,
|
||||
{ status: string; completed: boolean; failed: boolean; error?: string }
|
||||
>,
|
||||
): QueryObserverResult<
|
||||
{ status: string; completed: boolean; failed: boolean; error?: string },
|
||||
unknown
|
||||
> => {
|
||||
return useQuery<
|
||||
{ status: string; completed: boolean; failed: boolean; error?: string },
|
||||
unknown,
|
||||
{ status: string; completed: boolean; failed: boolean; error?: string }
|
||||
>([QueryKeys.mcpOAuthStatus, flowId], () => dataService.getMCPOAuthStatus(flowId), {
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnReconnect: false,
|
||||
refetchOnMount: true,
|
||||
staleTime: 1000, // Consider data stale after 1 second for polling
|
||||
enabled: !!flowId,
|
||||
...config,
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -524,7 +524,9 @@
|
|||
"com_ui_2fa_verified": "Successfully verified Two-Factor Authentication",
|
||||
"com_ui_accept": "I accept",
|
||||
"com_ui_action_button": "Action Button",
|
||||
"com_ui_active": "Active",
|
||||
"com_ui_add": "Add",
|
||||
"com_ui_authenticate": "Authenticate",
|
||||
"com_ui_add_mcp": "Add MCP",
|
||||
"com_ui_add_mcp_server": "Add MCP Server",
|
||||
"com_ui_add_model_preset": "Add a model or preset for an additional response",
|
||||
|
|
@ -844,6 +846,7 @@
|
|||
"com_ui_max_tags": "Maximum number allowed is {{0}}, using latest values.",
|
||||
"com_ui_mcp_dialog_desc": "Please enter the necessary information below.",
|
||||
"com_ui_mcp_enter_var": "Enter value for {{0}}",
|
||||
"com_ui_mcp_initialize": "Initialize",
|
||||
"com_ui_mcp_server_not_found": "Server not found.",
|
||||
"com_ui_mcp_servers": "MCP Servers",
|
||||
"com_ui_mcp_url": "MCP Server URL",
|
||||
|
|
@ -959,6 +962,13 @@
|
|||
"com_ui_save_submit": "Save & Submit",
|
||||
"com_ui_saved": "Saved!",
|
||||
"com_ui_saving": "Saving...",
|
||||
"com_ui_set": "Set",
|
||||
"com_ui_unset": "Unset",
|
||||
"com_ui_configuration": "Configuration",
|
||||
"com_ui_mcp_auth_desc": "Configure authentication credentials for this MCP server.",
|
||||
"com_ui_authorization_url": "Authorization URL",
|
||||
"com_ui_continue_oauth": "Continue OAuth Flow",
|
||||
"com_ui_oauth_flow_desc": "Click the button above to continue the OAuth flow in a new tab.",
|
||||
"com_ui_schema": "Schema",
|
||||
"com_ui_scope": "Scope",
|
||||
"com_ui_search": "Search",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue