use-workflow.ts 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606
  1. import {
  2. useCallback,
  3. useEffect,
  4. useMemo,
  5. useState,
  6. } from 'react'
  7. import dayjs from 'dayjs'
  8. import { uniqBy } from 'lodash-es'
  9. import { useTranslation } from 'react-i18next'
  10. import { useContext } from 'use-context-selector'
  11. import {
  12. getIncomers,
  13. getOutgoers,
  14. useStoreApi,
  15. } from 'reactflow'
  16. import type {
  17. Connection,
  18. } from 'reactflow'
  19. import type {
  20. Edge,
  21. Node,
  22. ValueSelector,
  23. } from '../types'
  24. import {
  25. BlockEnum,
  26. WorkflowRunningStatus,
  27. } from '../types'
  28. import {
  29. useStore,
  30. useWorkflowStore,
  31. } from '../store'
  32. import {
  33. getParallelInfo,
  34. } from '../utils'
  35. import {
  36. PARALLEL_DEPTH_LIMIT,
  37. PARALLEL_LIMIT,
  38. SUPPORT_OUTPUT_VARS_NODE,
  39. } from '../constants'
  40. import { CUSTOM_NOTE_NODE } from '../note-node/constants'
  41. import { findUsedVarNodes, getNodeOutputVars, updateNodeVars } from '../nodes/_base/components/variable/utils'
  42. import { useNodesExtraData } from './use-nodes-data'
  43. import { useWorkflowTemplate } from './use-workflow-template'
  44. import { useStore as useAppStore } from '@/app/components/app/store'
  45. import {
  46. fetchNodesDefaultConfigs,
  47. fetchPublishedWorkflow,
  48. fetchWorkflowDraft,
  49. syncWorkflowDraft,
  50. } from '@/service/workflow'
  51. import type { FetchWorkflowDraftResponse } from '@/types/workflow'
  52. import {
  53. fetchAllBuiltInTools,
  54. fetchAllCustomTools,
  55. fetchAllWorkflowTools,
  56. } from '@/service/tools'
  57. import I18n from '@/context/i18n'
  58. import { CollectionType } from '@/app/components/tools/types'
  59. import { CUSTOM_ITERATION_START_NODE } from '@/app/components/workflow/nodes/iteration-start/constants'
  60. export const useIsChatMode = () => {
  61. const appDetail = useAppStore(s => s.appDetail)
  62. return appDetail?.mode === 'advanced-chat'
  63. }
  64. export const useWorkflow = () => {
  65. const { t } = useTranslation()
  66. const { locale } = useContext(I18n)
  67. const store = useStoreApi()
  68. const workflowStore = useWorkflowStore()
  69. const nodesExtraData = useNodesExtraData()
  70. const setPanelWidth = useCallback((width: number) => {
  71. localStorage.setItem('workflow-node-panel-width', `${width}`)
  72. workflowStore.setState({ panelWidth: width })
  73. }, [workflowStore])
  74. const getTreeLeafNodes = useCallback((nodeId: string) => {
  75. const {
  76. getNodes,
  77. edges,
  78. } = store.getState()
  79. const nodes = getNodes()
  80. let startNode = nodes.find(node => node.data.type === BlockEnum.Start)
  81. const currentNode = nodes.find(node => node.id === nodeId)
  82. if (currentNode?.parentId)
  83. startNode = nodes.find(node => node.parentId === currentNode.parentId && node.type === CUSTOM_ITERATION_START_NODE)
  84. if (!startNode)
  85. return []
  86. const list: Node[] = []
  87. const preOrder = (root: Node, callback: (node: Node) => void) => {
  88. if (root.id === nodeId)
  89. return
  90. const outgoers = getOutgoers(root, nodes, edges)
  91. if (outgoers.length) {
  92. outgoers.forEach((outgoer) => {
  93. preOrder(outgoer, callback)
  94. })
  95. }
  96. else {
  97. if (root.id !== nodeId)
  98. callback(root)
  99. }
  100. }
  101. preOrder(startNode, (node) => {
  102. list.push(node)
  103. })
  104. const incomers = getIncomers({ id: nodeId } as Node, nodes, edges)
  105. list.push(...incomers)
  106. return uniqBy(list, 'id').filter((item) => {
  107. return SUPPORT_OUTPUT_VARS_NODE.includes(item.data.type)
  108. })
  109. }, [store])
  110. const getBeforeNodesInSameBranch = useCallback((nodeId: string, newNodes?: Node[], newEdges?: Edge[]) => {
  111. const {
  112. getNodes,
  113. edges,
  114. } = store.getState()
  115. const nodes = newNodes || getNodes()
  116. const currentNode = nodes.find(node => node.id === nodeId)
  117. const list: Node[] = []
  118. if (!currentNode)
  119. return list
  120. if (currentNode.parentId) {
  121. const parentNode = nodes.find(node => node.id === currentNode.parentId)
  122. if (parentNode) {
  123. const parentList = getBeforeNodesInSameBranch(parentNode.id)
  124. list.push(...parentList)
  125. }
  126. }
  127. const traverse = (root: Node, callback: (node: Node) => void) => {
  128. if (root) {
  129. const incomers = getIncomers(root, nodes, newEdges || edges)
  130. if (incomers.length) {
  131. incomers.forEach((node) => {
  132. if (!list.find(n => node.id === n.id)) {
  133. callback(node)
  134. traverse(node, callback)
  135. }
  136. })
  137. }
  138. }
  139. }
  140. traverse(currentNode, (node) => {
  141. list.push(node)
  142. })
  143. const length = list.length
  144. if (length) {
  145. return uniqBy(list, 'id').reverse().filter((item) => {
  146. return SUPPORT_OUTPUT_VARS_NODE.includes(item.data.type)
  147. })
  148. }
  149. return []
  150. }, [store])
  151. const getBeforeNodesInSameBranchIncludeParent = useCallback((nodeId: string, newNodes?: Node[], newEdges?: Edge[]) => {
  152. const nodes = getBeforeNodesInSameBranch(nodeId, newNodes, newEdges)
  153. const {
  154. getNodes,
  155. } = store.getState()
  156. const allNodes = getNodes()
  157. const node = allNodes.find(n => n.id === nodeId)
  158. const parentNodeId = node?.parentId
  159. const parentNode = allNodes.find(n => n.id === parentNodeId)
  160. if (parentNode)
  161. nodes.push(parentNode)
  162. return nodes
  163. }, [getBeforeNodesInSameBranch, store])
  164. const getAfterNodesInSameBranch = useCallback((nodeId: string) => {
  165. const {
  166. getNodes,
  167. edges,
  168. } = store.getState()
  169. const nodes = getNodes()
  170. const currentNode = nodes.find(node => node.id === nodeId)!
  171. if (!currentNode)
  172. return []
  173. const list: Node[] = [currentNode]
  174. const traverse = (root: Node, callback: (node: Node) => void) => {
  175. if (root) {
  176. const outgoers = getOutgoers(root, nodes, edges)
  177. if (outgoers.length) {
  178. outgoers.forEach((node) => {
  179. callback(node)
  180. traverse(node, callback)
  181. })
  182. }
  183. }
  184. }
  185. traverse(currentNode, (node) => {
  186. list.push(node)
  187. })
  188. return uniqBy(list, 'id')
  189. }, [store])
  190. const getBeforeNodeById = useCallback((nodeId: string) => {
  191. const {
  192. getNodes,
  193. edges,
  194. } = store.getState()
  195. const nodes = getNodes()
  196. const node = nodes.find(node => node.id === nodeId)!
  197. return getIncomers(node, nodes, edges)
  198. }, [store])
  199. const getIterationNodeChildren = useCallback((nodeId: string) => {
  200. const {
  201. getNodes,
  202. } = store.getState()
  203. const nodes = getNodes()
  204. return nodes.filter(node => node.parentId === nodeId)
  205. }, [store])
  206. const handleOutVarRenameChange = useCallback((nodeId: string, oldValeSelector: ValueSelector, newVarSelector: ValueSelector) => {
  207. const { getNodes, setNodes } = store.getState()
  208. const afterNodes = getAfterNodesInSameBranch(nodeId)
  209. const effectNodes = findUsedVarNodes(oldValeSelector, afterNodes)
  210. if (effectNodes.length > 0) {
  211. const newNodes = getNodes().map((node) => {
  212. if (effectNodes.find(n => n.id === node.id))
  213. return updateNodeVars(node, oldValeSelector, newVarSelector)
  214. return node
  215. })
  216. setNodes(newNodes)
  217. }
  218. // eslint-disable-next-line react-hooks/exhaustive-deps
  219. }, [store])
  220. const isVarUsedInNodes = useCallback((varSelector: ValueSelector) => {
  221. const nodeId = varSelector[0]
  222. const afterNodes = getAfterNodesInSameBranch(nodeId)
  223. const effectNodes = findUsedVarNodes(varSelector, afterNodes)
  224. return effectNodes.length > 0
  225. }, [getAfterNodesInSameBranch])
  226. const removeUsedVarInNodes = useCallback((varSelector: ValueSelector) => {
  227. const nodeId = varSelector[0]
  228. const { getNodes, setNodes } = store.getState()
  229. const afterNodes = getAfterNodesInSameBranch(nodeId)
  230. const effectNodes = findUsedVarNodes(varSelector, afterNodes)
  231. if (effectNodes.length > 0) {
  232. const newNodes = getNodes().map((node) => {
  233. if (effectNodes.find(n => n.id === node.id))
  234. return updateNodeVars(node, varSelector, [])
  235. return node
  236. })
  237. setNodes(newNodes)
  238. }
  239. }, [getAfterNodesInSameBranch, store])
  240. const isNodeVarsUsedInNodes = useCallback((node: Node, isChatMode: boolean) => {
  241. const outputVars = getNodeOutputVars(node, isChatMode)
  242. const isUsed = outputVars.some((varSelector) => {
  243. return isVarUsedInNodes(varSelector)
  244. })
  245. return isUsed
  246. }, [isVarUsedInNodes])
  247. const checkParallelLimit = useCallback((nodeId: string, nodeHandle = 'source') => {
  248. const {
  249. edges,
  250. } = store.getState()
  251. const connectedEdges = edges.filter(edge => edge.source === nodeId && edge.sourceHandle === nodeHandle)
  252. if (connectedEdges.length > PARALLEL_LIMIT - 1) {
  253. const { setShowTips } = workflowStore.getState()
  254. setShowTips(t('workflow.common.parallelTip.limit', { num: PARALLEL_LIMIT }))
  255. return false
  256. }
  257. return true
  258. }, [store, workflowStore, t])
  259. const checkNestedParallelLimit = useCallback((nodes: Node[], edges: Edge[], parentNodeId?: string) => {
  260. const {
  261. parallelList,
  262. hasAbnormalEdges,
  263. } = getParallelInfo(nodes, edges, parentNodeId)
  264. if (hasAbnormalEdges)
  265. return false
  266. for (let i = 0; i < parallelList.length; i++) {
  267. const parallel = parallelList[i]
  268. if (parallel.depth > PARALLEL_DEPTH_LIMIT) {
  269. const { setShowTips } = workflowStore.getState()
  270. setShowTips(t('workflow.common.parallelTip.depthLimit', { num: PARALLEL_DEPTH_LIMIT }))
  271. return false
  272. }
  273. }
  274. return true
  275. }, [t, workflowStore])
  276. const isValidConnection = useCallback(({ source, sourceHandle, target }: Connection) => {
  277. const {
  278. edges,
  279. getNodes,
  280. } = store.getState()
  281. const nodes = getNodes()
  282. const sourceNode: Node = nodes.find(node => node.id === source)!
  283. const targetNode: Node = nodes.find(node => node.id === target)!
  284. if (!checkParallelLimit(source!, sourceHandle || 'source'))
  285. return false
  286. if (sourceNode.type === CUSTOM_NOTE_NODE || targetNode.type === CUSTOM_NOTE_NODE)
  287. return false
  288. if (sourceNode.parentId !== targetNode.parentId)
  289. return false
  290. if (sourceNode && targetNode) {
  291. const sourceNodeAvailableNextNodes = nodesExtraData[sourceNode.data.type].availableNextNodes
  292. const targetNodeAvailablePrevNodes = [...nodesExtraData[targetNode.data.type].availablePrevNodes, BlockEnum.Start]
  293. if (!sourceNodeAvailableNextNodes.includes(targetNode.data.type))
  294. return false
  295. if (!targetNodeAvailablePrevNodes.includes(sourceNode.data.type))
  296. return false
  297. }
  298. const hasCycle = (node: Node, visited = new Set()) => {
  299. if (visited.has(node.id))
  300. return false
  301. visited.add(node.id)
  302. for (const outgoer of getOutgoers(node, nodes, edges)) {
  303. if (outgoer.id === source)
  304. return true
  305. if (hasCycle(outgoer, visited))
  306. return true
  307. }
  308. }
  309. return !hasCycle(targetNode)
  310. }, [store, nodesExtraData, checkParallelLimit])
  311. const formatTimeFromNow = useCallback((time: number) => {
  312. return dayjs(time).locale(locale === 'zh-Hans' ? 'zh-cn' : locale).fromNow()
  313. }, [locale])
  314. const getNode = useCallback((nodeId?: string) => {
  315. const { getNodes } = store.getState()
  316. const nodes = getNodes()
  317. return nodes.find(node => node.id === nodeId) || nodes.find(node => node.data.type === BlockEnum.Start)
  318. }, [store])
  319. return {
  320. setPanelWidth,
  321. getTreeLeafNodes,
  322. getBeforeNodesInSameBranch,
  323. getBeforeNodesInSameBranchIncludeParent,
  324. getAfterNodesInSameBranch,
  325. handleOutVarRenameChange,
  326. isVarUsedInNodes,
  327. removeUsedVarInNodes,
  328. isNodeVarsUsedInNodes,
  329. checkParallelLimit,
  330. checkNestedParallelLimit,
  331. isValidConnection,
  332. formatTimeFromNow,
  333. getNode,
  334. getBeforeNodeById,
  335. getIterationNodeChildren,
  336. }
  337. }
  338. export const useFetchToolsData = () => {
  339. const workflowStore = useWorkflowStore()
  340. const handleFetchAllTools = useCallback(async (type: string) => {
  341. if (type === 'builtin') {
  342. const buildInTools = await fetchAllBuiltInTools()
  343. workflowStore.setState({
  344. buildInTools: buildInTools || [],
  345. })
  346. }
  347. if (type === 'custom') {
  348. const customTools = await fetchAllCustomTools()
  349. workflowStore.setState({
  350. customTools: customTools || [],
  351. })
  352. }
  353. if (type === 'workflow') {
  354. const workflowTools = await fetchAllWorkflowTools()
  355. workflowStore.setState({
  356. workflowTools: workflowTools || [],
  357. })
  358. }
  359. }, [workflowStore])
  360. return {
  361. handleFetchAllTools,
  362. }
  363. }
  364. export const useWorkflowInit = () => {
  365. const workflowStore = useWorkflowStore()
  366. const {
  367. nodes: nodesTemplate,
  368. edges: edgesTemplate,
  369. } = useWorkflowTemplate()
  370. const { handleFetchAllTools } = useFetchToolsData()
  371. const appDetail = useAppStore(state => state.appDetail)!
  372. const setSyncWorkflowDraftHash = useStore(s => s.setSyncWorkflowDraftHash)
  373. const [data, setData] = useState<FetchWorkflowDraftResponse>()
  374. const [isLoading, setIsLoading] = useState(true)
  375. workflowStore.setState({ appId: appDetail.id })
  376. const handleGetInitialWorkflowData = useCallback(async () => {
  377. try {
  378. const res = await fetchWorkflowDraft(`/apps/${appDetail.id}/workflows/draft`)
  379. setData(res)
  380. workflowStore.setState({
  381. envSecrets: (res.environment_variables || []).filter(env => env.value_type === 'secret').reduce((acc, env) => {
  382. acc[env.id] = env.value
  383. return acc
  384. }, {} as Record<string, string>),
  385. environmentVariables: res.environment_variables?.map(env => env.value_type === 'secret' ? { ...env, value: '[__HIDDEN__]' } : env) || [],
  386. // #TODO chatVar sync#
  387. conversationVariables: res.conversation_variables || [],
  388. })
  389. setSyncWorkflowDraftHash(res.hash)
  390. setIsLoading(false)
  391. }
  392. catch (error: any) {
  393. if (error && error.json && !error.bodyUsed && appDetail) {
  394. error.json().then((err: any) => {
  395. if (err.code === 'draft_workflow_not_exist') {
  396. workflowStore.setState({ notInitialWorkflow: true })
  397. syncWorkflowDraft({
  398. url: `/apps/${appDetail.id}/workflows/draft`,
  399. params: {
  400. graph: {
  401. nodes: nodesTemplate,
  402. edges: edgesTemplate,
  403. },
  404. features: {
  405. retriever_resource: { enabled: true },
  406. },
  407. environment_variables: [],
  408. conversation_variables: [],
  409. },
  410. }).then((res) => {
  411. workflowStore.getState().setDraftUpdatedAt(res.updated_at)
  412. handleGetInitialWorkflowData()
  413. })
  414. }
  415. })
  416. }
  417. }
  418. }, [appDetail, nodesTemplate, edgesTemplate, workflowStore, setSyncWorkflowDraftHash])
  419. useEffect(() => {
  420. handleGetInitialWorkflowData()
  421. }, [])
  422. const handleFetchPreloadData = useCallback(async () => {
  423. try {
  424. const nodesDefaultConfigsData = await fetchNodesDefaultConfigs(`/apps/${appDetail?.id}/workflows/default-workflow-block-configs`)
  425. const publishedWorkflow = await fetchPublishedWorkflow(`/apps/${appDetail?.id}/workflows/publish`)
  426. workflowStore.setState({
  427. nodesDefaultConfigs: nodesDefaultConfigsData.reduce((acc, block) => {
  428. if (!acc[block.type])
  429. acc[block.type] = { ...block.config }
  430. return acc
  431. }, {} as Record<string, any>),
  432. })
  433. workflowStore.getState().setPublishedAt(publishedWorkflow?.created_at)
  434. }
  435. catch (e) {
  436. }
  437. }, [workflowStore, appDetail])
  438. useEffect(() => {
  439. handleFetchPreloadData()
  440. handleFetchAllTools('builtin')
  441. handleFetchAllTools('custom')
  442. handleFetchAllTools('workflow')
  443. }, [handleFetchPreloadData, handleFetchAllTools])
  444. useEffect(() => {
  445. if (data) {
  446. workflowStore.getState().setDraftUpdatedAt(data.updated_at)
  447. workflowStore.getState().setToolPublished(data.tool_published)
  448. }
  449. }, [data, workflowStore])
  450. return {
  451. data,
  452. isLoading,
  453. }
  454. }
  455. export const useWorkflowReadOnly = () => {
  456. const workflowStore = useWorkflowStore()
  457. const workflowRunningData = useStore(s => s.workflowRunningData)
  458. const getWorkflowReadOnly = useCallback(() => {
  459. return workflowStore.getState().workflowRunningData?.result.status === WorkflowRunningStatus.Running
  460. }, [workflowStore])
  461. return {
  462. workflowReadOnly: workflowRunningData?.result.status === WorkflowRunningStatus.Running,
  463. getWorkflowReadOnly,
  464. }
  465. }
  466. export const useNodesReadOnly = () => {
  467. const workflowStore = useWorkflowStore()
  468. const workflowRunningData = useStore(s => s.workflowRunningData)
  469. const historyWorkflowData = useStore(s => s.historyWorkflowData)
  470. const isRestoring = useStore(s => s.isRestoring)
  471. const getNodesReadOnly = useCallback(() => {
  472. const {
  473. workflowRunningData,
  474. historyWorkflowData,
  475. isRestoring,
  476. } = workflowStore.getState()
  477. return workflowRunningData?.result.status === WorkflowRunningStatus.Running || historyWorkflowData || isRestoring
  478. }, [workflowStore])
  479. return {
  480. nodesReadOnly: !!(workflowRunningData?.result.status === WorkflowRunningStatus.Running || historyWorkflowData || isRestoring),
  481. getNodesReadOnly,
  482. }
  483. }
  484. export const useToolIcon = (data: Node['data']) => {
  485. const buildInTools = useStore(s => s.buildInTools)
  486. const customTools = useStore(s => s.customTools)
  487. const workflowTools = useStore(s => s.workflowTools)
  488. const toolIcon = useMemo(() => {
  489. if (data.type === BlockEnum.Tool) {
  490. let targetTools = buildInTools
  491. if (data.provider_type === CollectionType.builtIn)
  492. targetTools = buildInTools
  493. else if (data.provider_type === CollectionType.custom)
  494. targetTools = customTools
  495. else
  496. targetTools = workflowTools
  497. return targetTools.find(toolWithProvider => toolWithProvider.id === data.provider_id)?.icon
  498. }
  499. }, [data, buildInTools, customTools, workflowTools])
  500. return toolIcon
  501. }
  502. export const useIsNodeInIteration = (iterationId: string) => {
  503. const store = useStoreApi()
  504. const isNodeInIteration = useCallback((nodeId: string) => {
  505. const {
  506. getNodes,
  507. } = store.getState()
  508. const nodes = getNodes()
  509. const node = nodes.find(node => node.id === nodeId)
  510. if (!node)
  511. return false
  512. if (node.parentId === iterationId)
  513. return true
  514. return false
  515. }, [iterationId, store])
  516. return {
  517. isNodeInIteration,
  518. }
  519. }