diff --git 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 new file mode 100644 index 0000000000..7a7983ae5c --- /dev/null +++ b/web/app/components/base/icons/assets/vender/line/mediaAndDevices/stop-circle.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/web/app/components/base/icons/src/vender/line/mediaAndDevices/StopCircle.json b/web/app/components/base/icons/src/vender/line/mediaAndDevices/StopCircle.json new file mode 100644 index 0000000000..2d456014b8 --- /dev/null +++ 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" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/line/mediaAndDevices/StopCircle.tsx b/web/app/components/base/icons/src/vender/line/mediaAndDevices/StopCircle.tsx new file mode 100644 index 0000000000..6022e6bbfb --- /dev/null +++ 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, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'StopCircle' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/line/mediaAndDevices/index.ts b/web/app/components/base/icons/src/vender/line/mediaAndDevices/index.ts index d78d0c7980..0253031952 100644 --- 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' diff --git a/web/app/components/base/icons/src/vender/workflow/index.ts b/web/app/components/base/icons/src/vender/workflow/index.ts index ec1f4e5c01..a0ebc30014 100644 --- 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' diff --git a/web/app/components/workflow/header/run-and-history.tsx b/web/app/components/workflow/header/run-and-history.tsx index 73036e5fe1..204080a7a6 100644 --- 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 ( -
!isRunning && handleClick()} - > + <> +
!isRunning && handleClick()} + > + { + isRunning + ? ( + <> + + {t('workflow.common.running')} + + ) + : ( + <> + + {t('workflow.common.run')} + + ) + } +
{ - isRunning - ? ( - <> - - {t('workflow.common.running')} - - ) - : ( - <> - - {t('workflow.common.run')} - - ) + isRunning && ( +
+ +
+ ) } -
+ ) }) 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 })} > diff --git a/web/app/components/workflow/hooks/use-workflow-run.ts b/web/app/components/workflow/hooks/use-workflow-run.ts index e89fd7d61f..32c767735e 100644 --- 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(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, } } 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 f8bd3ef3df..f180415755 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 @@ -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 (