rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Chat History Panel Overhaul, shorter filenames

This commit is contained in:
RossAscends 2023-10-30 14:16:20 +09:00
parent 2a9250c937
commit a27e7a139a
5 changed files with 61 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/css/st-tailwind.css
View File

@ -391,6 +391,10 @@
display: none; display: none;
} }
.hoverglow {
transition: opacity 200ms;
}
.hoverglow:hover { .hoverglow:hover {
opacity: 1 !important; opacity: 1 !important;
cursor: pointer; cursor: pointer;
@ -421,6 +425,10 @@ textarea:disabled {
border: 1px solid purple !important; border: 1px solid purple !important;
} }
.fontsize120p {
font-size: calc(var(--mainFontSize) * 1.2) !important;
}
.fontsize80p { .fontsize80p {
font-size: calc(var(--mainFontSize) * 0.8) !important; font-size: calc(var(--mainFontSize) * 0.8) !important;
} }
@ -459,6 +467,10 @@ textarea:disabled {
gap: 10px; gap: 10px;
} }
.opacity50p {
opacity: 0.5
}
.opacity1 { .opacity1 {
opacity: 1 !important; opacity: 1 !important;
} }

69
public/index.html
View File

@ -3894,27 +3894,25 @@
<div id="shadow_select_chat_popup"> <div id="shadow_select_chat_popup">
<div id="select_chat_popup"> <div id="select_chat_popup">
<input type="text" id="select_chat_search" placeholder="Search..." autocomplete="off"> <div name="selectChatPopupHeader" class="flex-container alignitemscenter justifySpaceBetween">
<div id="select_chat_import"> <!-- import chat popup header --> <div id="select_chat_import"> <!-- import chat popup header -->
<div id="chat_import_button" class="fa-solid fa-file-import menu_button"></div> <div id="chat_import_button" class="fa-solid fa-file-import opacity50p hoverglow fontsize120p"></div>
<form id="form_import_chat" action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
<input type="file" id="chat_import_file" accept=".json, .jsonl" name="avatar">
<input id="chat_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
<input id="chat_import_avatar_url" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
<input id="chat_import_character_name" name="character_name" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
</form>
</div>
<div id="selectChatPopupHeaderText" class="TxtLrgBoldCenter"> <div id="selectChatPopupHeaderText" class="TxtLrgBoldCenter">
<span id="ChatHistoryCharName"></span> <span id="ChatHistoryCharName"></span><span data-i18n="Chat History">Chat History</span>
<br>
<span data-i18n="Chat History">Chat History</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/chatfilemanagement/#chat-import" class="notes-link" target="_blank"><span class="note-link-span">?</span></a> <a href="https://docs.sillytavern.app/usage/core-concepts/chatfilemanagement/#chat-import" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</div> </div>
<form id="form_import_chat" action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
<input type="file" id="chat_import_file" accept=".json, .jsonl" name="avatar">
<input id="chat_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
<input id="chat_import_avatar_url" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
<input id="chat_import_character_name" name="character_name" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
</form>
<div id="select_chat_cross" class="fa-solid fa-circle-xmark" alt="Close Past Chat Popup"></div>
</div>
<div id="select_chat_div">
<input type="text" id="select_chat_search" class="menu_button" placeholder="Search..." autocomplete="off">
<div id="select_chat_cross" class="opacity50p hoverglow fa-solid fa-circle-xmark fontsize120p" alt="Close Past Chat Popup"></div>
</div> </div>
<div id="select_chat_div"></div>
<div id="load_select_chat_div"> <div id="load_select_chat_div">
<div class="fa-solid fa-hourglass fa-spin"></div> <div class="fa-solid fa-hourglass fa-spin"></div>
</div> </div>
@ -4008,29 +4006,30 @@
</div> </div>
<div id="past_chat_template" class="template_element"> <div id="past_chat_template" class="template_element">
<div class="select_chat_block_wrapper"> <div class="select_chat_block_wrapper flex-container">
<div class="select_chat_block" file_name=""> <div class="select_chat_block wide100p flex-container" file_name="">
<div class="avatar"> <div id="select_chat_name_wrapper" class="flex-container alignitemscenter justifySpaceBetween wide100p">
<img src=""> <div>
</div> <small class="select_chat_block_filename select_chat_block_filename_item"></small>
<div id="select_chat_name_wrapper"> <div title="Rename chat file" class="renameChatButton hoverglow opacity50p fa-solid fa-pencil" data-i18n="[title]Rename chat file"></div>
<div class="select_chat_block_filename select_chat_block_filename_item"></div> </div>
<div class="flex-container gap10px">
<div class="select_chat_info flex-container"> <div class="select_chat_info flex-container">
<div class="chat_messages_date"></div> <small class="chat_messages_date select_chat_block_filename_item"></small>
<div class="chat_messages_num select_chat_block_filename_item"></div> <small class="chat_file_size select_chat_block_filename_item"></small>
<div class="chat_file_size select_chat_block_filename_item"></div> <small class="chat_messages_num select_chat_block_filename_item"></small>
</div>
<div class="flex-container gap10px">
<div title="Export JSONL chat file" data-format="jsonl" class="exportRawChatButton opacity50p hoverglow fa-solid fa-file-export" data-i18n="[title]Export JSONL chat file"></div>
<div title="Download chat as plain text document" data-format="txt" class="exportChatButton opacity50p hoverglow fa-solid fa-file-lines" data-i18n="[title]Download chat as plain text document"></div>
<div title="Delete chat file" file_name="" class="PastChat_cross opacity50p hoverglow fa-solid fa-skull" data-i18n="[title]Delete chat file"></div>
</div>
</div> </div>
</div> </div>
<div class="select_chat_block_mes"></div> <div class="select_chat_block_mes"></div>
</div> </div>
<div class="flex-container height100pSpaceEvenly">
<div title="Rename chat file" class="renameChatButton fa-solid fa-pencil" data-i18n="[title]Rename chat file"></div>
<div title="Export JSONL chat file" data-format="jsonl" class="exportRawChatButton fa-solid fa-file-export" data-i18n="[title]Export JSONL chat file"></div>
<div title="Download chat as plain text document" data-format="txt" class="exportChatButton fa-solid fa-file-lines" data-i18n="[title]Download chat as plain text document"></div>
<div title="Delete chat file" file_name="" class="PastChat_cross fa-solid fa-skull" data-i18n="[title]Delete chat file"></div>
</div>
</div> </div>
</div> </div>
@ -5099,4 +5098,4 @@
</script> </script>
</body> </body>
</html> </html>

