make chain of thought fixed height while it's computing

client/response.tsx

@@ -33,11 +33,13 @@ export class ChatResponse {
           <summary>{`<think />`}</summary>
         </details>
       ) as HTMLDetailsElement;
+      this.thinkingContext.dataset.inProgress = "";
       this.element.append(this.thinkingContext);
       this.currentLine.remove();
     } else if (this.thinkingContext && line === "</think>") {
       this.currentLine.remove();
       this.thinkingContext.open = false;
+      delete this.thinkingContext.dataset.inProgress;
       this.thinkingContext = undefined;
     }
 
@@ -84,6 +86,11 @@ export class ChatResponse {
         this.currentLine.appendData(token);
       }
     }
+
+    if (this.thinkingContext) {
+      this.thinkingContext.scrollTop =
+        this.thinkingContext.scrollHeight - this.thinkingContext.clientHeight;
+    }
   }
 
   finalize() {

client/web/css/styles.css

@@ -91,6 +91,11 @@ main,
     color: rgb(var(--color-accent) / 1);
     font-weight: bold;
   }
+
+  details[data-in-progress] {
+    max-height: 4em;
+    overflow-y: auto;
+  }
 }
 
 pre > code {