added text to the banner

app/src/content/assets/data/banner_visualisation_data.csv

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b19a66e4f5999c3dcf60140f5eeab57016ebeb3d277db08c16dd0b5bede35495
-size 81529
+oid sha256:98eba5e5db19f482da8a3b26498c2fa633afa458f5b75e23d2dca24e24cc7596
+size 844651

app/src/content/embeds/banner.html

@@ -258,12 +258,25 @@
                   .attr('stroke', isDark ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.85)')
                   .attr('stroke-width', 1.2);
                 const imgSrc = `${thumbBase}${d.original_id}.jpg`;
+                
+                // Function to truncate text to max 25 words
+                const truncateText = (text, maxWords = 25) => {
+                  if (!text || typeof text !== 'string') return '—';
+                  const words = text.trim().split(/\s+/);
+                  if (words.length <= maxWords) return text;
+                  return words.slice(0, maxWords).join(' ') + '...';
+                };
+                
+                const userText = truncateText(d.user);
+                const assistantText = truncateText(d.assistant);
+                
                 tipInner.innerHTML =
                   `<div style="display:flex; gap:10px; align-items:flex-start;">` +
                     `<img src="${imgSrc}" alt="thumb ${d.original_id}" style="width:120px;height:120px;object-fit:cover;flex:0 0 auto;border-radius:6px;border:1px solid var(--border-color);" />` +
                     `<div style="min-width:140px;">` +
                       `<div><strong>${d.category || 'Unknown'}</strong></div>` +
-                      `<div><strong>ID</strong> ${d.original_id}</div>` +
+                      `<div><strong>Q:</strong> ${userText}</div>` +
+                      `<div><strong>A:</strong> ${assistantText}</div>` +
                       `<div><strong>Subset</strong> ${d.subset ?? '—'}</div>` +
                     `</div>` +
                   `</div>`;