KnowledgeBase/web/components/SettingsDrawer.tsx

import React from 'react';
import { createPortal } from 'react-dom';
import ConfigPanel from './ConfigPanel';
import { AppSettings, ModelConfig } from '../types';
import { X } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';

interface SettingsDrawerProps {
    isOpen: boolean;
    onClose: () => void;
    settings: AppSettings;
    models: ModelConfig[];
    onSettingsChange: (newSettings: AppSettings) => void;
    onOpenSettings: () => void; // Keeps the "Full Settings" link working if needed, or we might redirect
    mode?: 'chat' | 'kb' | 'all';
    isAdmin?: boolean;
}

export const SettingsDrawer: React.FC<SettingsDrawerProps> = ({
    isOpen,
    onClose,
    settings,
    models,
    onSettingsChange,
    onOpenSettings,
    mode = 'all',
    isAdmin = false
}) => {
    const { t } = useLanguage();
    const [localSettings, setLocalSettings] = React.useState<AppSettings>(settings);

    // Initial sync
    React.useEffect(() => {
        if (isOpen) {
            setLocalSettings(settings);
        }
    }, [isOpen, settings]);

    if (!isOpen) return null;

    const handleLocalChange = (newSettings: AppSettings) => {
        setLocalSettings(newSettings);
    };

    const handleConfirm = () => {
        onSettingsChange(localSettings);
        onClose();
    };

    return createPortal(
        <div className="fixed inset-0 z-50 overflow-hidden">
            <div className="absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" onClick={onClose} />
            <div className="absolute inset-y-0 right-0 max-w-md w-full flex">
                <div className="flex-1 flex flex-col bg-white shadow-xl animate-in slide-in-from-right duration-300">
                    <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
                        <h2 className="text-lg font-medium text-gray-900">{t('systemConfiguration')}</h2>
                        <button
                            onClick={onClose}
                            className="text-gray-400 hover:text-gray-500 focus:outline-none"
                        >
                            <X size={24} />
                        </button>
                    </div>
                    <div className="flex-1 overflow-y-auto">
                        <ConfigPanel
                            settings={localSettings}
                            models={models}
                            onSettingsChange={handleLocalChange}
                            onOpenSettings={onOpenSettings}
                            mode={mode}
                            isAdmin={isAdmin}
                        />
                    </div>
                    <div className="p-4 border-t border-gray-200 bg-gray-50">
                        <button
                            onClick={handleConfirm}
                            className="w-full py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition-colors shadow-sm"
                        >
                            {t('confirm')}
                        </button>
                    </div>
                </div>
            </div>
        </div>,
        document.body
    );
};