feat: Add sidepanelRag settings for Copilot chat with website

src/components/Option/Settings.tsx

@@ -1,39 +0,0 @@
-import { Tabs } from "antd"
-import { SettingsOllama } from "./Settings/ollama"
-import { SettingPrompt } from "./Settings/prompt"
-import { SettingOther } from "./Settings/general-settings"
-
-type Props = {
-  setClose: (close: boolean) => void
-}
-
-export const Settings = ({ setClose }: Props) => {
-  return (
-    <div className="my-6 max-h-[80vh] overflow-y-auto">
-      <Tabs
-        tabPosition="left"
-        defaultActiveKey="1"
-        items={[
-          {
-            id: "1",
-            key: "1",
-            label: "Prompt",
-            children: <SettingPrompt />
-          },
-          {
-            id: "2",
-            key: "2",
-            label: "Web UI Settings",
-            children: <SettingOther />
-          },
-          {
-            id: "3",
-            key: "3",
-            label: "Ollama Settings",
-            children: <SettingsOllama />
-          }
-        ]}
-      />
-    </div>
-  )
-}

src/components/Option/Settings/rag.tsx

@@ -11,6 +11,7 @@ import {
 import { SettingPrompt } from "./prompt"
 import { useTranslation } from "react-i18next"
 import { getTotalFilePerKB } from "@/services/app"
+import { SidepanelRag } from "./sidepanel-rag"
 
 export const RagSettings = () => {
   const { t } = useTranslation("settings")
@@ -163,6 +164,8 @@ export const RagSettings = () => {
             </Form>
           </div>
 
+          <SidepanelRag  />
+
           <div>
             <div>
               <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">

src/components/Option/Settings/sidepanel-rag.tsx

@@ -0,0 +1,63 @@
+import { useStorage } from "@plasmohq/storage/hook"
+import { InputNumber, Switch } from "antd"
+import { useTranslation } from "react-i18next"
+
+export const SidepanelRag = ({ hideBorder }: { hideBorder?: boolean }) => {
+  const { t } = useTranslation("settings")
+  const [chatWithWebsiteEmbedding, setChatWithWebsiteEmbedding] = useStorage(
+    "chatWithWebsiteEmbedding",
+    true
+  )
+  const [maxWebsiteContext, setMaxWebsiteContext] = useStorage(
+    "maxWebsiteContext",
+    4028
+  )
+
+  return (
+    <div>
+      <div className="mb-5">
+        <h2
+          className={`${
+            !hideBorder ? "text-base font-semibold leading-7" : "text-md"
+          } text-gray-900 dark:text-white`}>
+          {t("generalSettings.sidepanelRag.heading")}
+        </h2>
+        {!hideBorder && (
+          <div className="border border-b border-gray-200 dark:border-gray-600 mt-3"></div>
+        )}
+      </div>
+      <div className={`${
+        !hideBorder ? "text-sm" : ""
+      } space-y-4`}>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
+          <span className="text-gray-700  truncate dark:text-neutral-50">
+            {t("generalSettings.sidepanelRag.ragEnabled.label")}
+          </span>
+          <div>
+            <Switch
+              className="mt-4 sm:mt-0"
+              checked={chatWithWebsiteEmbedding}
+              onChange={(checked) => setChatWithWebsiteEmbedding(checked)}
+            />
+          </div>
+        </div>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
+          <span className="text-gray-700 truncate dark:text-neutral-50">
+            {t("generalSettings.sidepanelRag.maxWebsiteContext.label")}
+          </span>
+          <div>
+            <InputNumber
+              disabled={chatWithWebsiteEmbedding}
+              className="mt-4 sm:mt-0"
+              value={maxWebsiteContext}
+              onChange={(value) => setMaxWebsiteContext(value)}
+              placeholder={t(
+                "generalSettings.sidepanelRag.maxWebsiteContext.placeholder"
+              )}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -35,7 +35,10 @@ export const TTSModeSettings = ({ hideBorder }: { hideBorder?: boolean }) => {
   return (
     <div>
       <div className="mb-5">
-        <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
+        <h2
+          className={`${
+            !hideBorder ? "text-base font-semibold leading-7" : "text-md"
+          } text-gray-900 dark:text-white`}>
           {t("generalSettings.tts.heading")}
         </h2>
         {!hideBorder && (

src/components/Sidepanel/Settings/body.tsx

@@ -33,6 +33,8 @@ import { useI18n } from "@/hooks/useI18n"
 import { TTSModeSettings } from "@/components/Option/Settings/tts-mode"
 import { AdvanceOllamaSettings } from "@/components/Common/Settings/AdvanceOllamaSettings"
 import { useStorage } from "@plasmohq/storage/hook"
+import { getTotalFilePerKB } from "@/services/app"
+import { SidepanelRag } from "@/components/Option/Settings/sidepanel-rag"
 
 export const SettingsBody = () => {
   const { t } = useTranslation("settings")
@@ -66,7 +68,8 @@ export const SettingsBody = () => {
         allModels,
         chunkOverlap,
         chunkSize,
-        defaultEM
+        defaultEM,
+        totalFilePerKB
       ] = await Promise.all([
         getOllamaURL(),
         systemPromptForNonRag(),
@@ -74,7 +77,8 @@ export const SettingsBody = () => {
         getAllModels({ returnEmpty: true }),
         defaultEmbeddingChunkOverlap(),
         defaultEmbeddingChunkSize(),
-        defaultEmbeddingModelForRag()
+        defaultEmbeddingModelForRag(),
+        getTotalFilePerKB()
       ])
 
       return {
@@ -85,18 +89,19 @@ export const SettingsBody = () => {
         models: allModels,
         chunkOverlap,
         chunkSize,
-        defaultEM
+        defaultEM,
+        totalFilePerKB
       }
     }
   })
 
   const { mutate: saveRAG, isPending: isSaveRAGPending } = useMutation({
-    mutationFn: async (data: {
+    mutationFn: async (f: {
       model: string
       chunkSize: number
       overlap: number
     }) => {
-      await saveForRag(data.model, data.chunkSize, data.overlap)
+      await saveForRag(f.model, f.chunkSize, f.overlap, data.totalFilePerKB)
     }
   })
 
@@ -196,7 +201,9 @@ export const SettingsBody = () => {
           </div>
         )}
       </div>
-
+      <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
+        <SidepanelRag hideBorder />
+      </div>
       <div className="border flex flex-col gap-4 border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
         <h2 className="text-md font-semibold dark:text-white">
           {t("ollamaSettings.heading")}
@@ -247,7 +254,6 @@ export const SettingsBody = () => {
           />
         </div>
       </div>
-
       <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
         <h2 className="text-md mb-4 font-semibold dark:text-white">
           {t("rag.ragSettings.label")}
@@ -298,16 +304,12 @@ export const SettingsBody = () => {
             rules={[
               {
                 required: true,
-                message: t(
-                  "rag.ragSettings.chunkSize.required"
-                )
+                message: t("rag.ragSettings.chunkSize.required")
               }
             ]}>
             <InputNumber
               style={{ width: "100%" }}
-              placeholder={t(
-                "rag.ragSettings.chunkSize.placeholder"
-              )}
+              placeholder={t("rag.ragSettings.chunkSize.placeholder")}
             />
           </Form.Item>
           <Form.Item
@@ -316,16 +318,12 @@ export const SettingsBody = () => {
             rules={[
               {
                 required: true,
-                message: t(
-                  "rag.ragSettings.chunkOverlap.required"
-                )
+                message: t("rag.ragSettings.chunkOverlap.required")
               }
             ]}>
             <InputNumber
               style={{ width: "100%" }}
-              placeholder={t(
-                "rag.ragSettings.chunkOverlap.placeholder"
-              )}
+              placeholder={t("rag.ragSettings.chunkOverlap.placeholder")}
             />
           </Form.Item>