refactor(Scrollbar, Messages): clean up scrollbar component and styles

- Removed unused 'right' prop from Scrollbar component.
- Increased scrolling timeout duration for better user experience.
- Updated scrollbar styles to simplify color handling.
- Adjusted Messages component to remove unnecessary props and added margin for better layout.
- Added responsive styles to CitationBlock for improved mobile display.

src/renderer/src/assets/styles/markdown.scss

@@ -299,6 +299,7 @@ emoji-picker {
   overflow-x: auto;
   overflow-y: hidden;
 }
+
 mjx-container {
   overflow-x: auto;
 }

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

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

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

@@ -4,11 +4,10 @@ import styled from 'styled-components'
 
 interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onScroll'> {
   ref?: React.RefObject<HTMLDivElement | null>
-  right?: boolean
   onScroll?: () => void // Custom onScroll prop for useScrollPosition's handleScroll
 }
 
-const Scrollbar: FC<Props> = ({ ref: passedRef, right, children, onScroll: externalOnScroll, ...htmlProps }) => {
+const Scrollbar: FC<Props> = ({ ref: passedRef, children, onScroll: externalOnScroll, ...htmlProps }) => {
   const [isScrolling, setIsScrolling] = useState(false)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 
@@ -25,7 +24,7 @@ const Scrollbar: FC<Props> = ({ ref: passedRef, right, children, onScroll: exter
     timeoutRef.current = setTimeout(() => {
       setIsScrolling(false)
       timeoutRef.current = null
-    }, 1000)
+    }, 1500)
   }, [clearScrollingTimeout])
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -52,7 +51,6 @@ const Scrollbar: FC<Props> = ({ ref: passedRef, right, children, onScroll: exter
     <Container
       {...htmlProps} // Pass other HTML attributes
       $isScrolling={isScrolling}
-      $right={right}
       onScroll={combinedOnScroll} // Use the combined handler
       ref={passedRef}>
       {children}
@@ -60,15 +58,13 @@ const Scrollbar: FC<Props> = ({ ref: passedRef, right, children, onScroll: exter
   )
 }
 
-const Container = styled.div<{ $isScrolling: boolean; $right?: boolean }>`
+const Container = styled.div<{ $isScrolling: boolean }>`
   overflow-y: auto;
   &::-webkit-scrollbar-thumb {
     transition: background 2s ease;
-    background: ${(props) =>
+    background: ${(props) => (props.$isScrolling ? 'var(--color-scrollbar-thumb)' : 'transparent')};
-      props.$isScrolling ? `var(--color-scrollbar-thumb${props.$right ? '-right' : ''})` : 'transparent'};
     &:hover {
-      background: ${(props) =>
+      background: var(--color-scrollbar-thumb-hover);
-        props.$isScrolling ? `var(--color-scrollbar-thumb${props.$right ? '-right' : ''}-hover)` : 'transparent'};
     }
   }
 `

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

@@ -53,6 +53,16 @@ function CitationBlock({ block }: { block: CitationMessageBlock }) {
 
 const SearchEntryPoint = styled.div`
   margin: 10px 2px;
+  @media (max-width: 768px) {
+    display: none;
+  }
+  .carousel {
+    white-space: normal;
+    .chip {
+      margin: 0;
+      margin-left: 5px;
+    }
+  }
 `
 
 export default React.memo(CitationBlock)

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

@@ -273,8 +273,7 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic, o
       ref={scrollContainerRef}
       style={{ position: 'relative', paddingTop: showPrompt ? 10 : 0 }}
       key={assistant.id}
-      onScroll={handleScrollPosition}
+      onScroll={handleScrollPosition}>
-      $right={topicPosition === 'left'}>
       <NarrowLayout style={{ display: 'flex', flexDirection: 'column-reverse' }}>
         <InfiniteScroll
           dataLength={displayMessages.length}
@@ -376,6 +375,7 @@ const MessagesContainer = styled(Scrollbar)<ContainerProps>`
   overflow-x: hidden;
   background-color: var(--color-background);
   z-index: 1;
+  margin-right: 2px;
 `
 
 export default Messages