Feat: Display the input parameters of begin in the output result table #3355 (#3534)

### What problem does this PR solve?

Feat: Display the input parameters of begin in the output result table
#3355

### Type of change


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

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

@@ -3,7 +3,7 @@ import get from 'lodash/get';
 import React, { MouseEventHandler, useCallback, useMemo } from 'react';
 import JsonView from 'react18-json-view';
 import 'react18-json-view/src/style.css';
-import { useReplaceIdWithText } from '../../hooks';
+import { useGetComponentLabelByValue, useReplaceIdWithText } from '../../hooks';
 
 import {
   Popover,
@@ -39,11 +39,13 @@ export function NextNodePopover({ children, nodeId, name }: IProps) {
     [],
   );
   const output = get(component, ['obj', 'params', 'output'], {});
-  const { replacedOutput, getNameById } = useReplaceIdWithText(output);
+  const { replacedOutput } = useReplaceIdWithText(output);
   const stopPropagation: MouseEventHandler = useCallback((e) => {
     e.stopPropagation();
   }, []);
 
+  const getLabel = useGetComponentLabelByValue(nodeId);
+
   return (
     <Popover>
       <PopoverTrigger onClick={stopPropagation} asChild>
@@ -73,7 +75,7 @@ export function NextNodePopover({ children, nodeId, name }: IProps) {
                 <TableBody>
                   {inputs.map((x, idx) => (
                     <TableRow key={idx}>
-                      <TableCell>{getNameById(x.component_id)}</TableCell>
+                      <TableCell>{getLabel(x.component_id)}</TableCell>
                       <TableCell className="truncate">{x.content}</TableCell>
                     </TableRow>
                   ))}

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

@@ -55,6 +55,7 @@ export const useSendNextMessage = () => {
   } = useSelectNextMessages();
   const { id: flowId } = useParams();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
+  const { refetch } = useFetchFlow();
 
   const { send, answer, done } = useSendMessageWithSse(api.runCanvas);
 
@@ -75,9 +76,11 @@ export const useSendNextMessage = () => {
         // cancel loading
         setValue(message.content);
         removeLatestMessage();
+      } else {
+        refetch(); // pull the message list after sending the message successfully
       }
     },
-    [flowId, removeLatestMessage, setValue, send],
+    [flowId, send, setValue, removeLatestMessage, refetch],
   );
 
   const handleSendMessage = useCallback(
@@ -112,8 +115,10 @@ export const useSendNextMessage = () => {
     const sendRet = await send({ id: flowId });
     if (receiveMessageError(sendRet)) {
       message.error(sendRet?.data?.message);
+    } else {
+      refetch();
     }
-  }, [flowId, send]);
+  }, [flowId, refetch, send]);
 
   useEffect(() => {
     fetchPrologue();