From 96691994080da3aff6b32bfa3104037f19bc2053 Mon Sep 17 00:00:00 2001
From: maver <kentucky@posteo.de>
Date: Sat, 8 Jul 2023 22:35:12 +0200
Subject: [PATCH] Allow user to edit new chat, new group chat and new example
 chat prompts

---
 public/css/promptmanager.css    |  14 ++--
 public/index.html               |  35 ++++++++-
 public/scripts/PromptManager.js | 126 +++++++++++++++++++++++++++-----
 public/scripts/openai.js        |  12 ++-
 4 files changed, 158 insertions(+), 29 deletions(-)

diff --git a/public/css/promptmanager.css b/public/css/promptmanager.css
index f9c4c6a3b..0875cfd6f 100644
--- a/public/css/promptmanager.css
+++ b/public/css/promptmanager.css
@@ -89,6 +89,8 @@
 }
 
 #completion_prompt_manager_popup #completion_prompt_manager_popup_edit,
+#completion_prompt_manager_popup #completion_prompt_manager_popup_chathistory_edit,
+#completion_prompt_manager_popup #completion_prompt_manager_popup_dialogueexamples_edit,
 #completion_prompt_manager_popup #completion_prompt_manager_popup_inspect {
     display: none;
     padding: 0.5em;
@@ -124,17 +126,17 @@
     padding: 0.5em;
 }
 
-#completion_prompt_manager_popup .completion_prompt_manager_popup_entry .completion_prompt_manager_popup_entry_form_control {
+.completion_prompt_manager_popup_entry_form_control {
     margin-top:1em;
 }
 
-#completion_prompt_manager_popup #completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_reset {
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_reset {
     color: rgb(220 173 16);
 }
 
-#completion_prompt_manager_popup #completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_close,
-#completion_prompt_manager_popup #completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_reset,
-#completion_prompt_manager_popup #completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_save {
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_close,
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_reset,
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_save {
     font-size: 1.25em;
     padding: 0.5em;
 }
@@ -143,7 +145,7 @@
     min-height: 200px;
 }
 
-#completion_prompt_manager_popup .completion_prompt_manager_popup_entry #completion_prompt_manager_popup_entry_form_footer {
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry .completion_prompt_manager_popup_entry_form_footer {
     display: flex;
     justify-content: space-between;
     margin-top: 1em;
diff --git a/public/index.html b/public/index.html
index b0dae97f7..66b725147 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3584,6 +3584,39 @@
         </div>
     </div>
     <div id="completion_prompt_manager_popup" style="display:none;">
+        <div id="completion_prompt_manager_popup_chathistory_edit">
+            <h3>Edit</h3>
+            <div class="completion_prompt_manager_popup_entry_form_control">
+                <label for="completion_prompt_manager_popup_entry_form_name">
+                    <span>New Chat</span>
+                </label>
+                <div class="text_muted">A prompt telling the model that a new chat has started.</div>
+                <input id="completion_prompt_manager_popup_entry_chathistory_newchat" class="text_pole" type="text" name="newchat" />
+            </div>
+            <div class="completion_prompt_manager_popup_entry_form_control">
+                <label for="completion_prompt_manager_popup_entry_form_name">
+                    <span>New Group Chat</span>
+                </label>
+                <div class="text_muted">A prompt telling the model that a new group chat has started.</div>
+                <input id="completion_prompt_manager_popup_entry_chathistory_newgroupchat" class="text_pole" type="text" name="newgroupchat" />
+            </div>
+            <div class="completion_prompt_manager_popup_entry_form_footer" >
+                <a id="completion_prompt_manager_popup_entry_form_chathistory_save" title="save" class="fa-solid fa-save menu_button"></a>
+            </div>
+        </div>
+        <div id="completion_prompt_manager_popup_dialogueexamples_edit">
+            <h3>Edit</h3>
+            <div class="completion_prompt_manager_popup_entry_form_control">
+                <label for="completion_prompt_manager_popup_entry_form_name">
+                    <span>New Example Chat</span>
+                </label>
+                <div class="text_muted">A prompt telling the model that a new example chat has started.</div>
+                <input id="completion_prompt_manager_popup_entry_dialogueexamples_newchat" class="text_pole" type="text" name="newchat" />
+            </div>
+            <div class="completion_prompt_manager_popup_entry_form_footer" >
+                <a id="completion_prompt_manager_popup_entry_form_dialogueexamples_save" title="save" class="fa-solid fa-save menu_button"></a>
+            </div>
+        </div>
         <div id="completion_prompt_manager_popup_inspect">
             <h3>Inspect</h3>
             <div class="completion_prompt_manager_popup_entry">
@@ -3631,7 +3664,7 @@
                         <textarea id="completion_prompt_manager_popup_entry_form_prompt" class="text_pole" name="prompt">
                     </textarea>
                     </div>
-                    <div id="completion_prompt_manager_popup_entry_form_footer" >
+                    <div class="completion_prompt_manager_popup_entry_form_footer" >
                         <a id="completion_prompt_manager_popup_entry_form_close" title="close" class="fa-solid fa-close menu_button"></a>
                         <a id="completion_prompt_manager_popup_entry_form_reset" title="reset" class="fa-solid fa-undo menu_button"></a>
                         <a id="completion_prompt_manager_popup_entry_form_save" title="save" class="fa-solid fa-save menu_button" data-pm-prompt=""></a>
diff --git a/public/scripts/PromptManager.js b/public/scripts/PromptManager.js
index 8cd67e14f..8b61addb1 100644
--- a/public/scripts/PromptManager.js
+++ b/public/scripts/PromptManager.js
@@ -115,7 +115,7 @@ function PromptManagerModule() {
             main: '',
             nsfw: '',
             jailbreak: ''
-        }
+        },
     };
 
     this.serviceSettings = null;
