Delete unused files and update API calls

src/components/Option/Settings/ollama.tsx

@@ -11,6 +11,7 @@ import {
   saveForRag,
   setOllamaURL as saveOllamaURL
 } from "~services/ollama"
+import { SettingPrompt } from "./prompt"
 
 export const SettingsOllama = () => {
   const [ollamaURL, setOllamaURL] = useState<string>("")
@@ -20,7 +21,7 @@ export const SettingsOllama = () => {
       const [ollamaURL, allModels, chunkOverlap, chunkSize, defaultEM] =
         await Promise.all([
           getOllamaURL(),
-          getAllModels(),
+          getAllModels({returnEmpty: true}),
           defaultEmbeddingChunkOverlap(),
           defaultEmbeddingChunkSize(),
           defaultEmbeddingModelForRag()
@@ -46,98 +47,130 @@ export const SettingsOllama = () => {
   })
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col space-y-3">
       {status === "pending" && <Skeleton paragraph={{ rows: 4 }} active />}
       {status === "success" && (
-        <>
+        <div className="flex flex-col space-y-6">
           <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>
-
-          <Form
-            layout="vertical"
-            onFinish={(data) => {
-              saveRAG({
-                model: data.defaultEM,
-                chunkSize: data.chunkSize,
-                overlap: data.chunkOverlap
-              })
-            }}
-            initialValues={{
-              chunkSize: ollamaInfo?.chunkSize,
-              chunkOverlap: ollamaInfo?.chunkOverlap,
-              defaultEM: ollamaInfo?.defaultEM
-            }}>
-            <Form.Item
-              name="defaultEM"
-              label="Embedding Model"
-              help="Highly recommended to use embedding models like `nomic-embed-text`."
-              rules={[{ required: true, message: "Please select a model!" }]}>
-              <Select
-                size="large"
-                filterOption={(input, option) =>
-                  option.label.toLowerCase().indexOf(input.toLowerCase()) >=
-                    0 ||
-                  option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                }
-                showSearch
-                placeholder="Select a model"
-                style={{ width: "100%" }}
-                className="mt-4"
-                options={ollamaInfo.models?.map((model) => ({
-                  label: model.name,
-                  value: model.model
-                }))}
-              />
-            </Form.Item>
-
-            <Form.Item
-              name="chunkSize"
-              label="Chunk Size"
-              rules={[
-                { required: true, message: "Please input your chunk size!" }
-              ]}>
-              <InputNumber style={{ width: "100%" }} placeholder="Chunk Size" />
-            </Form.Item>
-            <Form.Item
-              name="chunkOverlap"
-              label="Chunk Overlap"
-              rules={[
-                { required: true, message: "Please input your chunk overlap!" }
-              ]}>
-              <InputNumber
-                style={{ width: "100%" }}
-                placeholder="Chunk Overlap"
-              />
-            </Form.Item>
-
-            <div className="flex justify-end">
-              <SaveButton disabled={isSaveRAGPending} btnType="submit" />
+            <div>
+              <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
+                Configure Ollama
+              </h2>
+              <div className="border border-b border-gray-200 dark:border-gray-600 mt-3 mb-6"></div>
             </div>
-          </Form>
-        </>
+            <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>
+
+          <div>
+            <div>
+              <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
+                Configure RAG
+              </h2>
+              <div className="border border-b border-gray-200 dark:border-gray-600 mt-3 mb-6"></div>
+            </div>
+            <Form
+              layout="vertical"
+              onFinish={(data) => {
+                saveRAG({
+                  model: data.defaultEM,
+                  chunkSize: data.chunkSize,
+                  overlap: data.chunkOverlap
+                })
+              }}
+              initialValues={{
+                chunkSize: ollamaInfo?.chunkSize,
+                chunkOverlap: ollamaInfo?.chunkOverlap,
+                defaultEM: ollamaInfo?.defaultEM
+              }}>
+              <Form.Item
+                name="defaultEM"
+                label="Embedding Model"
+                help="Highly recommended to use embedding models like `nomic-embed-text`."
+                rules={[{ required: true, message: "Please select a model!" }]}>
+                <Select
+                  size="large"
+                  filterOption={(input, option) =>
+                    option.label.toLowerCase().indexOf(input.toLowerCase()) >=
+                      0 ||
+                    option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }
+                  showSearch
+                  placeholder="Select a model"
+                  style={{ width: "100%" }}
+                  className="mt-4"
+                  options={ollamaInfo.models?.map((model) => ({
+                    label: model.name,
+                    value: model.model
+                  }))}
+                />
+              </Form.Item>
+
+              <Form.Item
+                name="chunkSize"
+                label="Chunk Size"
+                rules={[
+                  { required: true, message: "Please input your chunk size!" }
+                ]}>
+                <InputNumber
+                  style={{ width: "100%" }}
+                  placeholder="Chunk Size"
+                />
+              </Form.Item>
+              <Form.Item
+                name="chunkOverlap"
+                label="Chunk Overlap"
+                rules={[
+                  {
+                    required: true,
+                    message: "Please input your chunk overlap!"
+                  }
+                ]}>
+                <InputNumber
+                  style={{ width: "100%" }}
+                  placeholder="Chunk Overlap"
+                />
+              </Form.Item>
+
+              <div className="flex justify-end">
+                <SaveButton disabled={isSaveRAGPending} btnType="submit" />
+              </div>
+            </Form>
+          </div>
+
+          <div>
+            <div>
+              <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
+                Configure RAG Prompt
+              </h2>
+              <div className="border border-b border-gray-200 dark:border-gray-600 mt-3 mb-6"></div>
+            </div>
+            <SettingPrompt />
+          </div>
+        </div>
       )}
     </div>
   )

src/components/Option/Settings/other.tsx

@@ -15,9 +15,15 @@ export const SettingOther = () => {
   const { mode, toggleDarkMode } = useDarkMode()
 
   return (
-    <div className="flex flex-col space-y-4">
+    <dl className="flex flex-col space-y-6">
+      <div>
+        <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
+          Web UI Settings
+        </h2>
+        <div className="border border-b border-gray-200 dark:border-gray-600 mt-3"></div>
+      </div>
       <div className="flex flex-row justify-between">
-        <span className="text-gray-500 dark:text-gray-400 text-md">
+        <span className="text-gray-500 dark:text-gray-400 text-lg">
           Speech Recognition Language
         </span>
 
@@ -37,7 +43,7 @@ export const SettingOther = () => {
         />
       </div>
       <div className="flex flex-row justify-between">
-        <span className="text-gray-500 dark:text-gray-400 text-md">
+        <span className="text-gray-500 dark:text-gray-400 text-lg">
           Change Theme
         </span>
 
@@ -53,7 +59,7 @@ export const SettingOther = () => {
         </button>
       </div>
       <div className="flex flex-row justify-between">
-        <span className="text-gray-500 dark:text-gray-400 text-md">
+        <span className="text-gray-500 dark:text-gray-400 text-lg">
           Delete Chat History
         </span>
 
@@ -76,6 +82,6 @@ export const SettingOther = () => {
           Delete
         </button>
       </div>
-    </div>
+    </dl>
   )
 }

src/components/Option/Settings/prompt.tsx

@@ -1,5 +1,5 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query"
-import { Skeleton, Radio, Form } from "antd"
+import { Skeleton, Radio, Form, Alert } from "antd"
 import React from "react"
 import { SaveButton } from "~components/Common/SaveButton"
 import {
@@ -12,7 +12,7 @@ import {
 
 export const SettingPrompt = () => {
   const [selectedValue, setSelectedValue] = React.useState<"normal" | "web">(
-    "normal"
+    "web"
   )
 
   const queryClient = useQueryClient()
@@ -41,7 +41,6 @@ export const SettingPrompt = () => {
 
       {status === "success" && (
         <div>
-          <h2 className="text-md font-semibold dark:text-white">Prompt</h2>
           <div className="my-3 flex justify-end">
             <Radio.Group
               defaultValue={selectedValue}
@@ -63,6 +62,14 @@ export const SettingPrompt = () => {
               initialValues={{
                 prompt: data.prompt
               }}>
+              <Form.Item>
+                <Alert
+                  message="Configuring the system prompt here is deprecated. Please use the Manage Prompts section to add or edit prompts. This section will be removed in a future release"
+                  type="warning"
+                  showIcon
+                  closable
+                />
+              </Form.Item>
               <Form.Item label="System Prompt" name="prompt">
                 <textarea
                   value={data.prompt}