From 5ecc006805d00adba7312352439f706bb6133f25 Mon Sep 17 00:00:00 2001 From: hjlarry Date: Tue, 30 Sep 2025 15:18:07 +0800 Subject: [PATCH] add listening status for variable panel --- .../components/app/workflow-log/detail.tsx | 11 +++-- .../workflow-app/hooks/use-workflow-run.ts | 11 +++-- .../workflow/variable-inspect/listening.tsx | 43 +++++++++++++++++++ .../workflow/variable-inspect/panel.tsx | 27 ++++++++++++ web/i18n/en-US/workflow.ts | 5 +++ 5 files changed, 89 insertions(+), 8 deletions(-) create mode 100644 web/app/components/workflow/variable-inspect/listening.tsx diff --git a/web/app/components/app/workflow-log/detail.tsx b/web/app/components/app/workflow-log/detail.tsx index 812438c0ed..7143202f98 100644 --- a/web/app/components/app/workflow-log/detail.tsx +++ b/web/app/components/app/workflow-log/detail.tsx @@ -3,6 +3,7 @@ import type { FC } from 'react' import { useTranslation } from 'react-i18next' import { RiCloseLine } from '@remixicon/react' import Run from '@/app/components/workflow/run' +import { WorkflowContextProvider } from '@/app/components/workflow/context' import { useStore } from '@/app/components/app/store' type ILogDetail = { @@ -20,10 +21,12 @@ const DetailPanel: FC = ({ runID, onClose }) => {

{t('appLog.runDetail.workflowTitle')}

- + + + ) } diff --git a/web/app/components/workflow-app/hooks/use-workflow-run.ts b/web/app/components/workflow-app/hooks/use-workflow-run.ts index 29b2ecd674..d3fde6de1c 100644 --- a/web/app/components/workflow-app/hooks/use-workflow-run.ts +++ b/web/app/components/workflow-app/hooks/use-workflow-run.ts @@ -216,10 +216,12 @@ export const useWorkflowRun = () => { const { setWorkflowRunningData, setIsListening, + setShowVariableInspectPanel, } = workflowStore.getState() if (runMode === 'webhook') { setIsListening(true) + setShowVariableInspectPanel(true) setWorkflowRunningData({ result: { status: WorkflowRunningStatus.Running, @@ -479,11 +481,11 @@ export const useWorkflowRun = () => { }, tracing: [], }) - setIsListening(false) + clearListeningState() return } - setIsListening(false) + clearListeningState() handleStream( response, baseSseOptions.onData ?? noop, @@ -531,7 +533,7 @@ export const useWorkflowRun = () => { }, tracing: [], }) - setIsListening(false) + clearListeningState() } } @@ -575,7 +577,7 @@ export const useWorkflowRun = () => { abortControllerRef.current.abort() abortControllerRef.current = null - const { setWorkflowRunningData, setIsListening } = workflowStore.getState() + const { setWorkflowRunningData, setIsListening, setShowVariableInspectPanel } = workflowStore.getState() setWorkflowRunningData({ result: { status: WorkflowRunningStatus.Stopped, @@ -587,6 +589,7 @@ export const useWorkflowRun = () => { resultText: '', }) setIsListening(false) + setShowVariableInspectPanel(true) }, [workflowStore]) const handleRestoreFromPublishedWorkflow = useCallback((publishedWorkflow: VersionHistory) => { diff --git a/web/app/components/workflow/variable-inspect/listening.tsx b/web/app/components/workflow/variable-inspect/listening.tsx new file mode 100644 index 0000000000..d571663282 --- /dev/null +++ b/web/app/components/workflow/variable-inspect/listening.tsx @@ -0,0 +1,43 @@ +import type { FC } from 'react' +import { useTranslation } from 'react-i18next' +import { RiStopLargeLine } from '@remixicon/react' +import Button from '@/app/components/base/button' +import BlockIcon from '@/app/components/workflow/block-icon' +import { BlockEnum } from '@/app/components/workflow/types' + +export type ListeningProps = { + onStop: () => void + message?: string +} + +const Listening: FC = ({ + onStop, + message, +}) => { + const { t } = useTranslation() + + return ( +
+
+ +
+
+
{t('workflow.debug.variableInspect.listening.title')}
+
{message ?? t('workflow.debug.variableInspect.listening.tip')}
+
+
+ +
+
+ ) +} + +export default Listening diff --git a/web/app/components/workflow/variable-inspect/panel.tsx b/web/app/components/workflow/variable-inspect/panel.tsx index db0a6da8ab..c0ad4cd159 100644 --- a/web/app/components/workflow/variable-inspect/panel.tsx +++ b/web/app/components/workflow/variable-inspect/panel.tsx @@ -7,6 +7,7 @@ import { import { useStore } from '../store' import useCurrentVars from '../hooks/use-inspect-vars-crud' import Empty from './empty' +import Listening from './listening' import Left from './left' import Right from './right' import ActionButton from '@/app/components/base/action-button' @@ -16,6 +17,8 @@ import { VarInInspectType } from '@/types/workflow' import cn from '@/utils/classnames' import type { NodeProps } from '../types' import useMatchSchemaType from '../nodes/_base/components/variable/use-match-schema-type' +import { useEventEmitterContextContext } from '@/context/event-emitter' +import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types' export type currentVarType = { nodeId: string @@ -32,6 +35,7 @@ const Panel: FC = () => { const bottomPanelWidth = useStore(s => s.bottomPanelWidth) const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel) const [showLeftPanel, setShowLeftPanel] = useState(true) + const isListening = useStore(s => s.isListening) const environmentVariables = useStore(s => s.environmentVariables) const currentFocusNodeId = useStore(s => s.currentFocusNodeId) @@ -135,6 +139,11 @@ const Panel: FC = () => { }, [setCurrentFocusNodeId, setCurrentVarId]) const { isLoading, schemaTypeDefinitions } = useMatchSchemaType() + const { eventEmitter } = useEventEmitterContextContext() + + const handleStopListening = useCallback(() => { + eventEmitter?.emit({ type: EVENT_WORKFLOW_STOP } as any) + }, [eventEmitter]) useEffect(() => { if (currentFocusNodeId && currentVarId && !isLoading) { @@ -144,6 +153,24 @@ const Panel: FC = () => { } }, [currentFocusNodeId, currentVarId, nodesWithInspectVars, fetchInspectVarValue, schemaTypeDefinitions, isLoading]) + if (isListening) { + return ( +
+
+
{t('workflow.debug.variableInspect.title')}
+ setShowVariableInspectPanel(false)}> + + +
+
+ +
+
+ ) + } + if (isEmpty) { return (
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index bc06364989..1b715c3349 100644 --- a/web/i18n/en-US/workflow.ts +++ b/web/i18n/en-US/workflow.ts @@ -1193,6 +1193,11 @@ const translation = { view: 'View log', edited: 'Edited', reset: 'Reset to last run value', + listening: { + title: 'Listening for events from triggers...', + tip: 'Now you can create events in Slack and Gmail, and retrieve outputs from these events in the Variable Inspector.', + stopButton: 'Stop', + }, trigger: { normal: 'Variable Inspect', running: 'Caching running status',