42. WhatsApp Chat with Rich Text Message Formatting

Build an Advanced WhatsApp Chat Interface with message formatting support to display rich text content.

1. Message Formatting

• Support bold text using **text**
• Support *italic* text using *text*
• Support code blocks using backticks
• Support line breaks and proper text wrapping
• Parse and render formatted text correctly

2. Message Structure

interface Message {
  id: number;
  text: string;
  sender: 'user' | 'other';
  timestamp: Date;
}

3. Text Parsing Logic

• Parse markdown-like formatting patterns
• Handle nested formatting correctly
• Preserve plain text when no formatting is detected
• Render formatted parts as appropriate HTML elements

Examples

// Example messages with formatting
const messages = [
  { id: 1, text: 'This is **bold** text', sender: 'user', timestamp: new Date() },
  { id: 2, text: 'This is *italic* text', sender: 'other', timestamp: new Date() },
  { id: 3, text: 'Use `useState` hook', sender: 'user', timestamp: new Date() },
];