feat: add scrollbar style

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 前面色后面色 */
+    }
+  }
+}

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>

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

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;