From 636c06ffdd5a094c82209a32a886e947707ccb2d Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 27 Aug 2023 21:28:13 +0300
Subject: [PATCH] Autosize prompt manager boxes

---
 public/index.html        | 26 +++++++++++++-------------
 public/scripts/openai.js |  5 +++++
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/public/index.html b/public/index.html
index ea91c7adc..2b4655856 100644
--- a/public/index.html
+++ b/public/index.html
@@ -578,7 +578,7 @@
                                         </span>
                                     </div>
                                     <div class="flex-container width100p">
-                                        <input id="openai_proxy_password" type="password" class="text_pole flex1" placeholder="" maxlength="200" />
+                                        <input id="openai_proxy_password" type="password" class="text_pole flex1" placeholder="" maxlength="200" form="openai_form" />
                                         <div id="openai_proxy_password_show" title="Peek a password" class="menu_button fa-solid fa-eye-slash fa-fw"></div>
                                     </div>
                                 </div>
@@ -1440,24 +1440,24 @@
                                             <div class="range-block m-t-1">
                                                 <div class="justifyLeft" data-i18n="Main">Main</div>
                                                 <div class="wide100p">
-                                                    <textarea id="main_prompt_quick_edit_textarea" class="text_pole textarea_compact" rows="6" placeholder="" data-pm-prompt="main"></textarea>
+                                                    <textarea id="main_prompt_quick_edit_textarea" class="text_pole textarea_compact autoSetHeight" rows="6" placeholder="&mdash;" data-pm-prompt="main"></textarea>
                                                 </div>
                                             </div>
                                             <div class="range-block m-t-1">
                                                 <div class="justifyLeft" data-i18n="NSFW">NSFW</div>
                                                 <div class="wide100p">
-                                                    <textarea id="nsfw_prompt_quick_edit_textarea" class="text_pole textarea_compact" rows="6" placeholder="" data-pm-prompt="nsfw"></textarea>
+                                                    <textarea id="nsfw_prompt_quick_edit_textarea" class="text_pole textarea_compact autoSetHeight" rows="6" placeholder="&mdash;" data-pm-prompt="nsfw"></textarea>
                                                 </div>
                                             </div>
                                             <div class="range-block m-t-1">
                                                 <div class="justifyLeft" data-i18n="Jailbreak">Jailbreak</div>
                                                 <div class="wide100p">
-                                                    <textarea id="jailbreak_prompt_quick_edit_textarea" class="text_pole textarea_compact" rows="6" placeholder="" data-pm-prompt="jailbreak"></textarea>
+                                                    <textarea id="jailbreak_prompt_quick_edit_textarea" class="text_pole textarea_compact autoSetHeight" rows="6" placeholder="&mdash;" data-pm-prompt="jailbreak"></textarea>
                                                 </div>
                                             </div>
                                             <div id="claude_assistant_prefill_block" data-source="claude" class="range-block">
                                                 <span id="claude_assistant_prefill_text" data-i18n="Assistant Prefill">Assistant Prefill</span>
-                                                <textarea id="claude_assistant_prefill" class="text_pole textarea_compact" name="assistant_prefill" rows="3" maxlength="5000" placeholder="Start Claude's answer with..."></textarea>
+                                                <textarea id="claude_assistant_prefill" class="text_pole textarea_compact" name="assistant_prefill autoSetHeight" rows="3" maxlength="5000" placeholder="Start Claude's answer with..."></textarea>
                                             </div>
                                         </div>
                                     </div>
@@ -1478,7 +1478,7 @@
                                                     Prompt that is used for Impersonation function
                                                 </div>
                                                 <div class="wide100p">
-                                                    <textarea id="impersonation_prompt_textarea" class="text_pole textarea_compact" name="impersonation_prompt" rows="3" placeholder=""></textarea>
+                                                    <textarea id="impersonation_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="impersonation_prompt" rows="3" placeholder="&mdash;"></textarea>
                                                 </div>
                                             </div>
                                             <div class="range-block m-t-1">
@@ -1493,7 +1493,7 @@
                                                     <tt>{0}</tt> to mark a place where the content is inserted.
                                                 </div>
                                                 <div class="wide100p">
