diff --git a/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts b/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts
index 5fd6c68c5..f9f451c5b 100644
--- a/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts
+++ b/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts
@@ -12,17 +12,18 @@ export const useAutoChangeLayout = ({
   onSetSelectedFile: (file: SelectedFile) => void;
 }) => {
   const hasSeeningReasoningPage = useRef(false); //used when there is a delay in page load
-  const message = useMessageIndividual(lastMessageId);
-  const reasoningMessagesLength = message?.reasoning?.length;
-  const isCompletedStream = message?.isCompletedStream;
-  const isLoading = !isCompletedStream;
+  const reasoningMessagesLength = useMessageIndividual(
+    lastMessageId,
+    (x) => x?.reasoning_message_ids?.length || 0
+  );
+  const isCompletedStream = useMessageIndividual(lastMessageId, (x) => x?.isCompletedStream);
   const hasReasoning = !!reasoningMessagesLength;
 
   //change the page to reasoning file if we get a reasoning message
   useEffect(() => {
-    if (isLoading && !hasSeeningReasoningPage.current && hasReasoning) {
+    if (!isCompletedStream && !hasSeeningReasoningPage.current && hasReasoning) {
       hasSeeningReasoningPage.current = true;
       onSetSelectedFile({ id: lastMessageId, type: 'reasoning' });
     }
-  }, [isLoading, hasReasoning]);
+  }, [isCompletedStream, hasReasoning]);
 };