fix: chat body scrollbar (#4737)

* fix: chat body scrollbar

* chore: update lock file

* fix: remove PluggableList

web/screens/Settings/Engines/RemoteEngineSettings.tsx

@@ -166,7 +166,8 @@ const RemoteEngineSettings = ({
                   <p className="mt-1 text-[hsla(var(--text-secondary))]">
                     {!customEngineLogo ? (
                       <span>
-                        Enter your authentication key to activate this engine.{' '}
+                        Enter your authentication key to activate this
+                        engine.{' '}
                       </span>
                     ) : (
                       <span>

web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx

@@ -1,6 +1,7 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { ThreadMessage } from '@janhq/core'
+import { ScrollArea } from '@janhq/joi'
 import { useVirtualizer } from '@tanstack/react-virtual'
 
 import { useAtomValue } from 'jotai'
@@ -14,6 +15,7 @@ import LoadModelError from '../LoadModelError'
 import EmptyThread from './EmptyThread'
 
 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
+import { showScrollBarAtom } from '@/helpers/atoms/Setting.atom'
 import {
   activeThreadAtom,
   isBlockingSendAtom,
@@ -65,6 +67,7 @@ const ChatBody = memo(
     const isUserManuallyScrollingUp = useRef(false)
     const currentThread = useAtomValue(activeThreadAtom)
     const isBlockingSend = useAtomValue(isBlockingSendAtom)
+    const showScrollBar = useAtomValue(showScrollBarAtom)
 
     const count = useMemo(
       () => (messages?.length ?? 0) + (loadModelError ? 1 : 0),
@@ -129,7 +132,8 @@ const ChatBody = memo(
 
     return (
       <div className="flex h-full w-full flex-col overflow-x-hidden">
-        <div
+        <ScrollArea
+          type={showScrollBar ? 'always' : 'scroll'}
           ref={parentRef}
           onScroll={handleScroll}
           className="List"
@@ -180,7 +184,7 @@ const ChatBody = memo(
               ))}
             </div>
           </div>
-        </div>
+        </ScrollArea>
       </div>
     )
   }

web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx

@@ -5,7 +5,6 @@ import React, { memo } from 'react'
 
 import Markdown from 'react-markdown'
 
-import { PluggableList } from 'react-markdown/lib'
 import rehypeHighlight from 'rehype-highlight'
 import rehypeHighlightCodeLines from 'rehype-highlight-code-lines'
 
@@ -225,7 +224,7 @@ export const MarkdownTextMessage = memo(
               renderKatex ? [rehypeKatex, { throwOnError: false }] : undefined,
               [rehypeHighlightCodeLines, { showLineNumbers: true }],
               wrapCodeBlocksWithoutVisit,
-            ].filter(Boolean) as PluggableList
+            ].filter(Boolean) as any
           }
           components={markdownComponents}
         >

web/styles/base/global.scss

@@ -44,21 +44,19 @@
   }
 }
 
-.show-scroll-bar {
+::-webkit-scrollbar {
-  ::-webkit-scrollbar {
+  width: 8px;
-    width: 8px;
+  height: 8px;
-    height: 8px;
+}
-  }
+::-webkit-scrollbar-track,
-  ::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb {
-  ::-webkit-scrollbar-thumb {
+  background-clip: content-box;
-    background-clip: content-box;
+  border-radius: inherit;
-    border-radius: inherit;
+}
-  }
+::-webkit-scrollbar-track {
-  ::-webkit-scrollbar-track {
+  background: hsla(var(--scrollbar-tracker));
-    background: hsla(var(--scrollbar-tracker));
+}
-  }
+::-webkit-scrollbar-thumb {
-  ::-webkit-scrollbar-thumb {
+  background: hsla(var(--scrollbar-thumb));
-    background: hsla(var(--scrollbar-thumb));
+  border-radius: 20px;
-    border-radius: 20px;
-  }
 }