feat: Add Chrome AI support

src/components/Layouts/Header.tsx

@@ -21,6 +21,7 @@ import { useMessageOption } from "~/hooks/useMessageOption"
 import { Select, Tooltip } from "antd"
 import { getAllPrompts } from "@/db"
 import { ShareBtn } from "~/components/Common/ShareBtn"
+import { ProviderIcons } from "../Common/ProviderIcon"
 type Props = {
   setSidebarOpen: (open: boolean) => void
   setOpenModelSettings: (open: boolean) => void
@@ -132,7 +133,10 @@ export const Header: React.FC<Props> = ({
                 <span
                   key={model.model}
                   className="flex flex-row gap-3 items-center truncate">
-                  <OllamaIcon className="w-5 h-5" />
+                  <ProviderIcons
+                    provider={model?.provider}
+                    className="w-5 h-5"
+                  />
                   <span className="truncate">{model.name}</span>
                 </span>
               ),

src/components/Layouts/SettingsOptionLayout.tsx

@@ -6,11 +6,13 @@ import {
   BlocksIcon,
   InfoIcon,
   CombineIcon,
+  ChromeIcon
 } from "lucide-react"
 import { useTranslation } from "react-i18next"
 import { Link, useLocation } from "react-router-dom"
 import { OllamaIcon } from "../Icons/Ollama"
 import { Tag } from "antd"
+import { BetaTag } from "../Common/Beta"
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ")
@@ -20,10 +22,12 @@ const LinkComponent = (item: {
   href: string
   name: string | JSX.Element
   icon: any
-  current: string
+  current: string,
+  beta?: boolean
 }) => {
   return (
-    <li>
+    <li className="inline-flex items-center">
+
       <Link
         to={item.href}
         className={classNames(
@@ -43,6 +47,9 @@ const LinkComponent = (item: {
         />
         {item.name}
       </Link>
+      {
+        item.beta && <BetaTag />
+        }
     </li>
   )
 }
@@ -65,7 +72,7 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
                 icon={OrbitIcon}
                 current={location.pathname}
               />
-               <LinkComponent
+              <LinkComponent
                 href="/settings/rag"
                 name={t("rag.title")}
                 icon={CombineIcon}
@@ -77,6 +84,15 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
                 icon={OllamaIcon}
                 current={location.pathname}
               />
+              {import.meta.env.BROWSER === "chrome" && (
+                <LinkComponent
+                  href="/settings/chrome"
+                  name={t("chromeAiSettings.title")}
+                  icon={ChromeIcon}
+                  current={location.pathname}
+                  beta
+                />
+              )}
               <LinkComponent
                 href="/settings/model"
                 name={t("manageModels.title")}