From 1063610c0166b4aac89c3f4f9677c8af29a6d5e4 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Tue, 22 Oct 2024 16:03:13 +0800
Subject: [PATCH] fix: scrollbar width

---
 src/renderer/src/assets/styles/index.scss         |  3 ++-
 src/renderer/src/hooks/useAppInit.ts              |  1 +
 src/renderer/src/pages/home/Messages/Messages.tsx | 15 +++++++++++++--
 src/renderer/src/utils/index.ts                   |  4 ++++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index e021a865..0cbff26b 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -1,5 +1,4 @@
 @import './markdown.scss';
-@import './scrollbar.scss';
 @import './ant.scss';
 @import '../fonts/icon-fonts/iconfont.css';
 @import '../fonts/ubuntu/ubuntu.css';
@@ -39,6 +38,7 @@
   --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);
 
@@ -90,6 +90,7 @@ body[theme-mode='light'] {
   --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/hooks/useAppInit.ts b/src/renderer/src/hooks/useAppInit.ts
index 9293ef64..57fd4f54 100644
--- a/src/renderer/src/hooks/useAppInit.ts
+++ b/src/renderer/src/hooks/useAppInit.ts
@@ -45,6 +45,7 @@ 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/home/Messages/Messages.tsx b/src/renderer/src/pages/home/Messages/Messages.tsx
index 7c47e5fc..f9446c1b 100644
--- a/src/renderer/src/pages/home/Messages/Messages.tsx
+++ b/src/renderer/src/pages/home/Messages/Messages.tsx
@@ -1,3 +1,4 @@
+import { isWindows } from '@renderer/config/constant'
 import db from '@renderer/databases'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
@@ -8,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, runAsyncFunction, uuid } from '@renderer/utils'
+import { captureScrollableDiv, classNames, 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'
@@ -219,7 +220,12 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
   }, [assistant, messages])
 
   return (
-    <Container id="messages" style={{ maxWidth }} key={assistant.id} ref={containerRef}>
+    <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) => (
@@ -248,6 +254,11 @@ const Container = styled.div`
   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/utils/index.ts b/src/renderer/src/utils/index.ts
index 333d83bc..af34b200 100644
--- a/src/renderer/src/utils/index.ts
+++ b/src/renderer/src/utils/index.ts
@@ -329,3 +329,7 @@ export function formatFileSize(file: FileType) {
 
   return (size / 1024).toFixed(2) + ' KB'
 }
+
+export function classNames(...classes: Array<string | boolean | undefined | null>) {
+  return classes.filter(Boolean).join(' ')
+}