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 && (