{
isRunning && (
handleStopRun(workflowRunningData?.task_id || '')}
+ onClick={handleStop}
>
diff --git a/web/app/components/workflow/header/running-title.tsx b/web/app/components/workflow/header/running-title.tsx
index 0460a96c91..95e763ead7 100644
--- a/web/app/components/workflow/header/running-title.tsx
+++ b/web/app/components/workflow/header/running-title.tsx
@@ -2,6 +2,7 @@ import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import { useIsChatMode } from '../hooks'
import { useStore } from '../store'
+import { formatWorkflowRunIdentifier } from '../utils'
import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'
const RunningTitle = () => {
@@ -12,7 +13,7 @@ const RunningTitle = () => {
return (
- {isChatMode ? `Test Chat#${historyWorkflowData?.sequence_number}` : `Test Run#${historyWorkflowData?.sequence_number}`}
+ {isChatMode ? `Test Chat${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}` : `Test Run${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}`}
·
{t('workflow.common.viewOnly')}
diff --git a/web/app/components/workflow/header/view-history.tsx b/web/app/components/workflow/header/view-history.tsx
index 21b4462867..08f952cd1a 100644
--- a/web/app/components/workflow/header/view-history.tsx
+++ b/web/app/components/workflow/header/view-history.tsx
@@ -18,6 +18,7 @@ import {
useWorkflowRun,
} from '../hooks'
import { ControlMode, WorkflowRunningStatus } from '../types'
+import { formatWorkflowRunIdentifier } from '../utils'
import cn from '@/utils/classnames'
import {
PortalToFollowElem,
@@ -199,7 +200,7 @@ const ViewHistory = ({
item.id === historyWorkflowData?.id && 'text-text-accent',
)}
>
- {`Test ${isChatMode ? 'Chat' : 'Run'} #${item.sequence_number}`}
+ {`Test ${isChatMode ? 'Chat' : 'Run'}${formatWorkflowRunIdentifier(item.finished_at)}`}
{item.created_by_account?.name} · {formatTimeFromNow((item.finished_at || item.created_at) * 1000)}
diff --git a/web/app/components/workflow/hooks-store/store.ts b/web/app/components/workflow/hooks-store/store.ts
index 9f5e1a6650..4e8f74c774 100644
--- a/web/app/components/workflow/hooks-store/store.ts
+++ b/web/app/components/workflow/hooks-store/store.ts
@@ -7,6 +7,12 @@ import {
} from 'zustand'
import { createStore } from 'zustand/vanilla'
import { HooksStoreContext } from './provider'
+import type { IOtherOptions } from '@/service/base'
+import type { VarInInspect } from '@/types/workflow'
+import type {
+ Node,
+ ValueSelector,
+} from '@/app/components/workflow/types'
type CommonHooksFnMap = {
doSyncWorkflowDraft: (
@@ -22,11 +28,30 @@ type CommonHooksFnMap = {
handleBackupDraft: () => void
handleLoadBackupDraft: () => void
handleRestoreFromPublishedWorkflow: (...args: any[]) => void
- handleRun: (...args: any[]) => void
+ handleRun: (params: any, callback?: IOtherOptions,) => void
handleStopRun: (...args: any[]) => void
handleStartWorkflowRun: () => void
handleWorkflowStartRunInWorkflow: () => void
handleWorkflowStartRunInChatflow: () => void
+ fetchInspectVars: () => Promise
+ hasNodeInspectVars: (nodeId: string) => boolean
+ hasSetInspectVar: (nodeId: string, name: string, sysVars: VarInInspect[], conversationVars: VarInInspect[]) => boolean
+ fetchInspectVarValue: (selector: ValueSelector) => Promise
+ editInspectVarValue: (nodeId: string, varId: string, value: any) => Promise
+ renameInspectVarName: (nodeId: string, oldName: string, newName: string) => Promise
+ appendNodeInspectVars: (nodeId: string, payload: VarInInspect[], allNodes: Node[]) => void
+ deleteInspectVar: (nodeId: string, varId: string) => Promise
+ deleteNodeInspectorVars: (nodeId: string) => Promise
+ deleteAllInspectorVars: () => Promise
+ isInspectVarEdited: (nodeId: string, name: string) => boolean
+ resetToLastRunVar: (nodeId: string, varId: string) => Promise
+ invalidateSysVarValues: () => void
+ resetConversationVar: (varId: string) => Promise
+ invalidateConversationVarValues: () => void
+ configsMap?: {
+ conversationVarsUrl: string
+ systemVarsUrl: string
+ }
}
export type Shape = {
@@ -45,6 +70,21 @@ export const createHooksStore = ({
handleStartWorkflowRun = noop,
handleWorkflowStartRunInWorkflow = noop,
handleWorkflowStartRunInChatflow = noop,
+ fetchInspectVars = async () => noop(),
+ hasNodeInspectVars = () => false,
+ hasSetInspectVar = () => false,
+ fetchInspectVarValue = async () => noop(),
+ editInspectVarValue = async () => noop(),
+ renameInspectVarName = async () => noop(),
+ appendNodeInspectVars = () => noop(),
+ deleteInspectVar = async () => noop(),
+ deleteNodeInspectorVars = async () => noop(),
+ deleteAllInspectorVars = async () => noop(),
+ isInspectVarEdited = () => false,
+ resetToLastRunVar = async () => noop(),
+ invalidateSysVarValues = noop,
+ resetConversationVar = async () => noop(),
+ invalidateConversationVarValues = noop,
}: Partial) => {
return createStore(set => ({
refreshAll: props => set(state => ({ ...state, ...props })),
@@ -59,6 +99,21 @@ export const createHooksStore = ({
handleStartWorkflowRun,
handleWorkflowStartRunInWorkflow,
handleWorkflowStartRunInChatflow,
+ fetchInspectVars,
+ hasNodeInspectVars,
+ hasSetInspectVar,
+ fetchInspectVarValue,
+ editInspectVarValue,
+ renameInspectVarName,
+ appendNodeInspectVars,
+ deleteInspectVar,
+ deleteNodeInspectorVars,
+ deleteAllInspectorVars,
+ isInspectVarEdited,
+ resetToLastRunVar,
+ invalidateSysVarValues,
+ resetConversationVar,
+ invalidateConversationVarValues,
}))
}
diff --git a/web/app/components/workflow/hooks/index.ts b/web/app/components/workflow/hooks/index.ts
index fda0f50aa6..c2eebb0533 100644
--- a/web/app/components/workflow/hooks/index.ts
+++ b/web/app/components/workflow/hooks/index.ts
@@ -17,3 +17,5 @@ export * from './use-workflow-interactions'
export * from './use-workflow-mode'
export * from './use-format-time-from-now'
export * from './use-workflow-refresh-draft'
+export * from './use-inspect-vars-crud'
+export * from './use-set-workflow-vars-with-value'
diff --git a/web/app/components/workflow/hooks/use-checklist.ts b/web/app/components/workflow/hooks/use-checklist.ts
index c1b0189b8b..47ebaa6710 100644
--- a/web/app/components/workflow/hooks/use-checklist.ts
+++ b/web/app/components/workflow/hooks/use-checklist.ts
@@ -9,6 +9,7 @@ import type {
CommonNodeType,
Edge,
Node,
+ ValueSelector,
} from '../types'
import { BlockEnum } from '../types'
import { useStore } from '../store'
@@ -18,7 +19,6 @@ import {
} from '../utils'
import {
CUSTOM_NODE,
- MAX_TREE_DEPTH,
} from '../constants'
import type { ToolNodeType } from '../nodes/tool/types'
import { useIsChatMode } from './use-workflow'
@@ -33,6 +33,9 @@ import { useDatasetsDetailStore } from '../datasets-detail-store/store'
import type { KnowledgeRetrievalNodeType } from '../nodes/knowledge-retrieval/types'
import type { DataSet } from '@/models/datasets'
import { fetchDatasets } from '@/service/datasets'
+import { MAX_TREE_DEPTH } from '@/config'
+import useNodesAvailableVarList from './use-nodes-available-var-list'
+import { getNodeUsedVars, isConversationVar, isENV, isSystemVar } from '../nodes/_base/components/variable/utils'
export const useChecklist = (nodes: Node[], edges: Edge[]) => {
const { t } = useTranslation()
@@ -45,6 +48,8 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
const { data: strategyProviders } = useStrategyProviders()
const datasetsDetail = useDatasetsDetailStore(s => s.datasetsDetail)
+ const map = useNodesAvailableVarList(nodes)
+
const getCheckData = useCallback((data: CommonNodeType<{}>) => {
let checkData = data
if (data.type === BlockEnum.KnowledgeRetrieval) {
@@ -70,6 +75,7 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
const node = nodes[i]
let toolIcon
let moreDataForCheckValid
+ let usedVars: ValueSelector[] = []
if (node.data.type === BlockEnum.Tool) {
const { provider_type } = node.data
@@ -84,8 +90,7 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
if (provider_type === CollectionType.workflow)
toolIcon = workflowTools.find(tool => tool.id === node.data.provider_id)?.icon
}
-
- if (node.data.type === BlockEnum.Agent) {
+ else if (node.data.type === BlockEnum.Agent) {
const data = node.data as AgentNodeType
const isReadyForCheckValid = !!strategyProviders
const provider = strategyProviders?.find(provider => provider.declaration.identity.name === data.agent_strategy_provider_name)
@@ -97,10 +102,34 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
isReadyForCheckValid,
}
}
+ else {
+ usedVars = getNodeUsedVars(node).filter(v => v.length > 0)
+ }
if (node.type === CUSTOM_NODE) {
const checkData = getCheckData(node.data)
- const { errorMessage } = nodesExtraData[node.data.type].checkValid(checkData, t, moreDataForCheckValid)
+ let { errorMessage } = nodesExtraData[node.data.type].checkValid(checkData, t, moreDataForCheckValid)
+
+ if (!errorMessage) {
+ const availableVars = map[node.id].availableVars
+
+ for (const variable of usedVars) {
+ const isEnv = isENV(variable)
+ const isConvVar = isConversationVar(variable)
+ const isSysVar = isSystemVar(variable)
+ if (!isEnv && !isConvVar && !isSysVar) {
+ const usedNode = availableVars.find(v => v.nodeId === variable?.[0])
+ if (usedNode) {
+ const usedVar = usedNode.vars.find(v => v.variable === variable?.[1])
+ if (!usedVar)
+ errorMessage = t('workflow.errorMsg.invalidVariable')
+ }
+ else {
+ errorMessage = t('workflow.errorMsg.invalidVariable')
+ }
+ }
+ }
+ }
if (errorMessage || !validNodes.find(n => n.id === node.id)) {
list.push({
diff --git a/web/app/components/workflow/hooks/use-fetch-workflow-inspect-vars.ts b/web/app/components/workflow/hooks/use-fetch-workflow-inspect-vars.ts
new file mode 100644
index 0000000000..27a9ea9d2d
--- /dev/null
+++ b/web/app/components/workflow/hooks/use-fetch-workflow-inspect-vars.ts
@@ -0,0 +1,78 @@
+import { useCallback } from 'react'
+import type { NodeWithVar, VarInInspect } from '@/types/workflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { useStoreApi } from 'reactflow'
+import type { Node } from '@/app/components/workflow/types'
+import { fetchAllInspectVars } from '@/service/workflow'
+import { useInvalidateConversationVarValues, useInvalidateSysVarValues } from '@/service/use-workflow'
+import { useNodesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-nodes-interactions-without-sync'
+
+type Params = {
+ flowId: string
+ conversationVarsUrl: string
+ systemVarsUrl: string
+}
+
+export const useSetWorkflowVarsWithValue = ({
+ flowId,
+ conversationVarsUrl,
+ systemVarsUrl,
+}: Params) => {
+ const workflowStore = useWorkflowStore()
+ const store = useStoreApi()
+ const invalidateConversationVarValues = useInvalidateConversationVarValues(conversationVarsUrl)
+ const invalidateSysVarValues = useInvalidateSysVarValues(systemVarsUrl)
+ const { handleCancelAllNodeSuccessStatus } = useNodesInteractionsWithoutSync()
+
+ const setInspectVarsToStore = useCallback((inspectVars: VarInInspect[]) => {
+ const { setNodesWithInspectVars } = workflowStore.getState()
+ const { getNodes } = store.getState()
+ const nodeArr = getNodes()
+ const nodesKeyValue: Record = {}
+ nodeArr.forEach((node) => {
+ nodesKeyValue[node.id] = node
+ })
+
+ const withValueNodeIds: Record = {}
+ inspectVars.forEach((varItem) => {
+ const nodeId = varItem.selector[0]
+
+ const node = nodesKeyValue[nodeId]
+ if (!node)
+ return
+ withValueNodeIds[nodeId] = true
+ })
+ const withValueNodes = Object.keys(withValueNodeIds).map((nodeId) => {
+ return nodesKeyValue[nodeId]
+ })
+
+ const res: NodeWithVar[] = withValueNodes.map((node) => {
+ const nodeId = node.id
+ const varsUnderTheNode = inspectVars.filter((varItem) => {
+ return varItem.selector[0] === nodeId
+ })
+ const nodeWithVar = {
+ nodeId,
+ nodePayload: node.data,
+ nodeType: node.data.type,
+ title: node.data.title,
+ vars: varsUnderTheNode,
+ isSingRunRunning: false,
+ isValueFetched: false,
+ }
+ return nodeWithVar
+ })
+ setNodesWithInspectVars(res)
+ }, [workflowStore, store])
+
+ const fetchInspectVars = useCallback(async () => {
+ invalidateConversationVarValues()
+ invalidateSysVarValues()
+ const data = await fetchAllInspectVars(flowId)
+ setInspectVarsToStore(data)
+ handleCancelAllNodeSuccessStatus() // to make sure clear node output show the unset status
+ }, [invalidateConversationVarValues, invalidateSysVarValues, flowId, setInspectVarsToStore, handleCancelAllNodeSuccessStatus])
+ return {
+ fetchInspectVars,
+ }
+}
diff --git a/web/app/components/workflow/hooks/use-inspect-vars-crud-common.ts b/web/app/components/workflow/hooks/use-inspect-vars-crud-common.ts
new file mode 100644
index 0000000000..ffcfd81666
--- /dev/null
+++ b/web/app/components/workflow/hooks/use-inspect-vars-crud-common.ts
@@ -0,0 +1,240 @@
+import { fetchNodeInspectVars } from '@/service/workflow'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import type { ValueSelector } from '@/app/components/workflow/types'
+import type { VarInInspect } from '@/types/workflow'
+import { VarInInspectType } from '@/types/workflow'
+import {
+ useDeleteAllInspectorVars,
+ useDeleteInspectVar,
+ useDeleteNodeInspectorVars,
+ useEditInspectorVar,
+ useInvalidateConversationVarValues,
+ useInvalidateSysVarValues,
+ useResetConversationVar,
+ useResetToLastRunValue,
+} from '@/service/use-workflow'
+import { useCallback } from 'react'
+import { isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import produce from 'immer'
+import type { Node } from '@/app/components/workflow/types'
+import { useNodesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-nodes-interactions-without-sync'
+import { useEdgesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-edges-interactions-without-sync'
+
+type Params = {
+ flowId: string
+ conversationVarsUrl: string
+ systemVarsUrl: string
+}
+export const useInspectVarsCrudCommon = ({
+ flowId,
+ conversationVarsUrl,
+ systemVarsUrl,
+}: Params) => {
+ const workflowStore = useWorkflowStore()
+ const invalidateConversationVarValues = useInvalidateConversationVarValues(conversationVarsUrl!)
+ const { mutateAsync: doResetConversationVar } = useResetConversationVar(flowId)
+ const { mutateAsync: doResetToLastRunValue } = useResetToLastRunValue(flowId)
+ const invalidateSysVarValues = useInvalidateSysVarValues(systemVarsUrl!)
+
+ const { mutateAsync: doDeleteAllInspectorVars } = useDeleteAllInspectorVars(flowId)
+ const { mutate: doDeleteNodeInspectorVars } = useDeleteNodeInspectorVars(flowId)
+ const { mutate: doDeleteInspectVar } = useDeleteInspectVar(flowId)
+
+ const { mutateAsync: doEditInspectorVar } = useEditInspectorVar(flowId)
+ const { handleCancelNodeSuccessStatus } = useNodesInteractionsWithoutSync()
+ const { handleEdgeCancelRunningStatus } = useEdgesInteractionsWithoutSync()
+ const getNodeInspectVars = useCallback((nodeId: string) => {
+ const { nodesWithInspectVars } = workflowStore.getState()
+ const node = nodesWithInspectVars.find(node => node.nodeId === nodeId)
+ return node
+ }, [workflowStore])
+
+ const getVarId = useCallback((nodeId: string, varName: string) => {
+ const node = getNodeInspectVars(nodeId)
+ if (!node)
+ return undefined
+ const varId = node.vars.find((varItem) => {
+ return varItem.selector[1] === varName
+ })?.id
+ return varId
+ }, [getNodeInspectVars])
+
+ const getInspectVar = useCallback((nodeId: string, name: string): VarInInspect | undefined => {
+ const node = getNodeInspectVars(nodeId)
+ if (!node)
+ return undefined
+
+ const variable = node.vars.find((varItem) => {
+ return varItem.name === name
+ })
+ return variable
+ }, [getNodeInspectVars])
+
+ const hasSetInspectVar = useCallback((nodeId: string, name: string, sysVars: VarInInspect[], conversationVars: VarInInspect[]) => {
+ const isEnv = isENV([nodeId])
+ if (isEnv) // always have value
+ return true
+ const isSys = isSystemVar([nodeId])
+ if (isSys)
+ return sysVars.some(varItem => varItem.selector?.[1]?.replace('sys.', '') === name)
+ const isChatVar = isConversationVar([nodeId])
+ if (isChatVar)
+ return conversationVars.some(varItem => varItem.selector?.[1] === name)
+ return getInspectVar(nodeId, name) !== undefined
+ }, [getInspectVar])
+
+ const hasNodeInspectVars = useCallback((nodeId: string) => {
+ return !!getNodeInspectVars(nodeId)
+ }, [getNodeInspectVars])
+
+ const fetchInspectVarValue = useCallback(async (selector: ValueSelector) => {
+ const {
+ appId,
+ setNodeInspectVars,
+ } = workflowStore.getState()
+ const nodeId = selector[0]
+ const isSystemVar = nodeId === 'sys'
+ const isConversationVar = nodeId === 'conversation'
+ if (isSystemVar) {
+ invalidateSysVarValues()
+ return
+ }
+ if (isConversationVar) {
+ invalidateConversationVarValues()
+ return
+ }
+ const vars = await fetchNodeInspectVars(appId, nodeId)
+ setNodeInspectVars(nodeId, vars)
+ }, [workflowStore, invalidateSysVarValues, invalidateConversationVarValues])
+
+ // after last run would call this
+ const appendNodeInspectVars = useCallback((nodeId: string, payload: VarInInspect[], allNodes: Node[]) => {
+ const {
+ nodesWithInspectVars,
+ setNodesWithInspectVars,
+ } = workflowStore.getState()
+ const nodes = produce(nodesWithInspectVars, (draft) => {
+ const nodeInfo = allNodes.find(node => node.id === nodeId)
+ if (nodeInfo) {
+ const index = draft.findIndex(node => node.nodeId === nodeId)
+ if (index === -1) {
+ draft.unshift({
+ nodeId,
+ nodeType: nodeInfo.data.type,
+ title: nodeInfo.data.title,
+ vars: payload,
+ nodePayload: nodeInfo.data,
+ })
+ }
+ else {
+ draft[index].vars = payload
+ // put the node to the topAdd commentMore actions
+ draft.unshift(draft.splice(index, 1)[0])
+ }
+ }
+ })
+ setNodesWithInspectVars(nodes)
+ handleCancelNodeSuccessStatus(nodeId)
+ }, [workflowStore, handleCancelNodeSuccessStatus])
+
+ const hasNodeInspectVar = useCallback((nodeId: string, varId: string) => {
+ const { nodesWithInspectVars } = workflowStore.getState()
+ const targetNode = nodesWithInspectVars.find(item => item.nodeId === nodeId)
+ if(!targetNode || !targetNode.vars)
+ return false
+ return targetNode.vars.some(item => item.id === varId)
+ }, [workflowStore])
+
+ const deleteInspectVar = useCallback(async (nodeId: string, varId: string) => {
+ const { deleteInspectVar } = workflowStore.getState()
+ if(hasNodeInspectVar(nodeId, varId)) {
+ await doDeleteInspectVar(varId)
+ deleteInspectVar(nodeId, varId)
+ }
+ }, [doDeleteInspectVar, workflowStore, hasNodeInspectVar])
+
+ const resetConversationVar = useCallback(async (varId: string) => {
+ await doResetConversationVar(varId)
+ invalidateConversationVarValues()
+ }, [doResetConversationVar, invalidateConversationVarValues])
+
+ const deleteNodeInspectorVars = useCallback(async (nodeId: string) => {
+ const { deleteNodeInspectVars } = workflowStore.getState()
+ if (hasNodeInspectVars(nodeId)) {
+ await doDeleteNodeInspectorVars(nodeId)
+ deleteNodeInspectVars(nodeId)
+ }
+ }, [doDeleteNodeInspectorVars, workflowStore, hasNodeInspectVars])
+
+ const deleteAllInspectorVars = useCallback(async () => {
+ const { deleteAllInspectVars } = workflowStore.getState()
+ await doDeleteAllInspectorVars()
+ await invalidateConversationVarValues()
+ await invalidateSysVarValues()
+ deleteAllInspectVars()
+ handleEdgeCancelRunningStatus()
+ }, [doDeleteAllInspectorVars, invalidateConversationVarValues, invalidateSysVarValues, workflowStore, handleEdgeCancelRunningStatus])
+
+ const editInspectVarValue = useCallback(async (nodeId: string, varId: string, value: any) => {
+ const { setInspectVarValue } = workflowStore.getState()
+ await doEditInspectorVar({
+ varId,
+ value,
+ })
+ setInspectVarValue(nodeId, varId, value)
+ if (nodeId === VarInInspectType.conversation)
+ invalidateConversationVarValues()
+ if (nodeId === VarInInspectType.system)
+ invalidateSysVarValues()
+ }, [doEditInspectorVar, invalidateConversationVarValues, invalidateSysVarValues, workflowStore])
+
+ const renameInspectVarName = useCallback(async (nodeId: string, oldName: string, newName: string) => {
+ const { renameInspectVarName } = workflowStore.getState()
+ const varId = getVarId(nodeId, oldName)
+ if (!varId)
+ return
+
+ const newSelector = [nodeId, newName]
+ await doEditInspectorVar({
+ varId,
+ name: newName,
+ })
+ renameInspectVarName(nodeId, varId, newSelector)
+ }, [doEditInspectorVar, getVarId, workflowStore])
+
+ const isInspectVarEdited = useCallback((nodeId: string, name: string) => {
+ const inspectVar = getInspectVar(nodeId, name)
+ if (!inspectVar)
+ return false
+
+ return inspectVar.edited
+ }, [getInspectVar])
+
+ const resetToLastRunVar = useCallback(async (nodeId: string, varId: string) => {
+ const { resetToLastRunVar } = workflowStore.getState()
+ const isSysVar = nodeId === 'sys'
+ const data = await doResetToLastRunValue(varId)
+
+ if(isSysVar)
+ invalidateSysVarValues()
+ else
+ resetToLastRunVar(nodeId, varId, data.value)
+ }, [doResetToLastRunValue, invalidateSysVarValues, workflowStore])
+
+ return {
+ hasNodeInspectVars,
+ hasSetInspectVar,
+ fetchInspectVarValue,
+ editInspectVarValue,
+ renameInspectVarName,
+ appendNodeInspectVars,
+ deleteInspectVar,
+ deleteNodeInspectorVars,
+ deleteAllInspectorVars,
+ isInspectVarEdited,
+ resetToLastRunVar,
+ invalidateSysVarValues,
+ resetConversationVar,
+ invalidateConversationVarValues,
+ }
+}
diff --git a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
new file mode 100644
index 0000000000..50188185c2
--- /dev/null
+++ b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
@@ -0,0 +1,49 @@
+import { useStore } from '../store'
+import { useHooksStore } from '@/app/components/workflow/hooks-store'
+import {
+ useConversationVarValues,
+ useSysVarValues,
+} from '@/service/use-workflow'
+
+const useInspectVarsCrud = () => {
+ const nodesWithInspectVars = useStore(s => s.nodesWithInspectVars)
+ const configsMap = useHooksStore(s => s.configsMap)
+ const { data: conversationVars } = useConversationVarValues(configsMap?.conversationVarsUrl)
+ const { data: systemVars } = useSysVarValues(configsMap?.systemVarsUrl)
+ const hasNodeInspectVars = useHooksStore(s => s.hasNodeInspectVars)
+ const hasSetInspectVar = useHooksStore(s => s.hasSetInspectVar)
+ const fetchInspectVarValue = useHooksStore(s => s.fetchInspectVarValue)
+ const editInspectVarValue = useHooksStore(s => s.editInspectVarValue)
+ const renameInspectVarName = useHooksStore(s => s.renameInspectVarName)
+ const appendNodeInspectVars = useHooksStore(s => s.appendNodeInspectVars)
+ const deleteInspectVar = useHooksStore(s => s.deleteInspectVar)
+ const deleteNodeInspectorVars = useHooksStore(s => s.deleteNodeInspectorVars)
+ const deleteAllInspectorVars = useHooksStore(s => s.deleteAllInspectorVars)
+ const isInspectVarEdited = useHooksStore(s => s.isInspectVarEdited)
+ const resetToLastRunVar = useHooksStore(s => s.resetToLastRunVar)
+ const invalidateSysVarValues = useHooksStore(s => s.invalidateSysVarValues)
+ const resetConversationVar = useHooksStore(s => s.resetConversationVar)
+ const invalidateConversationVarValues = useHooksStore(s => s.invalidateConversationVarValues)
+
+ return {
+ conversationVars: conversationVars || [],
+ systemVars: systemVars || [],
+ nodesWithInspectVars,
+ hasNodeInspectVars,
+ hasSetInspectVar,
+ fetchInspectVarValue,
+ editInspectVarValue,
+ renameInspectVarName,
+ appendNodeInspectVars,
+ deleteInspectVar,
+ deleteNodeInspectorVars,
+ deleteAllInspectorVars,
+ isInspectVarEdited,
+ resetToLastRunVar,
+ invalidateSysVarValues,
+ resetConversationVar,
+ invalidateConversationVarValues,
+ }
+}
+
+export default useInspectVarsCrud
diff --git a/web/app/components/workflow/hooks/use-nodes-available-var-list.ts b/web/app/components/workflow/hooks/use-nodes-available-var-list.ts
new file mode 100644
index 0000000000..5efe2519ef
--- /dev/null
+++ b/web/app/components/workflow/hooks/use-nodes-available-var-list.ts
@@ -0,0 +1,75 @@
+import {
+ useIsChatMode,
+ useWorkflow,
+ useWorkflowVariables,
+} from '@/app/components/workflow/hooks'
+import { BlockEnum, type Node, type NodeOutPutVar, type ValueSelector, type Var } from '@/app/components/workflow/types'
+type Params = {
+ onlyLeafNodeVar?: boolean
+ hideEnv?: boolean
+ hideChatVar?: boolean
+ filterVar: (payload: Var, selector: ValueSelector) => boolean
+ passedInAvailableNodes?: Node[]
+}
+
+const getNodeInfo = (nodeId: string, nodes: Node[]) => {
+ const allNodes = nodes
+ const node = allNodes.find(n => n.id === nodeId)
+ const isInIteration = !!node?.data.isInIteration
+ const isInLoop = !!node?.data.isInLoop
+ const parentNodeId = node?.parentId
+ const parentNode = allNodes.find(n => n.id === parentNodeId)
+ return {
+ node,
+ isInIteration,
+ isInLoop,
+ parentNode,
+ }
+}
+
+// TODO: loop type?
+const useNodesAvailableVarList = (nodes: Node[], {
+ onlyLeafNodeVar,
+ filterVar,
+ hideEnv = false,
+ hideChatVar = false,
+ passedInAvailableNodes,
+}: Params = {
+ onlyLeafNodeVar: false,
+ filterVar: () => true,
+ }) => {
+ const { getTreeLeafNodes, getBeforeNodesInSameBranchIncludeParent } = useWorkflow()
+ const { getNodeAvailableVars } = useWorkflowVariables()
+ const isChatMode = useIsChatMode()
+
+ const nodeAvailabilityMap: { [key: string ]: { availableVars: NodeOutPutVar[], availableNodes: Node[] } } = {}
+
+ nodes.forEach((node) => {
+ const nodeId = node.id
+ const availableNodes = passedInAvailableNodes || (onlyLeafNodeVar ? getTreeLeafNodes(nodeId) : getBeforeNodesInSameBranchIncludeParent(nodeId))
+ if (node.data.type === BlockEnum.Loop)
+ availableNodes.push(node)
+
+ const {
+ parentNode: iterationNode,
+ } = getNodeInfo(nodeId, nodes)
+
+ const availableVars = getNodeAvailableVars({
+ parentNode: iterationNode,
+ beforeNodes: availableNodes,
+ isChatMode,
+ filterVar,
+ hideEnv,
+ hideChatVar,
+ })
+ const result = {
+ node,
+ availableVars,
+ availableNodes,
+ }
+ nodeAvailabilityMap[nodeId] = result
+ })
+ return nodeAvailabilityMap
+}
+
+export default useNodesAvailableVarList
diff --git a/web/app/components/workflow/hooks/use-nodes-data.ts b/web/app/components/workflow/hooks/use-nodes-data.ts
index aeb45ddb93..7df6b2ffd0 100644
--- a/web/app/components/workflow/hooks/use-nodes-data.ts
+++ b/web/app/components/workflow/hooks/use-nodes-data.ts
@@ -34,15 +34,14 @@ export const useNodesExtraData = () => {
export const useAvailableBlocks = (nodeType?: BlockEnum, isInIteration?: boolean, isInLoop?: boolean) => {
const nodesExtraData = useNodesExtraData()
const availablePrevBlocks = useMemo(() => {
- if (!nodeType)
+ if (!nodeType || !nodesExtraData[nodeType])
return []
return nodesExtraData[nodeType].availablePrevNodes || []
}, [nodeType, nodesExtraData])
const availableNextBlocks = useMemo(() => {
- if (!nodeType)
+ if (!nodeType || !nodesExtraData[nodeType])
return []
-
return nodesExtraData[nodeType].availableNextNodes || []
}, [nodeType, nodesExtraData])
@@ -55,10 +54,7 @@ export const useAvailableBlocks = (nodeType?: BlockEnum, isInIteration?: boolean
if (isInLoop && (nType === BlockEnum.Iteration || nType === BlockEnum.Loop || nType === BlockEnum.End))
return false
- if (!isInLoop && nType === BlockEnum.LoopEnd)
- return false
-
- return true
+ return !(!isInLoop && nType === BlockEnum.LoopEnd)
}),
availableNextBlocks: availableNextBlocks.filter((nType) => {
if (isInIteration && (nType === BlockEnum.Iteration || nType === BlockEnum.Loop || nType === BlockEnum.End))
@@ -67,10 +63,7 @@ export const useAvailableBlocks = (nodeType?: BlockEnum, isInIteration?: boolean
if (isInLoop && (nType === BlockEnum.Iteration || nType === BlockEnum.Loop || nType === BlockEnum.End))
return false
- if (!isInLoop && nType === BlockEnum.LoopEnd)
- return false
-
- return true
+ return !(!isInLoop && nType === BlockEnum.LoopEnd)
}),
}
}, [isInIteration, availablePrevBlocks, availableNextBlocks, isInLoop])
diff --git a/web/app/components/workflow/hooks/use-nodes-interactions-without-sync.ts b/web/app/components/workflow/hooks/use-nodes-interactions-without-sync.ts
index 7fbf0ce868..e01609cdb6 100644
--- a/web/app/components/workflow/hooks/use-nodes-interactions-without-sync.ts
+++ b/web/app/components/workflow/hooks/use-nodes-interactions-without-sync.ts
@@ -1,6 +1,7 @@
import { useCallback } from 'react'
import produce from 'immer'
import { useStoreApi } from 'reactflow'
+import { NodeRunningStatus } from '../types'
export const useNodesInteractionsWithoutSync = () => {
const store = useStoreApi()
@@ -21,7 +22,41 @@ export const useNodesInteractionsWithoutSync = () => {
setNodes(newNodes)
}, [store])
+ const handleCancelAllNodeSuccessStatus = useCallback(() => {
+ const {
+ getNodes,
+ setNodes,
+ } = store.getState()
+
+ const nodes = getNodes()
+ const newNodes = produce(nodes, (draft) => {
+ draft.forEach((node) => {
+ if(node.data._runningStatus === NodeRunningStatus.Succeeded)
+ node.data._runningStatus = undefined
+ })
+ })
+ setNodes(newNodes)
+ }, [store])
+
+ const handleCancelNodeSuccessStatus = useCallback((nodeId: string) => {
+ const {
+ getNodes,
+ setNodes,
+ } = store.getState()
+
+ const newNodes = produce(getNodes(), (draft) => {
+ const node = draft.find(n => n.id === nodeId)
+ if (node && node.data._runningStatus === NodeRunningStatus.Succeeded) {
+ node.data._runningStatus = undefined
+ node.data._waitingRun = false
+ }
+ })
+ setNodes(newNodes)
+ }, [store])
+
return {
handleNodeCancelRunningStatus,
+ handleCancelAllNodeSuccessStatus,
+ handleCancelNodeSuccessStatus,
}
}
diff --git a/web/app/components/workflow/hooks/use-nodes-interactions.ts b/web/app/components/workflow/hooks/use-nodes-interactions.ts
index 94b10c9929..b598951adb 100644
--- a/web/app/components/workflow/hooks/use-nodes-interactions.ts
+++ b/web/app/components/workflow/hooks/use-nodes-interactions.ts
@@ -60,6 +60,7 @@ import {
useWorkflowReadOnly,
} from './use-workflow'
import { WorkflowHistoryEvent, useWorkflowHistory } from './use-workflow-history'
+import useInspectVarsCrud from './use-inspect-vars-crud'
export const useNodesInteractions = () => {
const { t } = useTranslation()
@@ -288,7 +289,9 @@ export const useNodesInteractions = () => {
setEdges(newEdges)
}, [store, workflowStore, getNodesReadOnly])
- const handleNodeSelect = useCallback((nodeId: string, cancelSelection?: boolean) => {
+ const handleNodeSelect = useCallback((nodeId: string, cancelSelection?: boolean, initShowLastRunTab?: boolean) => {
+ if(initShowLastRunTab)
+ workflowStore.setState({ initShowLastRunTab: true })
const {
getNodes,
setNodes,
@@ -530,6 +533,8 @@ export const useNodesInteractions = () => {
setEnteringNodePayload(undefined)
}, [store, handleNodeConnect, getNodesReadOnly, workflowStore, reactflow])
+ const { deleteNodeInspectorVars } = useInspectVarsCrud()
+
const handleNodeDelete = useCallback((nodeId: string) => {
if (getNodesReadOnly())
return
@@ -551,6 +556,7 @@ export const useNodesInteractions = () => {
if (currentNode.data.type === BlockEnum.Start)
return
+ deleteNodeInspectorVars(nodeId)
if (currentNode.data.type === BlockEnum.Iteration) {
const iterationChildren = nodes.filter(node => node.parentId === currentNode.id)
@@ -655,7 +661,7 @@ export const useNodesInteractions = () => {
else
saveStateToHistory(WorkflowHistoryEvent.NodeDelete)
- }, [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory, workflowStore, t])
+ }, [getNodesReadOnly, store, deleteNodeInspectorVars, handleSyncWorkflowDraft, saveStateToHistory, workflowStore, t])
const handleNodeAdd = useCallback((
{
diff --git a/web/app/components/workflow/hooks/use-set-workflow-vars-with-value.ts b/web/app/components/workflow/hooks/use-set-workflow-vars-with-value.ts
new file mode 100644
index 0000000000..a04c2de305
--- /dev/null
+++ b/web/app/components/workflow/hooks/use-set-workflow-vars-with-value.ts
@@ -0,0 +1,9 @@
+import { useHooksStore } from '@/app/components/workflow/hooks-store'
+
+export const useSetWorkflowVarsWithValue = () => {
+ const fetchInspectVars = useHooksStore(s => s.fetchInspectVars)
+
+ return {
+ fetchInspectVars,
+ }
+}
diff --git a/web/app/components/workflow/hooks/use-shortcuts.ts b/web/app/components/workflow/hooks/use-shortcuts.ts
index 8b1003e89c..118ec94058 100644
--- a/web/app/components/workflow/hooks/use-shortcuts.ts
+++ b/web/app/components/workflow/hooks/use-shortcuts.ts
@@ -11,6 +11,7 @@ import {
useEdgesInteractions,
useNodesInteractions,
useNodesSyncDraft,
+ useWorkflowCanvasMaximize,
useWorkflowMoveMode,
useWorkflowOrganize,
useWorkflowStartRun,
@@ -35,6 +36,7 @@ export const useShortcuts = (): void => {
handleModePointer,
} = useWorkflowMoveMode()
const { handleLayout } = useWorkflowOrganize()
+ const { handleToggleMaximizeCanvas } = useWorkflowCanvasMaximize()
const {
zoomTo,
@@ -145,6 +147,16 @@ export const useShortcuts = (): void => {
}
}, { exactMatch: true, useCapture: true })
+ useKeyPress('f', (e) => {
+ if (shouldHandleShortcut(e)) {
+ e.preventDefault()
+ handleToggleMaximizeCanvas()
+ }
+ }, {
+ exactMatch: true,
+ useCapture: true,
+ })
+
useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.1`, (e) => {
if (shouldHandleShortcut(e)) {
e.preventDefault()
diff --git a/web/app/components/workflow/hooks/use-workflow-interactions.ts b/web/app/components/workflow/hooks/use-workflow-interactions.ts
index 636d3b94f9..d8653a5942 100644
--- a/web/app/components/workflow/hooks/use-workflow-interactions.ts
+++ b/web/app/components/workflow/hooks/use-workflow-interactions.ts
@@ -401,3 +401,29 @@ export const useDSL = () => {
handleExportDSL,
}
}
+
+export const useWorkflowCanvasMaximize = () => {
+ const { eventEmitter } = useEventEmitterContextContext()
+
+ const maximizeCanvas = useStore(s => s.maximizeCanvas)
+ const setMaximizeCanvas = useStore(s => s.setMaximizeCanvas)
+ const {
+ getNodesReadOnly,
+ } = useNodesReadOnly()
+
+ const handleToggleMaximizeCanvas = useCallback(() => {
+ if (getNodesReadOnly())
+ return
+
+ setMaximizeCanvas(!maximizeCanvas)
+ localStorage.setItem('workflow-canvas-maximize', String(!maximizeCanvas))
+ eventEmitter?.emit({
+ type: 'workflow-canvas-maximize',
+ payload: !maximizeCanvas,
+ } as any)
+ }, [eventEmitter, getNodesReadOnly, maximizeCanvas, setMaximizeCanvas])
+
+ return {
+ handleToggleMaximizeCanvas,
+ }
+}
diff --git a/web/app/components/workflow/hooks/use-workflow.ts b/web/app/components/workflow/hooks/use-workflow.ts
index 99dce4dc15..8bc9d3436f 100644
--- a/web/app/components/workflow/hooks/use-workflow.ts
+++ b/web/app/components/workflow/hooks/use-workflow.ts
@@ -40,6 +40,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
import {
fetchAllBuiltInTools,
fetchAllCustomTools,
+ fetchAllMCPTools,
fetchAllWorkflowTools,
} from '@/service/tools'
import { CollectionType } from '@/app/components/tools/types'
@@ -59,10 +60,6 @@ export const useWorkflow = () => {
const store = useStoreApi()
const workflowStore = useWorkflowStore()
const nodesExtraData = useNodesExtraData()
- const setPanelWidth = useCallback((width: number) => {
- localStorage.setItem('workflow-node-panel-width', `${width}`)
- workflowStore.setState({ panelWidth: width })
- }, [workflowStore])
const getTreeLeafNodes = useCallback((nodeId: string) => {
const {
@@ -399,7 +396,6 @@ export const useWorkflow = () => {
}, [store])
return {
- setPanelWidth,
getTreeLeafNodes,
getBeforeNodesInSameBranch,
getBeforeNodesInSameBranchIncludeParent,
@@ -450,6 +446,13 @@ export const useFetchToolsData = () => {
workflowTools: workflowTools || [],
})
}
+ if(type === 'mcp') {
+ const mcpTools = await fetchAllMCPTools()
+
+ workflowStore.setState({
+ mcpTools: mcpTools || [],
+ })
+ }
}, [workflowStore])
return {
@@ -496,18 +499,24 @@ 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 mcpTools = useStore(s => s.mcpTools)
+
const toolIcon = useMemo(() => {
+ if(!data)
+ return ''
if (data.type === BlockEnum.Tool) {
let targetTools = buildInTools
if (data.provider_type === CollectionType.builtIn)
targetTools = buildInTools
else if (data.provider_type === CollectionType.custom)
targetTools = customTools
+ else if (data.provider_type === CollectionType.mcp)
+ targetTools = mcpTools
else
targetTools = workflowTools
return targetTools.find(toolWithProvider => canFindTool(toolWithProvider.id, data.provider_id))?.icon
}
- }, [data, buildInTools, customTools, workflowTools])
+ }, [data, buildInTools, customTools, mcpTools, workflowTools])
return toolIcon
}
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 549117faf7..8ea861ebb4 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -5,6 +5,7 @@ import {
memo,
useCallback,
useEffect,
+ useMemo,
useRef,
} from 'react'
import { setAutoFreeze } from 'immer'
@@ -41,6 +42,7 @@ import {
useNodesSyncDraft,
usePanelInteractions,
useSelectionInteractions,
+ useSetWorkflowVarsWithValue,
useShortcuts,
useWorkflow,
useWorkflowReadOnly,
@@ -56,6 +58,7 @@ import { CUSTOM_LOOP_START_NODE } from './nodes/loop-start/constants'
import CustomSimpleNode from './simple-node'
import { CUSTOM_SIMPLE_NODE } from './simple-node/constants'
import Operator from './operator'
+import Control from './operator/control'
import CustomEdge from './custom-edge'
import CustomConnectionLine from './custom-connection-line'
import HelpLine from './help-line'
@@ -114,6 +117,32 @@ export const Workflow: FC = memo(({
const controlMode = useStore(s => s.controlMode)
const nodeAnimation = useStore(s => s.nodeAnimation)
const showConfirm = useStore(s => s.showConfirm)
+ const workflowCanvasHeight = useStore(s => s.workflowCanvasHeight)
+ const bottomPanelHeight = useStore(s => s.bottomPanelHeight)
+ const setWorkflowCanvasWidth = useStore(s => s.setWorkflowCanvasWidth)
+ const setWorkflowCanvasHeight = useStore(s => s.setWorkflowCanvasHeight)
+ const controlHeight = useMemo(() => {
+ if (!workflowCanvasHeight)
+ return '100%'
+ return workflowCanvasHeight - bottomPanelHeight
+ }, [workflowCanvasHeight, bottomPanelHeight])
+
+ // update workflow Canvas width and height
+ useEffect(() => {
+ if (workflowContainerRef.current) {
+ const resizeContainerObserver = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ const { inlineSize, blockSize } = entry.borderBoxSize[0]
+ setWorkflowCanvasWidth(inlineSize)
+ setWorkflowCanvasHeight(blockSize)
+ }
+ })
+ resizeContainerObserver.observe(workflowContainerRef.current)
+ return () => {
+ resizeContainerObserver.disconnect()
+ }
+ }
+ }, [setWorkflowCanvasHeight, setWorkflowCanvasWidth])
const {
setShowConfirm,
@@ -205,6 +234,7 @@ export const Workflow: FC = memo(({
handleFetchAllTools('builtin')
handleFetchAllTools('custom')
handleFetchAllTools('workflow')
+ handleFetchAllTools('mcp')
}, [handleFetchAllTools])
const {
@@ -245,6 +275,11 @@ export const Workflow: FC = memo(({
})
useShortcuts()
+ const { fetchInspectVars } = useSetWorkflowVarsWithValue()
+ useEffect(() => {
+ fetchInspectVars()
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
const store = useStoreApi()
if (process.env.NODE_ENV === 'development') {
@@ -267,6 +302,12 @@ export const Workflow: FC = memo(({
>
+
+
+
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
index dd6a1c6a22..c872952900 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@@ -22,6 +22,7 @@ import type { ListRef } from '@/app/components/workflow/block-selector/market-pl
import PluginList, { type ListProps } from '@/app/components/workflow/block-selector/market-place-plugin/list'
import { useMarketplacePlugins } from '@/app/components/plugins/marketplace/hooks'
import { ToolTipContent } from '@/app/components/base/tooltip/content'
+import { useGlobalPublicStore } from '@/context/global-public-context'
const DEFAULT_TAGS: ListProps['tags'] = []
@@ -48,7 +49,6 @@ const NotFoundWarn = (props: {
}
- needsDelay
>
@@ -67,6 +67,7 @@ function formatStrategy(input: StrategyPluginDetail[], getIcon: (i: string) => s
icon: getIcon(item.declaration.identity.icon),
label: item.declaration.identity.label as any,
type: CollectionType.all,
+ meta: item.meta,
tools: item.declaration.strategies.map(strategy => ({
name: strategy.identity.name,
author: strategy.identity.author,
@@ -88,10 +89,13 @@ function formatStrategy(input: StrategyPluginDetail[], getIcon: (i: string) => s
export type AgentStrategySelectorProps = {
value?: Strategy,
onChange: (value?: Strategy) => void,
+ canChooseMCPTool: boolean,
}
export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) => {
- const { value, onChange } = props
+ const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
+
+ const { value, onChange, canChooseMCPTool } = props
const [open, setOpen] = useState(false)
const [viewType, setViewType] = useState(ViewType.flat)
const [query, setQuery] = useState('')
@@ -132,6 +136,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
} = useMarketplacePlugins()
useEffect(() => {
+ if (!enable_marketplace) return
if (query) {
fetchPlugins({
query,
@@ -158,7 +163,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
alt='icon'
/>
}
{value?.agent_strategy_label || t('workflow.nodes.agent.strategy.selectTip')}
@@ -210,19 +215,25 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
agent_strategy_label: tool!.tool_label,
agent_output_schema: tool!.output_schema,
plugin_unique_identifier: tool!.provider_id,
+ meta: tool!.meta,
})
setOpen(false)
}}
className='h-full max-h-full max-w-none overflow-y-auto'
- indexBarClassName='top-0 xl:top-36' showWorkflowEmpty={false} hasSearchText={false} />
-
+ {enable_marketplace &&
+ />}
