feat: introduce auto routing (#122)

frontend/src/pages/SettingsPage.tsx

@@ -26,14 +26,29 @@ const SettingsPage: React.FC = () => {
     npmRegistry: '',
   });
 
+  const [tempSmartRoutingConfig, setTempSmartRoutingConfig] = useState<{
+    dbUrl: string;
+    openaiApiBaseUrl: string;
+    openaiApiKey: string;
+    openaiApiEmbeddingModel: string;
+  }>({
+    dbUrl: '',
+    openaiApiBaseUrl: '',
+    openaiApiKey: '',
+    openaiApiEmbeddingModel: '',
+  });
+
   const {
     routingConfig,
     tempRoutingConfig,
     setTempRoutingConfig,
     installConfig: savedInstallConfig,
+    smartRoutingConfig,
     loading,
     updateRoutingConfig,
-    updateInstallConfig
+    updateInstallConfig,
+    updateSmartRoutingConfig,
+    updateSmartRoutingConfigBatch
   } = useSettingsData();
 
   // Update local installConfig when savedInstallConfig changes
@@ -43,13 +58,26 @@ const SettingsPage: React.FC = () => {
     }
   }, [savedInstallConfig]);
 
+  // Update local tempSmartRoutingConfig when smartRoutingConfig changes
+  useEffect(() => {
+    if (smartRoutingConfig) {
+      setTempSmartRoutingConfig({
+        dbUrl: smartRoutingConfig.dbUrl || '',
+        openaiApiBaseUrl: smartRoutingConfig.openaiApiBaseUrl || '',
+        openaiApiKey: smartRoutingConfig.openaiApiKey || '',
+        openaiApiEmbeddingModel: smartRoutingConfig.openaiApiEmbeddingModel || '',
+      });
+    }
+  }, [smartRoutingConfig]);
+
   const [sectionsVisible, setSectionsVisible] = useState({
     routingConfig: false,
     installConfig: false,
+    smartRoutingConfig: false,
     password: false
   });
 
