1 files changed, 28 insertions, 13 deletions
diff --git a/assets/playground.html b/assets/playground.html
index 7e73297..420c679 100644
--- a/assets/playground.html
+++ b/assets/playground.html
@@ -602,7 +602,8 @@
               <template x-if="index == hoveredMessageIndex">
                 <div class="message-toolbox">
                   <div class="copy-message-btn" :data-clipboard-text="message.content"
-                    x-init="copyMessageClipboard = new ClipboardJS('.copy-message-btn'); copyMessageClipboard.on('success', () => {toast('Copied Message')})" title="Copy">
+                    x-init="copyMessageClipboard = new ClipboardJS('.copy-message-btn'); copyMessageClipboard.on('success', () => {toast('Copied Message')})"
+                    title="Copy">
                     <svg fill="currentColor" viewBox="0 0 16 16">
                       <path fill-rule="evenodd"
                         d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z" />
@@ -747,7 +748,7 @@
           } catch (err) {
             console.error(err);
           }
-          this.$watch("input", () => this.autoExpandHeight(this.$refs.input));
+          this.$watch("input", () => this.autoScrollAndHeightOnInput(this.$refs.input));
           this.$watch("settings", () => {
             localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(this.settings));
           });
@@ -800,7 +801,7 @@
         },
 
         handleRegenerateMessage() {
-          const lastIndex = this.messages.length -  1;
+          const lastIndex = this.messages.length - 1;
           if (lastIndex !== this.hoveredMessageIndex) {
             return
           }
@@ -853,16 +854,16 @@
 
         handleNewlineInput(event) {
           event.preventDefault();
-          const textarea = event.target;
-          const start = textarea.selectionStart;
-          const end = textarea.selectionEnd;
-          const text = textarea.value;
+          const $input = event.target;
+          const start = $input.selectionStart;
+          const end = $input.selectionEnd;
+          const text = $input.value;
           const before = text.substring(0, start);
           const after = text.substring(end);
 
-          textarea.value = before + '\n' + after;
-          textarea.selectionStart = textarea.selectionEnd = start + 1;
-          this.input = textarea.value;
+          $input.value = before + '\n' + after;
+          $input.selectionStart = $input.selectionEnd = start + 1;
+          this.input = $input.value;
         },
 
         handleCopyCode(event) {
@@ -902,9 +903,23 @@
           }
         },
 
-        autoExpandHeight($node) {
-          $node.style.height = "auto";
-          $node.style.height = $node.scrollHeight + "px";
+        autoScrollAndHeightOnInput($input) {
+          if (!$input.value) {
+            $input.style.overflowY = "hidden";
+            $input.style.height = "51px";
+          } else if ($input.scrollHeight < 500) {
+            $input.style.overflowY = "hidden";
+            $input.style.height = "auto";
+            $input.style.height = $input.scrollHeight + "px";
+          } else {
+            $input.style.overflowY = "auto";
+            $input.style.height = "500px"
+            const lineHeight = 19;
+            const cursorTop = Math.floor(($input.selectionStart + 1) / $input.cols) * lineHeight;
+            if (cursorTop < $input.scrollTop || cursorTop > ($input.scrollTop + $input.clientHeight - lineHeight)) {
+              $input.scrollTop = cursorTop;
+            }
+          }
         },
 
         async ask() {