From 8ff280d68d1dd34fb4d1fb2d6421a575961a1ecd Mon Sep 17 00:00:00 2001
From: SimolZimol <70102430+SimolZimol@users.noreply.github.com>
Date: Fri, 22 May 2026 18:01:38 +0200
Subject: [PATCH] 	modified:   static/css/style.css 	modified:  
 static/js/chat.js 	modified:   templates/base.html

---
 static/css/style.css | 54 ++++++++++++++++++++++++++++++++++++++++++++
 static/js/chat.js    | 12 +++++++---
 templates/base.html  |  1 +
 3 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 9face69..53dc6cc 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -67,3 +67,57 @@ input[type="checkbox"] {
 
 /* Remove default focus outline on editor mount */
 #editor-mount:focus { outline: none; }
+
+/* Markdown rendering inside assistant chat bubbles */
+.markdown-body { line-height: 1.6; }
+.markdown-body p { margin-bottom: 0.6em; }
+.markdown-body p:last-child { margin-bottom: 0; }
+.markdown-body ul, .markdown-body ol { padding-left: 1.4em; margin-bottom: 0.6em; }
+.markdown-body ul { list-style: disc; }
+.markdown-body ol { list-style: decimal; }
+.markdown-body li { margin-bottom: 0.2em; }
+.markdown-body h1, .markdown-body h2, .markdown-body h3,
+.markdown-body h4, .markdown-body h5, .markdown-body h6 {
+  font-weight: 600;
+  margin-top: 0.8em;
+  margin-bottom: 0.4em;
+  color: #cdd6f4;
+}
+.markdown-body h1 { font-size: 1.2em; }
+.markdown-body h2 { font-size: 1.1em; }
+.markdown-body h3 { font-size: 1em; }
+.markdown-body code {
+  background: #181825;
+  border: 1px solid #313244;
+  border-radius: 4px;
+  padding: 0.1em 0.35em;
+  font-family: ui-monospace, monospace;
+  font-size: 0.875em;
+}
+.markdown-body pre {
+  background: #181825;
+  border: 1px solid #313244;
+  border-radius: 8px;
+  padding: 0.75em 1em;
+  overflow-x: auto;
+  margin-bottom: 0.6em;
+}
+.markdown-body pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 0.875em;
+}
+.markdown-body blockquote {
+  border-left: 3px solid #89b4fa;
+  padding-left: 0.75em;
+  color: #6c7086;
+  margin-bottom: 0.6em;
+}
+.markdown-body strong { font-weight: 600; color: #cdd6f4; }
+.markdown-body em { font-style: italic; }
+.markdown-body a { color: #89b4fa; text-decoration: underline; }
+.markdown-body hr { border-color: #313244; margin: 0.8em 0; }
+.markdown-body table { border-collapse: collapse; width: 100%; margin-bottom: 0.6em; font-size: 0.875em; }
+.markdown-body th, .markdown-body td { border: 1px solid #313244; padding: 0.3em 0.6em; }
+.markdown-body th { background: #181825; font-weight: 600; }
diff --git a/static/js/chat.js b/static/js/chat.js
index 5c09541..4a4f83f 100644
--- a/static/js/chat.js
+++ b/static/js/chat.js
@@ -64,15 +64,21 @@ export class Chat {
     wrap.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'} gap-3`;
 
     if (role === 'assistant') {
+      const bodyClass = isError
+        ? 'bg-copilot-danger text-copilot-bg'
+        : 'bg-copilot-panel text-copilot-text';
+      const renderedContent = isError
+        ? escapeHtml(content)
+        : (typeof marked !== 'undefined' ? marked.parse(content) : escapeHtml(content));
       wrap.innerHTML = `
         <div class="w-7 h-7 rounded-full bg-copilot-accent flex items-center justify-center shrink-0 mt-0.5">
           <svg class="w-4 h-4 text-copilot-bg" fill="currentColor" viewBox="0 0 24 24">
             <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
           </svg>
         </div>
-        <div class="max-w-[75%] rounded-2xl rounded-tl-sm px-4 py-3 text-sm leading-relaxed
-          ${isError ? 'bg-copilot-danger text-copilot-bg' : 'bg-copilot-panel text-copilot-text'}
-          shadow-sm whitespace-pre-wrap">${escapeHtml(content)}</div>`;
+        <div class="markdown-body max-w-[75%] rounded-2xl rounded-tl-sm px-4 py-3 text-sm leading-relaxed
+          ${bodyClass} shadow-sm">${renderedContent}</div>`;
+      return wrap;
     } else {
       wrap.innerHTML = `
         <div class="max-w-[75%] rounded-2xl rounded-tr-sm px-4 py-3 text-sm leading-relaxed
diff --git a/templates/base.html b/templates/base.html
index dc065fc..5a8a758 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -32,6 +32,7 @@
     }
   </script>
   <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
+  <script src="https://cdn.jsdelivr.net/npm/marked@12/marked.min.js"></script>
   {% block head %}{% endblock %}
 </head>
 <body class="bg-copilot-bg text-copilot-text min-h-screen flex flex-col">