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,80 +54,91 @@ 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'>
-          <div className='flex w-full items-center gap-3 self-stretch'>
-            <div className='flex grow items-center'>
-              <div className='mr-3 shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-500 p-1 shadow-md'>
-                <Mcp className='h-4 w-4 text-text-primary-on-surface' />
+    <>
+      <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'>
+            <div className='flex w-full items-center gap-3 self-stretch'>
+              <div className='flex grow items-center'>
+                <div className='mr-3 shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-500 p-1 shadow-md'>
+                  <Mcp className='h-4 w-4 text-text-primary-on-surface' />
+                </div>
+                <div className="group w-full">
+                  <div className="min-w-0 overflow-hidden text-ellipsis break-normal">
+                    {t('tools.mcp.server.title')}
+                  </div>
+                </div>
               </div>
-              <div className="group w-full">
-                <div className="min-w-0 overflow-hidden text-ellipsis break-normal">
-                  {t('tools.mcp.server.title')}
+              <div className='flex items-center gap-1'>
+                <Indicator color={runningStatus ? 'green' : 'yellow'} />
+                <div className={`${runningStatus ? 'text-text-success' : 'text-text-warning'} system-xs-semibold-uppercase`}>
+                  {runningStatus
+                    ? t('appOverview.overview.status.running')
+                    : t('appOverview.overview.status.disable')}
                 </div>
               </div>
+              <Switch defaultValue={runningStatus} onChange={onChangeStatus} disabled={toggleDisabled} />
             </div>
-            <div className='flex items-center gap-1'>
-              <Indicator color={runningStatus ? 'green' : 'yellow'} />
-              <div className={`${runningStatus ? 'text-text-success' : 'text-text-warning'} system-xs-semibold-uppercase`}>
-                {runningStatus
-                  ? t('appOverview.overview.status.running')
-                  : t('appOverview.overview.status.disable')}
+            <div className='flex flex-col items-start justify-center self-stretch'>
+              <div className="system-xs-medium pb-1 text-text-tertiary">
+                {t('tools.mcp.server.url')}
               </div>
-            </div>
-            <Switch defaultValue={runningStatus} onChange={onChangeStatus} disabled={toggleDisabled} />
-          </div>
-          <div className='flex flex-col items-start justify-center self-stretch'>
-            <div className="system-xs-medium pb-1 text-text-tertiary">
-              {t('tools.mcp.server.url')}
-            </div>
-            <div className="inline-flex h-9 w-full items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 pl-2">
-              <div className="flex h-4 min-w-0 flex-1 items-start justify-start gap-2 px-1">
-                <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium text-text-secondary">
-                  {appUrl}
+              <div className="inline-flex h-9 w-full items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 pl-2">
+                <div className="flex h-4 min-w-0 flex-1 items-start justify-start gap-2 px-1">
+                  <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium text-text-secondary">
+                    {appUrl}
+                  </div>
                 </div>
-              </div>
-              <CopyFeedback
-                content={appUrl}
-                className={'!size-6'}
-              />
-              <Divider type="vertical" className="!mx-0.5 !h-3.5 shrink-0" />
-              {/* button copy link/ button regenerate */}
-              {showConfirmDelete && (
-                <Confirm
-                  type='warning'
-                  title={t('appOverview.overview.appInfo.regenerate')}
-                  content={t('tools.mcp.server.reGen')}
-                  isShow={showConfirmDelete}
-                  onConfirm={() => {
-                    onGenCode()
-                    setShowConfirmDelete(false)
-                  }}
-                  onCancel={() => setShowConfirmDelete(false)}
+                <CopyFeedback
+                  content={appUrl}
+                  className={'!size-6'}
                 />
-              )}
-              {isCurrentWorkspaceManager && (
-                <Tooltip
-                  popupContent={t('appOverview.overview.appInfo.regenerate') || ''}
-                >
-                  <div
-                    className="cursor-pointer rounded-md p-1 hover:bg-state-base-hover"
-                    onClick={() => setShowConfirmDelete(true)}
+                <Divider type="vertical" className="!mx-0.5 !h-3.5 shrink-0" />
+                {/* button copy link/ button regenerate */}
+                {showConfirmDelete && (
+                  <Confirm
+                    type='warning'
+                    title={t('appOverview.overview.appInfo.regenerate')}
+                    content={t('tools.mcp.server.reGen')}
+                    isShow={showConfirmDelete}
+                    onConfirm={() => {
+                      onGenCode()
+                      setShowConfirmDelete(false)
+                    }}
+                    onCancel={() => setShowConfirmDelete(false)}
+                  />
+                )}
+                {isCurrentWorkspaceManager && (
+                  <Tooltip
+                    popupContent={t('appOverview.overview.appInfo.regenerate') || ''}
                   >
-                    <RiLoopLeftLine className={cn('h-4 w-4 text-text-tertiary hover:text-text-secondary', genLoading && 'animate-spin')}/>
-                  </div>
-                </Tooltip>
-              )}
+                    <div
+                      className="cursor-pointer rounded-md p-1 hover:bg-state-base-hover"
+                      onClick={() => setShowConfirmDelete(true)}
+                    >
+                      <RiLoopLeftLine className={cn('h-4 w-4 text-text-tertiary hover:text-text-secondary', genLoading && 'animate-spin')}/>
+                    </div>
+                  </Tooltip>
+                )}
+              </div>
             </div>
           </div>
-        </div>
-        <div className='flex items-center gap-1 self-stretch p-3'>
-          <Button size='small' variant='ghost'>{t('tools.mcp.server.addDescription')}</Button>
+          <div className='flex items-center gap-1 self-stretch p-3'>
+            <Button size='small' variant='ghost'>{t('tools.mcp.server.addDescription')}</Button>
+          </div>
         </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 理解其目的和约束条件。',