Merge pull request #1318 from artisticMink/feature/bulk-edit-enhanced

Feature/bulk edit enhanced
This commit is contained in:
Cohee
2023-11-07 20:47:06 +02:00
committed by GitHub
12 changed files with 962 additions and 26 deletions

View File

@ -0,0 +1,98 @@
#rm_print_characters_block .character_select,
#rm_print_characters_block .group_select{
cursor: pointer;
}
#rm_print_characters_block.group_overlay_mode_select .character_select {
transition: background-color 0.4s ease;
margin-bottom: 1px;
background-color: rgba(170, 170, 170, 0.15);
}
#rm_print_characters_block.group_overlay_mode_select .character_select input.bulk_select_checkbox {
display: none !important;
}
#rm_print_characters_block.group_overlay_mode_select .character_select.character_selected {
background-color: var(--SmartThemeQuoteColor);
}
#rm_print_characters_block.group_overlay_mode_select .character_select .bulk_select_checkbox {
visibility: hidden;
height: 0 !important;
}
#character_context_menu.hidden { display: none; }
#character_context_menu {
position: absolute;
padding: 3px;
z-index: 10000;
background-color: var(--black90a);
border: 1px solid var(--black90a);
border-radius: 10px;
}
#character_context_menu ul li button {
border: 0;
border-bottom-color: currentcolor;
color: var(--SmartThemeQuoteColor);
background-color: transparent;
font-weight: bold;
font-size: 1em;
padding: 0.5em;
border-bottom: 1px dotted var(--SmartThemeQuoteColor);
width: 100%;
cursor: pointer;
}
#character_context_menu ul li button:hover {
background-color: var(--SmartThemeBlurTintColor);
}
#character_context_menu ul li:last-child button {
border-bottom: 0;
}
#character_context_menu ul li #character_context_menu_delete {
color: var(--fullred);
}
#character_context_menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#character_context_menu .character_context_menu_separator {
height: 1px;
background-color: var(--SmartThemeBotMesBlurTintColor);
}
#character_context_menu li:hover {
background-color: var(--SmartThemeBotMesBlurTintColor);
}
#bulkEditButton.bulk_edit_overlay_active {
color: var(--golden);
}
#bulk_tag_shadow_popup {
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
background-color: var(--black30a);
position: absolute;
width: 100%;
height: 100vh;
height: 100svh;
z-index: 9998;
top: 0;
}
#bulk_tag_shadow_popup #bulk_tag_popup {
padding: 1em;
}
#bulk_tag_shadow_popup #bulk_tag_popup #dialogue_popup_controls .menu_button {
width: 100px;
padding: 0.25em;
}

View File

@ -1,3 +1,4 @@
#bulk_tags_div,
#tags_div {
min-width: 0;
}
@ -86,10 +87,12 @@
align-items: flex-end;
}
#bulkTagsList,
#tagList.tags {
margin: 5px 0;
}
#bulkTagsList,
#tagList .tag {
opacity: 0.6;
}

View File

@ -100,6 +100,16 @@
<div id="bg_custom"></div>
<div id="bg1"></div>
<div id="character_context_menu" class="hidden">
<ul>
<li><button id="character_context_menu_favorite">Favorite</button></li>
<li><button id="character_context_menu_tag">Tag</button></li>
<li><button id="character_context_menu_duplicate">Duplicate</button></li>
<li><button id="character_context_menu_persona">Persona</button></li>
<li><button id="character_context_menu_delete">Delete</button></li>
</ul>
</div>
<!-- top bar central settings buttons -->
<div id="top-bar">
</div>
@ -4309,6 +4319,7 @@
</form>
</div>
</div>
<div id="character_template" class="template_element">
<div class="character_select flex-container wide100p alignitemsflexstart" chid="" id="">
<div class="avatar" title="">

View File

