ready to push

frontend/src/Components/AiComponents/ChatComponents/Streaming.js

@@ -1,8 +1,32 @@
 import React, { useEffect, useRef } from 'react';
-import CustomMarkdown from '../Markdown/CustomMarkdown';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
 import './Streaming.css';
 import './SourceRef.css';
 
+// Helper function to normalize various citation formats (e.g., [1,2], [1, 2]) into the standard [1][2] format
+const normalizeCitations = (text) => {
+  if (!text) return '';
+
+  const citationRegex = /\[(\d+(?:,\s*\d+)+)\]/g;
+
+  return text.replace(citationRegex, (match, capturedNumbers) => {
+    const numbers = capturedNumbers
+                      .split(/,\s*/)
+                      .map(numStr => numStr.trim())
+                      .filter(Boolean);
+
+    if (numbers.length <= 1) {
+      return match;
+    }
+
+    return numbers.map(num => `[${num}]`).join('');
+  });
+};
+
 // Streaming component for rendering markdown content
 const Streaming = ({ content, isStreaming, onContentRef, showSourcePopup, hideSourcePopup }) => {
   const contentRef = useRef(null);
@@ -11,16 +35,168 @@ const Streaming = ({ content, isStreaming, onContentRef, showSourcePopup, hideSo
     if (contentRef.current && onContentRef) {
       onContentRef(contentRef.current);
     }
-  }, [content, onContentRef]);  
+  }, [content, onContentRef]);
+
+  const displayContent = isStreaming ? `${content}▌` : (content || '');
+  const normalizedContent = normalizeCitations(displayContent);
+
+  // Custom renderer for text nodes to handle source references
+  const renderWithSourceRefs = (elementType) => {
+    const ElementComponent = elementType; // e.g., 'p', 'li'
+  
+    // Helper to gather plain text
+    const getFullText = (something) => {
+      if (typeof something === 'string') return something;
+      if (Array.isArray(something)) return something.map(getFullText).join('');
+      if (React.isValidElement(something) && something.props?.children)
+        return getFullText(React.Children.toArray(something.props.children));
+      return '';
+    };
+  
+    return (props) => {
+      // Plain‑text version of this block (paragraph / list‑item)
+      const fullText = getFullText(props.children);
+      // Same regex the backend used
+      const sentenceRegex = /[^.!?\n]+[.!?]+[\])'"`’”]*|[^.!?\n]+$/g;
+      const sentencesArr = fullText.match(sentenceRegex) || [fullText];
+  
+      // Helper function to find the sentence that contains position `pos`
+      const sentenceByPos = (pos) => {
+        let run = 0;
+        for (const s of sentencesArr) {
+          const end = run + s.length;
+          if (pos >= run && pos < end) return s.trim();
+          run = end;
+        }
+        return fullText.trim();
+      };
+  
+      // Cursor that advances through fullText so each subsequent 
+      // indexOf search starts AFTER the previous match
+      let searchCursor = 0;                                         
+  
+      // Recursive renderer that preserves existing markup
+      const processNode = (node, keyPrefix = 'node') => {
+        if (typeof node === 'string') {
+          const citationRegex = /\[(\d+)\]/g;
+          let last = 0;
+          let parts = [];
+          let m;
+          while ((m = citationRegex.exec(node))) {
+            const sliceBefore = node.slice(last, m.index);
+            if (sliceBefore) parts.push(sliceBefore);
+  
+            const localIdx  = m.index;
+            const num       = parseInt(m[1], 10);
+            const citStr    = m[0];
+  
+            // Find this specific occurrence in fullText, starting at searchCursor
+            const absIdx    = fullText.indexOf(citStr, searchCursor);
+            if (absIdx !== -1) searchCursor = absIdx + citStr.length;
+  
+            const sentenceForPopup = sentenceByPos(absIdx);          
+  
+            parts.push(
+              <sup
+                key={`${keyPrefix}-ref-${num}-${localIdx}`}
+                className="source-reference"
+                onMouseEnter={(e) =>
+                  showSourcePopup &&
+                  showSourcePopup(num - 1, e.target, sentenceForPopup)
+                }                                                  
+                onMouseLeave={hideSourcePopup}
+              >
+                {num}
+              </sup>
+            );
+            last = localIdx + citStr.length;
+          }
+          if (last < node.length) parts.push(node.slice(last));
+          return parts;
+        }
+  
+        // For non‑string children, recurse (preserves <em>, <strong>, links, etc.)
+        if (React.isValidElement(node) && node.props?.children) {
+          const processed = React.Children.map(node.props.children, (child, i) =>
+            processNode(child, `${keyPrefix}-${i}`)
+          );
+          return React.cloneElement(node, { children: processed });
+        }
+  
+        return node; // element without children or unknown type
+      };
+  
+      const processedChildren = React.Children.map(props.children, (child, i) =>
+        processNode(child, `root-${i}`)
+      );
+  
+      // Render original element (p, li, …) with processed children
+      return <ElementComponent {...props}>{processedChildren}</ElementComponent>;
+    };
+  };  
 
   return (
     <div className="streaming-content" ref={contentRef}>
-      <CustomMarkdown
-        content={content}
-        isStreaming={isStreaming}
-        showSourcePopup={showSourcePopup}
-        hideSourcePopup={hideSourcePopup}
-      />
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw]}
+        components={{
+          p: renderWithSourceRefs('p'),
+          li: renderWithSourceRefs('li'),
+          // Add other block elements if citations might appear directly within them
+          // blockquote: renderWithSourceRefs('blockquote'),
+          // div: renderWithSourceRefs('div'), // Be cautious with generic divs
+          code({node, inline, className, children, ...props}) {
+            const match = /language-(\w+)/.exec(className || '');
+            return !inline ? (
+              <div className="code-block-container">
+                <div className="code-block-header">
+                  <span>{match ? match[1] : 'code'}</span>
+                </div>
+                <SyntaxHighlighter
+                  style={atomDark}
+                  language={match ? match[1] : 'text'}
+                  PreTag="div"
+                  {...props}
+                >
+                  {String(children).replace(/\n$/, '')}
+                </SyntaxHighlighter>
+              </div>
+            ) : (
+              <code className={className} {...props}>
+                {children}
+              </code>
+            );
+          },
+          table({node, ...props}) {
+            return (
+              <div className="table-container">
+                <table {...props} />
+              </div>
+            );
+          },
+          a({node, children, href, ...props}) {
+            return (
+              <a 
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="markdown-link"
+                {...props}
+              >
+                {children}
+              </a>
+            );
+          },
+          blockquote({node, ...props}) {
+            return (
+              <blockquote className="markdown-blockquote" {...props} />
+            );
+          }
+        }}
+      >
+        {normalizedContent}
+      </ReactMarkdown>
     </div>
   );
 };

