stop run

2024-03-15 21:33:30 +08:00 · 2024-03-15 21:33:30 +08:00 · a577db9ddd
parent e5c8743712
commit a577db9ddd
8 changed files with 143 additions and 38 deletions
--- a/web/app/components/base/icons/assets/vender/line/mediaAndDevices/stop-circle.svg
+++ b/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>
--- a/web/app/components/base/icons/src/vender/line/mediaAndDevices/StopCircle.json
+++ b/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"
+}
--- a/web/app/components/base/icons/src/vender/line/mediaAndDevices/StopCircle.tsx
+++ b/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
--- a/web/app/components/base/icons/src/vender/line/mediaAndDevices/index.ts
+++ b/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'
--- a/web/app/components/base/icons/src/vender/workflow/index.ts
+++ b/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'
--- a/web/app/components/workflow/header/run-and-history.tsx
+++ b/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={`
-        flex items-center px-1.5 h-7 rounded-md text-[13px] font-medium text-primary-600
-        hover:bg-primary-50 cursor-pointer
-        ${showInputsPanel && 'bg-primary-50'}
-        ${isRunning && 'bg-primary-50 !cursor-not-allowed'}
-      `}
-      onClick={() => !isRunning && handleClick()}
-    >
+    <>
+      <div
+        className={`
+          flex items-center px-1.5 h-7 rounded-md text-[13px] font-medium text-primary-600
+          hover:bg-primary-50 cursor-pointer
+          ${showInputsPanel && 'bg-primary-50'}
+          ${isRunning && 'bg-primary-50 !cursor-not-allowed'}
+        `}
+        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
-          ? (
-            <>
-              <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')}
-            </>
-          )
+        isRunning && (
+          <div
+            className='flex items-center justify-center ml-0.5 w-7 h-7 cursor-pointer hover:bg-black/5 rounded-md'
+            onClick={handleStopRun}
+          >
+            <StopCircle className='w-4 h-4 text-gray-500' />
+          </div>
+        )
      }
-    </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>
--- a/web/app/components/workflow/hooks/use-workflow-run.ts
+++ b/web/app/components/workflow/hooks/use-workflow-run.ts
@ -1,7 +1,4 @@
-import {
-  useCallback,
-  useRef,
-} from 'react'
+import { useCallback } 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,
  }
 }
--- a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
+++ b/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`)
-  }, [handleStop, workflowStore])
+    handleStopRun()
+  }, [handleStop, handleStopRun])

  return (
    <Chat