SurfSense/surfsense_web/components/chat/CodeBlock.tsx

"use client";

import React, { useState, useEffect, useMemo, useCallback } from "react";
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";

// Constants for styling and configuration
const COPY_TIMEOUT = 2000;

const BASE_CUSTOM_STYLE = {
  margin: 0,
  borderRadius: "0.375rem",
  fontSize: "0.75rem",
  lineHeight: "1.5rem",
  border: "none",
} as const;

const LINE_PROPS_STYLE = {
  wordBreak: "break-all" as const,
  whiteSpace: "pre-wrap" as const,
  border: "none",
  borderBottom: "none",
  paddingLeft: 0,
  paddingRight: 0,
  margin: "0.25rem 0",
} as const;

const CODE_TAG_PROPS = {
  className: "font-mono",
  style: {
    border: "none",
    background: "var(--syntax-bg)",
  },
} as const;

// TypeScript interfaces
interface CodeBlockProps {
  children: string;
  language: string;
}

interface LanguageRenderer {
  (props: { code: string }): React.JSX.Element;
}

interface SyntaxStyle {
  [key: string]: React.CSSProperties;
}

// Memoized fallback component for SSR/hydration
const FallbackCodeBlock = React.memo(({ children }: { children: string }) => (
  <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>
));

FallbackCodeBlock.displayName = "FallbackCodeBlock";

// Code block component with syntax highlighting and copy functionality
export const CodeBlock = React.memo<CodeBlockProps>(({
  children,
  language,
}) => {
  const [copied, setCopied] = useState(false);
  const { resolvedTheme, theme } = useTheme();
  const [mounted, setMounted] = useState(false);

  // Prevent hydration issues
  useEffect(() => {
    setMounted(true);
  }, []);

  // Memoize theme detection
  const isDarkTheme = useMemo(() => 
    mounted && (resolvedTheme === "dark" || theme === "dark"),
    [mounted, resolvedTheme, theme]
  );

  // Memoize syntax theme selection
  const syntaxTheme = useMemo(() => 
    isDarkTheme ? oneDark : oneLight,
    [isDarkTheme]
  );

  // Memoize enhanced style with theme-specific modifications
  const enhancedStyle = useMemo<SyntaxStyle>(() => ({
    ...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)",
    },
  }), [syntaxTheme]);

  // Memoize custom style with background
  const customStyle = useMemo(() => ({
    ...BASE_CUSTOM_STYLE,
    backgroundColor: "var(--syntax-bg)",
  }), []);

  // Memoized copy handler
  const handleCopy = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(children);
      setCopied(true);
      const timeoutId = setTimeout(() => setCopied(false), COPY_TIMEOUT);
      return () => clearTimeout(timeoutId);
    } catch (error) {
      console.warn("Failed to copy code to clipboard:", error);
    }
  }, [children]);

  // Memoized line props with style
  const lineProps = useMemo(() => ({
    style: LINE_PROPS_STYLE,
  }), []);

  // Early return for non-mounted state
  if (!mounted) {
    return <FallbackCodeBlock>{children}</FallbackCodeBlock>;
  }

  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"
          type="button"
        >
          {copied ? (
            <Check size={14} className="text-green-500" />
          ) : (
            <Copy size={14} className="text-muted-foreground" />
          )}
        </button>
      </div>
      <SyntaxHighlighter
        language={language || "text"}
        style={enhancedStyle}
        customStyle={customStyle}
        codeTagProps={CODE_TAG_PROPS}
        showLineNumbers={false}
        wrapLines={false}
        lineProps={lineProps}
        PreTag="div"
      >
        {children}
      </SyntaxHighlighter>
    </div>
  );
});

CodeBlock.displayName = "CodeBlock";

// Optimized language renderer factory with memoization
const createLanguageRenderer = (lang: string): LanguageRenderer => {
  const renderer = ({ code }: { code: string }) => (
    <CodeBlock language={lang}>{code}</CodeBlock>
  );
  renderer.displayName = `LanguageRenderer(${lang})`;
  return renderer;
};

// Pre-defined supported languages for better maintainability
const SUPPORTED_LANGUAGES = [
  "javascript", "typescript", "python", "java", "csharp", "cpp", "c",
  "php", "ruby", "go", "rust", "swift", "kotlin", "scala", "sql",
  "json", "xml", "yaml", "bash", "shell", "powershell", "dockerfile",
  "html", "css", "scss", "less", "markdown", "text"
] as const;

// Generate language renderers efficiently
export const languageRenderers: Record<string, LanguageRenderer> = 
  Object.fromEntries(
    SUPPORTED_LANGUAGES.map(lang => [lang, createLanguageRenderer(lang)])
  );