Function CodeBlock

src/renderer/components/chat-markdown-renderer.tsx:39–137

({
  language,
  children,
  themeId,
  size = "md",
}: {
  language?: string
  children: string
  themeId: string
  size?: "sm" | "md" | "lg"
})

// Code block with copy button using Shiki
function CodeBlock({
  language,
  children,
  themeId,
  size = "md",
}: {
  language?: string
  children: string
  themeId: string
  size?: "sm" | "md" | "lg"
}) {
  const [copied, setCopied] = useState(false)
  const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null)

  const handleCopy = useCallback(() => {
    navigator.clipboard.writeText(children)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }, [children])

  // Only use Shiki for known programming languages, not for plaintext/ASCII art
  const shouldHighlight = language && language !== "plaintext" && language !== "text"

  useEffect(() => {
    if (!shouldHighlight) return

    let cancelled = false

    const highlight = async () => {
      try {
        const html = await highlightCode(children, language, themeId)
        if (!cancelled) {
          setHighlightedHtml(html)
        }
      } catch (error) {
        console.error("Failed to highlight code:", error)
      }
    }

    highlight()

    return () => {
      cancelled = true
    }
  }, [children, language, themeId, shouldHighlight])

  // For plaintext/ASCII art, just escape and render directly (no Shiki)
  // For code with syntax highlighting, use Shiki output when available
  const htmlContent = shouldHighlight
    ? (highlightedHtml ?? escapeHtml(children))
    : escapeHtml(children)

  return (
    <div className="relative mt-2 mb-4 rounded-[10px] bg-muted/50 overflow-hidden">
      <button
        onClick={handleCopy}
        tabIndex={-1}
        className="absolute top-[6px] right-[6px] p-1 z-2"