Merge branch 'feat/mcp-frontend' into deploy/dev

web/app/components/tools/mcp/modal.tsx

@@ -57,6 +57,7 @@ const MCPModal = ({
   const { t } = useTranslation()
 
   const originalServerUrl = data?.server_url
+  const originalServerID = data?.server_identifier
   const [url, setUrl] = React.useState(data?.server_url || '')
   const [name, setName] = React.useState(data?.name || '')
   const [appIcon, setAppIcon] = useState<AppIconSelection>(getIcon(data))
@@ -145,7 +146,7 @@ const MCPModal = ({
             />
             {originalServerUrl && originalServerUrl !== url && (
               <div className='mt-1 flex h-5 items-center'>
-                <span className='body-xs-regular text-text-warning'>{t('tools.mcp.modal.warning')}</span>
+                <span className='body-xs-regular text-text-warning'>{t('tools.mcp.modal.serverUrlWarning')}</span>
               </div>
             )}
           </div>
@@ -170,9 +171,9 @@ const MCPModal = ({
                 className='relative cursor-pointer rounded-2xl'
                 coverElement={
                   isHovering
-                  ? (<div className='absolute inset-0 flex items-center justify-center overflow-hidden rounded-2xl bg-background-overlay-alt'>
-                  <RiEditLine className='size-6 text-text-primary-on-surface' />
-                </div>) : null
+                    ? (<div className='absolute inset-0 flex items-center justify-center overflow-hidden rounded-2xl bg-background-overlay-alt'>
+                      <RiEditLine className='size-6 text-text-primary-on-surface' />
+                    </div>) : null
                 }
                 onClick={() => { setShowAppIconPicker(true) }}
               />
@@ -188,6 +189,11 @@ const MCPModal = ({
               onChange={e => setServerIdentifier(e.target.value)}
               placeholder={t('tools.mcp.modal.serverIdentifierPlaceholder')}
             />
+            {originalServerID && originalServerID !== serverIdentifier && (
+              <div className='mt-1 flex h-5 items-center'>
+                <span className='body-xs-regular text-text-warning'>{t('tools.mcp.modal.serverIdentifierWarning')}</span>
+              </div>
+            )}
           </div>
         </div>
         <div className='flex flex-row-reverse pt-5'>

web/i18n/en-US/tools.ts

@@ -167,11 +167,12 @@ const translation = {
       name: 'Name & Icon',
       namePlaceholder: 'Name your MCP server',
       serverUrl: 'Server URL',
-      serverUrlPlaceholder: 'URL to server endpiont',
-      warning: 'Updating the server address may affect applications currently using this MCP',
+      serverUrlPlaceholder: 'URL to server endpoint',
+      serverUrlWarning: 'Updating the server address may disrupt applications that depend on this server',
       serverIdentifier: 'Server Identifier',
-      serverIdentifierTip: 'This text will be displayed on the client side, providing basic guidance on how to use the application',
-      serverIdentifierPlaceholder: 'Unique identifier for this server',
+      serverIdentifierTip: 'Unique identifier for the MCP server ID within the workspace. Lowercase letters, numbers, underscores, and hyphens only. Up to 24 characters.',
+      serverIdentifierPlaceholder: 'Unique identifier, e.g., my-mcp-server',
+      serverIdentifierWarning: 'The server won’t be recognized by existing apps after an ID change',
       cancel: 'Cancel',
       save: 'Save',
       confirm: 'Add & Authorize',

web/i18n/zh-Hans/tools.ts

@@ -168,10 +168,11 @@ const translation = {
       namePlaceholder: '命名你的 MCP 服务',
       serverUrl: '服务端点 URL',
       serverUrlPlaceholder: '服务端点的 URL',
-      warning: '修改服务端点 URL 可能会影响使用当前 MCP 的应用。',
+      serverUrlWarning: '修改服务端点 URL 可能会影响使用当前 MCP 的应用。',
       serverIdentifier: '服务器标识符',
       serverIdentifierTip: '此文本将在客户端显示，为如何使用应用程序提供基本指导',
       serverIdentifierPlaceholder: '此服务器的唯一标识符',
+      serverIdentifierWarning: '更改服务器标识符后，现有应用将无法识别此服务器',
       cancel: '取消',
       save: '保存',
       confirm: '添加并授权',