use-workflow.ts 19 KB

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