From 077a66c675919aac32444a51c4dde4fe7c55bfee Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Thu, 24 Oct 2024 14:50:16 +0800
Subject: [PATCH] feat: scrollbar

---
 package.json                                  |   1 +
 src/renderer/src/assets/styles/index.scss     |   9 +-
 src/renderer/src/assets/styles/scrollbar.scss |  23 +-
 .../src/components/Scrollbar/index.tsx        |  22 ++
 src/renderer/src/hooks/useAppInit.ts          |   1 -
 src/renderer/src/pages/agents/Agents.tsx      |  80 ++--
 src/renderer/src/pages/agents/AgentsPage.tsx  |  56 +--
 src/renderer/src/pages/files/FilesPage.tsx    |  23 +-
 .../src/pages/home/Messages/Messages.tsx      |  50 +--
 .../src/pages/home/Tabs/Assistants.tsx        | 113 +++---
 src/renderer/src/pages/home/Tabs/Settings.tsx | 347 +++++++++---------
 src/renderer/src/pages/home/Tabs/Topics.tsx   |  68 ++--
 .../pages/settings/ProviderSettings/index.tsx | 106 +++---
 yarn.lock                                     |  76 +++-
 14 files changed, 542 insertions(+), 433 deletions(-)
 create mode 100644 src/renderer/src/components/Scrollbar/index.tsx

diff --git a/package.json b/package.json
index 40e9792d..1618f5b0 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,7 @@
     "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",
diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index 0cbff26b..9bb9b16f 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -1,5 +1,6 @@
 @import './markdown.scss';
 @import './ant.scss';
+@import './scrollbar.scss';
 @import '../fonts/icon-fonts/iconfont.css';
 @import '../fonts/ubuntu/ubuntu.css';
 
@@ -36,9 +37,6 @@
   --color-error: #f44336;
   --color-link: #1677ff;
   --color-code-background: #323232;
-  --color-scrollbar-thumb: rgba(255, 255, 255, 0.08);
-  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);
-  --color-scrollbar-thumb-active: rgba(255, 255, 255, 0.2);
   --color-hover: rgba(40, 40, 40, 1);
   --color-active: rgba(55, 55, 55, 1);
 
@@ -48,7 +46,7 @@
   --navbar-height: 40px;
   --sidebar-width: 50px;
   --status-bar-height: 40px;
-  --input-bar-height: 85px;
+  --input-bar-height: 100px;
 
   --assistants-width: 275px;
   --topic-list-width: 275px;
@@ -88,9 +86,6 @@ body[theme-mode='light'] {
   --color-error: #f44336;
   --color-link: #1677ff;
   --color-code-background: #e3e3e3;
-  --color-scrollbar-thumb: rgba(0, 0, 0, 0.08);
-  --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.15);
-  --color-scrollbar-thumb-active: rgba(0, 0, 0, 0.2);
   --color-hover: var(--color-white-mute);
   --color-active: var(--color-white-soft);
 
diff --git a/src/renderer/src/assets/styles/scrollbar.scss b/src/renderer/src/assets/styles/scrollbar.scss
index c7549a91..1462c891 100644
--- a/src/renderer/src/assets/styles/scrollbar.scss
+++ b/src/renderer/src/assets/styles/scrollbar.scss
@@ -1,7 +1,17 @@
+:root {
+  --color-scrollbar-thumb: #6b6b6b;
+  --color-scrollbar-thumb-hover: #939393;
+}
+
+body[theme-mode='light'] {
+  --color-scrollbar-thumb: #b1b1b1;
+  --color-scrollbar-thumb-hover: #7d7d7d;
+}
+
 /* 全局初始化滚动条样式 */
 ::-webkit-scrollbar {
-  width: 4px;
-  height: 2px;
+  width: 5px;
+  height: 5px;
 }
 
 ::-webkit-scrollbar-track {
@@ -9,8 +19,17 @@
 }
 
 ::-webkit-scrollbar-thumb {
+  border-radius: 10px;
   background: var(--color-scrollbar-thumb);
   &:hover {
     background: var(--color-scrollbar-thumb-hover);
   }
 }
