feat(tavily): integrate Tavily search engine with configuration and UI support

src/app/settings/page.tsx

@@ -24,6 +24,8 @@ interface SettingsType {
   customOpenaiApiKey: string;
   customOpenaiApiUrl: string;
   customOpenaiModelName: string;
+  searchEngine: string;
+  tavilyApiKey?: string;
 }
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -145,6 +147,7 @@ const Page = () => {
   const [automaticImageSearch, setAutomaticImageSearch] = useState(false);
   const [automaticVideoSearch, setAutomaticVideoSearch] = useState(false);
   const [systemInstructions, setSystemInstructions] = useState<string>('');
+  const [searchEngine, setSearchEngine] = useState<string>('searxng');
   const [savingStates, setSavingStates] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
@@ -207,6 +210,7 @@ const Page = () => {
       );
 
       setSystemInstructions(localStorage.getItem('systemInstructions')!);
+      setSearchEngine(localStorage.getItem('searchEngine') || 'searxng');
 
       setIsLoading(false);
     };
@@ -366,6 +370,10 @@ const Page = () => {
         localStorage.setItem('embeddingModel', value);
       } else if (key === 'systemInstructions') {
         localStorage.setItem('systemInstructions', value);
+      } else if (key === 'searchEngine') {
+        localStorage.setItem('searchEngine', value);
+      } else if (key === 'tavilyApiKey') {
+        localStorage.setItem('tavilyApiKey', value);
       }
     } catch (err) {
       console.error('Failed to save:', err);
@@ -508,6 +516,32 @@ const Page = () => {
                     />
                   </Switch>
                 </div>
+
+                <div className="flex flex-col space-y-1 mt-2">
+                  <p className="text-black/70 dark:text-white/70 text-sm">
+                    Search Engine
+                  </p>
+                  <Select
+                    value={searchEngine}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      setSearchEngine(value);
+                      saveConfig('searchEngine', value);
+                    }}
+                    options={[
+                      { value: 'searxng', label: 'SearxNG' },
+                      ...(config.tavilyApiKey ? [{ value: 'tavily', label: 'Tavily' }] : []),
+                    ]}
+                  />
+                  <p className="text-xs text-black/60 dark:text-white/60 mt-1">
+                    Select which search engine to use for web searches
+                  </p>
+                  {searchEngine === 'tavily' && !config.tavilyApiKey && (
+                    <p className="text-xs text-red-500 mt-1">
+                      Tavily API key is required to use this search engine
+                    </p>
+                  )}
+                </div>
               </div>
             </SettingsSection>
 
@@ -858,6 +892,32 @@ const Page = () => {
                     onSave={(value) => saveConfig('deepseekApiKey', value)}
                   />
                 </div>
+
+                <div className="flex flex-col space-y-1 mt-4 pt-4 border-t border-light-200 dark:border-dark-200">
+                  <p className="text-black/90 dark:text-white/90 font-medium">Search Engine API Keys</p>
+                  <p className="text-sm text-black/60 dark:text-white/60 mt-0.5">
+                    API keys for search engines used in the application
+                  </p>
+                </div>
+
+                <div className="flex flex-col space-y-1">
+                  <p className="text-black/70 dark:text-white/70 text-sm">
+                    Tavily API Key
+                  </p>
+                  <Input
+                    type="text"
+                    placeholder="Tavily API Key"
+                    value={config.tavilyApiKey || ''}
+                    isSaving={savingStates['tavilyApiKey']}
+                    onChange={(e) => {
+                      setConfig((prev) => ({
+                        ...prev!,
+                        tavilyApiKey: e.target.value,
+                      }));
+                    }}
+                    onSave={(value) => saveConfig('tavilyApiKey', value)}
+                  />
+                </div>
               </div>
             </SettingsSection>
           </div>