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/hooks/flow-hooks.ts

@@ -164,3 +164,20 @@ export const useRunFlow = () => {
 
   return { data, loading, runFlow: mutateAsync };
 };
+
+export const useResetFlow = () => {
+  const { id } = useParams();
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['resetFlow'],
+    mutationFn: async () => {
+      const { data } = await flowService.resetCanvas({ id });
+      return data;
+    },
+  });
+
+  return { data, loading, resetFlow: mutateAsync };
+};

web/src/pages/flow/canvas/node/index.tsx

@@ -39,7 +39,12 @@ export function RagNode({
         id="b"
       ></Handle>
       <Handle type="source" position={Position.Bottom} id="a" isConnectable />
-      <Flex vertical align="center" justify={'center'} gap={6}>
+      <Flex
+        vertical
+        align="center"
+        justify={'center'}
+        gap={data.label === Operator.RewriteQuestion ? 0 : 6}
+      >
         <OperatorIcon
           name={data.label as Operator}
           fontSize={style['iconFontSize'] ?? 24}
@@ -48,7 +53,7 @@ export function RagNode({
           className={styles.type}
           style={{ fontSize: style.fontSize ?? 14 }}
         >
-          {data.label}
+          {data.label === Operator.RewriteQuestion ? 'Rewrite' : data.label}
         </span>
         <NodeDropdown id={id}></NodeDropdown>
       </Flex>

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) {

web/src/pages/flow/constant.tsx

@@ -1,9 +1,9 @@
 import {
   BranchesOutlined,
   DatabaseOutlined,
+  FormOutlined,
   MergeCellsOutlined,
   MessageOutlined,
-  QuestionOutlined,
   RocketOutlined,
   SendOutlined,
   SlidersOutlined,
@@ -28,7 +28,7 @@ export const operatorIconMap = {
   [Operator.Categorize]: DatabaseOutlined,
   [Operator.Message]: MessageOutlined,
   [Operator.Relevant]: BranchesOutlined,
-  [Operator.RewriteQuestion]: QuestionOutlined,
+  [Operator.RewriteQuestion]: FormOutlined,
 };
 
 export const operatorMap = {
@@ -76,7 +76,12 @@ export const operatorMap = {
   },
   [Operator.RewriteQuestion]: {
     description: 'RewriteQuestion description',
-    backgroundColor: 'white',
+    backgroundColor: '#f8c7f8',
+    color: 'white',
+    width: 70,
+    height: 70,
+    fontSize: 12,
+    iconFontSize: 16,
   },
 };
 

web/src/pages/flow/header/index.tsx

@@ -32,7 +32,7 @@ const FlowHeader = ({ showChatDrawer }: IProps) => {
         </Space>
         <Space size={'large'}>
           <Button onClick={showChatDrawer}>
-            <b>Debug</b>
+            <b>Run</b>
           </Button>
           <Button type="primary" onClick={saveGraph}>
             <b>Save</b>