Add search mode settings and textarea focus on form submission

src/components/Option/Models/index.tsx

@@ -212,7 +212,7 @@ export const ModelsBody = () => {
 
           <button
             type="submit"
-            className="inline-flex justify-center w-full text-center mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
+            className="inline-flex justify-center w-full text-center mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
             <Download className="w-5 h-5 mr-3" />
             Pull Model
           </button>

src/components/Option/Playground/PlaygroundForm.tsx

@@ -17,8 +17,20 @@ type Props = {
 }
 
 export const PlaygroundForm = ({ dropedFile }: Props) => {
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
   const inputRef = React.useRef<HTMLInputElement>(null)
+  const {
+    onSubmit,
+    selectedModel,
+    chatMode,
+    speechToTextLanguage,
+    stopStreamingRequest,
+    streaming: isSending,
+    webSearch,
+    setWebSearch,
+    selectedQuickPrompt,
+    textareaRef,
+    setSelectedQuickPrompt
+  } = useMessageOption()
 
   const textAreaFocus = () => {
     if (textareaRef.current) {
@@ -62,19 +74,6 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
 
   useDynamicTextareaSize(textareaRef, form.values.message, 300)
 
-  const {
-    onSubmit,
-    selectedModel,
-    chatMode,
-    speechToTextLanguage,
-    stopStreamingRequest,
-    streaming: isSending,
-    webSearch,
-    setWebSearch,
-    selectedQuickPrompt,
-    setSelectedQuickPrompt
-  } = useMessageOption()
-
   const { isListening, start, stop, transcript } = useSpeechRecognition()
   const { sendWhenEnter, setSendWhenEnter } = useWebUI()
 
@@ -92,6 +91,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
         textareaRef.current?.focus()
         const interval = setTimeout(() => {
           textareaRef.current?.setSelectionRange(word.start, word.end)
+          setSelectedQuickPrompt(null)
         }, 100)
         return () => {
           clearInterval(interval)

src/components/Option/Prompt/index.tsx

@@ -224,7 +224,7 @@ export const PromptBody = () => {
           <Form.Item>
             <button
               disabled={savePromptLoading}
-              className="inline-flex justify-center w-full text-center mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
+              className="inline-flex justify-center w-full text-center mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
               {savePromptLoading ? "Adding Prompt..." : "Add Prompt"}
             </button>
           </Form.Item>
@@ -268,7 +268,7 @@ export const PromptBody = () => {
           <Form.Item>
             <button
               disabled={isUpdatingPrompt}
-              className="inline-flex justify-center w-full text-center mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
+              className="inline-flex justify-center w-full text-center mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
               {isUpdatingPrompt ? "Updating Prompt..." : "Update Prompt"}
             </button>
           </Form.Item>

src/components/Option/Settings/other.tsx

@@ -5,6 +5,7 @@ import { PageAssitDatabase } from "~libs/db"
 import { Select } from "antd"
 import { SUPPORTED_LANGUAGES } from "~utils/supporetd-languages"
 import { MoonIcon, SunIcon } from "lucide-react"
+import { SearchModeSettings } from "./search-mode"
 
 export const SettingOther = () => {
   const { clearChat, speechToTextLanguage, setSpeechToTextLanguage } =
@@ -82,6 +83,7 @@ export const SettingOther = () => {
           Delete
         </button>
       </div>
+      <SearchModeSettings />
     </dl>
   )
 }

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

@@ -0,0 +1,37 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query"
+import { Skeleton, Switch } from "antd"
+import {
+  getIsSimpleInternetSearch,
+  setIsSimpleInternetSearch
+} from "~services/ollama"
+
+export const SearchModeSettings = () => {
+  const { data, status } = useQuery({
+    queryKey: ["fetchIsSimpleInternetSearch"],
+    queryFn: () => getIsSimpleInternetSearch()
+  })
+
+  const queryClient = useQueryClient()
+
+  if (status === "pending" || status === "error") {
+    return <Skeleton active />
+  }
+
+  return (
+    <div className="flex flex-row justify-between">
+      <span className="text-gray-500 dark:text-gray-400 text-lg">
+        Perform Simple Internet Search
+      </span>
+
+      <Switch
+        checked={data}
+        onChange={(checked) => {
+          setIsSimpleInternetSearch(checked)
+          queryClient.invalidateQueries({
+            queryKey: ["fetchIsSimpleInternetSearch"]
+          })
+        }}
+      />
+    </div>
+  )
+}