+
+pre::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.08);
+  &:hover {
+    background: rgba(0, 0, 0, 0.15);
+  }
+}
diff --git a/src/renderer/src/components/Scrollbar/index.tsx b/src/renderer/src/components/Scrollbar/index.tsx
new file mode 100644
index 00000000..f8453e92
--- /dev/null
+++ b/src/renderer/src/components/Scrollbar/index.tsx
@@ -0,0 +1,22 @@
+import { ScrollbarProps, Scrollbars } from 'react-custom-scrollbars-2'
+import styled from 'styled-components'
+
+export const Scrollbar: React.FC<ScrollbarProps> = ({ children, ...props }) => {
+  return (
+    <Scrollbars
+      autoHide
+      {...props}
+      renderThumbVertical={(props) => <Thumb {...props} />}
+      renderTrackHorizontal={(props) => <Thumb {...props} />}>
+      {children}
+    </Scrollbars>
+  )
+}
+
+const Thumb = styled.div`
+  border-radius: 10px;
+  background-color: var(--color-scrollbar-thumb);
+  &:hover {
+    background-color: var(--color-scrollbar-thumb-hover);
+  }
+`
diff --git a/src/renderer/src/hooks/useAppInit.ts b/src/renderer/src/hooks/useAppInit.ts
index 57fd4f54..9293ef64 100644
--- a/src/renderer/src/hooks/useAppInit.ts
+++ b/src/renderer/src/hooks/useAppInit.ts
@@ -45,7 +45,6 @@ export function useAppInit() {
   useEffect(() => {
     const transparentWindow = windowStyle === 'transparent' && isMac && !minappShow
     window.root.style.background = transparentWindow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
-    !isMac && import('@renderer/assets/styles/scrollbar.scss')
   }, [windowStyle, minappShow])
 
   useEffect(() => {
diff --git a/src/renderer/src/pages/agents/Agents.tsx b/src/renderer/src/pages/agents/Agents.tsx
index 40672ee7..d013c14c 100644
--- a/src/renderer/src/pages/agents/Agents.tsx
+++ b/src/renderer/src/pages/agents/Agents.tsx
@@ -2,6 +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 { useAgents } from '@renderer/hooks/useAgents'
 import { createAssistantFromAgent } from '@renderer/services/assistant'
 import { Agent } from '@renderer/types'
@@ -56,42 +57,45 @@ const Agents: React.FC<Props> = ({ onClick }) => {
   )
 
   return (
-    <Container style={{ paddingBottom: dragging ? 30 : 0 }}>
-      {agents.length > 0 && (
-        <DragableList
-          list={agents}
-          onUpdate={updateAgents}
-          onDragStart={() => setDragging(true)}
-          onDragEnd={() => setDragging(false)}>
-          {(agent: Agent) => (
-            <Dropdown menu={{ items: getMenuItems(agent) }} trigger={['contextMenu']}>
-              <AgentItem onClick={() => onClick(agent)}>
-                <HStack alignItems="center" justifyContent="space-between" h="36px">
-                  <AgentItemName className="text-nowrap">
-                    {agent.emoji} {agent.name}
-                  </AgentItemName>
-                  <ActionButton className="actions" gap="15px" onClick={(e) => e.stopPropagation()}>
-                    <Dropdown menu={{ items: getMenuItems(agent) }} trigger={['hover']}>
-                      <MoreOutlined style={{ cursor: 'pointer' }} />
-                    </Dropdown>
-                  </ActionButton>
-                </HStack>
-                <AgentItemPrompt>{agent.prompt}</AgentItemPrompt>
-              </AgentItem>
-            </Dropdown>
-          )}
-        </DragableList>
-      )}
-      {!dragging && (
-        <Button
-          type="dashed"
-          icon={<PlusOutlined />}
-          onClick={() => AddAgentPopup.show()}
-          style={{ borderRadius: 20, height: 34 }}>
-          {t('agents.add.title')}
-        </Button>
-      )}
-    </Container>
+    <Scrollbar style={{ width: 280 }}>
+      <Container style={{ paddingBottom: dragging ? 30 : 0 }}>
+        {agents.length > 0 && (
+          <DragableList
+            list={agents}
+            onUpdate={updateAgents}
+            onDragStart={() => setDragging(true)}
+            onDragEnd={() => setDragging(false)}>
+            {(agent: Agent) => (
+              <Dropdown menu={{ items: getMenuItems(agent) }} trigger={['contextMenu']}>
+                <AgentItem onClick={() => onClick(agent)}>
+                  <HStack alignItems="center" justifyContent="space-between" h="36px">
+                    <AgentItemName className="text-nowrap">
+                      {agent.emoji} {agent.name}
+                    </AgentItemName>
+                    <ActionButton className="actions" gap="15px" onClick={(e) => e.stopPropagation()}>
+                      <Dropdown menu={{ items: getMenuItems(agent) }} trigger={['hover']}>
+                        <MoreOutlined style={{ cursor: 'pointer' }} />
+                      </Dropdown>
+                    </ActionButton>
+                  </HStack>
+                  <AgentItemPrompt>{agent.prompt}</AgentItemPrompt>
+                </AgentItem>
+              </Dropdown>
+            )}
+          </DragableList>
+        )}
+        {!dragging && (
+          <Button
+            type="dashed"
+            icon={<PlusOutlined />}
+            onClick={() => AddAgentPopup.show()}
+            style={{ borderRadius: 20, height: 34 }}>
+            {t('agents.add.title')}
+          </Button>
+        )}
+        <div style={{ height: 10 }} />
+      </Container>
+    </Scrollbar>
   )
 }
 
@@ -99,10 +103,8 @@ const Container = styled.div`
   padding: 15px;
   display: flex;
   flex-direction: column;
-  width: 280px;
-  height: calc(100vh - var(--navbar-height));
   border-right: 0.5px solid var(--color-border);
-  overflow-y: scroll;
+  min-height: calc(100vh - var(--navbar-height));
 `
 
 const AgentItem = styled.div`
diff --git a/src/renderer/src/pages/agents/AgentsPage.tsx b/src/renderer/src/pages/agents/AgentsPage.tsx
index a2fa3dca..291020d7 100644
--- a/src/renderer/src/pages/agents/AgentsPage.tsx
+++ b/src/renderer/src/pages/agents/AgentsPage.tsx
@@ -1,5 +1,6 @@
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { VStack } from '@renderer/components/Layout'
+import { Scrollbar } from '@renderer/components/Scrollbar'
 import SystemAgents from '@renderer/config/agents.json'
 import { createAssistantFromAgent } from '@renderer/services/assistant'
 import { Agent } from '@renderer/types'
@@ -60,32 +61,34 @@ const AgentsPage: FC = () => {
       </Navbar>
       <ContentContainer id="content-container">
         <Agents onClick={onAddAgentConfirm} />
-        <AssistantsContainer>
-          <VStack style={{ flex: 1 }}>
-            {Object.keys(agentGroups)
-              .reverse()
-              .map((group) => (
-                <div key={group}>
-                  <Title level={5} key={group} style={{ marginBottom: 16 }}>
-                    {group}
-                  </Title>
-                  <Row gutter={16}>
-                    {agentGroups[group].map((agent, index) => {
-                      return (
-                        <Col span={8} key={group + index}>
-                          <AgentCard
-                            onClick={() => onAddAgentConfirm(getAgentFromSystemAgent(agent))}
-                            agent={agent as any}
-                          />
-                        </Col>
-                      )
-                    })}
-                  </Row>
-                </div>
-              ))}
-            <div style={{ minHeight: 20 }} />
-          </VStack>
-        </AssistantsContainer>
+        <Scrollbar>
+          <AssistantsContainer>
+            <VStack style={{ flex: 1 }}>
+              {Object.keys(agentGroups)
+                .reverse()
+                .map((group) => (
+                  <div key={group}>
+                    <Title level={5} key={group} style={{ marginBottom: 16 }}>
+                      {group}
+                    </Title>
+                    <Row gutter={16}>
+                      {agentGroups[group].map((agent, index) => {
+                        return (
+                          <Col span={8} key={group + index}>
+                            <AgentCard
+                              onClick={() => onAddAgentConfirm(getAgentFromSystemAgent(agent))}
+                              agent={agent as any}
+                            />
+                          </Col>
+                        )
+                      })}
+                    </Row>
+                  </div>
+                ))}
+              <div style={{ minHeight: 20 }} />
+            </VStack>
+          </AssistantsContainer>
+        </Scrollbar>
       </ContentContainer>
     </Container>
   )
@@ -112,7 +115,6 @@ const AssistantsContainer = styled.div`
   flex-direction: row;
   height: calc(100vh - var(--navbar-height));
   padding: 15px 20px;
-  overflow-y: scroll;
 `
 
 const AgentPrompt = styled.div`
diff --git a/src/renderer/src/pages/files/FilesPage.tsx b/src/renderer/src/pages/files/FilesPage.tsx
index 207aeb51..f98e4ff9 100644
--- a/src/renderer/src/pages/files/FilesPage.tsx
+++ b/src/renderer/src/pages/files/FilesPage.tsx
@@ -1,5 +1,6 @@
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { VStack } from '@renderer/components/Layout'
+import { Scrollbar } from '@renderer/components/Scrollbar'
 import db from '@renderer/databases'
 import FileManager from '@renderer/services/file'
 import { FileType, FileTypes } from '@renderer/types'
@@ -66,15 +67,17 @@ const FilesPage: FC = () => {
         <NavbarCenter style={{ borderRight: 'none' }}>{t('files.title')}</NavbarCenter>
       </Navbar>
       <ContentContainer id="content-container">
-        <VStack style={{ width: '100%' }}>
-          <Table
-            dataSource={dataSource}
-            columns={columns}
-            style={{ width: '100%', marginBottom: 20 }}
-            size="small"
-            pagination={{ pageSize: 100 }}
-          />
-        </VStack>
+        <Scrollbar>
+          <VStack style={{ width: '100%', padding: 15 }}>
+            <Table
+              dataSource={dataSource}
+              columns={columns}
+              style={{ width: '100%', marginBottom: 20 }}
+              size="small"
+              pagination={{ pageSize: 100 }}
+            />
+          </VStack>
+        </Scrollbar>
       </ContentContainer>
     </Container>
   )
@@ -93,8 +96,6 @@ const ContentContainer = styled.div`
   flex-direction: row;
   justify-content: center;
   height: 100%;
-  overflow-y: scroll;
-  padding: 15px;
 `
 
 const FileNameText = styled.div`
diff --git a/src/renderer/src/pages/home/Messages/Messages.tsx b/src/renderer/src/pages/home/Messages/Messages.tsx
index f9446c1b..51df86aa 100644
--- a/src/renderer/src/pages/home/Messages/Messages.tsx
+++ b/src/renderer/src/pages/home/Messages/Messages.tsx
@@ -1,4 +1,4 @@
-import { isWindows } from '@renderer/config/constant'
+import { Scrollbar } from '@renderer/components/Scrollbar'
 import db from '@renderer/databases'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
@@ -9,7 +9,7 @@ import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { deleteMessageFiles, filterMessages, getContextCount } from '@renderer/services/messages'
 import { estimateHistoryTokens, estimateMessageUsage } from '@renderer/services/tokens'
 import { Assistant, Message, Model, Topic } from '@renderer/types'
-import { captureScrollableDiv, classNames, runAsyncFunction, uuid } from '@renderer/utils'
+import { captureScrollableDiv, runAsyncFunction, uuid } from '@renderer/utils'
 import { t } from 'i18next'
 import { flatten, last, reverse, take } from 'lodash'
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -220,45 +220,33 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
   }, [assistant, messages])
 
   return (
-    <Container
-      id="messages"
-      className={classNames(isWindows && 'scrollbar')}
-      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) => (
-        <MessageItem
-          key={message.id}
-          message={message}
-          index={index}
-          hidePresetMessages={assistant.settings?.hideMessages}
-          onEditMessage={onEditMessage}
-          onDeleteMessage={onDeleteMessage}
-        />
-      ))}
-      <Prompt assistant={assistant} key={assistant.prompt} />
-    </Container>
+    <Scrollbar>
+      <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) => (
+          <MessageItem
+            key={message.id}
+            message={message}
+            index={index}
+            hidePresetMessages={assistant.settings?.hideMessages}
+            onEditMessage={onEditMessage}
+            onDeleteMessage={onDeleteMessage}
+          />
+        ))}
+        <Prompt assistant={assistant} key={assistant.prompt} />
+      </Container>
+    </Scrollbar>
   )
 }
 
 const Container = styled.div`
-  position: relative;
   display: flex;
-  flex-direction: column;
-  overflow-y: auto;
   flex-direction: column-reverse;
-  max-height: calc(100vh - var(--input-bar-height) - var(--navbar-height));
   padding: 10px 0;
   background-color: var(--color-background);
   padding-bottom: 20px;
   overflow-x: hidden;
-  &.scrollbar {
-    &::-webkit-scrollbar {
-      width: 10px;
-    }
-  }
 `
 
 export default Messages
diff --git a/src/renderer/src/pages/home/Tabs/Assistants.tsx b/src/renderer/src/pages/home/Tabs/Assistants.tsx
index da342bf8..8d5733fd 100644
--- a/src/renderer/src/pages/home/Tabs/Assistants.tsx
+++ b/src/renderer/src/pages/home/Tabs/Assistants.tsx
@@ -2,6 +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 { useAgents } from '@renderer/hooks/useAgents'
 import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
@@ -178,69 +179,69 @@ const Assistants: FC<Props> = ({
   }, [activeAssistant?.id, list, onSwitchAssistant])
 
   return (
-    <Container>
-      {assistants.length >= 10 && (
-        <SearchContainer>
-          <Input
-            placeholder={t('chat.assistant.search.placeholder')}
-            suffix={<CommandKey>⌘+K</CommandKey>}
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            style={{ borderRadius: 16, borderWidth: 0.5 }}
-            onKeyDown={onSearch}
-            ref={searchRef}
-            onFocus={() => dispatch(setSearching(true))}
-            onBlur={() => {
-              dispatch(setSearching(false))
-              setSearch('')
-            }}
-            allowClear
-          />
-        </SearchContainer>
-      )}
-      <DragableList
-        list={list}
-        onUpdate={updateAssistants}
-        droppableProps={{ isDropDisabled: !isEmpty(search) }}
-        style={{ paddingBottom: dragging ? '34px' : 0 }}
-        onDragStart={() => setDragging(true)}
-        onDragEnd={() => setDragging(false)}>
-        {(assistant) => {
-          const isCurrent = assistant.id === activeAssistant?.id
-          return (
-            <Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
-              <AssistantItem onClick={() => onSwitchAssistant(assistant)} className={isCurrent ? 'active' : ''}>
-                <AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
-                {isCurrent && (
-                  <ArrowRightButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}>
-                    <i className="iconfont icon-gridlines" />
-                  </ArrowRightButton>
-                )}
-                {false && <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>}
-              </AssistantItem>
-            </Dropdown>
-          )
-        }}
-      </DragableList>
-      {!dragging && (
-        <AssistantItem onClick={onCreateAssistant}>
-          <AssistantName>
-            <PlusOutlined style={{ color: 'var(--color-text-2)', marginRight: 4 }} />
-            {t('chat.add.assistant.title')}
-          </AssistantName>
-        </AssistantItem>
-      )}
-    </Container>
+    <Scrollbar>
+      <Container>
+        {assistants.length >= 10 && (
+          <SearchContainer>
+            <Input
+              placeholder={t('chat.assistant.search.placeholder')}
+              suffix={<CommandKey>⌘+K</CommandKey>}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              style={{ borderRadius: 16, borderWidth: 0.5 }}
+              onKeyDown={onSearch}
+              ref={searchRef}
+              onFocus={() => dispatch(setSearching(true))}
+              onBlur={() => {
+                dispatch(setSearching(false))
+                setSearch('')
+              }}
+              allowClear
+            />
+          </SearchContainer>
+        )}
+        <DragableList
+          list={list}
+          onUpdate={updateAssistants}
+          droppableProps={{ isDropDisabled: !isEmpty(search) }}
+          style={{ paddingBottom: dragging ? '34px' : 0 }}
+          onDragStart={() => setDragging(true)}
+          onDragEnd={() => setDragging(false)}>
+          {(assistant) => {
+            const isCurrent = assistant.id === activeAssistant?.id
+            return (
+              <Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
+                <AssistantItem onClick={() => onSwitchAssistant(assistant)} className={isCurrent ? 'active' : ''}>
+                  <AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
+                  {isCurrent && (
+                    <ArrowRightButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}>
+                      <i className="iconfont icon-gridlines" />
+                    </ArrowRightButton>
+                  )}
+                  {false && <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>}
+                </AssistantItem>
+              </Dropdown>
+            )
+          }}
+        </DragableList>
+        {!dragging && (
+          <AssistantItem onClick={onCreateAssistant}>
+            <AssistantName>
+              <PlusOutlined style={{ color: 'var(--color-text-2)', marginRight: 4 }} />
+              {t('chat.add.assistant.title')}
+            </AssistantName>
+          </AssistantItem>
+        )}
+        <div style={{ minHeight: 10 }}></div>
+      </Container>
+    </Scrollbar>
   )
 }
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  height: calc(100vh - var(--navbar-height));
-  overflow-y: auto;
   padding-top: 10px;
-  padding-bottom: 10px;
 `
 
 const AssistantItem = styled.div`
diff --git a/src/renderer/src/pages/home/Tabs/Settings.tsx b/src/renderer/src/pages/home/Tabs/Settings.tsx
index 97415f97..909a500c 100644
--- a/src/renderer/src/pages/home/Tabs/Settings.tsx
+++ b/src/renderer/src/pages/home/Tabs/Settings.tsx
@@ -1,5 +1,6 @@
 import { CheckOutlined, QuestionCircleOutlined, ReloadOutlined } from '@ant-design/icons'
 import { HStack } from '@renderer/components/Layout'
+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'
@@ -97,183 +98,185 @@ const SettingsTab: FC<Props> = (props) => {
   }, [assistant])
 
   return (
-    <Container>
-      <SettingSubtitle style={{ marginTop: 5 }}>
-        {t('settings.messages.model.title')}{' '}
-        <Tooltip title={t('chat.settings.reset')}>
-          <ReloadOutlined onClick={onReset} style={{ cursor: 'pointer', fontSize: 12, padding: '0 3px' }} />
-        </Tooltip>
-      </SettingSubtitle>
-      <SettingDivider />
-      <Row align="middle">
-        <Label>{t('chat.settings.temperature')}</Label>
-        <Tooltip title={t('chat.settings.temperature.tip')}>
-          <QuestionIcon />
-        </Tooltip>
-      </Row>
-      <Row align="middle" gutter={10}>
-        <Col span={24}>
-          <Slider
-            min={0}
-            max={2}
-            onChange={setTemperature}
-            onChangeComplete={onTemperatureChange}
-            value={typeof temperature === 'number' ? temperature : 0}
-            step={0.1}
-          />
-        </Col>
-      </Row>
-      <Row align="middle">
-        <Label>{t('chat.settings.conext_count')}</Label>
-        <Tooltip title={t('chat.settings.conext_count.tip')}>
-          <QuestionIcon />
-        </Tooltip>
-      </Row>
-      <Row align="middle" gutter={10}>
-        <Col span={24}>
-          <Slider
-            min={0}
-            max={20}
-            onChange={setConextCount}
-            onChangeComplete={onConextCountChange}
-            value={typeof contextCount === 'number' ? contextCount : 0}
-            step={1}
-          />
-        </Col>
-      </Row>
-      <SettingRow>
-        <SettingRowTitleSmall>{t('model.stream_output')}</SettingRowTitleSmall>
-        <Switch
-          size="small"
-          checked={streamOutput}
-          onChange={(checked) => {
-            setStreamOutput(checked)
-            onUpdateAssistantSettings({ streamOutput: checked })
-          }}
-        />
-      </SettingRow>
-      <SettingDivider />
-      <Row align="middle" justify="space-between">
-        <HStack alignItems="center">
-          <Label>{t('chat.settings.max_tokens')}</Label>
-          <Tooltip title={t('chat.settings.max_tokens.tip')}>
+    <Scrollbar>
+      <Container>
+        <SettingSubtitle style={{ marginTop: 5 }}>
+          {t('settings.messages.model.title')}{' '}
+          <Tooltip title={t('chat.settings.reset')}>
+            <ReloadOutlined onClick={onReset} style={{ cursor: 'pointer', fontSize: 12, padding: '0 3px' }} />
+          </Tooltip>
+        </SettingSubtitle>
+        <SettingDivider />
+        <Row align="middle">
+          <Label>{t('chat.settings.temperature')}</Label>
+          <Tooltip title={t('chat.settings.temperature.tip')}>
             <QuestionIcon />
           </Tooltip>
-        </HStack>
-        <Switch
-          size="small"
-          checked={enableMaxTokens}
-          onChange={(enabled) => {
-            setEnableMaxTokens(enabled)
-            onUpdateAssistantSettings({ enableMaxTokens: enabled })
-          }}
-        />
-      </Row>
-      <Row align="middle" gutter={10}>
-        <Col span={24}>
-          <Slider
-            disabled={!enableMaxTokens}
-            min={0}
-            max={32000}
-            onChange={setMaxTokens}
-            onChangeComplete={onMaxTokensChange}
-            value={typeof maxTokens === 'number' ? maxTokens : 0}
-            step={100}
-          />
-        </Col>
-      </Row>
-      <SettingSubtitle>{t('settings.messages.title')}</SettingSubtitle>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitleSmall>{t('settings.messages.divider')}</SettingRowTitleSmall>
-        <Switch
-          size="small"
-          checked={showMessageDivider}
-          onChange={(checked) => dispatch(setShowMessageDivider(checked))}
-        />
-      </SettingRow>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitleSmall>{t('settings.messages.use_serif_font')}</SettingRowTitleSmall>
-        <Switch
-          size="small"
-          checked={messageFont === 'serif'}
-          onChange={(checked) => dispatch(setMessageFont(checked ? 'serif' : 'system'))}
-        />
-      </SettingRow>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitleSmall>{t('chat.settings.show_line_numbers')}</SettingRowTitleSmall>
-        <Switch
-          size="small"
-          checked={codeShowLineNumbers}
-          onChange={(checked) => dispatch(setCodeShowLineNumbers(checked))}
-        />
-      </SettingRow>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitleSmall>{t('settings.font_size.title')}</SettingRowTitleSmall>
-      </SettingRow>
-      <Row align="middle" gutter={10}>
-        <Col span={24}>
-          <Slider
-            value={fontSizeValue}
-            onChange={(value) => setFontSizeValue(value)}
-            onChangeComplete={(value) => dispatch(setFontSize(value))}
-            min={12}
-            max={22}
-            step={1}
-            marks={{
-              12: <span style={{ fontSize: '12px' }}>A</span>,
-              14: <span style={{ fontSize: '14px' }}>{t('common.default')}</span>,
-              22: <span style={{ fontSize: '18px' }}>A</span>
+        </Row>
+        <Row align="middle" gutter={10}>
+          <Col span={24}>
+            <Slider
+              min={0}
+              max={2}
+              onChange={setTemperature}
+              onChangeComplete={onTemperatureChange}
+              value={typeof temperature === 'number' ? temperature : 0}
+              step={0.1}
+            />
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Label>{t('chat.settings.conext_count')}</Label>
+          <Tooltip title={t('chat.settings.conext_count.tip')}>
+            <QuestionIcon />
+          </Tooltip>
+        </Row>
+        <Row align="middle" gutter={10}>
+          <Col span={24}>
+            <Slider
+              min={0}
+              max={20}
+              onChange={setConextCount}
+              onChangeComplete={onConextCountChange}
+              value={typeof contextCount === 'number' ? contextCount : 0}
+              step={1}
+            />
+          </Col>
+        </Row>
+        <SettingRow>
+          <SettingRowTitleSmall>{t('model.stream_output')}</SettingRowTitleSmall>
+          <Switch
+            size="small"
+            checked={streamOutput}
+            onChange={(checked) => {
+              setStreamOutput(checked)
+              onUpdateAssistantSettings({ streamOutput: checked })
             }}
           />
-        </Col>
-      </Row>
-      <SettingSubtitle>{t('settings.messages.input.title')}</SettingSubtitle>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitleSmall>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitleSmall>
-        <Switch
-          size="small"
-          checked={showInputEstimatedTokens}
-          onChange={(checked) => dispatch(setShowInputEstimatedTokens(checked))}
+        </SettingRow>
+        <SettingDivider />
+        <Row align="middle" justify="space-between">
+          <HStack alignItems="center">
+            <Label>{t('chat.settings.max_tokens')}</Label>
+            <Tooltip title={t('chat.settings.max_tokens.tip')}>
+              <QuestionIcon />
+            </Tooltip>
+          </HStack>
+          <Switch
+            size="small"
+            checked={enableMaxTokens}
+            onChange={(enabled) => {
+              setEnableMaxTokens(enabled)
+              onUpdateAssistantSettings({ enableMaxTokens: enabled })
+            }}
+          />
+        </Row>
+        <Row align="middle" gutter={10}>
+          <Col span={24}>
+            <Slider
+              disabled={!enableMaxTokens}
+              min={0}
+              max={32000}
+              onChange={setMaxTokens}
+              onChangeComplete={onMaxTokensChange}
+              value={typeof maxTokens === 'number' ? maxTokens : 0}
+              step={100}
+            />
+          </Col>
+        </Row>
+        <SettingSubtitle>{t('settings.messages.title')}</SettingSubtitle>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitleSmall>{t('settings.messages.divider')}</SettingRowTitleSmall>
+          <Switch
+            size="small"
+            checked={showMessageDivider}
+            onChange={(checked) => dispatch(setShowMessageDivider(checked))}
+          />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitleSmall>{t('settings.messages.use_serif_font')}</SettingRowTitleSmall>
+          <Switch
+            size="small"
+            checked={messageFont === 'serif'}
+            onChange={(checked) => dispatch(setMessageFont(checked ? 'serif' : 'system'))}
+          />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitleSmall>{t('chat.settings.show_line_numbers')}</SettingRowTitleSmall>
+          <Switch
+            size="small"
+            checked={codeShowLineNumbers}
+            onChange={(checked) => dispatch(setCodeShowLineNumbers(checked))}
+          />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitleSmall>{t('settings.font_size.title')}</SettingRowTitleSmall>
+        </SettingRow>
+        <Row align="middle" gutter={10}>
+          <Col span={24}>
+            <Slider
+              value={fontSizeValue}
+              onChange={(value) => setFontSizeValue(value)}
+              onChangeComplete={(value) => dispatch(setFontSize(value))}
+              min={12}
+              max={22}
+              step={1}
+              marks={{
+                12: <span style={{ fontSize: '12px' }}>A</span>,
+                14: <span style={{ fontSize: '14px' }}>{t('common.default')}</span>,
+                22: <span style={{ fontSize: '18px' }}>A</span>
+              }}
+            />
+          </Col>
+        </Row>
+        <SettingSubtitle>{t('settings.messages.input.title')}</SettingSubtitle>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitleSmall>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitleSmall>
+          <Switch
+            size="small"
+            checked={showInputEstimatedTokens}
+            onChange={(checked) => dispatch(setShowInputEstimatedTokens(checked))}
+          />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitleSmall>{t('settings.messages.input.paste_long_text_as_file')}</SettingRowTitleSmall>
+          <Switch
+            size="small"
+            checked={pasteLongTextAsFile}
+            onChange={(checked) => dispatch(setPasteLongTextAsFile(checked))}
+          />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitleSmall>{t('settings.messages.markdown_rendering_input_message')}</SettingRowTitleSmall>
+          <Switch
+            size="small"
+            checked={renderInputMessageAsMarkdown}
+            onChange={(checked) => dispatch(setRenderInputMessageAsMarkdown(checked))}
+          />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitleSmall>{t('settings.messages.input.send_shortcuts')}</SettingRowTitleSmall>
+        </SettingRow>
+        <Select
+          value={sendMessageShortcut}
+          menuItemSelectedIcon={<CheckOutlined />}
+          options={[
+            { value: 'Enter', label: `Enter ${t('chat.input.send')}` },
+            { value: 'Shift+Enter', label: `Shift + Enter ${t('chat.input.send')}` }
+          ]}
+          onChange={(value) => setSendMessageShortcut(value)}
+          style={{ width: '100%', marginTop: 10 }}
         />
-      </SettingRow>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitleSmall>{t('settings.messages.input.paste_long_text_as_file')}</SettingRowTitleSmall>
-        <Switch
-          size="small"
-          checked={pasteLongTextAsFile}
-          onChange={(checked) => dispatch(setPasteLongTextAsFile(checked))}
-        />
-      </SettingRow>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitleSmall>{t('settings.messages.markdown_rendering_input_message')}</SettingRowTitleSmall>
-        <Switch
-          size="small"
-          checked={renderInputMessageAsMarkdown}
-          onChange={(checked) => dispatch(setRenderInputMessageAsMarkdown(checked))}
-        />
-      </SettingRow>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitleSmall>{t('settings.messages.input.send_shortcuts')}</SettingRowTitleSmall>
-      </SettingRow>
-      <Select
-        value={sendMessageShortcut}
-        menuItemSelectedIcon={<CheckOutlined />}
-        options={[
-          { value: 'Enter', label: `Enter ${t('chat.input.send')}` },
-          { value: 'Shift+Enter', label: `Shift + Enter ${t('chat.input.send')}` }
-        ]}
-        onChange={(value) => setSendMessageShortcut(value)}
-        style={{ width: '100%', marginTop: 10 }}
-      />
-    </Container>
+      </Container>
+    </Scrollbar>
   )
 }
 
diff --git a/src/renderer/src/pages/home/Tabs/Topics.tsx b/src/renderer/src/pages/home/Tabs/Topics.tsx
index 7a16869c..e1e7570c 100644
--- a/src/renderer/src/pages/home/Tabs/Topics.tsx
+++ b/src/renderer/src/pages/home/Tabs/Topics.tsx
@@ -8,6 +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 { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { TopicManager } from '@renderer/hooks/useTopic'
@@ -177,38 +178,40 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
   )
 
   return (
-    <Container>
-      <DragableList list={assistant.topics} onUpdate={updateTopics}>
-        {(topic) => {
-          const isActive = topic.id === activeTopic?.id
-          return (
-            <Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
-              <TopicListItem
-                className={isActive ? 'active' : ''}
-                style={{ borderRadius }}
-                onClick={() => onSwitchTopic(topic)}>
-                <TopicName className="name">{topic.name.replace('`', '')}</TopicName>
-                {showTopicTime && <TopicTime>{dayjs(topic.createdAt).format('MM/DD HH:mm')}</TopicTime>}
-                {isActive && (
-                  <MenuButton
-                    className="menu"
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      if (assistant.topics.length === 1) {
-                        return onClearMessages()
-                      }
-                      onDeleteTopic(topic)
-                    }}>
-                    <CloseOutlined />
-                  </MenuButton>
-                )}
-              </TopicListItem>
-            </Dropdown>
-          )
-        }}
-      </DragableList>
-      <div style={{ minHeight: '10px' }}></div>
-    </Container>
+    <Scrollbar>
+      <Container>
+        <DragableList list={assistant.topics} onUpdate={updateTopics}>
+          {(topic) => {
+            const isActive = topic.id === activeTopic?.id
+            return (
+              <Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
+                <TopicListItem
+                  className={isActive ? 'active' : ''}
+                  style={{ borderRadius }}
+                  onClick={() => onSwitchTopic(topic)}>
+                  <TopicName className="name">{topic.name.replace('`', '')}</TopicName>
+                  {showTopicTime && <TopicTime>{dayjs(topic.createdAt).format('MM/DD HH:mm')}</TopicTime>}
+                  {isActive && (
+                    <MenuButton
+                      className="menu"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        if (assistant.topics.length === 1) {
+                          return onClearMessages()
+                        }
+                        onDeleteTopic(topic)
+                      }}>
+                      <CloseOutlined />
+                    </MenuButton>
+                  )}
+                </TopicListItem>
+              </Dropdown>
+            )
+          }}
+        </DragableList>
+        <div style={{ minHeight: '10px' }}></div>
+      </Container>
+    </Scrollbar>
   )
 }
 
