Highlighintg works now perfectly!

backend/app.py

@@ -296,7 +296,15 @@ Return a list of chunks with topic, start_phrase, and end_phrase for each."""
         positioned_chunks = []
         for chunk in chunks:
             start_pos = fuzzy_find(page_markdown, chunk.start_phrase)
-            end_pos = fuzzy_find(page_markdown, chunk.end_phrase, start_pos or 0)
+            end_phrase_start = fuzzy_find(page_markdown, chunk.end_phrase, start_pos or 0)
+            # Add the length of the end_phrase plus a bit more to include punctuation
+            if end_phrase_start is not None:
+                end_pos = end_phrase_start + len(chunk.end_phrase)
+                # Try to include punctuation that might follow
+                if end_pos < len(page_markdown) and page_markdown[end_pos] in '.!?;:,':
+                    end_pos += 1
+            else:
+                end_pos = None
             
             if start_pos is not None:
                 positioned_chunks.append({
@@ -367,7 +375,15 @@ Return a list of chunks with topic, start_phrase, and end_phrase for each."""
         positioned_chunks = []
         for chunk in chunks:
             start_pos = fuzzy_find(page_markdown, chunk.start_phrase)
-            end_pos = fuzzy_find(page_markdown, chunk.end_phrase, start_pos or 0)
+            end_phrase_start = fuzzy_find(page_markdown, chunk.end_phrase, start_pos or 0)
+            # Add the length of the end_phrase plus a bit more to include punctuation
+            if end_phrase_start is not None:
+                end_pos = end_phrase_start + len(chunk.end_phrase)
+                # Try to include punctuation that might follow
+                if end_pos < len(page_markdown) and page_markdown[end_pos] in '.!?;:,':
+                    end_pos += 1
+            else:
+                end_pos = None
             
             if start_pos is not None:
                 positioned_chunks.append({

frontend/package-lock.json

@@ -19,6 +19,7 @@
         "react-pdf": "^10.0.1",
         "react-router-dom": "^7.7.0",
         "rehype-katex": "^7.0.1",
+        "rehype-raw": "^7.0.0",
         "remark-math": "^6.0.0",
         "tailwindcss": "^4.1.11"
       },
@@ -2918,6 +2919,31 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-raw": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.1.0.tgz",
+      "integrity": "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "hast-util-to-parse5": "^8.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "parse5": "^7.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
@@ -2945,6 +2971,35 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-parse5": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz",
+      "integrity": "sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-parse5/node_modules/property-information": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/hast-util-to-text": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
@@ -3001,6 +3056,16 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4705,6 +4770,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/rehype-raw": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-raw": "^9.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-math": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/remark-math/-/remark-math-6.0.0.tgz",

frontend/package.json

@@ -21,6 +21,7 @@
     "react-pdf": "^10.0.1",
     "react-router-dom": "^7.7.0",
     "rehype-katex": "^7.0.1",
+    "rehype-raw": "^7.0.0",
     "remark-math": "^6.0.0",
     "tailwindcss": "^4.1.11"
   },

frontend/src/components/DocumentProcessor.jsx

@@ -1,11 +1,38 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
+import rehypeRaw from 'rehype-raw';
 import 'katex/dist/katex.min.css';
 
-// Let's go back to the simple approach: render normally and add a simple overlay for chunks
-// This avoids the complexity of trying to match text content
+// Simple function to highlight current chunk in markdown before rendering
+const highlightChunkInMarkdown = (markdown, chunks, currentChunkIndex) => {
+    if (!chunks || !chunks[currentChunkIndex] || !markdown) {
+        return markdown;
+    }
+    
+    const chunk = chunks[currentChunkIndex];
+    const chunkText = markdown.slice(chunk.start_position, chunk.end_position);
+    
+    // Debug logging
+    console.log('Chunk debugging:', {
+        chunkIndex: currentChunkIndex,
+        startPos: chunk.start_position,
+        endPos: chunk.end_position,
+        chunkTextLength: chunkText.length,
+        chunkTextPreview: chunkText.substring(0, 50) + '...',
+        beforeText: markdown.slice(Math.max(0, chunk.start_position - 20), chunk.start_position),
+        afterText: markdown.slice(chunk.end_position, chunk.end_position + 20)
+    });
+    
+    // Use div wrapper that extends into document margins with left border and fade-in animation
+    const highlightedChunk = `<div style="background-color: rgba(255, 214, 100, 0.15); border-left: 4px solid rgba(156, 163, 175, 0.5); padding: 0.75rem; margin: 0.5rem -1.5rem; font-size: 0.875rem; line-height: 1.5; color: rgb(55, 65, 81); animation: fadeInHighlight 200ms ease-out;">${chunkText}</div>`;
+    
+    // Replace the original chunk with the highlighted version
+    return markdown.slice(0, chunk.start_position) + 
+           highlightedChunk + 
+           markdown.slice(chunk.end_position);
+};
 
 function DocumentProcessor() {
     const fileInputRef = useRef(null);
@@ -480,10 +507,32 @@ function DocumentProcessor() {
                 
                 {/* Content */}
                 <div className="flex-1 px-6 pt-6 pb-8 overflow-y-auto">
-                    <div className="prose prose-sm max-w-none">
+                    <style>
+                        {`
+                            @keyframes fadeInHighlight {
+                                0% {
+                                    background-color: rgba(255, 214, 100, 0);
+                                    border-left-color: rgba(156, 163, 175, 0);
+                                    transform: translateX(-10px);
+                                    opacity: 0;
+                                }
+                                100% {
+                                    background-color: rgba(255, 214, 100, 0.15);
+                                    border-left-color: rgba(156, 163, 175, 0.5);
+                                    transform: translateX(0);
+                                    opacity: 1;
+                                }
+                            }
+                        `}
+                    </style>
+                    <div className="prose prose-sm max-w-none" style={{
+                        fontSize: '0.875rem',
+                        lineHeight: '1.5',
+                        color: 'rgb(55, 65, 81)'
+                    }}>
                         <ReactMarkdown
                             remarkPlugins={[remarkMath]}
-                            rehypePlugins={[rehypeKatex]}
+                            rehypePlugins={[rehypeRaw, rehypeKatex]}
                             components={{
                                 h1: ({ children }) => <h1 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '1rem', color: '#1a202c' }}>{children}</h1>,
                                 h2: ({ children }) => <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '0.75rem', marginTop: '1.5rem', color: '#1a202c' }}>{children}</h2>,
