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

feat: add mcp tab and merge tool with server ts define

Browse Source
pull/22091/head
Joel 1 year ago
parent b3faaa3754
commit 347cb2685e
10 changed files with 43 additions and 28 deletions
Show Stats Download Patch File Download Diff File

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

@ -9,6 +9,10 @@ export const listData = [
is_team_authorization: true,
tools: ['aaa', 'bbb'],
update_elapsed_time: 1744793369,
label: {
en_US: 'GOGOGO',
zh_Hans: 'GOGOGO',
},
},
{
id: 'fdjklajfkljadslf222',
@ -20,6 +24,10 @@ export const listData = [
is_team_authorization: false,
tools: [],
update_elapsed_time: 1744793369,
label: {
en_US: 'GOGOGO2',
zh_Hans: 'GOGOGO2',
},
},
{
id: 'fdjklajfkljadslf333',
@ -31,5 +39,9 @@ export const listData = [
is_team_authorization: true,
tools: ['aaa', 'bbb'],
update_elapsed_time: 1744793369,
label: {
en_US: 'GOGOGO3',
zh_Hans: 'GOGOGO3',
},
},
]

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

@ -9,13 +9,13 @@ import { RiHammerFill } from '@remixicon/react'
import Indicator from '@/app/components/header/indicator'
import Icon from '@/app/components/plugins/card/base/card-icon'
import { useFormatTimeFromNow } from './hooks'
import type { MCPProvider } from '@/app/components/tools/types'
import type { ToolWithProvider } from '../../workflow/types'
import cn from '@/utils/classnames'
type Props = {
currentProvider?: MCPProvider
data: MCPProvider
handleSelect: (provider: MCPProvider) => void
currentProvider?: ToolWithProvider
data: ToolWithProvider
handleSelect: (provider: ToolWithProvider) => void
}
const MCPCard = ({
@ -52,7 +52,7 @@ const MCPCard = ({
)}
</div>
<div className='system-xs-regular text-divider-deep'>/</div>
<div className='system-xs-regular truncate text-text-tertiary'>{`${t('tools.mcp.updateTime')} ${formatTimeFromNow(data.update_elapsed_time * 1000)}`}</div>
<div className='system-xs-regular truncate text-text-tertiary'>{`${t('tools.mcp.updateTime')} ${formatTimeFromNow(data.update_elapsed_time! * 1000)}`}</div>
</div>
</div>
</div>

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

@ -2,11 +2,11 @@
import React from 'react'
import type { FC } from 'react'
import Drawer from '@/app/components/base/drawer'
import type { MCPProvider } from '@/app/components/tools/types'
import cn from '@/utils/classnames'
import type { ToolWithProvider } from '../../workflow/types'
type Props = {
detail?: MCPProvider
detail?: ToolWithProvider
onUpdate: () => void
onHide: () => void
}

15
web/app/components/tools/types.ts
Unescape Escape View File

@ -51,6 +51,9 @@ export type Collection = {
labels: string[]
plugin_id?: string
letter?: string
// MCP Server
server_url?: string
update_elapsed_time?: number
}
export type ToolParameter = {
@ -169,15 +172,3 @@ export type WorkflowToolProviderResponse = {
}
privacy_policy: string
}
export type MCPProvider = {
id: string
author: string
name: string
icon: string | Emoji
server_url: string
type: CollectionType
is_team_authorization: boolean
tools: string[]
update_elapsed_time: number
}

8
web/app/components/workflow/block-selector/all-tools.tsx
Unescape Escape View File

@ -31,6 +31,7 @@ type AllToolsProps = {
buildInTools: ToolWithProvider[]
customTools: ToolWithProvider[]
workflowTools: ToolWithProvider[]
mcpTools: ToolWithProvider[]
onSelect: OnSelectBlock
supportAddCustomTool?: boolean
onAddedCustomTool?: () => void
@ -49,6 +50,7 @@ const AllTools = ({
buildInTools,
workflowTools,
customTools,
mcpTools = [],
supportAddCustomTool,
onShowAddCustomCollectionModal,
selectedTools,
@ -64,13 +66,15 @@ const AllTools = ({
const tools = useMemo(() => {
let mergedTools: ToolWithProvider[] = []
if (activeTab === ToolTypeEnum.All)
mergedTools = [...buildInTools, ...customTools, ...workflowTools]
mergedTools = [...buildInTools, ...customTools, ...workflowTools, ...mcpTools]
if (activeTab === ToolTypeEnum.BuiltIn)
mergedTools = buildInTools
if (activeTab === ToolTypeEnum.Custom)
mergedTools = customTools
if (activeTab === ToolTypeEnum.Workflow)
mergedTools = workflowTools
if (activeTab === ToolTypeEnum.MCP)
mergedTools = mcpTools
if (!hasFilter)
return mergedTools.filter(toolWithProvider => toolWithProvider.tools.length > 0)
@ -80,7 +84,7 @@ const AllTools = ({
return tool.label[language].toLowerCase().includes(searchText.toLowerCase()) || tool.name.toLowerCase().includes(searchText.toLowerCase())
})
})
}, [activeTab, buildInTools, customTools, workflowTools, searchText, language, hasFilter])
}, [activeTab, buildInTools, customTools, workflowTools, mcpTools, searchText, language, hasFilter])
const {
queryPluginsWithDebounced: fetchPlugins,

4
web/app/components/workflow/block-selector/hooks.ts
Unescape Escape View File

@ -51,5 +51,9 @@ export const useToolTabs = () => {
key: ToolTypeEnum.Workflow,
name: t('workflow.tabs.workflowTool'),
},
{
key: ToolTypeEnum.MCP,
name: 'MCP',
},
]
}

4
web/app/components/workflow/block-selector/tabs.tsx
Unescape Escape View File

@ -1,6 +1,6 @@
import type { FC } from 'react'
import { memo } from 'react'
import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools } from '@/service/use-tools'
import type { BlockEnum } from '../types'
import { useTabs } from './hooks'
import type { ToolDefaultValue } from './types'
@ -31,6 +31,7 @@ const Tabs: FC<TabsProps> = ({
const { data: buildInTools } = useAllBuiltInTools()
const { data: customTools } = useAllCustomTools()
const { data: workflowTools } = useAllWorkflowTools()
const { data: mcpTools } = useAllMCPTools()
return (
<div onClick={e => e.stopPropagation()}>
@ -75,6 +76,7 @@ const Tabs: FC<TabsProps> = ({
buildInTools={buildInTools || []}
customTools={customTools || []}
workflowTools={workflowTools || []}
mcpTools={mcpTools || []}
/>
)
}

4
web/app/components/workflow/block-selector/tool-picker.tsx
Unescape Escape View File

@ -23,7 +23,7 @@ import {
} from '@/service/tools'
import type { CustomCollectionBackend } from '@/app/components/tools/types'
import Toast from '@/app/components/base/toast'
import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools, useInvalidateAllCustomTools } from '@/service/use-tools'
import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools, useInvalidateAllCustomTools } from '@/service/use-tools'
import cn from '@/utils/classnames'
type Props = {
@ -61,6 +61,7 @@ const ToolPicker: FC<Props> = ({
const { data: customTools } = useAllCustomTools()
const invalidateCustomTools = useInvalidateAllCustomTools()
const { data: workflowTools } = useAllWorkflowTools()
const { data: mcpTools } = useAllMCPTools()
const { builtinToolList, customToolList, workflowToolList } = useMemo(() => {
if (scope === 'plugins') {
@ -162,6 +163,7 @@ const ToolPicker: FC<Props> = ({
buildInTools={builtinToolList || []}
customTools={customToolList || []}
workflowTools={workflowToolList || []}
mcpTools={mcpTools || []}
supportAddCustomTool={supportAddCustomTool}
onAddedCustomTool={handleAddedCustomTool}
onShowAddCustomCollectionModal={showEditCustomCollectionModal}

1
web/app/components/workflow/block-selector/types.ts
Unescape Escape View File

@ -8,6 +8,7 @@ export enum ToolTypeEnum {
BuiltIn = 'built-in',
Custom = 'custom',
Workflow = 'workflow',
MCP = 'mcp',
}
export enum BlockClassificationEnum {

7
web/service/use-tools.ts
Unescape Escape View File

@ -4,7 +4,6 @@ import type {
Tool,
} from '@/app/components/tools/types'
import type { ToolWithProvider } from '@/app/components/workflow/types'
import type { MCPProvider } from '@/app/components/tools/types'
import { useInvalid } from './use-base'
import {
useMutation,
@ -66,11 +65,11 @@ export const useInvalidateAllWorkflowTools = () => {
const useAllMCPToolsKey = [NAME_SPACE, 'MCPTools']
export const useAllMCPTools = () => {
return useQuery<MCPProvider[]>({
return useQuery<ToolWithProvider[]>({
queryKey: useAllMCPToolsKey,
// queryFn: () => get<MCPProvider[]>('/workspaces/current/tools/mcp'),
// queryFn: () => get<ToolWithProvider[]>('/workspaces/current/tools/mcp'),
queryFn: () => {
return listData as unknown as MCPProvider[]
return listData as unknown as ToolWithProvider[]
},
})
}

Write Preview
Loading…
Cancel
Save