feat: now you can copy a codeblock (#101)

Now you can copy a code block in a bot message.

![CleanShot 2025-07-04 at 22 41
57](https://github.com/user-attachments/assets/1b45c50c-c5e9-4939-855b-af4beae94642)

Closes #100

Author: nickytonline

src/components/CodeBlock.tsx

@@ -0,0 +1,59 @@
+import { useRef, type ComponentProps } from 'react'
+import { Copy } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { copyToClipboard } from '@/lib/utils/clipboard'
+
+type CodeBlockProps = {
+  onCopySuccess?: (text: string) => void
+  onCopyError?: (text: string, error?: unknown) => void
+  copyButtonLabel?: string
+  copiedButtonLabel?: string
+} & Omit<ComponentProps<'pre'>, 'onCopy'>
+
+export function CodeBlock({
+  children,
+  className,
+  onCopySuccess,
+  onCopyError,
+  ...props
+}: CodeBlockProps) {
+  const preRef = useRef<HTMLPreElement>(null)
+
+  const handleCopy = async () => {
+    // Extract text content from the actual DOM element
+    const textContent = preRef.current?.textContent ?? ''
+
+    try {
+      const success = await copyToClipboard(textContent)
+
+      if (success) {
+        onCopySuccess?.(textContent)
+      } else {
+        onCopyError?.(textContent)
+      }
+    } catch (error) {
+      onCopyError?.(textContent, error)
+    }
+  }
+
+  return (
+    <div className="relative group">
+      <pre
+        ref={preRef}
+        className={`overflow-x-auto whitespace-pre-wrap break-words ${className || ''}`}
+        {...props}
+      >
+        {children}
+      </pre>
+      <Button
+        onClick={handleCopy}
+        variant="secondary"
+        size="sm"
+        className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-xs"
+      >
+        <Copy className="h-4 w-4" />
+        <span className="sr-only">Copy code snippet</span>
+      </Button>
+    </div>
+  )
+}

src/components/MarkdownContent.tsx

@@ -1,21 +1,35 @@
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import { toast } from 'sonner'
+import { CodeBlock } from '@/components/CodeBlock'
 
 type MarkdownContentProps = {
   content: string
 }
 
 export function MarkdownContent({ content }: MarkdownContentProps) {
+  const handleCopySuccess = () => {
+    toast.success('Copied code snippet to clipboard')
+  }
+
+  const handleCopyError = () => {
+    toast.error('Failed to copy code snippet')
+  }
+
   return (
     <div className="prose prose-sm dark:prose-invert max-w-none break-words [&>*+*]:mt-4 [&>h1+*]:mt-3 [&>h2+*]:mt-3 [&>h3+*]:mt-3 [&>p+ul]:mt-3 [&>p+ol]:mt-3">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{
-          pre: ({ node, ...props }) => (
-            <pre
-              className="overflow-x-auto whitespace-pre-wrap break-words"
+          pre: ({ node, className, children, ...props }) => (
+            <CodeBlock
+              className={className}
+              onCopySuccess={handleCopySuccess}
+              onCopyError={handleCopyError}
               {...props}
-            />
+            >
+              {children}
+            </CodeBlock>
           ),
           code: ({ node, ...props }) => (
             <code className="break-words whitespace-pre-wrap" {...props} />