@@ -504,10 +553,15 @@ function DocumentProcessor() {
                                     <pre style={{ backgroundColor: '#f3f4f6', padding: '0.75rem', borderRadius: '0.375rem', overflowX: 'auto', margin: '0.75rem 0' }}>
                                         <code style={{ fontSize: '0.75rem', fontFamily: 'monospace' }}>{children}</code>
                                     </pre>,
+                                div: ({ children, style }) => (
+                                    <div style={style}>
+                                        {children}
+                                    </div>
+                                ),
                                 img: ({ src, alt }) => <ImageComponent src={src} alt={alt} />
                             }}
                         >
-                            {documentData.markdown}
+                            {highlightChunkInMarkdown(documentData.markdown, documentData.chunks, currentChunkIndex)}
                         </ReactMarkdown>
                     </div>
                 </div>
@@ -601,7 +655,7 @@ function DocumentProcessor() {
                             <div className="prose prose-sm max-w-none">
                                 <ReactMarkdown
                                     remarkPlugins={[remarkMath]}
-                                    rehypePlugins={[rehypeKatex]}
+                                    rehypePlugins={[rehypeRaw, rehypeKatex]}
                                     components={{
                                         h1: ({ children }) => <h1 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '0.75rem', color: '#1a202c' }}>{children}</h1>,
                                         h2: ({ children }) => <h2 style={{ fontSize: '1.125rem', fontWeight: 'bold', marginBottom: '0.5rem', marginTop: '1rem', color: '#1a202c' }}>{children}</h2>,
@@ -685,7 +739,7 @@ function DocumentProcessor() {
                                                 <div className="prose prose-sm max-w-none">
                                                     <ReactMarkdown
                                                         remarkPlugins={[remarkMath]}
-                                                        rehypePlugins={[rehypeKatex]}
+                                                        rehypePlugins={[rehypeRaw, rehypeKatex]}
                                                         components={{
                                                             p: ({ children }) => <p className="mb-2 text-gray-800 leading-relaxed">{children}</p>,
                                                             ul: ({ children }) => <ul className="mb-2 ml-4 list-disc">{children}</ul>,
@@ -715,7 +769,7 @@ function DocumentProcessor() {
                                                 <div className="prose prose-sm max-w-none">
                                                     <ReactMarkdown
                                                         remarkPlugins={[remarkMath]}
-                                                        rehypePlugins={[rehypeKatex]}
+                                                        rehypePlugins={[rehypeRaw, rehypeKatex]}
                                                         components={{
                                                             p: ({ children }) => <p className="mb-2 text-gray-800 leading-relaxed">{children}</p>,
                                                             ul: ({ children }) => <ul className="mb-2 ml-4 list-disc">{children}</ul>,
@@ -749,7 +803,7 @@ function DocumentProcessor() {
                                             <div className="prose prose-sm max-w-none">
                                                 <ReactMarkdown
                                                     remarkPlugins={[remarkMath]}
-                                                    rehypePlugins={[rehypeKatex]}
+                                                    rehypePlugins={[rehypeRaw, rehypeKatex]}
                                                     components={{
                                                         p: ({ children }) => <p className="mb-2 text-gray-800 leading-relaxed">{children}</p>,
                                                         ul: ({ children }) => <ul className="mb-2 ml-4 list-disc">{children}</ul>,