tool list

web/app/components/tools/mcp/detail/content.tsx

@@ -18,6 +18,7 @@ import Indicator from '@/app/components/header/indicator'
 import MCPModal from '../modal'
 import OperationDropdown from './operation-dropdown'
 import ListLoading from './list-loading'
+import ToolItem from './tool-item'
 import {
   useDeleteMCP,
   useInvalidateMCPTools,
@@ -164,11 +165,12 @@ const MCPDetailContent: FC<Props> = ({
         </div>
       </div>
       <div className='grow'>
-        {detail.is_team_authorization && isGettingTools && (
+        {((detail.is_team_authorization && isGettingTools) || isUpdating) && (
           <>
             <div className='flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2'>
               <div className='flex h-6 items-center'>
-                <div className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.gettingTools')}</div>
+                {!isUpdating && <div className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.gettingTools')}</div>}
+                {isUpdating && <div className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.updateTools')}</div>}
               </div>
               <div></div>
             </div>
@@ -190,7 +192,8 @@ const MCPDetailContent: FC<Props> = ({
           <>
             <div className='flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2'>
               <div className='flex h-6 items-center'>
-                <div className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.gettingTools')}</div>
+                {toolList.length > 1 && <div className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.toolsNum', { count: toolList.length })}</div>}
+                {toolList.length === 1 && <div className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.onlyTool')}</div>}
               </div>
               <div>
                 <Button size='small' onClick={handleUpdateTools}>
@@ -199,24 +202,17 @@ const MCPDetailContent: FC<Props> = ({
                 </Button>
               </div>
             </div>
-            <div className='grow overflow-y-auto'>
-              {/* list */}
-            </div>
-          </>
-        )}
-        {isUpdating && (
-          <>
-            <div className='flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2'>
-              <div className='flex h-6 items-center'>
-                <div className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.updateTools')}</div>
-              </div>
-              <div></div>
-            </div>
-            <div className='flex h-full w-full grow flex-col overflow-hidden px-4 pb-4'>
-              <ListLoading />
+            <div className='flex w-full grow flex-col gap-2 overflow-y-auto px-4 pb-4'>
+              {toolList.map(tool => (
+                <ToolItem
+                  key={`${detail.id}${tool.name}`}
+                  tool={tool}
+                />
+              ))}
             </div>
           </>
         )}
+
         {!detail.is_team_authorization && (
           <div className='flex h-full w-full flex-col items-center justify-center'>
             {!loading && <div className='system-md-medium mb-1 text-text-secondary'>{t('tools.mcp.authorizingRequired')}</div>}

web/app/components/tools/mcp/detail/tool-item.tsx

@@ -0,0 +1,41 @@
+'use client'
+import React from 'react'
+import { useContext } from 'use-context-selector'
+import type { Tool } from '@/app/components/tools/types'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
+
+type Props = {
+  tool: Tool
+}
+
+const MCPToolItem = ({
+  tool,
+}: Props) => {
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+
+  return (
+    <Tooltip
+      key={tool.name}
+      position='left'
+      popupClassName='!p-0 !px-4 !py-3.5 !w-[360px] !border-[0.5px] !border-components-panel-border !rounded-xl !shadow-lg'
+      popupContent={(
+        <div>
+          <div className='title-xs-semi-bold mb-1 text-text-primary'>{tool.label[language]}</div>
+          <div className='body-xs-regular text-text-secondary'>{tool.description[language]}</div>
+        </div>
+      )}
+    >
+      <div
+        className={cn('bg-components-panel-item-bg mb-2 cursor-pointer rounded-xl border-[0.5px] border-components-panel-border-subtle px-4 py-3 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover')}
+      >
+        <div className='system-md-semibold pb-0.5 text-text-secondary'>{tool.label[language]}</div>
+        <div className='system-xs-regular line-clamp-2 text-text-tertiary' title={tool.description[language]}>{tool.description[language]}</div>
+      </div>
+    </Tooltip>
+  )
+}
+export default MCPToolItem

web/i18n/en-US/tools.ts

@@ -188,6 +188,8 @@ const translation = {
     updateTools: 'Updating Tools...',
     toolsEmpty: 'Tools not loaded',
     getTools: 'Get tools',
+    toolsNum: '{{count}} tools included',
+    onlyTool: '1 tool included',
   },
 }
 

web/i18n/zh-Hans/tools.ts

@@ -188,6 +188,8 @@ const translation = {
     updateTools: '更新工具中...',
     toolsEmpty: '工具未加载',
     getTools: '获取工具',
+    toolsNum: '包含 {{count}} 个工具',
+    onlyTool: '包含 1 个工具',
   },
 }