feat: Add sidepanelRag settings for Copilot chat with website

src/assets/locale/en/settings.json

@@ -31,6 +31,16 @@
         "label": "Send Notification After Finishing Processing the Knowledge Base"
       }
     },
+    "sidepanelRag": {
+      "heading": "Copilot Chat With Website Settings",
+      "ragEnabled": {
+        "label": "Chat with website using vector embeddings"
+      },
+      "maxWebsiteContext": {
+        "label": "Normal mode website content size",
+        "placeholder": "Content size (default 4028)"
+      }
+    },
     "webSearch": {
       "heading": "Manage Web Search",
       "searchMode": {

src/assets/locale/es/settings.json

@@ -31,6 +31,16 @@
         "label": "Enviar notificación después de terminar el procesamiento de la base de conocimientos"
       }
     },
+    "sidepanelRag": {
+      "heading": "Configuración del Chat Copilot con Sitio Web",
+      "ragEnabled": {
+        "label": "Chatear con el sitio web usando incrustaciones vectoriales"
+      },
+      "maxWebsiteContext": {
+        "label": "Tamaño del contenido del sitio web en modo normal",
+        "placeholder": "Tamaño del contenido (predeterminado 4028)"
+      }
+    },
     "webSearch": {
       "heading": "Manejo de la busqueda Web",
       "searchMode": {

src/assets/locale/fr/settings.json

@@ -31,6 +31,16 @@
         "label": "Envoyer une notification après avoir terminé le traitement de la base de connaissances"
       }
     },
+    "sidepanelRag": {
+      "heading": "Paramètres du Chat Copilot avec le Site Web",
+      "ragEnabled": {
+        "label": "Discuter avec le site web en utilisant des embeddings vectoriels"
+      },
+      "maxWebsiteContext": {
+        "label": "Taille du contenu du site web en mode normal",
+        "placeholder": "Taille du contenu (par défaut 4028)"
+      }
+    },
     "webSearch": {
       "heading": "Gérer la recherche Web",
       "searchMode": {

src/assets/locale/it/settings.json

@@ -31,6 +31,16 @@
         "label": "Inviare notifica dopo aver terminato l'elaborazione della base di conoscenza"
       }
     },
+    "sidepanelRag": {
+      "heading": "Impostazioni Chat Copilot con Sito Web",
+      "ragEnabled": {
+        "label": "Chatta con il sito web utilizzando embedding vettoriali"
+      },
+      "maxWebsiteContext": {
+        "label": "Dimensione del contenuto del sito web in modalità normale",
+        "placeholder": "Dimensione del contenuto (predefinito 4028)"
+      }
+    },
     "webSearch": {
       "heading": "Gestione ricerca Web",
       "searchMode": {

src/assets/locale/ja-JP/settings.json

@@ -34,6 +34,16 @@
         "label": "ナレッジベースの処理完了後に通知を送信"
       }
     },
+    "sidepanelRag": {
+      "heading": "ウェブサイトとのCopilotチャット設定",
+      "ragEnabled": {
+        "label": "ベクトル埋め込みを使用してウェブサイトとチャットする"
+      },
+      "maxWebsiteContext": {
+        "label": "通常モードのウェブサイトコンテンツサイズ",
+        "placeholder": "コンテンツサイズ（デフォルト4028）"
+      }
+    },
     "webSearch": {
       "heading": "ウェブ検索を管理する",
       "searchMode": {

src/assets/locale/ml/settings.json

@@ -34,6 +34,16 @@
         "label": "അറിവ് ശേഖരം പ്രോസസ്സ് ചെയ്ത് കഴിഞ്ഞതിന് ശേഷം അറിയിപ്പ് അയയ്ക്കുക"
       }
     },
+    "sidepanelRag": {
+      "heading": "വെബ്‌സൈറ്റുമായുള്ള കോപൈലറ്റ് ചാറ്റ് ക്രമീകരണങ്ങൾ",
+      "ragEnabled": {
+        "label": "വെക്ടർ എംബെഡിംഗുകൾ ഉപയോഗിച്ച് വെബ്‌സൈറ്റുമായി ചാറ്റ് ചെയ്യുക"
+      },
+      "maxWebsiteContext": {
+        "label": "സാധാരണ മോഡിലെ വെബ്‌സൈറ്റ് ഉള്ളടക്ക വലുപ്പം",
+        "placeholder": "ഉള്ളടക്ക വലുപ്പം (സ്ഥിരസ്ഥിതി 4028)"
+      }
+    },
     "webSearch": {
       "heading": "വെബ്ബ് തിരച്ചിൽ നിയന്ത്രിക്കുക",
       "searchMode": {

src/assets/locale/pt-BR/settings.json

@@ -31,6 +31,16 @@
         "label": "Enviar notificação após concluir o processamento da base de conhecimento"
       }
     },
+    "sidepanelRag": {
+      "heading": "Configurações de Chat Copilot com o Site",
+      "ragEnabled": {
+        "label": "Conversar com o site usando embeddings vetoriais"
+      },
+      "maxWebsiteContext": {
+        "label": "Tamanho do conteúdo do site no modo normal",
+        "placeholder": "Tamanho do conteúdo (padrão 4028)"
+      }
+    },
     "webSearch": {
       "heading": "Gerenciar Pesquisa na Web",
       "searchMode": {

src/assets/locale/ru/settings.json

@@ -31,6 +31,17 @@
         "label": "Отправить уведомление после завершения обработки базы знаний"
       }
     },
+    "sidepanelRag": {
+      "heading": "Настройки чата Copilot с веб-сайтом",
+      "ragEnabled": {
+        "label": "Общаться с веб-сайтом, используя векторные вложения"
+      },
+      "maxWebsiteContext": {
+        "label": "Размер содержимого веб-сайта в обычном режиме",
+        "placeholder": "Размер содержимого (по умолчанию 4028)"
+      }
+    },
+
     "webSearch": {
       "heading": "Управление веб-поиском",
       "searchMode": {

src/assets/locale/zh/settings.json

@@ -34,6 +34,16 @@
         "label": "完成知识库处理后发送通知"
       }
     },
+    "sidepanelRag": {
+      "heading": "与网站对话的Copilot聊天设置",
+      "ragEnabled": {
+        "label": "使用向量嵌入与网站聊天"
+      },
+      "maxWebsiteContext": {
+        "label": "普通模式下的网站内容大小",
+        "placeholder": "内容大小（默认4028）"
+      }
+    },
     "webSearch": {
       "heading": "管理网络搜索",
       "searchMode": {

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(
+                message: t("rag.ragSettings.chunkSize.required")
-                  "rag.ragSettings.chunkSize.required"
-                )
               }
             ]}>
             <InputNumber
               style={{ width: "100%" }}
-              placeholder={t(
+              placeholder={t("rag.ragSettings.chunkSize.placeholder")}
-                "rag.ragSettings.chunkSize.placeholder"
-              )}
             />
           </Form.Item>
           <Form.Item
@@ -316,16 +318,12 @@ export const SettingsBody = () => {
             rules={[
               {
                 required: true,
-                message: t(
+                message: t("rag.ragSettings.chunkOverlap.required")
-                  "rag.ragSettings.chunkOverlap.required"
-                )
               }
             ]}>
             <InputNumber
               style={{ width: "100%" }}
-              placeholder={t(
+              placeholder={t("rag.ragSettings.chunkOverlap.placeholder")}
-                "rag.ragSettings.chunkOverlap.placeholder"
-              )}
             />
           </Form.Item>