rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add HTML templates for context editor (hidden)

Browse Source
This commit is contained in:
SillyLossy
2023-05-19 21:38:12 +03:00
parent 84900917a0
commit deb51fbc74
3 changed files with 121 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
public/index.html
View File

@@ -63,6 +63,7 @@
<script type="module" src="scripts/slash-commands.js"></script>
<script type="module" src="scripts/tags.js"></script>
<script type="module" src="scripts/secrets.js"></script>
<script type="module" src="scripts/context-template.js"></script>
<script type="text/javascript" src="scripts/toolcool-color-picker.js"></script>
<title>SillyTavern</title>
@@ -1349,6 +1350,21 @@
<label class="checkbox_label" for="collapse-newlines-checkbox"><input id="collapse-newlines-checkbox" type="checkbox" />
Remove Empty New Lines from Output
</label>
<div id="context-templates-block" class="template_element">
<h4>
Context Templates
</h4>
<div class="flex-container flexGap5">
<select id="prompt_template" class="flex1 margin0">
<option value="None">None (Default)</option>
<option value="Classic">Classic</option>
<option value="Pygmalion">Pygmalion</option>
</select>
<div id="context_template_edit" class="menu_button fa-solid fa-pencil margin0" title="Edit"></div>
<div id="context_template_new" class="menu_button fa-solid fa-plus margin0" title="Add new"></div>
<div id="context_template_delete" class="menu_button fa-solid fa-trash-can margin0" title="Delete"></div>
</div>
</div>
<div>
<h4>Pygmalion Formatting</h4>
<select id="pygmalion_formatting">
@@ -1381,24 +1397,6 @@
</label>
</div>
</div>
<div id="context-templates-block" style="display:none">
<h4>
Context Templates
</h4>
<div>
<label>Presets:</label>
<div class="flex-container flexGap5">
<select id="prompt_template" class="flex1 margin0">
<option value="None">None</option>
<option value="Classic">Classic</option>
<option value="Pygmalion">Pygmalion</option>
</select>
<div id="context_template_edit" class="menu_button fa-solid fa-pencil margin0" title="Edit"></div>
<div id="context_template_new" class="menu_button fa-solid fa-plus margin0" title="Add new"></div>
<div id="context_template_delete" class="menu_button fa-solid fa-trash-can margin0" title="Delete"></div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -2203,6 +2201,58 @@
</div>
<!-- templates for JS to reuse when needed -->
<div id="context_editor_template" class="template_element">
<div class="context_editor">
<h3>Context Template Editor</h3>
<div class="inline-drawer wide100p">
<div class="inline-drawer-toggle inline-drawer-header">
Substitution Parameters
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<i>Click to copy.</i>
<ul class="template_parameters_list justifyLeft margin0">
<li><code>{{char}}</code> - current character name</li>
<li><code>{{user}}</code> - current user name</li>
<li><code>{{description}}</code> - character description</li>
<li><code>{{scenario}}</code> - character or group scenario</li>
<li><code>{{personality}}</code> - character personality</li>
<li><code>{{mesExamples}}</code> - message examples</li>
<li><code>{{wiBeforeCharacter}}</code> - activated World Info entries (Before Char)</li>
<li><code>{{wiAfterCharacter}}</code> - activated World Info entries (After Char)</li>
<li><code>{{instructSystemPrompt}}</code> - system prompt (Instruct mode only)</li>
</ul>
</div>
</div>
<div>
<div class="margin-bot-10px wide100p justifyLeft">
Story String Template
</div>
<textarea class="wide100p textarea_compact story_string_template" rows="8"></textarea>
<div>
<small>Lines containing parameters resolving to an empty value will be removed from the template string.</small>
</div>
</div>
<div>
<div class="title_restorable">
<span>Chat Injections</span>
<div title="Add chat injection" class="menu_button">
<div class="fa-solid fa-plus"></div>
</div>
</div>
<div class="chat_injections_list flex-container flexFlowColumn flexGap5 wide100p"></div>
</div>
</div>
</div>
<div id="chat_injection_template" class="template_element">
<div class="chat_injection flex-container wide100p flexGap5 flexnowrap">
<input class="chat_injection_text textarea_compact text_pole flex2" placeholder="Injection text (supports parameters)" type="text" />
<input class="chat_injection_depth textarea_compact text_pole flex1" placeholder="Injection depth" type="number" min="0" max="100" />
<div title="Remove injection" class="menu_button fa-solid fa-xmark chat_injection_remove"></div>
</div>
</div>
<div id="group_scenario_template" class="template_element">
<div class="group_scenario range-block flexFlowColumn flex-container">

28
public/scripts/context-template.js Normal file
View File

@@ -0,0 +1,28 @@
import {
callPopup,
} from '../script.js';
function openContextTemplateEditor() {
const editor = $('#context_editor_template .context_editor').clone();
$('#dialogue_popup').addClass('large_dialogue_popup wide_dialogue_popup');
callPopup(editor.html(), 'text');
}
function copyTemplateParameter(event) {
const text = $(event.target).text();
navigator.clipboard.writeText(text);
const copiedMsg = document.createElement("div");
copiedMsg.classList.add('code-copied');
copiedMsg.innerText = "Copied!";
copiedMsg.style.top = `${event.clientY - 55}px`;
copiedMsg.style.left = `${event.clientX - 55}px`;
document.body.append(copiedMsg);
setTimeout(() => {
document.body.removeChild(copiedMsg);
}, 1000);
}
jQuery(() => {
$('#context_template_edit').on('click', openContextTemplateEditor);
$(document).on('pointerup', '.template_parameters_list code', copyTemplateParameter);
})

26
public/style.css
View File

@@ -921,6 +921,26 @@ select {
}
.chat_injections_list:empty {
width: 100%;
height: 100%;
}
.chat_injections_list:empty::before {
display: flex;
align-items: center;
justify-content: center;
content: "No injections";
font-weight: bolder;
width: 100%;
height: 100%;
opacity: 0.8;
min-height: 3rem;
}
.template_parameters_list code {
cursor: pointer;
}
h3 {
margin: 10px 0;
@@ -3602,7 +3622,7 @@ label[for="extensions_autoconnect"] {
.code-copied {
position: absolute;
z-index: 99;
z-index: 10000;
font-size: var(--mainFontSize);
color: var(--SmartThemeBodyColor);
background-color: var(--SmartThemeFastUIBGColor);
@@ -3744,6 +3764,10 @@ toolcool-color-picker {
flex: 1;
}
.flex2 {
flex: 2;
}
.flexFlowColumn {
flex-flow: column;
}