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

Refactor right menus

Browse Source
This commit is contained in:
SillyLossy
2023-03-16 22:51:18 +02:00
parent 4225f217d0
commit 4ce7fa59be
5 changed files with 152 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
public/index.html
View File

@@ -244,8 +244,7 @@
<div id="shadow_select_chat_popup"> <div id="shadow_select_chat_popup">
<div id="select_chat_popup"> <div id="select_chat_popup">
<div id="select_chat_popup_text"> <div id="select_chat_popup_text">
<img id="select_chat_cross" src="img/cross.png" <img id="select_chat_cross" src="img/cross.png" alt="Close">
style="position: absolute; right: 15px; top:14px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
</div> </div>
<div id="select_chat_import"> <!-- import chat popup header --> <div id="select_chat_import"> <!-- import chat popup header -->
@@ -321,8 +320,15 @@
<nav id="right-nav-panel"> <nav id="right-nav-panel">
<div id="right-nav-panel-tabs"> <div id="right-nav-panel-tabs">
<div class="right_menu_button" id="rm_button_characters" title="Select/Create Characters">&#x1F464;</div> <div class="right_menu_button" id="rm_button_characters" title="Select/Create Characters">
<div class="right_menu_button" id="rm_button_settings" title="API and AI Settings">⚙️</div> <img alt="" src="img/id-card-regular.svg" />
</div>
<div class="right_menu_button" id="rm_button_settings" title="API and AI Settings">
<img alt="" src="img/gear-solid.svg" />
</div>
<div class="right_menu_button" id="rm_button_extensions" title="Extensions">
<img alt="" src="img/cubes-solid.svg" />
</div>
<div class="right_menu_button" id="rm_button_selected_ch"> <div class="right_menu_button" id="rm_button_selected_ch">
<h2></h2> <h2></h2>
</div> </div>
@@ -419,12 +425,12 @@
<div id="group_member_template"> <div id="group_member_template">
<div class="group_member"> <div class="group_member">
<div class="avatar"> <div class="avatar">
<img src="" /> <img alt="Avatar" src="" />
</div> </div>
<div class="ch_name"></div> <div class="ch_name"></div>
<div class="group_member_icon"> <div class="group_member_icon">
<img class="minus" src="img/minus-solid.svg"> <img alt="Remove" class="minus" src="img/minus-solid.svg">
<img class="plus" src="img/plus-solid.svg"> <img alt="Add" class="plus" src="img/plus-solid.svg">
</div> </div>
</div> </div>
</div> </div>
@@ -466,7 +472,7 @@
<div id="kobold_api" style="position: relative;"> <!-- shows the kobold settings --> <div id="kobold_api" style="position: relative;"> <!-- shows the kobold settings -->
<div class="API-logo"> <div class="API-logo">
<a href="https://github.com/KoboldAI/KoboldAI-Client" target="_blank"> <a href="https://github.com/KoboldAI/KoboldAI-Client" target="_blank">
<img src="img/kobold.png" style="width:40px;height:40px;"> <img alt="KoboldAI Logo" src="img/kobold.png" style="width:40px;height:40px;">
</a> </a>
</div> </div>
<form action="javascript:void(null);" method="post" enctype="multipart/form-data"> <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
@@ -746,9 +752,10 @@
</label> </label>
</div> </div>
</div> </div>
</div>
<div id="rm_extensions_block" class="right_menu">
<div class="extensions_block"> <div class="extensions_block">
<hr>
<h3>Extensions: <a target="_blank" href="https://github.com/SillyLossy/TavernAI-extras">TavernAI-extras</a></h3> <h3>Extensions: <a target="_blank" href="https://github.com/SillyLossy/TavernAI-extras">TavernAI-extras</a></h3>
<input id="extensions_url" type="text" class="text_pole" /> <input id="extensions_url" type="text" class="text_pole" />
<div class="extensions_url_block"> <div class="extensions_url_block">
@@ -836,12 +843,22 @@
<div id="options_button"> <div id="options_button">
<div id="options"> <div id="options">
<div class="options-content"> <div class="options-content">
<a id="option_start_new_chat"><img src="img/save_and_start_new_chat.png"><span>Start new <a id="option_start_new_chat">
chat</span></a> <img alt="" src="img/save_and_start_new_chat.png">
<a id="option_select_chat"><img src="img/book6.png"><span>View Past Chats</span></a> <span>Start new chat</span></a>
<a id="option_select_chat">
<img alt="" src="img/book6.png">
<span>View Past Chats</span>
</a>
<hr> <hr>
<a id="option_delete_mes"><img src="img/del_mes.png"><span>Delete messages</span></a> <a id="option_delete_mes">
<a id="option_regenerate"><img src="img/regenerate.png"><span>Regenerate</span></a> <img alt="" src="img/del_mes.png">
<span>Delete messages</span>
</a>
<a id="option_regenerate">
<img alt="" src="img/regenerate.png">
<span>Regenerate</span>
</a>
</div> </div>
</div> </div>
</div> </div>

