@lobehub/chat 1.43.5 → 1.44.0

package/locales/zh-TW/modelProvider.json

@@ -63,6 +63,44 @@
       "title": "Cloudflare 帳戶 ID / API 位址"
     }
   },
+  "createNewAiProvider": {
+    "apiKey": {
+      "placeholder": "請填寫你的 API Key",
+      "required": "請填寫你的 API Key",
+      "title": "API Key"
+    },
+    "basicTitle": "基本資訊",
+    "configTitle": "配置信息",
+    "confirm": "新建",
+    "createSuccess": "新建成功",
+    "description": {
+      "placeholder": "服務商簡介（選填）",
+      "title": "服務商簡介"
+    },
+    "id": {
+      "placeholder": "建議全小寫，例如 openai，創建後將不可修改",
+      "required": "請填寫服務商 ID",
+      "title": "服務商 ID"
+    },
+    "logo": {
+      "required": "請上傳正確的服務商 Logo",
+      "title": "服務商 Logo"
+    },
+    "name": {
+      "placeholder": "請輸入服務商的展示名稱",
+      "required": "請填寫服務商名稱",
+      "title": "服務商名稱"
+    },
+    "proxyUrl": {
+      "placeholder": "請填寫你的請求地址，如果不填則會使用 SDK 對應的請求地址",
+      "title": "代理地址"
+    },
+    "sdkType": {
+      "required": "請選擇 SDK 類型",
+      "title": "請求格式"
+    },
+    "title": "創建自定義 AI 服務商"
+  },
   "github": {
     "personalAccessToken": {
       "desc": "填入你的 Github 個人存取權杖，點擊[這裡](https://github.com/settings/tokens) 創建",
@@ -77,6 +115,23 @@
       "title": "HuggingFace Token"
     }
   },
+  "list": {
+    "title": {
+      "disabled": "未啟用服務商",
+      "enabled": "已啟用服務商"
+    }
+  },
+  "menu": {
+    "addCustomProvider": "添加自定義服務商",
+    "all": "全部",
+    "list": {
+      "disabled": "未啟用",
+      "enabled": "已啟用"
+    },
+    "notFound": "未找到搜索結果",
+    "searchProviders": "搜索服務商...",
+    "sort": "自定義排序"
+  },
   "ollama": {
     "checker": {
       "desc": "測試代理地址是否正確填寫",
@@ -131,6 +186,127 @@
       "title": "下載指定的 Ollama 模型"
     }
   },
