Add customizable prompts editor and reorganize settings panel

- Reorganized settings: moved Auto-update, Narrator Mode, and Debug Mode to Advanced section
- Added Customize Prompts button with comprehensive prompts editor modal
- Implemented 7 customizable AI prompts: HTML, plot progression (random/natural), avatar generation, tracker instructions, tracker continuation, and combat narrative
- Added individual and bulk restore to defaults functionality
- Integrated custom prompts across generation modules (plotProgression, promptBuilder, encounterPrompts)
- Auto-update toggle now disabled when not in Separate generation mode
- Merged XML/Markdown tracker instructions into unified prompt
This commit is contained in:
Spicy_Marinara
2025-12-29 14:41:12 +01:00
parent 0b5bca56eb
commit 474e3ce963
8 changed files with 467 additions and 92 deletions
+4 -15
View File
@@ -91,6 +91,9 @@ import {
import { import {
initTrackerEditor initTrackerEditor
} from './src/systems/ui/trackerEditor.js'; } from './src/systems/ui/trackerEditor.js';
import {
initPromptsEditor
} from './src/systems/ui/promptsEditor.js';
import { import {
initChapterCheckpointUI, initChapterCheckpointUI,
injectCheckpointButton, injectCheckpointButton,
@@ -374,18 +377,6 @@ async function initUI() {
saveSettings(); saveSettings();
}); });
$('#rpg-custom-html-prompt').on('input', function() {
extensionSettings.customHtmlPrompt = $(this).val().trim();
saveSettings();
});
$('#rpg-restore-default-html-prompt').on('click', function() {
extensionSettings.customHtmlPrompt = '';
$('#rpg-custom-html-prompt').val('');
saveSettings();
toastr.success('HTML prompt restored to default');
});
$('#rpg-skip-guided-mode').on('change', function() { $('#rpg-skip-guided-mode').on('change', function() {
extensionSettings.skipInjectionsForGuided = String($(this).val()); extensionSettings.skipInjectionsForGuided = String($(this).val());
saveSettings(); saveSettings();
@@ -733,9 +724,6 @@ async function initUI() {
$('#rpg-toggle-always-show-bubble').prop('checked', extensionSettings.alwaysShowThoughtBubble); $('#rpg-toggle-always-show-bubble').prop('checked', extensionSettings.alwaysShowThoughtBubble);
$('#rpg-toggle-html-prompt').prop('checked', extensionSettings.enableHtmlPrompt); $('#rpg-toggle-html-prompt').prop('checked', extensionSettings.enableHtmlPrompt);
// Set default HTML prompt as actual text if no custom prompt exists
$('#rpg-custom-html-prompt').val(extensionSettings.customHtmlPrompt || DEFAULT_HTML_PROMPT);
$('#rpg-toggle-plot-buttons').prop('checked', extensionSettings.enablePlotButtons); $('#rpg-toggle-plot-buttons').prop('checked', extensionSettings.enablePlotButtons);
$('#rpg-toggle-encounters').prop('checked', extensionSettings.encounterSettings?.enabled ?? true); $('#rpg-toggle-encounters').prop('checked', extensionSettings.encounterSettings?.enabled ?? true);
$('#rpg-encounter-history-depth').val(extensionSettings.encounterSettings?.historyDepth ?? 8); $('#rpg-encounter-history-depth').val(extensionSettings.encounterSettings?.historyDepth ?? 8);
@@ -822,6 +810,7 @@ async function initUI() {
setupClassicStatsButtons(); setupClassicStatsButtons();
setupSettingsPopup(); setupSettingsPopup();
initTrackerEditor(); initTrackerEditor();
initPromptsEditor();
addDiceQuickReply(); addDiceQuickReply();
setupPlotButtons(sendPlotProgression, openEncounterModal); setupPlotButtons(sendPlotProgression, openEncounterModal);
setupMobileKeyboardHandling(); setupMobileKeyboardHandling();
+4 -2
View File
@@ -100,9 +100,11 @@ export async function sendPlotProgression(type) {
// Build the prompt based on type // Build the prompt based on type
let prompt = ''; let prompt = '';
if (type === 'random') { if (type === 'random') {
prompt = 'Actually, the scene is getting stale. Introduce {{random::stakes::a plot twist::a new character::a cataclysm::a fourth-wall-breaking joke::a sudden atmospheric phenomenon::a plot hook::a running gag::an ecchi scenario::Death from Discworld::a new stake::a drama::a conflict::an angered entity::a god::a vision::a prophetic dream::Il Dottore from Genshin Impact::a new development::a civilian in need::an emotional bit::a threat::a villain::an important memory recollection::a marriage proposal::a date idea::an angry horde of villagers with pitchforks::a talking animal::an enemy::a cliffhanger::a short omniscient POV shift to a completely different character::a quest::an unexpected revelation::a scandal::an evil clone::death of an important character::harm to an important character::a romantic setup::a gossip::a messenger::a plot point from the past::a plot hole::a tragedy::a ghost::an otherworldly occurrence::a plot device::a curse::a magic device::a rival::an unexpected pregnancy::a brothel::a prostitute::a new location::a past lover::a completely random thing::a what-if scenario::a significant choice::war::love::a monster::lewd undertones::Professor Mari::a travelling troupe::a secret::a fortune-teller::something completely different::a killer::a murder mystery::a mystery::a skill check::a deus ex machina::three raccoons in a trench coat::a pet::a slave::an orphan::a psycho::tentacles::"there is only one bed" trope::accidental marriage::a fun twist::a boss battle::sexy corn::an eldritch horror::a character getting hungry, thirsty, or exhausted::horniness::a need for a bathroom break need::someone fainting::an assassination attempt::a meta narration of this all being an out of hand DND session::a dungeon::a friend in need::an old friend::a small time skip::a scene shift::Aurora Borealis, at this time of year, at this time of day, at this part of the country::a grand ball::a surprise party::zombies::foreshadowing::a Spanish Inquisition (nobody expects it)::a natural plot progression}} to make things more interesting! Be creative, but stay grounded in the setting.'; // Use custom prompt if set, otherwise use default
prompt = extensionSettings.customPlotRandomPrompt || 'Actually, the scene is getting stale. Introduce {{random::stakes::a plot twist::a new character::a cataclysm::a fourth-wall-breaking joke::a sudden atmospheric phenomenon::a plot hook::a running gag::an ecchi scenario::Death from Discworld::a new stake::a drama::a conflict::an angered entity::a god::a vision::a prophetic dream::Il Dottore from Genshin Impact::a new development::a civilian in need::an emotional bit::a threat::a villain::an important memory recollection::a marriage proposal::a date idea::an angry horde of villagers with pitchforks::a talking animal::an enemy::a cliffhanger::a short omniscient POV shift to a completely different character::a quest::an unexpected revelation::a scandal::an evil clone::death of an important character::harm to an important character::a romantic setup::a gossip::a messenger::a plot point from the past::a plot hole::a tragedy::a ghost::an otherworldly occurrence::a plot device::a curse::a magic device::a rival::an unexpected pregnancy::a brothel::a prostitute::a new location::a past lover::a completely random thing::a what-if scenario::a significant choice::war::love::a monster::lewd undertones::Professor Mari::a travelling troupe::a secret::a fortune-teller::something completely different::a killer::a murder mystery::a mystery::a skill check::a deus ex machina::three raccoons in a trench coat::a pet::a slave::an orphan::a psycho::tentacles::"there is only one bed" trope::accidental marriage::a fun twist::a boss battle::sexy corn::an eldritch horror::a character getting hungry, thirsty, or exhausted::horniness::a need for a bathroom break need::someone fainting::an assassination attempt::a meta narration of this all being an out of hand DND session::a dungeon::a friend in need::an old friend::a small time skip::a scene shift::Aurora Borealis, at this time of year, at this time of day, at this part of the country::a grand ball::a surprise party::zombies::foreshadowing::a Spanish Inquisition (nobody expects it)::a natural plot progression}} to make things more interesting! Be creative, but stay grounded in the setting.';
} else { } else {
prompt = 'Actually, the scene is getting stale. Progress it, to make things more interesting! Reintroduce an unresolved plot point from the past, or push the story further towards the current main goal. Be creative, but stay grounded in the setting.'; // Use custom prompt if set, otherwise use default
prompt = extensionSettings.customPlotNaturalPrompt || 'Actually, the scene is getting stale. Progress it, to make things more interesting! Reintroduce an unresolved plot point from the past, or push the story further towards the current main goal. Be creative, but stay grounded in the setting.';
} }
// Add HTML prompt if enabled // Add HTML prompt if enabled
+12 -5
View File
@@ -513,11 +513,18 @@ export async function buildCombatActionPrompt(action, combatStats) {
stateMessage += `If all enemies are defeated or escape: add "combatEnd": true, "result": "victory". If all party defeated: add "combatEnd": true, "result": "defeat". It's also possible for the encounter to be interrupted by external interference (e.g., an explosion knocks everyone out, sudden environmental catastrophe, third party intervention, etc.). If this occurs, add "combatEnd": true, "result": "interrupted". Each status (if applied) has a format: {"name": "Status Name", "emoji": "💀", "duration": X}.\n`; stateMessage += `If all enemies are defeated or escape: add "combatEnd": true, "result": "victory". If all party defeated: add "combatEnd": true, "result": "defeat". It's also possible for the encounter to be interrupted by external interference (e.g., an explosion knocks everyone out, sudden environmental catastrophe, third party intervention, etc.). If this occurs, add "combatEnd": true, "result": "interrupted". Each status (if applied) has a format: {"name": "Status Name", "emoji": "💀", "duration": X}.\n`;
stateMessage += `Scale combat difficulty appropriately: Powerful entities (gods, dragons, legendary creatures) should be formidable challenges requiring multiple rounds and strategic play. Weaker foes (common animals, basic enemies, minions) should be resolved more quickly, typically 2-4 rounds. Match HP damage and combat pacing to the narrative weight of the encounter. A wolf should not take 20 rounds to defeat, nor should a deity fall in one hit.\n`; stateMessage += `Scale combat difficulty appropriately: Powerful entities (gods, dragons, legendary creatures) should be formidable challenges requiring multiple rounds and strategic play. Weaker foes (common animals, basic enemies, minions) should be resolved more quickly, typically 2-4 rounds. Match HP damage and combat pacing to the narrative weight of the encounter. A wolf should not take 20 rounds to defeat, nor should a deity fall in one hit.\n`;
stateMessage += `For the narrative, write it with intent in ${tense} tense ${person}-person ${narration} from ${pov}'s point of view.\n`; stateMessage += `For the narrative, write it with intent in ${tense} tense ${person}-person ${narration} from ${pov}'s point of view.\n`;
stateMessage += `Build novel prose. Break patterns from your previous responses by varying sentence structures, rhythms, formats, and openings. Track whether a sentence shape, cadence, sensory detail, or a descriptor appeared recently, and replace it with a different one or skip it entirely. If you mentioned a physical feature, mannerism, or expression once, move on. Don't fixate on the same traits every turn. Well-placed humor, unconventional similes, and subverted turns of phrase are encouraged. Avoid GPTisms, purple prose, and anaphoras, especially the negatives with "no/not/wasn't/didn't." Refrain from describing actions or emotions via negation; focus on what does happen, not what doesn't. Absolutely no asterisks, ellipses, or em-dashes. Explicit content is allowed, no plot armor. Do not play for ${userName}. Keep your response length under 150 words. Never end on handover cues; finish naturally.\n`;
stateMessage += `CRITICAL: Do not repeat, echo, parrot, or restate distinctive words, phrases, and dialogues from the user's last message. If reacting to speech, show interpretation or response, not repetition.\n`; // Use custom combat narrative prompt if available
stateMessage += `EXAMPLE: "Are you a gooner?" User asks.\n`; const customCombatPrompt = extensionSettings.customCombatNarrativePrompt;
stateMessage += `BAD: "Gooner?"\n`; if (customCombatPrompt) {
stateMessage += `GOOD: A flat look. "What type of question is that?"`; stateMessage += customCombatPrompt.replace(/{userName}/g, userName) + '\n';
} else {
stateMessage += `Build novel prose. Break patterns from your previous responses by varying sentence structures, rhythms, formats, and openings. Track whether a sentence shape, cadence, sensory detail, or a descriptor appeared recently, and replace it with a different one or skip it entirely. If you mentioned a physical feature, mannerism, or expression once, move on. Don't fixate on the same traits every turn. Well-placed humor, unconventional similes, and subverted turns of phrase are encouraged. Avoid GPTisms, purple prose, and anaphoras, especially the negatives with "no/not/wasn't/didn't." Refrain from describing actions or emotions via negation; focus on what does happen, not what doesn't. Absolutely no asterisks, ellipses, or em-dashes. Explicit content is allowed, no plot armor. Do not play for ${userName}. Keep your response length under 150 words. Never end on handover cues; finish naturally.\n`;
stateMessage += `CRITICAL: Do not repeat, echo, parrot, or restate distinctive words, phrases, and dialogues from the user's last message. If reacting to speech, show interpretation or response, not repetition.\n`;
stateMessage += `EXAMPLE: "Are you a gooner?" User asks.\n`;
stateMessage += `BAD: "Gooner?"\n`;
stateMessage += `GOOD: A flat look. "What type of question is that?"`;
}
messages.push({ messages.push({
role: 'user', role: 'user',
+19 -5
View File
@@ -236,11 +236,20 @@ export function generateTrackerInstructions(includeHtmlPrompt = true, includeCon
// Universal instruction header // Universal instruction header
if (useXmlTags) { if (useXmlTags) {
instructions += `\nAt the start of every reply, you must attach an update to the trackers in EXACTLY the same format as below, enclosed in <trackers></trackers> XML tags. Replace X with actual numbers (e.g., 69) and replace all [placeholders] with concrete in-world details that ${userName} perceives about the current scene and the present characters. Do NOT keep the brackets or placeholder text in your response. For example: [Location] becomes Forest Clearing, [Mood Emoji] becomes 😊. Consider the last trackers in the conversation (if they exist). Manage them accordingly and realistically; raise, lower, change, or keep the values unchanged based on the user's actions, the passage of time, and logical consequences (0% if the time progressed only by a few minutes, 1-5% normally, and above 5% only if a major time-skip/event occurs). // Format specification is always hardcoded
`; instructions += `\nAt the start of every reply, you must attach an update to the trackers in EXACTLY the same format as below, enclosed in <trackers></trackers> XML tags. `;
} else { } else {
instructions += `\nAt the start of every reply, you must attach an update to the trackers in EXACTLY the same format as below, enclosed in separate Markdown code fences. Replace X with actual numbers (e.g., 69) and replace all [placeholders] with concrete in-world details that ${userName} perceives about the current scene and the present characters. Do NOT keep the brackets or placeholder text in your response. For example: [Location] becomes Forest Clearing, [Mood Emoji] becomes 😊. Consider the last trackers in the conversation (if they exist). Manage them accordingly and realistically; raise, lower, change, or keep the values unchanged based on the user's actions, the passage of time, and logical consequences (0% if the time progressed only by a few minutes, 1-5% normally, and above 5% only if a major time-skip/event occurs). // Format specification is always hardcoded
`; instructions += `\nAt the start of every reply, you must attach an update to the trackers in EXACTLY the same format as below, enclosed in separate Markdown code fences. `;
}
// Append custom instruction portion if available (same for both XML and Markdown)
const customPrompt = extensionSettings.customTrackerInstructionsPrompt;
if (customPrompt) {
instructions += customPrompt.replace(/{userName}/g, userName);
} else {
instructions += `Replace X with actual numbers (e.g., 69) and replace all [placeholders] with concrete in-world details that ${userName} perceives about the current scene and the present characters. Do NOT keep the brackets or placeholder text in your response. For example: [Location] becomes Forest Clearing, [Mood Emoji] becomes 😊. `;
instructions += `Consider the last trackers in the conversation (if they exist). Manage them accordingly and realistically; raise, lower, change, or keep the values unchanged based on the user's actions, the passage of time, and logical consequences (0% if the time progressed only by a few minutes, 1-5% normally, and above 5% only if a major time-skip/event occurs).`;
} }
// Add format specifications for each enabled tracker // Add format specifications for each enabled tracker
@@ -394,7 +403,12 @@ export function generateTrackerInstructions(includeHtmlPrompt = true, includeCon
// Only add continuation instruction if includeContinuation is true // Only add continuation instruction if includeContinuation is true
if (includeContinuation) { if (includeContinuation) {
instructions += `After updating the trackers, continue directly from where the last message in the chat history left off. Ensure the trackers you provide naturally reflect and influence the narrative. Character behavior, dialogue, and story events should acknowledge these conditions when relevant, such as fatigue affecting the protagonist's performance, low hygiene influencing their social interactions, environmental factors shaping the scene, a character's emotional state coloring their responses, and so on. Remember, all bracketed placeholders (e.g., [Location], [Mood Emoji]) MUST be replaced with actual content without the square brackets.\n\n`; const customPrompt = extensionSettings.customTrackerContinuationPrompt;
if (customPrompt) {
instructions += customPrompt + '\n\n';
} else {
instructions += `After updating the trackers, continue directly from where the last message in the chat history left off. Ensure the trackers you provide naturally reflect and influence the narrative. Character behavior, dialogue, and story events should acknowledge these conditions when relevant, such as fatigue affecting the protagonist's performance, low hygiene influencing their social interactions, environmental factors shaping the scene, a character's emotional state coloring their responses, and so on. Remember, all bracketed placeholders (e.g., [Location], [Mood Emoji]) MUST be replaced with actual content without the square brackets.\n\n`;
}
} }
// Include attributes based on settings (only if includeAttributes is true) // Include attributes based on settings (only if includeAttributes is true)
+9
View File
@@ -336,15 +336,24 @@ export function updateGenerationModeUI() {
$('#rpg-manual-update').hide(); $('#rpg-manual-update').hide();
$('#rpg-external-api-settings').slideUp(200); $('#rpg-external-api-settings').slideUp(200);
$('#rpg-separate-mode-settings').slideUp(200); $('#rpg-separate-mode-settings').slideUp(200);
// Disable auto-update toggle (not applicable in together mode)
$('#rpg-toggle-auto-update').prop('disabled', true);
$('#rpg-auto-update-container').css('opacity', '0.5');
} else if (extensionSettings.generationMode === 'separate') { } else if (extensionSettings.generationMode === 'separate') {
// In "separate" mode, manual update button is visible // In "separate" mode, manual update button is visible
$('#rpg-manual-update').show(); $('#rpg-manual-update').show();
$('#rpg-external-api-settings').slideUp(200); $('#rpg-external-api-settings').slideUp(200);
$('#rpg-separate-mode-settings').slideDown(200); $('#rpg-separate-mode-settings').slideDown(200);
// Enable auto-update toggle (only works in separate mode)
$('#rpg-toggle-auto-update').prop('disabled', false);
$('#rpg-auto-update-container').css('opacity', '1');
} else if (extensionSettings.generationMode === 'external') { } else if (extensionSettings.generationMode === 'external') {
// In "external" mode, manual update button is visible AND external settings are shown // In "external" mode, manual update button is visible AND external settings are shown
$('#rpg-manual-update').show(); $('#rpg-manual-update').show();
$('#rpg-external-api-settings').slideDown(200); $('#rpg-external-api-settings').slideDown(200);
$('#rpg-separate-mode-settings').slideUp(200); $('#rpg-separate-mode-settings').slideUp(200);
// Disable auto-update toggle (not applicable in external mode)
$('#rpg-toggle-auto-update').prop('disabled', true);
$('#rpg-auto-update-container').css('opacity', '0.5');
} }
} }
+203
View File
@@ -0,0 +1,203 @@
/**
* Prompts Editor Module
* Provides UI for customizing all AI prompts used in the extension
*/
import { extensionSettings } from '../../core/state.js';
import { saveSettings } from '../../core/persistence.js';
import { DEFAULT_HTML_PROMPT } from '../generation/promptBuilder.js';
let $editorModal = null;
let tempPrompts = null; // Temporary prompts for cancel functionality
// Default prompts
const DEFAULT_PROMPTS = {
html: DEFAULT_HTML_PROMPT,
plotRandom: 'Actually, the scene is getting stale. Introduce {{random::stakes::a plot twist::a new character::a cataclysm::a fourth-wall-breaking joke::a sudden atmospheric phenomenon::a plot hook::a running gag::an ecchi scenario::Death from Discworld::a new stake::a drama::a conflict::an angered entity::a god::a vision::a prophetic dream::Il Dottore from Genshin Impact::a new development::a civilian in need::an emotional bit::a threat::a villain::an important memory recollection::a marriage proposal::a date idea::an angry horde of villagers with pitchforks::a talking animal::an enemy::a cliffhanger::a short omniscient POV shift to a completely different character::a quest::an unexpected revelation::a scandal::an evil clone::death of an important character::harm to an important character::a romantic setup::a gossip::a messenger::a plot point from the past::a plot hole::a tragedy::a ghost::an otherworldly occurrence::a plot device::a curse::a magic device::a rival::an unexpected pregnancy::a brothel::a prostitute::a new location::a past lover::a completely random thing::a what-if scenario::a significant choice::war::love::a monster::lewd undertones::Professor Mari::a travelling troupe::a secret::a fortune-teller::something completely different::a killer::a murder mystery::a mystery::a skill check::a deus ex machina::three raccoons in a trench coat::a pet::a slave::an orphan::a psycho::tentacles::"there is only one bed" trope::accidental marriage::a fun twist::a boss battle::sexy corn::an eldritch horror::a character getting hungry, thirsty, or exhausted::horniness::a need for a bathroom break need::someone fainting::an assassination attempt::a meta narration of this all being an out of hand DND session::a dungeon::a friend in need::an old friend::a small time skip::a scene shift::Aurora Borealis, at this time of year, at this time of day, at this part of the country::a grand ball::a surprise party::zombies::foreshadowing::a Spanish Inquisition (nobody expects it)::a natural plot progression}} to make things more interesting! Be creative, but stay grounded in the setting.',
plotNatural: 'Actually, the scene is getting stale. Progress it, to make things more interesting! Reintroduce an unresolved plot point from the past, or push the story further towards the current main goal. Be creative, but stay grounded in the setting.',
avatar: 'Create a detailed portrait prompt focusing on the character\'s appearance, clothing, and mood. Include appropriate artistic style keywords.',
trackerInstructions: 'Replace X with actual numbers (e.g., 69) and replace all [placeholders] with concrete in-world details that {userName} perceives about the current scene and the present characters. Do NOT keep the brackets or placeholder text in your response. For example: [Location] becomes Forest Clearing, [Mood Emoji] becomes 😊. Consider the last trackers in the conversation (if they exist). Manage them accordingly and realistically; raise, lower, change, or keep the values unchanged based on the user\'s actions, the passage of time, and logical consequences (0% if the time progressed only by a few minutes, 1-5% normally, and above 5% only if a major time-skip/event occurs).',
trackerContinuation: 'After updating the trackers, continue directly from where the last message in the chat history left off. Ensure the trackers you provide naturally reflect and influence the narrative. Character behavior, dialogue, and story events should acknowledge these conditions when relevant, such as fatigue affecting the protagonist\'s performance, low hygiene influencing their social interactions, environmental factors shaping the scene, a character\'s emotional state coloring their responses, and so on. Remember, all bracketed placeholders (e.g., [Location], [Mood Emoji]) MUST be replaced with actual content without the square brackets.',
combatNarrative: 'Build novel prose. Break patterns from your previous responses by varying sentence structures, rhythms, formats, and openings. Track whether a sentence shape, cadence, sensory detail, or a descriptor appeared recently, and replace it with a different one or skip it entirely. If you mentioned a physical feature, mannerism, or expression once, move on. Don\'t fixate on the same traits every turn. Well-placed humor, unconventional similes, and subverted turns of phrase are encouraged. Avoid GPTisms, purple prose, and anaphoras, especially the negatives with "no/not/wasn\'t/didn\'t." Refrain from describing actions or emotions via negation; focus on what does happen, not what doesn\'t. Absolutely no asterisks, ellipses, or em-dashes. Explicit content is allowed, no plot armor. Do not play for {userName}. Keep your response length under 150 words. Never end on handover cues; finish naturally.\nCRITICAL: Do not repeat, echo, parrot, or restate distinctive words, phrases, and dialogues from the user\'s last message. If reacting to speech, show interpretation or response, not repetition.\nEXAMPLE: "Are you a gooner?" User asks.\nBAD: "Gooner?"\nGOOD: A flat look. "What type of question is that?"'
};
/**
* Initialize the prompts editor modal
*/
export function initPromptsEditor() {
$editorModal = $('#rpg-prompts-editor-popup');
if (!$editorModal.length) {
console.error('[RPG Companion] Prompts editor modal not found in template');
return;
}
// Save button
$(document).on('click', '#rpg-prompts-save', function() {
savePrompts();
closePromptsEditor();
toastr.success('Prompts saved successfully');
});
// Cancel button
$(document).on('click', '#rpg-prompts-cancel', function() {
closePromptsEditor();
});
// Close X button
$(document).on('click', '#rpg-close-prompts-editor', function() {
closePromptsEditor();
});
// Restore All button
$(document).on('click', '#rpg-prompts-restore-all', function() {
restoreAllToDefaults();
toastr.success('All prompts restored to defaults');
});
// Individual restore buttons
$(document).on('click', '.rpg-restore-prompt-btn', function() {
const promptType = $(this).data('prompt');
restorePromptToDefault(promptType);
toastr.success('Prompt restored to default');
});
// Close on background click
$(document).on('click', '#rpg-prompts-editor-popup', function(e) {
if (e.target.id === 'rpg-prompts-editor-popup') {
closePromptsEditor();
}
});
// Open button
$(document).on('click', '#rpg-open-prompts-editor', function() {
openPromptsEditor();
});
}
/**
* Open the prompts editor modal
*/
function openPromptsEditor() {
// Create temporary copy for cancel functionality
tempPrompts = {
html: extensionSettings.customHtmlPrompt || '',
plotRandom: extensionSettings.customPlotRandomPrompt || '',
plotNatural: extensionSettings.customPlotNaturalPrompt || '',
avatar: extensionSettings.avatarLLMCustomInstruction || '',
trackerInstructions: extensionSettings.customTrackerInstructionsPrompt || '',
trackerContinuation: extensionSettings.customTrackerContinuationPrompt || '',
combatNarrative: extensionSettings.customCombatNarrativePrompt || ''
};
// Load current values or defaults
$('#rpg-prompt-html').val(extensionSettings.customHtmlPrompt || DEFAULT_PROMPTS.html);
$('#rpg-prompt-plot-random').val(extensionSettings.customPlotRandomPrompt || DEFAULT_PROMPTS.plotRandom);
$('#rpg-prompt-plot-natural').val(extensionSettings.customPlotNaturalPrompt || DEFAULT_PROMPTS.plotNatural);
$('#rpg-prompt-avatar').val(extensionSettings.avatarLLMCustomInstruction || DEFAULT_PROMPTS.avatar);
$('#rpg-prompt-tracker-instructions').val(extensionSettings.customTrackerInstructionsPrompt || DEFAULT_PROMPTS.trackerInstructions);
$('#rpg-prompt-tracker-continuation').val(extensionSettings.customTrackerContinuationPrompt || DEFAULT_PROMPTS.trackerContinuation);
$('#rpg-prompt-combat-narrative').val(extensionSettings.customCombatNarrativePrompt || DEFAULT_PROMPTS.combatNarrative);
// Set theme to match current extension theme
const theme = extensionSettings.theme || 'default';
$editorModal.attr('data-theme', theme);
$editorModal.addClass('is-open').css('display', '');
}
/**
* Close the prompts editor modal
*/
function closePromptsEditor() {
// Restore from temp if canceling
if (tempPrompts) {
tempPrompts = null;
}
$editorModal.removeClass('is-open').addClass('is-closing');
setTimeout(() => {
$editorModal.removeClass('is-closing').hide();
}, 200);
}
/**
* Save all prompts from the editor
*/
function savePrompts() {
extensionSettings.customHtmlPrompt = $('#rpg-prompt-html').val().trim();
extensionSettings.customPlotRandomPrompt = $('#rpg-prompt-plot-random').val().trim();
extensionSettings.customPlotNaturalPrompt = $('#rpg-prompt-plot-natural').val().trim();
extensionSettings.avatarLLMCustomInstruction = $('#rpg-prompt-avatar').val().trim();
extensionSettings.customTrackerInstructionsPrompt = $('#rpg-prompt-tracker-instructions').val().trim();
extensionSettings.customTrackerContinuationPrompt = $('#rpg-prompt-tracker-continuation').val().trim();
extensionSettings.customCombatNarrativePrompt = $('#rpg-prompt-combat-narrative').val().trim();
saveSettings();
}
/**
* Restore a specific prompt to its default
* @param {string} promptType - Type of prompt to restore (html, plotRandom, plotNatural, avatar)
*/
function restorePromptToDefault(promptType) {
const defaultValue = DEFAULT_PROMPTS[promptType] || '';
$(`#rpg-prompt-${promptType.replace(/([A-Z])/g, '-$1').toLowerCase()}`).val(defaultValue);
// Also update the setting immediately
switch(promptType) {
case 'html':
extensionSettings.customHtmlPrompt = '';
break;
case 'plotRandom':
extensionSettings.customPlotRandomPrompt = '';
break;
case 'plotNatural':
extensionSettings.customPlotNaturalPrompt = '';
break;
case 'avatar':
extensionSettings.avatarLLMCustomInstruction = '';
break;
case 'trackerInstructions':
extensionSettings.customTrackerInstructionsPrompt = '';
break;
case 'trackerContinuation':
extensionSettings.customTrackerContinuationPrompt = '';
break;
case 'combatNarrative':
extensionSettings.customCombatNarrativePrompt = '';
break;
}
saveSettings();
}
/**
* Restore all prompts to their defaults
*/
function restoreAllToDefaults() {
$('#rpg-prompt-html').val(DEFAULT_PROMPTS.html);
$('#rpg-prompt-plot-random').val(DEFAULT_PROMPTS.plotRandom);
$('#rpg-prompt-plot-natural').val(DEFAULT_PROMPTS.plotNatural);
$('#rpg-prompt-avatar').val(DEFAULT_PROMPTS.avatar);
$('#rpg-prompt-tracker-instructions').val(DEFAULT_PROMPTS.trackerInstructions);
$('#rpg-prompt-tracker-continuation').val(DEFAULT_PROMPTS.trackerContinuation);
$('#rpg-prompt-combat-narrative').val(DEFAULT_PROMPTS.combatNarrative);
// Clear all custom prompts
extensionSettings.customHtmlPrompt = '';
extensionSettings.customPlotRandomPrompt = '';
extensionSettings.customPlotNaturalPrompt = '';
extensionSettings.avatarLLMCustomInstruction = '';
extensionSettings.customTrackerInstructionsPrompt = '';
extensionSettings.customTrackerContinuationPrompt = '';
extensionSettings.customCombatNarrativePrompt = '';
saveSettings();
}
/**
* Get default prompts (for export/other modules)
*/
export function getDefaultPrompts() {
return { ...DEFAULT_PROMPTS };
}
+35
View File
@@ -4098,6 +4098,41 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
gap: 0.5em; gap: 0.5em;
} }
/* Prompts Editor Styles */
.rpg-prompt-editor-section {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--rpg-border);
}
.rpg-prompt-editor-section:last-child {
border-bottom: none;
}
.rpg-prompt-textarea {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid var(--SmartThemeBorderColor);
background: var(--SmartThemeBlurTintColor);
color: var(--SmartThemeBodyColor);
font-family: 'Courier New', monospace;
font-size: 12px;
resize: vertical;
line-height: 1.5;
box-sizing: border-box;
}
.rpg-prompt-textarea:focus {
outline: none;
border-color: var(--rpg-highlight);
box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.2);
}
.rpg-restore-prompt-btn {
font-size: 0.9em;
}
/* Editor buttons */ /* Editor buttons */
.rpg-btn-primary, .rpg-btn-primary,
.rpg-btn-secondary, .rpg-btn-secondary,
+174 -58
View File
@@ -186,12 +186,6 @@
</select> </select>
</div> </div>
<label class="checkbox_label">
<input type="checkbox" id="rpg-toggle-auto-update" />
<span data-i18n-key="template.settingsModal.display.toggleAutoUpdate">Auto-update after
messages</span>
</label>
<label class="checkbox_label"> <label class="checkbox_label">
<input type="checkbox" id="rpg-toggle-user-stats" /> <input type="checkbox" id="rpg-toggle-user-stats" />
<span data-i18n-key="template.settingsModal.display.showUserStats">Show User Stats</span> <span data-i18n-key="template.settingsModal.display.showUserStats">Show User Stats</span>
@@ -208,16 +202,6 @@
Characters</span> Characters</span>
</label> </label>
<label class="checkbox_label">
<input type="checkbox" id="rpg-toggle-narrator-mode" />
<span data-i18n-key="template.settingsModal.display.narratorMode">Narrator Mode</span>
</label>
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
data-i18n-key="template.settingsModal.display.narratorModeNote">
Use character card as narrator. Infer characters from context instead of using fixed character
references.
</small>
<label class="checkbox_label"> <label class="checkbox_label">
<input type="checkbox" id="rpg-toggle-inventory" /> <input type="checkbox" id="rpg-toggle-inventory" />
<span data-i18n-key="template.settingsModal.display.showInventory">Show Inventory</span> <span data-i18n-key="template.settingsModal.display.showInventory">Show Inventory</span>
@@ -275,16 +259,6 @@
Display the "Last Roll" indicator in the panel. Display the "Last Roll" indicator in the panel.
</small> </small>
<label class="checkbox_label">
<input type="checkbox" id="rpg-toggle-debug-mode" />
<span data-i18n-key="template.settingsModal.display.enableDebugMode">Enable Debug Mode</span>
</label>
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
data-i18n-key="template.settingsModal.display.enableDebugModeNote">
Shows parser logs in a mobile-friendly UI panel. Useful for troubleshooting. Look for the red bug
button.
</small>
<label class="checkbox_label"> <label class="checkbox_label">
<input type="checkbox" id="rpg-toggle-auto-avatars" /> <input type="checkbox" id="rpg-toggle-auto-avatars" />
<span data-i18n-key="template.settingsModal.display.autoGenerateAvatars">Auto-generate Missing <span data-i18n-key="template.settingsModal.display.autoGenerateAvatars">Auto-generate Missing
@@ -296,6 +270,16 @@
Plugin Plugin
</small> </small>
<label class="checkbox_label">
<input type="checkbox" id="rpg-toggle-debug-mode" />
<span data-i18n-key="template.settingsModal.display.enableDebugMode">Enable Debug Mode</span>
</label>
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
data-i18n-key="template.settingsModal.display.enableDebugModeNote">
Shows parser logs in a mobile-friendly UI panel. Useful for troubleshooting. Look for the red bug
button.
</small>
<!-- Avatar options container - conditionally visible --> <!-- Avatar options container - conditionally visible -->
<div id="rpg-avatar-options" style="margin-left: 24px; margin-top: 12px; display: none;"> <div id="rpg-avatar-options" style="margin-left: 24px; margin-top: 12px; display: none;">
<div class="rpg-setting-row" style="margin-top: 12px;"> <div class="rpg-setting-row" style="margin-top: 12px;">
@@ -463,7 +447,16 @@
</small> </small>
</div> </div>
<div class="rpg-setting-row"> <label class="checkbox_label" id="rpg-auto-update-container">
<input type="checkbox" id="rpg-toggle-auto-update" />
<span data-i18n-key="template.settingsModal.display.toggleAutoUpdate">Auto-update after
messages</span>
</label>
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
Automatically refresh RPG info after each message. Only available in Separate Generation mode.
</small>
<div class="rpg-setting-row" style="margin-top: 16px;">
<label for="rpg-skip-guided-mode" <label for="rpg-skip-guided-mode"
data-i18n-key="template.settingsModal.advanced.skipInjections">Skip Injections during Guided data-i18n-key="template.settingsModal.advanced.skipInjections">Skip Injections during Guided
Generations:</label> Generations:</label>
@@ -485,6 +478,16 @@
when using GuidedGenerations or similar extensions. when using GuidedGenerations or similar extensions.
</small> </small>
<label class="checkbox_label" style="margin-top: 16px;">
<input type="checkbox" id="rpg-toggle-narrator-mode" />
<span data-i18n-key="template.settingsModal.display.narratorMode">Narrator Mode</span>
</label>
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
data-i18n-key="template.settingsModal.display.narratorModeNote">
Use character card as narrator. Infer characters from context instead of using fixed character
references.
</small>
<label class="checkbox_label" style="margin-top: 16px;"> <label class="checkbox_label" style="margin-top: 16px;">
<input type="checkbox" id="rpg-save-tracker-history" /> <input type="checkbox" id="rpg-save-tracker-history" />
<span data-i18n-key="template.settingsModal.advanced.saveTrackerHistory">Save Tracker History in <span data-i18n-key="template.settingsModal.advanced.saveTrackerHistory">Save Tracker History in
@@ -497,39 +500,14 @@
in message metadata. When disabled, only the most recent trackers are kept. in message metadata. When disabled, only the most recent trackers are kept.
</small> </small>
<!-- Custom HTML Prompt Editor --> <!-- Customize Prompts Button -->
<div class="rpg-setting-row"
style="margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rpg-border);">
<label for="rpg-custom-html-prompt" style="display: block; margin-bottom: 8px; font-weight: 600;"
data-i18n-key="template.settingsModal.advanced.customHtmlPromptTitle">
<i class="fa-solid fa-code" aria-hidden="true"></i> Custom HTML Prompt:
</label>
<textarea id="rpg-custom-html-prompt" style="width: 100%; min-height: 120px; padding: 10px; border-radius: 4px;
border: 1px solid var(--SmartThemeBorderColor); background: var(--SmartThemeBlurTintColor);
color: var(--SmartThemeBodyColor); font-family: 'Courier New', monospace; font-size: 12px;
resize: vertical; line-height: 1.5;" placeholder=""></textarea>
<div style="margin-top: 8px; display: flex; gap: 8px;">
<button id="rpg-restore-default-html-prompt" class="menu_button" style="flex: 1;">
<i class="fa-solid fa-rotate-left" aria-hidden="true"></i> <span
data-i18n-key="template.settingsModal.advanced.restoreDefaultHtmlPrompt">Restore
Default</span>
</button>
</div>
<small style="display: block; margin-top: 8px; color: #888; font-size: 11px;"
data-i18n-key="template.settingsModal.advanced.customHtmlPromptNote">
Customize the HTML prompt injected when "Enable Immersive HTML" is enabled. The default prompt
is shown above - you can edit it directly or replace it entirely. Click "Restore Default" to
reset. This affects all generation modes (together, separate, and plot progression).
</small>
</div>
<!-- Clear Cache Button -->
<div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rpg-border);"> <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rpg-border);">
<button id="rpg-clear-cache" class="rpg-btn-clear-cache"> <button id="rpg-open-prompts-editor" class="menu_button" style="width: 100%;">
<i class="fa-solid fa-trash" aria-hidden="true"></i> <span <i class="fa-solid fa-file-lines" aria-hidden="true"></i> <span>Customize Prompts</span>
data-i18n-key="template.settingsModal.advanced.clearCache">Clear Extension Cache</span>
</button> </button>
<small style="display: block; margin-top: 8px; color: #888; font-size: 11px;">
Edit all AI prompts used for generation, plot progression, and combat encounters
</small>
</div> </div>
<!-- Reset FAB Positions Button --> <!-- Reset FAB Positions Button -->
@@ -545,6 +523,14 @@
Useful if buttons are off-screen. Useful if buttons are off-screen.
</small> </small>
</div> </div>
<!-- Clear Cache Button -->
<div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rpg-border);">
<button id="rpg-clear-cache" class="rpg-btn-clear-cache">
<i class="fa-solid fa-trash" aria-hidden="true"></i> <span
data-i18n-key="template.settingsModal.advanced.clearCache">Clear Extension Cache</span>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -663,3 +649,133 @@
</footer> </footer>
</div> </div>
</div> </div>
<!-- Prompts Editor Modal -->
<div id="rpg-prompts-editor-popup" class="rpg-settings-popup" role="dialog" aria-modal="true"
aria-labelledby="rpg-prompts-editor-title" style="display: none;">
<div class="rpg-settings-popup-content">
<header class="rpg-settings-popup-header">
<h3 id="rpg-prompts-editor-title">
<i class="fa-solid fa-file-lines" aria-hidden="true"></i>
<span>Customize Prompts</span>
</h3>
<button id="rpg-close-prompts-editor" class="rpg-popup-close" type="button"
aria-label="Close prompts editor">&times;</button>
</header>
<div class="rpg-settings-popup-body">
<small class="notes" style="display: block; margin-bottom: 16px;">
<i class="fa-solid fa-info-circle"></i> Customize the AI prompts used throughout the extension. Leave fields empty to use defaults.
</small>
<!-- HTML Prompt -->
<div class="rpg-prompt-editor-section">
<label for="rpg-prompt-html" style="display: block; margin-bottom: 8px; font-weight: 600;">
<i class="fa-solid fa-code"></i> HTML Prompt
</label>
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;">
Injected when "Enable Immersive HTML" is enabled. Affects all generation modes.
</small>
<textarea id="rpg-prompt-html" class="rpg-prompt-textarea" rows="4"></textarea>
<button class="menu_button rpg-restore-prompt-btn" data-prompt="html" style="margin-top: 8px;">
<i class="fa-solid fa-rotate-left"></i> Restore Default
</button>
</div>
<!-- Random Plot Progression Prompt -->
<div class="rpg-prompt-editor-section">
<label for="rpg-prompt-plot-random" style="display: block; margin-bottom: 8px; font-weight: 600;">
<i class="fa-solid fa-dice"></i> Random Plot Progression Prompt
</label>
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;">
Injected when the "Randomized Plot" button is clicked. Introduces random elements to the story.
</small>
<textarea id="rpg-prompt-plot-random" class="rpg-prompt-textarea" rows="6"></textarea>
<button class="menu_button rpg-restore-prompt-btn" data-prompt="plotRandom" style="margin-top: 8px;">
<i class="fa-solid fa-rotate-left"></i> Restore Default
</button>
</div>
<!-- Natural Plot Progression Prompt -->
<div class="rpg-prompt-editor-section">
<label for="rpg-prompt-plot-natural" style="display: block; margin-bottom: 8px; font-weight: 600;">
<i class="fa-solid fa-forward"></i> Natural Plot Progression Prompt
</label>
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;">
Injected when the "Natural Plot" button is clicked. Progresses the story naturally.
</small>
<textarea id="rpg-prompt-plot-natural" class="rpg-prompt-textarea" rows="4"></textarea>
<button class="menu_button rpg-restore-prompt-btn" data-prompt="plotNatural" style="margin-top: 8px;">
<i class="fa-solid fa-rotate-left"></i> Restore Default
</button>
</div>
<!-- Avatar Generation Instruction -->
<div class="rpg-prompt-editor-section">
<label for="rpg-prompt-avatar" style="display: block; margin-bottom: 8px; font-weight: 600;">
<i class="fa-solid fa-user-circle"></i> Avatar Generation Instruction
</label>
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;">
Instructions for LLM when generating avatar image prompts. Used by Auto-generate Missing Avatars feature.
</small>
<textarea id="rpg-prompt-avatar" class="rpg-prompt-textarea" rows="3"></textarea>
<button class="menu_button rpg-restore-prompt-btn" data-prompt="avatar" style="margin-top: 8px;">
<i class="fa-solid fa-rotate-left"></i> Restore Default
</button>
</div>
<!-- Tracker Instructions -->
<div class="rpg-prompt-editor-section">
<label for="rpg-prompt-tracker-instructions" style="display: block; margin-bottom: 8px; font-weight: 600;">
<i class="fa-solid fa-list-check"></i> Tracker Instructions
</label>
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;">
Instruction portion only (format specification is hardcoded). {userName} will be replaced with the user's name.
</small>
<textarea id="rpg-prompt-tracker-instructions" class="rpg-prompt-textarea" rows="4"></textarea>
<button class="menu_button rpg-restore-prompt-btn" data-prompt="trackerInstructions" style="margin-top: 8px;">
<i class="fa-solid fa-rotate-left"></i> Restore Default
</button>
</div>
<!-- Tracker Continuation Instruction -->
<div class="rpg-prompt-editor-section">
<label for="rpg-prompt-tracker-continuation" style="display: block; margin-bottom: 8px; font-weight: 600;">
<i class="fa-solid fa-arrow-right"></i> Tracker Continuation Instruction
</label>
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;">
Instructions added after tracker format specifications, telling the AI how to continue the narrative.
</small>
<textarea id="rpg-prompt-tracker-continuation" class="rpg-prompt-textarea" rows="4"></textarea>
<button class="menu_button rpg-restore-prompt-btn" data-prompt="trackerContinuation" style="margin-top: 8px;">
<i class="fa-solid fa-rotate-left"></i> Restore Default
</button>
</div>
<!-- Combat Narrative Style Instruction -->
<div class="rpg-prompt-editor-section">
<label for="rpg-prompt-combat-narrative" style="display: block; margin-bottom: 8px; font-weight: 600;">
<i class="fa-solid fa-fire"></i> Combat Narrative Style Instruction
</label>
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;">
Writing style instructions for combat encounters. Includes prose quality guidelines and anti-repetition rules. {userName} will be replaced with the user's name.
</small>
<textarea id="rpg-prompt-combat-narrative" class="rpg-prompt-textarea" rows="6"></textarea>
<button class="menu_button rpg-restore-prompt-btn" data-prompt="combatNarrative" style="margin-top: 8px;">
<i class="fa-solid fa-rotate-left"></i> Restore Default
</button>
</div>
</div>
<footer class="rpg-settings-popup-footer">
<button id="rpg-prompts-restore-all" class="rpg-btn-secondary" type="button">
<i class="fa-solid fa-rotate-left"></i> Restore All To Default
</button>
<div class="rpg-footer-right">
<button id="rpg-prompts-cancel" class="rpg-btn-secondary" type="button">Cancel</button>
<button id="rpg-prompts-save" class="rpg-btn-primary" type="button">
<i class="fa-solid fa-save"></i> Save Changes
</button>
</div>
</footer>
</div>
</div>