-  const toggleSection = (section: 'routingConfig' | 'installConfig' | 'password') => {
+  const toggleSection = (section: 'routingConfig' | 'installConfig' | 'smartRoutingConfig' | 'password') => {
     setSectionsVisible(prev => ({
       ...prev,
       [section]: !prev[section]
@@ -91,6 +119,59 @@ const SettingsPage: React.FC = () => {
     await updateInstallConfig(key, installConfig[key]);
   };
 
+  const handleSmartRoutingConfigChange = (key: 'dbUrl' | 'openaiApiBaseUrl' | 'openaiApiKey' | 'openaiApiEmbeddingModel', value: string) => {
+    setTempSmartRoutingConfig({
+      ...tempSmartRoutingConfig,
+      [key]: value
+    });
+  };
+
+  const saveSmartRoutingConfig = async (key: 'dbUrl' | 'openaiApiBaseUrl' | 'openaiApiKey' | 'openaiApiEmbeddingModel') => {
+    await updateSmartRoutingConfig(key, tempSmartRoutingConfig[key]);
+  };
+
+  const handleSmartRoutingEnabledChange = async (value: boolean) => {
+    // If enabling Smart Routing, validate required fields and save any unsaved changes
+    if (value) {
+      const currentDbUrl = tempSmartRoutingConfig.dbUrl || smartRoutingConfig.dbUrl;
+      const currentOpenaiApiKey = tempSmartRoutingConfig.openaiApiKey || smartRoutingConfig.openaiApiKey;
+
+      if (!currentDbUrl || !currentOpenaiApiKey) {
+        const missingFields = [];
+        if (!currentDbUrl) missingFields.push(t('settings.dbUrl'));
+        if (!currentOpenaiApiKey) missingFields.push(t('settings.openaiApiKey'));
+
+        showToast(t('settings.smartRoutingValidationError', {
+          fields: missingFields.join(', ')
+        }));
+        return;
+      }
+
+      // Prepare updates object with unsaved changes and enabled status
+      const updates: any = { enabled: value };
+
+      // Check for unsaved changes and include them in the batch update
+      if (tempSmartRoutingConfig.dbUrl !== smartRoutingConfig.dbUrl) {
+        updates.dbUrl = tempSmartRoutingConfig.dbUrl;
+      }
+      if (tempSmartRoutingConfig.openaiApiBaseUrl !== smartRoutingConfig.openaiApiBaseUrl) {
+        updates.openaiApiBaseUrl = tempSmartRoutingConfig.openaiApiBaseUrl;
+      }
+      if (tempSmartRoutingConfig.openaiApiKey !== smartRoutingConfig.openaiApiKey) {
+        updates.openaiApiKey = tempSmartRoutingConfig.openaiApiKey;
+      }
+      if (tempSmartRoutingConfig.openaiApiEmbeddingModel !== smartRoutingConfig.openaiApiEmbeddingModel) {
+        updates.openaiApiEmbeddingModel = tempSmartRoutingConfig.openaiApiEmbeddingModel;
+      }
+
+      // Save all changes in a single batch update
+      await updateSmartRoutingConfigBatch(updates);
+    } else {
+      // If disabling, just update the enabled status
+      await updateSmartRoutingConfig('enabled', value);
+    }
+  };
+
   const handlePasswordChangeSuccess = () => {
     setTimeout(() => {
       navigate('/');
@@ -133,6 +214,131 @@ const SettingsPage: React.FC = () => {
         </div>
       </div>
 
+      {/* Smart Routing Configuration Settings */}
+      <div className="bg-white shadow rounded-lg py-4 px-6 mb-6">
+        <div
+          className="flex justify-between items-center cursor-pointer"
+          onClick={() => toggleSection('smartRoutingConfig')}
+        >
+          <h2 className="font-semibold text-gray-800">{t('pages.settings.smartRouting')}</h2>
+          <span className="text-gray-500">
+            {sectionsVisible.smartRoutingConfig ? '▼' : '►'}
+          </span>
+        </div>
+
+        {sectionsVisible.smartRoutingConfig && (
+          <div className="space-y-4 mt-4">
+            <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
+              <div>
+                <h3 className="font-medium text-gray-700">{t('settings.enableSmartRouting')}</h3>
+                <p className="text-sm text-gray-500">{t('settings.enableSmartRoutingDescription')}</p>
+              </div>
+              <Switch
+                disabled={loading}
+                checked={smartRoutingConfig.enabled}
+                onCheckedChange={(checked) => handleSmartRoutingEnabledChange(checked)}
+              />
+            </div>
+
+            <div className="p-3 bg-gray-50 rounded-md">
+              <div className="mb-2">
+                <h3 className="font-medium text-gray-700">
+                  <span className="text-red-500 px-1">*</span>{t('settings.dbUrl')}
+                </h3>
+              </div>
+              <div className="flex items-center gap-3">
+                <input
+                  type="text"
+                  value={tempSmartRoutingConfig.dbUrl}
+                  onChange={(e) => handleSmartRoutingConfigChange('dbUrl', e.target.value)}
+                  placeholder={t('settings.dbUrlPlaceholder')}
+                  className="flex-1 mt-1 block w-full py-2 px-3 border rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300"
+                  disabled={loading}
+                />
+                <button
+                  onClick={() => saveSmartRoutingConfig('dbUrl')}
+                  disabled={loading}
+                  className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50"
+                >
+                  {t('common.save')}
+                </button>
+              </div>
+            </div>
+
+            <div className="p-3 bg-gray-50 rounded-md">
+              <div className="mb-2">
+                <h3 className="font-medium text-gray-700">
+                  <span className="text-red-500 px-1">*</span>{t('settings.openaiApiKey')}
+                </h3>
+              </div>
+              <div className="flex items-center gap-3">
+                <input
+                  type="password"
+                  value={tempSmartRoutingConfig.openaiApiKey}
+                  onChange={(e) => handleSmartRoutingConfigChange('openaiApiKey', e.target.value)}
+                  placeholder={t('settings.openaiApiKeyPlaceholder')}
+                  className="flex-1 mt-1 block w-full py-2 px-3 border rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300"
+                  disabled={loading}
+                />
+                <button
+                  onClick={() => saveSmartRoutingConfig('openaiApiKey')}
+                  disabled={loading}
+                  className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50"
+                >
+                  {t('common.save')}
+                </button>
+              </div>
+            </div>
+
+            <div className="p-3 bg-gray-50 rounded-md">
+              <div className="mb-2">
+                <h3 className="font-medium text-gray-700">{t('settings.openaiApiBaseUrl')}</h3>
+              </div>
+              <div className="flex items-center gap-3">
+                <input
+                  type="text"
+                  value={tempSmartRoutingConfig.openaiApiBaseUrl}
+                  onChange={(e) => handleSmartRoutingConfigChange('openaiApiBaseUrl', e.target.value)}
+                  placeholder={t('settings.openaiApiBaseUrlPlaceholder')}
+                  className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                  disabled={loading}
+                />
+                <button
+                  onClick={() => saveSmartRoutingConfig('openaiApiBaseUrl')}
+                  disabled={loading}
+                  className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50"
+                >
+                  {t('common.save')}
+                </button>
+              </div>
+            </div>
+
+            <div className="p-3 bg-gray-50 rounded-md">
+              <div className="mb-2">
+                <h3 className="font-medium text-gray-700">{t('settings.openaiApiEmbeddingModel')}</h3>
+              </div>
+              <div className="flex items-center gap-3">
+                <input
+                  type="text"
+                  value={tempSmartRoutingConfig.openaiApiEmbeddingModel}
+                  onChange={(e) => handleSmartRoutingConfigChange('openaiApiEmbeddingModel', e.target.value)}
+                  placeholder={t('settings.openaiApiEmbeddingModelPlaceholder')}
+                  className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                  disabled={loading}
+                />
+                <button
+                  onClick={() => saveSmartRoutingConfig('openaiApiEmbeddingModel')}
+                  disabled={loading}
+                  className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50"
+                >
+                  {t('common.save')}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
       {/* Route Configuration Settings */}
       <div className="bg-white shadow rounded-lg py-4 px-6 mb-6">
         <div
@@ -296,7 +502,7 @@ const SettingsPage: React.FC = () => {
           </div>
         )}
       </div>
-    </div>
+    </div >
   );
 };