Show reponse stats also when info button is toggled

This way it is also possible to show it on touch devices.

Author: corebonts

llamafile/server/www/chatbot.css

@@ -33,6 +33,10 @@ p {
   box-sizing: border-box;
 }
 
+.hidden {
+  display: none !important;
+}
+
 .chat-container {
   width: 100%;
   max-width: 960px;
@@ -172,6 +176,28 @@ ul li:first-child {
   height: 16px;
 }
 
+.message-controls button.toggled {
+  box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.2);
+}
+
+.message-wrapper #info-container {
+  font-size: 0.75rem;
+  background: #f5f5f5;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  width: max-content;
+  max-width: 100%;
+  display: inline-block;
+  vertical-align: top;
+}
+.message-wrapper:not(:last-child) #info-container {
+  margin-bottom: var(--large-spacing);
+}
+
+.message-wrapper span {
+  display: inline-block;
+}
+
 .message img {
   max-width: 100%;
   height: auto;

llamafile/server/www/chatbot.js

@@ -66,23 +66,35 @@ function wrapMessageElement(messageElement, role) {
   const wrapper = document.createElement("div");
   wrapper.appendChild(messageElement);
   if (role == "assistant") {
-    const controlContainer = document.createElement("div");
+    const controlContainer = wrapper.appendChild(document.createElement("div"));
     controlContainer.appendChild(createCopyButton(() => messageElement.textContent, () => messageElement.innerHTML));
-    controlContainer.appendChild(infoButton());
+    controlContainer.appendChild(infoButton(wrapper));
     controlContainer.classList.add("message-controls");
-    wrapper.appendChild(controlContainer);
   }
   wrapper.classList.add("message-wrapper", role);
   return wrapper;
 }
 
 function infoButton(container, stats) {
   let button = container?.querySelector("#stats");
+  let statsElement = container?.querySelector("#info-container");
   if (!button) {
     button = document.createElement("button");
     button.id = "stats";
     button.innerText = "i";
     button.style.fontFamily = "monospace";
+
+    statsElement = document.createElement("div");
+    statsElement.id = "info-container";
+    statsElement.className = "hidden";
+    container.append(statsElement);
+    button.addEventListener("click", () => {
+      const show = !button.classList.contains("toggled");
+      statsElement.classList.toggle("hidden", !show);
+      button.classList.toggle("toggled", show);
+      if (show)
+        requestAnimationFrame(() => scrollIntoViewIfNeeded(statsElement, container.parentElement));
+    });
   }
   button.style.display = stats ? "" : "none";
   if (stats) {
@@ -102,10 +114,24 @@ function infoButton(container, stats) {
       parts.push("Incomplete");
     }
     button.title = parts.join("\n");
+    statsElement.innerHTML = "";
+    parts.forEach(part => statsElement.appendChild(wrapInSpan(part + " ")));
   }
   return button;
 }
 
+function scrollIntoViewIfNeeded(elem, container) {
+  let rectElem = elem.getBoundingClientRect(), rectContainer = container.getBoundingClientRect();
+  if (rectElem.bottom > rectContainer.bottom) elem.scrollIntoView(false);
+  if (rectElem.top < rectContainer.top) elem.scrollIntoView();
+}
+
+function wrapInSpan(innerText) {
+  const span = document.createElement("span");
+  span.innerText = innerText;
+  return span;
+}
+
 function createMessageElement(content) {
   const messageDiv = document.createElement("div");
   messageDiv.classList.add("message");