From f7c5c1551ae489d1ddcdb590e4207eb33db9c64a Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Tue, 9 Jul 2024 19:58:51 +0800
Subject: [PATCH] feat: add scrollbar style

---
 src/renderer/src/assets/styles/index.scss     | 29 +++++++++++++++++++
 .../src/pages/home/components/CodeBlock.tsx   |  1 +
 .../src/pages/home/components/Messages.tsx    |  5 +---
 .../src/pages/home/components/Topics.tsx      |  1 +
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index 32191b63..7ca9f9a4 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -98,3 +98,32 @@ body,
 #inputbar .ant-input {
   resize: none;
 }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  /* 全局初始化滚动条样式 */
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.6);
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.8);
+  }
+
+  /* Safari 和 Chrome */
+  @media screen and (-webkit-min-device-pixel-ratio: 0) {
+    body {
+      scrollbar-width: thin; /* 告诉 FF 用细滚动条 */
+      scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1); /* FF 前面色后面色 */
+    }
+  }
+}
diff --git a/src/renderer/src/pages/home/components/CodeBlock.tsx b/src/renderer/src/pages/home/components/CodeBlock.tsx
index d12b4c45..dcb5cb07 100644
--- a/src/renderer/src/pages/home/components/CodeBlock.tsx
+++ b/src/renderer/src/pages/home/components/CodeBlock.tsx
@@ -28,6 +28,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) =
         {...rest}
         language={match[1]}
         style={atomDark}
+        wrapLongLines={true}
         customStyle={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginTop: 0 }}>
         {String(children).replace(/\n$/, '')}
       </SyntaxHighlighter>
diff --git a/src/renderer/src/pages/home/components/Messages.tsx b/src/renderer/src/pages/home/components/Messages.tsx
index db999bf8..427d00bb 100644
--- a/src/renderer/src/pages/home/components/Messages.tsx
+++ b/src/renderer/src/pages/home/components/Messages.tsx
@@ -108,14 +108,11 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  overflow-y: scroll;
+  overflow-y: auto;
   flex-direction: column-reverse;
   max-height: calc(100vh - var(--input-bar-height) - var(--navbar-height));
   padding-top: 10px;
   padding-bottom: 20px;
-  &::-webkit-scrollbar {
-    display: none;
-  }
 `
 
 export default Messages
diff --git a/src/renderer/src/pages/home/components/Topics.tsx b/src/renderer/src/pages/home/components/Topics.tsx
index 363b732a..6ea259ec 100644
--- a/src/renderer/src/pages/home/components/Topics.tsx
+++ b/src/renderer/src/pages/home/components/Topics.tsx
@@ -112,6 +112,7 @@ const Container = styled.div`
   height: 100%;
   border-left: 0.5px solid var(--color-border);
   padding: 10px;
+  overflow-y: auto;
   &.collapsed {
     width: 0;
     border-left: none;