In chat template, display preformatted/code snippet outputs sensibly (#6137)

Author: SteveSandersonMS

src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web-CSharp/Components/Pages/Chat/ChatMessageItem.razor.css

@@ -110,3 +110,11 @@
 ::deep th, ::deep tr:nth-child(even) {
     background-color: rgba(0, 0, 0, 0.05);
 }
+
+::deep pre > code {
+    background-color: white;
+    display: block;
+    padding: 0.5rem 1rem;
+    margin: 1rem 0;
+    overflow-x: auto;
+}

src/ProjectTemplates/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web-CSharp/wwwroot/app.js

@@ -11,6 +11,14 @@ customElements.define('assistant-message', class extends HTMLElement {
             newValue = newValue.replace(/<citation.*?<\/citation>/gs, '');
             const elements = marked.parse(newValue.replace(/</g, '&lt;'));
             this.innerHTML = purify.sanitize(elements, { KEEP_CONTENT: false });
+
+            // Within text nodes, unescape the &lt; entities otherwise it will be displayed
+            // to the user as escaped if the element uses preformatted styling. This is safe
+            // because we're only updating the text content of text nodes.
+            const walker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT);
+            while (walker.nextNode()) {
+                walker.currentNode.textContent = walker.currentNode.textContent.replace(/&lt;/g, '<');
+            }
         }
     }
 });

test/ProjectTemplates/Microsoft.Extensions.AI.Templates.IntegrationTests/Snapshots/aichatweb.Basic.verified/aichatweb/Components/Pages/Chat/ChatMessageItem.razor.css

@@ -110,3 +110,11 @@
 ::deep th, ::deep tr:nth-child(even) {
     background-color: rgba(0, 0, 0, 0.05);
 }
+
+::deep pre > code {
+    background-color: white;
+    display: block;
+    padding: 0.5rem 1rem;
+    margin: 1rem 0;
+    overflow-x: auto;
+}

test/ProjectTemplates/Microsoft.Extensions.AI.Templates.IntegrationTests/Snapshots/aichatweb.Basic.verified/aichatweb/wwwroot/app.js

@@ -11,6 +11,14 @@ customElements.define('assistant-message', class extends HTMLElement {
             newValue = newValue.replace(/<citation.*?<\/citation>/gs, '');
             const elements = marked.parse(newValue.replace(/</g, '&lt;'));
             this.innerHTML = purify.sanitize(elements, { KEEP_CONTENT: false });
+
+            // Within text nodes, unescape the &lt; entities otherwise it will be displayed
+            // to the user as escaped if the element uses preformatted styling. This is safe
+            // because we're only updating the text content of text nodes.
+            const walker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT);
+            while (walker.nextNode()) {
+                walker.currentNode.textContent = walker.currentNode.textContent.replace(/&lt;/g, '<');
+            }
         }
     }
 });