feat: call the reset api before opening the run drawer each time #918 (#1370)

### What problem does this PR solve?

feat:  call the reset api before opening the run drawer each time #918
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/chat/hooks.ts

@@ -1,5 +1,5 @@
 import { MessageType } from '@/constants/chat';
-import { useFetchFlow } from '@/hooks/flow-hooks';
+import { useFetchFlow, useResetFlow } from '@/hooks/flow-hooks';
 import {
   useHandleMessageInputChange,
   useScrollToBottom,
@@ -93,13 +93,13 @@ export const useSendMessage = (
 ) => {
   const { id: flowId } = useParams();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
-  const { data: flowDetail, refetch } = useFetchFlow();
-  const messages = flowDetail.dsl.messages;
+  const { refetch } = useFetchFlow();
+  const { resetFlow } = useResetFlow();
 
   const { send, answer, done } = useSendMessageWithSse(api.runCanvas);
 
   const sendMessage = useCallback(
-    async (message: string, id?: string) => {
+    async (message: string) => {
       const params: Record<string, unknown> = {
         id: flowId,
       };
@@ -128,6 +128,18 @@ export const useSendMessage = (
     [sendMessage],
   );
 
+  /**
+   * Call the reset api before opening the run drawer each time
+   */
+  const resetFlowBeforeFetchingPrologue = useCallback(async () => {
+    // After resetting, all previous messages will be cleared.
+    const ret = await resetFlow();
+    if (ret.retcode === 0) {
+      // fetch prologue
+      sendMessage('');
+    }
+  }, [resetFlow, sendMessage]);
+
   useEffect(() => {
     if (answer.answer) {
       addNewestAnswer(answer);
@@ -135,11 +147,8 @@ export const useSendMessage = (
   }, [answer, addNewestAnswer]);
 
   useEffect(() => {
-    // fetch prologue
-    if (messages.length === 0) {
-      sendMessage('');
-    }
-  }, [sendMessage, messages]);
+    resetFlowBeforeFetchingPrologue();
+  }, [resetFlowBeforeFetchingPrologue]);
 
   const handlePressEnter = useCallback(() => {
     if (done) {