frontend/src/Components/AiComponents/Markdown/CustomMarkdown.js

@@ -1,489 +0,0 @@
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import '../ChatComponents/Streaming.css';
-import '../ChatComponents/SourceRef.css';
-
-// Complete custom markdown parser and renderer that respects Streaming.css
-const CustomMarkdown = ({ content, isStreaming, showSourcePopup, hideSourcePopup }) => {
-  const [parsedContent, setParsedContent] = useState([]);
-  
-  // Display content with cursor if streaming
-  const displayContent = isStreaming ? `${content}▌` : (content || '');
-  
-  // Normalize citations like [1,2] to [1][2]
-  const normalizeCitations = useCallback((text) => {
-    if (!text) return '';
-    const citationRegex = /\[(\d+(?:,\s*\d+)+)\]/g;
-    return text.replace(citationRegex, (match, capturedNumbers) => {
-      const numbers = capturedNumbers
-        .split(/,\s*/)
-        .map(numStr => numStr.trim())
-        .filter(Boolean);
-      if (numbers.length <= 1) return match;
-      return numbers.map(num => `[${num}]`).join('');
-    });
-  }, []);
-
-  const normalizedContent = useMemo(() => normalizeCitations(displayContent), [displayContent, normalizeCitations]);
-
-  // Citation component
-  const Citation = ({ number, showSourcePopup, hideSourcePopup, text }) => {
-    const getSentenceForCitation = () => {
-      const sentenceRegex = /[^.!?\n]+[.!?]+[\])'"`'"]*|[^.!?\n]+$/g;
-      const sentences = text.match(sentenceRegex) || [text];
-      
-      for (const sentence of sentences) {
-        if (sentence.includes(`[${number}]`)) {
-          return sentence.trim();
-        }
-      }
-      return '';
-    };
-
-    return (
-      <sup
-        className="source-reference"
-        onMouseEnter={(e) => {
-          if (showSourcePopup) {
-            const sentence = getSentenceForCitation();
-            showSourcePopup(number - 1, e.target, sentence);
-          }
-        }}
-        onMouseLeave={hideSourcePopup}
-      >
-        {number}
-      </sup>
-    );
-  };
-
-  // Parse inline markdown elements
-  const parseInline = useCallback((text) => {
-    if (!text) return null;
-
-    // Define regex patterns clearly
-    const TWO_SPACES = '  '; // Exactly 2 spaces (not 1, not 3, but 2!)
-    const lineBreakRegex = new RegExp(TWO_SPACES + '\\n', 'g');
-
-    const elements = [];
-    const patterns = [
-      // Bold + Italic
-      { regex: /\*\*\*(.+?)\*\*\*/g, handler: (m) => <strong key={m.index}><em>{parseInline(m[1])}</em></strong> },
-      { regex: /___(.+?)___/g, handler: (m) => <strong key={m.index}><em>{parseInline(m[1])}</em></strong> },
-      // Bold
-      { regex: /\*\*(.+?)\*\*/g, handler: (m) => <strong key={m.index}>{parseInline(m[1])}</strong> },
-      { regex: /__(.+?)__/g, handler: (m) => <strong key={m.index}>{parseInline(m[1])}</strong> },
-      // Italic
-      { regex: /\*([^*]+)\*/g, handler: (m) => <em key={m.index}>{parseInline(m[1])}</em> },
-      { regex: /_([^_]+)_/g, handler: (m) => <em key={m.index}>{parseInline(m[1])}</em> },
-      // Strikethrough
-      { regex: /~~(.+?)~~/g, handler: (m) => <del key={m.index}>{parseInline(m[1])}</del> },
-      // Inline code (preserve all spaces)
-      { regex: /`([^`]+)`/g, handler: (m) => {
-        // Preserve all whitespace in inline code
-        const codeContent = m[1].replace(/ /g, '\u00A0'); // Replace spaces with non-breaking spaces
-        return <code key={m.index}>{codeContent}</code>;
-      }},
-      // Images
-      { regex: /!\[([^\]]*)\]\(([^)]+)\)/g, handler: (m) => <img key={m.index} src={m[2]} alt={m[1]} style={{ maxWidth: '100%' }} /> },
-      // Links
-      { regex: /\[([^\]]+)\]\(([^)]+)\)/g, handler: (m) => (
-        <a key={m.index} href={m[2]} target="_blank" rel="noopener noreferrer" className="markdown-link">
-          {parseInline(m[1])}
-        </a>
-      )},
-      // Citations
-      { regex: /\[(\d+)\]/g, handler: (m) => (
-        <Citation 
-          key={m.index}
-          number={parseInt(m[1], 10)}
-          showSourcePopup={showSourcePopup}
-          hideSourcePopup={hideSourcePopup}
-          text={text}
-        />
-      )},
-      // Line breaks
-      { 
-        regex: lineBreakRegex,
-        handler: (m) => <br key={m.index} /> 
-      },
-    ];
-
-    // Apply patterns in order
-    let processedText = text;
-    const replacements = [];
-
-    for (const pattern of patterns) {
-      let match;
-      pattern.regex.lastIndex = 0;
-      while ((match = pattern.regex.exec(text))) {
-        replacements.push({
-          start: match.index,
-          end: match.index + match[0].length,
-          element: pattern.handler(match),
-          priority: patterns.indexOf(pattern)
-        });
-      }
-    }
-
-    // Sort replacements by position and priority
-    replacements.sort((a, b) => {
-      if (a.start !== b.start) return a.start - b.start;
-      return a.priority - b.priority;
-    });
-
-    // Build result without overlapping replacements
-    let lastEnd = 0;
-    const used = new Set();
-
-    for (const replacement of replacements) {
-      // Skip if this overlaps with an already used replacement
-      let overlaps = false;
-      for (const usedRange of used) {
-        if (!(replacement.end <= usedRange.start || replacement.start >= usedRange.end)) {
-          overlaps = true;
-          break;
-        }
-      }
-
-      if (!overlaps) {
-        if (replacement.start > lastEnd) {
-          // Preserve spaces in text segments
-          const textSegment = processedText.substring(lastEnd, replacement.start);
-          elements.push(textSegment);
-        }
-        elements.push(replacement.element);
-        lastEnd = replacement.end;
-        used.add({ start: replacement.start, end: replacement.end });
-      }
-    }
-
-    if (lastEnd < processedText.length) {
-      // Preserve spaces in remaining text
-      elements.push(processedText.substring(lastEnd));
-    }
-
-    return elements.length > 0 ? elements : text;
-  }, [showSourcePopup, hideSourcePopup]);
-
-  // Parse code blocks separately to handle them properly
-  const extractCodeBlocks = useCallback((text) => {
-    const codeBlocks = [];
-    const placeholder = '___CODE_BLOCK_';
-    let counter = 0;
-    
-    // Replace code blocks with placeholders, preserve exact formatting
-    const textWithoutCode = text.replace(/```(\w*)\n([\s\S]*?)```/g, (match, lang, code) => {
-      const id = `${placeholder}${counter}___`;
-      // Preserve exact code content without any trimming
-      codeBlocks.push({ id, lang: lang || 'text', code: code.replace(/\n$/, '') }); // Only remove final newline
-      counter++;
-      return `\n${id}\n`;
-    });
-
-    return { textWithoutCode, codeBlocks };
-  }, []);
-
-  // Parse block-level elements
-  const parseBlocks = useCallback((text, codeBlocks = []) => {
-    if (!text) return [];
-
-    const blocks = [];
-    const lines = text.split('\n');
-    let i = 0;
-
-    while (i < lines.length) {
-      const line = lines[i];
-      const trimmedLine = line.trim();
-
-      // Skip empty lines
-      if (!trimmedLine) {
-        i++;
-        continue;
-      }
-
-      // Check for code block placeholder
-      const codeBlockMatch = line.match(/___CODE_BLOCK_(\d+)___/);
-      if (codeBlockMatch) {
-        const codeBlock = codeBlocks.find(cb => cb.id === line.trim());
-        if (codeBlock) {
-          blocks.push({
-            type: 'code',
-            lang: codeBlock.lang,
-            content: codeBlock.code
-          });
-          i++;
-          continue;
-        }
-      }
-
-      // Horizontal rule
-      if (/^[-*_]{3,}$/.test(trimmedLine)) {
-        blocks.push({ type: 'hr' });
-        i++;
-        continue;
-      }
-
-      // Headers
-      const headerMatch = line.match(/^(#{1,6})\s+(.+)$/);
-      if (headerMatch) {
-        blocks.push({
-          type: 'header',
-          level: headerMatch[1].length,
-          content: headerMatch[2]
-        });
-        i++;
-        continue;
-      }
-
-      // Blockquotes
-      if (line.startsWith('>')) {
-        const quoteLines = [line.substring(1).trim()];
-        i++;
-        while (i < lines.length && (lines[i].startsWith('>') || lines[i].trim() === '')) {
-          if (lines[i].startsWith('>')) {
-            quoteLines.push(lines[i].substring(1).trim());
-          } else if (lines[i].trim() === '' && i + 1 < lines.length && lines[i + 1].startsWith('>')) {
-            quoteLines.push('');
-          } else {
-            break;
-          }
-          i++;
-        }
-        blocks.push({
-          type: 'blockquote',
-          content: quoteLines.join('\n')
-        });
-        continue;
-      }
-
-      // Lists (unordered and ordered)
-      const unorderedMatch = line.match(/^([-*+])\s+(.+)$/);
-      const orderedMatch = line.match(/^(\d+)\.\s+(.+)$/);
-      
-      if (unorderedMatch || orderedMatch) {
-        const isOrdered = !!orderedMatch;
-        const items = [];
-        const listIndent = line.search(/\S/);
-        
-        while (i < lines.length) {
-          const currentLine = lines[i];
-          const currentIndent = currentLine.search(/\S/);
-          
-          if (currentIndent === -1) {
-            // Empty line, check if list continues
-            if (i + 1 < lines.length) {
-              const nextIndent = lines[i + 1].search(/\S/);
-              if (nextIndent >= listIndent && (lines[i + 1].match(/^[\s]*[-*+]\s+/) || lines[i + 1].match(/^[\s]*\d+\.\s+/))) {
-                i++;
-                continue;
-              }
-            }
-            break;
-          }
-
-          const itemMatch = isOrdered 
-            ? currentLine.match(/^(\s*)\d+\.\s+(.+)$/)
-            : currentLine.match(/^(\s*)[-*+]\s+(.+)$/);
-
-          if (itemMatch && currentIndent === listIndent) {
-            items.push({
-              content: itemMatch[2],
-              indent: 0
-            });
-            i++;
-          } else if (currentIndent > listIndent) {
-            // Continuation of previous item or nested list
-            if (items.length > 0) {
-              items[items.length - 1].content += '\n' + currentLine;
-            }
-            i++;
-          } else {
-            break;
-          }
-        }
-
-        blocks.push({
-          type: isOrdered ? 'ol' : 'ul',
-          items: items.map(item => ({
-            ...item,
-            content: item.content.trim()
-          }))
-        });
-        continue;
-      }
-
-      // Tables
-      if (i + 1 < lines.length && lines[i + 1].trim().match(/^[-:|]+$/)) {
-        const headerCells = line.split('|').map(cell => cell.trim()).filter(Boolean);
-        const alignmentLine = lines[i + 1];
-        const alignments = alignmentLine.split('|').map(cell => {
-          const trimmed = cell.trim();
-          if (trimmed.startsWith(':') && trimmed.endsWith(':')) return 'center';
-          if (trimmed.endsWith(':')) return 'right';
-          return 'left';
-        }).filter((_, index) => index < headerCells.length);
-
-        const rows = [];
-        i += 2;
-        
-        while (i < lines.length && lines[i].includes('|')) {
-          const cells = lines[i].split('|').map(cell => cell.trim()).filter(Boolean);
-          if (cells.length > 0) {
-            rows.push(cells);
-          }
-          i++;
-        }
-
-        blocks.push({
-          type: 'table',
-          headers: headerCells,
-          alignments,
-          rows
-        });
-        continue;
-      }
-
-      // Paragraph
-      const paragraphLines = [line];
-      i++;
-      while (i < lines.length && lines[i].trim() !== '' && 
-             !lines[i].match(/^#{1,6}\s/) && 
-             !lines[i].match(/^[-*+]\s/) &&
-             !lines[i].match(/^\d+\.\s/) &&
-             !lines[i].startsWith('>') &&
-             !lines[i].match(/^[-*_]{3,}$/) &&
-             !lines[i].match(/___CODE_BLOCK_\d+___/)) {
-        paragraphLines.push(lines[i]);
-        i++;
-      }
-
-      blocks.push({
-        type: 'paragraph',
-        content: paragraphLines.join('\n')
-      });
-    }
-
-    return blocks;
-  }, []);
-
-  // Render a single block
-  const renderBlock = useCallback((block, index) => {
-    switch (block.type) {
-      case 'header':
-        const HeaderTag = `h${block.level}`;
-        return <HeaderTag key={index}>{parseInline(block.content)}</HeaderTag>;
-
-      case 'paragraph':
-        return <p key={index}>{parseInline(block.content)}</p>;
-
-      case 'blockquote':
-        const { textWithoutCode, codeBlocks } = extractCodeBlocks(block.content);
-        const quotedBlocks = parseBlocks(textWithoutCode, codeBlocks);
-        return (
-          <blockquote key={index} className="markdown-blockquote">
-            {quotedBlocks.map((b, i) => renderBlock(b, i))}
-          </blockquote>
-        );
-
-      case 'code':
-        return (
-          <div key={index} className="code-block-container">
-            <div className="code-block-header">
-              <span>{block.lang}</span>
-            </div>
-            <SyntaxHighlighter
-              style={atomDark}
-              language={block.lang}
-              PreTag="div"
-              customStyle={{ margin: 0 }}
-            >
-              {block.content}
-            </SyntaxHighlighter>
-          </div>
-        );
-
-      case 'ul':
-      case 'ol':
-        const ListTag = block.type === 'ol' ? 'ol' : 'ul';
-        return (
-          <ListTag key={index}>
-            {block.items.map((item, i) => {
-              // Handle nested content properly
-              if (item.content.includes('\n')) {
-                // For multi-line items, parse as nested markdown
-                const { textWithoutCode, codeBlocks } = extractCodeBlocks(item.content);
-                const nestedBlocks = parseBlocks(textWithoutCode, codeBlocks);
-                return (
-                  <li key={i}>
-                    {nestedBlocks.map((b, j) => renderBlock(b, `${i}-${j}`))}
-                  </li>
-                );
-              }
-              // For single-line items, just parse inline
-              return <li key={i}>{parseInline(item.content)}</li>;
-            })}
-          </ListTag>
-        );
-
-      case 'table':
-        return (
-          <div key={index} className="table-container">
-            <table>
-              <thead>
-                <tr>
-                  {block.headers.map((header, i) => (
-                    <th key={i} style={{ textAlign: block.alignments[i] || 'left' }}>
-                      {parseInline(header)}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {block.rows.map((row, rowIndex) => (
-                  <tr key={rowIndex}>
-                    {row.map((cell, cellIndex) => (
-                      <td key={cellIndex} style={{ textAlign: block.alignments[cellIndex] || 'left' }}>
-                        {parseInline(cell)}
-                      </td>
-                    ))}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        );
-
-      case 'hr':
-        return <hr key={index} />;
-
-      default:
-        return null;
-    }
-  }, [parseInline, extractCodeBlocks, parseBlocks]);
-
-  // Main parse function
-  const parseMarkdown = useCallback((text) => {
-    if (!text) return [];
-    
-    // Extract code blocks first
-    const { textWithoutCode, codeBlocks } = extractCodeBlocks(text);
-    
-    // Parse blocks
-    const blocks = parseBlocks(textWithoutCode, codeBlocks);
-    
-    // Render blocks
-    return blocks.map((block, index) => renderBlock(block, index));
-  }, [extractCodeBlocks, parseBlocks, renderBlock]);
-
-  // Parse markdown content whenever it changes
-  useEffect(() => {
-    const parsed = parseMarkdown(normalizedContent);
-    setParsedContent(parsed);
-  }, [normalizedContent, parseMarkdown]);
-
-  // Return just the parsed content
-  return <>{parsedContent}</>;
-};
-
-export default CustomMarkdown;

frontend/src/Components/AiComponents/Markdown/TestMarkdown.js

@@ -1,120 +0,0 @@
-import CustomMarkdown from './CustomMarkdown';
-
-const SpacePreservationTest = () => {
-  const testContent = `# Space Preservation Test
-
-## Inline Code Spacing
-
-Here are examples with multiple spaces:
-
-- One space: \`a b\`
-- Two spaces: \`a  b\`
-- Three spaces: \`a   b\`
-- Four spaces: \`a    b\`
-- Tab character: \`a	b\`
-- Mixed: \`function  (  x,   y   )\`
-
-## Code Block Indentation
-
-\`\`\`python
-def example():
-    # 4 spaces indentation
-    if True:
-        # 8 spaces indentation
-        print("Hello")
-        
-    # Empty line above preserved
-    for i in range(5):
-        # Aligned comments
-        print(i)  # End of line comment
-\`\`\`
-
-## ASCII Art Test
-
-\`\`\`
-  _____ 
- / ___ \\
-| |   | |
-| |___| |
- \\_____/
-    
-    Spacing matters!
-\`\`\`
-
-## Table Alignment
-
-\`\`\`
-Name      Age    City
-----      ---    ----
-Alice     25     NYC
-Bob       30     LA
-Charlie   35     Chicago
-\`\`\`
-
-## Inline Examples
-
-The function \`map(  x => x * 2  )\` has spaces around the arrow.
-
-Configuration: \`{ indent:  4,  tabs:  false }\``;
-
-  return (
-    <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
-      <h1>Space Preservation Test</h1>
-      
-      <div style={{ 
-        marginBottom: '20px', 
-        padding: '15px', 
-        background: '#e3f2fd', 
-        borderRadius: '8px' 
-      }}>
-        <p><strong>What to check:</strong></p>
-        <ul>
-          <li>Inline code should preserve exact spacing</li>
-          <li>Code blocks should maintain indentation</li>
-          <li>ASCII art should be properly aligned</li>
-          <li>Empty lines in code blocks should be preserved</li>
-        </ul>
-      </div>
-
-      <div style={{ 
-        border: '2px solid #333', 
-        borderRadius: '8px', 
-        background: 'white',
-        padding: '20px'
-      }}>
-        <CustomMarkdown
-          content={testContent}
-          isStreaming={false}
-          showSourcePopup={() => {}}
-          hideSourcePopup={() => {}}
-        />
-      </div>
-
-      <div style={{ 
-        marginTop: '20px',
-        padding: '15px', 
-        background: '#f5f5f5', 
-        borderRadius: '8px',
-        fontFamily: 'monospace',
-        fontSize: '14px'
-      }}>
-        <p><strong>Debug: Raw content preview</strong></p>
-        <pre style={{ 
-          background: '#333', 
-          color: '#fff', 
-          padding: '10px', 
-          borderRadius: '4px',
-          overflow: 'auto',
-          whiteSpace: 'pre'
-        }}>
-{`'a b'    = one space
-'a  b'   = two spaces  
-'a   b'  = three spaces
-'a    b' = four spaces`}
-        </pre>
-      </div>
-    </div>
-  );
-};
-
-export default SpacePreservationTest;