feat(ai): add security disclosure section to MCP services settings

- Introduced a new security disclosure section in the MCPServicesSection component, providing users with information about the secure storage of OAuth authentication tokens.
- Updated localization files to include titles and descriptions for the new security disclosure section in both English and Chinese.

These enhancements improve user awareness of security measures related to MCP services, contributing to a more informed user experience.

Signed-off-by: Innei <tukon479@gmail.com>

apps/desktop/layer/renderer/src/modules/settings/tabs/ai.tsx

@@ -1,4 +1,5 @@
 import { Divider } from "@follow/components/ui/divider/Divider.js"
+import { Label } from "@follow/components/ui/label/index.js"
 import { useTranslation } from "react-i18next"
 
 import { setAISetting, useAISettingValue } from "~/atoms/settings/ai"
@@ -62,8 +63,29 @@ export const SettingAI = () => {
             value: "Task Scheduling",
           },
           TaskSchedulingSection,
+          AISecurityDisclosureSection,
         ]}
       />
     </div>
   )
 }
+
+const AISecurityDisclosureSection = () => {
+  const { t } = useTranslation("ai")
+
+  return (
+    <div className="border-fill-secondary mt-6 border-t pt-4">
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <i className="i-mgc-safety-certificate-cute-re text-green size-4" />
+          <Label className="text-text text-sm font-medium">
+            {t("integration.mcp.security.title")}
+          </Label>
+        </div>
+        <p className="text-text-secondary text-xs leading-relaxed">
+          {t("integration.mcp.security.description")}
+        </p>
+      </div>
+    </div>
+  )
+}

apps/desktop/layer/renderer/src/modules/settings/tabs/ai/mcp/MCPServicesSection.tsx

@@ -273,7 +273,7 @@ export const MCPServicesSection = () => {
             </div>
           </div>
 
-          {mcpServices.length === 0 && (
+          {mcpServices.length === 0 && !isLoading && (
             <div className="py-8 text-center">
               <div className="bg-fill-secondary mx-auto mb-3 flex size-12 items-center justify-center rounded-full">
                 <i className="i-mgc-plugin-2-cute-re text-text size-6" />

locales/ai/en.json

@@ -15,6 +15,8 @@
   "features.title": "Features",
   "integration.mcp.description": "Connect to MCP-compatible services that extend AI capabilities through secure OAuth integration",
   "integration.mcp.enabled": "Enable MCP Services",
+  "integration.mcp.security.description": "OAuth authentication tokens are securely stored using AES-GCM-256 encryption to protect your credentials and ensure data privacy.",
+  "integration.mcp.security.title": "Security Disclosure",
   "integration.mcp.service.active": "Active",
   "integration.mcp.service.added": "MCP service added successfully",
   "integration.mcp.service.auth_message": "This service requires OAuth authorization. Click 'Open Authorization' to proceed with authentication in a new window.",

locales/ai/zh-CN.json

@@ -13,6 +13,49 @@
   "export_error": "导出对话失败",
   "export_success": "对话导出成功",
   "features.title": "功能",
+  "integration.mcp.description": "通过安全的OAuth集成连接到兼容MCP的服务，扩展AI功能",
+  "integration.mcp.enabled": "启用MCP服务",
+  "integration.mcp.security.description": "OAuth认证令牌使用AES-GCM-256加密技术安全存储，以保护您的凭据并确保数据隐私。",
+  "integration.mcp.security.title": "安全声明",
+  "integration.mcp.service.active": "活跃",
+  "integration.mcp.service.added": "MCP服务添加成功",
+  "integration.mcp.service.auth_message": "此服务需要OAuth授权。点击\"打开授权\"以在新窗口中进行身份验证。",
+  "integration.mcp.service.auth_required": "需要授权",
+  "integration.mcp.service.auth_window_opened": "授权窗口已打开。请完成身份验证。",
+  "integration.mcp.service.baseUrl": "服务基础URL",
+  "integration.mcp.service.baseUrl_placeholder": "例如：https://api.example.com",
+  "integration.mcp.service.connect": "连接",
+  "integration.mcp.service.connected": "已连接",
+  "integration.mcp.service.connected_success": "成功连接到MCP服务",
+  "integration.mcp.service.connecting": "连接中...",
+  "integration.mcp.service.connection_failed": "连接MCP服务失败",
+  "integration.mcp.service.degraded": "降级",
+  "integration.mcp.service.deleted": "MCP服务删除成功",
+  "integration.mcp.service.disconnect": "断开连接",
+  "integration.mcp.service.disconnected": "已断开连接",
+  "integration.mcp.service.discover": "发现服务",
+  "integration.mcp.service.discovery_failed": "发现服务端点失败",
+  "integration.mcp.service.endpoints": "OAuth端点",
+  "integration.mcp.service.error": "连接错误",
+  "integration.mcp.service.healthy": "健康",
+  "integration.mcp.service.inactive": "非活跃",
+  "integration.mcp.service.name": "服务名称",
+  "integration.mcp.service.name_placeholder": "例如：GitHub工具、Slack集成",
+  "integration.mcp.service.open_auth": "打开授权",
+  "integration.mcp.service.open_manually": "打开授权",
+  "integration.mcp.service.popup_blocked": "授权弹窗被浏览器阻止",
+  "integration.mcp.service.reconnect": "重新连接",
+  "integration.mcp.service.scopes": "所需权限范围",
+  "integration.mcp.service.unhealthy": "不健康",
+  "integration.mcp.service.updated": "MCP服务更新成功",
+  "integration.mcp.service.validation.baseUrl_required": "基础URL为必填项",
+  "integration.mcp.service.validation.invalid_url": "请输入有效的URL",
+  "integration.mcp.service.validation.name_required": "服务名称为必填项",
+  "integration.mcp.services.add": "添加服务",
+  "integration.mcp.services.empty.description": "连接MCP服务以通过外部工具、API和数据源扩展AI功能。",
+  "integration.mcp.services.empty.title": "未连接MCP服务",
+  "integration.mcp.services.title": "MCP服务",
+  "integration.title": "集成",
   "personalize.description": "介绍一下您自己，以获得个性化的AI响应",
   "personalize.prompt.help": "这有助于AI根据您的偏好提供个性化响应。",
   "personalize.prompt.label": "个人提示",
@@ -93,6 +136,11 @@
   "tasks.validation.prompt_required": "指令为必填项",
   "tasks.validation.title_max": "标题必须少于 50 个字符",
   "tasks.validation.title_required": "标题为必填项",
+  "token_usage.description": "监控您的AI令牌消耗和限制",
+  "token_usage.resets_at": "重置时间",
+  "token_usage.title": "令牌使用情况",
+  "token_usage.tokens_remaining": "剩余令牌",
+  "token_usage.tokens_used": "已使用{{used}} / {{total}}令牌",
   "welcome_description": "我在这里帮助您处理阅读需求。今天我能为您做些什么？",
   "welcome_description_contextual": "让我们一起讨论这个条目"
 }