-                                                    <textarea id="wi_format_textarea" class="text_pole textarea_compact" rows="3" placeholder=""></textarea>
+                                                    <textarea id="wi_format_textarea" class="text_pole textarea_compact autoSetHeight" rows="3" placeholder="&mdash;"></textarea>
                                                 </div>
                                             </div>
                                             <div class="range-block m-t-1">
@@ -1508,7 +1508,7 @@
                                                         Prompt that is used when the NSFW toggle is OFF
                                                     </div>
                                                     <div class="wide100p">
-                                                        <textarea id="nsfw_avoidance_prompt_textarea" class="text_pole textarea_compact" name="nsfw_prompt" rows="3" placeholder=""></textarea>
+                                                        <textarea id="nsfw_avoidance_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="nsfw_prompt" rows="3" placeholder="&mdash;"></textarea>
                                                     </div>
                                                 </div>
                                             </div>
@@ -1525,7 +1525,7 @@
                                                     </span>
                                                 </div>
                                                 <div class="wide100p">
-                                                    <textarea id="newchat_prompt_textarea" class="text_pole textarea_compact" name="new_chat" rows="3" placeholder=""></textarea>
+                                                    <textarea id="newchat_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="new_chat" rows="3" placeholder="&mdash;"></textarea>
                                                 </div>
                                             </div>
                                             <div class="range-block m-t-1">
@@ -1541,7 +1541,7 @@
                                                     </span>
                                                 </div>
                                                 <div class="wide100p">
-                                                    <textarea id="newgroupchat_prompt_textarea" class="text_pole textarea_compact" name="new_group_chat" rows="3" placeholder=""></textarea>
+                                                    <textarea id="newgroupchat_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="new_group_chat" rows="3" placeholder="&mdash;"></textarea>
                                                 </div>
                                             </div>
                                             <div class="range-block m-t-1">
@@ -1557,7 +1557,7 @@
                                                     </span>
                                                 </div>
                                                 <div class="wide100p">
-                                                    <textarea id="newexamplechat_prompt_textarea" class="text_pole textarea_compact" name="new_example_chat" rows="3" placeholder=""></textarea>
+                                                    <textarea id="newexamplechat_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="new_example_chat" rows="3" placeholder="&mdash;"></textarea>
                                                 </div>
                                             </div>
                                             <div class="range-block m-t-1">
@@ -1573,7 +1573,7 @@
                                                     </span>
                                                 </div>
                                                 <div class="wide100p">
-                                                    <textarea id="continue_nudge_prompt_textarea" class="text_pole textarea_compact" name="continue_nudge" rows="3" placeholder=""></textarea>
+                                                    <textarea id="continue_nudge_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="continue_nudge" rows="3" placeholder="&mdash;"></textarea>
                                                 </div>
                                             </div>
                                             <div class="range-block m-t-1">
@@ -1586,7 +1586,7 @@
                                                     </span>
                                                 </div>
                                                 <div class="wide100p">
-                                                    <textarea id="send_if_empty_textarea" class="text_pole textarea_compact" name="send_if_empty" rows="3" placeholder=""></textarea>
+                                                    <textarea id="send_if_empty_textarea" class="text_pole textarea_compact autoSetHeight" name="send_if_empty" rows="3" placeholder="&mdash;"></textarea>
                                                 </div>
                                             </div>
                                         </div>
diff --git a/public/scripts/openai.js b/public/scripts/openai.js
index 589615035..3986d2b77 100644
--- a/public/scripts/openai.js
+++ b/public/scripts/openai.js
@@ -50,6 +50,7 @@ import {
     download,
     getFileText, getSortableDelay,
     parseJsonFile,
+    resetScrollHeight,
     stringFormat,
 } from "./utils.js";
 import { countTokensOpenAI } from "./tokenizers.js";
@@ -3141,6 +3142,10 @@ $(document).ready(async function () {
         saveSettingsDebounced();
     });
 
+    $(document).on('input', '#openai_settings .autoSetHeight', function () {
+        resetScrollHeight($(this));
+    });
+
     $("#api_button_openai").on("click", onConnectButtonClick);
     $("#openai_reverse_proxy").on("input", onReverseProxyInput);
     $("#model_openai_select").on("change", onModelChange);