stop run

web/app/components/base/icons/assets/vender/line/mediaAndDevices/stop-circle.svg

@@ -0,0 +1,8 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon">
+<g id="Icon_2">
+<path d="M8.49967 14.6663C12.1816 14.6663 15.1663 11.6816 15.1663 7.99967C15.1663 4.31778 12.1816 1.33301 8.49967 1.33301C4.81778 1.33301 1.83301 4.31778 1.83301 7.99967C1.83301 11.6816 4.81778 14.6663 8.49967 14.6663Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.4997 5.99967H6.49967V9.99967H10.4997V5.99967Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>

web/app/components/base/icons/src/vender/line/mediaAndDevices/StopCircle.json

@@ -0,0 +1,59 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "17",
+			"height": "16",
+			"viewBox": "0 0 17 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "Icon"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "g",
+						"attributes": {
+							"id": "Icon_2"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M8.49967 14.6663C12.1816 14.6663 15.1663 11.6816 15.1663 7.99967C15.1663 4.31778 12.1816 1.33301 8.49967 1.33301C4.81778 1.33301 1.83301 4.31778 1.83301 7.99967C1.83301 11.6816 4.81778 14.6663 8.49967 14.6663Z",
+									"stroke": "currentColor",
+									"stroke-width": "1.5",
+									"stroke-linecap": "round",
+									"stroke-linejoin": "round"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M10.4997 5.99967H6.49967V9.99967H10.4997V5.99967Z",
+									"stroke": "currentColor",
+									"stroke-width": "1.5",
+									"stroke-linecap": "round",
+									"stroke-linejoin": "round"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "StopCircle"
+}

web/app/components/base/icons/src/vender/line/mediaAndDevices/StopCircle.tsx

@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './StopCircle.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'StopCircle'
+
+export default Icon

web/app/components/base/icons/src/vender/line/mediaAndDevices/index.ts

@@ -2,4 +2,5 @@ export { default as Microphone01 } from './Microphone01'
 export { default as Play } from './Play'
 export { default as SlidersH } from './SlidersH'
 export { default as Speaker } from './Speaker'
+export { default as StopCircle } from './StopCircle'
 export { default as Stop } from './Stop'

web/app/components/base/icons/src/vender/workflow/index.ts

@@ -1,5 +1,5 @@
-export { default as Code } from './Code'
 export { default as Answer } from './Answer'
+export { default as Code } from './Code'
 export { default as End } from './End'
 export { default as Home } from './Home'
 export { default as Http } from './Http'

web/app/components/workflow/header/run-and-history.tsx

@@ -10,7 +10,10 @@ import {
   useWorkflowRun,
 } from '../hooks'
 import { WorkflowRunningStatus } from '../types'
