Update app.py

app.py

@@ -181,6 +181,13 @@ footer, #MainMenu { visibility: hidden; }
     margin-top: 4px; padding: 0 6px;
 }
 
+.answer-text {
+    white-space: pre-wrap;
+    word-break: break-word;
+    line-height: 1.75;
+    font-size: 0.95rem;
+}
+
 /* ── Source chunks ── */
 .sources-wrap {
     margin-top: 10px;
@@ -552,10 +559,12 @@ else:
         for msg in st.session_state.messages:
             ts = msg.get("time", "")
             if msg["role"] == "user":
+                import html as html_module
+                safe_user = html_module.escape(msg["content"])
                 chat_html += f"""
                 <div class="msg-user">
                     <div>
-                        <div class="bubble-user">{msg["content"]}</div>
+                        <div class="bubble-user">{safe_user}</div>
                         <div class="msg-meta" style="text-align:right;">YOU · {ts}</div>
                     </div>
                 </div>"""
@@ -564,17 +573,21 @@ else:
                 if msg.get("sources"):
                     chips = "".join(f'<span class="source-chip">📎 Chunk {i+1}</span>'
                                     for i, _ in enumerate(msg["sources"]))
-                    sources_html = f"""
-                    <div class="sources-wrap">
-                        <div class="source-label">SOURCE CHUNKS USED</div>
+                    sources_html = f"""<div class="sources-wrap">
+                        <div class="source-label">// SOURCE CHUNKS USED</div>
                         {chips}
                     </div>"""
+
+                # Escape answer to prevent HTML injection from LLM output
+                import html as html_module
+                safe_answer = html_module.escape(msg["content"]).replace("\n", "<br>")
+
                 chat_html += f"""
                 <div class="msg-ai">
                     <div>
                         <div class="bubble-ai">
-                            <div class="answer-label">QUERYDOCS RESPONSE</div>
-                            {msg["content"]}
+                            <div class="answer-label">// QUERYDOCS RESPONSE</div>
+                            <div class="answer-text">{safe_answer}</div>
                             {sources_html}
                         </div>
                         <div class="msg-meta">📚 QUERYDOCS AI · {ts} · {msg.get("elapsed","?")}s</div>