= {}, query = '') {
@@ -46,6 +47,16 @@ describe('Sidebar', () => {
expect(screen.getByText('About')).toBeInTheDocument();
});
+ it('shows the Langfuse tab when Langfuse is available to the user', () => {
+ setup({ langfuseConnectionAccess: true });
+ expect(screen.getByText('Langfuse')).toBeInTheDocument();
+ });
+
+ it('hides the Langfuse tab without Langfuse connection access', () => {
+ setup({ langfuseConnectionAccess: false });
+ expect(screen.queryByText('Langfuse')).not.toBeInTheDocument();
+ });
+
it('forwards typing to onQueryChange', async () => {
const { onQueryChange } = setup();
await userEvent.type(screen.getByRole('textbox'), 'theme');
diff --git a/client/src/components/Nav/Settings/__tests__/registry.spec.ts b/client/src/components/Nav/Settings/__tests__/registry.spec.ts
index 46a57908e8..c137b9cd48 100644
--- a/client/src/components/Nav/Settings/__tests__/registry.spec.ts
+++ b/client/src/components/Nav/Settings/__tests__/registry.spec.ts
@@ -1,10 +1,28 @@
import { isValidElementType } from 'react-is';
+import { SettingsTabValues } from 'librechat-data-provider';
+import type { SettingsContextValue } from '../types';
import en from '~/locales/en/translation.json';
import { registry } from '../registry';
import { TABS } from '../types';
const validTabSections = new Map(TABS.map((t) => [t.id, new Set(t.sections.map((s) => s.id))]));
+const settingsContext: SettingsContextValue = {
+ balanceEnabled: false,
+ hasAnyPersonalizationFeature: false,
+ hasMemoryOptOut: false,
+ hasRemoteAgents: false,
+ hasUserProvidedEndpoints: false,
+ hasMultiConvo: false,
+ hasPrompts: false,
+ isLocalProvider: true,
+ twoFactorEnabled: false,
+ allowAccountDeletion: true,
+ aboutEnabled: false,
+ engineTTS: 'browser',
+ langfuseConnectionAccess: false,
+};
+
describe('settings registry', () => {
it('has unique ids', () => {
const ids = registry.map((e) => e.id);
@@ -30,4 +48,42 @@ describe('settings registry', () => {
expect(isValidElementType(entry.Component)).toBe(true);
}
});
+
+ describe('Langfuse connection visibility', () => {
+ const langfuseEntry = registry.find((entry) => entry.id === 'langfuseConnection');
+
+ it('places the connection in the Langfuse tab', () => {
+ expect(langfuseEntry).toMatchObject({
+ tab: SettingsTabValues.LANGFUSE,
+ section: 'langfuse',
+ });
+ });
+
+ it('shows the connection when the user can manage it', () => {
+ expect(
+ langfuseEntry?.show?.({
+ ...settingsContext,
+ langfuseConnectionAccess: true,
+ }),
+ ).toBe(true);
+ });
+
+ it('hides the connection without Langfuse config access', () => {
+ expect(
+ langfuseEntry?.show?.({
+ ...settingsContext,
+ langfuseConnectionAccess: false,
+ }),
+ ).toBe(false);
+ });
+
+ it('shows the connection in single-tenant mode without fanout', () => {
+ expect(
+ langfuseEntry?.show?.({
+ ...settingsContext,
+ langfuseConnectionAccess: true,
+ }),
+ ).toBe(true);
+ });
+ });
});
diff --git a/client/src/components/Nav/Settings/context.tsx b/client/src/components/Nav/Settings/context.tsx
index 1126a9096d..176b8b584b 100644
--- a/client/src/components/Nav/Settings/context.tsx
+++ b/client/src/components/Nav/Settings/context.tsx
@@ -27,6 +27,7 @@ export function useSettingsContext(): SettingsContextValue {
});
const balanceEnabled = startupConfig?.balance?.enabled === true;
+ const langfuseConnectionAccess = startupConfig?.langfuseConnectionAccess === true;
const isLocalProvider = user?.provider === 'local';
const twoFactorEnabled = user?.twoFactorEnabled === true;
const allowAccountDeletion = startupConfig?.allowAccountDeletion !== false;
@@ -51,6 +52,7 @@ export function useSettingsContext(): SettingsContextValue {
allowAccountDeletion,
aboutEnabled,
engineTTS,
+ langfuseConnectionAccess,
}),
[
balanceEnabled,
@@ -65,6 +67,7 @@ export function useSettingsContext(): SettingsContextValue {
allowAccountDeletion,
aboutEnabled,
engineTTS,
+ langfuseConnectionAccess,
],
);
}
diff --git a/client/src/components/Nav/Settings/registry.tsx b/client/src/components/Nav/Settings/registry.tsx
index 195199b97e..3b66289a05 100644
--- a/client/src/components/Nav/Settings/registry.tsx
+++ b/client/src/components/Nav/Settings/registry.tsx
@@ -18,6 +18,7 @@ import {
import DisplayUsernameMessages from '../SettingsTabs/Account/DisplayUsernameMessages';
import ConversationModeSwitch from '../SettingsTabs/Speech/ConversationModeSwitch';
import EnableTwoFactorItem from '../SettingsTabs/Account/TwoFactorAuthentication';
+import LangfuseConnection from '../SettingsTabs/Integrations/LangfuseConnection';
import ImportConversations from '../SettingsTabs/Data/ImportConversations';
import { toggleControl, ThemeSetting, LangSetting } from './controls';
import BackupCodesItem from '../SettingsTabs/Account/BackupCodesItem';
@@ -500,6 +501,16 @@ export const registry: SettingEntry[] = [
labelKey: 'com_ui_settings_label_revoke_keys',
Component: RevokeKeys,
},
+ // Langfuse
+ {
+ id: 'langfuseConnection',
+ tab: SettingsTabValues.LANGFUSE,
+ section: 'langfuse',
+ labelKey: 'com_ui_langfuse_title',
+ keywords: ['langfuse', 'observability', 'tracing', 'telemetry', 'traces'],
+ show: (ctx) => ctx.langfuseConnectionAccess,
+ Component: LangfuseConnection,
+ },
// Data controls ยท Danger zone
{
id: 'deleteCache',
diff --git a/client/src/components/Nav/Settings/types.ts b/client/src/components/Nav/Settings/types.ts
index 05a87c9c70..e54dcedd07 100644
--- a/client/src/components/Nav/Settings/types.ts
+++ b/client/src/components/Nav/Settings/types.ts
@@ -9,6 +9,7 @@ export type SettingsTab =
| SettingsTabValues.GENERAL
| SettingsTabValues.CHAT
| SettingsTabValues.SPEECH
+ | SettingsTabValues.LANGFUSE
| SettingsTabValues.DATA
| SettingsTabValues.ACCOUNT
| SettingsTabValues.ABOUT;
@@ -27,6 +28,7 @@ export type SectionId =
| 'memory'
| 'data'
| 'apiKeys'
+ | 'langfuse'
| 'danger'
| 'profile'
| 'security'
@@ -46,6 +48,7 @@ export interface SettingsContextValue {
allowAccountDeletion: boolean;
aboutEnabled: boolean;
engineTTS: string;
+ langfuseConnectionAccess: boolean;
}
export interface SettingEntry {
@@ -61,6 +64,7 @@ export interface SettingEntry {
export interface SectionMeta {
id: SectionId;
labelKey: TranslationKeys;
+ icon?: ReactNode;
danger?: boolean;
}
@@ -72,6 +76,17 @@ export interface TabMeta {
show?: (ctx: SettingsContextValue) => boolean;
}
+function createLangfuseIcon(className: string): ReactNode {
+ return createElement('span', {
+ className: `${className} inline-block shrink-0 bg-current`,
+ 'aria-hidden': true,
+ style: {
+ WebkitMask: 'url(/assets/langfuse-icon-monochrome.svg) center / contain no-repeat',
+ mask: 'url(/assets/langfuse-icon-monochrome.svg) center / contain no-repeat',
+ },
+ });
+}
+
export const TABS: TabMeta[] = [
{
id: SettingsTabValues.GENERAL,
@@ -104,6 +119,19 @@ export const TABS: TabMeta[] = [
{ id: 'tts', labelKey: 'com_ui_settings_section_tts' },
],
},
+ {
+ id: SettingsTabValues.LANGFUSE,
+ labelKey: 'com_ui_settings_tab_langfuse',
+ icon: createLangfuseIcon('h-4 w-4'),
+ sections: [
+ {
+ id: 'langfuse',
+ labelKey: 'com_ui_settings_section_langfuse',
+ icon: createLangfuseIcon('h-3.5 w-3.5'),
+ },
+ ],
+ show: (ctx) => ctx.langfuseConnectionAccess,
+ },
{
id: SettingsTabValues.DATA,
labelKey: 'com_ui_settings_tab_data',
diff --git a/client/src/components/Nav/SettingsTabs/Integrations/LangfuseConnection.tsx b/client/src/components/Nav/SettingsTabs/Integrations/LangfuseConnection.tsx
new file mode 100644
index 0000000000..63b5cebf70
--- /dev/null
+++ b/client/src/components/Nav/SettingsTabs/Integrations/LangfuseConnection.tsx
@@ -0,0 +1,613 @@
+import { useState, useEffect, useRef } from 'react';
+import {
+ Button,
+ CircleHelpIcon,
+ Dropdown,
+ HoverCard,
+ HoverCardContent,
+ HoverCardPortal,
+ HoverCardTrigger,
+ Input,
+ Label,
+ SecretInput,
+ Spinner,
+ useToastContext,
+} from '@librechat/client';
+import type {
+ TLangfuseConnectionStatus,
+ TLangfuseConnectionTestErrorCode,
+} from 'librechat-data-provider';
+import type { TranslationKeys } from '~/hooks';
+import {
+ useGetLangfuseConnectionQuery,
+ useUpdateLangfuseConnectionMutation,
+ useTestLangfuseConnectionMutation,
+} from '~/data-provider';
+import { useLocalize } from '~/hooks';
+import { ESide } from '~/common';
+
+type ConnectionTestState = 'idle' | 'unverified' | 'checking' | 'connected' | 'failed';
+
+function getStoredConnectionTestKey(status?: TLangfuseConnectionStatus): string | undefined {
+ if (status?.configured !== true || !status.destination || !status.publicKey) {
+ return undefined;
+ }
+
+ return [status.destination, status.publicKey].join('\u0000');
+}
+
+function getConnectionStatusLabelKey(state: ConnectionTestState): TranslationKeys {
+ switch (state) {
+ case 'checking':
+ return 'com_ui_langfuse_status_checking';
+ case 'connected':
+ return 'com_ui_langfuse_status_connected';
+ case 'failed':
+ return 'com_ui_langfuse_status_failed';
+ case 'unverified':
+ return 'com_ui_langfuse_status_not_verified';
+ case 'idle':
+ default:
+ return 'com_ui_langfuse_status_not_configured';
+ }
+}
+
+function getConnectionTestErrorLabelKey(
+ errorCode?: TLangfuseConnectionTestErrorCode,
+): TranslationKeys {
+ switch (errorCode) {
+ case 'invalid_credentials':
+ return 'com_ui_langfuse_test_invalid_credentials';
+ case 'access_denied':
+ return 'com_ui_langfuse_test_access_denied';
+ case 'rate_limited':
+ return 'com_ui_langfuse_test_rate_limited';
+ case 'server_error':
+ return 'com_ui_langfuse_test_server_error';
+ case 'timeout':
+ return 'com_ui_langfuse_test_timeout';
+ case 'missing_secret':
+ return 'com_ui_langfuse_test_missing_secret';
+ case 'stored_secret_unavailable':
+ return 'com_ui_langfuse_test_stored_secret_unavailable';
+ case 'unexpected_response':
+ return 'com_ui_langfuse_test_unexpected_response';
+ case 'unreachable':
+ default:
+ return 'com_ui_langfuse_test_error';
+ }
+}
+
+function getConnectionStatusDotClass(state: ConnectionTestState): string {
+ switch (state) {
+ case 'connected':
+ return 'bg-green-500';
+ case 'failed':
+ return 'bg-red-500';
+ case 'checking':
+ return 'bg-yellow-500';
+ case 'idle':
+ default:
+ return 'border border-border-medium';
+ }
+}
+
+function getDisplayPublicKey(publicKey: string): string {
+ const trimmedPublicKey = publicKey.trim();
+ if (trimmedPublicKey.length <= 12) {
+ return trimmedPublicKey;
+ }
+
+ return `${trimmedPublicKey.slice(0, 6)}...${trimmedPublicKey.slice(-4)}`;
+}
+
+export default function LangfuseConnection() {
+ const localize = useLocalize();
+ const { showToast } = useToastContext();
+ const {
+ data: status,
+ isLoading: isConnectionLoading,
+ isError: isConnectionError,
+ isFetching: isConnectionFetching,
+ refetch: refetchConnection,
+ } = useGetLangfuseConnectionQuery();
+ const updateMutation = useUpdateLangfuseConnectionMutation();
+ const testMutation = useTestLangfuseConnectionMutation();
+
+ const [connectionStatus, setConnectionStatus] = useState
();
+ const [destination, setDestination] = useState('');
+ const [publicKey, setPublicKey] = useState('');
+ const [secretKey, setSecretKey] = useState('');
+ const [isEditingPublicKey, setIsEditingPublicKey] = useState(false);
+ const [isEditingSecretKey, setIsEditingSecretKey] = useState(false);
+ const [connectionTestState, setConnectionTestState] = useState('idle');
+ const [connectionTestMessage, setConnectionTestMessage] = useState('');
+ const autoTestedConnectionRef = useRef();
+ const connectionTestRequestRef = useRef(0);
+ const publicKeyInputRef = useRef(null);
+ const secretKeyInputRef = useRef(null);
+
+ useEffect(() => {
+ if (isEditingPublicKey) {
+ publicKeyInputRef.current?.focus();
+ }
+ }, [isEditingPublicKey]);
+
+ useEffect(() => {
+ if (isEditingSecretKey) {
+ secretKeyInputRef.current?.focus();
+ }
+ }, [isEditingSecretKey]);
+
+ useEffect(() => {
+ if (!status) {
+ return;
+ }
+ setConnectionStatus(status);
+ }, [status]);
+
+ useEffect(() => {
+ if (!connectionStatus) {
+ return;
+ }
+ setDestination(connectionStatus.destination ?? '');
+ setPublicKey(connectionStatus.publicKey ?? '');
+ }, [connectionStatus]);
+
+ const secretConfigured = connectionStatus?.configured === true;
+ const destinations = connectionStatus?.destinations ?? [];
+ const connectionDestinationAvailable = destinations.some(
+ ({ key }) => key === connectionStatus?.destination,
+ );
+ const storedDestinationUnavailable =
+ secretConfigured && Boolean(connectionStatus?.destination) && !connectionDestinationAvailable;
+ const destinationOptions = [
+ ...(storedDestinationUnavailable && connectionStatus?.destination
+ ? [
+ {
+ value: connectionStatus.destination,
+ label: `${connectionStatus.destination} - ${localize(
+ 'com_ui_langfuse_destination_unavailable',
+ )}`,
+ },
+ ]
+ : []),
+ ...destinations.map(({ key, baseUrl }) => ({
+ value: key,
+ label: `${key} - ${baseUrl}`,
+ })),
+ ];
+ const trimmedPublicKey = publicKey.trim();
+ const trimmedSecretKey = secretKey.trim();
+ const publicKeyInputVisible = !secretConfigured || isEditingPublicKey;
+ const secretInputVisible = !secretConfigured || isEditingSecretKey;
+ const displayPublicKey = getDisplayPublicKey(publicKey);
+ const connectionCredentialsChanged =
+ destination !== (connectionStatus?.destination ?? '') ||
+ trimmedPublicKey !== (connectionStatus?.publicKey ?? '');
+ const hasUnsavedChanges = connectionCredentialsChanged || trimmedSecretKey !== '';
+ const isEditing =
+ !secretConfigured || isEditingPublicKey || isEditingSecretKey || hasUnsavedChanges;
+ const canSubmit =
+ destination !== '' &&
+ trimmedPublicKey !== '' &&
+ ((!connectionCredentialsChanged && secretConfigured) || trimmedSecretKey !== '');
+ const busy = testMutation.isLoading || updateMutation.isLoading;
+
+ useEffect(() => {
+ const storedConnectionTestKey = getStoredConnectionTestKey(connectionStatus);
+ if (!connectionStatus) {
+ return;
+ }
+ if (!storedConnectionTestKey) {
+ return;
+ }
+
+ if (!connectionStatus.destinations?.some(({ key }) => key === connectionStatus.destination)) {
+ connectionTestRequestRef.current += 1;
+ setConnectionTestState('failed');
+ setConnectionTestMessage(localize('com_ui_langfuse_destination_removed'));
+ return;
+ }
+
+ if (autoTestedConnectionRef.current === storedConnectionTestKey) {
+ return;
+ }
+
+ autoTestedConnectionRef.current = storedConnectionTestKey;
+ const requestId = ++connectionTestRequestRef.current;
+ setConnectionTestState('checking');
+ testMutation.mutate(
+ {
+ destination: connectionStatus.destination ?? '',
+ publicKey: connectionStatus.publicKey ?? '',
+ },
+ {
+ onSuccess: (result) => {
+ if (requestId !== connectionTestRequestRef.current) {
+ return;
+ }
+ setConnectionTestState(result.success ? 'connected' : 'failed');
+ setConnectionTestMessage(
+ result.success ? '' : localize(getConnectionTestErrorLabelKey(result.errorCode)),
+ );
+ },
+ onError: () => {
+ if (requestId !== connectionTestRequestRef.current) {
+ return;
+ }
+ setConnectionTestState('failed');
+ setConnectionTestMessage(localize('com_ui_langfuse_test_error'));
+ },
+ },
+ );
+ }, [connectionStatus, localize, testMutation]);
+
+ const connectionStatusLabel =
+ connectionTestState === 'failed' && connectionTestMessage !== ''
+ ? connectionTestMessage
+ : localize(getConnectionStatusLabelKey(connectionTestState));
+ const connectionStatusDotClass = getConnectionStatusDotClass(connectionTestState);
+ const connectionStatusTextClass =
+ connectionTestState === 'failed' ? 'text-red-600 dark:text-red-400' : 'text-text-secondary';
+ const connectionStatusTitle =
+ connectionTestState === 'failed' ? localize('com_ui_langfuse_status_failed_hover') : undefined;
+
+ const handleSave = () => {
+ const payload = {
+ enabled: true,
+ destination,
+ publicKey: trimmedPublicKey,
+ ...(trimmedSecretKey ? { secretKey: trimmedSecretKey } : {}),
+ };
+
+ connectionTestRequestRef.current += 1;
+ updateMutation.mutate(payload, {
+ onSuccess: (nextStatus) => {
+ autoTestedConnectionRef.current = getStoredConnectionTestKey(nextStatus);
+ setConnectionStatus(nextStatus);
+ setConnectionTestState('connected');
+ setConnectionTestMessage('');
+ setSecretKey('');
+ setIsEditingPublicKey(false);
+ setIsEditingSecretKey(false);
+ showToast({ message: localize('com_ui_langfuse_saved'), status: 'success' });
+ },
+ onError: () => {
+ setConnectionTestState('failed');
+ setConnectionTestMessage(localize('com_ui_langfuse_save_error'));
+ showToast({ message: localize('com_ui_langfuse_save_error'), status: 'error' });
+ },
+ });
+ };
+
+ const handleCancel = () => {
+ const storedDestination = connectionStatus?.destination;
+ setDestination(storedDestination ?? '');
+ setPublicKey(connectionStatus?.publicKey ?? '');
+ setSecretKey('');
+ setIsEditingPublicKey(false);
+ setIsEditingSecretKey(false);
+
+ if (!storedDestination || !connectionStatus?.publicKey) {
+ setConnectionTestState('idle');
+ setConnectionTestMessage('');
+ return;
+ }
+
+ if (!connectionStatus.destinations?.some(({ key }) => key === storedDestination)) {
+ connectionTestRequestRef.current += 1;
+ setConnectionTestState('failed');
+ setConnectionTestMessage(localize('com_ui_langfuse_destination_removed'));
+ return;
+ }
+
+ const requestId = ++connectionTestRequestRef.current;
+ setConnectionTestState('checking');
+ setConnectionTestMessage('');
+ testMutation.mutate(
+ { destination: storedDestination, publicKey: connectionStatus.publicKey },
+ {
+ onSuccess: (result) => {
+ if (requestId !== connectionTestRequestRef.current) return;
+ setConnectionTestState(result.success ? 'connected' : 'failed');
+ setConnectionTestMessage(
+ result.success ? '' : localize(getConnectionTestErrorLabelKey(result.errorCode)),
+ );
+ },
+ onError: () => {
+ if (requestId !== connectionTestRequestRef.current) return;
+ setConnectionTestState('failed');
+ setConnectionTestMessage(localize('com_ui_langfuse_test_error'));
+ },
+ },
+ );
+ };
+
+ const handleDestinationChange = (nextDestination: string) => {
+ setDestination(nextDestination);
+ const requestId = ++connectionTestRequestRef.current;
+ const credentialsChanged =
+ nextDestination !== (connectionStatus?.destination ?? '') ||
+ trimmedPublicKey !== (connectionStatus?.publicKey ?? '');
+
+ if (secretConfigured && credentialsChanged) {
+ setIsEditingSecretKey(true);
+ }
+
+ if (
+ nextDestination === '' ||
+ trimmedPublicKey === '' ||
+ ((!secretConfigured || credentialsChanged) && trimmedSecretKey === '')
+ ) {
+ setConnectionTestState(credentialsChanged ? 'unverified' : 'idle');
+ setConnectionTestMessage('');
+ return;
+ }
+
+ setConnectionTestState('checking');
+ setConnectionTestMessage('');
+ testMutation.mutate(
+ {
+ destination: nextDestination,
+ publicKey: trimmedPublicKey,
+ ...(trimmedSecretKey ? { secretKey: trimmedSecretKey } : {}),
+ },
+ {
+ onSuccess: (result) => {
+ if (requestId !== connectionTestRequestRef.current) {
+ return;
+ }
+ setConnectionTestState(result.success ? 'connected' : 'failed');
+ setConnectionTestMessage(
+ result.success ? '' : localize(getConnectionTestErrorLabelKey(result.errorCode)),
+ );
+ },
+ onError: () => {
+ if (requestId !== connectionTestRequestRef.current) {
+ return;
+ }
+ setConnectionTestState('failed');
+ setConnectionTestMessage(localize('com_ui_langfuse_test_error'));
+ },
+ },
+ );
+ };
+
+ const handleEnabledChange = () => {
+ if (!secretConfigured || !connectionStatus?.destination || !connectionStatus.publicKey) {
+ return;
+ }
+
+ const nextEnabled = connectionStatus.enabled !== true;
+ const requestId = ++connectionTestRequestRef.current;
+ const saveEnabledState = () => {
+ updateMutation.mutate(
+ {
+ enabled: nextEnabled,
+ destination: connectionStatus.destination ?? '',
+ publicKey: connectionStatus.publicKey ?? '',
+ },
+ {
+ onSuccess: (nextStatus) => {
+ if (requestId !== connectionTestRequestRef.current) {
+ return;
+ }
+ autoTestedConnectionRef.current = getStoredConnectionTestKey(nextStatus);
+ setConnectionStatus(nextStatus);
+ showToast({ message: localize('com_ui_langfuse_saved'), status: 'success' });
+ },
+ onError: () => {
+ if (requestId !== connectionTestRequestRef.current) {
+ return;
+ }
+ showToast({ message: localize('com_ui_langfuse_save_error'), status: 'error' });
+ },
+ },
+ );
+ };
+
+ saveEnabledState();
+ };
+
+ if (isConnectionLoading && connectionStatus == null) {
+ return (
+
+
+ {localize('com_ui_loading')}
+
+ );
+ }
+
+ if (isConnectionError && connectionStatus == null) {
+ return (
+
+
{localize('com_ui_langfuse_load_error')}
+
+
+
+
+
+
+
+
{localize('com_ui_langfuse_title')}
+
+ {localize('com_ui_beta')}
+
+
+
+
+
+
+ {localize('com_ui_langfuse_description')}
+
+
+
+
+ {connectionTestState === 'checking' ? (
+
+ ) : (
+
+ )}
+ {connectionStatusLabel}
+
+
{localize('com_ui_langfuse_beta_info')}
+
+
+
+
+
+
+
+
+
+
+
+ {secretConfigured && !isEditingPublicKey && (
+
+ )}
+ {publicKeyInputVisible && (
+ {
+ connectionTestRequestRef.current += 1;
+ const nextPublicKey = e.target.value;
+ setPublicKey(nextPublicKey);
+ if (
+ secretConfigured &&
+ nextPublicKey.trim() !== (connectionStatus?.publicKey ?? '')
+ ) {
+ setIsEditingSecretKey(true);
+ }
+ setConnectionTestState('unverified');
+ setConnectionTestMessage('');
+ }}
+ />
+ )}
+
+
+
+
+ {secretConfigured && !isEditingSecretKey && (
+
+ )}
+ {secretInputVisible && (
+ {
+ connectionTestRequestRef.current += 1;
+ setSecretKey(e.target.value);
+ setConnectionTestState('unverified');
+ setConnectionTestMessage('');
+ }}
+ />
+ )}
+
+
+
+ {isEditing ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+