Added Web search DuckDuckGo

src/components/Option/Settings/other.tsx

@@ -17,18 +17,13 @@ export const SettingOther = () => {
 
   const { mode, toggleDarkMode } = useDarkMode()
   const { t } = useTranslation("settings")
-  const {
-    changeLocale,
-    locale,
-    supportLanguage
-  }= useI18n()
-
+  const { changeLocale, locale, supportLanguage } = useI18n()
 
   return (
     <dl className="flex flex-col space-y-6 text-sm">
       <div>
         <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
-          {t("generalSettings.heading")}
+          {t("generalSettings.settings.heading")}
         </h2>
         <div className="border border-b border-gray-200 dark:border-gray-600 mt-3"></div>
       </div>
@@ -38,7 +33,9 @@ export const SettingOther = () => {
         </span>
 
         <Select
-          placeholder={t("generalSettings.settings.speechRecognitionLang.placeholder")}
+          placeholder={t(
+            "generalSettings.settings.speechRecognitionLang.placeholder"
+          )}
           allowClear
           showSearch
           options={SUPPORTED_LANGUAGES}
@@ -86,7 +83,9 @@ export const SettingOther = () => {
           ) : (
             <MoonIcon className="w-4 h-4 mr-2" />
           )}
-          {mode === "dark" ? t("generalSettings.settings.darkMode.options.light") : t("generalSettings.settings.darkMode.options.dark")}
+          {mode === "dark"
+            ? t("generalSettings.settings.darkMode.options.light")
+            : t("generalSettings.settings.darkMode.options.dark")}
         </button>
       </div>
       <SearchModeSettings />

src/components/Option/Settings/search-mode.tsx

@@ -1,40 +1,92 @@
+import { SaveButton } from "@/components/Common/SaveButton"
+import { getSearchSettings, setSearchSettings } from "@/services/search"
+import { SUPPORTED_SERACH_PROVIDERS } from "@/utils/search-provider"
+import { useForm } from "@mantine/form"
 import { useQuery, useQueryClient } from "@tanstack/react-query"
-import { Skeleton, Switch } from "antd"
+import { Select, Skeleton, Switch, InputNumber } from "antd"
 import { useTranslation } from "react-i18next"
-import {
-  getIsSimpleInternetSearch,
-  setIsSimpleInternetSearch
-} from "~/services/ollama"
 
 export const SearchModeSettings = () => {
   const { t } = useTranslation("settings")
-  
-  const { data, status } = useQuery({
-    queryKey: ["fetchIsSimpleInternetSearch"],
-    queryFn: () => getIsSimpleInternetSearch()
+  const queryClient = useQueryClient()
+
+  const form = useForm({
+    initialValues: {
+      isSimpleInternetSearch: false,
+      searchProvider: "",
+      totalSearchResults: 0
+    }
   })
 
-  const queryClient = useQueryClient()
+  const { status } = useQuery({
+    queryKey: ["fetchSearchSettings"],
+    queryFn: async () => {
+      const data = await getSearchSettings()
+      form.setValues(data)
+      return data
+    }
+  })
 
   if (status === "pending" || status === "error") {
     return <Skeleton active />
   }
 
   return (
-    <div className="flex flex-row justify-between">
-      <span className="text-gray-500 dark:text-neutral-50 ">
-        {t("generalSettings.settings.searchMode.label")}
-      </span>
+    <div>
+      <div className="mb-5">
+        <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
+          {t("generalSettings.webSearch.heading")}
+        </h2>
+        <div className="border border-b border-gray-200 dark:border-gray-600 mt-3"></div>
+      </div>
+      <form
+        onSubmit={form.onSubmit(async (values) => {
+          await setSearchSettings(values)
+        })}
+        className="space-y-4">
+        <div className="flex flex-row justify-between">
+          <span className="text-gray-500 dark:text-neutral-50 ">
+            {t("generalSettings.webSearch.provider.label")}
+          </span>
+          <Select
+            placeholder={t("generalSettings.webSearch.provider.placeholder")}
+            showSearch
+            style={{ width: "200px" }}
+            options={SUPPORTED_SERACH_PROVIDERS}
+            filterOption={(input, option) =>
+              option!.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
+              option!.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }
+            {...form.getInputProps("searchProvider")}
+          />
+        </div>
+        <div className="flex flex-row justify-between">
+          <span className="text-gray-500 dark:text-neutral-50 ">
+            {t("generalSettings.webSearch.searchMode.label")}
+          </span>
+          <Switch
+            {...form.getInputProps("isSimpleInternetSearch", {
+              type: "checkbox"
+            })}
+          />
+        </div>
+        <div className="flex flex-row justify-between">
+          <span className="text-gray-500 dark:text-neutral-50 ">
+            {t("generalSettings.webSearch.totalSearchResults.label")}
+          </span>
+          <InputNumber
+            placeholder={t(
+              "generalSettings.webSearch.totalSearchResults.placeholder"
+            )}
+            {...form.getInputProps("totalSearchResults")}
+            style={{ width: "200px" }}
+          />
+        </div>
 
-      <Switch
-        checked={data}
-        onChange={(checked) => {
-          setIsSimpleInternetSearch(checked)
-          queryClient.invalidateQueries({
-            queryKey: ["fetchIsSimpleInternetSearch"]
-          })
-        }}
-      />
+        <div className="flex justify-end">
+          <SaveButton btnType="submit" />
+        </div>
+      </form>
     </div>
   )
 }