+  "providerModels": {
+    "config": {
+      "aesGcm": "您的秘鑰與代理地址等將使用 <1>AES-GCM</1> 加密算法進行加密",
+      "apiKey": {
+        "desc": "請填寫你的 {{name}} API Key",
+        "placeholder": "{{name}} API Key",
+        "title": "API Key"
+      },
+      "baseURL": {
+        "desc": "必須包含 http(s)://",
+        "placeholder": "https://your-proxy-url.com/v1",
+        "title": "API 代理地址"
+      },
+      "checker": {
+        "button": "檢查",
+        "desc": "測試 Api Key 與代理地址是否正確填寫",
+        "pass": "檢查通過",
+        "title": "連通性檢查"
+      },
+      "fetchOnClient": {
+        "desc": "客戶端請求模式將從瀏覽器直接發起會話請求，可提升響應速度",
+        "title": "使用客戶端請求模式"
+      },
+      "helpDoc": "配置教程",
+      "waitingForMore": "更多模型正在 <1>計劃接入</1> 中，敬請期待"
+    },
+    "createNew": {
+      "title": "創建自定義 AI 模型"
+    },
+    "item": {
+      "config": "配置模型",
+      "customModelCards": {
+        "addNew": "創建並添加 {{id}} 模型",
+        "confirmDelete": "即將刪除該自定義模型，刪除後將不可恢復，請謹慎操作。"
+      },
+      "delete": {
+        "confirm": "確認刪除模型 {{displayName}}？",
+        "success": "刪除成功",
+        "title": "刪除模型"
+      },
+      "modelConfig": {
+        "azureDeployName": {
+          "extra": "在 Azure OpenAI 中實際請求的字段",
+          "placeholder": "請輸入 Azure 中的模型部署名稱",
+          "title": "模型部署名稱"
+        },
+        "displayName": {
+          "placeholder": "請輸入模型的展示名稱，例如 ChatGPT、GPT-4 等",
+          "title": "模型展示名稱"
+        },
+        "files": {
+          "extra": "當前文件上傳實現僅為一種 Hack 方案，僅限自行嘗試。完整文件上傳能力請等待後續實現",
+          "title": "支持文件上傳"
+        },
+        "functionCall": {
+          "extra": "此配置將僅開啟應用中的函數調用能力，是否支持函數調用完全取決於模型本身，請自行測試該模型的函數調用能力可用性",
+          "title": "支持函數調用"
+        },
+        "id": {
+          "extra": "將作為模型標籤進行展示",
+          "placeholder": "請輸入模型id，例如 gpt-4-turbo-preview 或 claude-2.1",
+          "title": "模型 ID"
+        },
+        "modalTitle": "自定義模型配置",
+        "tokens": {
+          "title": "最大 token 數",
+          "unlimited": "無限制"
+        },
+        "vision": {
+          "extra": "此配置將僅開啟應用中的圖片上傳配置，是否支持識別完全取決於模型本身，請自行測試該模型的視覺識別能力可用性",
+          "title": "支持視覺識別"
+        }
+      },
+      "pricing": {
+        "image": "${{amount}}/圖片",
+        "inputCharts": "${{amount}}/M 字符",
+        "inputMinutes": "${{amount}}/分鐘",
+        "inputTokens": "輸入 ${{amount}}/M",
+        "outputTokens": "輸出 ${{amount}}/M"
+      },
+      "releasedAt": "發佈於{{releasedAt}}"
+    },
+    "list": {
+      "addNew": "新增模型",
+      "disabled": "未啟用",
+      "empty": {
+        "desc": "請創建自定義模型或拉取模型後開始使用吧",
+        "title": "暫無可用模型"
+      },
+      "enabled": "已啟用",
+      "enabledActions": {
+        "disableAll": "全部禁用",
+        "enableAll": "全部啟用",
+        "sort": "自訂模型排序"
+      },
+      "enabledEmpty": "暫無啟用模型，請從下方列表中啟用心儀的模型吧~",
+      "fetcher": {
+        "clear": "清除取得的模型",
+        "fetch": "取得模型列表",
+        "fetching": "正在取得模型列表...",
+        "latestTime": "上次更新時間：{{time}}",
+        "noLatestTime": "尚未取得列表"
+      },
+      "search": "搜尋模型...",
+      "searchResult": "搜尋到 {{count}} 個模型",
+      "title": "模型列表",
+      "total": "共 {{count}} 個模型可用"
+    },
+    "searchNotFound": "未找到搜尋結果"
+  },
+  "sortModal": {
+    "success": "排序更新成功",
+    "title": "自定義排序",
+    "update": "更新"
+  },
+  "updateAiProvider": {
+    "confirmDelete": "即將刪除該 AI 服務商，刪除後將無法找回，確認是否刪除？",
+    "deleteSuccess": "刪除成功",
+    "tooltip": "更新服務商基礎配置",
+    "updateSuccess": "更新成功"
+  },
   "wenxin": {
     "accessKey": {
       "desc": "填入百度千帆平台的 Access Key",

package/locales/zh-TW/setting.json

@@ -411,6 +411,7 @@
     "common": "通用設置",
     "experiment": "實驗",
     "llm": "語言模型",
+    "provider": "AI 服務商",
     "sync": "雲端同步",
     "system-agent": "系統助手",
     "tts": "語音服務"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.43.5",
+  "version": "1.44.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -125,12 +125,12 @@
     "@icons-pack/react-simple-icons": "9.6.0",
     "@khmyznikov/pwa-install": "^0.3.9",
     "@langchain/community": "^0.3.22",
-    "@lobehub/charts": "^1.11.0",
+    "@lobehub/charts": "^1.11.1",
     "@lobehub/chat-plugin-sdk": "^1.32.4",
     "@lobehub/chat-plugins-gateway": "^1.9.0",
     "@lobehub/icons": "^1.61.1",
     "@lobehub/tts": "^1.27.0",
-    "@lobehub/ui": "^1.161.0",
+    "@lobehub/ui": "^1.162.0",
     "@neondatabase/serverless": "^0.10.4",
     "@next/third-parties": "^15.1.3",
     "@react-spring/web": "^9.7.5",
@@ -244,7 +244,7 @@
     "@edge-runtime/vm": "^5.0.0",
     "@huggingface/tasks": "^0.12.30",
     "@lobehub/i18n-cli": "^1.20.3",
-    "@lobehub/lint": "^1.24.4",
+    "@lobehub/lint": "^1.25.3",
     "@lobehub/seo-cli": "^1.4.3",
     "@next/bundle-analyzer": "^15.1.3",
     "@next/eslint-plugin-next": "^15.1.3",

package/src/app/(main)/(mobile)/me/settings/features/Category.tsx

@@ -9,7 +9,7 @@ import { useCategory } from './useCategory';
 const Category = memo(() => {
   const items = useCategory();
 
-  return items?.map((item, index) => <Cell key={item.key || index} {...item} />);
+  return items?.map((item, index) => <Cell {...item} key={item.key || index} />);
 });
 
 export default Category;

package/src/app/(main)/(mobile)/me/settings/features/useCategory.tsx

@@ -6,6 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
 import { CellProps } from '@/components/Cell';
+import { isServerMode } from '@/const/version';
 import { SettingsTabs } from '@/store/global/initialState';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
@@ -37,11 +38,17 @@ export const useCategory = () => {
         </Flexbox>
       ),
     },
-    showLLM && {
-      icon: Brain,
-      key: SettingsTabs.LLM,
-      label: t('tab.llm'),
-    },
+    showLLM && isServerMode
+      ? {
+          icon: Brain,
+          key: SettingsTabs.Provider,
+          label: t('tab.provider'),
+        }
+      : {
+          icon: Brain,
+          key: SettingsTabs.LLM,
+          label: t('tab.llm'),
+        },
     { icon: Mic2, key: SettingsTabs.TTS, label: t('tab.tts') },
     {
       icon: Bot,

package/src/app/(main)/changelog/features/VersionTag.tsx

@@ -10,10 +10,9 @@ const useStyles = createStyles(({ token, css }) => {
       margin: 0;
       padding-block: 4px;
       padding-inline: 12px;
+      border-radius: 16px;
 
       color: ${token.colorTextSecondary};
-
-      border-radius: 16px;
     `,
   };
 });

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/Thread.tsx

@@ -16,9 +16,9 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 
     padding-block: 8px 4px;
     padding-inline: 4px;
+    border-radius: 6px;
 
     background: ${isDarkMode ? token.colorFillTertiary : token.colorFillQuaternary};
-    border-radius: 6px;
   `,
 }));
 

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/ThreadItem.tsx

@@ -20,11 +20,10 @@ const useStyles = createStyles(({ css, token }) => ({
 
     padding-block: 4px;
     padding-inline: 6px;
+    border-radius: 6px;
 
     font-size: 12px;
 
-    border-radius: 6px;
-
     &:hover {
       background: ${token.colorFillTertiary};
     }

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/index.tsx

@@ -29,7 +29,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => {
         inset-block: 56px 50px;
 
         width: 32px;
-
         border-block-end: 2px solid ${borderColor};
       }
     `,

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/WelcomeChatItem/InboxWelcome/AgentsSuggest.tsx

@@ -27,11 +27,11 @@ const useStyles = createStyles(({ css, token, responsive }) => ({
     height: 100%;
     min-height: 110px;
     padding: 16px;
+    border-radius: ${token.borderRadius}px;
 
     color: ${token.colorText};
 
     background: ${token.colorBgContainer};
-    border-radius: ${token.borderRadius}px;
 
     &:hover {
       background: ${token.colorBgElevated};

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/WelcomeChatItem/InboxWelcome/QuestionSuggest.tsx

@@ -20,11 +20,11 @@ const useStyles = createStyles(({ css, token, responsive }) => ({
 
     padding-block: 12px;
     padding-inline: 24px;
+    border-radius: 48px;
 
     color: ${token.colorText};
 
     background: ${token.colorBgContainer};
-    border-radius: 48px;
 
     &:hover {
       background: ${token.colorBgElevated};

package/src/app/(main)/chat/(workspace)/@conversation/features/ZenModeToast/Toast.tsx

@@ -51,9 +51,9 @@ const useStyles = createStyles(({ css, token }) => ({
 
     padding-block: 12px;
     padding-inline: 16px;
+    border-radius: 9999px;
 
     background: ${token.colorText};
-    border-radius: 9999px;
     box-shadow: ${token.boxShadowSecondary};
   `,
 }));

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/ThreadItem/index.tsx

@@ -27,7 +27,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }, index: number) => ({
       inset-inline-start: 26px;
 
       width: 18px;
-
       border-block-end: 2px solid ${token.colorBorderSecondary};
       border-inline-start: 2px solid ${token.colorBorderSecondary};
       border-end-start-radius: 8px;
@@ -47,7 +46,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }, index: number) => ({
     margin-block: 2px;
     padding-block: 4px;
     padding-inline: 8px;
-
     border-radius: ${token.borderRadius}px;
 
     &:hover {

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/TopicItem/index.tsx

@@ -25,7 +25,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     margin-block: 2px;
     margin-inline: 8px;
     padding: 8px;
-
     border-radius: ${token.borderRadius}px;
 
     &.topic-item {

package/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Tags.tsx

@@ -4,10 +4,9 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import ModelSwitchPanel from '@/features/ModelSwitchPanel';
+import { useModelSupportToolUse } from '@/hooks/useModelSupportToolUse';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
-import { useUserStore } from '@/store/user';
-import { modelProviderSelectors } from '@/store/user/selectors';
 
 import PluginTag from '../../../features/PluginTag';
 import KnowledgeTag from './KnowledgeTag';
@@ -20,7 +19,7 @@ const TitleTags = memo(() => {
   const plugins = useAgentStore(agentSelectors.currentAgentPlugins, isEqual);
   const enabledKnowledge = useAgentStore(agentSelectors.currentEnabledKnowledge, isEqual);
 
-  const showPlugin = useUserStore(modelProviderSelectors.isModelEnabledFunctionCall(model));
+  const showPlugin = useModelSupportToolUse(model);
 
   return (
     <Flexbox align={'center'} horizontal>

package/src/app/(main)/chat/(workspace)/_layout/Desktop/index.tsx

@@ -1,5 +1,8 @@
+import { Suspense } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import BrandTextLoading from '@/components/Loading/BrandTextLoading';
+
 import { LayoutProps } from '../type';
 import ChatHeader from './ChatHeader';
 import HotKeys from './HotKeys';
@@ -24,7 +27,9 @@ const Layout = ({ children, topic, conversation, portal }: LayoutProps) => {
           {conversation}
         </Flexbox>
         {children}
-        <Portal>{portal}</Portal>
+        <Portal>
+          <Suspense fallback={<BrandTextLoading />}>{portal}</Suspense>
+        </Portal>
         <TopicPanel>{topic}</TopicPanel>
       </Flexbox>
       <HotKeys />

package/src/app/(main)/chat/@session/features/SessionListContent/CollapseGroup/index.tsx

@@ -8,8 +8,8 @@ const useStyles = createStyles(({ css, prefixCls, token, responsive }) => ({
   container: css`
     .${prefixCls}-collapse-header {
       padding-inline: 16px 10px !important;
-      color: ${token.colorTextDescription} !important;
       border-radius: ${token.borderRadius}px !important;
+      color: ${token.colorTextDescription} !important;
 
       ${responsive.mobile} {
         border-radius: 0 !important;

package/src/app/(main)/chat/features/Migration/Start.tsx

@@ -31,8 +31,8 @@ const useStyles = createStyles(({ css, token, isDarkMode, responsive }) => ({
   iconCtn: css`
     width: 72px;
     height: 72px;
-    background: ${isDarkMode ? token.blue1 : token.geekblue1};
     border-radius: 50%;
+    background: ${isDarkMode ? token.blue1 : token.geekblue1};
   `,
   intro: css`
     ${responsive.mobile} {

package/src/app/(main)/discover/(detail)/assistant/[slug]/features/ConversationExample/TopicList.tsx

@@ -6,8 +6,8 @@ import { ExampleTopic } from '@/types/discover';
 
 const useStyles = createStyles(({ css, token }) => ({
   active: css`
-    background: ${token.colorBgElevated};
     border-inline-start: 4px solid ${token.colorFill};
+    background: ${token.colorBgElevated};
     box-shadow: 0 0 0 1px ${token.colorFillSecondary} inset;
   `,
   container: css`
@@ -20,15 +20,16 @@ const useStyles = createStyles(({ css, token }) => ({
   item: css`
     cursor: pointer;
 
-    background: ${token.colorFillTertiary};
     border-inline-start: 4px solid transparent;
     border-radius: ${token.borderRadiusLG}px;
 
+    background: ${token.colorFillTertiary};
+
     transition: all 0.2s ${token.motionEaseInOut};
 
     &:hover {
-      background: ${token.colorBgElevated};
       border-inline-start: 4px solid ${token.colorFill};
+      background: ${token.colorBgElevated};
       box-shadow: 0 0 0 1px ${token.colorFillSecondary} inset;
     }
   `,

package/src/app/(main)/discover/(detail)/assistant/[slug]/features/Header.tsx

@@ -19,9 +19,9 @@ import Back from '../../../features/Back';
 
 export const useStyles = createStyles(({ css, token }) => ({
   tag: css`
+    border: none;
     color: ${token.colorTextSecondary};
     background: ${token.colorFillSecondary};
-    border: none;
   `,
   time: css`
     font-size: 12px;

package/src/app/(main)/discover/(detail)/features/ShareButton.tsx

@@ -17,9 +17,10 @@ const useStyles = createStyles(({ css, token }) => {
     banner: css`
       overflow: hidden;
 
-      background: ${token.colorBgContainer};
       border: 1px solid ${token.colorBorderSecondary};
       border-radius: ${token.borderRadiusLG}px;
+
+      background: ${token.colorBgContainer};
       box-shadow: ${token.boxShadowTertiary};
     `,
     copy: css`

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/Header.tsx

@@ -15,9 +15,9 @@ import Back from '../../../features/Back';
 
 export const useStyles = createStyles(({ css, token }) => ({
   tag: css`
+    border: none;
     color: ${token.colorTextSecondary};
     background: ${token.colorFillSecondary};
-    border: none;
   `,
   time: css`
     font-size: 12px;

package/src/app/(main)/discover/(detail)/plugin/[slug]/features/Header.tsx

@@ -18,9 +18,9 @@ import Back from '../../../features/Back';
 
 export const useStyles = createStyles(({ css, token }) => ({
   tag: css`
+    border: none;
     color: ${token.colorTextSecondary};
     background: ${token.colorFillSecondary};
-    border: none;
   `,
   time: css`
     font-size: 12px;

package/src/app/(main)/discover/(detail)/provider/[slug]/features/Header.tsx

@@ -14,9 +14,9 @@ import Back from '../../../features/Back';
 
 export const useStyles = createStyles(({ css, token }) => ({
   tag: css`
+    border: none;
     color: ${token.colorTextSecondary};
     background: ${token.colorFillSecondary};
-    border: none;
   `,
   time: css`
     font-size: 12px;

package/src/app/(main)/discover/(list)/_layout/Desktop/Nav.tsx

@@ -28,7 +28,6 @@ export const useStyles = createStyles(({ css, token }) => ({
 
     height: auto;
     padding-block: 4px;
-
     border-color: transparent;
 
     transition: all 0.3s ${token.motionEaseInOut};

package/src/app/(main)/discover/(list)/assistants/features/Card.tsx

@@ -34,9 +34,9 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 
     height: 100%;
     min-height: 162px;
+    border-radius: ${token.borderRadiusLG}px;
 
     background: ${token.colorBgContainer};
-    border-radius: ${token.borderRadiusLG}px;
     box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
       inset;
 

package/src/app/(main)/discover/(list)/models/features/Card.tsx

@@ -24,9 +24,9 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 
     height: 100%;
     min-height: 162px;
+    border-radius: ${token.borderRadiusLG}px;
 
     background: ${token.colorBgContainer};
-    border-radius: ${token.borderRadiusLG}px;
     box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
       inset;
 

package/src/app/(main)/discover/(list)/plugins/features/Card.tsx

@@ -33,9 +33,9 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 
     height: 100%;
     min-height: 162px;
+    border-radius: ${token.borderRadiusLG}px;
 
     background: ${token.colorBgContainer};
-    border-radius: ${token.borderRadiusLG}px;
     box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
       inset;
 

package/src/app/(main)/discover/(list)/providers/features/Card.tsx

@@ -30,9 +30,9 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 
     height: 100%;
     min-height: 162px;
+    border-radius: ${token.borderRadiusLG}px;
 
     background: ${token.colorBgContainer};
-    border-radius: ${token.borderRadiusLG}px;
     box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
       inset;
 

package/src/app/(main)/discover/components/GridLoadingCard.tsx

@@ -14,8 +14,9 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 
     overflow: hidden;
 
-    background: ${token.colorBgContainer};
     border-radius: ${token.borderRadiusLG}px;
+
+    background: ${token.colorBgContainer};
     box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
       inset;
 

package/src/app/(main)/discover/components/Title.tsx

@@ -19,13 +19,13 @@ const useStyles = createStyles(({ css, responsive, token }) => ({
 
     padding-block: 0.1em;
     padding-inline: 0.3em;
+    border-radius: ${token.borderRadius}px;
 
     font-size: 18px;
     font-weight: 500;
     color: ${token.colorTextSecondary};
 
     background: ${token.colorFillSecondary};
-    border-radius: ${token.borderRadius}px;
     ${responsive.mobile} {
       font-size: 14px;
     }

package/src/app/(main)/files/(content)/@menu/features/KnowledgeBase/EmptyStatus.tsx

@@ -16,8 +16,8 @@ const useStyles = createStyles(({ css, token }) => ({
     kbd {
       margin-inline: 2px;
       padding-inline: 6px;
-      background: ${token.colorFillTertiary};
       border-radius: 4px;
+      background: ${token.colorFillTertiary};
     }
   `,
 }));

package/src/app/(main)/files/(content)/@menu/features/KnowledgeBase/Item/index.tsx

@@ -20,7 +20,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     margin-inline: 8px;
     padding-block: 4px;
     padding-inline: 8px;
-
     border-radius: ${token.borderRadius}px;
 
     &.${knowledgeItemClass} {