use pre instead of innerHTML

commit111 · commit111 · commit a7939a4578a4 · 2025-08-28T13:13:59.000-07:00
diff --git a/samples/agentic-strands/app/index.html b/samples/agentic-strands/app/index.html
@@ -57,6 +57,10 @@
             color: #888;
             font-style: italic;
         }
+        pre {
+            font-family: Arial, sans-serif;
+            white-space: pre-wrap;
+        }
     </style>
 </head>
 <body>
@@ -88,7 +92,10 @@ <h1>Library Assistant AI</h1>
                     if (isUser) {
                         messageDiv.textContent = text;
                     } else {
-                        messageDiv.innerHTML = text;
+                        // Use a pre element to preserve new line formatting in agent messages
+                        const pre = document.createElement('pre');
+                        pre.textContent = text;
+                        messageDiv.appendChild(pre);
                     }
                     chatContainer.appendChild(messageDiv);
                     chatContainer.scrollTop = chatContainer.scrollHeight;
@@ -123,7 +130,7 @@ <h1>Library Assistant AI</h1>
                         // Remove loading indicator
                         chatContainer.removeChild(loadingDiv);
                         
-                        const agentResponse = data.response.replace(/\n/g, '<br>');
+                        const agentResponse = data.response;
                         // Display the agent's response
                         addMessage(agentResponse, false);
 
