Update SettingsOptionLayout to include Tag component in link name

src/components/Layouts/SettingsOptionLayout.tsx

@@ -1,7 +1,15 @@
-import { Book, BrainCircuit, Orbit, Share, BlocksIcon , InfoIcon} 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"
+import { Tag } from "antd"
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ")
@@ -9,7 +17,7 @@ function classNames(...classes: string[]) {
 
 const LinkComponent = (item: {
   href: string
-  name: string
+  name: string | JSX.Element
   icon: any
   current: string
 }) => {
@@ -40,7 +48,7 @@ const LinkComponent = (item: {
 
 export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
   const location = useLocation()
-  const { t } = useTranslation("settings")
+  const { t } = useTranslation(["settings", "common"])
 
   return (
     <>
@@ -68,9 +76,14 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
                 current={location.pathname}
                 icon={BrainCircuit}
               />
-               <LinkComponent
+              <LinkComponent
                 href="/settings/knowledge"
-                name={t("manageKnowledge.title")}
+                name={
+                  <div className="inline-flex items-center gap-2">
+                    {t("manageKnowledge.title")}
+                    <Tag color="yellow">{t("common:beta")}</Tag>
+                  </div>
+                }
                 icon={BlocksIcon}
                 current={location.pathname}
               />