@ -187,6 +187,7 @@ import { getFriendlyTokenizerName, getTokenCount, getTokenizerModel, initTokeniz
import { initPersonas, selectCurrentPersona, setPersonaDescription } from "./scripts/personas.js";
import { getBackgrounds, initBackgrounds } from "./scripts/backgrounds.js";
import { hideLoader, showLoader } from "./scripts/loader.js";
import {CharacterContextMenu, BulkEditOverlay} from "./scripts/BulkEditOverlay.js";
//exporting functions and vars for mods
export {
@ -299,6 +300,9 @@ export const event_types = {
OAI_PRESET_CHANGED_AFTER: 'oai_preset_changed_after',
WORLDINFO_SETTINGS_UPDATED: 'worldinfo_settings_updated',
CHARACTER_EDITED: 'character_edited',
CHARACTER_PAGE_LOADED: 'character_page_loaded',
CHARACTER_GROUP_OVERLAY_STATE_CHANGE_BEFORE: 'character_group_overlay_state_change_before',
CHARACTER_GROUP_OVERLAY_STATE_CHANGE_AFTER: 'character_group_overlay_state_change_after',
USER_MESSAGE_RENDERED: 'user_message_rendered',
CHARACTER_MESSAGE_RENDERED: 'character_message_rendered',
FORCE_SET_BACKGROUND: 'force_set_background',
@ -316,6 +320,10 @@ eventSource.on(event_types.CHAT_CHANGED, displayOverrideWarnings);
eventSource.on(event_types.MESSAGE_RECEIVED, processExtensionHelpers);
eventSource.on(event_types.MESSAGE_SENT, processExtensionHelpers);
const characterGroupOverlay = new BulkEditOverlay();
const characterContextMenu = new CharacterContextMenu(characterGroupOverlay);
eventSource.on(event_types.CHARACTER_PAGE_LOADED, characterGroupOverlay.onPageLoad);
hljs.addPlugin({ "before:highlightElement": ({ el }) => { el.textContent = el.innerText } });
// Markdown converter
@ -1048,6 +1056,7 @@ async function printCharacters(fullRefresh = false) {
$("#rm_print_characters_block").append(getGroupBlock(i.item));
}
}
eventSource.emit(event_types.CHARACTER_PAGE_LOADED);
},
afterSizeSelectorChange: function (e) {
localStorage.setItem(storageKey, e.target.value);
@ -1076,7 +1085,7 @@ export function getEntitiesList({ doFilter } = {}) {
return entities;
}
async function getOneCharacter(avatarUrl) {
export async function getOneCharacter(avatarUrl) {
const response = await fetch("/getonecharacter", {
method: "POST",
headers: getRequestHeaders(),
@ -5523,6 +5532,8 @@ export async function getChatsFromFiles(data, isGroupChat) {
* in descending order by file name. Returns `undefined` if the fetch request is unsuccessful.
*/
async function getPastCharacterChats() {
if (!characters.includes(this_chid)) return;
const response = await fetch("/getallchatsofcharacter", {
method: 'POST',
body: JSON.stringify({ avatar_url: characters[this_chid].avatar }),
@ -7204,7 +7215,8 @@ function doCloseChat() {
* @param {boolean} delete_chats - Whether to delete chats or not.
*/
export async function handleDeleteCharacter(popup_type, this_chid, delete_chats) {
if (popup_type !== "del_ch") {
if (popup_type !== "del_ch" ||
!characters[this_chid]) {
return;
}

View File

@ -0,0 +1,571 @@
"use strict";
import {
callPopup,
characters,
deleteCharacter,
event_types,
eventSource,
getCharacters,
getRequestHeaders,
printCharacters,
this_chid
} from "../script.js";
import {favsToHotswap} from "./RossAscends-mods.js";
import {convertCharacterToPersona} from "./personas.js";
import {createTagInput, getTagKeyForCharacter, tag_map} from "./tags.js";
// Utility object for popup messages.
const popupMessage = {
deleteChat(characterCount) {
return `<h3>Delete ${characterCount} characters?</h3>
<b>THIS IS PERMANENT!<br><br>
<label for="del_char_checkbox" class="checkbox_label justifyCenter">
<input type="checkbox" id="del_char_checkbox" />
<span>Also delete the chat files</span>
</label><br></b>`;
},
}
/**
* Static object representing the actions of the
* character context menu override.
*/
class CharacterContextMenu {
/**
* Tag one or more characters,
* opens a popup.
*
* @param selectedCharacters
*/
static tag = (selectedCharacters) => {
BulkTagPopupHandler.show(selectedCharacters);
}
/**
* Duplicate one or more characters
*
* @param characterId
* @returns {Promise<Response>}
*/
static duplicate = async (characterId) => {
const character = CharacterContextMenu.#getCharacter(characterId);
return fetch('/dupecharacter', {
method: 'POST',
headers: getRequestHeaders(),
body: JSON.stringify({ avatar_url: character.avatar }),
});
}
/**
* Favorite a character
* and highlight it.
*
* @param characterId
* @returns {Promise<void>}
*/
static favorite = async (characterId) => {
const character = CharacterContextMenu.#getCharacter(characterId);
// Only set fav for V2 spec
const data = {
name: character.name,
avatar: character.avatar,
data: {
extensions: {
fav: !character.data.extensions.fav
}
}
};
return fetch('/v2/editcharacterattribute', {
method: "POST",
headers: getRequestHeaders(),
body: JSON.stringify(data),
}).then((response) => {
if (response.ok) {
const element = document.getElementById(`CharID${characterId}`);
element.classList.toggle('is_fav');
} else {
response.json().then(json => toastr.error('Character not saved. Error: ' + json.message + '. Field: ' + json.error));
}
});
}
/**
* Convert one or more characters to persona,
* may open a popup for one or more characters.
*
* @param characterId
* @returns {Promise<void>}
*/
static persona = async (characterId) => await convertCharacterToPersona(characterId);
/**
* Delete one or more characters,
* opens a popup.
*
* @param characterId
* @param deleteChats
* @returns {Promise<void>}
*/
static delete = async (characterId, deleteChats = false) => {
const character = CharacterContextMenu.#getCharacter(characterId);
return fetch('/deletecharacter', {
method: 'POST',
headers: getRequestHeaders(),
body: JSON.stringify({ avatar_url: character.avatar , delete_chats: deleteChats }),
cache: 'no-cache',
}).then(response => {
if (response.ok) {
deleteCharacter(character.name, character.avatar).then(() => {
if (deleteChats) {
fetch("/getallchatsofcharacter", {
method: 'POST',
body: JSON.stringify({ avatar_url: character.avatar }),
headers: getRequestHeaders(),
}).then( (response) => {
let data = response.json();
data = Object.values(data);
const pastChats = data.sort((a, b) => a["file_name"].localeCompare(b["file_name"])).reverse();
for (const chat of pastChats) {
const name = chat.file_name.replace('.jsonl', '');
eventSource.emit(event_types.CHAT_DELETED, name);
}
});
}
})
}
eventSource.emit('characterDeleted', { id: this_chid, character: characters[this_chid] });
});
}
static #getCharacter = (characterId) => characters[characterId] ?? null;
/**
* Show the context menu at the given position
*
* @param positionX
* @param positionY
*/
static show = (positionX, positionY) => {
let contextMenu = document.getElementById(BulkEditOverlay.contextMenuId);
contextMenu.style.left = `${positionX}px`;
contextMenu.style.top = `${positionY}px`;
document.getElementById(BulkEditOverlay.contextMenuId).classList.remove('hidden');
}
/**
* Hide the context menu
*/
static hide = () => document.getElementById(BulkEditOverlay.contextMenuId).classList.add('hidden');
/**
* Sets up the context menu for the given overlay
*
* @param characterGroupOverlay
*/
constructor(characterGroupOverlay) {
const contextMenuItems = [
{id: 'character_context_menu_favorite', callback: characterGroupOverlay.handleContextMenuFavorite},
{id: 'character_context_menu_duplicate', callback: characterGroupOverlay.handleContextMenuDuplicate},
{id: 'character_context_menu_delete', callback: characterGroupOverlay.handleContextMenuDelete},
{id: 'character_context_menu_persona', callback: characterGroupOverlay.handleContextMenuPersona},
{id: 'character_context_menu_tag', callback: characterGroupOverlay.handleContextMenuTag}
];
contextMenuItems.forEach(contextMenuItem => document.getElementById(contextMenuItem.id).addEventListener('click', contextMenuItem.callback))
}
}
/**
* Represents a tag control not bound to a single character
*/
class BulkTagPopupHandler {
static #getHtml = (characterIds) => {
const characterData = JSON.stringify({characterIds: characterIds});
return `<div id="bulk_tag_shadow_popup">
<div id="bulk_tag_popup">
<div id="bulk_tag_popup_holder">
<h3 class="m-b-1">Add tags to ${characterIds.length} characters</h3>
<br>
<div id="bulk_tags_div" class="marginBot5" data-characters='${characterData}'>
<div class="tag_controls">
<input id="bulkTagInput" class="text_pole tag_input wide100p margin0" data-i18n="[placeholder]Search / Create Tags" placeholder="Search / Create tags" maxlength="25" />
<div class="tags_view menu_button fa-solid fa-tags" title="View all tags" data-i18n="[title]View all tags"></div>
</div>
<div id="bulkTagList" class="m-t-1 tags"></div>
</div>
<div id="dialogue_popup_controls" class="m-t-1">
<div id="bulk_tag_popup_cancel" class="menu_button" data-i18n="Cancel">Close</div>
<div id="bulk_tag_popup_reset" class="menu_button" data-i18n="Cancel">Remove all</div>
</div>
</div>
</div>
</div>
`
};
/**
* Append and show the tag control
*
* @param characters - The characters assigned to this control
*/
static show(characters) {
document.body.insertAdjacentHTML('beforeend', this.#getHtml(characters));
createTagInput('#bulkTagInput', '#bulkTagList');
document.querySelector('#bulk_tag_popup_cancel').addEventListener('click', this.hide.bind(this));
document.querySelector('#bulk_tag_popup_reset').addEventListener('click', this.resetTags.bind(this, characters));
}
/**
* Hide and remove the tag control
*/
static hide() {
let popupElement = document.querySelector('#bulk_tag_shadow_popup');
if (popupElement) {
document.body.removeChild(popupElement);
}
printCharacters(true);
}
/**
* Empty the tag map for the given characters
*
* @param characterIds
*/
static resetTags(characterIds) {
characterIds.forEach((characterId) => {
const key = getTagKeyForCharacter(characterId);
if (key) tag_map[key] = [];
});
printCharacters(true);
}
}
class BulkEditOverlayState {
/**
*
* @type {number}
*/
static browse = 0;
/**
*
* @type {number}
*/
static select = 1;
}
/**
* Implement a SingletonPattern, allowing access to the group overlay instance
* from everywhere via (new CharacterGroupOverlay())
*
* @type BulkEditOverlay
*/
let bulkEditOverlayInstance = null;
class BulkEditOverlay {
static containerId = 'rm_print_characters_block';
static contextMenuId = 'character_context_menu';
static characterClass = 'character_select';
static selectModeClass = 'group_overlay_mode_select';
static selectedClass = 'character_selected';
static legacySelectedClass = 'bulk_select_checkbox';
static longPressDelay = 1500;
#state = BulkEditOverlayState.browse;
#longPress = false;
#stateChangeCallbacks = [];
#selectedCharacters = [];
/**
* @type HTMLElement
*/
container = null;
get state() {
return this.#state;
}
set state(newState) {
if (this.#state === newState) return;
eventSource.emit(event_types.CHARACTER_GROUP_OVERLAY_STATE_CHANGE_BEFORE, newState)
.then(() => {
this.#state = newState;
eventSource.emit(event_types.CHARACTER_GROUP_OVERLAY_STATE_CHANGE_AFTER, this.state)
});
}
get isLongPress() {
return this.#longPress;
}
set isLongPress(longPress) {
this.#longPress = longPress;
}
get stateChangeCallbacks() {
return this.#stateChangeCallbacks;
}
/**
*
* @returns {*[]}
*/
get selectedCharacters() {
return this.#selectedCharacters;
}
constructor() {
if (bulkEditOverlayInstance instanceof BulkEditOverlay)
return bulkEditOverlayInstance
this.container = document.getElementById(BulkEditOverlay.containerId);
this.container.addEventListener('click', this.handleCancelClick);
eventSource.on(event_types.CHARACTER_GROUP_OVERLAY_STATE_CHANGE_AFTER, this.handleStateChange);
bulkEditOverlayInstance = Object.freeze(this);
}
/**
* Set the overlay to browse mode
*/
browseState = () => this.state = BulkEditOverlayState.browse;
/**
* Set the overlay to select mode
*/
selectState = () => this.state = BulkEditOverlayState.select;
/**
* Set up a Sortable grid for the loaded page
*/
onPageLoad = () => {
this.browseState();
const elements = this.#getEnabledElements();
elements.forEach(element => element.addEventListener('touchstart', this.handleHold));
elements.forEach(element => element.addEventListener('mousedown', this.handleHold));
elements.forEach(element => element.addEventListener('touchend', this.handleLongPressEnd));
elements.forEach(element => element.addEventListener('mouseup', this.handleLongPressEnd));
elements.forEach(element => element.addEventListener('dragend', this.handleLongPressEnd));
const grid = document.getElementById(BulkEditOverlay.containerId);
grid.addEventListener('click', this.handleCancelClick);
}
/**
* Handle state changes
*
*
*/
handleStateChange = () => {
switch (this.state) {
case BulkEditOverlayState.browse:
this.container.classList.remove(BulkEditOverlay.selectModeClass);
this.#enableClickEventsForCharacters();
this.clearSelectedCharacters();
this.disableContextMenu();
this.#disableBulkEditButtonHighlight();
CharacterContextMenu.hide();
break;
case BulkEditOverlayState.select:
this.container.classList.add(BulkEditOverlay.selectModeClass);
this.#disableClickEventsForCharacters();
this.enableContextMenu();
this.#enableBulkEditButtonHighlight();
break;
}
this.stateChangeCallbacks.forEach(callback => callback(this.state));
}
/**
* Block the browsers native context menu and
* set a click event to hide the custom context menu.
*/
enableContextMenu = () => {
document.addEventListener('contextmenu', this.handleContextMenuShow);
document.addEventListener('click', this.handleContextMenuHide);
}
/**
* Remove event listeners, allowing the native browser context
* menu to be opened.
*/
disableContextMenu = () => {
document.removeEventListener('contextmenu', this.handleContextMenuShow);
document.removeEventListener('click', this.handleContextMenuHide);
}
handleHold = (event) => {
if (0 !== event.button && event.type !== 'touchstart') return;
// Prevent call for mobile browser context menu on long-press.
event.preventDefault();
event.stopPropagation();
this.isLongPress = true;
setTimeout(() => {
if (this.isLongPress) {
if (this.state === BulkEditOverlayState.browse)
this.selectState();
else if (this.state === BulkEditOverlayState.select)
CharacterContextMenu.show(...this.#getContextMenuPosition(event));
}
}, BulkEditOverlay.longPressDelay);
}
handleLongPressEnd = () => {
this.isLongPress = false;
}
handleCancelClick = () => {
this.state = BulkEditOverlayState.browse;
}
/**
* Returns the position of the mouse/touch location
*
* @param event
* @returns {(boolean|number|*)[]}
*/
#getContextMenuPosition = (event) => [
event.clientX || event.touches[0].clientX,
event.clientY || event.touches[0].clientY,
];
#enableClickEventsForCharacters = () => this.#getEnabledElements().forEach(element => element.removeEventListener('click', this.toggleCharacterSelected));
#disableClickEventsForCharacters = () => this.#getEnabledElements().forEach(element => element.addEventListener('click', this.toggleCharacterSelected));
#enableBulkEditButtonHighlight = () => document.getElementById('bulkEditButton').classList.add('bulk_edit_overlay_active');
#disableBulkEditButtonHighlight = () => document.getElementById('bulkEditButton').classList.remove('bulk_edit_overlay_active');
#getEnabledElements = () => [...this.container.getElementsByClassName(BulkEditOverlay.characterClass)];
toggleCharacterSelected = event => {
event.stopPropagation();
const character = event.currentTarget;
const characterId = character.getAttribute('chid');
const alreadySelected = this.selectedCharacters.includes(characterId)
const legacyBulkEditCheckbox = character.querySelector('.' + BulkEditOverlay.legacySelectedClass);
if (alreadySelected) {
character.classList.remove(BulkEditOverlay.selectedClass);
if (legacyBulkEditCheckbox) legacyBulkEditCheckbox.checked = false;
this.dismissCharacter(characterId);
} else {
character.classList.add(BulkEditOverlay.selectedClass)
if (legacyBulkEditCheckbox) legacyBulkEditCheckbox.checked = true;
this.selectCharacter(characterId);
}
}
handleContextMenuShow = (event) => {
event.preventDefault();
document.getElementById(BulkEditOverlay.containerId).style.pointerEvents = 'none';
CharacterContextMenu.show(...this.#getContextMenuPosition(event));
}
handleContextMenuHide = (event) => {
document.getElementById(BulkEditOverlay.containerId).style.pointerEvents = '';
let contextMenu = document.getElementById(BulkEditOverlay.contextMenuId);
if (false === contextMenu.contains(event.target)) {
CharacterContextMenu.hide();
}
}
/**
* Concurrently handle character favorite requests.
*
* @returns {Promise<number>}
*/
handleContextMenuFavorite = () => Promise.all(this.selectedCharacters.map(async characterId => CharacterContextMenu.favorite(characterId)))
.then(() => getCharacters())
.then(() => favsToHotswap())
.then(() => this.browseState())
/**
* Concurrently handle character duplicate requests.
*
* @returns {Promise<number>}
*/
handleContextMenuDuplicate = () => Promise.all(this.selectedCharacters.map(async characterId => CharacterContextMenu.duplicate(characterId)))
.then(() => getCharacters())
.then(() => this.browseState())
/**
* Sequentially handle all character-to-persona conversions.
*
* @returns {Promise<void>}
*/
handleContextMenuPersona = async () => {
for (const characterId of this.selectedCharacters) {
await CharacterContextMenu.persona(characterId)
}
this.browseState();
}
/**
* Request user input before concurrently handle deletion
* requests.
*
* @returns {Promise<number>}
*/
handleContextMenuDelete = () => {
callPopup(
popupMessage.deleteChat(this.selectedCharacters.length), null)
.then((accept) => {
if (true !== accept) return;
const deleteChats = document.getElementById('del_char_checkbox').checked ?? false;
Promise.all(this.selectedCharacters.map(async characterId => CharacterContextMenu.delete(characterId, deleteChats)))
.then(() => getCharacters())
.then(() => this.browseState())}
);
}
/**
* Attaches and opens the tag menu
*/
handleContextMenuTag = () => {
CharacterContextMenu.tag(this.selectedCharacters);
}
addStateChangeCallback = callback => this.stateChangeCallbacks.push(callback);
selectCharacter = characterId => this.selectedCharacters.push(String(characterId));
dismissCharacter = characterId => this.#selectedCharacters = this.selectedCharacters.filter(item => String(characterId) !== item);
/**
* Clears internal character storage and
* removes visual highlight.
*/
clearSelectedCharacters = () => {
document.querySelectorAll('#' + BulkEditOverlay.containerId + ' .' + BulkEditOverlay.selectedClass)
.forEach( element => element.classList.remove(BulkEditOverlay.selectedClass));
this.selectedCharacters.length = 0;
}
}
export {BulkEditOverlayState, CharacterContextMenu, BulkEditOverlay};

View File

@ -1,24 +1,44 @@
import { characters, getCharacters, handleDeleteCharacter, callPopup } from "../script.js";
import {BulkEditOverlay, BulkEditOverlayState} from "./BulkEditOverlay.js";
let is_bulk_edit = false;
const enableBulkEdit = () => {
enableBulkSelect();
(new BulkEditOverlay()).selectState();
// show the delete button
$("#bulkDeleteButton").show();
is_bulk_edit = true;
}
const disableBulkEdit = () => {
disableBulkSelect();
(new BulkEditOverlay()).browseState();
// hide the delete button
$("#bulkDeleteButton").hide();
is_bulk_edit = false;
}
const toggleBulkEditMode = (isBulkEdit) => {
if (isBulkEdit) {
disableBulkEdit();
} else {
enableBulkEdit();
}
}
(new BulkEditOverlay()).addStateChangeCallback((state) => {
if (state === BulkEditOverlayState.select) enableBulkEdit();
if (state === BulkEditOverlayState.browse) disableBulkEdit();
});
/**
* Toggles bulk edit mode on/off when the edit button is clicked.
*/
function onEditButtonClick() {
console.log("Edit button clicked");
// toggle bulk edit mode
if (is_bulk_edit) {
disableBulkSelect();
// hide the delete button
$("#bulkDeleteButton").hide();
is_bulk_edit = false;
} else {
enableBulkSelect();
// show the delete button
$("#bulkDeleteButton").show();
is_bulk_edit = true;
}
toggleBulkEditMode(is_bulk_edit);
}
/**

View File

@ -42,16 +42,18 @@ async function createDummyPersona() {
await uploadUserAvatar(default_avatar);
}
async function convertCharacterToPersona() {
const avatarUrl = characters[this_chid]?.avatar;
export async function convertCharacterToPersona(characterId = null) {
if (null === characterId) characterId = this_chid;
const avatarUrl = characters[characterId]?.avatar;
if (!avatarUrl) {
console.log("No avatar found for this character");
return;
}
const name = characters[this_chid]?.name;
let description = characters[this_chid]?.description;
const name = characters[characterId]?.name;
let description = characters[characterId]?.description;
const overwriteName = `${name} (Persona).png`;
if (overwriteName in power_user.personas) {

View File

@ -137,8 +137,12 @@ function getTagKey() {
return null;
}
function addTagToMap(tagId) {
const key = getTagKey();
export function getTagKeyForCharacter(characterId = null) {
return characters[characterId]?.avatar;
}
function addTagToMap(tagId, characterId = null) {
const key = getTagKey() ?? getTagKeyForCharacter(characterId);
if (!key) {
return;
@ -152,8 +156,8 @@ function addTagToMap(tagId) {
}
}
function removeTagFromMap(tagId) {
const key = getTagKey();
function removeTagFromMap(tagId, characterId = null) {
const key = getTagKey() ?? getTagKeyForCharacter(characterId);
if (!key) {
return;
@ -197,7 +201,17 @@ function selectTag(event, ui, listSelector) {
// add tag to the UI and internal map
appendTagToList(listSelector, tag, { removable: true });
appendTagToList(getInlineListSelector(), tag, { removable: false });
// Optional, check for multiple character ids being present.
const characterData = event.target.closest('#bulk_tags_div')?.dataset.characters;
const characterIds = characterData ? JSON.parse(characterData).characterIds : null;
if (characterIds) {
characterIds.forEach((characterId) => addTagToMap(tag.id,characterId));
} else {
addTagToMap(tag.id);
}
saveSettingsDebounced();
printTagFilters(tag_filter_types.character);
printTagFilters(tag_filter_types.group_member);
@ -383,8 +397,19 @@ function onTagRemoveClick(event) {
event.stopPropagation();
const tag = $(this).closest(".tag");
const tagId = tag.attr("id");
// Optional, check for multiple character ids being present.
const characterData = event.target.closest('#bulk_tags_div')?.dataset.characters;
const characterIds = characterData ? JSON.parse(characterData).characterIds : null;
tag.remove();
if (characterIds) {
characterIds.forEach((characterId) => removeTagFromMap(tagId, characterId));
} else {
removeTagFromMap(tagId);
}
$(`${getInlineListSelector()} .tag[id="${tagId}"]`).remove();
printTagFilters(tag_filter_types.character);
@ -439,7 +464,7 @@ function applyTagsOnGroupSelect() {
}
}
function createTagInput(inputSelector, listSelector) {
export function createTagInput(inputSelector, listSelector) {
$(inputSelector)
.autocomplete({
source: (i, o) => findTag(i, o, listSelector),

View File

@ -2,6 +2,7 @@
@import url(css/promptmanager.css);
@import url(css/loader.css);
@import url(css/character-group-overlay.css);
:root {
--doc-height: 100%;
@ -1863,6 +1864,7 @@ grammarly-extension {
/* Focus */
#bulk_tag_popup,
#dialogue_popup {
width: 500px;
max-width: 90vw;
@ -1905,6 +1907,7 @@ grammarly-extension {
width: unset !important;
}
#bulk_tag_popup_holder,
#dialogue_popup_holder {
display: flex;
flex-direction: column;
@ -1925,6 +1928,7 @@ grammarly-extension {
gap: 20px;
}
#bulk_tag_popup_reset,
#dialogue_popup_ok {
background-color: var(--crimson70a);
cursor: pointer;
@ -1935,6 +1939,7 @@ grammarly-extension {
width: 100%;
}
#bulk_tag_popup_cancel,
#dialogue_popup_cancel {
cursor: pointer;
}

View File

@ -57,7 +57,7 @@ const characterCardParser = require('./src/character-card-parser.js');
const contentManager = require('./src/content-manager');
const statsHelpers = require('./statsHelpers.js');
const { readSecret, migrateSecrets, SECRET_KEYS } = require('./src/secrets');
const { delay, getVersion } = require('./src/util');
const { delay, getVersion, deepMerge} = require('./src/util');
const { invalidateThumbnail, ensureThumbnailCache } = require('./src/thumbnails');
const { getTokenizerModel, getTiktokenTokenizer, loadTokenizers, TEXT_COMPLETION_MODELS } = require('./src/tokenizers');
const { convertClaudePrompt } = require('./src/chat-completion');
@ -208,6 +208,7 @@ const AVATAR_HEIGHT = 600;
const jsonParser = express.json({ limit: '100mb' });
const urlencodedParser = express.urlencoded({ extended: true, limit: '100mb' });
const { DIRECTORIES, UPLOADS_PATH, PALM_SAFETY } = require('./src/constants');
const {TavernCardValidator} = require("./src/validator/TavernCardValidator");
// CSRF Protection //
if (cliArguments.disableCsrf === false) {
@ -1167,6 +1168,45 @@ app.post("/editcharacterattribute", jsonParser, async function (request, respons
}
});
/**
* Handle a POST request to edit character properties.
*
* Merges the request body with the selected character and
* validates the result against TavernCard V2 specification.
*
* @param {Object} request - The HTTP request object.
* @param {Object} response - The HTTP response object.
*
* @returns {void}
* */
app.post("/v2/editcharacterattribute", jsonParser, async function (request, response) {
const update = request.body;
const avatarPath = path.join(charactersPath, update.avatar);
try {
let character = JSON.parse(await charaRead(avatarPath));
character = deepMerge(character, update);
const validator = new TavernCardValidator(character);
//Accept either V1 or V2.
if (validator.validate()) {
await charaWrite(
avatarPath,
JSON.stringify(character),
(update.avatar).replace('.png', ''),
response,
'Character saved'
);
} else {
console.log(validator.lastValidationError)
response.status(400).send({message: `Validation failed for ${character.name}`, error: validator.lastValidationError});
}
} catch (exception) {
response.status(500).send({message: 'Unexpected error while saving character.', error: exception.toString()});
}
});
app.post("/deletecharacter", jsonParser, async function (request, response) {
if (!request.body || !request.body.avatar_url) {
return response.sendStatus(400);

View File

@ -196,6 +196,27 @@ async function readAllChunks(readableStream) {
});
}
function isObject(item) {
return (item && typeof item === 'object' && !Array.isArray(item));
}
function deepMerge(target, source) {
let output = Object.assign({}, target);
if (isObject(target) && isObject(source)) {
Object.keys(source).forEach(key => {
if (isObject(source[key])) {
if (!(key in target))
Object.assign(output, { [key]: source[key] });
else
output[key] = deepMerge(target[key], source[key]);
} else {
Object.assign(output, { [key]: source[key] });
}
});
}
return output;
}
module.exports = {
getConfig,
getConfigValue,
@ -205,4 +226,5 @@ module.exports = {
getImageBuffers,
readAllChunks,
delay,
deepMerge,
};

View File

@ -0,0 +1,127 @@
/**
* Validates the data structure of character cards.
* Supported specs: V1, V2
* Up to: 8083fb3
*
* @link https://github.com/malfoyslastname/character-card-spec-v2
*/
class TavernCardValidator {
#lastValidationError = null;
constructor(card) {
this.card = card;
}
/**
* Field that caused the validation to fail
*
* @returns {null|string}
*/
get lastValidationError() {
return this.#lastValidationError;
}
/**
* Validate against V1 or V2 spec.
*
* @returns {number|boolean} - false when neither V1 nor V2 spec were matched. Specification version number otherwise.
*/
validate() {
this.#lastValidationError = null;
if (this.validateV1()) {
return 1;
}
if (this.validateV2()) {
return 2;
}
return false;
}
/**
* Validate against V1 specification
*
* @returns {this is string[]}
*/
validateV1() {
const requiredFields = ['name', 'description', 'personality', 'scenario', 'first_mes', 'mes_example'];
return requiredFields.every(field => {
if (!this.card.hasOwnProperty(field)) {
this.#lastValidationError = field;
return false;
}
return true;
});
}
/**
* Validate against V2 specification
*
* @returns {false|boolean|*}
*/
validateV2() {
return this.#validateSpec()
&& this.#validateSpecVersion()
&& this.#validateData()
&& this.#validateCharacterBook();
}
#validateSpec() {
if (this.card.spec !== 'chara_card_v2') {
this.#lastValidationError = 'spec';
return false;
}
return true;
}
#validateSpecVersion() {
if (this.card.spec_version !== '2.0') {
this.#lastValidationError = 'spec_version';
return false;
}
return true;
}
#validateData() {
const data = this.card.data;
if (!data) {
this.#lastValidationError = 'No tavern card data found';
return false;
}
const requiredFields = ['name', 'description', 'personality', 'scenario', 'first_mes', 'mes_example', 'creator_notes', 'system_prompt', 'post_history_instructions', 'alternate_greetings', 'tags', 'creator', 'character_version', 'extensions'];
const isAllRequiredFieldsPresent = requiredFields.every(field => {
if (!data.hasOwnProperty(field)) {
this.#lastValidationError = `data.${field}`;
return false;
}
return true;
});
return isAllRequiredFieldsPresent && Array.isArray(data.alternate_greetings) && Array.isArray(data.tags) && typeof data.extensions === 'object';
}
#validateCharacterBook() {
const characterBook = this.card.data.character_book;
if (!characterBook) {
return true;
}
const requiredFields = ['extensions', 'entries'];
const isAllRequiredFieldsPresent = requiredFields.every(field => {
if (!characterBook.hasOwnProperty(field)) {
this.#lastValidationError = `data.character_book.${field}`;
return false;
}
return true;
});
return isAllRequiredFieldsPresent && Array.isArray(characterBook.entries) && typeof characterBook.extensions === 'object';
}
}
module.exports = {TavernCardValidator}