diff --git a/web/src/hooks/flow-hooks.ts b/web/src/hooks/flow-hooks.ts
index 5bb8af6cdf3..c56ccf75f70 100644
--- a/web/src/hooks/flow-hooks.ts
+++ b/web/src/hooks/flow-hooks.ts
@@ -80,9 +80,17 @@ export const useFetchFlowList = (): { data: IFlow[]; loading: boolean } => {
   return { data, loading };
 };
 
-export const useFetchFlow = (): { data: IFlow; loading: boolean } => {
+export const useFetchFlow = (): {
+  data: IFlow;
+  loading: boolean;
+  refetch: () => void;
+} => {
   const { id } = useParams();
-  const { data, isFetching: loading } = useQuery({
+  const {
+    data,
+    isFetching: loading,
+    refetch,
+  } = useQuery({
     queryKey: ['flowDetail'],
     initialData: {} as IFlow,
     queryFn: async () => {
@@ -92,7 +100,7 @@ export const useFetchFlow = (): { data: IFlow; loading: boolean } => {
     },
   });
 
-  return { data, loading };
+  return { data, loading, refetch };
 };
 
 export const useSetFlow = () => {
diff --git a/web/src/pages/flow/canvas/index.tsx b/web/src/pages/flow/canvas/index.tsx
index 08ab72d2b35..ed674b3576a 100644
--- a/web/src/pages/flow/canvas/index.tsx
+++ b/web/src/pages/flow/canvas/index.tsx
@@ -133,10 +133,12 @@ function FlowCanvas({ chatDrawerVisible, hideChatDrawer }: IProps) {
         visible={drawerVisible}
         hideModal={hideDrawer}
       ></FlowDrawer>
-      <ChatDrawer
-        visible={chatDrawerVisible}
-        hideModal={hideChatDrawer}
-      ></ChatDrawer>
+      {chatDrawerVisible && (
+        <ChatDrawer
+          visible={chatDrawerVisible}
+          hideModal={hideChatDrawer}
+        ></ChatDrawer>
+      )}
     </div>
   );
 }
diff --git a/web/src/pages/flow/chat/drawer.tsx b/web/src/pages/flow/chat/drawer.tsx
index 99c413c07da..44c0078c899 100644
--- a/web/src/pages/flow/chat/drawer.tsx
+++ b/web/src/pages/flow/chat/drawer.tsx
@@ -10,7 +10,7 @@ const ChatDrawer = ({ visible, hideModal }: IModalProps<any>) => {
       onClose={hideModal}
       open={visible}
       getContainer={false}
-      width={470}
+      width={window.innerWidth > 1278 ? '30%' : 470}
       mask={false}
       // zIndex={10000}
     >
diff --git a/web/src/pages/flow/chat/hooks.ts b/web/src/pages/flow/chat/hooks.ts
index a44d27506e6..0916eb6acdb 100644
--- a/web/src/pages/flow/chat/hooks.ts
+++ b/web/src/pages/flow/chat/hooks.ts
@@ -48,19 +48,15 @@ export const useSelectCurrentMessages = () => {
 
   const addNewestAnswer = useCallback((answer: IAnswer) => {
     setCurrentMessages((pre) => {
-      const latestMessage = pre?.at(-1);
-
-      if (latestMessage) {
-        return [
-          ...pre.slice(0, -1),
-          {
-            ...latestMessage,
-            content: answer.answer,
-            reference: answer.reference,
-          },
-        ];
-      }
-      return pre;
+      return [
+        ...pre.slice(0, -1),
+        {
+          id: uuid(),
+          role: MessageType.Assistant,
+          content: answer.answer,
+          reference: answer.reference,
+        },
+      ];
     });
   }, []);
 
@@ -97,7 +93,7 @@ export const useSendMessage = (
 ) => {
   const { id: flowId } = useParams();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
-  const { data: flowDetail } = useFetchFlow();
+  const { data: flowDetail, refetch } = useFetchFlow();
   const messages = flowDetail.dsl.messages;
 
   const { send, answer, done } = useSendMessageWithSse(api.runCanvas);
@@ -118,9 +114,11 @@ export const useSendMessage = (
         // cancel loading
         setValue(message);
         removeLatestMessage();
+      } else {
+        refetch(); // pull the message list after sending the message successfully
       }
     },
-    [flowId, removeLatestMessage, setValue, send],
+    [flowId, removeLatestMessage, setValue, send, refetch],
   );
 
   const handleSendMessage = useCallback(