import React, { useEffect, useState } from "react"; export type DropdownComponentProps = { name: string; description?: string; options: string[]; value: string; onChange: (value: string) => void; } export const DropdownComponent: React.FC = ({ name, description, options, value, onChange, }) => (
{name}
{description &&
{description}
}
); export type TextComponentProps = { name?: string; description?: string; placeholder: string; value: string; type?: string; onChange: (value: string) => void; } export const TextComponent: React.FC = ({ name, description, placeholder, value, type = "text", onChange, }) => { const [localValue, setLocalValue] = useState(value); // Update local value when prop value changes (e.g., provider change) useEffect(() => { setLocalValue(value); }, [value]); const handleChange = (e: React.ChangeEvent) => { setLocalValue(e.target.value); }; const handleBlur = () => { if (localValue !== value) { onChange(localValue); } }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { e.currentTarget.blur(); } }; return (
{name}
{description &&
{description}
}
); }; export type ToggleComponentProps = { name: string; description?: string; value: boolean; onChange: (value: boolean) => void; disabled?: boolean; } export const ToggleComponent: React.FC = ({ name, description, value, onChange, disabled = false, }) => (
{name}
{description &&
{description}
}
); export type ApiKeyComponentProps = { name: React.ReactNode; description?: React.ReactNode; placeholder: string; value: string; onChange: (value: string) => void; onTest?: () => Promise; } export const ApiKeyComponent: React.FC = ({ name, description, placeholder, value, onChange, onTest, }) => { const [localValue, setLocalValue] = useState(value); const [isVisible, setIsVisible] = useState(false); const [isTestingConnection, setIsTestingConnection] = useState(false); const [testResult, setTestResult] = useState<'success' | 'error' | null>(null); // Update local value when prop value changes (e.g., provider change) useEffect(() => { setLocalValue(value); }, [value]); const handleChange = (e: React.ChangeEvent) => { setLocalValue(e.target.value); // Clear test result when user changes the key setTestResult(null); }; const handleBlur = () => { if (localValue !== value) { onChange(localValue); } }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { e.currentTarget.blur(); } }; const toggleVisibility = () => { setIsVisible(!isVisible); }; const handleTest = async () => { if (!onTest || !localValue.trim()) return; setIsTestingConnection(true); setTestResult(null); try { await onTest(); setTestResult('success'); } catch (error) { setTestResult('error'); } finally { setIsTestingConnection(false); } }; return (
{name}
{description &&
{description}
}
{onTest && ( )}
); }; export type CustomUrlComponentProps = { name: string; placeholder: string; useCustomUrl: boolean; baseUrl: string; onToggleCustomUrl: (value: boolean) => void; onChangeBaseUrl: (value: string) => void; } export const CustomUrlComponent: React.FC = ({ name, placeholder, useCustomUrl, baseUrl, onToggleCustomUrl, onChangeBaseUrl, }) => { const [localValue, setLocalValue] = useState(baseUrl); // Update local value when prop value changes (e.g., provider change) useEffect(() => { setLocalValue(baseUrl); }, [baseUrl]); const handleUrlChange = (e: React.ChangeEvent) => { setLocalValue(e.target.value); }; const handleUrlBlur = () => { if (localValue !== baseUrl) { onChangeBaseUrl(localValue); } }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { e.currentTarget.blur(); } }; return (
{name}
{useCustomUrl && (
)}
); };