ngskcloud
/
gcgj-dify-1.7.0
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

detail header

Browse Source
pull/22091/head
jZonG 1 year ago
parent bed412d1e2
commit af311432ec
5 changed files with 103 additions and 12 deletions
Show Stats Download Patch File Download Diff File

89
web/app/components/tools/mcp/detail/content.tsx
Unescape Escape View File

@ -0,0 +1,89 @@
'use client'
import React from 'react'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { useAppContext } from '@/context/app-context'
import {
RiCloseLine,
} 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 Toast from '@/app/components/base/toast'
import Indicator from '@/app/components/header/indicator'
import cn from '@/utils/classnames'
type Props = {
detail?: ToolWithProvider
onUpdate: () => void
onHide: () => void
}
const MCPDetailContent: FC<Props> = ({
detail,
// onUpdate,
onHide,
}) => {
const { t } = useTranslation()
const { isCurrentWorkspaceManager } = useAppContext()
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='system-xs-regular mt-0.5 truncate text-text-tertiary' title={detail.server_url}>{detail.server_url}</div>
</div>
<div className='flex gap-1'>
{/* <OperationDropdown
source={detail.source}
onInfo={showPluginInfo}
onCheckVersion={handleUpdate}
onRemove={showDeleteConfirm}
detailUrl={detailUrl}
/> */}
<ActionButton onClick={onHide}>
<RiCloseLine className='h-4 w-4' />
</ActionButton>
</div>
</div>
<div className='mt-5'>
{detail.is_team_authorization && (
<Button
variant='secondary'
className='w-full'
// onClick={() => setShowSettingAuth(true)}
disabled={!isCurrentWorkspaceManager}
>
<Indicator className='mr-2' color={'green'} />
{t('tools.auth.authorized')}
</Button>
)}
{detail.is_team_authorization && (
<Button
variant='primary'
className='w-full'
// onClick={() => setShowSettingAuth(true)}
disabled={!isCurrentWorkspaceManager}
>{t('tools.auth.unauthorized')}</Button>
)}
</div>
</div>
<div className='grow overflow-y-auto'>
TOOL list
</div>
</>
)
}
export default MCPDetailContent

14
web/app/components/tools/mcp/provider-detail.tsx → web/app/components/tools/mcp/detail/provider-detail.tsx
Unescape Escape View File

@ -2,8 +2,9 @@
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'
import type { ToolWithProvider } from '../../workflow/types'
type Props = {
detail?: ToolWithProvider
@ -36,12 +37,11 @@ const MCPDetailPanel: FC<Props> = ({
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 && (
<>
<div>HEADER</div>
<div className='grow overflow-y-auto'>
TOOL list
</div>
</>
<MCPDetailContent
detail={detail}
onHide={onHide}
onUpdate={handleUpdate}
/>
)}
</Drawer>
)

2
web/app/components/tools/mcp/index.tsx
Unescape Escape View File

@ -2,7 +2,7 @@
import { useMemo, useState } from 'react'
import NewMCPCard from './create-card'
import MCPCard from './provider-card'
import MCPDetailPanel from './provider-detail'
import MCPDetailPanel from './detail/provider-detail'
import { useAllMCPTools, useInvalidateAllMCPTools } from '@/service/use-tools'
import type { ToolWithProvider } from '@/app/components/workflow/types'
import cn from '@/utils/classnames'

6
web/app/components/tools/mcp/mock.ts
Unescape Escape View File

@ -110,7 +110,7 @@ export const listData = [
id: 'fdjklajfkljadslf111',
author: 'KVOJJJin',
name: 'GOGOGO',
icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_large/en_US',
icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_small/en_US',
server_url: 'https://mcp.composio.dev/notion/****/abc',
type: 'mcp',
is_team_authorization: true,
@ -125,7 +125,7 @@ export const listData = [
id: 'fdjklajfkljadslf222',
author: 'KVOJJJin',
name: 'GOGOGO2',
icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_large/en_US',
icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_small/en_US',
server_url: 'https://mcp.composio.dev/notion/****/abc',
type: 'mcp',
is_team_authorization: false,
@ -140,7 +140,7 @@ export const listData = [
id: 'fdjklajfkljadslf333',
author: 'KVOJJJin',
name: 'GOGOGO3',
icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_large/en_US',
icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_small/en_US',
server_url: 'https://mcp.composio.dev/notion/****/abc',
type: 'mcp',
is_team_authorization: true,

4
web/app/components/tools/mcp/provider-card.tsx
Unescape Escape View File

@ -38,7 +38,9 @@ const MCPCard = ({
)}
>
<div className='group flex grow items-center gap-3 rounded-t-xl p-4'>
<Icon className='shrink-0' src={data.icon} />
<div className='shrink-0 overflow-hidden rounded-xl border border-components-panel-border-subtle'>
<Icon src={data.icon} />
</div>
<div className='grow'>
<div className='system-md-semibold mb-1 truncate text-text-secondary' title={data.name}>{data.name}</div>
<div className='flex items-center gap-2'>

Write Preview
Loading…
Cancel
Save