Update templates/index.html

templates/index.html

@@ -82,20 +82,39 @@
         };
 
         const formatText = (text) => {
-          const imageRegex = /\[BASE64_IMAGE_START\](.*?)\[BASE64_IMAGE_END\]/gs;
-          text = text.replace(imageRegex, (match, base64) => {
-            const src = `data:image/png;base64,${base64.trim()}`;
-            return `<img src="${src}" alt="Generated Image" class="chat-image"/>`;
-          });
+  // Images
+  const imageRegex = /\[BASE64_IMAGE_START\](.*?)\[BASE64_IMAGE_END\]/gs;
+  text = text.replace(imageRegex, (match, base64) => {
+    const src = `data:image/png;base64,${base64.trim()}`;
+    return `<img src="${src}" alt="Generated Image" class="chat-image"/>`;
+  });
+
+  // Headings (### becomes <h3>)
+  text = text.replace(/^### (.*)$/gm, '<h3>$1</h3>');
+
+  // Horizontal rule (--- becomes <hr>)
+  text = text.replace(/^---$/gm, '<hr>');
+
+  // Bold (**text**)
+  text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+
+  // Italics (*text*)
+  text = text.replace(/\*(.*?)\*/g, '<em>$1</em>');
+
+  // Lists (- item)
+  text = text.replace(/^- (.*)$/gm, '<li>$1</li>');
+  // Wrap list items in <ul> if any <li> found
+  if (text.includes('<li>')) {
+    text = text.replace(/(<li>.*<\/li>)/gs, '<ul>$1</ul>');
+  }
+
+  // Line breaks
+  text = text.replace(/\n/g, "<br>");
+
+  return text;
+};
 
-          // Convert ### Role: to **Role**: for styling
-          text = text.replace(/###\s*(System|User|Assistant):/g, (_, role) => `<strong>${role}:</strong>`);
 
-          return text
-            .replace(/\n/g, "<br>")
-            .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
-            .replace(/\*(.*?)\*/g, "<em>$1</em>");
-        };
 
         const renderCode = (text) => {
           const codeBlocks = text.split(/```/);