From a15183d54b36c4b717c6e0035572fcd6b34000ca Mon Sep 17 00:00:00 2001
From: Charlotte Som <charlotte@som.codes>
Date: Wed, 26 Feb 2025 16:07:59 +0000
Subject: [PATCH] make chain of thought fixed height while it's computing

---
 client/response.tsx       | 7 +++++++
 client/web/css/styles.css | 5 +++++
 2 files changed, 12 insertions(+)

diff --git a/client/response.tsx b/client/response.tsx
index 00f09ce..05c817f 100644
--- a/client/response.tsx
+++ b/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() {
diff --git a/client/web/css/styles.css b/client/web/css/styles.css
index b5577d8..74d1f5f 100644
--- a/client/web/css/styles.css
+++ b/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 {