From 3dc4947e26df76aebb4ed68946406fbee87160ea Mon Sep 17 00:00:00 2001
From: Yuzhong Zhang <141388234+BetterAndBetterII@users.noreply.github.com>
Date: Mon, 31 Mar 2025 21:11:28 +0800
Subject: [PATCH] optimize: Sticky CopyButton in CodeBlock (#4205)

---
 .../src/pages/home/Markdown/Artifacts.tsx     |  1 +
 .../src/pages/home/Markdown/CodeBlock.tsx     | 22 ++++++++++++++++---
 .../src/pages/home/Markdown/Markdown.tsx      |  3 ++-
 .../src/pages/home/Messages/Message.tsx       |  2 +-
 .../src/pages/home/Messages/MessageGroup.tsx  |  5 +++--
 .../src/pages/home/Messages/Messages.tsx      |  4 +++-
 6 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/pages/home/Markdown/Artifacts.tsx b/src/renderer/src/pages/home/Markdown/Artifacts.tsx
index 09b8243d..746eb170 100644
--- a/src/renderer/src/pages/home/Markdown/Artifacts.tsx
+++ b/src/renderer/src/pages/home/Markdown/Artifacts.tsx
@@ -75,6 +75,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
   gap: 8px;
+  padding-bottom: 10px;
 `
 
 export default Artifacts
diff --git a/src/renderer/src/pages/home/Markdown/CodeBlock.tsx b/src/renderer/src/pages/home/Markdown/CodeBlock.tsx
index 75ea868c..3f56633d 100644
--- a/src/renderer/src/pages/home/Markdown/CodeBlock.tsx
+++ b/src/renderer/src/pages/home/Markdown/CodeBlock.tsx
@@ -98,12 +98,20 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className }) => {
           )}
           <CodeLanguage>{'<' + language.toUpperCase() + '>'}</CodeLanguage>
         </div>
-        <HStack gap={12} alignItems="center">
+        
+      </CodeHeader>
+      <StickyWrapper>
+        <HStack
+          position="absolute"
+          gap={12}
+          alignItems="center"
+          style={{ bottom: '0.2rem', right: '1rem', height: "27px" }}
+        >
           {showDownloadButton && <DownloadButton language={language} data={children} />}
           {codeWrappable && <UnwrapButton unwrapped={isUnwrapped} onClick={() => setIsUnwrapped(!isUnwrapped)} />}
           <CopyButton text={children} />
         </HStack>
-      </CodeHeader>
+      </StickyWrapper>
       <CodeContent
         ref={codeContentRef}
         isShowLineNumbers={codeShowLineNumbers}
@@ -211,7 +219,9 @@ const DownloadButton = ({ language, data }: { language: string; data: string })
   )
 }
 
-const CodeBlockWrapper = styled.div``
+const CodeBlockWrapper = styled.div`
+  position: relative;
+`
 
 const CodeContent = styled.div<{ isShowLineNumbers: boolean; isUnwrapped: boolean; isCodeWrappable: boolean }>`
   .shiki {
@@ -376,4 +386,10 @@ const DownloadWrapper = styled.div`
   }
 `
 
+const StickyWrapper = styled.div`
+  position: sticky;
+  top: 28px;
+  z-index: 10;
+`
+
 export default memo(CodeBlock)
diff --git a/src/renderer/src/pages/home/Markdown/Markdown.tsx b/src/renderer/src/pages/home/Markdown/Markdown.tsx
index 257b52c1..bf303935 100644
--- a/src/renderer/src/pages/home/Markdown/Markdown.tsx
+++ b/src/renderer/src/pages/home/Markdown/Markdown.tsx
@@ -64,7 +64,8 @@ const Markdown: FC<Props> = ({ message, citationsData }) => {
         return <Link {...props} />
       },
       code: CodeBlock,
-      img: ImagePreview
+      img: ImagePreview,
+      pre: (props: any) => <pre style={{ overflow: 'visible' }} {...props} />
     } as Partial<Components>
 
     if (messageContent.includes('<style>')) {
diff --git a/src/renderer/src/pages/home/Messages/Message.tsx b/src/renderer/src/pages/home/Messages/Message.tsx
index 818511cb..9ad8705b 100644
--- a/src/renderer/src/pages/home/Messages/Message.tsx
+++ b/src/renderer/src/pages/home/Messages/Message.tsx
@@ -143,7 +143,7 @@ const MessageItem: FC<Props> = ({
       <MessageHeader message={message} assistant={assistant} model={model} key={getModelUniqId(model)} />
       <MessageContentContainer
         className="message-content-container"
-        style={{ fontFamily, fontSize, background: messageBackground }}>
+        style={{ fontFamily, fontSize, background: messageBackground, overflowY: 'visible' }}>
         <MessageErrorBoundary>
           <MessageContent message={message} model={model} />
         </MessageErrorBoundary>
diff --git a/src/renderer/src/pages/home/Messages/MessageGroup.tsx b/src/renderer/src/pages/home/Messages/MessageGroup.tsx
index 6719ef28..e43a7aab 100644
--- a/src/renderer/src/pages/home/Messages/MessageGroup.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageGroup.tsx
@@ -286,6 +286,7 @@ const GridContainer = styled.div<{ $count: number; $layout: MultiModelMessageSty
       grid-template-rows: auto;
       gap: 16px;
     `}
+  overflow-y: visible;
 `
 
 interface MessageWrapperProps {
@@ -327,14 +328,14 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
     return $layout === 'grid' && $isGrouped
       ? css`
           max-height: ${$isInPopover ? '50vh' : '300px'};
-          overflow-y: ${$isInPopover ? 'auto' : 'hidden'};
+          overflow-y: ${$isInPopover ? 'visible' : 'hidden'};
           border: 0.5px solid ${$isInPopover ? 'transparent' : 'var(--color-border)'};
           padding: 10px;
           border-radius: 6px;
           background-color: var(--color-background);
         `
       : css`
-          overflow-y: auto;
+          overflow-y: visible;
           border-radius: 6px;
         `
   }}
diff --git a/src/renderer/src/pages/home/Messages/Messages.tsx b/src/renderer/src/pages/home/Messages/Messages.tsx
index d2d2f94c..91e7f47c 100644
--- a/src/renderer/src/pages/home/Messages/Messages.tsx
+++ b/src/renderer/src/pages/home/Messages/Messages.tsx
@@ -256,7 +256,9 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic })
           hasMore={hasMore}
           loader={null}
           scrollableTarget="messages"
-          inverse>
+          inverse
+          style={{ overflow: 'visible' }}
+        >
           <ScrollContainer>
             <LoaderContainer $loading={isLoadingMore}>
               <BeatLoader size={8} color="var(--color-text-2)" />