diff --git a/web/app/components/workflow/header/run-and-history.tsx b/web/app/components/workflow/header/run-and-history.tsx
index 19ed87d990..225e2805a5 100644
--- a/web/app/components/workflow/header/run-and-history.tsx
+++ b/web/app/components/workflow/header/run-and-history.tsx
@@ -19,6 +19,8 @@ import cn from '@/utils/classnames'
 import {
   StopCircle,
 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 
 const RunMode = memo(() => {
   const { t } = useTranslation()
@@ -27,6 +29,16 @@ const RunMode = memo(() => {
   const workflowRunningData = useStore(s => s.workflowRunningData)
   const isRunning = workflowRunningData?.result.status === WorkflowRunningStatus.Running
 
+  const handleStop = () => {
+    handleStopRun(workflowRunningData?.task_id || '')
+  }
+
+  const { eventEmitter } = useEventEmitterContextContext()
+  eventEmitter?.useSubscription((v: any) => {
+    if (v.type === EVENT_WORKFLOW_STOP)
+      handleStop()
+  })
+
   return (
     <>
       <div
@@ -59,7 +71,7 @@ const RunMode = memo(() => {
         isRunning && (
           <div
             className='ml-0.5 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
-            onClick={() => handleStopRun(workflowRunningData?.task_id || '')}
+            onClick={handleStop}
           >
             <StopCircle className='h-4 w-4 text-components-button-ghost-text' />
           </div>
diff --git a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
index 8f45bc5774..47d2c73a14 100644
--- a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
@@ -21,6 +21,8 @@ import {
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { getLastAnswer, isValidGeneratedAnswer } from '@/app/components/base/chat/utils'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 
 type ChatWrapperProps = {
   showConversationVariableModal: boolean
@@ -105,6 +107,12 @@ const ChatWrapper = (
     )
   }, [chatList, doSend])
 
+  const { eventEmitter } = useEventEmitterContextContext()
+  eventEmitter?.useSubscription((v: any) => {
+    if (v.type === EVENT_WORKFLOW_STOP)
+      handleStop()
+  })
+
   useImperativeHandle(ref, () => {
     return {
       handleRestart,
diff --git a/web/app/components/workflow/variable-inspect/trigger.tsx b/web/app/components/workflow/variable-inspect/trigger.tsx
index 2df512679d..0107b0b3e3 100644
--- a/web/app/components/workflow/variable-inspect/trigger.tsx
+++ b/web/app/components/workflow/variable-inspect/trigger.tsx
@@ -9,10 +9,13 @@ import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 import type { CommonNodeType } from '@/app/components/workflow/types'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 import cn from '@/utils/classnames'
 
 const VariableInspectTrigger: FC = () => {
   const { t } = useTranslation()
+  const { eventEmitter } = useEventEmitterContextContext()
 
   const showVariableInspectPanel = useStore(s => s.showVariableInspectPanel)
   const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel)
@@ -41,7 +44,9 @@ const VariableInspectTrigger: FC = () => {
   const isRunning = useMemo(() => isPreviewRunning || isStepRunning, [isPreviewRunning, isStepRunning])
 
   const handleStop = () => {
-    // TODO: Implement stop functionality
+    eventEmitter?.emit({
+      type: EVENT_WORKFLOW_STOP,
+    } as any)
   }
 
   const handleClearAll = () => {
diff --git a/web/app/components/workflow/variable-inspect/types.ts b/web/app/components/workflow/variable-inspect/types.ts
new file mode 100644
index 0000000000..f2e205d4b1
--- /dev/null
+++ b/web/app/components/workflow/variable-inspect/types.ts
@@ -0,0 +1 @@
+export const EVENT_WORKFLOW_STOP = 'WORKFLOW_STOP'