Add deleteChatHistory method to PageAssitDatabase class and systemPromptForNonRagOption functions to ollama service

src/components/Option/Settings/ollama.tsx

@@ -0,0 +1,55 @@
+import { useQuery } from "@tanstack/react-query"
+import { useEffect, useState } from "react"
+import { SaveButton } from "~components/Common/SaveButton"
+import { getOllamaURL, setOllamaURL as saveOllamaURL } from "~services/ollama"
+
+export const SettingsOllama = () => {
+  const [ollamaURL, setOllamaURL] = useState<string>("")
+  const { data: ollamaInfo } = useQuery({
+    queryKey: ["fetchOllamURL"],
+    queryFn: async () => {
+      const ollamaURL = await getOllamaURL()
+
+      return {
+        ollamaURL
+      }
+    }
+  })
+
+  
+  useEffect(() => {
+    if (ollamaInfo?.ollamaURL) {
+      setOllamaURL(ollamaInfo.ollamaURL)
+    }
+  }, [ollamaInfo])
+
+  return (
+    <div className="">
+      <div>
+        <label
+          htmlFor="ollamaURL"
+          className="text-sm font-medium dark:text-gray-200">
+          Ollama URL
+        </label>
+        <input
+          type="url"
+          id="ollamaURL"
+          value={ollamaURL}
+          onChange={(e) => {
+            setOllamaURL(e.target.value)
+          }}
+          placeholder="Your Ollama URL"
+          className="w-full p-2 border border-gray-300 rounded-md dark:bg-[#262626] dark:text-gray-100"
+        />
+      </div>
+      <div className="flex justify-end">
+        <SaveButton
+          onClick={() => {
+            saveOllamaURL(ollamaURL)
+          }}
+          className="mt-2"
+        />
+      </div>
+    </div>
+  )
+}

src/components/Option/Settings/other.tsx

@@ -0,0 +1,52 @@
+import { useQueryClient } from "@tanstack/react-query"
+import { useDarkMode } from "~hooks/useDarkmode"
+import { useMessageOption } from "~hooks/useMessageOption"
+import { PageAssitDatabase } from "~libs/db"
+
+export const SettingOther = () => {
+  const { clearChat } = useMessageOption()
+
+  const queryClient = useQueryClient()
+
+  const { mode, toggleDarkMode } = useDarkMode()
+
+  return (
+    <div className="flex flex-col space-y-4">
+      <div className="flex flex-row justify-between">
+        <span className="text-gray-500 dark:text-gray-400 text-lg">
+          Change Theme
+        </span>
+
+        <button
+          onClick={toggleDarkMode}
+          className="bg-blue-500 dark:bg-blue-600 text-white dark:text-gray-200 px-4 py-2 rounded-md">
+          {mode === "dark" ? "Light" : "Dark"}
+        </button>
+      </div>
+      <div className="flex flex-row justify-between">
+        <span className="text-gray-500 dark:text-gray-400 text-lg">
+          Delete Chat History
+        </span>
+
+        <button
+          onClick={async () => {
+            const confirm = window.confirm(
+              "Are you sure you want to delete your chat history? This action cannot be undone."
+            )
+
+            if (confirm) {
+              const db = new PageAssitDatabase()
+              await db.deleteChatHistory()
+              queryClient.invalidateQueries({
+                queryKey: ["fetchChatHistory"]
+              })
+              clearChat()
+            }
+          }}
+          className="bg-red-500 dark:bg-red-600 text-white dark:text-gray-200 px-4 py-2 rounded-md">
+          Delete
+        </button>
+      </div>
+    </div>
+  )
+}

src/components/Option/Settings/prompt.tsx

@@ -0,0 +1,56 @@
+import { useQuery } from "@tanstack/react-query"
+import { useEffect, useState } from "react"
+import { SaveButton } from "~components/Common/SaveButton"
+import {
+  setSystemPromptForNonRagOption,
+  systemPromptForNonRagOption
+} from "~services/ollama"
+
+export const SettingPrompt = () => {
+  const [ollamaPrompt, setOllamaPrompt] = useState<string>("")
+  const { data: ollamaInfo } = useQuery({
+    queryKey: ["fetchOllaPrompt"],
+    queryFn: async () => {
+      const prompt = await systemPromptForNonRagOption()
+
+      return {
+        prompt
+      }
+    }
+  })
+
+  useEffect(() => {
+    if (ollamaInfo?.prompt) {
+      setOllamaPrompt(ollamaInfo.prompt)
+    }
+  }, [ollamaInfo])
+
+  return (
+    <div className="">
+      <div>
+        <label htmlFor="ollamaPrompt" className="text-sm font-medium dark:text-gray-200">
+            System Prompt
+        </label>
+      <textarea
+        value={ollamaPrompt}
+        rows={5}
+        id="ollamaPrompt"
+        placeholder="Your System Prompt"
+        onChange={(e) => {
+          setOllamaPrompt(e.target.value)
+        }}
+        className="w-full p-2 border border-gray-300 rounded-md dark:bg-[#262626] dark:text-gray-100"
+      />
+      </div>
+
+      <div className="flex justify-end">
+      <SaveButton
+        onClick={() => {
+          setSystemPromptForNonRagOption(ollamaPrompt)
+        }}
+        className="mt-2"
+      />
+      </div>
+    </div>
+  )
+}