Add about section to settings.json for multiple locales

src/assets/locale/en/settings.json

@@ -232,5 +232,15 @@
     "manageSearch": {
         "title": "Manage Web Search",
         "heading": "Configure Web Search"
+    },
+    "about": {
+        "title": "About",
+        "heading": "About",
+        "chromeVersion": "Page Assist Version",
+        "ollamaVersion": "Ollama Version",
+        "support": "You can support the Page Assist project by donating or sponsoring through the following platforms:",
+        "koFi": "Support on Ko-fi",
+        "githubSponsor": "Sponsor on GitHub",
+        "githubRepo": "GitHub Repository"
     }
 }

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

@@ -235,5 +235,15 @@
     "manageSearch": {
         "title": "Web検索の管理",
         "heading": "Web検索を設定する"
+    },
+    "about": {
+        "title": "About",
+        "heading": "About",
+        "chromeVersion": "Page Assistのバージョン",
+        "ollamaVersion": "Ollamaのバージョン",
+        "support": "Page Assistプロジェクトは、以下のプラットフォームで寄付やスポンサーシップをすることで支援できます:",
+        "koFi": "Ko-fiで支援する",
+        "githubSponsor": "GitHubでスポンサーする",
+        "githubRepo": "GitHubリポジトリ"
       }
 }

src/assets/locale/ml/settings.json

@@ -235,5 +235,16 @@
     "manageSearch": {
         "heading": "Web തിരയൽ സജ്ജമാക്കുക",
         "title": "Web തിരയൽ നിയന്ത്രിക്കുക"
+    },
+    "about": {
+        "title": "വിവരങ്ങൾ",
+        "heading": "വിവരങ്ങൾ",
+        "chromeVersion": "പേജ് അസിസ്റ്റ് വേർഷൻ",
+        "ollamaVersion": "ഓളാമ വേർഷൻ",
+        "support": "താഴെ പറയുന്ന പ്ലാറ്റ്ഫോമുകളിലൂടെ ദാനം ചെയ്യുകയോ സ്പോൺസർ ചെയ്യുകയോ ചെയ്ത് പേജ് അസിസ്റ്റ് പ്രോജക്റ്റിനെ പിന്തുണയ്ക്കാവുന്നതാണ്:",
+        "koFi": "കോഫിയിൽ പിന്തുണയ്ക്കുക",
+        "githubSponsor": "ഗിറ്റ്ഹബ്ബിൽ സ്പോൺസർ ചെയ്യുക",
+        "githubRepo": "ഗിറ്റ്ഹബ്ബ് റെപ്പോസിറ്ററി"
       }
+      
 }

src/assets/locale/zh/settings.json

@@ -236,5 +236,15 @@
     "manageSearch": {
         "heading": "配置网络搜索",
         "title": "管理网络搜索"
+    },
+    "about": {
+        "title": "关于",
+        "heading": "关于",
+        "chromeVersion": "Page Assist版本",
+        "ollamaVersion": "Ollama版本",
+        "support": "您可以通过以下平台捐赠或赞助Page Assist项目:",
+        "koFi": "在Ko-fi上支持",
+        "githubSponsor": "在GitHub上赞助",
+        "githubRepo": "GitHub仓库"
       }
 }

src/components/Layouts/SettingsOptionLayout.tsx

@@ -1,4 +1,4 @@
-import { Book, BrainCircuit, Orbit, Share } from "lucide-react"
+import { Book, BrainCircuit, Orbit, Share, BlocksIcon , InfoIcon} from "lucide-react"
 import { useTranslation } from "react-i18next"
 import { Link, useLocation } from "react-router-dom"
 import { OllamaIcon } from "../Icons/Ollama"
@@ -68,6 +68,12 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
                 current={location.pathname}
                 icon={BrainCircuit}
               />
+               {/* <LinkComponent
+                href="/settings/knowledge"
+                name={t("manageKnowledge.title")}
+                icon={BlocksIcon}
+                current={location.pathname}
+              /> */}
               <LinkComponent
                 href="/settings/prompt"
                 name={t("managePrompts.title")}
@@ -80,6 +86,12 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
                 icon={Share}
                 current={location.pathname}
               />
+              <LinkComponent
+                href="/settings/about"
+                name={t("about.title")}
+                icon={InfoIcon}
+                current={location.pathname}
+              />
             </ul>
           </nav>
         </aside>

src/components/Option/Settings/about.tsx

