Merge pull request #2803 from SillyTavern/small-bookmark-updates

Update Checkpoints Feature (Expand tooltip and icons, add slash commands, refactoring)
This commit is contained in:
Cohee 2024-09-13 21:54:27 +03:00 committed by GitHub
commit 0a05ef63c6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 384 additions and 134 deletions

View File

@ -5799,7 +5799,7 @@
<div title="Create branch" class="mes_button mes_create_branch fa-regular fa-code-branch" data-i18n="[title]Create Branch"></div>
<div title="Copy" class="mes_button mes_copy fa-solid fa-copy " data-i18n="[title]Copy"></div>
</div>
<div title="Open checkpoint chat" class="mes_button mes_bookmark fa-solid fa-flag" data-i18n="[title]Open checkpoint chat"></div>
<div data-tooltip="Click to open checkpoint chat&#10;Shift+Click to replace the existing checkpoint with a new one" class="mes_button mes_bookmark fa-solid fa-flag" data-i18n="[data-tooltip]Open checkpoint chat&#10;Shift+Click to replace the existing checkpoint with a new one"></div>
<div title="Edit" class="mes_button mes_edit fa-solid fa-pencil " data-i18n="[title]Edit"></div>
</div>
<div class="mes_edit_buttons">

View File

@ -117,9 +117,9 @@ import {
} from './scripts/nai-settings.js';
import {
createNewBookmark,
initBookmarks,
showBookmarksButtons,
createBranch,
updateBookmarkDisplay,
} from './scripts/bookmarks.js';
import {
@ -558,8 +558,6 @@ export const system_message_types = {
GROUP: 'group',
EMPTY: 'empty',
GENERIC: 'generic',
BOOKMARK_CREATED: 'bookmark_created',
BOOKMARK_BACK: 'bookmark_back',
NARRATOR: 'narrator',
COMMENT: 'comment',
SLASH_COMMANDS: 'slash_commands',
@ -671,20 +669,6 @@ async function getSystemMessages() {
is_system: true,
mes: 'Generic system message. User `text` parameter to override the contents',
},
bookmark_created: {
name: systemUserName,
force_avatar: system_avatar,
is_user: false,
is_system: true,
mes: 'Checkpoint created! Click here to open the checkpoint chat: <a class="bookmark_link" file_name="{0}" href="javascript:void(null);">{1}</a>',
},
bookmark_back: {
name: systemUserName,
force_avatar: system_avatar,
is_user: false,
is_system: true,
mes: 'Click here to return to the previous chat: <a class="bookmark_link" file_name="{0}" href="javascript:void(null);">Return</a>',
},
welcome_prompt: {
name: systemUserName,
force_avatar: system_avatar,
@ -954,6 +938,7 @@ async function firstLoadInit() {
initDynamicStyles();
initTags();
initOpenai();
initBookmarks();
await getUserAvatars(true, user_avatar);
await getCharacters();
await getBackgrounds();
@ -2128,6 +2113,7 @@ function getMessageFromTemplate({
tokenCount && mes.find('.tokenCounterDisplay').text(`${tokenCount}t`);
title && mes.attr('title', title);
timerValue && mes.find('.mes_timer').attr('title', timerTitle).text(timerValue);
bookmarkLink && updateBookmarkDisplay(mes);
if (power_user.timestamp_model_icon && extra?.api) {
insertSVGIcon(mes, extra);
@ -8246,29 +8232,6 @@ function swipe_left() { // when we swipe left..but no generation.
}
}
/**
* Creates a new branch from the message with the given ID
* @param {number} mesId Message ID
* @returns {Promise<string>} Branch file name
*/
async function branchChat(mesId) {
if (this_chid === undefined && !selected_group) {
toastr.info('No character selected.', 'Branch creation aborted');
return;
}
const fileName = await createBranch(mesId);
await saveItemizedPrompts(fileName);
if (selected_group) {
await openGroupChat(selected_group, fileName);
} else {
await openCharacterChat(fileName);
}
return fileName;
}
// when we click swipe right button
const swipe_right = () => {
if (chat.length - 1 === Number(this_edit_mes_id)) {
@ -10582,44 +10545,6 @@ jQuery(async function () {
await duplicateCharacter();
});
$(document).on('click', '.select_chat_block, .bookmark_link, .mes_bookmark', async function () {
let file_name = $(this).hasClass('mes_bookmark')
? $(this).closest('.mes').attr('bookmark_link')
: $(this).attr('file_name').replace('.jsonl', '');
if (!file_name) {
return;
}
try {
showLoader();
if (selected_group) {
await openGroupChat(selected_group, file_name);
} else {
await openCharacterChat(file_name);
}
} finally {
hideLoader();
}
$('#shadow_select_chat_popup').css('display', 'none');
$('#load_select_chat_div').css('display', 'block');
});
$(document).on('click', '.mes_create_bookmark', async function () {
var selected_mes_id = $(this).closest('.mes').attr('mesid');
if (selected_mes_id !== undefined) {
createNewBookmark(selected_mes_id);
}
});
$(document).on('click', '.mes_create_branch', async function () {
var selected_mes_id = $(this).closest('.mes').attr('mesid');
if (selected_mes_id !== undefined) {
branchChat(Number(selected_mes_id));
}
});
$(document).on('click', '.mes_stop', function () {
stopGeneration();
});

View File

@ -6,7 +6,6 @@ import {
this_chid,
openCharacterChat,
chat_metadata,
callPopup,
getRequestHeaders,
getThumbnailUrl,
getCharacters,
@ -24,19 +23,21 @@ import {
saveGroupBookmarkChat,
selected_group,
} from './group-chats.js';
import { hideLoader, showLoader } from './loader.js';
import { getLastMessageId } from './macros.js';
import { Popup } from './popup.js';
import { SlashCommand } from './slash-commands/SlashCommand.js';
import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from './slash-commands/SlashCommandArgument.js';
import { commonEnumProviders } from './slash-commands/SlashCommandCommonEnumsProvider.js';
import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
import { createTagMapFromList } from './tags.js';
import { renderTemplateAsync } from './templates.js';
import {
delay,
getUniqueName,
isTrueBoolean,
} from './utils.js';
export {
createNewBookmark,
showBookmarksButtons,
};
const bookmarkNameToken = 'Checkpoint #';
async function getExistingChatNames() {
@ -57,16 +58,13 @@ async function getExistingChatNames() {
}
}
async function getBookmarkName() {
async function getBookmarkName({ isReplace = false, forceName = null } = {}) {
const chatNames = await getExistingChatNames();
const popupText = `<h3>Enter the checkpoint name:<h3>
<small>Leave empty to auto-generate.</small>`;
let name = await callPopup(popupText, 'input');
if (name === false) {
return null;
}
else if (name === '') {
const body = await renderTemplateAsync('createCheckpoint', { isReplace: isReplace });
let name = forceName ?? await Popup.show.input('Create Checkpoint', body);
// Special handling for confirmed empty input (=> auto-generate name)
if (name === '') {
for (let i = chatNames.length; i < 1000; i++) {
name = bookmarkNameToken + i;
if (!chatNames.includes(name)) {
@ -74,6 +72,9 @@ async function getBookmarkName() {
}
}
}
if (!name) {
return null;
}
return `${name} - ${humanizedDateTime()}`;
}
@ -96,7 +97,7 @@ function getMainChatName() {
return null;
}
function showBookmarksButtons() {
export function showBookmarksButtons() {
try {
if (selected_group) {
$('#option_convert_to_group').hide();
@ -131,9 +132,10 @@ async function saveBookmarkMenu() {
return;
}
return createNewBookmark(chat.length - 1);
return await createNewBookmark(chat.length - 1);
}
// Export is used by Timelines extension. Do not remove.
export async function createBranch(mesId) {
if (!chat.length) {
toastr.warning('The chat is empty.', 'Branch creation failed');
@ -167,20 +169,26 @@ export async function createBranch(mesId) {
return name;
}
async function createNewBookmark(mesId) {
/**
* Creates a new bookmark for a message.
*
* @param {number} mesId - The ID of the message.
* @param {Object} [options={}] - Optional parameters.
* @param {string?} [options.forceName=null] - The name to force for the bookmark.
* @returns {Promise<string?>} - A promise that resolves to the bookmark name when the bookmark is created.
*/
export async function createNewBookmark(mesId, { forceName = null } = {}) {
if (this_chid === undefined && !selected_group) {
toastr.info('No character selected.', 'Checkpoint creation aborted');
return;
toastr.info('No character selected.', 'Create Checkpoint');
return null;
}
if (!chat.length) {
toastr.warning('The chat is empty.', 'Checkpoint creation failed');
return;
toastr.warning('The chat is empty.', 'Create Checkpoint');
return null;
}
if (mesId < 0 || mesId >= chat.length) {
toastr.warning('Invalid message ID.', 'Checkpoint creation failed');
return;
if (!chat[mesId]) {
toastr.warning('Invalid message ID.', 'Create Checkpoint');
return null;
}
const lastMes = chat[mesId];
@ -189,19 +197,11 @@ async function createNewBookmark(mesId) {
lastMes.extra = {};
}
if (lastMes.extra.bookmark_link) {
const confirm = await callPopup('Checkpoint for the last message already exists. Would you like to replace it?', 'confirm');
if (!confirm) {
return;
}
}
await delay(250);
let name = await getBookmarkName();
const isReplace = lastMes.extra.bookmark_link;
let name = await getBookmarkName({ isReplace: isReplace, forceName: forceName });
if (!name) {
return;
return null;
}
const mainChat = selected_group ? groups?.find(x => x.id == selected_group)?.chat_id : characters[this_chid].chat;
@ -215,10 +215,25 @@ async function createNewBookmark(mesId) {
}
lastMes.extra['bookmark_link'] = name;
$(`.mes[mesid="${mesId}"]`).attr('bookmark_link', name);
const mes = $(`.mes[mesid="${mesId}"]`);
updateBookmarkDisplay(mes, name);
await saveChatConditional();
toastr.success('Click the flag icon in the last message to open the checkpoint chat.', 'Checkpoint created', { timeOut: 10000 });
toastr.success('Click the flag icon next to the message to open the checkpoint chat.', 'Create Checkpoint', { timeOut: 10000 });
return name;
}
/**
* Updates the display of the bookmark on a chat message.
* @param {JQuery<HTMLElement>} mes - The message element
* @param {string?} [newBookmarkLink=null] - The new bookmark link (optional)
*/
export function updateBookmarkDisplay(mes, newBookmarkLink = null) {
newBookmarkLink && mes.attr('bookmark_link', newBookmarkLink);
const bookmarkFlag = mes.find('.mes_bookmark');
bookmarkFlag.attr('title', `Checkpoint\n${mes.attr('bookmark_link')}\n\n${bookmarkFlag.data('tooltip')}`);
}
async function backToMainChat() {
@ -231,10 +246,13 @@ async function backToMainChat() {
} else {
await openCharacterChat(mainChatName);
}
return mainChatName;
}
return null;
}
async function convertSoloToGroupChat() {
export async function convertSoloToGroupChat() {
if (selected_group) {
console.log('Already in group. No need for conversion');
return;
@ -261,6 +279,7 @@ async function convertSoloToGroupChat() {
const activationStrategy = group_activation_strategy.NATURAL;
const allowSelfResponses = false;
const favChecked = character.fav || character.fav == 'true';
/** @type {any} */
const metadata = Object.assign({}, chat_metadata);
delete metadata.main_chat;
@ -351,8 +370,288 @@ async function convertSoloToGroupChat() {
toastr.success('The chat has been successfully converted!');
}
jQuery(function () {
/**
* Creates a new branch from the message with the given ID
* @param {number} mesId Message ID
* @returns {Promise<string?>} Branch file name
*/
export async function branchChat(mesId) {
if (this_chid === undefined && !selected_group) {
toastr.info('No character selected.', 'Create Branch');
return null;
}
const fileName = await createBranch(mesId);
await saveItemizedPrompts(fileName);
if (selected_group) {
await openGroupChat(selected_group, fileName);
} else {
await openCharacterChat(fileName);
}
return fileName;
}
function registerBookmarksSlashCommands() {
/**
* Validates a message ID. (Is a number, exists as a message)
*
* @param {number} mesId - The message ID to validate.
* @param {string} context - The context of the slash command. Will be used as the title of any toasts.
* @returns {boolean} - Returns true if the message ID is valid, otherwise false.
*/
function validateMessageId(mesId, context) {
if (isNaN(mesId)) {
toastr.warning('Invalid message ID was provided', context);
return false;
}
if (!chat[mesId]) {
toastr.warning(`Message for id ${mesId} not found`, context);
return false;
}
return true;
}
SlashCommandParser.addCommandObject(SlashCommand.fromProps({
name: 'branch-create',
returns: 'Name of the new branch',
callback: async (args, text) => {
const mesId = Number(args.mesId ?? text ?? getLastMessageId());
if (!validateMessageId(mesId, 'Create Branch')) return '';
const branchName = await branchChat(mesId);
return branchName ?? '';
},
unnamedArgumentList: [
SlashCommandArgument.fromProps({
description: 'Message ID',
typeList: [ARGUMENT_TYPE.NUMBER],
enumProvider: commonEnumProviders.messages(),
}),
],
helpString: `
<div>
Create a new branch from the selected message. If no message id is provided, will use the last message.
</div>
<div>
Creating a branch will automatically choose a name for the branch.<br />
After creating the branch, the branch chat will be automatically opened.
</div>
<div>
Use Checkpoints and <code>/checkpoint-create</code> instead if you do not want to jump to the new chat.
</div>`,
}));
SlashCommandParser.addCommandObject(SlashCommand.fromProps({
name: 'checkpoint-create',
returns: 'Name of the new checkpoint',
callback: async (args, text) => {
const mesId = Number(args.mesId ?? getLastMessageId());
if (!validateMessageId(mesId, 'Create Checkpoint')) return '';
if (typeof text !== 'string') {
toastr.warning('Checkpoint name must be a string or empty', 'Create Checkpoint');
return '';
}
const checkPointName = await createNewBookmark(mesId, { forceName: text });
return checkPointName ?? '';
},
namedArgumentList: [
SlashCommandNamedArgument.fromProps({
name: 'mesId',
description: 'Message ID',
typeList: [ARGUMENT_TYPE.NUMBER],
enumProvider: commonEnumProviders.messages(),
}),
],
unnamedArgumentList: [
SlashCommandArgument.fromProps({
description: 'Checkpoint name',
typeList: [ARGUMENT_TYPE.STRING],
}),
],
helpString: `
<div>
Create a new checkpoint for the selected message with the provided name. If no message id is provided, will use the last message.<br />
Leave the checkpoint name empty to auto-generate one.
</div>
<div>
A created checkpoint will be permanently linked with the message.<br />
If a checkpoint already exists, the link to it will be overwritten.<br />
After creating the checkpoint, the checkpoint chat can be opened with the checkpoint flag,
using the <code>/go</code> command with the checkpoint name or the <code>/checkpoint-go</code> command on the message.
</div>
<div>
Use Branches and <code>/branch-create</code> instead if you do want to jump to the new chat.
</div>
<div>
<strong>Example:</strong>
<ul>
<li>
<pre><code>/checkpoint-create mes={{lastCharMessage}} Checkpoint for char reply | /setvar key=rememberCheckpoint {{pipe}}</code></pre>
Will create a new checkpoint to the latest message of the current character, and save it as a local variable for future use.
</li>
</ul>
</div>`,
}));
SlashCommandParser.addCommandObject(SlashCommand.fromProps({
name: 'checkpoint-go',
returns: 'Name of the checkpoint',
callback: async (args, text) => {
const mesId = Number(args.mesId ?? text ?? getLastMessageId());
if (!validateMessageId(mesId, 'Open Checkpoint')) return '';
const checkPointName = chat[mesId].extra?.bookmark_link;
if (!checkPointName) {
toastr.warning('No checkpoint is linked to the selected message', 'Open Checkpoint');
return '';
}
if (selected_group) {
await openGroupChat(selected_group, checkPointName);
} else {
await openCharacterChat(checkPointName);
}
return checkPointName;
},
unnamedArgumentList: [
SlashCommandArgument.fromProps({
description: 'Message ID',
typeList: [ARGUMENT_TYPE.NUMBER],
enumProvider: commonEnumProviders.messages(),
}),
],
helpString: `
<div>
Open the checkpoint linked to the selected message. If no message id is provided, will use the last message.
</div>
<div>
Use <code>/checkpoint-get</code> if you want to make sure that the selected message has a checkpoint.
</div>`,
}));
SlashCommandParser.addCommandObject(SlashCommand.fromProps({
name: 'checkpoint-exit',
returns: 'The name of the chat exited to. Returns an empty string if not in a checkpoint chat.',
callback: async () => {
const mainChat = await backToMainChat();
return mainChat ?? '';
},
helpString: 'Exit the checkpoint chat.<br />If not in a checkpoint chat, returns empty string.',
}));
SlashCommandParser.addCommandObject(SlashCommand.fromProps({
name: 'checkpoint-parent',
returns: 'Name of the parent chat for this checkpoint',
callback: async () => {
const mainChatName = getMainChatName();
return mainChatName ?? '';
},
helpString: 'Get the name of the parent chat for this checkpoint.<br />If not in a checkpoint chat, returns empty string.',
}));
SlashCommandParser.addCommandObject(SlashCommand.fromProps({
name: 'checkpoint-get',
returns: 'Name of the chat',
callback: async (args, text) => {
const mesId = Number(args.mesId ?? text ?? getLastMessageId());
if (!validateMessageId(mesId, 'Get Checkpoint')) return '';
const checkPointName = chat[mesId].extra?.bookmark_link;
return checkPointName ?? '';
},
unnamedArgumentList: [
SlashCommandArgument.fromProps({
description: 'Message ID',
typeList: [ARGUMENT_TYPE.NUMBER],
enumProvider: commonEnumProviders.messages(),
}),
],
helpString: `
<div>
Get the name of the checkpoint linked to the selected message. If no message id is provided, will use the last message.<br />
If no checkpoint is linked, the result will be empty.
</div>`,
}));
SlashCommandParser.addCommandObject(SlashCommand.fromProps({
name: 'checkpoint-list',
returns: 'JSON array of all existing checkpoints in this chat, as an array',
/** @param {{links?: string}} args @returns {Promise<string>} */
callback: async (args, _) => {
const result = Object.entries(chat)
.filter(([_, message]) => message.extra?.bookmark_link)
.map(([mesId, message]) => isTrueBoolean(args.links) ? message.extra.bookmark_link : Number(mesId));
return JSON.stringify(result);
},
namedArgumentList: [
SlashCommandNamedArgument.fromProps({
name: 'links',
description: 'Get a list of all links / chat names of the checkpoints, instead of the message ids',
typeList: [ARGUMENT_TYPE.BOOLEAN],
enumList: commonEnumProviders.boolean('trueFalse')(),
defaultValue: 'false',
}),
],
helpString: `
<div>
List all existing checkpoints in this chat.
</div>
<div>
Returns a list of all message ids that have a checkpoint, or all checkpoint links if <code>links</code> is set to <code>true</code>.<br />
The value will be a JSON array.
</div>`,
}));
}
export function initBookmarks() {
$('#option_new_bookmark').on('click', saveBookmarkMenu);
$('#option_back_to_main').on('click', backToMainChat);
$('#option_convert_to_group').on('click', convertSoloToGroupChat);
});
$(document).on('click', '.select_chat_block, .mes_bookmark', async function (e) {
// If shift is held down, we are not following the bookmark, but creating a new one
const mes = $(this).closest('.mes');
if (e.shiftKey && mes.length) {
const selectedMesId = mes.attr('mesid');
await createNewBookmark(Number(selectedMesId));
return;
}
const fileName = $(this).hasClass('mes_bookmark')
? $(this).closest('.mes').attr('bookmark_link')
: $(this).attr('file_name').replace('.jsonl', '');
if (!fileName) {
return;
}
try {
showLoader();
if (selected_group) {
await openGroupChat(selected_group, fileName);
} else {
await openCharacterChat(fileName);
}
} finally {
await hideLoader();
}
$('#shadow_select_chat_popup').css('display', 'none');
$('#load_select_chat_div').css('display', 'block');
});
$(document).on('click', '.mes_create_bookmark', async function () {
const mesId = $(this).closest('.mes').attr('mesid');
if (mesId !== undefined) {
await createNewBookmark(Number(mesId));
}
});
$(document).on('click', '.mes_create_branch', async function () {
const mesId = $(this).closest('.mes').attr('mesid');
if (mesId !== undefined) {
await branchChat(Number(mesId));
}
});
registerBookmarksSlashCommands();
}

View File

@ -358,10 +358,10 @@ function onRefineModeInput() {
*/
async function captionCommandCallback(args, prompt) {
const quiet = isTrueBoolean(args?.quiet);
const id = args?.id;
const mesId = args?.mesId ?? args?.id;
if (!isNaN(Number(id))) {
const message = getContext().chat[id];
if (!isNaN(Number(mesId))) {
const message = getContext().chat[mesId];
if (message?.extra?.image) {
try {
const fetchResult = await fetch(message.extra.image);
@ -546,7 +546,7 @@ jQuery(async function () {
'quiet', 'suppress sending a captioned message', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false',
),
SlashCommandNamedArgument.fromProps({
name: 'id',
name: 'mesId',
description: 'get image from a message with this ID',
typeList: [ARGUMENT_TYPE.NUMBER],
enumProvider: commonEnumProviders.messages(),

View File

@ -598,9 +598,20 @@ jQuery(async () => {
$(document).on('click', '.mes_translate', onMessageTranslateClick);
$('#translate_key_button').on('click', async () => {
const optionText = $('#translation_provider option:selected').text();
const key = await callGenericPopup(`<h3>${optionText} API Key</h3>`, POPUP_TYPE.INPUT);
const key = await callGenericPopup(`<h3>${optionText} API Key</h3>`, POPUP_TYPE.INPUT, '', {
customButtons: [{
text: 'Remove Key',
appendAtEnd: true,
result: POPUP_RESULT.NEGATIVE,
action: async () => {
await writeSecret(extension_settings.translate.provider, '');
toastr.success('API Key removed');
$('#translate_key_button').toggleClass('success', !!secret_state[extension_settings.translate.provider]);
},
}],
});
if (key == false) {
if (!key) {
return;
}
@ -634,7 +645,7 @@ jQuery(async () => {
}],
});
if (url == false || url == '') {
if (!url) {
return;
}

View File

@ -77,14 +77,14 @@ class AzureTtsProvider {
result: POPUP_RESULT.NEGATIVE,
action: async () => {
await writeSecret(SECRET_KEYS.AZURE_TTS, '');
$('#azure_tts_key').toggleClass('success', secret_state[SECRET_KEYS.AZURE_TTS]);
$('#azure_tts_key').toggleClass('success', !!secret_state[SECRET_KEYS.AZURE_TTS]);
toastr.success('API Key removed');
await this.onRefreshClick();
},
}],
});
if (key == false || key == '') {
if (!key) {
return;
}

View File

@ -86,14 +86,14 @@ class OpenAICompatibleTtsProvider {
result: POPUP_RESULT.NEGATIVE,
action: async () => {
await writeSecret(SECRET_KEYS.CUSTOM_OPENAI_TTS, '');
$('#openai_compatible_tts_key').toggleClass('success', secret_state[SECRET_KEYS.CUSTOM_OPENAI_TTS]);
$('#openai_compatible_tts_key').toggleClass('success', !!secret_state[SECRET_KEYS.CUSTOM_OPENAI_TTS]);
toastr.success('API Key removed');
await this.onRefreshClick();
},
}],
});
if (key == false || key == '') {
if (!key) {
return;
}

View File

@ -83,6 +83,9 @@ const showPopupHelper = {
const content = PopupUtils.BuildTextWithHeader(header, text);
const popup = new Popup(content, POPUP_TYPE.INPUT, defaultValue, popupOptions);
const value = await popup.show();
// Return values: If empty string, we explicitly handle that as returning that empty string as "success" provided.
// Otherwise, all non-truthy values (false, null, undefined) are treated as "cancel" and return null.
if (value === '') return '';
return value ? String(value) : null;
},

View File

@ -0,0 +1,8 @@
<div>
<span class="margin-right-10px">Enter Checkpoint Name:</span><small>(Leave empty to auto-generate)</small>
</div>
{{#if isReplace}}
<div class="m-t-1">
<small>The currently existing checkpoint will be unlinked and replaced with the new checkpoint, but can still be found in the Chat Management.</small>
</div>
{{/if}}

View File

@ -3964,6 +3964,10 @@ input[type="range"]::-webkit-slider-thumb {
display: inline-block;
}
.mes:not([bookmark_link='']) .mes_create_bookmark {
display: none;
}
.mes_edit_buttons {
display: none;
flex-direction: row;