10
public/script.js
View File

@ -5426,7 +5426,7 @@ export async function displayPastChats() {
data.sort((a, b) => sortMoments(timestampToMoment(a.last_mes), timestampToMoment(b.last_mes))); data.sort((a, b) => sortMoments(timestampToMoment(a.last_mes), timestampToMoment(b.last_mes)));
console.log(data); console.log(data);
$("#load_select_chat_div").css("display", "none"); $("#load_select_chat_div").css("display", "none");
$("#ChatHistoryCharName").text(displayName); $("#ChatHistoryCharName").text(`${displayName}'s `);
const displayChats = (searchQuery) => { const displayChats = (searchQuery) => {
$("#select_chat_div").empty(); // Clear the current chats before appending filtered chats $("#select_chat_div").empty(); // Clear the current chats before appending filtered chats
@ -5450,13 +5450,13 @@ export async function displayPastChats() {
const chat_items = data[key]["chat_items"]; const chat_items = data[key]["chat_items"];
const file_size = data[key]["file_size"]; const file_size = data[key]["file_size"];
const fileName = data[key]['file_name']; const fileName = data[key]['file_name'];
const timestamp = timestampToMoment(data[key]['last_mes']).format('LL LT'); const timestamp = timestampToMoment(data[key]['last_mes']).format('lll');
const template = $('#past_chat_template .select_chat_block_wrapper').clone(); const template = $('#past_chat_template .select_chat_block_wrapper').clone();
template.find('.select_chat_block').attr('file_name', fileName); template.find('.select_chat_block').attr('file_name', fileName);
template.find('.avatar img').attr('src', avatarImg); template.find('.avatar img').attr('src', avatarImg);
template.find('.select_chat_block_filename').text(fileName); template.find('.select_chat_block_filename').text(fileName);
template.find('.chat_file_size').text(" (" + file_size + ")"); template.find('.chat_file_size').text(`(${file_size},`);
template.find('.chat_messages_num').text(" (" + chat_items + " messages)"); template.find('.chat_messages_num').text(`${chat_items}💬)`);
template.find('.select_chat_block_mes').text(mes); template.find('.select_chat_block_mes').text(mes);
template.find('.PastChat_cross').attr('file_name', fileName); template.find('.PastChat_cross').attr('file_name', fileName);
template.find('.chat_messages_date').text(timestamp); template.find('.chat_messages_date').text(timestamp);
@ -7408,7 +7408,7 @@ jQuery(async function () {
else { else {
//RossAscends: added character name to new chat filenames and replaced Date.now() with humanizedDateTime; //RossAscends: added character name to new chat filenames and replaced Date.now() with humanizedDateTime;
chat_metadata = {}; chat_metadata = {};
characters[this_chid].chat = name2 + " - " + humanizedDateTime(); characters[this_chid].chat = name2 + "-" + humanizedDateTime();
$("#selected_chat_pole").val(characters[this_chid].chat); $("#selected_chat_pole").val(characters[this_chid].chat);
await getChat(); await getChat();
await createOrEditCharacter(); await createOrEditCharacter();

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

@ -173,7 +173,7 @@ export function humanizedDateTime() {
let humanMillisecond = let humanMillisecond =
(baseDate.getMilliseconds() < 10 ? "0" : "") + baseDate.getMilliseconds(); (baseDate.getMilliseconds() < 10 ? "0" : "") + baseDate.getMilliseconds();
let HumanizedDateTime = let HumanizedDateTime =
humanYear + "-" + humanMonth + "-" + humanDate + " @" + humanHour + "h " + humanMinute + "m " + humanSecond + "s " + humanMillisecond + "ms"; humanYear + "-" + humanMonth + "-" + humanDate + "@" + humanHour + "h" + humanMinute + "m" + humanSecond + "s";
return HumanizedDateTime; return HumanizedDateTime;
} }

62
public/style.css
View File

@ -965,8 +965,7 @@ select {
margin-bottom: 0; margin-bottom: 0;
} }
#character_cross, #character_cross {
#select_chat_cross {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 5px; top: 5px;
@ -1954,8 +1953,7 @@ grammarly-extension {
} }
.avatar_div .menu_button, .avatar_div .menu_button,
.form_create_bottom_buttons_block .menu_button, .form_create_bottom_buttons_block .menu_button {
#select_chat_import .menu_button {
font-weight: bold; font-weight: bold;
padding: 5px; padding: 5px;
margin: 0; margin: 0;
@ -2655,30 +2653,18 @@ h5 {
margin: 0; margin: 0;
} }
#select_chat_import { /* .select_chat_block_wrapper {
display: grid;
grid-template-columns: min-content auto;
align-items: center;
grid-gap: 10px;
margin-bottom: 10px;
}
.select_chat_block_wrapper {
display: grid; display: grid;
grid-template-columns: auto min-content; grid-template-columns: auto min-content;
align-items: center; align-items: center;
grid-gap: 10px; grid-gap: 10px;
} } */
.select_chat_block { .select_chat_block {
border-radius: 10px; border-radius: 5px;
margin-top: 10px; margin-top: 5px;
border: 1px solid var(--SmartThemeBorderColor); border: 1px solid var(--SmartThemeBorderColor);
padding: 10px; padding: 5px 7px;
display: grid;
grid-template-columns: min-content auto;
grid-template-rows: auto auto;
grid-gap: 10px;
} }
.select_chat_block:hover { .select_chat_block:hover {
@ -2693,12 +2679,6 @@ h5 {
grid-row: span 2; grid-row: span 2;
} }
#select_chat_name_wrapper {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.select_chat_block_filename_item { .select_chat_block_filename_item {
opacity: 0.5; opacity: 0.5;
width: fit-content; width: fit-content;
@ -2718,16 +2698,6 @@ h5 {
font-size: calc(var(--mainFontSize) - .25rem); font-size: calc(var(--mainFontSize) - .25rem);
} }
#select_chat_cross {
position: absolute;
right: 15px;
top: 15px;
width: 20px;
height: 20px;
cursor: pointer;
opacity: 0.6;
}
.PastChat_cross { .PastChat_cross {
width: 15px; width: 15px;
height: 15px; height: 15px;
@ -3629,22 +3599,6 @@ a {
cursor: pointer; cursor: pointer;
} }
#select_chat_search {
background-color: transparent;
border: none;
outline: none;
color: var(--SmartThemeBodyColor);
display: inline-block;
/* Change display to inline-block */
vertical-align: middle;
/* Align to middle if there's a height discrepancy */
width: 200px;
font-size: 16px;
z-index: 10;
margin-left: 10px;
/* Give some space between the button and search box */
}
.draggable img { .draggable img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -3666,4 +3620,4 @@ a {
height: 100vh; height: 100vh;
z-index: 9999; z-index: 9999;
} }
} }