-import { Play } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+import {
+  Play,
+  StopCircle,
+} from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
@@ -18,6 +21,7 @@ import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
 const RunMode = memo(() => {
   const { t } = useTranslation()
   const workflowStore = useWorkflowStore()
+  const { handleStopRun } = useWorkflowRun()
   const runningStatus = useStore(s => s.runningStatus)
   const showInputsPanel = useStore(s => s.showInputsPanel)
   const isRunning = runningStatus === WorkflowRunningStatus.Running
@@ -27,31 +31,43 @@ const RunMode = memo(() => {
   }
 
   return (
-    <div
+    <>
-      className={`
+      <div
-        flex items-center px-1.5 h-7 rounded-md text-[13px] font-medium text-primary-600
+        className={`
-        hover:bg-primary-50 cursor-pointer
+          flex items-center px-1.5 h-7 rounded-md text-[13px] font-medium text-primary-600
-        ${showInputsPanel && 'bg-primary-50'}
+          hover:bg-primary-50 cursor-pointer
-        ${isRunning && 'bg-primary-50 !cursor-not-allowed'}
+          ${showInputsPanel && 'bg-primary-50'}
-      `}
+          ${isRunning && 'bg-primary-50 !cursor-not-allowed'}
-      onClick={() => !isRunning && handleClick()}
+        `}
-    >
+        onClick={() => !isRunning && handleClick()}
+      >
+        {
+          isRunning
+            ? (
+              <>
+                <Loading02 className='mr-1 w-4 h-4 animate-spin' />
+                {t('workflow.common.running')}
+              </>
+            )
+            : (
+              <>
+                <Play className='mr-1 w-4 h-4' />
+                {t('workflow.common.run')}
+              </>
+            )
+        }
+      </div>
       {
-        isRunning
+        isRunning && (
-          ? (
+          <div
-            <>
+            className='flex items-center justify-center ml-0.5 w-7 h-7 cursor-pointer hover:bg-black/5 rounded-md'
-              <Loading02 className='mr-1 w-4 h-4 animate-spin' />
+            onClick={handleStopRun}
-              {t('workflow.common.running')}
+          >
-            </>
+            <StopCircle className='w-4 h-4 text-gray-500' />
-          )
+          </div>
-          : (
+        )
-            <>
-              <Play className='mr-1 w-4 h-4' />
-              {t('workflow.common.run')}
-            </>
-          )
       }
-    </div>
+    </>
   )
 })
 RunMode.displayName = 'RunMode'
@@ -116,7 +132,7 @@ const RunAndHistory: FC = () => {
             flex items-center justify-center w-7 h-7 rounded-md hover:bg-black/5 cursor-pointer
             ${showRunHistory && 'bg-primary-50'}
           `}
-          onClick={() => workflowStore.setState({ showRunHistory: true })}
+          onClick={() => workflowStore.setState({ showRunHistory: !showRunHistory })}
         >
           <ClockPlay className={`w-4 h-4 ${showRunHistory ? 'text-primary-600' : 'text-gray-500'}`} />
         </div>

web/app/components/workflow/hooks/use-workflow-run.ts

@@ -1,7 +1,4 @@
-import {
+import { useCallback } from 'react'
-  useCallback,
-  useRef,
-} from 'react'
 import {
   useReactFlow,
   useStoreApi,
@@ -16,12 +13,12 @@ import { NODE_WIDTH } from '../constants'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import type { IOtherOptions } from '@/service/base'
 import { ssePost } from '@/service/base'
+import { stopWorkflowRun } from '@/service/workflow'
 
 export const useWorkflowRun = () => {
   const store = useStoreApi()
   const workflowStore = useWorkflowStore()
   const reactflow = useReactFlow()
-  const workflowContainerRef = useRef<HTMLDivElement>(null)
 
   const handleBackupDraft = useCallback(() => {
     const {
@@ -62,6 +59,9 @@ export const useWorkflowRun = () => {
 
   const handleRunSetting = useCallback((shouldClear?: boolean) => {
     workflowStore.setState({ runningStatus: shouldClear ? undefined : WorkflowRunningStatus.Waiting })
+    workflowStore.setState({ taskId: '' })
+    workflowStore.setState({ currentSequenceNumber: 0 })
+    workflowStore.setState({ workflowRunId: '' })
     const {
       setNodes,
       getNodes,
@@ -174,10 +174,17 @@ export const useWorkflowRun = () => {
     )
   }, [store, reactflow, workflowStore])
 
+  const handleStopRun = useCallback(() => {
+    const appId = useAppStore.getState().appDetail?.id
+    const taskId = workflowStore.getState().taskId
+
+    stopWorkflowRun(`/apps/${appId}/workflow-runs/tasks/${taskId}/stop`)
+  }, [workflowStore])
+
   return {
     handleBackupDraft,
     handleRunSetting,
     handleRun,
-    workflowContainerRef,
+    handleStopRun,
   }
 }

web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx

@@ -4,6 +4,7 @@ import {
   useMemo,
 } from 'react'
 import { useWorkflowStore } from '../../store'
+import { useWorkflowRun } from '../../hooks'
 import UserInput from './user-input'
 import { useChat } from './hooks'
 import Chat from '@/app/components/base/chat/chat'
@@ -11,11 +12,11 @@ import type { OnSend } from '@/app/components/base/chat/types'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import { fetchConvesationMessages } from '@/service/debug'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { stopWorkflowRun } from '@/service/workflow'
 
 const ChatWrapper = () => {
   const workflowStore = useWorkflowStore()
   const featuresStore = useFeaturesStore()
+  const { handleStopRun } = useWorkflowRun()
   const features = featuresStore!.getState().features
 
   const config = useMemo(() => {
@@ -58,12 +59,9 @@ const ChatWrapper = () => {
   }, [conversationId, handleSend, workflowStore])
 
   const doStop = useCallback(() => {
-    const appId = useAppStore.getState().appDetail?.id
-    const taskId = workflowStore.getState().taskId
-
     handleStop()
-    stopWorkflowRun(`/apps/${appId}/workflow-runs/tasks/${taskId}/stop`)
+    handleStopRun()
-  }, [handleStop, workflowStore])
+  }, [handleStop, handleStopRun])
 
   return (
     <Chat