fix lint frontend

Author: dinhlongviolin1

web-app/src/containers/LeftPanel.tsx

@@ -141,7 +141,7 @@ const LeftPanel = () => {
     return () => {
       window.removeEventListener('resize', handleResize)
     }
-  }, [setLeftPanel])
+  }, [setLeftPanel, open])
 
   const currentPath = useRouterState({
     select: (state) => state.location.pathname,

web-app/src/containers/auth/UserProfileMenu.tsx

@@ -13,8 +13,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { Button } from '@/components/ui/button'
-import { IconUser, IconLogout, IconChevronDown } from '@tabler/icons-react'
+import { IconUser, IconLogout } from '@tabler/icons-react'
 import { useTranslation } from '@/i18n/react-i18next-compat'
 import { useAuth } from '@/hooks/useAuth'
 import { toast } from 'sonner'

web-app/src/hooks/useThreadScrolling.tsx

@@ -1,4 +1,4 @@
-import {  useEffect, useMemo, useRef, useState } from 'react'
+import {  useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useAppState } from './useAppState'
 import { useMessages } from './useMessages'
 import { useShallow } from 'zustand/react/shallow'
@@ -25,16 +25,16 @@ export const useThreadScrolling = (
 
   const showScrollToBottomBtn = !isAtBottom && hasScrollbar
 
-  const scrollToBottom = (smooth = false) => {
+  const scrollToBottom = useCallback((smooth = false) => {
     if (scrollContainerRef.current) {
       scrollContainerRef.current.scrollTo({
         top: scrollContainerRef.current.scrollHeight,
         ...(smooth ? { behavior: 'smooth' } : {}),
       })
     }
-  }
+  }, [])
 
-  const handleScroll = (e: Event) => {
+  const handleScroll = useCallback((e: Event) => {
     const target = e.target as HTMLDivElement
     const { scrollTop, scrollHeight, clientHeight } = target
     // Use a small tolerance to better detect when we're at the bottom
@@ -53,17 +53,18 @@ export const useThreadScrolling = (
     setIsAtBottom(isBottom)
     setHasScrollbar(hasScroll)
     lastScrollTopRef.current = scrollTop
-  }
+  }, [streamingContent])
 
   useEffect(() => {
-    if (scrollContainerRef.current) {
-      scrollContainerRef.current.addEventListener('scroll', handleScroll)
+    const scrollContainer = scrollContainerRef.current
+    if (scrollContainer) {
+      scrollContainer.addEventListener('scroll', handleScroll)
       return () =>
-        scrollContainerRef.current?.removeEventListener('scroll', handleScroll)
+        scrollContainer.removeEventListener('scroll', handleScroll)
     }
-  }, [scrollContainerRef])
+  }, [handleScroll])
 
-  const checkScrollState = () => {
+  const checkScrollState = useCallback(() => {
     const scrollContainer = scrollContainerRef.current
     if (!scrollContainer) return
 
@@ -73,7 +74,7 @@ export const useThreadScrolling = (
 
     setIsAtBottom(isBottom)
     setHasScrollbar(hasScroll)
-  }
+  }, [])
 
   // Single useEffect for all auto-scrolling logic
   useEffect(() => {
@@ -120,7 +121,7 @@ export const useThreadScrolling = (
       const interval = setInterval(checkScrollState, 100)
       return () => clearInterval(interval)
     }
-  }, [streamingContent])
+  }, [streamingContent, checkScrollState])
 
   // Auto-scroll to bottom when component mounts or thread content changes
   useEffect(() => {
@@ -138,7 +139,7 @@ export const useThreadScrolling = (
       checkScrollState()
       return
     }
-  }, [])
+  }, [checkScrollState, scrollToBottom])
 
   const handleDOMScroll = (e: Event) => {
     const target = e.target as HTMLDivElement
@@ -182,7 +183,7 @@ export const useThreadScrolling = (
     userIntendedPositionRef.current = null
     wasStreamingRef.current = false
     checkScrollState()
-  }, [threadId])
+  }, [threadId, checkScrollState, scrollToBottom])
 
   return useMemo(
     () => ({ showScrollToBottomBtn, scrollToBottom, setIsUserScrolling }),

web-app/src/providers/AuthProvider.tsx

@@ -3,7 +3,7 @@
  * Initializes the auth service and sets up event listeners
  */
 
-import { useEffect, useState, ReactNode } from 'react'
+import { useCallback, useEffect, useState, ReactNode } from 'react'
 import { PlatformFeature } from '@/lib/platform/types'
 import { PlatformFeatures } from '@/lib/platform/const'
 import { initializeAuthStore, getAuthStore } from '@/hooks/useAuth'
@@ -28,7 +28,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
     PlatformFeatures[PlatformFeature.AUTHENTICATION]
 
   // Fetch user data when user logs in
-  const fetchUserData = async () => {
+  const fetchUserData = useCallback(async () => {
     try {
       const { setThreads } = useThreads.getState()
       const { setMessages } = useMessages.getState()
@@ -47,10 +47,10 @@ export function AuthProvider({ children }: AuthProviderProps) {
     } catch (error) {
       console.error('Failed to fetch user data:', error)
     }
-  }
+  }, [serviceHub])
 
   // Reset all app data when user logs out
-  const resetAppData = () => {
+  const resetAppData = useCallback(() => {
     // Clear all threads (including favorites)
     const { clearAllThreads, setCurrentThreadId } = useThreads.getState()
     clearAllThreads()
@@ -70,7 +70,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
 
     // Navigate back to home to ensure clean state
     navigate({ to: '/', replace: true })
-  }
+  }, [navigate])
 
   useEffect(() => {
     if (!isAuthenticationEnabled) {
@@ -139,7 +139,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
     return () => {
       cleanupAuthListener()
     }
-  }, [isAuthenticationEnabled, isReady])
+  }, [isAuthenticationEnabled, isReady, fetchUserData, resetAppData])
 
   return <>{isReady && children}</>
 }