From cfba379777aa66502be6780d01ac6094ac6726cb Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Fri, 10 Nov 2023 15:36:42 +0200
Subject: [PATCH] Hide injection depth input block for relative position

---
 public/index.html               |  4 ++--
 public/scripts/PromptManager.js | 22 ++++++++++++++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 994587444..1d98a6f46 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3990,7 +3990,7 @@
                                 <option value="1">Absolute</option>
                             </select>
                         </div>
-                        <div class="completion_prompt_manager_popup_entry_form_control flex1">
+                        <div id="completion_prompt_manager_depth_block" class="completion_prompt_manager_popup_entry_form_control flex1">
                             <label for="completion_prompt_manager_popup_entry_form_injection_depth">
                                 <span>Depth</span>
                             </label>
@@ -4623,4 +4623,4 @@
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/scripts/PromptManager.js b/public/scripts/PromptManager.js
index 4b1a8c702..dce7b7f88 100644
--- a/public/scripts/PromptManager.js
+++ b/public/scripts/PromptManager.js
@@ -26,7 +26,7 @@ const DEFAULT_DEPTH = 4;
 /**
  * @enum {number}
  */
-export const INJECTION_POSITION ={
+export const INJECTION_POSITION = {
     RELATIVE: 0,
     ABSOLUTE: 1,
 }
@@ -289,7 +289,7 @@ PromptManagerModule.prototype.init = function (moduleConfiguration, serviceSetti
     this.serviceSettings = serviceSettings;
     this.containerElement = document.getElementById(this.configuration.containerIdentifier);
 
-    if ('global' === this.configuration.promptOrder.strategy) this.activeCharacter = {id: this.configuration.promptOrder.dummyId};
+    if ('global' === this.configuration.promptOrder.strategy) this.activeCharacter = { id: this.configuration.promptOrder.dummyId };
 
     this.sanitizeServiceSettings();
 
@@ -397,6 +397,7 @@ PromptManagerModule.prototype.init = function (moduleConfiguration, serviceSetti
         document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_prompt').value = prompt.content;
         document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_injection_position').value = prompt.injection_position ?? 0;
         document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_injection_depth').value = prompt.injection_depth ?? DEFAULT_DEPTH;
+        document.getElementById(this.configuration.prefix + 'prompt_manager_depth_block').style.visibility = prompt.injection_position === INJECTION_POSITION.ABSOLUTE ? 'visible' : 'hidden';
     }
 
     // Append prompt to selected character
@@ -1105,12 +1106,14 @@ PromptManagerModule.prototype.loadPromptIntoEditForm = function (prompt) {
     const promptField = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_prompt');
     const injectionPositionField = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_injection_position');
     const injectionDepthField = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_injection_depth');
+    const injectionDepthBlock = document.getElementById(this.configuration.prefix + 'prompt_manager_depth_block');
 
     nameField.value = prompt.name ?? '';
     roleField.value = prompt.role ?? '';
     promptField.value = prompt.content ?? '';
     injectionPositionField.value = prompt.injection_position ?? INJECTION_POSITION.RELATIVE;
     injectionDepthField.value = prompt.injection_depth ?? DEFAULT_DEPTH;
+    injectionDepthBlock.style.visibility = prompt.injection_position === INJECTION_POSITION.ABSOLUTE ? 'visible' : 'hidden';
 
     const resetPromptButton = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_reset');
     if (true === prompt.system_prompt) {
@@ -1120,10 +1123,23 @@ PromptManagerModule.prototype.loadPromptIntoEditForm = function (prompt) {
         resetPromptButton.style.display = 'none';
     }
 
+    injectionPositionField.removeEventListener('change', (e) => this.handleInjectionPositionChange(e));
+    injectionPositionField.addEventListener('change', (e) => this.handleInjectionPositionChange(e));
+
     const savePromptButton = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_save');
     savePromptButton.dataset.pmPrompt = prompt.identifier;
 }
 
+PromptManagerModule.prototype.handleInjectionPositionChange = function (event) {
+    const injectionDepthBlock = document.getElementById(this.configuration.prefix + 'prompt_manager_depth_block');
+    const injectionPosition = Number(event.target.value);
+    if (injectionPosition === INJECTION_POSITION.ABSOLUTE) {
+        injectionDepthBlock.style.visibility = 'visible';
+    } else {
+        injectionDepthBlock.style.visibility = 'hidden';
+    }
+}
+
 /**
  * Loads a given prompt into the inspect form
  * @param {MessageCollection} messages - Prompt object with properties 'name', 'role', 'content', and 'system_prompt'
@@ -1176,12 +1192,14 @@ PromptManagerModule.prototype.clearEditForm = function () {
     const promptField = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_prompt');
     const injectionPositionField = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_injection_position');
     const injectionDepthField = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_injection_depth');
+    const injectionDepthBlock = document.getElementById(this.configuration.prefix + 'prompt_manager_depth_block');
 
     nameField.value = '';
     roleField.selectedIndex = 0;
     promptField.value = '';
     injectionPositionField.selectedIndex = 0;
     injectionDepthField.value = DEFAULT_DEPTH;
+    injectionDepthBlock.style.visibility = 'unset';
 
     roleField.disabled = false;
 }