dify

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

@@ -0,0 +1,307 @@
+'use client'
+import React, { useCallback, useEffect } from 'react'
+import type { FC } from 'react'
+import { useBoolean } from 'ahooks'
+import copy from 'copy-to-clipboard'
+import { useTranslation } from 'react-i18next'
+import { useAppContext } from '@/context/app-context'
+import {
+  RiCloseLine,
+  RiLoader2Line,
+  RiLoopLeftLine,
+} from '@remixicon/react'
+import type { ToolWithProvider } from '../../../workflow/types'
+import Icon from '@/app/components/plugins/card/base/card-icon'
+import ActionButton from '@/app/components/base/action-button'
+import Button from '@/app/components/base/button'
+import Confirm from '@/app/components/base/confirm'
+import Indicator from '@/app/components/header/indicator'
+import Tooltip from '@/app/components/base/tooltip'
+import MCPModal from '../modal'
+import OperationDropdown from './operation-dropdown'
+import ListLoading from './list-loading'
+import ToolItem from './tool-item'
+import {
+  useAuthorizeMCP,
+  useDeleteMCP,
+  useInvalidateMCPTools,
+  useMCPTools,
+  useUpdateMCP,
+  useUpdateMCPTools,
+} from '@/service/use-tools'
+import { openOAuthPopup } from '@/hooks/use-oauth'
+import cn from '@/utils/classnames'
+
+type Props = {
+  detail: ToolWithProvider
+  onUpdate: (isDelete?: boolean) => void
+  onHide: () => void
+  isTriggerAuthorize: boolean
+  onFirstCreate: () => void
+}
+
+const MCPDetailContent: FC<Props> = ({
+  detail,
+  onUpdate,
+  onHide,
+  isTriggerAuthorize,
+  onFirstCreate,
+}) => {
+  const { t } = useTranslation()
+  const { isCurrentWorkspaceManager } = useAppContext()
+
+  const { data, isFetching: isGettingTools } = useMCPTools(detail.is_team_authorization ? detail.id : '')
+  const invalidateMCPTools = useInvalidateMCPTools()
+  const { mutateAsync: updateTools, isPending: isUpdating } = useUpdateMCPTools()
+  const { mutateAsync: authorizeMcp, isPending: isAuthorizing } = useAuthorizeMCP()
+  const toolList = data?.tools || []
+
+  const [isShowUpdateConfirm, {
+    setTrue: showUpdateConfirm,
+    setFalse: hideUpdateConfirm,
+  }] = useBoolean(false)
+
+  const handleUpdateTools = useCallback(async () => {
+    hideUpdateConfirm()
+    if (!detail)
+      return
+    await updateTools(detail.id)
+    invalidateMCPTools(detail.id)
+    onUpdate()
+  }, [detail, hideUpdateConfirm, invalidateMCPTools, onUpdate, updateTools])
+
+  const { mutateAsync: updateMCP } = useUpdateMCP({})
+  const { mutateAsync: deleteMCP } = useDeleteMCP({})
+
+  const [isShowUpdateModal, {
+    setTrue: showUpdateModal,
+    setFalse: hideUpdateModal,
+  }] = useBoolean(false)
+
+  const [isShowDeleteConfirm, {
+    setTrue: showDeleteConfirm,
+    setFalse: hideDeleteConfirm,
+  }] = useBoolean(false)
+
+  const [deleting, {
+    setTrue: showDeleting,
+    setFalse: hideDeleting,
+  }] = useBoolean(false)
+
+  const handleOAuthCallback = useCallback(() => {
+    if (!isCurrentWorkspaceManager)
+      return
+    if (!detail.id)
+      return
+    handleUpdateTools()
+  }, [detail.id, handleUpdateTools, isCurrentWorkspaceManager])
+
+  const handleAuthorize = useCallback(async () => {
+    onFirstCreate()
+    if (!isCurrentWorkspaceManager)
+      return
+    if (!detail)
+      return
+    const res = await authorizeMcp({
+      provider_id: detail.id,
+    })
+    if (res.result === 'success')
+      handleUpdateTools()
+
+    else if (res.authorization_url)
+      openOAuthPopup(res.authorization_url, handleOAuthCallback)
+  }, [onFirstCreate, isCurrentWorkspaceManager, detail, authorizeMcp, handleUpdateTools, handleOAuthCallback])
+
+  const handleUpdate = useCallback(async (data: any) => {
+    if (!detail)
+      return
+    const res = await updateMCP({
+      ...data,
+      provider_id: detail.id,
+    })
+    if ((res as any)?.result === 'success') {
+      hideUpdateModal()
+      onUpdate()
+      handleAuthorize()
+    }
+  }, [detail, updateMCP, hideUpdateModal, onUpdate, handleAuthorize])
+
+  const handleDelete = useCallback(async () => {
+    if (!detail)
+      return
+    showDeleting()
+    const res = await deleteMCP(detail.id)
+    hideDeleting()
+    if ((res as any)?.result === 'success') {
+      hideDeleteConfirm()
+      onUpdate(true)
+    }
+  }, [detail, showDeleting, deleteMCP, hideDeleting, hideDeleteConfirm, onUpdate])
+
+  useEffect(() => {
+    if (isTriggerAuthorize)
+      handleAuthorize()
+  }, [])
+
+  if (!detail)
+    return null
+
+  return (
+    <>
+      <div className={cn('shrink-0 border-b border-divider-subtle bg-components-panel-bg p-4 pb-3')}>
+        <div className='flex'>
+          <div className='shrink-0 overflow-hidden rounded-xl border border-components-panel-border-subtle'>
+            <Icon src={detail.icon} />
+          </div>
+          <div className='ml-3 w-0 grow'>
+            <div className='flex h-5 items-center'>
+              <div className='system-md-semibold truncate text-text-primary' title={detail.name}>{detail.name}</div>
+            </div>
+            <div className='mt-0.5 flex items-center gap-1'>
+              <Tooltip popupContent={t('tools.mcp.identifier')}>
+                <div className='system-xs-regular shrink-0 cursor-pointer text-text-secondary' onClick={() => copy(detail.server_identifier || '')}>{detail.server_identifier}</div>
+              </Tooltip>
+              <div className='system-xs-regular shrink-0 text-text-quaternary'>·</div>
+              <Tooltip popupContent={t('tools.mcp.modal.serverUrl')}>
+                <div className='system-xs-regular truncate text-text-secondary'>{detail.server_url}</div>
+              </Tooltip>
+            </div>
+          </div>
+          <div className='flex gap-1'>
+            <OperationDropdown
+              onEdit={showUpdateModal}
+              onRemove={showDeleteConfirm}
+            />
+            <ActionButton onClick={onHide}>
+              <RiCloseLine className='h-4 w-4' />
+            </ActionButton>
+          </div>
+        </div>
+        <div className='mt-5'>
+          {!isAuthorizing && detail.is_team_authorization && (
+            <Button
+              variant='secondary'
+              className='w-full'
+              onClick={handleAuthorize}
+              disabled={!isCurrentWorkspaceManager}
+            >
+              <Indicator className='mr-2' color={'green'} />
+              {t('tools.auth.authorized')}
+            </Button>
+          )}
+          {!detail.is_team_authorization && !isAuthorizing && (
+            <Button
+              variant='primary'
+              className='w-full'
+              onClick={handleAuthorize}
+              disabled={!isCurrentWorkspaceManager}
+            >
+              {t('tools.mcp.authorize')}
+            </Button>
+          )}
+          {isAuthorizing && (
+            <Button
+              variant='primary'
+              className='w-full'
+              disabled
+            >
+              <RiLoader2Line className={cn('mr-1 h-4 w-4 animate-spin')} />
+              {t('tools.mcp.authorizing')}
+            </Button>
+          )}
+        </div>
+      </div>
+      <div className='flex grow flex-col'>
+        {((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'>
+                {!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>
+            <div className='flex h-full w-full grow flex-col overflow-hidden px-4 pb-4'>
+              <ListLoading />
+            </div>
+          </>
+        )}
+        {!isUpdating && detail.is_team_authorization && !isGettingTools && !toolList.length && (
+          <div className='flex h-full w-full flex-col items-center justify-center'>
+            <div className='system-sm-regular mb-3 text-text-tertiary'>{t('tools.mcp.toolsEmpty')}</div>
+            <Button
+              variant='primary'
+              onClick={handleUpdateTools}
+            >{t('tools.mcp.getTools')}</Button>
+          </div>
+        )}
+        {!isUpdating && !isGettingTools && toolList.length > 0 && (
+          <>
+            <div className='flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2'>
+              <div className='flex h-6 items-center'>
+                {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={showUpdateConfirm}>
+                  <RiLoopLeftLine className='mr-1 h-3.5 w-3.5' />
+                  {t('tools.mcp.update')}
+                </Button>
+              </div>
+            </div>
+            <div className='flex h-0 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>
+          </>
+        )}
+
+        {!isUpdating && !detail.is_team_authorization && (
+          <div className='flex h-full w-full flex-col items-center justify-center'>
+            {!isAuthorizing && <div className='system-md-medium mb-1 text-text-secondary'>{t('tools.mcp.authorizingRequired')}</div>}
+            {isAuthorizing && <div className='system-md-medium mb-1 text-text-secondary'>{t('tools.mcp.authorizing')}</div>}
+            <div className='system-sm-regular text-text-tertiary'>{t('tools.mcp.authorizeTip')}</div>
+          </div>
+        )}
+      </div>
+      {isShowUpdateModal && (
+        <MCPModal
+          data={detail}
+          show={isShowUpdateModal}
+          onConfirm={handleUpdate}
+          onHide={hideUpdateModal}
+        />
+      )}
+      {isShowDeleteConfirm && (
+        <Confirm
+          isShow
+          title={t('tools.mcp.delete')}
+          content={
+            <div>
+              {t('tools.mcp.deleteConfirmTitle', { mcp: detail.name })}
+            </div>
+          }
+          onCancel={hideDeleteConfirm}
+          onConfirm={handleDelete}
+          isLoading={deleting}
+          isDisabled={deleting}
+        />
+      )}
+      {isShowUpdateConfirm && (
+        <Confirm
+          isShow
+          title={t('tools.mcp.toolUpdateConfirmTitle')}
+          content={t('tools.mcp.toolUpdateConfirmContent')}
+          onCancel={hideUpdateConfirm}
+          onConfirm={handleUpdateTools}
+        />
+      )}
+    </>
+  )
+}
+
+export default MCPDetailContent

dify/web/app/components/tools/mcp/detail/list-loading.tsx

@@ -0,0 +1,37 @@
+'use client'
+import React from 'react'
+import cn from '@/utils/classnames'
+
+const ListLoading = () => {
+  return (
+    <div className={cn('space-y-2')}>
+      <div className='space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4'>
+        <div className='h-2 w-[180px] rounded-sm bg-text-quaternary opacity-20'></div>
+        <div className='h-2 rounded-sm bg-text-quaternary opacity-10'></div>
+        <div className='mr-10 h-2 rounded-sm bg-text-quaternary opacity-10'></div>
+      </div>
+      <div className='space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4'>
+        <div className='h-2 w-[148px] rounded-sm bg-text-quaternary opacity-20'></div>
+        <div className='h-2 rounded-sm bg-text-quaternary opacity-10'></div>
+        <div className='mr-10 h-2 rounded-sm bg-text-quaternary opacity-10'></div>
+      </div>
+      <div className='space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4'>
+        <div className='h-2 w-[196px] rounded-sm bg-text-quaternary opacity-20'></div>
+        <div className='h-2 rounded-sm bg-text-quaternary opacity-10'></div>
+        <div className='mr-10 h-2 rounded-sm bg-text-quaternary opacity-10'></div>
+      </div>
+      <div className='space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4'>
+        <div className='h-2 w-[148px] rounded-sm bg-text-quaternary opacity-20'></div>
+        <div className='h-2 rounded-sm bg-text-quaternary opacity-10'></div>
+        <div className='mr-10 h-2 rounded-sm bg-text-quaternary opacity-10'></div>
+      </div>
+      <div className='space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4'>
+        <div className='h-2 w-[180px] rounded-sm bg-text-quaternary opacity-20'></div>
+        <div className='h-2 rounded-sm bg-text-quaternary opacity-10'></div>
+        <div className='mr-10 h-2 rounded-sm bg-text-quaternary opacity-10'></div>
+      </div>
+    </div>
+  )
+}
+
+export default ListLoading

dify/web/app/components/tools/mcp/detail/operation-dropdown.tsx

@@ -0,0 +1,88 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+  RiEditLine,
+  RiMoreFill,
+} from '@remixicon/react'
+import ActionButton from '@/app/components/base/action-button'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import cn from '@/utils/classnames'
+
+type Props = {
+  inCard?: boolean
+  onOpenChange?: (open: boolean) => void
+  onEdit: () => void
+  onRemove: () => void
+}
+
+const OperationDropdown: FC<Props> = ({
+  inCard,
+  onOpenChange,
+  onEdit,
+  onRemove,
+}) => {
+  const { t } = useTranslation()
+  const [open, doSetOpen] = useState(false)
+  const openRef = useRef(open)
+  const setOpen = useCallback((v: boolean) => {
+    doSetOpen(v)
+    openRef.current = v
+    onOpenChange?.(v)
+  }, [doSetOpen])
+
+  const handleTrigger = useCallback(() => {
+    setOpen(!openRef.current)
+  }, [setOpen])
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{
+        mainAxis: !inCard ? -12 : 0,
+        crossAxis: !inCard ? 36 : 0,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={handleTrigger}>
+        <div>
+          <ActionButton size={inCard ? 'l' : 'm'} className={cn(open && 'bg-state-base-hover')}>
+            <RiMoreFill className={cn('h-4 w-4', inCard && 'h-5 w-5')} />
+          </ActionButton>
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-50'>
+        <div className='w-[160px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm'>
+          <div
+            className='flex cursor-pointer items-center rounded-lg px-3 py-1.5 hover:bg-state-base-hover'
+            onClick={() => {
+              onEdit()
+              handleTrigger()
+            }}
+          >
+            <RiEditLine className='h-4 w-4 text-text-tertiary' />
+            <div className='system-md-regular ml-2 text-text-secondary'>{t('tools.mcp.operation.edit')}</div>
+          </div>
+          <div
+            className='group flex cursor-pointer items-center rounded-lg px-3 py-1.5 hover:bg-state-destructive-hover'
+            onClick={() => {
+              onRemove()
+              handleTrigger()
+            }}
+          >
+            <RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover:text-text-destructive-secondary' />
+            <div className='system-md-regular ml-2 text-text-secondary group-hover:text-text-destructive'>{t('tools.mcp.operation.remove')}</div>
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default React.memo(OperationDropdown)

dify/web/app/components/tools/mcp/detail/provider-detail.tsx

@@ -0,0 +1,56 @@
+'use client'
+import React from 'react'
+import type { FC } from 'react'
+import Drawer from '@/app/components/base/drawer'
+import MCPDetailContent from './content'
+import type { ToolWithProvider } from '../../../workflow/types'
+import cn from '@/utils/classnames'
+
+type Props = {
+  detail?: ToolWithProvider
+  onUpdate: () => void
+  onHide: () => void
+  isTriggerAuthorize: boolean
+  onFirstCreate: () => void
+}
+
+const MCPDetailPanel: FC<Props> = ({
+  detail,
+  onUpdate,
+  onHide,
+  isTriggerAuthorize,
+  onFirstCreate,
+}) => {
+  const handleUpdate = (isDelete = false) => {
+    if (isDelete)
+      onHide()
+    onUpdate()
+  }
+
+  if (!detail)
+    return null
+
+  return (
+    <Drawer
+      isOpen={!!detail}
+      clickOutsideNotOpen={false}
+      onClose={onHide}
+      footer={null}
+      mask={false}
+      positionCenter={false}
+      panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
+    >
+      {detail && (
+        <MCPDetailContent
+          detail={detail}
+          onHide={onHide}
+          onUpdate={handleUpdate}
+          isTriggerAuthorize={isTriggerAuthorize}
+          onFirstCreate={onFirstCreate}
+        />
+      )}
+    </Drawer>
+  )
+}
+
+export default MCPDetailPanel

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

@@ -0,0 +1,69 @@
+'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-config/language'
+import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  tool: Tool
+}
+
+const MCPToolItem = ({
+  tool,
+}: Props) => {
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+  const { t } = useTranslation()
+
+  const renderParameters = () => {
+    const parameters = tool.parameters
+
+    if (parameters.length === 0)
+      return null
+
+    return (
+      <div className='mt-2'>
+        <div className='title-xs-semi-bold mb-1 text-text-primary'>{t('tools.mcp.toolItem.parameters')}:</div>
+        <ul className='space-y-1'>
+          {parameters.map((parameter) => {
+            const descriptionContent = parameter.human_description[language] || t('tools.mcp.toolItem.noDescription')
+            return (
+              <li key={parameter.name} className='pl-2'>
+                <span className='system-xs-regular font-bold text-text-secondary'>{parameter.name}</span>
+                <span className='system-xs-regular mr-1 text-text-tertiary'>({parameter.type}):</span>
+                <span className='system-xs-regular text-text-tertiary'>{descriptionContent}</span>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    )
+  }
+
+  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>
+          {renderParameters()}
+        </div>
+      )}
+    >
+      <div
+        className={cn('bg-components-panel-item-bg 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