mcp server modal

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

@@ -0,0 +1,83 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import Textarea from '@/app/components/base/textarea'
+import Divider from '@/app/components/base/divider'
+import MCPServerParamItem from '@/app/components/tools/mcp/mcp-server-param-item'
+import cn from '@/utils/classnames'
+
+export type ModalProps = {
+  latestParams?: any
+  data?: any
+  show: boolean
+  onConfirm: () => void
+  onHide: () => void
+}
+
+const MCPServerModal = ({
+  // latestParams,
+  data,
+  show,
+  onConfirm,
+  onHide,
+}: ModalProps) => {
+  const { t } = useTranslation()
+
+  const [description, setDescription] = React.useState('')
+
+  const submit = async () => {
+    await onConfirm()
+    onHide()
+  }
+
+  return (
+    <Modal
+      isShow={show}
+      onClose={onHide}
+      className={cn('relative !max-w-[520px] !p-0')}
+    >
+      <div className='absolute right-5 top-5 z-10 cursor-pointer p-1.5' onClick={onHide}>
+        <RiCloseLine className='h-5 w-5 text-text-tertiary' />
+      </div>
+      <div className='title-2xl-semi-bold relative p-6 pb-3 text-xl text-text-primary'>
+        {!data ? t('tools.mcp.server.modal.addTitle') : t('tools.mcp.server.modal.editTitle')}
+      </div>
+      <div className='space-y-5 px-6 py-3'>
+        <div className='space-y-0.5'>
+          <div className='flex h-6 items-center gap-1'>
+            <div className='system-sm-medium text-text-secondary'>{t('tools.mcp.server.modal.description')}</div>
+            <div className='system-xs-regular text-text-destructive-secondary'>*</div>
+          </div>
+          <Textarea
+            className='h-[96px] resize-none'
+            value={description}
+            placeholder={t('tools.mcp.server.modal.descriptionPlaceholder')}
+            onChange={e => setDescription(e.target.value)}
+          ></Textarea>
+        </div>
+        <div>
+          <div className='mb-1 flex items-center gap-2'>
+            <div className='system-xs-medium-uppercase text-text-primary'>{t('tools.mcp.server.modal.parameters')}</div>
+            <Divider type='horizontal' className='!m-0 !h-px grow bg-divider-subtle' />
+          </div>
+          <div className='body-xs-regular mb-2 text-text-tertiary'>{t('tools.mcp.server.modal.parametersTip')}</div>
+          <div className='space-y-3'>
+            <MCPServerParamItem
+              data={{}}
+              onChange={() => ({})}
+            />
+          </div>
+        </div>
+      </div>
+      <div className='flex flex-row-reverse p-6 pt-5'>
+        <Button disabled={!description } className='ml-2' variant='primary' onClick={submit}>{data ? t('tools.mcp.modal.save') : t('tools.mcp.server.modal.confirm')}</Button>
+        <Button onClick={onHide}>{t('tools.mcp.modal.cancel')}</Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default MCPServerModal

web/app/components/tools/mcp/mcp-server-param-item.tsx

@@ -0,0 +1,35 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Textarea from '@/app/components/base/textarea'
+
+type Props = {
+  data?: any
+  onChange: (value: string) => void
+}
+
+const MCPServerParamItem = ({
+  data,
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='space-y-0.5'>
+      <div className='flex h-6 items-center gap-2'>
+        <div className='system-xs-medium text-text-secondary'>{data.label}</div>
+        <div className='system-xs-medium text-text-quaternary'>·</div>
+        <div className='system-xs-medium text-text-secondary'>{data.name}</div>
+        <div className='system-xs-medium text-text-tertiary'>{data.type}</div>
+      </div>
+      <Textarea
+        className='h-8 resize-none'
+        value={data.value}
+        placeholder={t('tools.mcp.server.modal.parametersPlaceholder')}
+        onChange={e => onChange(e.target.value)}
+      ></Textarea>
+    </div>
+  )
+}
+
+export default MCPServerParamItem

web/app/components/tools/mcp/mcp-service-card.tsx

@@ -19,6 +19,7 @@ import type { AppDetailResponse } from '@/models/app'
 import { useAppContext } from '@/context/app-context'
 import type { AppSSO } from '@/types/app'
 import Indicator from '@/app/components/header/indicator'
+import MCPServerModal from '@/app/components/tools/mcp/mcp-server-modal'
 import cn from '@/utils/classnames'
 
 export type IAppCardProps = {
@@ -53,7 +54,10 @@ function MCPServiceCard({
     // TODO
   }
 
+  const [showMCPServerModal, setShowMCPServerModal] = useState(false)
+
   return (
+    <>
       <div className={cn('w-full max-w-full rounded-xl border-l-[0.5px] border-t border-effects-highlight')}>
         <div className='rounded-xl bg-background-default'>
           <div className='flex w-full flex-col items-start justify-center gap-3 self-stretch border-b-[0.5px] border-divider-subtle p-3'>
@@ -127,6 +131,14 @@ function MCPServiceCard({
           </div>
         </div>
       </div>
+      {showMCPServerModal && (
+        <MCPServerModal
+          show={showMCPServerModal}
+          onConfirm={() => setShowMCPServerModal(false)}
+          onHide={() => setShowMCPServerModal(false)}
+        />
+      )}
+    </>
   )
 }
 

web/i18n/en-US/tools.ts

@@ -199,6 +199,7 @@ const translation = {
       modal: {
         addTitle: 'Add description to enable MCP server',
         editTitle: 'Edit description',
+        description: 'Description',
         descriptionPlaceholder: 'Explain what this tool does and how it should be used by the LLM',
         parameters: 'Parameters',
         parametersTip: 'Add descriptions for each parameter to help the LLM understand their purpose and constraints.',

web/i18n/zh-Hans/tools.ts

@@ -199,6 +199,7 @@ const translation = {
       modal: {
         addTitle: '添加描述以启用 MCP 服务',
         editTitle: '编辑 MCP 服务描述',
+        description: '描述',
         descriptionPlaceholder: '解释此工具的功能以及 LLM 应如何使用它',
         parameters: '参数',
         parametersTip: '为每个参数添加描述，以帮助 LLM 理解其目的和约束条件。',