feat: Code Block Syntax Highlighting & Copy Func

surfsense_web/components/markdown-viewer.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
@@ -6,6 +6,10 @@ import remarkGfm from "remark-gfm";
 import { cn } from "@/lib/utils";
 import { Citation } from "./chat/Citation";
 import { Source } from "./chat/types";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneLight, oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { Check, Copy } from "lucide-react";
+import { useTheme } from "next-themes";
 
 interface MarkdownViewerProps {
   content: string;
@@ -75,16 +79,19 @@ export function MarkdownViewer({ content, className, getCitationSource }: Markdo
       td: ({node, ...props}: any) => <td className="px-3 py-2 border-t border-border" {...props} />,
       code: ({node, className, children, ...props}: any) => {
         const match = /language-(\w+)/.exec(className || '');
+        const language = match ? match[1] : '';
         const isInline = !match;
-        return isInline 
-          ? <code className="bg-muted px-1 py-0.5 rounded text-xs" {...props}>{children}</code>
-          : (
-            <div className="relative my-4">
-              <pre className="bg-muted p-4 rounded-md overflow-x-auto">
-                <code className="text-xs" {...props}>{children}</code>
-              </pre>
-            </div>
-          );
+        
+        if (isInline) {
+          return <code className="bg-muted px-1 py-0.5 rounded text-xs" {...props}>{children}</code>;
+        }
+        
+        // For code blocks, add syntax highlighting and copy functionality
+        return (
+          <CodeBlock language={language} {...props}>
+            {String(children).replace(/\n$/, '')}
+          </CodeBlock>
+        );
       }
     };
   }, [getCitationSource]);
@@ -102,6 +109,102 @@ export function MarkdownViewer({ content, className, getCitationSource }: Markdo
   );
 }
 
+// Code block component with syntax highlighting and copy functionality
+const CodeBlock = ({ children, language }: { children: string, language: string }) => {
+  const [copied, setCopied] = useState(false);
+  const { resolvedTheme, theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // Prevent hydration issues
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(children);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  // Choose theme based on current system/user preference
+  const isDarkTheme = mounted && (resolvedTheme === 'dark' || theme === 'dark');
+  const syntaxTheme = isDarkTheme ? oneDark : oneLight;
+
+  return (
+    <div className="relative my-4 group">
+      <div className="absolute right-2 top-2 z-10">
+        <button
+          onClick={handleCopy}
+          className="p-1.5 rounded-md bg-background/80 hover:bg-background border border-border flex items-center justify-center transition-colors"
+          aria-label="Copy code"
+        >
+          {copied ? 
+            <Check size={14} className="text-green-500" /> : 
+            <Copy size={14} className="text-muted-foreground" />
+          }
+        </button>
+      </div>
+      {mounted ? (
+        <SyntaxHighlighter
+          language={language || 'text'}
+          style={{
+            ...syntaxTheme,
+            'pre[class*="language-"]': {
+              ...syntaxTheme['pre[class*="language-"]'],
+              margin: 0,
+              border: 'none',
+              borderRadius: '0.375rem',
+              background: 'var(--syntax-bg)'
+            },
+            'code[class*="language-"]': {
+              ...syntaxTheme['code[class*="language-"]'],
+              border: 'none',
+              background: 'var(--syntax-bg)'
+            }
+          }}
+          customStyle={{
+            margin: 0,
+            borderRadius: '0.375rem',
+            fontSize: '0.75rem',
+            lineHeight: '1.5rem',
+            backgroundColor: 'var(--syntax-bg)',
+            border: 'none',
+          }}
+          codeTagProps={{
+            className: "font-mono",
+            style: {
+              border: 'none',
+              background: 'var(--syntax-bg)'
+            }
+          }}
+          showLineNumbers={false}
+          wrapLines={false}
+          lineProps={{
+            style: {
+              wordBreak: 'break-all', 
+              whiteSpace: 'pre-wrap',
+              border: 'none',
+              borderBottom: 'none',
+              paddingLeft: 0,
+              paddingRight: 0,
+              margin: '0.25rem 0'
+            }
+          }}
+          PreTag="div"
+        >
+          {children}
+        </SyntaxHighlighter>
+      ) : (
+        <div className="bg-muted p-4 rounded-md">
+          <pre className="m-0 p-0 border-0">
+            <code className="text-xs font-mono border-0 leading-6">{children}</code>
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
 // Helper function to process citations within React children
 const processCitationsInReactChildren = (children: React.ReactNode, getCitationSource: (id: number) => Source | null): React.ReactNode => {
   // If children is not an array or string, just return it