diff --git a/packages/semi-ui/chat/chatBox/chatBoxContent.tsx b/packages/semi-ui/chat/chatBox/chatBoxContent.tsx
index 692063b8bf..c7aab9010c 100644
--- a/packages/semi-ui/chat/chatBox/chatBoxContent.tsx
+++ b/packages/semi-ui/chat/chatBox/chatBoxContent.tsx
@@ -39,7 +39,7 @@ const ChatBoxContent = (props: ChatBoxContentProps) => {
             [`${PREFIX_CHAT_BOX}-content-user`]: (bubble && isUser) || userBubble,
             [`${PREFIX_CHAT_BOX}-content-error`]: status === MESSAGE_STATUS.ERROR && (bubble || userBubble)
         });
-    }, [role, status]);
+    }, [role, status, mode]);
 
     const node = useMemo(() => {
         if (status === MESSAGE_STATUS.LOADING) {
diff --git a/packages/semi-ui/chat/chatBox/index.tsx b/packages/semi-ui/chat/chatBox/index.tsx
index db11fe42d4..9bc1f151f0 100644
--- a/packages/semi-ui/chat/chatBox/index.tsx
+++ b/packages/semi-ui/chat/chatBox/index.tsx
@@ -65,7 +65,7 @@ const ChatBox = React.memo((props: ChatBoxProps) => {
             customMarkDownComponents={customMarkDownComponents}
             customRenderFunc={renderChatBoxContent}
         />);
-    }, [message, info, renderChatBoxContent]);
+    }, [message, info, renderChatBoxContent, mode]);
 
     const actionNode = useMemo(() => {
         return (<ChatBoxAction