packages/web/src/components/chat/MessageBubble.tsx (1)

157-171: ⚡ Quick win

Untracked setTimeout calls cause stale-timer races on rapid clicks.

Each call to copyMessage enqueues a fresh setTimeout without cancelling any prior pending timer. On rapid repeated failures the first timer fires before the second and prematurely resets copyError (e.g. two failures 500 ms apart — the first timer fires 1 500 ms into the second's 2 000 ms window and clears the error early). The same issue applies to copied. The same pattern exists in Header.tsx but that doesn't make it correct.

♻️ Proposed fix — cancel stale timers before scheduling new ones

+  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const copyErrorTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

   const copyMessage = (): void => {
     void navigator.clipboard
       .writeText(message.content)
       .then(() => {
+        if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+        if (copyErrorTimerRef.current) clearTimeout(copyErrorTimerRef.current);
         setCopied(true);
         setCopyError(false);
-        setTimeout(() => {
+        copiedTimerRef.current = setTimeout(() => {
           setCopied(false);
         }, 1500);
       })
       .catch(() => {
+        setCopied(false);
+        if (copyErrorTimerRef.current) clearTimeout(copyErrorTimerRef.current);
         setCopyError(true);
-        setTimeout(() => {
+        copyErrorTimerRef.current = setTimeout(() => {
           setCopyError(false);
         }, 2000);
       });
   };

The useRef import is already present on Line 1. The timer refs should be declared alongside the other state variables (around Line 143).

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/web/src/components/chat/MessageBubble.tsx` around lines 157 - 171,
The copyMessage handler enqueues setTimeouts without cancelling previous timers
causing stale-timer races for copied and copyError; fix it by adding two refs
(e.g. copiedTimerRef and copyErrorTimerRef via useRef<number | null>) near the
existing state declarations, clear any existing timer (clearTimeout on
copiedTimerRef/current or copyErrorTimerRef/current) before creating a new
setTimeout, store the new timer id in the corresponding ref, and also clear both
timers in a cleanup effect (useEffect cleanup) to avoid leaks; update the
promise .then and .catch branches to use these refs instead of raw setTimeout so
clicks won’t prematurely reset state.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes