From 4814b14c045c63d9133da3c49ab8ad6d0645b779 Mon Sep 17 00:00:00 2001
From: Joseph Scheuhammer <clown@alum.mit.edu>
Date: Fri, 26 Jul 2024 11:52:43 -0400
Subject: [PATCH] fix: better scrolling as LLMs responses are written to the
 page

---
 apps/ollama/ollama.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/ollama/ollama.js b/apps/ollama/ollama.js
index 277c897..bddd9ec 100644
--- a/apps/ollama/ollama.js
+++ b/apps/ollama/ollama.js
@@ -98,7 +98,7 @@ function setSelectedModel () {
 }
 
 /**
- * Handle clicke on the "use all models" checkbox.  This will eneable or disbale
+ * Handle click on the "use all models" checkbox.  This will eneable or disbale
  * the models <select> element and reset `nameOfModelToUse` as appropriate.
  */
 function useAllModelsClicked () {
@@ -196,11 +196,11 @@ async function outputResult(response, outputEl, defaultMsg) {
   for await (const aPart of response) {
     console.debug(aPart.message.content);
     outputEl.innerText += aPart.message.content;
-    outputEl.scrollIntoView(false);
+    document.body.scrollIntoView({behavior: "smooth", block: "end"});
   }
   if (outputEl.innerText === "") {
     outputEl.innerText = ( defaultMsg === undefined ? "LLM gave no results" : defaultMsg);
-    outputEl.scrollIntoView(false);
+    document.body.scrollIntoView({behavior: "smooth", block: "end"});
   }
 }
 
@@ -244,9 +244,10 @@ async function queryEachModel (promptText) {
         count++;
 
         // Clear the general "Working..." message after all models have been
-        // queried
+        // queried, and scroll to the bottom
         if (count === names.length) {
-          document.getElementById("ollamaOutput").innerText = "";
+          outputResult([], document.getElementById("ollamaOutput"), "");
+          document.body.scrollTop = document.body.scrollHeight;
         }
       });
   });
@@ -274,7 +275,6 @@ function createOutputSection(modelName) {
     paragraph.setAttribute("id", `${modelName}_output`);
     paragraph.append("Working ...");
     sectionEl.appendChild(paragraph);
-    paragraph.scrollIntoView(false);
   }
   else {
     // Rationale: if <section id=section_modelName ...> exists, it was created