mirror of
https://github.com/langgenius/dify.git
synced 2026-06-07 16:32:01 +08:00
305 lines
10 KiB
TypeScript
305 lines
10 KiB
TypeScript
import type {
|
|
OffsetOptions,
|
|
Placement,
|
|
} from '@floating-ui/react'
|
|
import type {
|
|
MouseEventHandler,
|
|
} from 'react'
|
|
import type {
|
|
CommonNodeType,
|
|
NodeDefault,
|
|
OnSelectBlock,
|
|
ToolWithProvider,
|
|
} from '../types'
|
|
import { cn } from '@langgenius/dify-ui/cn'
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from '@langgenius/dify-ui/popover'
|
|
import { useDebounce } from 'ahooks'
|
|
import * as React from 'react'
|
|
import {
|
|
memo,
|
|
useCallback,
|
|
useMemo,
|
|
useState,
|
|
} from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
Plus02,
|
|
} from '@/app/components/base/icons/src/vender/line/general'
|
|
import Input from '@/app/components/base/input'
|
|
import SearchBox from '@/app/components/plugins/marketplace/search-box'
|
|
import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
|
|
import { BlockEnum, isTriggerNode } from '../types'
|
|
import { useTabs } from './hooks'
|
|
import Tabs from './tabs'
|
|
import { TabsEnum } from './types'
|
|
|
|
export type NodeSelectorProps = {
|
|
open?: boolean
|
|
onOpenChange?: (open: boolean) => void
|
|
onSelect: OnSelectBlock
|
|
trigger?: (open: boolean) => React.ReactNode
|
|
placement?: Placement
|
|
offset?: OffsetOptions
|
|
triggerStyle?: React.CSSProperties
|
|
triggerClassName?: (open: boolean) => string
|
|
triggerInnerClassName?: string
|
|
renderTriggerAsButtonRoot?: boolean
|
|
popupClassName?: string
|
|
availableBlocksTypes?: BlockEnum[]
|
|
disabled?: boolean
|
|
blocks?: NodeDefault[]
|
|
dataSources?: ToolWithProvider[]
|
|
noBlocks?: boolean
|
|
noTools?: boolean
|
|
showStartTab?: boolean
|
|
defaultActiveTab?: TabsEnum
|
|
forceShowStartContent?: boolean
|
|
ignoreNodeIds?: string[]
|
|
forceEnableStartTab?: boolean // Force enabling Start tab regardless of existing trigger/user input nodes (e.g., when changing Start node type).
|
|
allowUserInputSelection?: boolean // Override user-input availability; default logic blocks it when triggers exist.
|
|
}
|
|
function NodeSelector({
|
|
open: openFromProps,
|
|
onOpenChange,
|
|
onSelect,
|
|
trigger,
|
|
placement = 'right',
|
|
offset = 6,
|
|
triggerClassName,
|
|
triggerInnerClassName,
|
|
renderTriggerAsButtonRoot = false,
|
|
triggerStyle,
|
|
popupClassName,
|
|
availableBlocksTypes,
|
|
disabled,
|
|
blocks = [],
|
|
dataSources = [],
|
|
noBlocks = false,
|
|
noTools = false,
|
|
showStartTab = false,
|
|
defaultActiveTab,
|
|
forceShowStartContent = false,
|
|
ignoreNodeIds = [],
|
|
forceEnableStartTab = false,
|
|
allowUserInputSelection,
|
|
}: NodeSelectorProps) {
|
|
const { t } = useTranslation()
|
|
const nodes = useNodes()
|
|
const [searchText, setSearchText] = useState('')
|
|
const debouncedSearchText = useDebounce(searchText, { wait: 500 })
|
|
const [tags, setTags] = useState<string[]>([])
|
|
const [localOpen, setLocalOpen] = useState(false)
|
|
// Exclude nodes explicitly ignored (such as the node currently being edited) when checking canvas state.
|
|
const filteredNodes = useMemo(() => {
|
|
if (!ignoreNodeIds.length)
|
|
return nodes
|
|
const ignoreSet = new Set(ignoreNodeIds)
|
|
return nodes.filter(node => !ignoreSet.has(node.id))
|
|
}, [nodes, ignoreNodeIds])
|
|
|
|
const { hasTriggerNode, hasUserInputNode } = useMemo(() => {
|
|
const result = {
|
|
hasTriggerNode: false,
|
|
hasUserInputNode: false,
|
|
}
|
|
for (const node of filteredNodes) {
|
|
const nodeType = (node.data as CommonNodeType | undefined)?.type
|
|
if (!nodeType)
|
|
continue
|
|
if (nodeType === BlockEnum.Start)
|
|
result.hasUserInputNode = true
|
|
if (isTriggerNode(nodeType))
|
|
result.hasTriggerNode = true
|
|
if (result.hasTriggerNode && result.hasUserInputNode)
|
|
break
|
|
}
|
|
return result
|
|
}, [filteredNodes])
|
|
// Default rule: user input option is only available when no Start node nor Trigger node exists on canvas.
|
|
const defaultAllowUserInputSelection = !hasUserInputNode && !hasTriggerNode
|
|
const canSelectUserInput = allowUserInputSelection ?? defaultAllowUserInputSelection
|
|
const open = openFromProps === undefined ? localOpen : openFromProps
|
|
const handleOpenChange = useCallback((newOpen: boolean) => {
|
|
if (disabled)
|
|
return
|
|
|
|
setLocalOpen(newOpen)
|
|
|
|
if (!newOpen)
|
|
setSearchText('')
|
|
|
|
if (onOpenChange)
|
|
onOpenChange(newOpen)
|
|
}, [disabled, onOpenChange])
|
|
const handleTrigger = useCallback<MouseEventHandler<HTMLElement>>((e) => {
|
|
e.stopPropagation()
|
|
}, [])
|
|
|
|
const handleSelect = useCallback<OnSelectBlock>((type, pluginDefaultValue) => {
|
|
handleOpenChange(false)
|
|
onSelect(type, pluginDefaultValue)
|
|
}, [handleOpenChange, onSelect])
|
|
|
|
const {
|
|
activeTab,
|
|
setActiveTab,
|
|
tabs,
|
|
} = useTabs({
|
|
noBlocks,
|
|
noSources: !dataSources.length,
|
|
noTools,
|
|
noStart: !showStartTab,
|
|
defaultActiveTab,
|
|
hasUserInputNode,
|
|
forceEnableStartTab,
|
|
})
|
|
|
|
const handleActiveTabChange = useCallback((newActiveTab: TabsEnum) => {
|
|
setActiveTab(newActiveTab)
|
|
}, [setActiveTab])
|
|
const filterSearchText = activeTab === TabsEnum.Start || activeTab === TabsEnum.Tools
|
|
? debouncedSearchText
|
|
: searchText
|
|
|
|
const searchPlaceholder = useMemo(() => {
|
|
if (activeTab === TabsEnum.Start)
|
|
return t('tabs.searchTrigger', { ns: 'workflow' })
|
|
|
|
if (activeTab === TabsEnum.Blocks)
|
|
return t('tabs.searchBlock', { ns: 'workflow' })
|
|
|
|
if (activeTab === TabsEnum.Tools)
|
|
return t('tabs.searchTool', { ns: 'workflow' })
|
|
|
|
if (activeTab === TabsEnum.Sources)
|
|
return t('tabs.searchDataSource', { ns: 'workflow' })
|
|
return ''
|
|
}, [activeTab, t])
|
|
|
|
const defaultTriggerElement = (
|
|
<PopoverTrigger
|
|
aria-label={t('common.addBlock', { ns: 'workflow' })}
|
|
className={cn(
|
|
'z-10 flex size-4 cursor-pointer items-center justify-center rounded-full border-0 bg-components-button-primary-bg p-0 text-text-primary-on-surface hover:bg-components-button-primary-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
|
|
triggerClassName?.(open),
|
|
)}
|
|
style={triggerStyle}
|
|
onClick={handleTrigger}
|
|
>
|
|
<Plus02 aria-hidden className="size-2.5" />
|
|
</PopoverTrigger>
|
|
)
|
|
const triggerElement = trigger?.(open)
|
|
const isValidTriggerElement = React.isValidElement(triggerElement)
|
|
const isNativeButtonTrigger = isValidTriggerElement && triggerElement.type === 'button'
|
|
const shouldRenderTriggerAsButtonRoot = isValidTriggerElement && (renderTriggerAsButtonRoot || isNativeButtonTrigger)
|
|
const resolvedTriggerElement = shouldRenderTriggerAsButtonRoot
|
|
? triggerElement
|
|
: (
|
|
<div className={triggerInnerClassName}>
|
|
{triggerElement}
|
|
</div>
|
|
)
|
|
const resolvedOffset = typeof offset === 'number' || typeof offset === 'function' ? undefined : offset
|
|
const sideOffset = typeof offset === 'number' ? offset : (resolvedOffset?.mainAxis ?? 0)
|
|
const alignOffset = typeof offset === 'number' ? 0 : (resolvedOffset?.crossAxis ?? 0)
|
|
|
|
return (
|
|
<Popover
|
|
open={open}
|
|
onOpenChange={handleOpenChange}
|
|
>
|
|
{trigger
|
|
? (
|
|
<PopoverTrigger
|
|
nativeButton={shouldRenderTriggerAsButtonRoot}
|
|
onClick={handleTrigger}
|
|
render={resolvedTriggerElement as React.ReactElement}
|
|
/>
|
|
)
|
|
: defaultTriggerElement}
|
|
<PopoverContent
|
|
placement={placement}
|
|
sideOffset={sideOffset}
|
|
alignOffset={alignOffset}
|
|
popupClassName="border-none bg-transparent shadow-none"
|
|
>
|
|
<div className={cn('w-[400px] min-w-0 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg', popupClassName)}>
|
|
<Tabs
|
|
tabs={tabs}
|
|
activeTab={activeTab}
|
|
blocks={blocks}
|
|
allowStartNodeSelection={canSelectUserInput}
|
|
onActiveTabChange={handleActiveTabChange}
|
|
filterElem={(
|
|
<div className="relative m-2" onClick={e => e.stopPropagation()}>
|
|
{activeTab === TabsEnum.Start && (
|
|
<SearchBox
|
|
autoFocus
|
|
search={searchText}
|
|
onSearchChange={setSearchText}
|
|
tags={tags}
|
|
onTagsChange={setTags}
|
|
placeholder={searchPlaceholder}
|
|
wrapperClassName="w-full min-w-0"
|
|
inputClassName="min-w-0 grow"
|
|
/>
|
|
)}
|
|
{activeTab === TabsEnum.Blocks && (
|
|
<Input
|
|
showLeftIcon
|
|
showClearIcon
|
|
autoFocus
|
|
value={searchText}
|
|
placeholder={searchPlaceholder}
|
|
onChange={e => setSearchText(e.target.value)}
|
|
onClear={() => setSearchText('')}
|
|
/>
|
|
)}
|
|
{activeTab === TabsEnum.Sources && (
|
|
<Input
|
|
showLeftIcon
|
|
showClearIcon
|
|
autoFocus
|
|
value={searchText}
|
|
placeholder={searchPlaceholder}
|
|
onChange={e => setSearchText(e.target.value)}
|
|
onClear={() => setSearchText('')}
|
|
/>
|
|
)}
|
|
{activeTab === TabsEnum.Tools && (
|
|
<SearchBox
|
|
autoFocus
|
|
search={searchText}
|
|
onSearchChange={setSearchText}
|
|
tags={tags}
|
|
onTagsChange={setTags}
|
|
placeholder={t('searchTools', { ns: 'plugin' })!}
|
|
wrapperClassName="w-full min-w-0"
|
|
inputClassName="min-w-0 grow"
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
onSelect={handleSelect}
|
|
searchText={filterSearchText}
|
|
tags={tags}
|
|
availableBlocksTypes={availableBlocksTypes}
|
|
noBlocks={noBlocks}
|
|
dataSources={dataSources}
|
|
noTools={noTools}
|
|
onTagsChange={setTags}
|
|
forceShowStartContent={forceShowStartContent}
|
|
/>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|
|
|
|
export default memo(NodeSelector)
|