feat: sticky copy-reply button on chat code-snippets

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}>