Code block syntax highlighting integration

[sugyan]

Summary

Integrate syntax highlighting for code blocks in chat messages using the existing highlight.js infrastructure to improve code readability and visual presentation.

Background

The project already includes highlight.js (version 10.7.3) in its dependencies, but code blocks in chat messages currently display without syntax highlighting. This enhancement will:

• Apply syntax highlighting to code blocks in assistant messages
• Enhance tool result displays that contain code
• Improve overall developer experience and code readability
• Leverage existing highlight.js setup for consistent implementation

Implementation Plan

1. Code Block Detection and Processing

• Identify code blocks in message content (markdown code fences, inline code)
• Auto-detect programming languages or use explicit language hints
• Apply highlighting using existing highlight.js instance

2. Integration Points

// Enhanced message processing with code highlighting
interface CodeBlock {
  language?: string;
  content: string;
  highlighted: string;
}

// Utility function for highlighting
const highlightCode = (code: string, language?: string): string => {
  // Use existing highlight.js instance
  return hljs.highlightAuto(code, language ? [language] : undefined).value;
};

3. Message Component Updates

• ChatMessage: Apply highlighting to code blocks in assistant responses
• ToolResultMessage: Highlight code content in tool outputs (file contents, diffs)
• SystemMessage: Highlight any code-like content in system messages

4. Styling Integration

• Use existing TailwindCSS classes for code block containers
• Ensure highlight.js CSS classes work with light/dark theme system
• Add custom CSS for code block backgrounds and borders

Technical Details

Files to modify:

• frontend/src/components/MessageComponents.tsx - Add code highlighting to message display
• frontend/src/utils/codeHighlighting.ts - Code highlighting utilities
• frontend/src/components/messages/CodeBlock.tsx - Dedicated code block component
• frontend/src/styles/ - Highlight.js theme integration (if needed)

Existing infrastructure:

• highlight.js 10.7.3 already available in dependencies
• TailwindCSS for consistent styling
• Theme system for light/dark mode support

Language support priorities:

1. High priority: TypeScript, JavaScript, Python, Bash/Shell
2. Medium priority: JSON, HTML, CSS, Markdown
3. Low priority: Other languages as detected by highlight.js auto-detection

Implementation Approach

Phase 1: Basic Integration

1. Create utility functions for code detection and highlighting
2. Add syntax highlighting to ChatMessage components
3. Basic styling integration with existing theme system

Phase 2: Enhanced Features

1. Tool result code highlighting (file contents, diffs)
2. Language detection improvements
3. Custom styling for code blocks (line numbers, copy buttons)

Phase 3: Advanced Features

1. Inline code highlighting in messages
2. Diff highlighting for file changes
3. Performance optimizations for large code blocks

Acceptance Criteria

• Code blocks in assistant messages display with appropriate syntax highlighting
• Auto-detection works for common programming languages (TypeScript, JavaScript, Python, etc.)
• Tool results containing code (file reads, command outputs) are properly highlighted
• Syntax highlighting works seamlessly with light and dark themes
• Code blocks have appropriate styling (background, borders, padding)
• Performance remains good with large code blocks
• Existing message functionality is preserved
• Mobile responsive design for code blocks
• Copy functionality works with highlighted code (Add copy-to-clipboard functionality for messages #25)

Examples

Before (Current)

Here's your updated function:

function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

After (With Highlighting)

Here's your updated function:

function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

[Code would show with proper JavaScript syntax colors]

Parent Issue

This is a sub-issue of #10 - Enhance frontend UI with Slack-like chat experience

Dependencies

• Existing highlight.js 10.7.3 dependency
• TailwindCSS theme system
• Current message component architecture

Labels

feature, ui/ux, frontend, enhancement, sub-issue