@@ -216,7 +219,6 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   padding-top: 10px;
-  max-height: calc(100vh - var(--navbar-height) - 70px);
 `
 
 const TopicListItem = styled.div`
diff --git a/src/renderer/src/pages/settings/ProviderSettings/index.tsx b/src/renderer/src/pages/settings/ProviderSettings/index.tsx
index 39035f59..2a14de96 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/index.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/index.tsx
@@ -1,5 +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 { getProviderLogo } from '@renderer/config/providers'
 import { useAllProviders, useProviders } from '@renderer/hooks/useProvider'
 import { Provider } from '@renderer/types'
@@ -85,56 +86,58 @@ const ProvidersList: FC = () => {
   return (
     <Container>
       <ProviderListContainer>
-        <ProviderList>
-          <DragDropContext onDragStart={() => setDragging(true)} onDragEnd={onDragEnd}>
-            <Droppable droppableId="droppable">
-              {(provided) => (
-                <div {...provided.droppableProps} ref={provided.innerRef}>
-                  {providers.map((provider, index) => (
-                    <Draggable key={`draggable_${provider.id}_${index}`} draggableId={provider.id} index={index}>
-                      {(provided) => (
-                        <div
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                          {...provided.dragHandleProps}
-                          style={{ ...provided.draggableProps.style, marginBottom: 5 }}>
-                          <Dropdown
-                            menu={{ items: provider.isSystem ? [] : getDropdownMenus(provider) }}
-                            trigger={['contextMenu']}>
-                            <ProviderListItem
-                              key={JSON.stringify(provider)}
-                              className={provider.id === selectedProvider?.id ? 'active' : ''}
-                              onClick={() => setSelectedProvider(provider)}>
-                              {provider.isSystem && (
-                                <ProviderLogo shape="square" src={getProviderLogo(provider.id)} size={25} />
-                              )}
-                              {!provider.isSystem && (
-                                <ProviderLogo
-                                  size={25}
-                                  shape="square"
-                                  style={{ backgroundColor: generateColorFromChar(provider.name), minWidth: 25 }}>
-                                  {getFirstCharacter(provider.name)}
-                                </ProviderLogo>
-                              )}
-                              <ProviderItemName className="text-nowrap">
-                                {provider.isSystem ? t(`provider.${provider.id}`) : provider.name}
-                              </ProviderItemName>
-                              {provider.enabled && (
-                                <Tag color="green" style={{ marginLeft: 'auto' }}>
-                                  ON
-                                </Tag>
-                              )}
-                            </ProviderListItem>
-                          </Dropdown>
-                        </div>
-                      )}
-                    </Draggable>
-                  ))}
-                </div>
-              )}
-            </Droppable>
-          </DragDropContext>
-        </ProviderList>
+        <Scrollbar>
+          <ProviderList>
+            <DragDropContext onDragStart={() => setDragging(true)} onDragEnd={onDragEnd}>
+              <Droppable droppableId="droppable">
+                {(provided) => (
+                  <div {...provided.droppableProps} ref={provided.innerRef}>
+                    {providers.map((provider, index) => (
+                      <Draggable key={`draggable_${provider.id}_${index}`} draggableId={provider.id} index={index}>
+                        {(provided) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            style={{ ...provided.draggableProps.style, marginBottom: 5 }}>
+                            <Dropdown
+                              menu={{ items: provider.isSystem ? [] : getDropdownMenus(provider) }}
+                              trigger={['contextMenu']}>
+                              <ProviderListItem
+                                key={JSON.stringify(provider)}
+                                className={provider.id === selectedProvider?.id ? 'active' : ''}
+                                onClick={() => setSelectedProvider(provider)}>
+                                {provider.isSystem && (
+                                  <ProviderLogo shape="square" src={getProviderLogo(provider.id)} size={25} />
+                                )}
+                                {!provider.isSystem && (
+                                  <ProviderLogo
+                                    size={25}
+                                    shape="square"
+                                    style={{ backgroundColor: generateColorFromChar(provider.name), minWidth: 25 }}>
+                                    {getFirstCharacter(provider.name)}
+                                  </ProviderLogo>
+                                )}
+                                <ProviderItemName className="text-nowrap">
+                                  {provider.isSystem ? t(`provider.${provider.id}`) : provider.name}
+                                </ProviderItemName>
+                                {provider.enabled && (
+                                  <Tag color="green" style={{ marginLeft: 'auto' }}>
+                                    ON
+                                  </Tag>
+                                )}
+                              </ProviderListItem>
+                            </Dropdown>
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
+                  </div>
+                )}
+              </Droppable>
+            </DragDropContext>
+          </ProviderList>
+        </Scrollbar>
         {!dragging && (
           <AddButtonWrapper>
             <Button type="dashed" style={{ width: '100%' }} icon={<PlusOutlined />} onClick={onAddProvider} />
@@ -159,15 +162,12 @@ const ProviderListContainer = styled.div`
   width: var(--assistants-width);
   height: calc(100vh - var(--navbar-height));
   border-right: 0.5px solid var(--color-border);
-  overflow-y: auto;
 `
 
 const ProviderList = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  height: calc(100vh - var(--navbar-height));
-  overflow: auto;
   padding: 8px;
 `
 
diff --git a/yarn.lock b/yarn.lock
index 6351d858..a36c73d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2344,6 +2344,7 @@ __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"
@@ -2413,6 +2414,13 @@ __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"
@@ -4292,6 +4300,17 @@ __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"
@@ -9301,6 +9320,13 @@ __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"
@@ -9392,7 +9418,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.5.10, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -9501,6 +9527,15 @@ __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"
@@ -10049,6 +10084,20 @@ __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"
@@ -11786,6 +11835,15 @@ __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"
@@ -11793,6 +11851,13 @@ __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"
@@ -11802,6 +11867,15 @@ __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"