From 263f401172a4b49935e7b70b36a9db29404c032f Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Wed, 8 Oct 2025 14:37:22 -0700
Subject: [PATCH] Fix DyadThink react hook usage (#1467)

<!-- CURSOR_SUMMARY -->
> [!NOTE]
> Reorders the collapse useEffect to run before the token-savings early
return so hooks are always called unconditionally.
>
> - **Frontend**
>   - **`src/components/chat/DyadThink.tsx`**:
> - Move collapse `useEffect` above the token-savings early return to
ensure hooks are called unconditionally.
> - Maintains collapse behavior when `inProgress` transitions to false.
>     - `DyadTokenSavings` rendering path remains unchanged.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
a6c7d20ab037043bff26deec1364f2d9008fbf33. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---
 src/components/chat/DyadThink.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/chat/DyadThink.tsx b/src/components/chat/DyadThink.tsx
index d975527..4123add 100644
--- a/src/components/chat/DyadThink.tsx
+++ b/src/components/chat/DyadThink.tsx
@@ -22,6 +22,13 @@ export const DyadThink: React.FC<DyadThinkProps> = ({ children, node }) => {
         )
       : null;
 
+  // Collapse when transitioning from in-progress to not-in-progress
+  useEffect(() => {
+    if (!inProgress && isExpanded) {
+      setIsExpanded(false);
+    }
+  }, [inProgress]);
+
   // If it's token savings format, render DyadTokenSavings component
   if (tokenSavingsMatch) {
     const originalTokens = parseFloat(tokenSavingsMatch[1]);
@@ -34,13 +41,6 @@ export const DyadThink: React.FC<DyadThinkProps> = ({ children, node }) => {
     );
   }
 
-  // Collapse when transitioning from in-progress to not-in-progress
-  useEffect(() => {
-    if (!inProgress && isExpanded) {
-      setIsExpanded(false);
-    }
-  }, [inProgress]);
-
   return (
     <div
       className={`relative bg-(--background-lightest) dark:bg-zinc-900 hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${