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

feat: can not choose mcp tool in picker

Browse Source
pull/22091/head
Joel 12 months ago
parent 933194b1f7
commit fa3a616bf6
12 changed files with 41 additions and 14 deletions
Show Stats Download Patch File Download Diff File

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

@ -35,7 +35,7 @@ type AllToolsProps = {
canNotSelectMultiple?: boolean canNotSelectMultiple?: boolean
onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
selectedTools?: ToolValue[] selectedTools?: ToolValue[]
isHideMCPTools?: boolean canChooseMCPTool?: boolean
} }
const DEFAULT_TAGS: AllToolsProps['tags'] = [] const DEFAULT_TAGS: AllToolsProps['tags'] = []
@ -53,10 +53,10 @@ const AllTools = ({
customTools, customTools,
mcpTools = [], mcpTools = [],
selectedTools, selectedTools,
isHideMCPTools, canChooseMCPTool,
}: AllToolsProps) => { }: AllToolsProps) => {
const language = useGetLanguage() const language = useGetLanguage()
const tabs = useToolTabs(isHideMCPTools) const tabs = useToolTabs()
const [activeTab, setActiveTab] = useState(ToolTypeEnum.All) const [activeTab, setActiveTab] = useState(ToolTypeEnum.All)
const [activeView, setActiveView] = useState<ViewType>(ViewType.flat) const [activeView, setActiveView] = useState<ViewType>(ViewType.flat)
const hasFilter = searchText || tags.length > 0 const hasFilter = searchText || tags.length > 0
@ -148,6 +148,7 @@ const AllTools = ({
viewType={isSupportGroupView ? activeView : ViewType.flat} viewType={isSupportGroupView ? activeView : ViewType.flat}
hasSearchText={!!searchText} hasSearchText={!!searchText}
selectedTools={selectedTools} selectedTools={selectedTools}
canChooseMCPTool={canChooseMCPTool}
/> />
{/* Plugins from marketplace */} {/* Plugins from marketplace */}
{enable_marketplace && <PluginList {enable_marketplace && <PluginList

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

@ -83,7 +83,7 @@ const Tabs: FC<TabsProps> = ({
customTools={customTools || []} customTools={customTools || []}
workflowTools={workflowTools || []} workflowTools={workflowTools || []}
mcpTools={mcpTools || []} mcpTools={mcpTools || []}
isHideMCPTools={false} canChooseMCPTool
/> />
) )
} }

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

@ -178,7 +178,7 @@ const ToolPicker: FC<Props> = ({
workflowTools={workflowToolList || []} workflowTools={workflowToolList || []}
mcpTools={mcpTools || []} mcpTools={mcpTools || []}
selectedTools={selectedTools} selectedTools={selectedTools}
isHideMCPTools={!canChooseMCPTool} canChooseMCPTool={canChooseMCPTool}
/> />
</div> </div>
</PortalToFollowElemContent> </PortalToFollowElemContent>

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

@ -15,6 +15,7 @@ type Props = {
provider: ToolWithProvider provider: ToolWithProvider
payload: Tool payload: Tool
disabled?: boolean disabled?: boolean
isAdded?: boolean
onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
} }
@ -23,6 +24,7 @@ const ToolItem: FC<Props> = ({
payload, payload,
onSelect, onSelect,
disabled, disabled,
isAdded,
}) => { }) => {
const { t } = useTranslation() const { t } = useTranslation()
@ -76,7 +78,7 @@ const ToolItem: FC<Props> = ({
<div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary')}> <div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary')}>
<span className={cn(disabled && 'opacity-30')}>{payload.label[language]}</span> <span className={cn(disabled && 'opacity-30')}>{payload.label[language]}</span>
</div> </div>
{disabled && ( {isAdded && (
<div className='system-xs-regular mr-4 text-text-tertiary'>{t('tools.addToolModal.added')}</div> <div className='system-xs-regular mr-4 text-text-tertiary'>{t('tools.addToolModal.added')}</div>
)} )}
</div> </div>

3
web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
Unescape Escape View File

@ -18,6 +18,7 @@ type Props = {
letters: string[] letters: string[]
toolRefs: any toolRefs: any
selectedTools?: ToolValue[] selectedTools?: ToolValue[]
canChooseMCPTool?: boolean
} }
const ToolViewFlatView: FC<Props> = ({ const ToolViewFlatView: FC<Props> = ({
@ -30,6 +31,7 @@ const ToolViewFlatView: FC<Props> = ({
onSelectMultiple, onSelectMultiple,
toolRefs, toolRefs,
selectedTools, selectedTools,
canChooseMCPTool,
}) => { }) => {
const firstLetterToolIds = useMemo(() => { const firstLetterToolIds = useMemo(() => {
const res: Record<string, string> = {} const res: Record<string, string> = {}
@ -60,6 +62,7 @@ const ToolViewFlatView: FC<Props> = ({
canNotSelectMultiple={canNotSelectMultiple} canNotSelectMultiple={canNotSelectMultiple}
onSelectMultiple={onSelectMultiple} onSelectMultiple={onSelectMultiple}
selectedTools={selectedTools} selectedTools={selectedTools}
canChooseMCPTool={canChooseMCPTool}
/> />
</div> </div>
))} ))}

3
web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
Unescape Escape View File

@ -15,6 +15,7 @@ type Props = {
canNotSelectMultiple?: boolean canNotSelectMultiple?: boolean
onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
selectedTools?: ToolValue[] selectedTools?: ToolValue[]
canChooseMCPTool?: boolean
} }
const Item: FC<Props> = ({ const Item: FC<Props> = ({
@ -25,6 +26,7 @@ const Item: FC<Props> = ({
canNotSelectMultiple, canNotSelectMultiple,
onSelectMultiple, onSelectMultiple,
selectedTools, selectedTools,
canChooseMCPTool,
}) => { }) => {
return ( return (
<div> <div>
@ -43,6 +45,7 @@ const Item: FC<Props> = ({
canNotSelectMultiple={canNotSelectMultiple} canNotSelectMultiple={canNotSelectMultiple}
onSelectMultiple={onSelectMultiple} onSelectMultiple={onSelectMultiple}
selectedTools={selectedTools} selectedTools={selectedTools}
canChooseMCPTool={canChooseMCPTool}
/> />
))} ))}
</div> </div>

3
web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx
Unescape Escape View File

@ -15,6 +15,7 @@ type Props = {
canNotSelectMultiple?: boolean canNotSelectMultiple?: boolean
onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
selectedTools?: ToolValue[] selectedTools?: ToolValue[]
canChooseMCPTool?: boolean
} }
const ToolListTreeView: FC<Props> = ({ const ToolListTreeView: FC<Props> = ({
@ -24,6 +25,7 @@ const ToolListTreeView: FC<Props> = ({
canNotSelectMultiple, canNotSelectMultiple,
onSelectMultiple, onSelectMultiple,
selectedTools, selectedTools,
canChooseMCPTool,
}) => { }) => {
const { t } = useTranslation() const { t } = useTranslation()
const getI18nGroupName = useCallback((name: string) => { const getI18nGroupName = useCallback((name: string) => {
@ -53,6 +55,7 @@ const ToolListTreeView: FC<Props> = ({
canNotSelectMultiple={canNotSelectMultiple} canNotSelectMultiple={canNotSelectMultiple}
onSelectMultiple={onSelectMultiple} onSelectMultiple={onSelectMultiple}
selectedTools={selectedTools} selectedTools={selectedTools}
canChooseMCPTool={canChooseMCPTool}
/> />
))} ))}
</div> </div>

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

@ -14,6 +14,7 @@ import ActonItem from './action-item'
import BlockIcon from '../../block-icon' import BlockIcon from '../../block-icon'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useHover } from 'ahooks' import { useHover } from 'ahooks'
import McpToolNotSupportTooltip from '../../nodes/_base/components/mcp-tool-not-support-tooltip'
type Props = { type Props = {
className?: string className?: string
@ -25,6 +26,7 @@ type Props = {
canNotSelectMultiple?: boolean canNotSelectMultiple?: boolean
onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
selectedTools?: ToolValue[] selectedTools?: ToolValue[]
canChooseMCPTool?: boolean
} }
const Tool: FC<Props> = ({ const Tool: FC<Props> = ({
@ -37,6 +39,7 @@ const Tool: FC<Props> = ({
canNotSelectMultiple, canNotSelectMultiple,
onSelectMultiple, onSelectMultiple,
selectedTools, selectedTools,
canChooseMCPTool,
}) => { }) => {
const { t } = useTranslation() const { t } = useTranslation()
const language = useGetLanguage() const language = useGetLanguage()
@ -47,6 +50,7 @@ const Tool: FC<Props> = ({
const [isFold, setFold] = React.useState<boolean>(true) const [isFold, setFold] = React.useState<boolean>(true)
const ref = useRef(null) const ref = useRef(null)
const isHovering = useHover(ref) const isHovering = useHover(ref)
const isShowCanNotChooseMCPTip = !canChooseMCPTool && payload.type === CollectionType.mcp
const getIsDisabled = useCallback((tool: ToolType) => { const getIsDisabled = useCallback((tool: ToolType) => {
if (!selectedTools || !selectedTools.length) return false if (!selectedTools || !selectedTools.length) return false
return selectedTools.some(selectedTool => (selectedTool.provider_name === payload.name || selectedTool.provider_name === payload.id) && selectedTool.tool_name === tool.name) return selectedTools.some(selectedTool => (selectedTool.provider_name === payload.name || selectedTool.provider_name === payload.id) && selectedTool.tool_name === tool.name)
@ -173,7 +177,7 @@ const Tool: FC<Props> = ({
}) })
}} }}
> >
<div className='flex h-8 grow items-center'> <div className={cn('flex h-8 grow items-center', isShowCanNotChooseMCPTip && 'opacity-30')}>
<BlockIcon <BlockIcon
className='shrink-0' className='shrink-0'
type={BlockEnum.Tool} type={BlockEnum.Tool}
@ -188,7 +192,8 @@ const Tool: FC<Props> = ({
</div> </div>
<div className='ml-2 flex items-center'> <div className='ml-2 flex items-center'>
{!canNotSelectMultiple && (notShowProvider ? notShowProviderSelectInfo : selectedInfo)} {!isShowCanNotChooseMCPTip && !canNotSelectMultiple && (notShowProvider ? notShowProviderSelectInfo : selectedInfo)}
{isShowCanNotChooseMCPTip && <McpToolNotSupportTooltip />}
{hasAction && ( {hasAction && (
<FoldIcon className={cn('h-4 w-4 shrink-0 text-text-quaternary', isFold && 'text-text-tertiary')} /> <FoldIcon className={cn('h-4 w-4 shrink-0 text-text-quaternary', isFold && 'text-text-tertiary')} />
)} )}
@ -202,7 +207,8 @@ const Tool: FC<Props> = ({
provider={payload} provider={payload}
payload={action} payload={action}
onSelect={onSelect} onSelect={onSelect}
disabled={getIsDisabled(action)} disabled={getIsDisabled(action) || isShowCanNotChooseMCPTip}
isAdded={getIsDisabled(action)}
/> />
)) ))
)} )}

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

@ -25,6 +25,7 @@ type ToolsProps = {
className?: string className?: string
indexBarClassName?: string indexBarClassName?: string
selectedTools?: ToolValue[] selectedTools?: ToolValue[]
canChooseMCPTool?: boolean
} }
const Blocks = ({ const Blocks = ({
showWorkflowEmpty, showWorkflowEmpty,
@ -37,6 +38,7 @@ const Blocks = ({
className, className,
indexBarClassName, indexBarClassName,
selectedTools, selectedTools,
canChooseMCPTool,
}: ToolsProps) => { }: ToolsProps) => {
const { t } = useTranslation() const { t } = useTranslation()
const language = useGetLanguage() const language = useGetLanguage()
@ -114,6 +116,7 @@ const Blocks = ({
canNotSelectMultiple={canNotSelectMultiple} canNotSelectMultiple={canNotSelectMultiple}
onSelectMultiple={onSelectMultiple} onSelectMultiple={onSelectMultiple}
selectedTools={selectedTools} selectedTools={selectedTools}
canChooseMCPTool={canChooseMCPTool}
/> />
) : ( ) : (
<ToolListTreeView <ToolListTreeView
@ -123,6 +126,7 @@ const Blocks = ({
canNotSelectMultiple={canNotSelectMultiple} canNotSelectMultiple={canNotSelectMultiple}
onSelectMultiple={onSelectMultiple} onSelectMultiple={onSelectMultiple}
selectedTools={selectedTools} selectedTools={selectedTools}
canChooseMCPTool={canChooseMCPTool}
/> />
) )
)} )}

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

@ -33,7 +33,7 @@ export type ToolDefaultValue = {
params: Record<string, any> params: Record<string, any>
paramSchemas: Record<string, any>[] paramSchemas: Record<string, any>[]
output_schema: Record<string, any> output_schema: Record<string, any>
meta: PluginMeta meta?: PluginMeta
} }
export type ToolValue = { export type ToolValue = {

9
web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
Unescape Escape View File

@ -89,10 +89,11 @@ function formatStrategy(input: StrategyPluginDetail[], getIcon: (i: string) => s
export type AgentStrategySelectorProps = { export type AgentStrategySelectorProps = {
value?: Strategy, value?: Strategy,
onChange: (value?: Strategy) => void, onChange: (value?: Strategy) => void,
canChooseMCPTool: boolean,
} }
export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) => { export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) => {
const { value, onChange } = props const { value, onChange, canChooseMCPTool } = props
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [viewType, setViewType] = useState<ViewType>(ViewType.flat) const [viewType, setViewType] = useState<ViewType>(ViewType.flat)
const [query, setQuery] = useState('') const [query, setQuery] = useState('')
@ -216,7 +217,11 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
setOpen(false) setOpen(false)
}} }}
className='h-full max-h-full max-w-none overflow-y-auto' className='h-full max-h-full max-w-none overflow-y-auto'
indexBarClassName='top-0 xl:top-36' showWorkflowEmpty={false} hasSearchText={false} /> indexBarClassName='top-0 xl:top-36'
showWorkflowEmpty={false}
hasSearchText={false}
canChooseMCPTool={canChooseMCPTool}
/>
<PluginList <PluginList
ref={pluginRef} ref={pluginRef}
wrapElemRef={wrapElemRef} wrapElemRef={wrapElemRef}

4
web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
Unescape Escape View File

@ -43,7 +43,7 @@ export type AgentStrategyProps = {
nodeOutputVars?: NodeOutPutVar[], nodeOutputVars?: NodeOutPutVar[],
availableNodes?: Node[], availableNodes?: Node[],
nodeId?: string nodeId?: string
canChooseMCPTool?: boolean canChooseMCPTool: boolean
} }
type CustomSchema<Type, Field = {}> = Omit<CredentialFormSchema, 'type'> & { type: Type } & Field type CustomSchema<Type, Field = {}> = Omit<CredentialFormSchema, 'type'> & { type: Type } & Field
@ -201,7 +201,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
} }
} }
return <div className='space-y-2'> return <div className='space-y-2'>
<AgentStrategySelector value={strategy} onChange={onStrategyChange} /> <AgentStrategySelector value={strategy} onChange={onStrategyChange} canChooseMCPTool={canChooseMCPTool} />
{ {
strategy strategy
? <div> ? <div>

Write Preview
Loading…
Cancel
Save