fix : copy button functionality in code blocks (#665)

* fix(ui): Fix copy button functionality in code blocks

Signed-off-by: vijaykv5 <vijaykv2228@gmail.com>

* fix : add type safety

Signed-off-by: vijaykv5 <vijaykv2228@gmail.com>

* making the button more proportional

Signed-off-by: Peter Jausovec <peter.jausovec@solo.io>

---------

Signed-off-by: vijaykv5 <vijaykv2228@gmail.com>
Signed-off-by: Peter Jausovec <peter.jausovec@solo.io>
Co-authored-by: Peter Jausovec <peterj@users.noreply.github.com>
Co-authored-by: Peter Jausovec <peter.jausovec@solo.io>

Author: Vijaykv5

ui/src/components/chat/CodeBlock.tsx

@@ -1,14 +1,36 @@
 "use client";
+import React, { useState } from "react";
 import { Check, Copy } from "lucide-react";
-import { useState } from "react";
 import { Button } from "../ui/button";
 
+const hasChildren = (props: unknown): props is { children: React.ReactNode } => {
+  return typeof props === 'object' && props !== null && 'children' in props;
+};
+
+const extractTextFromReactNode = (node: React.ReactNode): string => {
+  if (typeof node === "string") {
+    return node;
+  }
+  if (Array.isArray(node)) {
+    return node.map(extractTextFromReactNode).join("");
+  }
+  if (React.isValidElement(node) && node.props && hasChildren(node.props)) {
+    return extractTextFromReactNode(node.props.children);
+  }
+  return String(node || "");
+};
+
 const CodeBlock = ({ children, className }: { children: React.ReactNode[]; className: string }) => {
   const [copied, setCopied] = useState(false);
-  const codeContent = children[0] || "";
+
+  const getCodeContent = (): string => {
+    if (!children || children.length === 0) return "";
+    return extractTextFromReactNode(children[0]);
+  };
 
   const handleCopy = async () => {
-    if (typeof codeContent === "string") {
+    const codeContent = getCodeContent();
+    if (codeContent) {
       await navigator.clipboard.writeText(codeContent);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
@@ -20,7 +42,13 @@ const CodeBlock = ({ children, className }: { children: React.ReactNode[]; class
       <pre className={className}>
         <code className={className}>{children}</code>
       </pre>
-      <Button variant="link" onClick={handleCopy} className="absolute top-2 right-2  p-1.5 rounded-md opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Copy to clipboard">
+      <Button 
+        variant="link" 
+        onClick={handleCopy} 
+        className="absolute top-2 right-2 p-2.5 rounded-md opacity-0 group-hover:opacity-100 transition-opacity bg-background/80 hover:bg-background/90" 
+        aria-label="Copy to clipboard"
+        title={copied ? "Copied!" : "Copy to clipboard"}
+      >
         {copied ? <Check size={16} /> : <Copy size={16} />}
       </Button>
     </div>