feat: Add Brave Search API support

src/components/Option/Playground/PlaygroundChat.tsx

@@ -27,7 +27,7 @@ export const PlaygroundChat = () => {
     <>
       <div
         ref={containerRef}
-        className="custom-scrollbar grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out overflow-y-auto h-[calc(100vh-160px)]">
+        className="custom-scrollbar  grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out overflow-y-auto h-[calc(100vh-160px)]">
         {messages.length === 0 && (
           <div className="mt-32">
             <PlaygroundEmpty />

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

@@ -2,7 +2,7 @@ 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 { useQuery } from "@tanstack/react-query"
 import { Select, Skeleton, Switch, InputNumber, Input } from "antd"
 import { useTranslation } from "react-i18next"
 
@@ -16,7 +16,8 @@ export const SearchModeSettings = () => {
       totalSearchResults: 0,
       visitSpecificWebsite: false,
       searxngURL: "",
-      searxngJSONMode: false
+      searxngJSONMode: false,
+      braveApiKey: "",
     }
   })
 
@@ -81,6 +82,25 @@ export const SearchModeSettings = () => {
             </div>
           </>
         )}
+        {form.values.searchProvider === "brave-api" && (
+          <>
+            <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
+              <span className="text-gray-700 dark:text-neutral-50">
+                {t("generalSettings.webSearch.braveApi.label")}
+              </span>
+              <div>
+                <Input.Password
+                  placeholder={t(
+                    "generalSettings.webSearch.braveApi.placeholder"
+                  )}
+                  required
+                  className="w-full mt-4 sm:mt-0 sm:w-[200px]"
+                  {...form.getInputProps("braveApiKey")}
+                />
+              </div>
+            </div>
+          </>
+        )}
         <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
           <span className="text-gray-700 dark:text-neutral-50 ">
             {t("generalSettings.webSearch.searchMode.label")}