fix: 新的滚动条组件

package.json

@@ -93,7 +93,6 @@
     "openai": "^4.52.1",
     "prettier": "^3.2.4",
     "react": "^18.2.0",
-    "react-custom-scrollbars-2": "^4.5.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.2",
     "react-markdown": "^9.0.1",

src/renderer/src/assets/styles/index.scss

@@ -156,7 +156,6 @@ body[os='mac'] {
   #content-container {
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
-    border-top-right-radius: 10px;
     border-left: 0.5px solid var(--color-border);
     box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.05);
   }

src/renderer/src/assets/styles/scrollbar.scss

@@ -1,11 +1,15 @@
 :root {
-  --color-scrollbar-thumb: #6b6b6b;
+  --color-scrollbar-thumb: rgba(255, 255, 255, 0.15);
-  --color-scrollbar-thumb-hover: #939393;
+  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
+  --color-scrollbar-thumb-right: rgba(255, 255, 255, 0.25);
+  --color-scrollbar-thumb-right-hover: rgba(255, 255, 255, 0.35);
 }
 
 body[theme-mode='light'] {
-  --color-scrollbar-thumb: #b1b1b1;
+  --color-scrollbar-thumb: rgba(0, 0, 0, 0.15);
-  --color-scrollbar-thumb-hover: #7d7d7d;
+  --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
+  --color-scrollbar-thumb-right: rgba(0, 0, 0, 0.25);
+  --color-scrollbar-thumb-right-hover: rgba(0, 0, 0, 0.35);
 }
 
 /* 全局初始化滚动条样式 */

src/renderer/src/components/Popups/SelectModelPopup.tsx

@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import { HStack } from '../Layout'
-import { Scrollbar } from '../Scrollbar'
+import Scrollbar from '../Scrollbar'
 
 type MenuItem = Required<MenuProps>['items'][number]
 

src/renderer/src/components/Scrollbar/index.tsx

