fix(docs): preserve Ask Sim chat state across close/reopen

The panel split unmounted AskAIPanel entirely on close, discarding
useChat's message state - reopening always started an empty
conversation, unlike the original single-component layout where
useChat lived in a component that never unmounted.

Fixed by keeping the panel mounted (via a hasOpened flag that never
resets) once first opened, and having the panel itself return null
when closed rather than being conditionally removed from the tree by
its parent - hooks still run every render, so useChat's state persists
across visibility toggles. The dynamic import still only fires on the
first open, so the initial-load win is unchanged.

Verified via a real click-through (open, type, close, reopen): input
persists correctly, and the panel chunk still has zero network
requests on initial page load. Performance unchanged at 75.

Author: waleedlatif1

apps/docs/components/ai/ask-ai-panel.tsx

@@ -43,10 +43,11 @@ function getText(parts: ReadonlyArray<{ type: string; [key: string]: unknown }>)
 interface AskAIPanelProps {
   /** Active docs locale, forwarded so retrieval is scoped to the reader's language. */
   locale: string
+  open: boolean
   onClose: () => void
 }
 
-export function AskAIPanel({ locale, onClose }: AskAIPanelProps) {
+export function AskAIPanel({ locale, open, onClose }: AskAIPanelProps) {
   const [input, setInput] = useState('')
   const scrollRef = useRef<HTMLDivElement>(null)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
@@ -63,6 +64,7 @@ export function AskAIPanel({ locale, onClose }: AskAIPanelProps) {
   }
 
   useEffect(() => {
+    if (!open) return
     textareaRef.current?.focus()
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -71,11 +73,12 @@ export function AskAIPanel({ locale, onClose }: AskAIPanelProps) {
     }
     document.addEventListener('keydown', handleKeyDown)
     return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [])
+  }, [open])
 
   useEffect(() => {
+    if (!open) return
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight })
-  }, [])
+  }, [open])
 
   useEffect(() => {
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' })
@@ -89,6 +92,8 @@ export function AskAIPanel({ locale, onClose }: AskAIPanelProps) {
     setInput('')
   }
 
+  if (!open) return null
+
   return (
     <div
       role='dialog'

apps/docs/components/ai/ask-ai.tsx

@@ -15,27 +15,35 @@ interface AskAIProps {
 
 export function AskAI({ locale }: AskAIProps) {
   const [open, setOpen] = useState(false)
+  const [hasOpened, setHasOpened] = useState(false)
   const openButtonRef = useRef<HTMLButtonElement>(null)
 
+  const handleOpen = () => {
+    setHasOpened(true)
+    setOpen(true)
+  }
+
   const handleClose = () => {
     setOpen(false)
     openButtonRef.current?.focus()
   }
 
-  if (!open) {
-    return (
-      <button
-        ref={openButtonRef}
-        type='button'
-        aria-label='Ask Sim'
-        onClick={() => setOpen(true)}
-        className='fixed right-4 bottom-4 z-50 flex h-11 items-center gap-1.5 rounded-full border border-[var(--border-1)] bg-[var(--surface-5)] px-4 font-season text-[var(--text-body)] text-sm shadow-[var(--shadow-medium)] transition-colors hover:bg-[var(--surface-active)] dark:bg-[var(--surface-4)]'
-      >
-        <MessageCircle className='size-[16px] text-[var(--text-icon)]' />
-        Ask Sim
-      </button>
-    )
-  }
+  return (
+    <>
+      {!open && (
+        <button
+          ref={openButtonRef}
+          type='button'
+          aria-label='Ask Sim'
+          onClick={handleOpen}
+          className='fixed right-4 bottom-4 z-50 flex h-11 items-center gap-1.5 rounded-full border border-[var(--border-1)] bg-[var(--surface-5)] px-4 font-season text-[var(--text-body)] text-sm shadow-[var(--shadow-medium)] transition-colors hover:bg-[var(--surface-active)] dark:bg-[var(--surface-4)]'
+        >
+          <MessageCircle className='size-[16px] text-[var(--text-icon)]' />
+          Ask Sim
+        </button>
+      )}
 
-  return <AskAIPanel locale={locale} onClose={handleClose} />
+      {hasOpened && <AskAIPanel locale={locale} open={open} onClose={handleClose} />}
+    </>
+  )
 }