KnowledgeBase/web/components/ConfigPanel.tsx

import React from 'react';
import { AppSettings, ModelConfig, ModelType } from '../types';
import { useLanguage } from '../contexts/LanguageContext';
import { Settings, Database, Sliders, Layers, Cpu, ChevronRight } from 'lucide-react';
import VisionModelSelector from './VisionModelSelector';

interface ConfigPanelProps {
  settings: AppSettings;
  models: ModelConfig[];
  onSettingsChange: (newSettings: AppSettings) => void;
  onOpenSettings: () => void;
  mode?: 'chat' | 'kb' | 'all';
}

const ConfigPanel: React.FC<ConfigPanelProps> = ({ settings, models, onSettingsChange, onOpenSettings, mode = 'all' }) => {
  const { t } = useLanguage();

  const handleChange = (key: keyof AppSettings, value: any) => {
    onSettingsChange({
      ...settings,
      [key]: value,
    });
  };

  const llmModels = models.filter(m => m.type === ModelType.LLM && m.isEnabled !== false && !m.supportsVision);
  const embeddingModels = models.filter(m => m.type === ModelType.EMBEDDING && m.isEnabled !== false);
  const rerankModels = models.filter(m => m.type === ModelType.RERANK && m.isEnabled !== false);

  const showChatSettings = mode === 'chat' || mode === 'all';
  const showKbSettings = mode === 'kb' || mode === 'all';

  return (
    <div className="flex-1 overflow-y-auto p-4 space-y-6 bg-slate-50">

      {/* Model Selection (LLM) - Chat Mode Only */}
      {showChatSettings && (
        <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
          <div className="flex items-center justify-between mb-4 border-b border-slate-100 pb-2">
            <div className="flex items-center gap-2 text-slate-800 font-semibold">
              <Cpu className="w-4 h-4 text-blue-600" />
              {t('headerModelSelection')}
            </div>
          </div>

          <div className="space-y-4">
            <div>
              <label className="block text-xs font-medium text-slate-500 mb-1.5">{t('selectLLMModel')}</label>
              <select
                value={settings.selectedLLMId}
                onChange={(e) => handleChange('selectedLLMId', e.target.value)}
                className="w-full text-sm bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-slate-700 focus:outline-none focus:border-blue-500"
              >
                <option value="">{t('selectLLMModel')}</option>
                {llmModels.map(m => (
                  <option key={m.id} value={m.id}>
                    {m.name} ({m.modelId})
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>
      )}

      {/* Embedding Model Selection - KB Mode Only */}
      {showKbSettings && (
        <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
          <div className="flex items-center justify-between mb-4 border-b border-slate-100 pb-2">
            <div className="flex items-center gap-2 text-slate-800 font-semibold">
              <Cpu className="w-4 h-4 text-blue-600" />
              {t('lblEmbedding')}
            </div>
          </div>

          <div className="space-y-4">
            <div>
              <label className="block text-xs font-medium text-slate-500 mb-1.5">{t('lblEmbedding')}</label>
              <select
                value={settings.selectedEmbeddingId}
                onChange={(e) => {
                  const newId = e.target.value;
                  if (newId !== settings.selectedEmbeddingId && settings.selectedEmbeddingId) {
                    if (confirm(t('confirmChangeEmbeddingModel') || "WARNING: Changing the embedding model will require re-indexing all existing files. Are you sure?")) {
                      handleChange('selectedEmbeddingId', newId);
                    }
                  } else {
                    handleChange('selectedEmbeddingId', newId);
                  }
                }}
                className="w-full text-sm bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-slate-700 focus:outline-none focus:border-blue-500"
              >
                <option value="">--- {t('selectEmbeddingModel')} ---</option>
                {embeddingModels.map(m => (
                  <option key={m.id} value={m.id}>{m.name}</option>
                ))}
              </select>
              <p className="text-[10px] text-slate-400 mt-1">{t('defaultForUploads')}</p>
              <p className="text-[10px] text-orange-500 mt-1">{t('embeddingModelWarning') || "Changing this setting may require clearing and re-importing your knowledge base."}</p>
            </div>
          </div>
        </div>
      )}

      {/* Hyperparameters - Chat Mode Only */}
      {showChatSettings && (
        <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
          <div className="flex items-center gap-2 mb-4 text-slate-800 font-semibold border-b border-slate-100 pb-2">
            <Sliders className="w-4 h-4 text-pink-500" />
            {t('headerHyperparams')}
          </div>

          <div className="space-y-4">
            <div>
              <div className="flex justify-between mb-1.5">
                <label className="text-xs font-medium text-slate-500">{t('lblTemperature')}</label>
                <span className="text-xs text-blue-600 font-bold">{settings.temperature}</span>
              </div>
              <input
                type="range"
                min="0"
                max="2"
                step="0.1"
                value={settings.temperature}
                onChange={(e) => handleChange('temperature', parseFloat(e.target.value))}
                className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
              />
            </div>
            <div>
              <label className="block text-xs font-medium text-slate-500 mb-1.5">{t('lblMaxTokens')}</label>
              <input
                type="number"
                value={settings.maxTokens}
                onChange={(e) => handleChange('maxTokens', parseInt(e.target.value))}
                className="w-full text-sm bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-slate-700 focus:outline-none focus:border-blue-500"
              />
            </div>
          </div>
        </div>
      )}

      {/* Vision Model Settings - Chat Mode Only? Or both? Assuming Chat */}
      {/* Vision Model Settings - KB Only */}
      {showKbSettings && <VisionModelSelector />}

      {/* Retrieval Settings - KB Mode Only */}
      {showKbSettings && (
        <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
          <div className="flex items-center gap-2 mb-4 text-slate-800 font-semibold border-b border-slate-100 pb-2">
            <Database className="w-4 h-4 text-green-600" />
            {t('headerRetrieval')}
          </div>

          <div className="space-y-4">
            <div>
              <div className="flex justify-between mb-1.5">
                <label className="text-xs font-medium text-slate-500">{t('lblTopK')}</label>
                <span className="text-xs text-blue-600 font-bold">{settings.topK}</span>
              </div>
              <input
                type="range"
                min="1"
                max="20"
                step="1"
                value={settings.topK}
                onChange={(e) => handleChange('topK', parseInt(e.target.value))}
                className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
              />
            </div>

            <div>
              <label className="block text-xs font-medium text-slate-500 mb-1.5">{t('lblRerankRef')}</label>
              <select
                value={settings.selectedRerankId}
                onChange={(e) => handleChange('selectedRerankId', e.target.value)}
                disabled={!settings.enableRerank}
                className="w-full text-sm bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-slate-700 focus:outline-none focus:border-blue-500 disabled:opacity-50"
              >
                <option value="">--- {t('noRerankModel')} ---</option>
                {rerankModels.map(m => (
                  <option key={m.id} value={m.id}>{m.name}</option>
                ))}
              </select>
            </div>

            <div>
              <div className="flex justify-between mb-1.5">
                <label className="text-xs font-medium text-slate-500">{t('similarityThreshold')}</label>
                <span className="text-xs text-blue-600 font-bold">{settings.similarityThreshold}</span>
              </div>
              <input
                type="range"
                min="0.1"
                max="1.0"
                step="0.05"
                value={settings.similarityThreshold}
                onChange={(e) => handleChange('similarityThreshold', parseFloat(e.target.value))}
                className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
              />
              <p className="text-[10px] text-slate-400 mt-1">{t('filterLowResults')}</p>
            </div>

            {settings.enableRerank && (
              <div>
                <div className="flex justify-between mb-1.5">
                  <label className="text-xs font-medium text-slate-500">{t('scoreThreshold')}</label>
                  <span className="text-xs text-blue-600 font-bold">{settings.scoreThreshold}</span>
                </div>
                <input
                  type="range"
                  min="0"
                  max="1.0"
                  step="0.05"
                  value={settings.scoreThreshold}
                  onChange={(e) => handleChange('scoreThreshold', parseFloat(e.target.value))}
                  className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
                />
                <p className="text-[10px] text-slate-400 mt-1">{t('filterLowResults')}</p>
              </div>
            )}

            <div className="flex items-center justify-between pt-2">
              <label className="text-sm text-slate-700">{t('lblRerank')}</label>
              <button
                onClick={() => handleChange('enableRerank', !settings.enableRerank)}
                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${settings.enableRerank ? 'bg-blue-600' : 'bg-slate-300'
                  }`}
              >
                <span
                  className={`${settings.enableRerank ? 'translate-x-6' : 'translate-x-1'
                    } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
                />
              </button>
            </div>

            <div className="flex items-center justify-between pt-2">
              <label className="text-sm text-slate-700">{t('fullTextSearch')}</label>
              <button
                onClick={() => handleChange('enableFullTextSearch', !settings.enableFullTextSearch)}
                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${settings.enableFullTextSearch ? 'bg-blue-600' : 'bg-slate-300'
                  }`}
              >
                <span
                  className={`${settings.enableFullTextSearch ? 'translate-x-6' : 'translate-x-1'
                    } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
                />
              </button>
            </div>

            <div className="pt-2">
              <div className="flex items-center justify-between mb-1">
                <label className="text-sm text-slate-700">{t('queryExpansion')}</label>
                <button
                  onClick={() => handleChange('enableQueryExpansion', !settings.enableQueryExpansion)}
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${settings.enableQueryExpansion ? 'bg-blue-600' : 'bg-slate-300'
                    }`}
                >
                  <span
                    className={`${settings.enableQueryExpansion ? 'translate-x-6' : 'translate-x-1'
                      } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
                  />
                </button>
              </div>
              <p className="text-[10px] text-slate-400">{t('queryExpansionDesc')}</p>
            </div>

            <div className="pt-2">
              <div className="flex items-center justify-between mb-1">
                <label className="text-sm text-slate-700">{t('hyde')}</label>
                <button
                  onClick={() => handleChange('enableHyDE', !settings.enableHyDE)}
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${settings.enableHyDE ? 'bg-blue-600' : 'bg-slate-300'
                    }`}
                >
                  <span
                    className={`${settings.enableHyDE ? 'translate-x-6' : 'translate-x-1'
                      } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
                  />
                </button>
              </div>
              <p className="text-[10px] text-slate-400">{t('hydeDesc')}</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ConfigPanel;