chore: remove scroll to bottom library

web/containers/Layout/index.tsx

@@ -27,6 +27,8 @@ import SelectingModelModal from '@/screens/Settings/SelectingModelModal'
 
 import MainViewContainer from '../MainViewContainer'
 
+import ModalTroubleShooting from '../ModalTroubleShoot'
+
 import InstallingExtensionModal from './BottomBar/InstallingExtension/InstallingExtensionModal'
 
 import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
@@ -77,6 +79,7 @@ const BaseLayout = () => {
       <ChooseWhatToImportModal />
       <InstallingExtensionModal />
       <HuggingFaceRepoDetailModal />
+      <ModalTroubleShooting />
     </div>
   )
 }

web/containers/ListContainer/index.tsx

@@ -1,10 +1,13 @@
 import { ReactNode, useEffect, useRef } from 'react'
 
+import { twMerge } from 'tailwind-merge'
+
 type Props = {
   children: ReactNode
+  className?: string
 }
 
-const ListContainer: React.FC<Props> = ({ children }) => {
+const ListContainer: React.FC<Props> = ({ children, className = '' }) => {
   const listRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -19,7 +22,10 @@ const ListContainer: React.FC<Props> = ({ children }) => {
   return (
     <div
       ref={listRef}
-      className="flex h-full w-full flex-col overflow-y-scroll"
+      className={twMerge(
+        'flex h-full w-full flex-col overflow-y-scroll',
+        className
+      )}
     >
       {children}
     </div>

web/containers/ModalTroubleShoot/index.tsx

@@ -1,11 +1,12 @@
 import { useState } from 'react'
-import ScrollToBottom from 'react-scroll-to-bottom'
 
 import { Modal, ModalContent, ModalHeader, ModalTitle } from '@janhq/uikit'
 import { motion as m } from 'framer-motion'
 import { atom, useAtom } from 'jotai'
 import { twMerge } from 'tailwind-merge'
 
+import ListContainer from '@/containers/ListContainer'
+
 import ServerLogs from '../ServerLogs'
 
 import AppLogs from './AppLogs'
@@ -106,11 +107,13 @@ const ModalTroubleShooting: React.FC = () => {
                 })}
               </ul>
             </div>
-            <ScrollToBottom className={twMerge('relative h-[140px] px-4 py-2')}>
-              {isTabActive === 0 && <AppLogs />}
-              {isTabActive === 1 && <ServerLogs limit={50} withCopy />}
-              {isTabActive === 2 && <DeviceSpecs />}
-            </ScrollToBottom>
+            <div className="h-[140px]">
+              <ListContainer className="px-4 py-2">
+                {isTabActive === 0 && <AppLogs />}
+                {isTabActive === 1 && <ServerLogs limit={50} />}
+                {isTabActive === 2 && <DeviceSpecs />}
+              </ListContainer>
+            </div>
           </div>
         </div>
       </ModalContent>

web/containers/ServerLogs/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { useCallback, useEffect, useState } from 'react'
 
 import React from 'react'
@@ -15,10 +14,11 @@ import { usePath } from '@/hooks/usePath'
 
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 
-type ServerLogsProps = { limit?: number; withCopy?: boolean }
+type Props = {
+  limit?: number
+}
 
-const ServerLogs = (props: ServerLogsProps) => {
-  const { limit = 0 } = props
+const ServerLogs: React.FC<Props> = ({ limit = 0 }) => {
   const { getLogs } = useLogs()
   const serverEnabled = useAtomValue(serverEnabledAtom)
   const [logs, setLogs] = useState<string[]>([])
@@ -35,8 +35,7 @@ const ServerLogs = (props: ServerLogsProps) => {
           )
         }
       }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [getLogs]
   )
 
   useEffect(() => {

web/package.json

@@ -41,7 +41,6 @@
     "react-hot-toast": "^2.4.1",
     "csstype": "^3.0.10",
     "react-icons": "^4.12.0",
-    "react-scroll-to-bottom": "^4.2.0",
     "react-toastify": "^9.1.3",
     "sass": "^1.69.4",
     "tailwind-merge": "^2.0.0",
@@ -58,7 +57,6 @@
     "@types/react": "18.2.34",
     "@types/react-dom": "18.2.14",
     "@types/react-icons": "^3.0.0",
-    "@types/react-scroll-to-bottom": "^4.2.4",
     "@types/uuid": "^9.0.6",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",

web/screens/Chat/ErrorMessage/index.tsx

@@ -9,9 +9,7 @@ import { useAtomValue, useSetAtom } from 'jotai'
 import { RefreshCcw } from 'lucide-react'
 
 import AutoLink from '@/containers/AutoLink'
-import ModalTroubleShooting, {
-  modalTroubleShootingAtom,
-} from '@/containers/ModalTroubleShoot'
+import { modalTroubleShootingAtom } from '@/containers/ModalTroubleShoot'
 
 import { MainViewState } from '@/constants/screens'
 
@@ -108,7 +106,6 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
             </span>
             &nbsp;now.
           </p>
-          <ModalTroubleShooting />
         </div>
       )}
     </div>

web/screens/Chat/LoadModelError/index.tsx

@@ -1,9 +1,7 @@
 import { EngineManager } from '@janhq/core'
 import { useAtomValue, useSetAtom } from 'jotai'
 
-import ModalTroubleShooting, {
-  modalTroubleShootingAtom,
-} from '@/containers/ModalTroubleShoot'
+import { modalTroubleShootingAtom } from '@/containers/ModalTroubleShoot'
 
 import { MainViewState } from '@/constants/screens'
 
@@ -132,7 +130,6 @@ const LoadModelError = () => {
         <p className="w-[90%]">
           <ErrorMessage />
         </p>
-        <ModalTroubleShooting />
       </div>
     </div>
   )

web/screens/LocalServer/index.tsx

@@ -1,9 +1,5 @@
-'use client'
-
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
-import ScrollToBottom from 'react-scroll-to-bottom'
-
 import {
   Button,
   Switch,
@@ -34,9 +30,8 @@ import DropdownListSidebar, {
   selectedModelAtom,
 } from '@/containers/DropdownListSidebar'
 
-import ModalTroubleShooting, {
-  modalTroubleShootingAtom,
-} from '@/containers/ModalTroubleShoot'
+import ListContainer from '@/containers/ListContainer'
+import { modalTroubleShootingAtom } from '@/containers/ModalTroubleShoot'
 import ServerLogs from '@/containers/ServerLogs'
 
 import { toaster } from '@/containers/Toast'
@@ -392,7 +387,7 @@ const LocalServerScreen = () => {
       </div>
 
       {/* Middle Bar */}
-      <ScrollToBottom className="relative flex h-full w-full flex-col overflow-auto bg-background">
+      <ListContainer>
         <div className="sticky top-0 flex  items-center justify-between bg-zinc-100 px-4 py-2 dark:bg-zinc-600">
           <h2 className="font-bold">Server Logs</h2>
           <div className="space-x-2">
@@ -459,7 +454,7 @@ const LocalServerScreen = () => {
             <ServerLogs />
           </div>
         )}
-      </ScrollToBottom>
+      </ListContainer>
 
       {/* Right bar */}
       <div
@@ -538,7 +533,6 @@ const LocalServerScreen = () => {
           )}
         </div>
       </div>
-      <ModalTroubleShooting />
     </div>
   )
 }

web/styles/components/message.scss

@@ -11,16 +11,13 @@
 
   a {
     @apply text-blue-600 dark:text-blue-300;
+
     &:hover {
       @apply underline;
     }
   }
 }
 
-button[class*='react-scroll-to-bottom--'] {
-  display: none;
-}
-
 .code-block {
   white-space: normal;
 }