rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-02-03 04:37:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

Allow user to edit new chat, new group chat and new example chat prompts

Browse Source
This commit is contained in:
maver 2023-07-08 22:35:12 +02:00
parent 40079f7660
commit 9669199408
4 changed files with 158 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/css/promptmanager.css
View File

@ -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;

35
public/index.html
View File

@ -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>

126
public/scripts/PromptManager.js
View File

@ -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]',
}
}
};

12
public/scripts/openai.js
View File

@ -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);
}
/**