Function createCodeComponent

src/renderer/components/chat-markdown-renderer.tsx:250–282

(codeTheme: string, size: MarkdownSize, styles: typeof sizeStyles.md, isStreaming: boolean = false)

// Custom code component that uses our theme system
function createCodeComponent(codeTheme: string, size: MarkdownSize, styles: typeof sizeStyles.md, isStreaming: boolean = false) {
  return function CodeComponent({ className, children, node, ...props }: any) {
    const match = /language-(\w+)/.exec(className || "")
    const language = match ? match[1] : undefined
    const codeContent = String(children)

    // Check if this is a code block (has language) or inline code
    // Streamdown wraps code blocks in <pre><code>, inline code is just <code>
    const isCodeBlock = language || (codeContent.includes("\n") && codeContent.length > 100)

    if (isCodeBlock) {
      // Route mermaid blocks to MermaidBlock component
      if (language === "mermaid") {
        // Pass isStreaming to MermaidBlock
        // When streaming, MermaidBlock shows a placeholder instead of trying to render
        return <MermaidBlock code={codeContent.replace(/\n$/, "")} size={size} isStreaming={isStreaming} />
      }

      return (
        <CodeBlock
          language={language}
          themeId={codeTheme}
          size={size}
        >
          {codeContent.replace(/\n$/, "")}
        </CodeBlock>
      )
    }

    // Inline code
    return <span className={styles.inlineCode}>{children}</span>
  }
}

export const ChatMarkdownRenderer = memo(function ChatMarkdownRenderer({
  content,