Merge pull request #786 from miurla/chore/next-16-2-upgrade

Upgrade to Next.js 16.2.1

Author: miurla

.eslintrc.json

@@ -42,45 +42,45 @@ export function ChatArtifactContainer({
   children: React.ReactNode
 }) {
   const { state } = useArtifact()
-  const containerRef = useRef<HTMLDivElement>(null)
+  const [containerElement, setContainerElement] =
+    useState<HTMLDivElement | null>(null)
+  const hasAppliedSavedWidthRef = useRef(false)
   const [width, setWidth] = useState(DEFAULT_WIDTH)
   const [isResizing, setIsResizing] = useState(false)
   const hasUser = useHasUser()
   const { open, isMobile: isMobileSidebar } = useSidebar()
 
-  // Load saved width after hydration
-  useEffect(() => {
+  const setContainerRef = useCallback((node: HTMLDivElement | null) => {
+    setContainerElement(node)
+
+    if (!node || hasAppliedSavedWidthRef.current) {
+      return
+    }
+
+    hasAppliedSavedWidthRef.current = true
+
     const savedWidth = localStorage.getItem('artifactPanelWidth')
-    if (savedWidth) {
-      const parsedWidth = parseInt(savedWidth, 10)
-      // Ensure parsedWidth is at least MIN_WIDTH to prevent invalid panel states
-      if (
-        !isNaN(parsedWidth) &&
-        parsedWidth >= MIN_WIDTH &&
-        parsedWidth <= MAX_WIDTH
-      ) {
-        // Clamp against available space considering chat minimum width
-        const containerRect = containerRef.current?.getBoundingClientRect()
-        if (containerRect) {
-          const { allowedMin, allowedMax } = getAllowedWidthBounds(
-            containerRect.width
-          )
-          const clamped = Math.min(
-            Math.max(parsedWidth, allowedMin),
-            allowedMax
-          )
-          setWidth(clamped)
-        } else {
-          setWidth(parsedWidth)
-        }
-      }
+    if (!savedWidth) {
+      return
+    }
+
+    const parsedWidth = parseInt(savedWidth, 10)
+    if (
+      isNaN(parsedWidth) ||
+      parsedWidth < MIN_WIDTH ||
+      parsedWidth > MAX_WIDTH
+    ) {
+      return
     }
+
+    const { allowedMin, allowedMax } = getAllowedWidthBounds(node.clientWidth)
+    const clampedWidth = Math.min(Math.max(parsedWidth, allowedMin), allowedMax)
+    setWidth(clampedWidth)
   }, [])
 
   // Keep width in bounds when container resizes (e.g., window resize)
   useEffect(() => {
-    const el = containerRef.current
-    if (!el) return
+    if (!containerElement) return
     const ro = new ResizeObserver(entries => {
       for (const entry of entries) {
         const { allowedMin, allowedMax } = getAllowedWidthBounds(
@@ -89,9 +89,9 @@ export function ChatArtifactContainer({
         setWidth(prev => Math.min(Math.max(prev, allowedMin), allowedMax))
       }
     })
-    ro.observe(el)
+    ro.observe(containerElement)
     return () => ro.disconnect()
-  }, [])
+  }, [containerElement])
 
   const startResize = useCallback((e: React.MouseEvent) => {
     e.preventDefault()
@@ -102,7 +102,7 @@ export function ChatArtifactContainer({
     if (!isResizing) return
 
     const handleMouseMove = (e: MouseEvent) => {
-      const containerRect = containerRef.current?.getBoundingClientRect()
+      const containerRect = containerElement?.getBoundingClientRect()
       if (containerRect) {
         const newWidth = containerRect.right - e.clientX
         const { allowedMin, allowedMax } = getAllowedWidthBounds(
@@ -128,7 +128,7 @@ export function ChatArtifactContainer({
       document.removeEventListener('mousemove', handleMouseMove)
       document.removeEventListener('mouseup', handleMouseUp)
     }
-  }, [isResizing])
+  }, [containerElement, isResizing])
 
   return (
     <div className="flex-1 min-h-0 min-w-0 h-screen flex">
@@ -140,7 +140,7 @@ export function ChatArtifactContainer({
 
       {/* Desktop: Independent panels like morphic-studio */}
       <div
-        ref={containerRef}
+        ref={setContainerRef}
         className="hidden md:flex flex-1 min-w-0 overflow-hidden"
       >
         {/* Chat Panel - Independent container */}

bun.lock

@@ -242,34 +242,37 @@ export function Chat({
     const container = scrollContainerRef.current
     if (!container) return
 
-    const handleScroll = () => {
+    const updateIsAtBottom = () => {
       const { scrollTop, scrollHeight, clientHeight } = container
       const threshold = 50 // threshold in pixels
-      if (scrollHeight - scrollTop - clientHeight < threshold) {
-        setIsAtBottom(true)
-      } else {
-        setIsAtBottom(false)
-      }
+      setIsAtBottom(scrollHeight - scrollTop - clientHeight < threshold)
+    }
+
+    const handleScroll = () => {
+      updateIsAtBottom()
     }
 
     container.addEventListener('scroll', handleScroll, { passive: true })
-    handleScroll() // Set initial state
+    const frame = requestAnimationFrame(updateIsAtBottom)
 
-    return () => container.removeEventListener('scroll', handleScroll)
+    return () => {
+      cancelAnimationFrame(frame)
+      container.removeEventListener('scroll', handleScroll)
+    }
   }, [messages.length])
 
   // Check scroll position when messages change (during generation)
   useEffect(() => {
     const container = scrollContainerRef.current
     if (!container) return
 
-    const { scrollTop, scrollHeight, clientHeight } = container
-    const threshold = 50
-    if (scrollHeight - scrollTop - clientHeight < threshold) {
-      setIsAtBottom(true)
-    } else {
-      setIsAtBottom(false)
-    }
+    const frame = requestAnimationFrame(() => {
+      const { scrollTop, scrollHeight, clientHeight } = container
+      const threshold = 50
+      setIsAtBottom(scrollHeight - scrollTop - clientHeight < threshold)
+    })
+
+    return () => cancelAnimationFrame(frame)
   }, [messages])
 
   // Scroll to the section when a new user message is sent

components/artifact/chat-artifact-container.tsx

@@ -1,11 +1,15 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useSyncExternalStore } from 'react'
 
 import { Check, ChevronDown } from 'lucide-react'
 
 import { ModelType } from '@/lib/types/model-type'
-import { getCookie, setCookie } from '@/lib/utils/cookies'
+import {
+  getCookie,
+  setCookie,
+  subscribeToCookieChange
+} from '@/lib/utils/cookies'
 
 import { Button } from './ui/button'
 import {
@@ -25,29 +29,32 @@ export function ModelTypeSelector({
 }: {
   disabled?: boolean
 }) {
-  const [value, setValue] = useState<ModelType>('speed')
+  const value = useSyncExternalStore(
+    subscribeToCookieChange,
+    () => {
+      const savedType = getCookie('modelType')
+      return savedType === 'quality' ? 'quality' : 'speed'
+    },
+    () => 'speed'
+  )
   const [dropdownOpen, setDropdownOpen] = useState(false)
 
   useEffect(() => {
     if (disabled) {
-      setValue('speed')
       setCookie('modelType', 'speed')
-      return
-    }
-    const savedType = getCookie('modelType')
-    if (savedType && ['speed', 'quality'].includes(savedType)) {
-      setValue(savedType as ModelType)
     }
   }, [disabled])
 
   const handleTypeSelect = (type: ModelType) => {
     if (disabled) return
-    setValue(type)
     setCookie('modelType', type)
     setDropdownOpen(false)
   }
 
-  const selectedOption = MODEL_TYPE_OPTIONS.find(opt => opt.value === value)
+  const selectedValue = disabled ? 'speed' : value
+  const selectedOption = MODEL_TYPE_OPTIONS.find(
+    opt => opt.value === selectedValue
+  )
 
   return (
     <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
@@ -71,7 +78,7 @@ export function ModelTypeSelector({
         sideOffset={5}
       >
         {MODEL_TYPE_OPTIONS.map(option => {
-          const isSelected = value === option.value
+          const isSelected = selectedValue === option.value
           return (
             <DropdownMenuItem
               key={option.value}

components/chat.tsx

@@ -1,13 +1,17 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState, useSyncExternalStore } from 'react'
 
 import { Check, ChevronDown } from 'lucide-react'
 
 import { SEARCH_MODE_CONFIGS } from '@/lib/config/search-modes'
 import { SearchMode } from '@/lib/types/search'
 import { cn } from '@/lib/utils'
-import { getCookie, setCookie } from '@/lib/utils/cookies'
+import {
+  getCookie,
+  setCookie,
+  subscribeToCookieChange
+} from '@/lib/utils/cookies'
 
 import { Button } from './ui/button'
 import {
@@ -19,42 +23,27 @@ import {
 import { HoverCard, HoverCardContent, HoverCardTrigger } from './ui/hover-card'
 
 export function SearchModeSelector() {
-  const [value, setValue] = useState<SearchMode>('quick')
-  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({})
+  const value = useSyncExternalStore(
+    subscribeToCookieChange,
+    () => {
+      const savedMode = getCookie('searchMode')
+      return savedMode === 'adaptive' ? 'adaptive' : 'quick'
+    },
+    () => 'quick'
+  )
   const [openHoverCard, setOpenHoverCard] = useState<string | null>(null)
   const [justSelected, setJustSelected] = useState(false)
   const [dropdownOpen, setDropdownOpen] = useState(false)
-  const buttonsRef = useRef<(HTMLButtonElement | null)[]>([])
 
   useEffect(() => {
     const savedMode = getCookie('searchMode')
-    if (savedMode && ['quick', 'adaptive'].includes(savedMode)) {
-      setValue(savedMode as SearchMode)
-    } else if (savedMode) {
+    if (savedMode && !['quick', 'adaptive'].includes(savedMode)) {
       // Clean up invalid cookie value (e.g., old 'planning' mode)
       setCookie('searchMode', 'quick')
-      setValue('quick')
     }
   }, [])
 
-  useEffect(() => {
-    // Update indicator position when value changes
-    const selectedIndex = SEARCH_MODE_CONFIGS.findIndex(
-      config => config.value === value
-    )
-    const selectedButton = buttonsRef.current[selectedIndex]
-
-    if (selectedButton) {
-      const { offsetLeft, offsetWidth } = selectedButton
-      setIndicatorStyle({
-        transform: `translateX(${offsetLeft}px)`,
-        width: `${offsetWidth}px`
-      })
-    }
-  }, [value])
-
   const handleModeSelect = (mode: SearchMode) => {
-    setValue(mode)
     setCookie('searchMode', mode)
     setOpenHoverCard(null) // Close hover card on selection
     setDropdownOpen(false) // Close dropdown on selection
@@ -70,6 +59,14 @@ export function SearchModeSelector() {
     config => config.value === value
   )
   const SelectedIcon = selectedMode?.icon
+  const selectedIndex = Math.max(
+    SEARCH_MODE_CONFIGS.findIndex(config => config.value === value),
+    0
+  )
+  const indicatorStyle = {
+    width: `${100 / SEARCH_MODE_CONFIGS.length}%`,
+    transform: `translateX(${selectedIndex * 100}%)`
+  }
 
   return (
     <>
@@ -159,12 +156,9 @@ export function SearchModeSelector() {
                   <HoverCardTrigger asChild>
                     <button
                       type="button"
-                      ref={el => {
-                        buttonsRef.current[index] = el
-                      }}
                       onClick={() => handleModeSelect(config.value)}
                       className={cn(
-                        'relative z-10 flex items-center justify-center rounded-full px-3 py-2 transition-colors duration-200',
+                        'relative z-10 flex-1 items-center justify-center rounded-full px-3 py-2 transition-colors duration-200',
                         isSelected
                           ? 'text-foreground'
                           : 'text-muted-foreground hover:text-foreground/80'