Improve chatbot response formatting with rich text rendering and proper typography (#67)

* Initial plan

* Implement rich text formatting for chatbot responses

Co-authored-by: sethmcknight <[email protected]>

* Fix XSS vulnerability and improve markdown parsing security

Co-authored-by: sethmcknight <[email protected]>

* Remove trailing whitespace to fix pre-commit hook

Co-authored-by: sethmcknight <[email protected]>

* Improve code quality: fix header ordering, RegExp efficiency, and remove redundant CSS

Co-authored-by: sethmcknight <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: sethmcknight <[email protected]>

static/chat.css

@@ -166,10 +166,103 @@
 }
 
 .message-text {
-    line-height: 1.5;
+    line-height: 1.6;
+    margin-bottom: 0;
+    text-align: left;
+}
+
+/* Rich text formatting for assistant messages */
+
+.message-text h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #1e293b;
+    margin: 1.25rem 0 0.75rem 0;
+    line-height: 1.3;
+}
+
+.message-text h1:first-child {
+    margin-top: 0;
+}
+
+.message-text h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #1e293b;
+    margin: 1rem 0 0.5rem 0;
+    line-height: 1.3;
+}
+
+.message-text h2:first-child {
+    margin-top: 0;
+}
+
+.message-text h3 {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: #334155;
+    margin: 0.75rem 0 0.5rem 0;
+    line-height: 1.3;
+}
+
+.message-text h3:first-child {
+    margin-top: 0;
+}
+
+.message-text p {
+    margin: 0.75rem 0;
+    color: #1e293b;
+    line-height: 1.6;
+}
+
+.message-text p:first-child {
+    margin-top: 0;
+}
+
+.message-text p:last-child {
+    margin-bottom: 0;
+}
+
+.message-text ul,
+.message-text ol {
+    margin: 0.75rem 0;
+    padding-left: 1.5rem;
+    color: #1e293b;
+}
+
+.message-text ul:first-child,
+.message-text ol:first-child {
+    margin-top: 0;
+}
+
+.message-text ul:last-child,
+.message-text ol:last-child {
     margin-bottom: 0;
 }
 
