Add HTML templates for context editor (hidden)

public/index.html

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

public/scripts/context-template.js

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

public/style.css

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