Upload folder using huggingface_hub

frontend/app.js

@@ -288,11 +288,62 @@ function escAttr(str) {
 }
 
 function formatAnswer(text) {
-  // Split double newlines into paragraphs, single newlines into line breaks
-  return (text || "")
-    .split(/\n\n+/)
-    .map(para => `<p>${escHtml(para.trim()).replace(/\n/g, "<br>")}</p>`)
-    .join("");
+  if (!text) return "";
+
+  let html = text
+    // Headers
+    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
+    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
+    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
+
+    // Bold and italic
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+
+    // Numbered lists
+    .replace(/^\d+\.\s+(.+)$/gm, '<li class="numbered">$1</li>')
+
+    // Bullet lists
+    .replace(/^[-•]\s+(.+)$/gm, '<li class="bullet">$1</li>')
+
+    // Tables — | col | col |
+    .replace(/\|(.+)\|/g, (match) => {
+      const cells = match.split('|').filter(c => c.trim());
+      return '<tr>' + cells.map(c =>
+        c.trim().match(/^[-]+$/)
+          ? ''
+          : `<td>${c.trim()}</td>`
+      ).join('') + '</tr>';
+    })
+
+    // Inline code
+    .replace(/`(.+?)`/g, '<code>$1</code>')
+
+    // Double newline = paragraph break
+    .replace(/\n\n/g, '</p><p>')
+
+    // Single newline = line break
+    .replace(/\n/g, '<br>');
+
+  // Wrap consecutive <li class="numbered"> in <ol>
+  html = html.replace(
+    /(<li class="numbered">.*?<\/li>)+/gs,
+    (match) => `<ol>${match.replace(/class="numbered"/g, '')}</ol>`
+  );
+
+  // Wrap consecutive <li class="bullet"> in <ul>
+  html = html.replace(
+    /(<li class="bullet">.*?<\/li>)+/gs,
+    (match) => `<ul>${match.replace(/class="bullet"/g, '')}</ul>`
+  );
+
+  // Wrap table rows in <table>
+  html = html.replace(
+    /(<tr>.*?<\/tr>)+/gs,
+    (match) => `<table class="answer-table">${match}</table>`
+  );
+
+  return `<p>${html}</p>`;
 }
 
 function showToast(msg) {

frontend/style.css

@@ -683,4 +683,71 @@ body {
   font-size: 11px;
   color: var(--text-3);
   margin-top: 8px;
-}
+}
+
+/* ── Answer formatting ── */
+.bubble-ai ol, .bubble-ai ul {
+  margin: 10px 0 10px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.bubble-ai ol { list-style: decimal; }
+.bubble-ai ul { list-style: disc; }
+
+.bubble-ai li {
+  color: var(--text-1);
+  line-height: 1.6;
+  padding-left: 4px;
+}
+
+.bubble-ai h1, .bubble-ai h2, .bubble-ai h3 {
+  font-family: 'Cormorant Garamond', serif;
+  color: var(--gold);
+  margin: 16px 0 8px;
+}
+
+.bubble-ai h1 { font-size: 20px; }
+.bubble-ai h2 { font-size: 17px; }
+.bubble-ai h3 { font-size: 15px; }
+
+.bubble-ai strong { color: var(--text-1); font-weight: 600; }
+.bubble-ai em { color: var(--text-2); font-style: italic; }
+
+.bubble-ai code {
+  background: var(--navy-4);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--gold);
+}
+
+.answer-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 12px 0;
+  font-size: 13px;
+}
+
+.answer-table td {
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  color: var(--text-2);
+  line-height: 1.5;
+}
+
+.answer-table tr:first-child td {
+  background: var(--navy-3);
+  color: var(--text-1);
+  font-weight: 600;
+}
+
+.answer-table tr:hover td { background: var(--navy-3); }
+
+.bubble-ai p {
+  margin-bottom: 10px;
+}
+
+.bubble-ai p:last-child { margin-bottom: 0; }