@@ -133,6 +133,10 @@ function PromptManagerModule() {
     this.handleToggle = () => { };
     this.handleInspect = () => { };
     this.handleEdit = () => { };
+    this.handleChatHistoryEdit = () => {};
+    this.handleChatHistorySave = () => {};
+    this.handleDialogueExamplesEdit = () => {};
+    this.handleDialogueExamplesSave = () => {};
     this.handleDetach = () => { };
     this.handleSavePrompt = () => { };
     this.handleResetPrompt = () => { };
@@ -171,8 +175,7 @@ PromptManagerModule.prototype.init = function (moduleConfiguration, serviceSetti
 
     // Open edit form and load selected prompt
     this.handleEdit = (event) => {
-        this.clearInspectForm();
-        this.clearEditForm();
+        this.clearForms();
 
         const promptID = event.target.closest('.' + this.configuration.prefix + 'prompt_manager_prompt').dataset.pmIdentifier;
         const prompt = this.getPromptById(promptID);
@@ -182,10 +185,51 @@ PromptManagerModule.prototype.init = function (moduleConfiguration, serviceSetti
         this.showPopup();
     }
 
+    this.handleChatHistoryEdit = (event) => {
+        this.clearForms();
+
+        const newChatInput = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_chathistory_newchat');
+        newChatInput.value = this.getSettings('utilityPrompts').newChat;
+
+        const newGroupChatInput = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_chathistory_newgroupchat');
+        newGroupChatInput.value = this.getSettings('utilityPrompts').newGroupChat;
+
+        this.showPopup('chathistory_edit');
+    }
+
+    this.handleChatHistorySave = () => {
+        const newChatInput = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_chathistory_newchat');
+        this.serviceSettings.prompt_manager_settings.utilityPrompts.newChat = newChatInput.value;
+
+        const newGroupChatInput = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_chathistory_newgroupchat');
+        this.serviceSettings.prompt_manager_settings.utilityPrompts.newGroupChat = newGroupChatInput.value;
+
+        this.hidePopup();
+        this.clearChatHistoryForm();
+        this.saveServiceSettings().then(() => this.render());
+    }
+
+    this.handleDialogueExamplesEdit = (event) => {
+        this.clearForms();
+
+        const newChatInput = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_dialogueexamples_newchat');
+        newChatInput.value = this.serviceSettings.prompt_manager_settings.utilityPrompts.newExampleChat;
+
+        this.showPopup('dialogueexamples_edit');
+    }
+
+    this.handleDialogueExamplesSave = () => {
+        const newChatInput = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_dialogueexamples_newchat');
+        this.serviceSettings.prompt_manager_settings.utilityPrompts.newExampleChat = newChatInput.value;
+
+        this.hidePopup();
+        this.clearDialogueExamplesForm();
+        this.saveServiceSettings().then(() => this.render());
+    }
+
     // Open edit form and load selected prompt
     this.handleInspect = (event) => {
-        this.clearInspectForm();
-        this.clearEditForm();
+        this.clearForms();;
 
         const promptID = event.target.closest('.' + this.configuration.prefix + 'prompt_manager_prompt').dataset.pmIdentifier;
         if (true === this.messages.hasItemWithIdentifier(promptID)) {
@@ -406,13 +450,15 @@ PromptManagerModule.prototype.init = function (moduleConfiguration, serviceSetti
 
     const closeAndClearPopup = () =>  {
         this.hidePopup();
-        this.clearInspectForm();
-        this.clearEditForm();
+        this.clearForms();
     };
 
     document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_close').addEventListener('click', closeAndClearPopup);
     document.getElementById(this.configuration.prefix + 'prompt_manager_popup_close_button').addEventListener('click', closeAndClearPopup);
 
+    document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_chathistory_save').addEventListener('click', this.handleChatHistorySave);
+    document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_dialogueexamples_save').addEventListener('click', this.handleDialogueExamplesSave);
+
     // Re-render prompt manager on openai preset change
     eventSource.on(event_types.OAI_PRESET_CHANGED, settings => this.render());
 
@@ -609,7 +655,9 @@ PromptManagerModule.prototype.isPromptDeletionAllowed = function (prompt) {
  * @returns {boolean} True if the prompt can be edited, false otherwise.
  */
 PromptManagerModule.prototype.isPromptEditAllowed = function (prompt) {
-    return true;
+    if (prompt.identifier === 'chatHistory') return true;
+    else if (prompt.identifier === 'dialogueExamples') return true;
+    else return !prompt.marker;
 }
 
 /**
@@ -744,6 +792,10 @@ PromptManagerModule.prototype.getPromptIndexById = function (identifier) {
     return this.serviceSettings.prompts.findIndex(item => item.position === identifier) ?? null;
 }
 
+PromptManagerModule.prototype.getSettings = function(settings) {
+    return this.serviceSettings.prompt_manager_settings[settings] ?? null;
+}
+
 /**
  * Prepares a prompt by creating a new object with its role and content.
  * @param {Object} prompt - Prompt object
@@ -828,7 +880,7 @@ PromptManagerModule.prototype.loadMessagesIntoInspectForm = function (messages)
         return template.content.firstChild;
     }
 
-    const messageList = document.getElementById('completion_prompt_manager_popup_entry_form_inspect_list');
+    const messageList = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_inspect_list');
 
     if (0 === messages.getCollection().length) messageList.innerHTML = `<span>This marker does not contain any prompts.</span>`;
 
@@ -838,6 +890,13 @@ PromptManagerModule.prototype.loadMessagesIntoInspectForm = function (messages)
     });
 }
 
+PromptManagerModule.prototype.clearForms = function () {
+    this.clearEditForm();
+    this.clearInspectForm();
+    this.clearChatHistoryForm();
+    this.clearDialogueExamplesForm();
+}
+
 /**
  * Clears all input fields in the edit form.
  */
@@ -859,10 +918,20 @@ PromptManagerModule.prototype.clearEditForm = function () {
 PromptManagerModule.prototype.clearInspectForm = function() {
     const inspectArea = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_inspect');
     inspectArea.style.display = 'none';
-    const messageList = document.getElementById('completion_prompt_manager_popup_entry_form_inspect_list');
+    const messageList = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_entry_form_inspect_list');
     messageList.innerHTML = '';
 }
 
+PromptManagerModule.prototype.clearChatHistoryForm = function() {
+    const chatHistoryArea = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_chathistory_edit');
+    chatHistoryArea.style.display = 'none';
+}
+
+PromptManagerModule.prototype.clearDialogueExamplesForm = function() {
+    const dialogueExamples = document.getElementById(this.configuration.prefix + 'prompt_manager_popup_dialogueexamples_edit');
+    dialogueExamples.style.display = 'none';
+}
+
 /**
  * Returns a full list of prompts whose content markers have been substituted.
  * @returns {PromptCollection} A PromptCollection object
@@ -896,8 +965,8 @@ PromptManagerModule.prototype.populateTokenHandler = function(messageCollection)
 
     // Update general token counts
     const chatHistory = messageCollection.getItemByIdentifier('chatHistory');
-    const startChat = chatHistory.getCollection()[0]?.getTokens() || 0;
-    const continueNudge = chatHistory.getCollection().find(message => message.identifier === 'continueNudge')?.getTokens() || 0;
+    const startChat = chatHistory?.getCollection()[0].getTokens() || 0;
+    const continueNudge = chatHistory?.getCollection().find(message => message.identifier === 'continueNudge')?.getTokens() || 0;
 
     this.tokenHandler.counts = {
         ...this.tokenHandler.counts,
@@ -1097,9 +1166,16 @@ PromptManagerModule.prototype.renderPromptManagerListItems = function () {
 
         let editSpanHtml = '';
         if (this.isPromptEditAllowed(prompt)) {
-            editSpanHtml = `
-                <span title="edit" class="prompt-manager-edit-action fa-solid fa-pencil"></span>
-            `;
+            switch (prompt.identifier) {
+                case 'chatHistory':
+                    editSpanHtml = `<span title="edit" class="prompt-manager-edit-chathistory-action fa-solid fa-pencil"></span>`;
+                    break;
+                case 'dialogueExamples':
+                    editSpanHtml = `<span title="edit" class="prompt-manager-edit-dialogueexamples-action fa-solid fa-pencil"></span>`;
+                    break;
+                default:
+                    editSpanHtml = `<span title="edit" class="prompt-manager-edit-action fa-solid fa-pencil"></span>`;
+            }
         }
 
         let inspectSpanHtml = '';
@@ -1128,8 +1204,9 @@ PromptManagerModule.prototype.renderPromptManagerListItems = function () {
                 ${prompt.marker
                 ? `<span>
                       <span class="prompt_manager_prompt_controls">
-                      <span></span>
+                        <span></span>
                         ${inspectSpanHtml}
+                        ${advancedEnabled ? editSpanHtml: ''}
                       </span>
                    </span>`
                 : `<span>
@@ -1160,6 +1237,14 @@ PromptManagerModule.prototype.renderPromptManagerListItems = function () {
         el.addEventListener('click', this.handleEdit);
     });
 
+    Array.from(promptManagerList.getElementsByClassName('prompt-manager-edit-chathistory-action')).forEach(el => {
+        el.addEventListener('click', this.handleChatHistoryEdit);
+    });
+
+    Array.from(promptManagerList.getElementsByClassName('prompt-manager-edit-dialogueexamples-action')).forEach(el => {
+        el.addEventListener('click', this.handleDialogueExamplesEdit);
+    });
+
     Array.from(promptManagerList.querySelectorAll('.prompt-manager-toggle-action')).forEach(el => {
         el.addEventListener('click', this.handleToggle);
     });
@@ -1438,8 +1523,13 @@ const openAiDefaultPromptList = [
 ];
 
 const defaultPromptManagerSettings = {
-    "prompt_manager_settings": {
-        "showAdvancedSettings": false
+    prompt_manager_settings: {
+        showAdvancedSettings: false,
+        utilityPrompts: {
+            newChat: '[Start a new Chat]',
+            newGroupChat: '[Start a new group chat. Group members: {{names}}]',
+            newExampleChat: '[Start a new Chat]',
+        }
     }
 };
 
diff --git a/public/scripts/openai.js b/public/scripts/openai.js
index d907b4fcd..31c767731 100644
--- a/public/scripts/openai.js
+++ b/public/scripts/openai.js
@@ -398,9 +398,12 @@ function formatWorldInfo(value) {
  * @param {ChatCompletion} chatCompletion - An instance of ChatCompletion class that will be populated with the prompts.
  */
 function populateChatHistory(prompts, chatCompletion) {
+    const newChat = promptManager.getSettings('utilityPrompts').newChat;
+    const newGroupChat = promptManager.getSettings('utilityPrompts').newGroupChat.replace('{{names}}', '${names}');
+
     // Chat History
     chatCompletion.add(new MessageCollection('chatHistory'), prompts.index('chatHistory'));
-    const mainChat = selected_group ? '[Start a new group chat. Group members: ${names}]' : '[Start a new Chat]';
+    const mainChat = selected_group ? newGroupChat : newChat;
     const mainChatMessage = new Message('system', mainChat, 'newMainChat');
 
     chatCompletion.reserveBudget(mainChatMessage);
@@ -415,7 +418,7 @@ function populateChatHistory(prompts, chatCompletion) {
     [...openai_msgs].reverse().every((chatPrompt, index) => {
         // We do not want to mutate the prompt
         const prompt = new Prompt(chatPrompt);
-        prompt.identifier = 'chatHistory-' + index;
+        prompt.identifier = `chatHistory-${openai_msgs.length - index}`;
         const chatMessage = Message.fromPrompt(promptManager.preparePrompt(prompt));
 
         if (true === promptManager.serviceSettings.names_in_completion && prompt.name)
@@ -440,8 +443,9 @@ function populateChatHistory(prompts, chatCompletion) {
 function populateDialogueExamples(prompts, chatCompletion) {
     chatCompletion.add( new MessageCollection('dialogueExamples'), prompts.index('dialogueExamples'));
     if (openai_msgs_example.length) {
+        const newExampleChat = promptManager.getSettings('utilityPrompts').newExampleChat;
         // Insert chat message examples if there's enough budget if there is enough budget left for at least one example.
-        const dialogueExampleChat = new Message('system', '[Start a new Chat]', 'newChat');
+        const dialogueExampleChat = new Message('system', newExampleChat, 'newChat');
         const prompt = openai_msgs_example[0];
         const dialogueExample = new Message(prompt[0]?.role || 'system', prompt[0]?.content || '', 'dialogueExampleTest');
 
@@ -1375,7 +1379,7 @@ class MessageCollection  {
      * @returns {Object} The found item, or undefined if no item was found.
      */
     getItemByIdentifier(identifier) {
-        return this.collection.find(item => item.identifier === identifier);
+        return this.collection.find(item => item?.identifier === identifier);
     }
 
     /**