From 721ea5cad2563d049867f3ac2a054e4b11acdf52 Mon Sep 17 00:00:00 2001
From: Akhileshrangani4 <akhileshrangani4@gmail.com>
Date: Sat, 30 Nov 2024 01:33:54 -0500
Subject: [PATCH] feat: sticky copy-reply button on chat code-snippets

---
 .../editor/AIChat/lib/markdownComponents.tsx  | 61 ++++++++++---------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/frontend/components/editor/AIChat/lib/markdownComponents.tsx b/frontend/components/editor/AIChat/lib/markdownComponents.tsx
index c5cbbf3..e6e1418 100644
--- a/frontend/components/editor/AIChat/lib/markdownComponents.tsx
+++ b/frontend/components/editor/AIChat/lib/markdownComponents.tsx
@@ -25,39 +25,40 @@ export const createMarkdownComponents = (
     const match = /language-(\w+)/.exec(className || "")
 
     return match ? (
-      <div className="relative border border-input rounded-md my-4">
-        <div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 bg-#1e1e1e rounded-tl">
+      <div className="relative border border-input rounded-md mt-8 my-2 translate-y-[-1rem]">
+        <div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 rounded-tl">
           {match[1]}
         </div>
-        <div className="absolute top-0 right-0 flex">
-          {renderCopyButton(children)}
-          <Button
-            onClick={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-              askAboutCode(children)
-            }}
-            size="sm"
-            variant="ghost"
-            className="p-1 h-6"
-          >
-            <CornerUpLeft className="w-4 h-4" />
-          </Button>
-        </div>
-        <div className="pt-6">
-          <SyntaxHighlighter
-            style={vscDarkPlus as any}
-            language={match[1]}
-            PreTag="div"
-            customStyle={{
-              margin: 0,
-              padding: "0.5rem",
-              fontSize: "0.875rem",
-            }}
-          >
-            {stringifyContent(children)}
-          </SyntaxHighlighter>
+        <div className="sticky top-0 right-0 flex justify-end z-10">
+          <div className="flex border border-input shadow-lg bg-background rounded-md">
+            {renderCopyButton(children)}
+            <div className="w-px bg-input"></div>
+            <Button
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                askAboutCode(children)
+              }}
+              size="sm"
+              variant="ghost"
+              className="p-1 h-6"
+            >
+              <CornerUpLeft className="w-4 h-4" />
+            </Button>
+          </div>
         </div>
+        <SyntaxHighlighter
+          style={vscDarkPlus as any}
+          language={match[1]}
+          PreTag="div"
+          customStyle={{
+            margin: 0,
+            padding: "0.5rem",
+            fontSize: "0.875rem",
+          }}
+        >
+          {stringifyContent(children)}
+        </SyntaxHighlighter>
       </div>
     ) : (
       <code className={className} {...props}>