@@ -1,22 +1,57 @@
-import { ScrollbarProps, Scrollbars } from 'react-custom-scrollbars-2'
+import { throttle } from 'lodash'
+import { FC, forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
-export const Scrollbar: React.FC<ScrollbarProps> = ({ children, ...props }) => {
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
-  return (
+  right?: boolean
-    <Scrollbars
+  ref?: any
-      autoHide
-      {...props}
-      renderThumbVertical={(props) => <Thumb {...props} />}
-      renderTrackHorizontal={(props) => <Thumb {...props} />}>
-      {children}
-    </Scrollbars>
-  )
 }
 
-const Thumb = styled.div`
+const Scrollbar: FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  border-radius: 10px;
+  const [isScrolling, setIsScrolling] = useState(false)
-  background-color: var(--color-scrollbar-thumb);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  const handleScroll = useCallback(
+    throttle(() => {
+      setIsScrolling(true)
+
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+
+      timeoutRef.current = setTimeout(() => setIsScrolling(false), 1500) // 增加到 2 秒
+    }, 200),
+    []
+  )
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <Container {...props} isScrolling={isScrolling} onScroll={handleScroll} ref={ref}>
+      {props.children}
+    </Container>
+  )
+})
+
+Scrollbar.displayName = 'Scrollbar'
+
+const Container = styled.div<{ isScrolling: boolean; right?: boolean }>`
+  overflow-y: auto;
+  &::-webkit-scrollbar-thumb {
+    transition: background 2s ease;
+    background: ${(props) =>
+      props.isScrolling ? `var(--color-scrollbar-thumb${props.right ? '-right' : ''})` : 'transparent'};
     &:hover {
-    background-color: var(--color-scrollbar-thumb-hover);
+      background: ${(props) =>
+        props.isScrolling ? `var(--color-scrollbar-thumb${props.right ? '-right' : ''}-hover)` : 'transparent'};
+    }
   }
 `
+
+export default Scrollbar

src/renderer/src/pages/agents/Agents.tsx

@@ -2,7 +2,7 @@ import { DeleteOutlined, EditOutlined, MoreOutlined, PlusOutlined } from '@ant-d
 import AssistantSettingsPopup from '@renderer/components/AssistantSettings'
 import DragableList from '@renderer/components/DragableList'
 import { HStack } from '@renderer/components/Layout'
-import { Scrollbar } from '@renderer/components/Scrollbar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import { useAgents } from '@renderer/hooks/useAgents'
 import { createAssistantFromAgent } from '@renderer/services/assistant'
 import { Agent } from '@renderer/types'
@@ -57,7 +57,6 @@ const Agents: React.FC<Props> = ({ onClick }) => {
   )
 
   return (
-    <Scrollbar style={{ maxWidth: 'var(--assistants-width)' }}>
     <Container style={{ paddingBottom: dragging ? 30 : 0 }}>
       {agents.length > 0 && (
         <DragableList
@@ -95,11 +94,10 @@ const Agents: React.FC<Props> = ({ onClick }) => {
       )}
       <div style={{ height: 10 }} />
     </Container>
-    </Scrollbar>
   )
 }
 
-const Container = styled.div`
+const Container = styled(Scrollbar)`
   padding: 15px;
   display: flex;
   flex-direction: column;

src/renderer/src/pages/agents/AgentsPage.tsx

@@ -1,6 +1,6 @@
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { VStack } from '@renderer/components/Layout'
-import { Scrollbar } from '@renderer/components/Scrollbar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import SystemAgents from '@renderer/config/agents.json'
 import { createAssistantFromAgent } from '@renderer/services/assistant'
 import { Agent } from '@renderer/types'
@@ -61,8 +61,7 @@ const AgentsPage: FC = () => {
       </Navbar>
       <ContentContainer id="content-container">
         <Agents onClick={onAddAgentConfirm} />
-        <Scrollbar>
+        <AssistantsContainer right>
-          <AssistantsContainer>
           <VStack style={{ flex: 1 }}>
             {Object.keys(agentGroups)
               .reverse()
@@ -88,7 +87,6 @@ const AgentsPage: FC = () => {
             <div style={{ minHeight: 20 }} />
           </VStack>
         </AssistantsContainer>
-        </Scrollbar>
       </ContentContainer>
     </Container>
   )
@@ -109,12 +107,13 @@ const ContentContainer = styled.div`
   height: 100%;
 `
 
-const AssistantsContainer = styled.div`
+const AssistantsContainer = styled(Scrollbar)`
   display: flex;
   flex: 1;
   flex-direction: row;
   height: calc(100vh - var(--navbar-height));
   padding: 15px 20px;
+  margin-right: 4px;
 `
 
 const AgentPrompt = styled.div`

src/renderer/src/pages/files/FilesPage.tsx

@@ -1,6 +1,5 @@
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
-import { VStack } from '@renderer/components/Layout'
+import Scrollbar from '@renderer/components/Scrollbar'
-import { Scrollbar } from '@renderer/components/Scrollbar'
 import db from '@renderer/databases'
 import FileManager from '@renderer/services/file'
 import { FileType, FileTypes } from '@renderer/types'
@@ -67,17 +66,15 @@ const FilesPage: FC = () => {
         <NavbarCenter style={{ borderRight: 'none' }}>{t('files.title')}</NavbarCenter>
       </Navbar>
       <ContentContainer id="content-container">
-        <Scrollbar>
+        <TableContainer right>
-          <VStack style={{ width: '100%', padding: 15 }}>
           <Table
             dataSource={dataSource}
             columns={columns}
-              style={{ width: '100%', marginBottom: 20 }}
+            style={{ width: '100%' }}
             size="small"
             pagination={{ pageSize: 100 }}
           />
-          </VStack>
+        </TableContainer>
-        </Scrollbar>
       </ContentContainer>
     </Container>
   )
@@ -87,7 +84,7 @@ const Container = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  height: 100%;
+  height: calc(100vh - var(--navbar-height));
 `
 
 const ContentContainer = styled.div`
@@ -96,6 +93,14 @@ const ContentContainer = styled.div`
   flex-direction: row;
   justify-content: center;
   height: 100%;
+  padding: 0 2px;
+`
+
+const TableContainer = styled(Scrollbar)`
+  padding: 15px;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
 `
 
 const FileNameText = styled.div`

src/renderer/src/pages/history/HistoryPage.tsx

@@ -85,7 +85,7 @@ const TopicsPage: FC = () => {
         <TopicsHistory keywords={search} onClick={onTopicClick as any} style={{ display: isShow('topics') }} />
         <TopicMessages topic={topic} style={{ display: isShow('topic') }} />
         <SearchResults
-          keywords={search}
+          keywords={isShow('search') ? search : ''}
           onMessageClick={onMessageClick}
           onTopicClick={onTopicClick}
           style={{ display: isShow('search') }}

src/renderer/src/pages/history/components/SearchResults.tsx

@@ -48,6 +48,13 @@ const SearchResults: FC<Props> = ({ keywords, onMessageClick, onTopicClick, ...p
 
   const onSearch = useCallback(async () => {
     setSearchResults([])
+
+    if (keywords.length === 0) {
+      setSearchStats({ count: 0, time: 0 })
+      setSearchTerms([])
+      return
+    }
+
     const startTime = performance.now()
     const results: { message: Message; topic: Topic }[] = []
     const newSearchTerms = keywords
@@ -74,8 +81,12 @@ const SearchResults: FC<Props> = ({ keywords, onMessageClick, onTopicClick, ...p
   const highlightText = (text: string) => {
     let highlightedText = removeMarkdown(text)
     searchTerms.forEach((term) => {
+      try {
         const regex = new RegExp(term, 'gi')
         highlightedText = highlightedText.replace(regex, (match) => `<mark>${match}</mark>`)
+      } catch (error) {
+        //
+      }
     })
     return <span dangerouslySetInnerHTML={{ __html: highlightedText }} />
   }

src/renderer/src/pages/home/Markdown/Markdown.tsx

@@ -49,6 +49,7 @@ const Markdown: FC<Props> = ({ message }) => {
       className="markdown"
       rehypePlugins={rehypePlugins}
       remarkPlugins={[remarkMath, remarkGfm]}
+      disallowedElements={mathEngine === 'KaTeX' ? ['style'] : []}
       components={
         {
           a: Link,

src/renderer/src/pages/home/Messages/Messages.tsx

@@ -1,4 +1,4 @@
-import { Scrollbar } from '@renderer/components/Scrollbar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import db from '@renderer/databases'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
@@ -220,8 +220,7 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
   }, [assistant, messages])
 
   return (
-    <Scrollbar>
+    <Container id="messages" style={{ maxWidth }} key={assistant.id} ref={containerRef} right>
-      <Container id="messages" style={{ maxWidth }} key={assistant.id} ref={containerRef}>
       <Suggestions assistant={assistant} messages={messages} lastMessage={lastMessage} />
       {lastMessage && <MessageItem key={lastMessage.id} message={lastMessage} lastMessage />}
       {reverse([...messages]).map((message, index) => (
@@ -236,17 +235,17 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
       ))}
       <Prompt assistant={assistant} key={assistant.prompt} />
     </Container>
-    </Scrollbar>
   )
 }
 
-const Container = styled.div`
+const Container = styled(Scrollbar)`
   display: flex;
   flex-direction: column-reverse;
   padding: 10px 0;
   background-color: var(--color-background);
   padding-bottom: 20px;
   overflow-x: hidden;
+  margin-right: 3px;
 `
 
 export default Messages

src/renderer/src/pages/home/Tabs/Assistants.tsx

@@ -2,7 +2,7 @@ import { DeleteOutlined, EditOutlined, MinusCircleOutlined, PlusOutlined, SaveOu
 import AssistantSettingsPopup from '@renderer/components/AssistantSettings'
 import DragableList from '@renderer/components/DragableList'
 import CopyIcon from '@renderer/components/Icons/CopyIcon'
-import { Scrollbar } from '@renderer/components/Scrollbar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import { useAgents } from '@renderer/hooks/useAgents'
 import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
@@ -179,7 +179,6 @@ const Assistants: FC<Props> = ({
   }, [activeAssistant?.id, list, onSwitchAssistant])
 
   return (
-    <Scrollbar>
     <Container>
       {assistants.length >= 10 && (
         <SearchContainer>
@@ -234,11 +233,10 @@ const Assistants: FC<Props> = ({
       )}
       <div style={{ minHeight: 10 }}></div>
     </Container>
-    </Scrollbar>
   )
 }
 
-const Container = styled.div`
+const Container = styled(Scrollbar)`
   display: flex;
   flex-direction: column;
   padding-top: 10px;

src/renderer/src/pages/home/Tabs/Settings.tsx

@@ -1,6 +1,6 @@
 import { CheckOutlined, QuestionCircleOutlined, ReloadOutlined } from '@ant-design/icons'
 import { HStack } from '@renderer/components/Layout'
-import { Scrollbar } from '@renderer/components/Scrollbar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import { DEFAULT_CONEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
@@ -100,7 +100,6 @@ const SettingsTab: FC<Props> = (props) => {
   }, [assistant])
 
   return (
-    <Scrollbar>
     <Container>
       <SettingSubtitle style={{ marginTop: 5 }}>
         {t('settings.messages.model.title')}{' '}
@@ -291,11 +290,10 @@ const SettingsTab: FC<Props> = (props) => {
         />
       </SettingRow>
     </Container>
-    </Scrollbar>
   )
 }
 
-const Container = styled.div`
+const Container = styled(Scrollbar)`
   display: flex;
   flex: 1;
   flex-direction: column;

src/renderer/src/pages/home/Tabs/Topics.tsx

@@ -8,7 +8,7 @@ import {
 } from '@ant-design/icons'
 import DragableList from '@renderer/components/DragableList'
 import PromptPopup from '@renderer/components/Popups/PromptPopup'
-import { Scrollbar } from '@renderer/components/Scrollbar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { TopicManager } from '@renderer/hooks/useTopic'
@@ -178,7 +178,6 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
   )
 
   return (
-    <Scrollbar>
     <Container>
       <DragableList list={assistant.topics} onUpdate={updateTopics}>
         {(topic) => {
@@ -211,11 +210,10 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
       </DragableList>
       <div style={{ minHeight: '10px' }}></div>
     </Container>
-    </Scrollbar>
   )
 }
 
-const Container = styled.div`
+const Container = styled(Scrollbar)`
   display: flex;
   flex-direction: column;
   padding-top: 10px;

src/renderer/src/pages/settings/ProviderSettings/index.tsx

@@ -1,6 +1,6 @@
 import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons'
 import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
-import { Scrollbar } from '@renderer/components/Scrollbar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import { getProviderLogo } from '@renderer/config/providers'
 import { useAllProviders, useProviders } from '@renderer/hooks/useProvider'
 import { Provider } from '@renderer/types'

yarn.lock

@@ -2344,7 +2344,6 @@ __metadata:
     openai: "npm:^4.52.1"
     prettier: "npm:^3.2.4"
     react: "npm:^18.2.0"
-    react-custom-scrollbars-2: "npm:^4.5.0"
     react-dom: "npm:^18.2.0"
     react-i18next: "npm:^14.1.2"
     react-markdown: "npm:^9.0.1"
@@ -2415,13 +2414,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"add-px-to-style@npm:1.0.0":
-  version: 1.0.0
-  resolution: "add-px-to-style@npm:1.0.0"
-  checksum: 10c0/d05d0e3242360e296b5b244d1bfbb946a06338653685af95962291da39ee6db9b33ccc2299a5a0ebef8fde62d39b085997b0b76d4c6098f4c164e539afa8d0f4
-  languageName: node
-  linkType: hard
-
 "agent-base@npm:6, agent-base@npm:^6.0.2":
   version: 6.0.2
   resolution: "agent-base@npm:6.0.2"
@@ -4301,17 +4293,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-css@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "dom-css@npm:2.1.0"
-  dependencies:
-    add-px-to-style: "npm:1.0.0"
-    prefix-style: "npm:2.0.1"
-    to-camel-case: "npm:1.0.0"
-  checksum: 10c0/80975ea794f740b8da0ebde8b4a7203bcf017f44027c669f45c71822f9d298fcf62cd5333134af82d9f886719655149a3257ca3c669af920b523bc7e1fc6723c
-  languageName: node
-  linkType: hard
-
 "dom-walk@npm:^0.1.0":
   version: 0.1.2
   resolution: "dom-walk@npm:0.1.2"
@@ -9347,13 +9328,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prefix-style@npm:2.0.1":
-  version: 2.0.1
-  resolution: "prefix-style@npm:2.0.1"
-  checksum: 10c0/1db0449b2f7578d30e0ca96cf3014b9dbe42531f0d97dac7ecc7f1369dfbf326fa8e8a321e468ee86e2959f001115c109a0ebe0a4182ca1e920cba10b2d8344d
-  languageName: node
-  linkType: hard
-
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -9445,7 +9419,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.5.10, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -9554,15 +9528,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"raf@npm:^3.1.0":
-  version: 3.4.1
-  resolution: "raf@npm:3.4.1"
-  dependencies:
-    performance-now: "npm:^2.1.0"
-  checksum: 10c0/337f0853c9e6a77647b0f499beedafea5d6facfb9f2d488a624f88b03df2be72b8a0e7f9118a3ff811377d534912039a3311815700d2b6d2313f82f736f9eb6e
-  languageName: node
-  linkType: hard
-
 "rc-cascader@npm:~3.28.1":
   version: 3.28.1
   resolution: "rc-cascader@npm:3.28.1"
@@ -10111,20 +10076,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-custom-scrollbars-2@npm:^4.5.0":
-  version: 4.5.0
-  resolution: "react-custom-scrollbars-2@npm:4.5.0"
-  dependencies:
-    dom-css: "npm:^2.0.0"
-    prop-types: "npm:^15.5.10"
-    raf: "npm:^3.1.0"
-  peerDependencies:
-    react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/9670bf15bebabbe6c5b75be577430d6a990875874725019fa75db73b0e51300d65158ef962f9b534513b9b70b900244deb11df55c429ba426e580e478634f4f9
-  languageName: node
-  linkType: hard
-
 "react-dom@npm:^18.2.0":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
@@ -11877,15 +11828,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"to-camel-case@npm:1.0.0":
-  version: 1.0.0
-  resolution: "to-camel-case@npm:1.0.0"
-  dependencies:
-    to-space-case: "npm:^1.0.0"
-  checksum: 10c0/357921548908053d774d4b836f42437139c6fc9d73aaf40a1aa59d7317d760541a19667eb2884d9db83902065a90d80b0fe74c59bc13943e8489df9ef4335069
-  languageName: node
-  linkType: hard
-
 "to-fast-properties@npm:^2.0.0":
   version: 2.0.0
   resolution: "to-fast-properties@npm:2.0.0"
@@ -11893,13 +11835,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"to-no-case@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "to-no-case@npm:1.0.2"
-  checksum: 10c0/c035b04e1042ed67ceb23dc5c7c20ccde11a83ab1d2b3947c17918472b5d26dd4ffdb4cf9464752e7707ab9f3af4a106f9b61244c724bc6810422acd5984da3d
-  languageName: node
-  linkType: hard
-
 "to-regex-range@npm:^5.0.1":
   version: 5.0.1
   resolution: "to-regex-range@npm:5.0.1"
@@ -11909,15 +11844,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"to-space-case@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "to-space-case@npm:1.0.0"
-  dependencies:
-    to-no-case: "npm:^1.0.0"
-  checksum: 10c0/b99e1b5d0f3c90a8d47fa3b155d515027bd83a370740e82ee7cb064f86e3655f030f068bddcb8d18239e7408761b4376d89ab91e5ccdb17dc859d8fd4f570ac5
-  languageName: node
-  linkType: hard
-
 "toggle-selection@npm:^1.0.6":
   version: 1.0.6
   resolution: "toggle-selection@npm:1.0.6"