yujunjun/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2025-10-27 17:09:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

checklist & datasource icon

Browse Source
This commit is contained in:
zxhlyh 2025-05-23 14:25:38 +08:00
parent 693107a6c8
commit 720ce79901
14 changed files with 108 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/app/components/base/tag-input/index.tsx
View File

@ -15,6 +15,7 @@ type TagInputProps = {
customizedConfirmKey?: 'Enter' | 'Tab'
isInWorkflow?: boolean
placeholder?: string
inputClassName?: string
}
const TagInput: FC<TagInputProps> = ({
@ -25,6 +26,7 @@ const TagInput: FC<TagInputProps> = ({
customizedConfirmKey = 'Enter',
isInWorkflow,
placeholder,
inputClassName,
}) => {
const { t } = useTranslation()
const { notify } = useToastContext()
@ -93,15 +95,18 @@ const TagInput: FC<TagInputProps> = ({
<div className={cn('group/tag-add mt-1 flex items-center gap-x-0.5', !isSpecialMode ? 'rounded-md border border-dashed border-divider-deep px-1.5' : '')}>
{!isSpecialMode && !focused && <RiAddLine className='h-3.5 w-3.5 text-text-placeholder group-hover/tag-add:text-text-secondary' />}
<AutosizeInput
inputClassName={cn('appearance-none text-text-primary caret-[#295EFF] outline-none placeholder:text-text-placeholder group-hover/tag-add:placeholder:text-text-secondary', isSpecialMode ? 'bg-transparent' : '')}
inputClassName={cn(
'appearance-none text-text-primary caret-[#295EFF] outline-none placeholder:text-text-placeholder group-hover/tag-add:placeholder:text-text-secondary',
isSpecialMode ? 'bg-transparent' : '',
inputClassName,
)}
className={cn(
!isInWorkflow && 'max-w-[300px]',
isInWorkflow && 'max-w-[146px]',
`
system-xs-regular overflow-hidden rounded-md py-1
${isSpecialMode && 'border border-transparent px-1.5'}
${focused && isSpecialMode && 'border-dashed border-divider-deep'}
`)}
'system-xs-regular overflow-hidden rounded-md py-1',
isSpecialMode && 'border border-transparent px-1.5',
focused && isSpecialMode && 'border-dashed border-divider-deep',
)}
onFocus={() => setFocused(true)}
onBlur={handleBlur}
value={value}

14
web/app/components/rag-pipeline/hooks/use-pipeline-config.ts
View File

@ -5,6 +5,9 @@ import {
} from '@/app/components/workflow/store'
import { useWorkflowConfig } from '@/service/use-workflow'
import type { FetchWorkflowDraftResponse } from '@/types/workflow'
import { useDataSourceList } from '@/service/use-pipeline'
import type { ToolWithProvider } from '@/app/components/workflow/types'
import { basePath } from '@/utils/var'
export const usePipelineConfig = () => {
const pipelineId = useStore(s => s.pipelineId)
@ -39,4 +42,15 @@ export const usePipelineConfig = () => {
pipelineId ? `/rag/pipelines/${pipelineId}/workflows/publish` : '',
handleUpdatePublishedAt,
)
const handleUpdateDataSourceList = useCallback((dataSourceList: ToolWithProvider[]) => {
dataSourceList.forEach((item) => {
if (typeof item.icon == 'string' && !item.icon.includes(basePath))
item.icon = `${basePath}${item.icon}`
})
const { setDataSourceList } = workflowStore.getState()
setDataSourceList!(dataSourceList)
}, [workflowStore])
useDataSourceList(!!pipelineId, handleUpdateDataSourceList)
}

7
web/app/components/rag-pipeline/store/index.ts
View File

@ -1,5 +1,8 @@
import type { RAGPipelineVariables } from '@/models/pipeline'
import type { StateCreator } from 'zustand'
import type {
ToolWithProvider,
} from '@/app/components/workflow/types'
export type RagPipelineSliceShape = {
pipelineId: string
@ -9,6 +12,8 @@ export type RagPipelineSliceShape = {
setNodesDefaultConfigs: (nodesDefaultConfigs: Record<string, any>) => void
ragPipelineVariables: RAGPipelineVariables
setRagPipelineVariables: (ragPipelineVariables: RAGPipelineVariables) => void
dataSourceList: ToolWithProvider[]
setDataSourceList: (dataSourceList: ToolWithProvider[]) => void
}
export type CreateRagPipelineSliceSlice = StateCreator<RagPipelineSliceShape>
@ -20,4 +25,6 @@ export const createRagPipelineSliceSlice: StateCreator<RagPipelineSliceShape> =
setNodesDefaultConfigs: nodesDefaultConfigs => set(() => ({ nodesDefaultConfigs })),
ragPipelineVariables: [],
setRagPipelineVariables: (ragPipelineVariables: RAGPipelineVariables) => set(() => ({ ragPipelineVariables })),
dataSourceList: [],
setDataSourceList: (dataSourceList: ToolWithProvider[]) => set(() => ({ dataSourceList })),
})

9
web/app/components/workflow/block-selector/hooks.ts
View File

@ -3,8 +3,6 @@ import {
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import { useDataSourceList } from '@/service/use-pipeline'
import { useStore } from '../store'
import {
TabsEnum,
ToolTypeEnum,
@ -77,10 +75,3 @@ export const useToolTabs = () => {
},
]
}
export const useDataSources = () => {
const pipelineId = useStore(s => s.pipelineId)
const { data: dataSourceList } = useDataSourceList(!!pipelineId)
return dataSourceList || []
}

5
web/app/components/workflow/block-selector/index.tsx
View File

@ -5,10 +5,11 @@ import type { NodeSelectorProps } from './main'
import NodeSelector from './main'
import { useHooksStore } from '@/app/components/workflow/hooks-store/store'
import { BlockEnum } from '@/app/components/workflow/types'
import { useDataSources } from './hooks'
import { useStore } from '../store'
const NodeSelectorWrapper = (props: NodeSelectorProps) => {
const availableNodesMetaData = useHooksStore(s => s.availableNodesMetaData)
const dataSourceList = useStore(s => s.dataSourceList)
const blocks = useMemo(() => {
const result = availableNodesMetaData?.nodes || []
@ -33,8 +34,6 @@ const NodeSelectorWrapper = (props: NodeSelectorProps) => {
})
}, [availableNodesMetaData?.nodes])
const dataSourceList = useDataSources()
return (
<NodeSelector
{...props}

35
web/app/components/workflow/hooks/use-checklist.ts
View File

@ -20,6 +20,7 @@ import {
CUSTOM_NODE,
MAX_TREE_DEPTH,
} from '../constants'
import { useWorkflow } from '../hooks'
import type { ToolNodeType } from '../nodes/tool/types'
import { useNodesMetaData } from './use-nodes-meta-data'
import { useToastContext } from '@/app/components/base/toast'
@ -42,6 +43,7 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
const workflowTools = useStore(s => s.workflowTools)
const { data: strategyProviders } = useStrategyProviders()
const datasetsDetail = useDatasetsDetailStore(s => s.datasetsDetail)
const { getStartNodes } = useWorkflow()
const getCheckData = useCallback((data: CommonNodeType<{}>) => {
let checkData = data
@ -62,7 +64,14 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
const needWarningNodes = useMemo(() => {
const list = []
const { validNodes } = getValidTreeNodes(nodes.filter(node => node.type === CUSTOM_NODE), edges)
const filteredNodes = nodes.filter(node => node.type === CUSTOM_NODE)
const startNodes = getStartNodes(filteredNodes)
const validNodesFlattened = startNodes.map(startNode => getValidTreeNodes(startNode, filteredNodes, edges))
const validNodes = validNodesFlattened.reduce((acc, curr) => {
if (curr.validNodes)
acc.push(...curr.validNodes)
return acc
}, [] as Node[])
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i]
@ -126,7 +135,7 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
})
return list
}, [nodes, edges, buildInTools, customTools, workflowTools, language, nodesExtraData, t, strategyProviders, getCheckData])
}, [nodes, edges, buildInTools, customTools, workflowTools, language, nodesExtraData, t, strategyProviders, getCheckData, getStartNodes])
return needWarningNodes
}
@ -143,6 +152,7 @@ export const useChecklistBeforePublish = () => {
const { data: strategyProviders } = useStrategyProviders()
const updateDatasetsDetail = useDatasetsDetailStore(s => s.updateDatasetsDetail)
const updateTime = useRef(0)
const { getStartNodes } = useWorkflow()
const getCheckData = useCallback((data: CommonNodeType<{}>, datasets: DataSet[]) => {
let checkData = data
@ -170,16 +180,23 @@ export const useChecklistBeforePublish = () => {
getNodes,
edges,
} = store.getState()
const nodes = getNodes().filter(node => node.type === CUSTOM_NODE)
const {
validNodes,
maxDepth,
} = getValidTreeNodes(nodes.filter(node => node.type === CUSTOM_NODE), edges)
const nodes = getNodes()
const filteredNodes = nodes.filter(node => node.type === CUSTOM_NODE)
const startNodes = getStartNodes(filteredNodes)
const validNodesFlattened = startNodes.map(startNode => getValidTreeNodes(startNode, filteredNodes, edges))
const validNodes = validNodesFlattened.reduce((acc, curr) => {
if (curr.validNodes)
acc.push(...curr.validNodes)
return acc
}, [] as Node[])
const maxDepthArr = validNodesFlattened.map(item => item.maxDepth)
if (maxDepth > MAX_TREE_DEPTH) {
for (let i = 0; i < maxDepthArr.length; i++) {
if (maxDepthArr[i] > MAX_TREE_DEPTH) {
notify({ type: 'error', message: t('workflow.common.maxTreeDepth', { depth: MAX_TREE_DEPTH }) })
return false
}
}
// Before publish, we need to fetch datasets detail, in case of the settings of datasets have been changed
const knowledgeRetrievalNodes = nodes.filter(node => node.data.type === BlockEnum.KnowledgeRetrieval)
const allDatasetIds = knowledgeRetrievalNodes.reduce<string[]>((acc, node) => {
@ -243,7 +260,7 @@ export const useChecklistBeforePublish = () => {
}
return true
}, [store, notify, t, buildInTools, customTools, workflowTools, language, nodesExtraData, strategyProviders, updateDatasetsDetail, getCheckData])
}, [store, notify, t, buildInTools, customTools, workflowTools, language, nodesExtraData, strategyProviders, updateDatasetsDetail, getCheckData, getStartNodes])
return {
handleCheckBeforePublish,

5
web/app/components/workflow/hooks/use-tool-icon.ts
View File

@ -10,7 +10,6 @@ import {
import {
useStore,
} from '../store'
import { useDataSources } from '../block-selector/hooks'
import { CollectionType } from '@/app/components/tools/types'
import { canFindTool } from '@/utils'
@ -18,7 +17,7 @@ export const useToolIcon = (data: Node['data']) => {
const buildInTools = useStore(s => s.buildInTools)
const customTools = useStore(s => s.customTools)
const workflowTools = useStore(s => s.workflowTools)
const dataSourceList = useDataSources()
const dataSourceList = useStore(s => s.dataSourceList)
// const a = useStore(s => s.data)
const toolIcon = useMemo(() => {
if (data.type === BlockEnum.Tool) {
@ -32,7 +31,7 @@ export const useToolIcon = (data: Node['data']) => {
return targetTools.find(toolWithProvider => canFindTool(toolWithProvider.id, data.provider_id))?.icon
}
if (data.type === BlockEnum.DataSource)
return dataSourceList.find(toolWithProvider => canFindTool(toolWithProvider.id, data.provider_id))?.icon
return dataSourceList?.find(toolWithProvider => canFindTool(toolWithProvider.id, data.provider_id))?.icon
}, [data, buildInTools, customTools, workflowTools, dataSourceList])
return toolIcon

13
web/app/components/workflow/hooks/use-workflow.ts
View File

@ -347,8 +347,8 @@ export const useWorkflow = () => {
return []
}, [store])
const checkNestedParallelLimit = useCallback((nodes: Node[], edges: Edge[], targetNode?: Node) => {
const { id, parentId } = targetNode || {}
const getStartNodes = useCallback((nodes: Node[], currentNode?: Node) => {
const { id, parentId } = currentNode || {}
let startNodes: Node[] = []
if (parentId) {
@ -367,6 +367,12 @@ export const useWorkflow = () => {
if (!startNodes.length)
startNodes = getRootNodesById(id || '')
return startNodes
}, [nodesMap, getRootNodesById])
const checkNestedParallelLimit = useCallback((nodes: Node[], edges: Edge[], targetNode?: Node) => {
const startNodes = getStartNodes(nodes, targetNode)
for (let i = 0; i < startNodes.length; i++) {
const {
parallelList,
@ -389,7 +395,7 @@ export const useWorkflow = () => {
}
return true
}, [t, workflowStore, nodesMap, getRootNodesById])
}, [t, workflowStore, getStartNodes])
const isValidConnection = useCallback(({ source, sourceHandle, target }: Connection) => {
const {
@ -454,6 +460,7 @@ export const useWorkflow = () => {
getIterationNodeChildren,
getLoopNodeChildren,
getRootNodesById,
getStartNodes,
}
}

2
web/app/components/workflow/nodes/_base/node.tsx
View File

@ -146,7 +146,7 @@ const BaseNode: FC<BaseNodeProps> = ({
data.type === BlockEnum.DataSource && (
<div className='absolute inset-[-2px] top-[-22px] z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]'>
<div className='system-2xs-semibold-uppercase flex h-5 items-center px-2.5 text-text-tertiary'>
data source
{t('workflow.blocks.data-source')}
</div>
</div>
)

7
web/app/components/workflow/nodes/data-source/panel.tsx
View File

@ -65,14 +65,17 @@ const Panel: FC<NodePanelProps<DataSourceNodeType>> = ({ id, data }) => {
<GroupWithBox boxProps={{ withBorderBottom: true }}>
<Field
fieldTitleProps={{
title: 'supported file formats',
title: t('workflow.nodes.dataSource.supportedFileFormats'),
}}
>
<div className='rounded-lg bg-components-input-bg-normal p-1 pt-0'>
<TagInput
items={fileExtensions}
onChange={handleFileExtensionsChange}
placeholder='File extension, e.g. doc'
placeholder={t('workflow.nodes.dataSource.supportedFileFormatsPlaceholder')}
inputClassName='bg-transparent'
/>
</div>
</Field>
</GroupWithBox>
)

4
web/app/components/workflow/utils/workflow.ts
View File

@ -84,9 +84,7 @@ export const getNodesConnectedSourceOrTargetHandleIdsMap = (changes: ConnectedSo
return nodesConnectedSourceOrTargetHandleIdsMap
}
export const getValidTreeNodes = (nodes: Node[], edges: Edge[]) => {
const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
export const getValidTreeNodes = (startNode: Node, nodes: Node[], edges: Edge[]) => {
if (!startNode) {
return {
validNodes: [],

14
web/i18n/en-US/workflow.ts
View File

@ -770,11 +770,6 @@ const translation = {
currentLoopCount: 'Current loop count: {{count}}',
totalLoopCount: 'Total loop count: {{count}}',
},
knowledgeBase: {
chunkStructure: 'Chunk Structure',
changeChunkStructure: 'Change Chunk Structure',
aboutRetrieval: 'about retrieval method.',
},
note: {
addNote: 'Add Note',
editor: {
@ -889,6 +884,15 @@ const translation = {
cancel: 'Cancel',
},
},
dataSource: {
supportedFileFormats: 'Supported file formats',
supportedFileFormatsPlaceholder: 'File extension, e.g. doc',
},
knowledgeBase: {
chunkStructure: 'Chunk Structure',
changeChunkStructure: 'Change Chunk Structure',
aboutRetrieval: 'about retrieval method.',
},
},
tracing: {
stopBy: 'Stop by {{user}}',

14
web/i18n/zh-Hans/workflow.ts
View File

@ -771,11 +771,6 @@ const translation = {
currentLoopCount: '当前循环次数：{{count}}',
totalLoopCount: '总循环次数：{{count}}',
},
knowledgeBase: {
chunkStructure: '分段结构',
changeChunkStructure: '更改分段结构',
aboutRetrieval: '关于知识检索。',
},
note: {
addNote: '添加注释',
editor: {
@ -890,6 +885,15 @@ const translation = {
cancel: '取消',
},
},
dataSource: {
supportedFileFormats: '支持的文件格式',
supportedFileFormatsPlaceholder: '文件格式，例如：doc',
},
knowledgeBase: {
chunkStructure: '分段结构',
changeChunkStructure: '更改分段结构',
aboutRetrieval: '关于知识检索。',
},
},
tracing: {
stopBy: '由{{user}}终止',

8
web/service/use-pipeline.ts
View File

@ -160,12 +160,14 @@ export const usePublishedPipelineProcessingParams = (params: PipelineProcessingP
})
}
export const useDataSourceList = (enabled?: boolean) => {
export const useDataSourceList = (enabled: boolean, onSuccess: (v: ToolWithProvider[]) => void) => {
return useQuery<ToolWithProvider[]>({
enabled,
queryKey: [NAME_SPACE, 'data-source'],
queryFn: () => {
return get('/rag/pipelines/datasource-plugins')
queryFn: async () => {
const data = await get<ToolWithProvider[]>('/rag/pipelines/datasource-plugins')
onSuccess(data)
return data
},
retry: false,
})