@@ -0,0 +1,102 @@
+import { getOllamaURL } from "~/services/ollama"
+import { useTranslation } from "react-i18next"
+import { useQuery } from "@tanstack/react-query"
+import { Skeleton } from "antd"
+import { cleanUrl } from "@/libs/clean-url"
+
+export const AboutApp = () => {
+  const { t } = useTranslation("settings")
+
+  const { data, status } = useQuery({
+    queryKey: ["fetchOllamURL"],
+    queryFn: async () => {
+      const chromeVersion = chrome.runtime.getManifest().version
+      try {
+        const url = await getOllamaURL()
+        const req = await fetch(`${cleanUrl(url)}/api/version`)
+
+        if (!req.ok) {
+          return {
+            ollama: "N/A",
+            chromeVersion
+          }
+        }
+
+        const res = (await req.json()) as { version: string }
+        return {
+          ollama: res.version,
+          chromeVersion
+        }
+      } catch {
+        return {
+          ollama: "N/A",
+          chromeVersion
+        }
+      }
+    }
+  })
+
+  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-4">
+          <div>
+            <div>
+              <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
+                {t("about.heading")}
+              </h2>
+              <div className="border border-b border-gray-200 dark:border-gray-600 mt-3 mb-6"></div>
+            </div>
+          </div>
+
+          <div>
+            <div className="flex flex-col space-y-6">
+              <div className="flex gap-6">
+                <span className="text-sm text-gray-500 dark:text-gray-400">
+                  {t("about.chromeVersion")}
+                </span>
+                <span className="text-sm text-gray-900 dark:text-white">
+                  {data.chromeVersion}
+                </span>
+              </div>
+
+              <div className="flex gap-6">
+                <span className="text-sm text-gray-500 dark:text-gray-400">
+                  {t("about.ollamaVersion")}
+                </span>
+                <span className="text-sm text-gray-900 dark:text-white">
+                  {data.ollama}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+              {t("about.support")}
+            </p>
+
+            <div className="flex gap-2">
+              <a
+                href="https://ko-fi.com/n4ze3m"
+                target="_blank"
+                rel="noreferrer"
+                className="text-blue-500 dark:text-blue-400 border dark:border-gray-600 px-2.5 py-2 rounded-md">
+                {t("about.koFi")}
+              </a>
+
+              <a
+                href="https://github.com/sponsors/n4ze3m"
+                target="_blank"
+                rel="noreferrer"
+                className="text-blue-500 dark:text-blue-400 border dark:border-gray-600 px-2.5 py-2 rounded-md">
+                {t("about.githubSponsor")}
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/libs/db.ts

@@ -6,6 +6,7 @@ import {
 type HistoryInfo = {
   id: string
   title: string
+  is_rag: boolean
   createdAt: number
 }
 
@@ -214,10 +215,10 @@ export const generateID = () => {
   })
 }
 
-export const saveHistory = async (title: string) => {
+export const saveHistory = async (title: string, is_rag?: boolean) => {
   const id = generateID()
   const createdAt = Date.now()
-  const history = { id, title, createdAt }
+  const history = { id, title, createdAt, is_rag }
   const db = new PageAssitDatabase()
   await db.addChatHistory(history)
   return history

src/routes/index.tsx

@@ -8,6 +8,8 @@ import { OptionPrompt } from "./option-settings-prompt"
 import { OptionOllamaSettings } from "./options-settings-ollama"
 import { OptionSettings } from "./option-settings"
 import { OptionShare } from "./option-settings-share"
+import { OptionKnowledgeBase } from "./option-settings-knowledge"
+import { OptionAbout } from "./option-settings-about"
 
 export const OptionRouting = () => {
   const { mode } = useDarkMode()
@@ -21,6 +23,8 @@ export const OptionRouting = () => {
         <Route path="/settings/prompt" element={<OptionPrompt />} />
         <Route path="/settings/ollama" element={<OptionOllamaSettings />} />
         <Route path="/settings/share" element={<OptionShare />} />
+        <Route path="/settings/knowledge" element={<OptionKnowledgeBase />} />
+        <Route path="/settings/about" element={<OptionAbout />} />
       </Routes>
     </div>
   )

src/routes/option-settings-about.tsx

@@ -0,0 +1,13 @@
+import { SettingsLayout } from "~/components/Layouts/SettingsOptionLayout"
+import OptionLayout from "~/components/Layouts/Layout"
+import { AboutApp } from "@/components/Option/Settings/about"
+
+export const OptionAbout = () => {
+  return (
+    <OptionLayout>
+      <SettingsLayout>
+        <AboutApp />
+      </SettingsLayout>
+    </OptionLayout>
+  )
+}

src/routes/option-settings-knowledge.tsx

@@ -0,0 +1,12 @@
+import { SettingsLayout } from "~/components/Layouts/SettingsOptionLayout"
+import OptionLayout from "~/components/Layouts/Layout"
+
+export const OptionKnowledgeBase = () => {
+  return (
+    <OptionLayout>
+      <SettingsLayout>
+        hey
+      </SettingsLayout>
+    </OptionLayout>
+  )
+}