feat(chat): add Markdown rendering for RAG chat messages

src/main/webapp/WEB-INF/orig/view/chat/chat.jsp

@@ -159,6 +159,8 @@ ${fe:html(true)}
 	<script type="text/javascript" src="${fe:url('/js/jquery-3.7.1.min.js')}"></script>
 	<script type="text/javascript" src="${fe:url('/js/popper.min.js')}"></script>
 	<script type="text/javascript" src="${fe:url('/js/bootstrap.min.js')}"></script>
+	<script type="text/javascript" src="${fe:url('/js/marked.min.js')}"></script>
+	<script type="text/javascript" src="${fe:url('/js/purify.min.js')}"></script>
 	<script type="text/javascript" src="${fe:url('/js/chat.js')}"></script>
 	<script type="text/javascript">
 		$(function() {

src/main/webapp/WEB-INF/view/chat/chat.jsp

@@ -159,6 +159,8 @@ ${fe:html(true)}
 	<script type="text/javascript" src="${fe:url('/js/jquery-3.7.1.min.js')}"></script>
 	<script type="text/javascript" src="${fe:url('/js/popper.min.js')}"></script>
 	<script type="text/javascript" src="${fe:url('/js/bootstrap.min.js')}"></script>
+	<script type="text/javascript" src="${fe:url('/js/marked.min.js')}"></script>
+	<script type="text/javascript" src="${fe:url('/js/purify.min.js')}"></script>
 	<script type="text/javascript" src="${fe:url('/js/chat.js')}"></script>
 	<script type="text/javascript">
 		$(function() {

src/main/webapp/css/chat.css

@@ -936,6 +936,26 @@
     margin-bottom: 0;
 }
 
+/* Headings in messages */
+.message-content h1, .message-content h2, .message-content h3,
+.message-content h4, .message-content h5, .message-content h6 {
+    margin: 0.75rem 0 0.375rem; font-weight: 600; line-height: 1.3; color: #172b4d;
+}
+.message-content h1 { font-size: 1.25rem; }
+.message-content h2 { font-size: 1.125rem; }
+.message-content h3 { font-size: 1rem; }
+.message-content h1:first-child, .message-content h2:first-child,
+.message-content h3:first-child { margin-top: 0; }
+
+/* Blockquote, Table, HR, Link styles */
+.message-content blockquote { border-left: 3px solid #dfe1e6; margin: 0.5rem 0; padding: 0.25rem 0.75rem; color: #6b778c; }
+.message-content table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; font-size: 0.875rem; }
+.message-content th, .message-content td { border: 1px solid #dfe1e6; padding: 0.375rem 0.625rem; text-align: left; }
+.message-content th { background-color: #f4f5f7; font-weight: 600; }
+.message-content hr { border: none; border-top: 1px solid #dfe1e6; margin: 0.75rem 0; }
+.message-content a { color: #0052cc; text-decoration: none; }
+.message-content a:hover { text-decoration: underline; }
+
 /* ============================================
    Accessibility focus styles
    ============================================ */

src/main/webapp/js/chat.js

@@ -350,7 +350,7 @@ var FessChat = (function() {
             if (data.content) {
                 responseContent += data.content;
                 if (messageElement) {
-                    messageElement.find('.message-text').text(responseContent);
+                    messageElement.find('.message-text').html(renderMarkdown(responseContent));
                     scrollToBottom();
                 }
             }
@@ -844,6 +844,53 @@ var FessChat = (function() {
         elements.chatMessages.scrollTop(elements.chatMessages[0].scrollHeight);
     }
 
+    /**
+     * Render Markdown text to sanitized HTML.
+     * Policy is aligned with server-side MarkdownRenderer (OWASP sanitizer).
+     */
+    var markdownDomPurifyInitialized = false;
+    var markdownSanitizeConfig = {
+        ALLOWED_TAGS: ['h1','h2','h3','h4','h5','h6',
+                       'p','br','hr',
+                       'strong','em','b','i','u','s','del',
+                       'ul','ol','li',
+                       'code','pre',
+                       'blockquote',
+                       'table','thead','tbody','tr','th','td',
+                       'a','img',
+                       'span','div'],
+        ALLOWED_ATTR: ['href','src','alt','title','class'],
+        ALLOW_DATA_ATTR: false,
+        ALLOWED_URI_REGEXP: /^https?:\/\//i
+    };
+    function initMarkdownSanitizer() {
+        if (markdownDomPurifyInitialized || typeof DOMPurify === 'undefined') return;
+        // Register hook once: add rel="nofollow" to links, restrict class to code/pre/span/div
+        // (matches server-side requireRelNofollowOnLinks and allowAttributes("class").onElements(...))
+        DOMPurify.addHook('afterSanitizeAttributes', function(node) {
+            if (node.tagName === 'A' && node.hasAttribute('href')) {
+                node.setAttribute('rel', 'nofollow');
+            }
+            if (node.hasAttribute('class')) {
+                var tag = node.tagName;
+                if (tag !== 'CODE' && tag !== 'PRE' && tag !== 'SPAN' && tag !== 'DIV') {
+                    node.removeAttribute('class');
+                }
+            }
+        });
+        markdownDomPurifyInitialized = true;
+    }
+    function renderMarkdown(text) {
+        if (!text) return '';
+        if (typeof marked === 'undefined' || typeof DOMPurify === 'undefined') {
+            return escapeHtml(text);
+        }
+        initMarkdownSanitizer();
+        // breaks: true to match server-side softbreak("<br/>")
+        var html = marked.parse(text, { gfm: true, breaks: true });
+        return DOMPurify.sanitize(html, markdownSanitizeConfig);
+    }
+
     /**
      * Escape HTML characters
      */