+.message-text li {
+    margin: 0.25rem 0;
+    line-height: 1.5;
+}
+
+.message-text ul li {
+    list-style-type: disc;
+}
+
+.message-text ol li {
+    list-style-type: decimal;
+}
+
+.message-text strong {
+    font-weight: 600;
+    color: #0f172a;
+}
+
+.message-text em {
+    font-style: italic;
+    color: #334155;
+}
+
 .message-sources {
     margin-top: 1rem;
     padding-top: 1rem;

static/js/chat.js

@@ -1158,7 +1158,13 @@ class ChatInterface {
 
         const textDiv = document.createElement('div');
         textDiv.className = 'message-text';
-        textDiv.textContent = text;
+
+        // Format assistant responses with markdown rendering for better readability
+        if (sender === 'assistant') {
+            textDiv.innerHTML = this.formatMarkdown(text);
+        } else {
+            textDiv.textContent = text;
+        }
 
         contentDiv.appendChild(textDiv);
 
@@ -1450,6 +1456,162 @@ class ChatInterface {
         return div.innerHTML;
     }
 
+    /**
+     * Format markdown text for better readability in chat responses
+     * Safely converts markdown to HTML while preventing XSS attacks
+     */
+    formatMarkdown(text) {
+        if (!text) return '';
+
+        // First escape ALL HTML to prevent XSS - this is critical for security
+        let escapedText = this.escapeHtml(text);
+
+        // Now safely convert markdown formatting to HTML
+        // Process line by line to maintain proper structure
+        const lines = escapedText.split('\n');
+        const processedLines = [];
+        let inList = false;
+        let listType = '';
+
+        for (let i = 0; i < lines.length; i++) {
+            let line = lines[i];
+            const trimmedLine = line.trim();
+
+            // Skip empty lines for now - we'll handle them in paragraph processing
+            if (!trimmedLine) {
+                processedLines.push('');
+                continue;
+            }
+
+            // Process headers (must be at start of line) - check from least to most specific
+            if (trimmedLine.match(/^# (.+)$/)) {
+                if (inList) {
+                    processedLines.push(`</${listType}>`);
+                    inList = false;
+                    listType = '';
+                }
+                const headerText = trimmedLine.replace(/^# /, '');
+                processedLines.push(`<h1>${headerText}</h1>`);
+                continue;
+            } else if (trimmedLine.match(/^## (.+)$/)) {
+                if (inList) {
+                    processedLines.push(`</${listType}>`);
+                    inList = false;
+                    listType = '';
+                }
+                const headerText = trimmedLine.replace(/^## /, '');
+                processedLines.push(`<h2>${headerText}</h2>`);
+                continue;
+            } else if (trimmedLine.match(/^### (.+)$/)) {
+                if (inList) {
+                    processedLines.push(`</${listType}>`);
+                    inList = false;
+                    listType = '';
+                }
+                const headerText = trimmedLine.replace(/^### /, '');
+                processedLines.push(`<h3>${headerText}</h3>`);
+                continue;
+            }
+
+            // Process list items
+            const bulletMatch = trimmedLine.match(/^[-*+]\s+(.+)$/);
+            const numberMatch = trimmedLine.match(/^\d+\.\s+(.+)$/);
+
+            if (bulletMatch) {
+                if (!inList || listType !== 'ul') {
+                    if (inList) processedLines.push(`</${listType}>`);
+                    processedLines.push('<ul>');
+                    inList = true;
+                    listType = 'ul';
+                }
+                let listContent = bulletMatch[1];
+                // Apply inline formatting to list content
+                listContent = this.applyInlineFormatting(listContent);
+                processedLines.push(`<li>${listContent}</li>`);
+                continue;
+            } else if (numberMatch) {
+                if (!inList || listType !== 'ol') {
+                    if (inList) processedLines.push(`</${listType}>`);
+                    processedLines.push('<ol>');
+                    inList = true;
+                    listType = 'ol';
+                }
+                let listContent = numberMatch[1];
+                // Apply inline formatting to list content
+                listContent = this.applyInlineFormatting(listContent);
+                processedLines.push(`<li>${listContent}</li>`);
+                continue;
+            }
+
+            // Close any open list for regular text
+            if (inList) {
+                processedLines.push(`</${listType}>`);
+                inList = false;
+                listType = '';
+            }
+
+            // Apply inline formatting (bold, italic) to regular text
+            line = this.applyInlineFormatting(trimmedLine);
+            processedLines.push(line);
+        }
+
+        // Close any remaining open list
+        if (inList) {
+            processedLines.push(`</${listType}>`);
+        }
+
+        // Convert to paragraph structure
+        const content = processedLines.join('\n');
+        return this.convertToParagraphs(content);
+    }
+
+    /**
+     * Apply inline formatting (bold, italic) to text that's already HTML-escaped
+     */
+    applyInlineFormatting(text) {
+        // First handle bold formatting (**text**) and replace with a placeholder
+        const boldPlaceholder = '___BOLD_PLACEHOLDER___';
+        const boldMatches = [];
+        text = text.replace(/\*\*([^*]+)\*\*/g, (match, content) => {
+            boldMatches.push(`<strong>${content}</strong>`);
+            return `${boldPlaceholder}${boldMatches.length - 1}${boldPlaceholder}`;
+        });
+
+        // Now handle italic formatting (*text*) - won't conflict with bold placeholders
+        text = text.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+
+        // Restore bold formatting
+        const restoreRegex = new RegExp(`${boldPlaceholder}(\\d+)${boldPlaceholder}`, 'g');
+        text = text.replace(restoreRegex, (match, index) => boldMatches[parseInt(index)]);
+
+        return text;
+    }
+
+    /**
+     * Convert processed lines to proper paragraph structure
+     */
+    convertToParagraphs(content) {
+        // Split by double line breaks for paragraphs
+        const sections = content.split('\n\n');
+        const formattedSections = [];
+
+        for (const section of sections) {
+            const trimmed = section.trim();
+            if (!trimmed) continue;
+
+            // Check if this section contains only block elements (headers, lists)
+            if (trimmed.match(/^<(h[1-6]|ul|ol)/)) {
+                formattedSections.push(trimmed);
+            } else {
+                // Regular text content - wrap in paragraph and handle line breaks
+                const withBreaks = trimmed.replace(/\n/g, '<br>');
+                formattedSections.push(`<p>${withBreaks}</p>`);
+            }
+        }
+
+        return formattedSections.join('\n');
+    }
+
     /**
      * Render error message with retry functionality for source documents
      */