new settings for rag

2024-06-03 00:30:10 +05:30
parent ca30198d35
commit 692c0887cc
28 changed files with 565 additions and 495 deletions
--- a/src/components/Common/Settings/AdvanceOllamaSettings.tsx
+++ b/src/components/Common/Settings/AdvanceOllamaSettings.tsx
@@ -17,7 +17,7 @@ export const AdvanceOllamaSettings = () => {
  return (
    <div className="space-y-4">
      <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
-        <span className="text-gray-500 dark:text-neutral-50 ">
+        <span className="text-gray-700 dark:text-neutral-50 ">
          {t("ollamaSettings.settings.advanced.urlRewriteEnabled.label")}
        </span>
        <div>
@@ -29,7 +29,7 @@ export const AdvanceOllamaSettings = () => {
        </div>
      </div>
      <div className="flex flex-col space-y-4 sm:space-y-0 sm:justify-between">
-        <span className="text-gray-500 dark:text-neutral-50 mb-3">
+        <span className="text-gray-700 dark:text-neutral-50 mb-3">
          {t("ollamaSettings.settings.advanced.rewriteUrl.label")}
        </span>
        <div>
--- a/src/components/Layouts/Header.tsx
+++ b/src/components/Layouts/Header.tsx
@@ -90,7 +90,7 @@ export const Header: React.FC<Props> = ({
            <NavLink
              to="/"
              className="text-gray-500 items-center dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
-              <ChevronLeft className="w-4 h-4" />
+              <ChevronLeft className="w-8 h-8" />
            </NavLink>
          </div>
        )}
--- a/src/components/Layouts/SettingsOptionLayout.tsx
+++ b/src/components/Layouts/SettingsOptionLayout.tsx
@@ -1,10 +1,11 @@
 import {
-  Book,
-  BrainCircuit,
-  Orbit,
-  Share,
+  BookIcon,
+  BrainCircuitIcon,
+  OrbitIcon,
+  ShareIcon,
  BlocksIcon,
-  InfoIcon
+  InfoIcon,
+  CombineIcon,
 } from "lucide-react"
 import { useTranslation } from "react-i18next"
 import { Link, useLocation } from "react-router-dom"
@@ -35,7 +36,7 @@ const LinkComponent = (item: {
          className={classNames(
            item.current === item.href
              ? "text-gray-600 dark:text-white"
-              : "text-gray-400 group-hover:text-gray-600 dark:text-gray-200 dark:group-hover:text-white",
+              : "text-gray-500 group-hover:text-gray-600 dark:text-gray-200 dark:group-hover:text-white",
            "h-6 w-6 shrink-0"
          )}
          aria-hidden="true"
@@ -61,7 +62,13 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
              <LinkComponent
                href="/settings"
                name={t("generalSettings.title")}
-                icon={Orbit}
+                icon={OrbitIcon}
+                current={location.pathname}
+              />
+               <LinkComponent
+                href="/settings/rag"
+                name={t("rag.title")}
+                icon={CombineIcon}
                current={location.pathname}
              />
              <LinkComponent
@@ -74,7 +81,7 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
                href="/settings/model"
                name={t("manageModels.title")}
                current={location.pathname}
-                icon={BrainCircuit}
+                icon={BrainCircuitIcon}
              />
              <LinkComponent
                href="/settings/knowledge"
@@ -89,13 +96,13 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
              <LinkComponent
                href="/settings/prompt"
                name={t("managePrompts.title")}
-                icon={Book}
+                icon={BookIcon}
                current={location.pathname}
              />
              <LinkComponent
                href="/settings/share"
                name={t("manageShare.title")}
-                icon={Share}
+                icon={ShareIcon}
                current={location.pathname}
              />
              <LinkComponent
--- a/src/components/Option/Models/index.tsx
+++ b/src/components/Option/Models/index.tsx
@@ -155,7 +155,7 @@ export const ModelsBody = () => {
                              pullOllamaModel(record.model)
                            }
                          }}
-                          className="text-gray-500 dark:text-gray-400">
+                          className="text-gray-700 dark:text-gray-400">
                          <RotateCcw className="w-5 h-5" />
                        </button>
                      </Tooltip>
--- a/src/components/Option/Settings.tsx
+++ b/src/components/Option/Settings.tsx
@@ -1,7 +1,7 @@
 import { Tabs } from "antd"
 import { SettingsOllama } from "./Settings/ollama"
 import { SettingPrompt } from "./Settings/prompt"
-import { SettingOther } from "./Settings/other"
+import { SettingOther } from "./Settings/general-settings"

 type Props = {
  setClose: (close: boolean) => void
--- a/src/components/Option/Settings/about.tsx
+++ b/src/components/Option/Settings/about.tsx
@@ -60,7 +60,7 @@ export const AboutApp = () => {
            ]}
          />
          <div>
-            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+            <p className="text-sm text-gray-700 dark:text-gray-400 mb-4">
              {t("about.support")}
            </p>

--- a/src/components/Option/Settings/general-settings.tsx
+++ b/src/components/Option/Settings/general-settings.tsx
@@ -16,7 +16,7 @@ import {
 import { BetaTag } from "@/components/Common/Beta"
 import { useStorage } from "@plasmohq/storage/hook"

-export const SettingOther = () => {
+export const GeneralSettings = () => {
  const { clearChat, speechToTextLanguage, setSpeechToTextLanguage } =
    useMessageOption()

@@ -43,7 +43,7 @@ export const SettingOther = () => {
        <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-neutral-50">
+        <span className="text-gray-700 dark:text-neutral-50">
          {t("generalSettings.settings.speechRecognitionLang.label")}
        </span>

@@ -65,7 +65,7 @@ export const SettingOther = () => {
        />
      </div>
      <div className="flex flex-row justify-between">
-        <span className="text-gray-500   dark:text-neutral-50">
+        <span className="text-gray-700   dark:text-neutral-50">
          {t("generalSettings.settings.language.label")}
        </span>

@@ -88,7 +88,7 @@ export const SettingOther = () => {
      <div className="flex flex-row justify-between">
        <div className="inline-flex items-center gap-2">
          <BetaTag />
-          <span className="text-gray-500   dark:text-neutral-50">
+          <span className="text-gray-700   dark:text-neutral-50">
            {t("generalSettings.settings.copilotResumeLastChat.label")}
          </span>
        </div>
@@ -100,7 +100,7 @@ export const SettingOther = () => {
      <div className="flex flex-row justify-between">
        <div className="inline-flex items-center gap-2">
          <BetaTag />
-          <span className="text-gray-500   dark:text-neutral-50">
+          <span className="text-gray-700   dark:text-neutral-50">
            {t("generalSettings.settings.hideCurrentChatModelSettings.label")}
          </span>
        </div>
@@ -111,7 +111,7 @@ export const SettingOther = () => {
        />
      </div>
      <div className="flex flex-row justify-between">
-        <span className="text-gray-500 dark:text-neutral-50 ">
+        <span className="text-gray-700 dark:text-neutral-50 ">
          {t("generalSettings.settings.darkMode.label")}
        </span>

@@ -138,7 +138,7 @@ export const SettingOther = () => {
          <div className="border border-b border-gray-200 dark:border-gray-600 mt-3"></div>
        </div>
        <div className="flex flex-row mb-3 justify-between">
-          <span className="text-gray-500 dark:text-neutral-50 ">
+          <span className="text-gray-700 dark:text-neutral-50 ">
            {t("generalSettings.system.deleteChatHistory.label")}
          </span>

@@ -162,7 +162,7 @@ export const SettingOther = () => {
          </button>
        </div>
        <div className="flex flex-row mb-3 justify-between">
-          <span className="text-gray-500 dark:text-neutral-50 ">
+          <span className="text-gray-700 dark:text-neutral-50 ">
            {t("generalSettings.system.export.label")}
          </span>
          <button
@@ -172,7 +172,7 @@ export const SettingOther = () => {
          </button>
        </div>
        <div className="flex flex-row mb-3 justify-between">
-          <span className="text-gray-500 dark:text-neutral-50 ">
+          <span className="text-gray-700 dark:text-neutral-50 ">
            {t("generalSettings.system.import.label")}
          </span>
          <label
--- a/src/components/Option/Settings/model-settings.tsx
+++ b/src/components/Option/Settings/model-settings.tsx
@@ -29,7 +29,7 @@ export const ModelSettings = () => {
          {t("modelSettings.label")} 
        </h2>
        </div>
-        <p className="text-sm text-gray-500 dark:text-neutral-400 mt-1">
+        <p className="text-sm text-gray-700 dark:text-neutral-400 mt-1">
          {t("modelSettings.description")}
        </p>
        <div className="border border-b border-gray-200 dark:border-gray-600 mt-3 mb-6"></div>
--- a/src/components/Option/Settings/ollama.tsx
+++ b/src/components/Option/Settings/ollama.tsx
@@ -1,19 +1,9 @@
-import { useMutation, useQuery } from "@tanstack/react-query"
-import { Collapse, Form, InputNumber, Select, Skeleton } from "antd"
+import { useQuery } from "@tanstack/react-query"
+import { Collapse, Skeleton } from "antd"
 import { useState } from "react"
 import { SaveButton } from "~/components/Common/SaveButton"
-import {
-  defaultEmbeddingChunkOverlap,
-  defaultEmbeddingChunkSize,
-  defaultEmbeddingModelForRag,
-  getAllModels,
-  getOllamaURL,
-  saveForRag,
-  setOllamaURL as saveOllamaURL
-} from "~/services/ollama"
-import { SettingPrompt } from "./prompt"
+import { getOllamaURL, setOllamaURL as saveOllamaURL } from "~/services/ollama"
 import { Trans, useTranslation } from "react-i18next"
-import { useStorage } from "@plasmohq/storage/hook"
 import { AdvanceOllamaSettings } from "@/components/Common/Settings/AdvanceOllamaSettings"
 import { ModelSettings } from "./model-settings"

@@ -22,34 +12,12 @@ export const SettingsOllama = () => {

  const { t } = useTranslation("settings")

-  const { data: ollamaInfo, status } = useQuery({
+  const { status } = useQuery({
    queryKey: ["fetchOllamURL"],
    queryFn: async () => {
-      const [ollamaURL, allModels, chunkOverlap, chunkSize, defaultEM] =
-        await Promise.all([
-          getOllamaURL(),
-          getAllModels({ returnEmpty: true }),
-          defaultEmbeddingChunkOverlap(),
-          defaultEmbeddingChunkSize(),
-          defaultEmbeddingModelForRag()
-        ])
+      const [ollamaURL] = await Promise.all([getOllamaURL()])
      setOllamaURL(ollamaURL)
-      return {
-        models: allModels,
-        chunkOverlap,
-        chunkSize,
-        defaultEM
-      }
-    }
-  })
-
-  const { mutate: saveRAG, isPending: isSaveRAGPending } = useMutation({
-    mutationFn: async (data: {
-      model: string
-      chunkSize: number
-      overlap: number
-    }) => {
-      await saveForRag(data.model, data.chunkSize, data.overlap)
+      return {}
    }
  })

@@ -92,7 +60,7 @@ export const SettingsOllama = () => {
                      <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
                        {t("ollamaSettings.settings.advanced.label")}
                      </h2>
-                      <p className="text-xs text-gray-500 dark:text-gray-400 mb-4">
+                      <p className="text-xs text-gray-700 dark:text-gray-400 mb-4">
                        <Trans
                          i18nKey="settings:ollamaSettings.settings.advanced.help"
                          components={{
@@ -122,117 +90,7 @@ export const SettingsOllama = () => {
            </div>
          </div>

-          <div>
-            <div>
-              <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
-                {t("ollamaSettings.settings.ragSettings.label")}
-              </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={t("ollamaSettings.settings.ragSettings.model.label")}
-                help={t("ollamaSettings.settings.ragSettings.model.help")}
-                rules={[
-                  {
-                    required: true,
-                    message: t(
-                      "ollamaSettings.settings.ragSettings.model.required"
-                    )
-                  }
-                ]}>
-                <Select
-                  size="large"
-                  filterOption={(input, option) =>
-                    option!.label.toLowerCase().indexOf(input.toLowerCase()) >=
-                      0 ||
-                    option!.value.toLowerCase().indexOf(input.toLowerCase()) >=
-                      0
-                  }
-                  showSearch
-                  placeholder={t(
-                    "ollamaSettings.settings.ragSettings.model.placeholder"
-                  )}
-                  style={{ width: "100%" }}
-                  className="mt-4"
-                  options={ollamaInfo.models?.map((model) => ({
-                    label: model.name,
-                    value: model.model
-                  }))}
-                />
-              </Form.Item>
-
-              <Form.Item
-                name="chunkSize"
-                label={t("ollamaSettings.settings.ragSettings.chunkSize.label")}
-                rules={[
-                  {
-                    required: true,
-                    message: t(
-                      "ollamaSettings.settings.ragSettings.chunkSize.required"
-                    )
-                  }
-                ]}>
-                <InputNumber
-                  style={{ width: "100%" }}
-                  placeholder={t(
-                    "ollamaSettings.settings.ragSettings.chunkSize.placeholder"
-                  )}
-                />
-              </Form.Item>
-              <Form.Item
-                name="chunkOverlap"
-                label={t(
-                  "ollamaSettings.settings.ragSettings.chunkOverlap.label"
-                )}
-                rules={[
-                  {
-                    required: true,
-                    message: t(
-                      "ollamaSettings.settings.ragSettings.chunkOverlap.required"
-                    )
-                  }
-                ]}>
-                <InputNumber
-                  style={{ width: "100%" }}
-                  placeholder={t(
-                    "ollamaSettings.settings.ragSettings.chunkOverlap.placeholder"
-                  )}
-                />
-              </Form.Item>
-
-              <div className="flex justify-end">
-                <SaveButton disabled={isSaveRAGPending} btnType="submit" />
-              </div>
-            </Form>
-          </div>
          <ModelSettings />
-
-          <div>
-            <div>
-              <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
-                {t("ollamaSettings.settings.prompt.label")}
-              </h2>
-              <div className="border border-b border-gray-200 dark:border-gray-600 mt-3 mb-6"></div>
-            </div>
-            <SettingPrompt />
-          </div>
-
-
        </div>
      )}
    </div>
--- a/src/components/Option/Settings/prompt.tsx
+++ b/src/components/Option/Settings/prompt.tsx
@@ -19,7 +19,7 @@ export const SettingPrompt = () => {
  const queryClient = useQueryClient()

  const { status, data } = useQuery({
-    queryKey: ["fetchOllaPrompt"],
+    queryKey: ["fetchRagPrompt"],
    queryFn: async () => {
      const [prompt, webSearchPrompt, webSearchFollowUpPrompt] =
        await Promise.all([
@@ -47,9 +47,7 @@ export const SettingPrompt = () => {
              defaultValue={selectedValue}
              onChange={(e) => setSelectedValue(e.target.value)}>
              <Radio.Button value="rag">RAG</Radio.Button>
-              <Radio.Button value="web">
-                {t("ollamaSettings.settings.prompt.option2")}
-              </Radio.Button>
+              <Radio.Button value="web">{t("rag.prompt.option2")}</Radio.Button>
            </Radio.Group>
          </div>

@@ -63,7 +61,7 @@ export const SettingPrompt = () => {
                  values?.questionPrompt || ""
                )
                queryClient.invalidateQueries({
-                  queryKey: ["fetchOllaPrompt"]
+                  queryKey: ["fetchRagPrompt"]
                })
              }}
              initialValues={{
@@ -98,7 +96,7 @@ export const SettingPrompt = () => {
                  value={data.webSearchFollowUpPrompt}
                  rows={5}
                  placeholder={t(
-                    "ollamaSettings.settings.prompt.webSearchFollowUpPromptPlaceholder"
+                    "rag.prompt.webSearchFollowUpPromptPlaceholder"
                  )}
                />
              </Form.Item>
@@ -119,7 +117,7 @@ export const SettingPrompt = () => {
                  values?.webSearchFollowUpPrompt || ""
                )
                queryClient.invalidateQueries({
-                  queryKey: ["fetchOllaPrompt"]
+                  queryKey: ["fetchRagPrompt"]
                })
              }}
              initialValues={{
@@ -127,46 +125,36 @@ export const SettingPrompt = () => {
                webSearchFollowUpPrompt: data.webSearchFollowUpPrompt
              }}>
              <Form.Item
-                label={t("ollamaSettings.settings.prompt.webSearchPrompt")}
+                label={t("rag.prompt.webSearchPrompt")}
                name="webSearchPrompt"
-                help={t("ollamaSettings.settings.prompt.webSearchPromptHelp")}
+                help={t("rag.prompt.webSearchPromptHelp")}
                rules={[
                  {
                    required: true,
-                    message: t(
-                      "ollamaSettings.settings.prompt.webSearchPromptError"
-                    )
+                    message: t("rag.prompt.webSearchPromptError")
                  }
                ]}>
                <Input.TextArea
                  value={data.webSearchPrompt}
                  rows={5}
-                  placeholder={t(
-                    "ollamaSettings.settings.prompt.webSearchPromptPlaceholder"
-                  )}
+                  placeholder={t("rag.prompt.webSearchPromptPlaceholder")}
                />
              </Form.Item>
              <Form.Item
-                label={t(
-                  "ollamaSettings.settings.prompt.webSearchFollowUpPrompt"
-                )}
+                label={t("rag.prompt.webSearchFollowUpPrompt")}
                name="webSearchFollowUpPrompt"
-                help={t(
-                  "ollamaSettings.settings.prompt.webSearchFollowUpPromptHelp"
-                )}
+                help={t("rag.prompt.webSearchFollowUpPromptHelp")}
                rules={[
                  {
                    required: true,
-                    message: t(
-                      "ollamaSettings.settings.prompt.webSearchFollowUpPromptError"
-                    )
+                    message: t("rag.prompt.webSearchFollowUpPromptError")
                  }
                ]}>
                <Input.TextArea
                  value={data.webSearchFollowUpPrompt}
                  rows={5}
                  placeholder={t(
-                    "ollamaSettings.settings.prompt.webSearchFollowUpPromptPlaceholder"
+                    "rag.prompt.webSearchFollowUpPromptPlaceholder"
                  )}
                />
              </Form.Item>
--- a/src/components/Option/Settings/rag.tsx
+++ b/src/components/Option/Settings/rag.tsx
@@ -0,0 +1,172 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { Form, InputNumber, Select, Skeleton } from "antd"
+import { SaveButton } from "~/components/Common/SaveButton"
+import {
+  defaultEmbeddingChunkOverlap,
+  defaultEmbeddingChunkSize,
+  defaultEmbeddingModelForRag,
+  getAllModels,
+  saveForRag
+} from "~/services/ollama"
+import { SettingPrompt } from "./prompt"
+import { useTranslation } from "react-i18next"
+
+export const RagSettings = () => {
+  const { t } = useTranslation("settings")
+
+  const queryClient = useQueryClient()
+
+  const { data: ollamaInfo, status } = useQuery({
+    queryKey: ["fetchRAGSettings"],
+    queryFn: async () => {
+      const [allModels, chunkOverlap, chunkSize, defaultEM] = await Promise.all(
+        [
+          getAllModels({ returnEmpty: true }),
+          defaultEmbeddingChunkOverlap(),
+          defaultEmbeddingChunkSize(),
+          defaultEmbeddingModelForRag()
+        ]
+      )
+      return {
+        models: allModels,
+        chunkOverlap,
+        chunkSize,
+        defaultEM
+      }
+    }
+  })
+
+  const { mutate: saveRAG, isPending: isSaveRAGPending } = useMutation({
+    mutationFn: async (data: {
+      model: string
+      chunkSize: number
+      overlap: number
+    }) => {
+      await saveForRag(data.model, data.chunkSize, data.overlap)
+      return true
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["fetchRAGSettings"]
+      })
+    }
+  })
+
+  return (
+    <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>
+            <div>
+              <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
+                {t("rag.ragSettings.label")}
+              </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={t("rag.ragSettings.model.label")}
+                help={t("rag.ragSettings.model.help")}
+                rules={[
+                  {
+                    required: true,
+                    message: t(
+                      "rag.ragSettings.model.required"
+                    )
+                  }
+                ]}>
+                <Select
+                  size="large"
+                  filterOption={(input, option) =>
+                    option!.label.toLowerCase().indexOf(input.toLowerCase()) >=
+                      0 ||
+                    option!.value.toLowerCase().indexOf(input.toLowerCase()) >=
+                      0
+                  }
+                  showSearch
+                  placeholder={t(
+                    "rag.ragSettings.model.placeholder"
+                  )}
+                  style={{ width: "100%" }}
+                  className="mt-4"
+                  options={ollamaInfo.models?.map((model) => ({
+                    label: model.name,
+                    value: model.model
+                  }))}
+                />
+              </Form.Item>
+
+              <Form.Item
+                name="chunkSize"
+                label={t("rag.ragSettings.chunkSize.label")}
+                rules={[
+                  {
+                    required: true,
+                    message: t(
+                      "rag.ragSettings.chunkSize.required"
+                    )
+                  }
+                ]}>
+                <InputNumber
+                  style={{ width: "100%" }}
+                  placeholder={t(
+                    "rag.ragSettings.chunkSize.placeholder"
+                  )}
+                />
+              </Form.Item>
+              <Form.Item
+                name="chunkOverlap"
+                label={t(
+                  "rag.ragSettings.chunkOverlap.label"
+                )}
+                rules={[
+                  {
+                    required: true,
+                    message: t(
+                      "rag.ragSettings.chunkOverlap.required"
+                    )
+                  }
+                ]}>
+                <InputNumber
+                  style={{ width: "100%" }}
+                  placeholder={t(
+                    "rag.ragSettings.chunkOverlap.placeholder"
+                  )}
+                />
+              </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">
+                {t("rag.prompt.label")}
+              </h2>
+              <div className="border border-b border-gray-200 dark:border-gray-600 mt-3 mb-6"></div>
+            </div>
+            <SettingPrompt />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
--- a/src/components/Option/Settings/search-mode.tsx
+++ b/src/components/Option/Settings/search-mode.tsx
@@ -44,7 +44,7 @@ export const SearchModeSettings = () => {
        })}
        className="space-y-4">
        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
-          <span className="text-gray-500 dark:text-neutral-50 ">
+          <span className="text-gray-700 dark:text-neutral-50 ">
            {t("generalSettings.webSearch.provider.label")}
          </span>
          <div>
@@ -62,7 +62,7 @@ export const SearchModeSettings = () => {
          </div>
        </div>
        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
-          <span className="text-gray-500 dark:text-neutral-50 ">
+          <span className="text-gray-700 dark:text-neutral-50 ">
            {t("generalSettings.webSearch.searchMode.label")}
          </span>
          <div>
@@ -75,7 +75,7 @@ export const SearchModeSettings = () => {
          </div>
        </div>
        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
-          <span className="text-gray-500 dark:text-neutral-50 ">
+          <span className="text-gray-700 dark:text-neutral-50 ">
            {t("generalSettings.webSearch.totalSearchResults.label")}
          </span>
          <div>
--- a/src/components/Option/Settings/tts-mode.tsx
+++ b/src/components/Option/Settings/tts-mode.tsx
@@ -49,7 +49,7 @@ export const TTSModeSettings = ({ hideBorder }: { hideBorder?: boolean }) => {
        })}
        className="space-y-4">
        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
-          <span className="text-gray-500 dark:text-neutral-50 ">
+          <span className="text-gray-700 dark:text-neutral-50 ">
            {t("generalSettings.tts.ttsEnabled.label")}
          </span>
          <div>
@@ -62,7 +62,7 @@ export const TTSModeSettings = ({ hideBorder }: { hideBorder?: boolean }) => {
          </div>
        </div>
        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
-          <span className="text-gray-500 dark:text-neutral-50 ">
+          <span className="text-gray-700 dark:text-neutral-50 ">
            {t("generalSettings.tts.ttsProvider.label")}
          </span>
          <div>
@@ -75,7 +75,7 @@ export const TTSModeSettings = ({ hideBorder }: { hideBorder?: boolean }) => {
          </div>
        </div>
        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
-          <span className="text-gray-500 dark:text-neutral-50 ">
+          <span className="text-gray-700 dark:text-neutral-50 ">
            {t("generalSettings.tts.ttsVoice.label")}
          </span>
          <div>
@@ -94,7 +94,7 @@ export const TTSModeSettings = ({ hideBorder }: { hideBorder?: boolean }) => {
          </div>
        </div>
        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
-          <span className="text-gray-500 dark:text-neutral-50 ">
+          <span className="text-gray-700 dark:text-neutral-50 ">
            {t("generalSettings.tts.ssmlEnabled.label")}
          </span>
          <div>
--- a/src/components/Option/Share/index.tsx
+++ b/src/components/Option/Share/index.tsx
@@ -146,7 +146,7 @@ export const OptionShareBody = () => {
                <label className="text-sm font-semibold leading-5 text-gray-900 dark:text-white">
                  {t("manageShare.webshare.label")}
                </label>
-                <p className="text-sm font-normal leading-5 text-gray-500 dark:text-gray-400">
+                <p className="text-sm font-normal leading-5 text-gray-700 dark:text-gray-400">
                  {t("manageShare.webshare.description")}
                </p>
              </div>
--- a/src/components/Sidepanel/Chat/empty.tsx
+++ b/src/components/Sidepanel/Chat/empty.tsx
@@ -94,7 +94,7 @@ export const EmptySidePanel = () => {
              </button>
              {ollamaURL &&
                cleanUrl(ollamaURL) !== "http://127.0.0.1:11434" && (
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mb-4 text-center">
+                  <p className="text-xs text-gray-700 dark:text-gray-400 mb-4 text-center">
                    <Trans
                      i18nKey="playground:ollamaState.connectionError"
                      components={{