fix(chat): prevent @-mention menu focus loss and stabilize render identity (#4218)

* fix(docs): preserve gif playback position in lightbox and clean up ui components

- Capture currentTime on click and seek lightbox video to match using useLayoutEffect
- Convert lightboxStartTime from useState to useRef (no independent render needed)
- Apply same fix to ActionVideo in action-media.tsx
- Remove dead AnimatedBlocks component (zero imports)
- Fix language-dropdown to derive currentLang during render instead of mirroring into state via effect
- Replace template literals with cn() in faq.tsx and video.tsx

* fix(chat): prevent @-mention menu focus loss and stabilize render identity

Radix DropdownMenu's FocusScope was restoring focus from the search input
to the content root whenever registered menu items mounted or unmounted
inside the content, interrupting typing after a keystroke or two.

- Keep the default tree always mounted under `hidden` instead of swapping
  subtrees when the filter activates.
- Render filtered results as plain <button role="menuitem"> so they do not
  participate in Radix's menu Collection.
- Add activeIndex state with ArrowUp/Down/Enter keyboard nav, mouse-hover
  sync, and scrollIntoView so the highlighted row stays visible and users
  can see what Enter will select.

While tracing the cascade that compounded the bug:

- Hoist `select` in useWorkflowMap / useWorkspacesQuery / useFolderMap to
  module scope so TanStack Query caches the select result across renders.
- Guard setSelectedContexts([]) with a functional updater that bails out
  when already empty, preventing a fresh [] literal from invalidating
  consumers that key on reference identity.
- Wrap WorkspaceHeader in React.memo so it bails out on parent renders
  once its (now-stable) props are unchanged.

Made-with: Cursor

* remove extraneous comments

* cleanup

* fix(chat): apply same setState bail-out to clearContexts for consistency

Matches the invariant we already established for the message effect:
calling setSelectedContexts([]) against an already-empty array emits a
fresh [] reference (Object.is bails out are not reference-level), which
cascades through consumers that key on selectedContexts identity.
clearContexts is part of the hook's public API so callers can't know
whether the list is empty — make it safe for them.

Made-with: Cursor

Author: waleedlatif1

apps/docs/components/ui/action-media.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { cn, getAssetUrl } from '@/lib/utils'
 import { Lightbox } from './lightbox'
 
@@ -50,18 +50,22 @@ export function ActionImage({ src, alt, enableLightbox = true }: ActionImageProp
 }
 
 export function ActionVideo({ src, alt, enableLightbox = true }: ActionVideoProps) {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const startTimeRef = useRef(0)
   const [isLightboxOpen, setIsLightboxOpen] = useState(false)
   const resolvedSrc = getAssetUrl(src)
 
   const handleClick = () => {
     if (enableLightbox) {
+      startTimeRef.current = videoRef.current?.currentTime ?? 0
       setIsLightboxOpen(true)
     }
   }
 
   return (
     <>
       <video
+        ref={videoRef}
         src={resolvedSrc}
         autoPlay
         loop
@@ -80,6 +84,7 @@ export function ActionVideo({ src, alt, enableLightbox = true }: ActionVideoProp
           src={src}
           alt={alt}
           type='video'
+          startTime={startTimeRef.current}
         />
       )}
     </>

apps/docs/components/ui/animated-blocks.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react'
 import { ChevronRight } from 'lucide-react'
+import { cn } from '@/lib/utils'
 
 interface FAQItem {
   question: string
@@ -31,9 +32,10 @@ function FAQItemRow({
         className='flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left font-[470] text-[0.875rem] text-[rgba(0,0,0,0.8)] transition-colors hover:bg-[rgba(0,0,0,0.02)] dark:text-[rgba(255,255,255,0.85)] dark:hover:bg-[rgba(255,255,255,0.03)]'
       >
         <ChevronRight
-          className={`h-3.5 w-3.5 shrink-0 text-[rgba(0,0,0,0.3)] transition-transform duration-200 dark:text-[rgba(255,255,255,0.3)] ${
-            isOpen ? 'rotate-90' : ''
-          }`}
+          className={cn(
+            'h-3.5 w-3.5 shrink-0 text-[rgba(0,0,0,0.3)] transition-transform duration-200 dark:text-[rgba(255,255,255,0.3)]',
+            isOpen && 'rotate-90'
+          )}
         />
         {item.question}
       </button>
@@ -81,11 +83,10 @@ export function FAQ({ items, title = 'Common Questions' }: FAQProps) {
         {items.map((item, index) => (
           <div
             key={index}
-            className={
-              index !== items.length - 1
-                ? 'border-[rgba(0,0,0,0.08)] border-b dark:border-[rgba(255,255,255,0.08)]'
-                : ''
-            }
+            className={cn(
+              index !== items.length - 1 &&
+                'border-[rgba(0,0,0,0.08)] border-b dark:border-[rgba(255,255,255,0.08)]'
+            )}
           >
             <FAQItemRow
               item={item}

apps/docs/components/ui/faq.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useEffect, useState } from 'react'
 import { Check } from 'lucide-react'
 import { useParams, usePathname, useRouter } from 'next/navigation'
 import {
@@ -25,24 +24,9 @@ export function LanguageDropdown() {
   const params = useParams()
   const router = useRouter()
 
-  const [currentLang, setCurrentLang] = useState(() => {
-    const langFromParams = params?.lang as string
-    return langFromParams && Object.keys(languages).includes(langFromParams) ? langFromParams : 'en'
-  })
-
-  useEffect(() => {
-    const langFromParams = params?.lang as string
-
-    if (langFromParams && Object.keys(languages).includes(langFromParams)) {
-      if (langFromParams !== currentLang) {
-        setCurrentLang(langFromParams)
-      }
-    } else {
-      if (currentLang !== 'en') {
-        setCurrentLang('en')
-      }
-    }
-  }, [params])
+  const langFromParams = params?.lang as string
+  const currentLang =
+    langFromParams && Object.keys(languages).includes(langFromParams) ? langFromParams : 'en'
 
   const handleLanguageChange = (locale: string) => {
     if (locale === currentLang) return

apps/docs/components/ui/language-dropdown.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useLayoutEffect, useRef } from 'react'
 import { getAssetUrl } from '@/lib/utils'
 
 interface LightboxProps {
@@ -9,10 +9,12 @@ interface LightboxProps {
   src: string
   alt: string
   type: 'image' | 'video'
+  startTime?: number
 }
 
-export function Lightbox({ isOpen, onClose, src, alt, type }: LightboxProps) {
+export function Lightbox({ isOpen, onClose, src, alt, type, startTime }: LightboxProps) {
   const overlayRef = useRef<HTMLDivElement>(null)
+  const videoRef = useRef<HTMLVideoElement>(null)
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -40,6 +42,12 @@ export function Lightbox({ isOpen, onClose, src, alt, type }: LightboxProps) {
     }
   }, [isOpen, onClose])
 
+  useLayoutEffect(() => {
+    if (isOpen && type === 'video' && videoRef.current && startTime != null && startTime > 0) {
+      videoRef.current.currentTime = startTime
+    }
+  }, [isOpen, startTime, type])
+
   if (!isOpen) return null
 
   return (
@@ -61,6 +69,7 @@ export function Lightbox({ isOpen, onClose, src, alt, type }: LightboxProps) {
           />
         ) : (
           <video
+            ref={videoRef}
             src={getAssetUrl(src)}
             autoPlay
             loop