Enhanced Code Block Rendering in Markdown

[kiridharan]

Pull Request: Enhanced Code Block Rendering in Markdown

Description

This PR adds support for rendering code blocks in markdown with enhanced features including syntax highlighting support, copy-to-clipboard functionality, and language detection. The implementation provides a better user experience when displaying code snippets in chat messages and other markdown content.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update

Related Issues

Fixes #(issue number) - if applicable

Changes Made

New Components & Features

• CodeBlock Component (src/components/ui/typography/MarkdownRenderer/CodeBlock.tsx)
  • Renders code blocks with language-specific styling
  • Displays language identifier in header
  • Copy-to-clipboard functionality with visual feedback
  • Horizontal scrolling for long code lines
  • Responsive design with Tailwind CSS

Modified Files

1. src/components/ui/typography/MarkdownRenderer/styles.tsx

   • Added Pre component to handle markdown <pre> elements
   • Integrated CodeBlock component for rendering code blocks
   • Extracts language from className and passes to CodeBlock
   • Added proper TypeScript typing for component props
   • Registered pre component in the components export

2. src/components/ui/typography/MarkdownRenderer/types.ts

   • Added PreProps type definition for the Pre component
   • Follows existing pattern of prop type organization
   • Maintains consistency with other component prop types

3. src/components/ui/typography/MarkdownRenderer/MarkdownRenderer.tsx

   • Pre component now properly registered in ReactMarkdown components
   • Enables markdown code block rendering

Implementation Details

Code Block Rendering Flow

Markdown Input (```js ... ```)
       ↓
ReactMarkdown Parser
       ↓
Pre Component (styles.tsx)
       ↓
CodeBlock Component
       ↓
Rendered with Copy Button & Language Label

Features

• Language Detection: Automatically detects language from markdown fence (e.g., ```javascript)
• Copy Button: Users can copy code with a single click
• Visual Feedback: Shows "Copied!" confirmation message for 2 seconds
• Language Display: Shows the programming language in uppercase in the header
• Responsive Design: Works seamlessly on mobile and desktop devices
• Overflow Handling: Horizontal scrolling for long code lines

Preview

->

[kiridharan]

Hi @fioritonicolas @Ansub @complyue @mishramonalisha76 , Could you please review the PR when you have a moment and let me know if anything needs to be updated?

Thanks!

[mishramonalisha76]

Hi @fioritonicolas @Ansub @complyue @mishramonalisha76 , Could you please review the PR when you have a moment and let me know if anything needs to be updated?

Thanks!

Hi @fioritonicolas , Thank you for your contribution towards improving the Agent-UI. We’ll review the PR shortly.

[kiridharan]

Thanks @mishramonalisha76 . Looking forward to it.

[kiridharan]

@mishramonalisha76 any update on this ? 😄

[kiridharan]

@mishramonalisha76 any update?