148
public/script.js
View File

@@ -51,6 +51,8 @@ export {
setCharacterName, setCharacterName,
setEditedMessageId, setEditedMessageId,
setSendButtonState, setSendButtonState,
selectRightMenuWithAnimation,
setRightTabSelectedClass,
chat, chat,
this_chid, this_chid,
settings, settings,
@@ -2486,18 +2488,45 @@ function compareVersions(v1, v2) {
return 0; return 0;
} }
function selectRightMenuWithAnimation(selectedMenuId) {
const displayModes = {
'rm_info_block': 'flex',
'rm_group_chats_block': 'flex',
'rm_api_block': 'grid',
};
document.querySelectorAll('#right-nav-panel .right_menu').forEach((menu) => {
$(menu).css('display', 'none');
if (selectedMenuId && selectedMenuId.replace('#', '') === menu.id) {
const mode = displayModes[menu.id] ?? 'block';
$(menu).css('display', mode);
$(menu).css("opacity", 0.0);
$(menu).transition({
opacity: 1.0,
duration: animation_rm_duration,
easing: animation_rm_easing,
complete: function () { },
});
}
})
}
function setRightTabSelectedClass(selectedButtonId) {
document.querySelectorAll('#right-nav-panel-tabs .right_menu_button').forEach((button) => {
button.classList.remove('selected-right-tab');
if (selectedButtonId && selectedButtonId.replace('#', '') === button.id) {
button.classList.add('selected-right-tab');
}
});
}
function select_rm_info(text, charId = null) { function select_rm_info(text, charId = null) {
$("#rm_characters_block").css("display", "none");
$("#rm_api_block").css("display", "none");
$("#rm_ch_create_block").css("display", "none");
$("#rm_group_chats_block").css("display", "none");
$("#rm_info_block").css("display", "flex");
$("#rm_info_text").html("<h3>" + text + "</h3>"); $("#rm_info_text").html("<h3>" + text + "</h3>");
$("#rm_button_characters").css("class", "deselected-right-tab"); selectRightMenuWithAnimation('rm_info_block');
$("#rm_button_settings").css("class", "deselected-right-tab"); setRightTabSelectedClass();
$("#rm_button_selected_ch").css("class", "deselected-right-tab");
prev_selected_char = charId; prev_selected_char = charId;
} }
@@ -2509,7 +2538,7 @@ function select_selected_character(chid) {
menu_type = "character_edit"; menu_type = "character_edit";
$("#delete_button").css("display", "block"); $("#delete_button").css("display", "block");
$("#export_button").css("display", "block"); $("#export_button").css("display", "block");
$("#rm_button_selected_ch").css("class", "selected-right-tab"); setRightTabSelectedClass('rm_button_selected_ch');
var display_name = characters[chid].name; var display_name = characters[chid].name;
$("#rm_button_selected_ch").children("h2").text(display_name); $("#rm_button_selected_ch").children("h2").text(display_name);
@@ -2519,15 +2548,8 @@ function select_selected_character(chid) {
//$("#character_import_button").css("display", "none"); //$("#character_import_button").css("display", "none");
$("#create_button").attr("value", "Save"); $("#create_button").attr("value", "Save");
$("#create_button").css("display", "none"); $("#create_button").css("display", "none");
var i = 0;
while ($("#rm_button_selected_ch").width() > 170 && i < 100) { $("#rm_button_selected_ch").children("h2").text(display_name);
display_name = display_name.slice(0, display_name.length - 2);
//console.log(display_name);
$("#rm_button_selected_ch")
.children("h2")
.text($.trim(display_name) + "...");
i++;
}
$("#add_avatar_button").val(""); $("#add_avatar_button").val("");
$("#character_popup_text_h3").text(characters[chid].name); $("#character_popup_text_h3").text(characters[chid].name);
@@ -2571,19 +2593,8 @@ function select_rm_create() {
} }
} }
$("#rm_characters_block").css("display", "none"); selectRightMenuWithAnimation('rm_ch_create_block');
$("#rm_api_block").css("display", "none"); setRightTabSelectedClass();
$("#rm_ch_create_block").css("display", "block");
$("#rm_group_chats_block").css("display", "none");
$("#rm_ch_create_block").css("opacity", 0.0);
$("#rm_ch_create_block").transition({
opacity: 1.0,
duration: animation_rm_duration,
easing: animation_rm_easing,
complete: function () { },
});
$("#rm_info_block").css("display", "none");
$("#delete_button_div").css("display", "none"); $("#delete_button_div").css("display", "none");
$("#delete_button").css("display", "none"); $("#delete_button").css("display", "none");
@@ -2592,9 +2603,6 @@ function select_rm_create() {
$("#create_button").attr("value", "Create"); $("#create_button").attr("value", "Create");
//RossAscends: commented this out as part of the auto-loading token counter //RossAscends: commented this out as part of the auto-loading token counter
//$('#result_info').html('&nbsp;'); //$('#result_info').html('&nbsp;');
$("#rm_button_characters").css("class", "deselected-right-tab");
$("#rm_button_settings").css("class", "deselected-right-tab");
$("#rm_button_selected_ch").css("class", "deselected-right-tab");
//create text poles //create text poles
$("#rm_button_back").css("display", "inline-block"); $("#rm_button_back").css("display", "inline-block");
@@ -2619,8 +2627,6 @@ function select_rm_create() {
} }
function select_rm_characters() { function select_rm_characters() {
/* QuickRefresh(true); */
if (prev_selected_char) { if (prev_selected_char) {
let newChId = characters.findIndex((x) => x.name == prev_selected_char); let newChId = characters.findIndex((x) => x.name == prev_selected_char);
$(`.character_select[chid="${newChId}"]`).trigger("click"); $(`.character_select[chid="${newChId}"]`).trigger("click");
@@ -2628,23 +2634,8 @@ function select_rm_characters() {
} }
menu_type = "characters"; menu_type = "characters";
$("#rm_characters_block").css("display", "block"); selectRightMenuWithAnimation('rm_characters_block');
$("#rm_characters_block").css("opacity", 0.0); setRightTabSelectedClass('rm_button_characters');
$("#rm_characters_block").transition({
opacity: 1.0,
duration: animation_rm_duration,
easing: animation_rm_easing,
complete: function () { },
});
$("#rm_api_block").css("display", "none");
$("#rm_ch_create_block").css("display", "none");
$("#rm_info_block").css("display", "none");
$("#rm_group_chats_block").css("display", "none");
$("#rm_button_characters").css("class", "selected-right-tab");
$("#rm_button_settings").css("class", "deselected-right-tab");
$("#rm_button_selected_ch").css("class", "deselected-right-tab");
} }
function setExtensionPrompt(key, value) { function setExtensionPrompt(key, value) {
@@ -2820,48 +2811,13 @@ $(document).ready(function () {
} }
}); });
/* //RossAscends: Additional hotkeys
document.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key == "Enter") { // Ctrl+Enter for Regeneration Last Response
if (is_send_press == false) {
is_send_press = true;
Generate('regenerate');
}
} else if (event.ctrlKey && event.key == "ArrowUp") { //Ctrl+UpArrow for Connect to last server
document.getElementById('api_button').click();
}
}); */
//menu buttons setup //menu buttons setup
var selected_button_style = {};
var deselected_button_style = {};
$("#rm_button_create").css("class", "deselected-right-tab");
$("#rm_button_characters").css("class", "deselected-right-tab");
$("#rm_button_settings").click(function () { $("#rm_button_settings").click(function () {
selected_button = "settings"; selected_button = "settings";
menu_type = "settings"; menu_type = "settings";
$("#rm_characters_block").css("display", "none"); selectRightMenuWithAnimation('rm_api_block');
$("#rm_api_block").css("display", "grid"); setRightTabSelectedClass('rm_button_settings');
$("#rm_api_block").css("opacity", 0.0);
$("#rm_api_block").transition({
opacity: 1.0,
duration: animation_rm_duration,
easing: animation_rm_easing,
complete: function () { },
});
$("#rm_ch_create_block").css("display", "none");
$("#rm_info_block").css("display", "none");
$("#rm_group_chats_block").css("display", "none");
$("#rm_button_characters").css("class", "deselected-right-tab");
$("#rm_button_settings").css("class", "selected-right-tab");
$("#rm_button_selected_ch").css("class", "deselected-right-tab");
}); });
$("#rm_button_characters").click(function () { $("#rm_button_characters").click(function () {
selected_button = "characters"; selected_button = "characters";
@@ -3106,10 +3062,7 @@ $(document).ready(function () {
characters.length = 0; // resets the characters array, forcing getcharacters to reset characters.length = 0; // resets the characters array, forcing getcharacters to reset
name2 = systemUserName; // replaces deleted charcter name with system user since she will be displayed next. name2 = systemUserName; // replaces deleted charcter name with system user since she will be displayed next.
chat = [...safetychat]; // sets up system user to tell user about having deleted a character chat = [...safetychat]; // sets up system user to tell user about having deleted a character
$(document.getElementById("rm_button_selected_ch")).css( setRightTabSelectedClass() // 'deselects' character's tab panel
"class",
"deselected-right-tab"
); // 'deselects' character's tab panel
$(document.getElementById("rm_button_selected_ch")) $(document.getElementById("rm_button_selected_ch"))
.children("h2") .children("h2")
.text(""); // removes character name from nav tabs .text(""); // removes character name from nav tabs
@@ -4066,6 +4019,13 @@ $(document).ready(function () {
select_rm_characters(); select_rm_characters();
}); });
$("#rm_button_extensions").click(function () {
menu_type = 'extennsions';
selected_button = 'extensions';
setRightTabSelectedClass('rm_button_extensions');
selectRightMenuWithAnimation('rm_extensions_block');
});
$(document).on("click", ".select_chat_block", function () { $(document).on("click", ".select_chat_block", function () {
let file_name = $(this).attr("file_name").replace(".jsonl", ""); let file_name = $(this).attr("file_name").replace(".jsonl", "");
//console.log(characters[this_chid]['chat']); //console.log(characters[this_chid]['chat']);

3
public/scripts/RossAscends-mods.js
View File

@@ -301,6 +301,9 @@ $("document").ready(function () {
//SaveLocal('ActiveChar',this_chid); //SaveLocal('ActiveChar',this_chid);
SaveLocal('SelectedNavTab','rm_button_selected_ch'); SaveLocal('SelectedNavTab','rm_button_selected_ch');
}); });
$("#rm_button_extensions").click(function() {
SaveLocal('SelectedNavTab','rm_button_extensions');
});
$("#rm_button_characters").click( function () { //if char list is clicked, in addition to saving it... $("#rm_button_characters").click( function () { //if char list is clicked, in addition to saving it...
SaveLocal('SelectedNavTab','rm_button_characters'); SaveLocal('SelectedNavTab','rm_button_characters');
characters.sort(Intl.Collator().compare); // we sort the list characters.sort(Intl.Collator().compare); // we sort the list

15
public/scripts/group-chats.js
View File

@@ -29,6 +29,8 @@ import {
system_message_types, system_message_types,
online_status, online_status,
talkativeness_default, talkativeness_default,
selectRightMenuWithAnimation,
setRightTabSelectedClass,
} from "../script.js"; } from "../script.js";
export { export {
@@ -442,17 +444,8 @@ function select_group_chats(chat_id) {
} }
}); });
$("#rm_group_filter").val("").trigger("input"); $("#rm_group_filter").val("").trigger("input");
$("#rm_group_chats_block").css("display", "flex");
$("#rm_group_chats_block").css("opacity", 0.0);
$("#rm_group_chats_block").transition({
opacity: 1.0,
duration: 200,
easing: '',
complete: function () { },
});
$("#rm_ch_create_block").css("display", "none"); selectRightMenuWithAnimation('rm_group_chats_block')
$("#rm_characters_block").css("display", "none");
async function memberClickHandler(event) { async function memberClickHandler(event) {
event.stopPropagation(); event.stopPropagation();
@@ -539,8 +532,8 @@ function select_group_chats(chat_id) {
// top bar // top bar
if (group) { if (group) {
$("#rm_button_selected_ch").children("h2").css({});
$("#rm_button_selected_ch").children("h2").text(""); $("#rm_button_selected_ch").children("h2").text("");
setRightTabSelectedClass();
} }
} }

84
public/style.css
View File

@@ -491,7 +491,7 @@ textarea {
.right_menu { .right_menu {
max-height: 90vh; max-height: calc(100% - 60px);
padding: 0 20px; padding: 0 20px;
} }
@@ -532,6 +532,8 @@ input[type=submit] {}
width: calc(100% - 70px); width: calc(100% - 70px);
margin-left: 20px; margin-left: 20px;
margin-right: 30px; margin-right: 30px;
display: flex;
align-items: flex-start;
} }
/* ##################################################################### */ /* ##################################################################### */
@@ -555,13 +557,6 @@ input[type=submit] {}
filter: brightness(150%) grayscale(1); filter: brightness(150%) grayscale(1);
} }
#rm_button_panel_pin_div {
height: 20px;
width: 20px;
margin-top: 0;
margin-right: 0;
float: right;
}
#rm_button_panel_pin { #rm_button_panel_pin {
padding: 0; padding: 0;
@@ -572,35 +567,50 @@ input[type=submit] {}
z-index: 3001; z-index: 3001;
} }
#rm_button_panel_pin_div {
width: 26px;
height: 26px;
}
#rm_button_panel_pin:hover::after { #rm_button_panel_pin:hover::after {
filter: grayscale(1) brightness(150%); filter: invert(1) brightness(150%);
} }
#rm_button_panel_pin::after { #rm_button_panel_pin::after {
content: '\01F513'; content: ' ';
transform: translateY(-100%);
background-repeat: no-repeat;
background-position: center;
position: absolute; position: absolute;
filter: grayscale(1); display: block;
line-height: 20px;
font-size: 15px;
padding: 0; padding: 0;
text-align: center; margin: 0;
vertical-align: middle; background-image: url('/img/lock-open-solid.svg');
display: inline-block; filter: invert(1);
width: 20px; width: 26px;
height: 20px; height: 26px;
margin-top: -25px;
margin-left: 0;
-webkit-transition: all 0.275s; -webkit-transition: all 0.275s;
transition: all 0.275s; transition: all 0.275s;
} }
#rm_button_panel_pin:checked::after { #rm_button_panel_pin:checked::after {
content: '\01F512'; background-image: url('/img/lock-solid.svg');
/*closed lock emoji*/
line-height: 20px;
font-size: 15px;
} }
#rm_button_selected_ch {
flex: 1;
overflow: hidden;
}
#rm_button_selected_ch h2 {
text-overflow: ellipsis;
overflow: hidden;
text-align: left;
}
.selected-right-tab {
filter: brightness(200%);
}
/* ####################################################################### */ /* ####################################################################### */
@@ -623,6 +633,11 @@ input[type=submit] {}
overflow-y: auto; overflow-y: auto;
} }
#rm_extensions_block {
display: none;
overflow-y: auto;
}
/* ################################################################*/ /* ################################################################*/
/* CUSTOMIZE THE DROPDOWN SELECT COLORS FOR RIGHT MENU /* CUSTOMIZE THE DROPDOWN SELECT COLORS FOR RIGHT MENU
/*#################################################################*/ /*#################################################################*/
@@ -707,6 +722,7 @@ select option:not(:checked) {
#rm_characters_block { #rm_characters_block {
display: block; display: block;
overflow-y: auto;
/* visibility: hidden; */ /* visibility: hidden; */
} }
@@ -777,6 +793,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
margin-left: 10px; margin-left: 10px;
margin-top: 5px; margin-top: 5px;
transform: translateY(25%); transform: translateY(25%);
overflow: hidden;
text-overflow: ellipsis;
} }
.character_select:hover { .character_select:hover {
@@ -1988,6 +2006,16 @@ input[type="range"] {
width:30px;*/ width:30px;*/
} }
#select_chat_cross {
position: absolute;
right: 15px;
top:14px;
width: 20px;
height: 20px;
cursor: pointer;
opacity: 0.6;
}
#advanced_book_logo { #advanced_book_logo {
width: 35px; width: 35px;
height: 35px; height: 35px;
@@ -2148,6 +2176,9 @@ input[type="range"] {
.group_member .ch_name { .group_member .ch_name {
flex-grow: 1; flex-grow: 1;
margin-left: 10px; margin-left: 10px;
overflow: hidden;
text-overflow: ellipsis;
width: calc(100% - 110px);
} }
.group_member:hover { .group_member:hover {
@@ -2398,6 +2429,11 @@ h2 {
font-size: 1.25rem; font-size: 1.25rem;
} }
.right_menu_button img {
filter: invert(1);
height: 26px;
}
a { a {
color: orange; color: orange;
text-decoration: none; text-decoration: none;