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

- added bubblechat style as a toggle

Browse Source 
- modified FastUI to work with both
This commit is contained in:
RossAscends
2023-04-07 16:51:49 +09:00
parent 87c50ce418
commit 0c3699af17
3 changed files with 111 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/index.html
View File

@ -265,7 +265,7 @@
<div class="ui-settings">
<div class="range-block">
<div class="range-block-title">
<h4>Fast UI Mode<br>(no background blur)</h4>
<h4>No Blur Effect</h4>
</div>
<div class="range-block-range">
<label for="fast_ui_mode" class="checkbox_label">
@ -289,6 +289,21 @@
</label>
</div>
</div>
<div id="chat-display" class="range-block">
<div class="range-block-title">
<h4>Chat Style</h4>
</div>
<div class="range-block-range">
<label>
<input name="chat_display" type="radio" value="0" />
Default
</label>
<label>
<input name="chat_display" type="radio" value="1" />
Bubbles
</label>
</div>
</div>
</div>
<div id="power-user-options-block">
<h3>Power User Options</h3>

22
public/scripts/power-user.js
View File

@ -18,6 +18,7 @@ let power_user = {
custom_chat_separator: '',
fast_ui_mode: false,
avatar_style: 0,
chat_display: 0
};
const storage_keys = {
@ -32,6 +33,7 @@ const storage_keys = {
fast_ui_mode: "TavernAI_fast_ui_mode",
multigen: "TavernAI_multigen",
avatar_style: "TavernAI_avatar_style",
chat_display: "TavernAI_chat_display"
};
function collapseNewlines(x) {
@ -60,8 +62,21 @@ function applyAvatarStyle() {
}
}
function applyChatDisplay() {
power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? 0);
switch (power_user.chat_display) {
case 0:
$("body").removeClass("bubblechat");
break;
case 1:
$("body").addClass("bubblechat");
break;
}
}
applyAvatarStyle();
switchUiMode();
applyChatDisplay();
// TODO delete in next release
function loadFromLocalStorage() {
@ -88,6 +103,7 @@ function loadPowerUserSettings(settings) {
// These are still local storage
power_user.fast_ui_mode = localStorage.getItem(storage_keys.fast_ui_mode) == "true";
power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? 0);
power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? 0);
$("#force-pygmalion-formatting-checkbox").prop("checked", power_user.force_pygmalion_formatting);
$("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines);
@ -100,6 +116,7 @@ function loadPowerUserSettings(settings) {
$("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
$("#multigen").prop("checked", power_user.multigen);
$(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
$(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
}
$(document).ready(() => {
@ -160,4 +177,9 @@ $(document).ready(() => {
localStorage.setItem(storage_keys.avatar_style, power_user.avatar_style);
applyAvatarStyle();
});
$(`input[name="chat_display"]`).on('input', function (e) {
power_user.chat_display = Number(e.target.value);
localStorage.setItem(storage_keys.chat_display, power_user.chat_display);
applyChatDisplay();
});
});

75
public/style.css
View File

@ -165,9 +165,6 @@ code {
z-index: 3000;
}
#sheld {
display: grid;
grid-template-rows: auto min-content;
@ -354,7 +351,6 @@ margin-top:5px;
}
.mes {
display: grid;
grid-template-columns: min-content min-content auto min-content;
padding: 20px 10px 0 10px;
@ -413,7 +409,7 @@ margin-top:5px;
flex: 1;
}
#avatars-style .range-block-range {
#avatars-style .range-block-range, #chat-display .range-block-range {
display: flex;
flex-direction: column;
}
@ -3110,6 +3106,8 @@ filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93
}
}
/*FastUI blue removal*/
body.no-blur * {
backdrop-filter: unset !important;
}
@ -3119,11 +3117,74 @@ body.no-blur #bg1, body.no-blur #bg2 {
}
body.no-blur .drawer-content,
body.no-blur #chat,
/*body.no-blur #chat,*/ /*removed as it clashed with bubbles*/
body.no-blur .mes, /*applying to .mes block has the same effect as #chat, and works on both default and bubblechat*/
body.no-blur #top-bar,
body.no-blur #character_popup,
body.no-blur #world_popup,
body.no-blur #dialogue_popup,
body.no-blur #select_chat_popup {
background-color: var(--black90a) !important;
background-color: var(--black90a);
}
/*bubble chat style*/
body.bubblechat #chat {
margin-top: 5px;
overflow-x: hidden;
padding-bottom: 0;
overflow-y: scroll;
display: flex;
bottom: 10px;
-webkit-backdrop-filter: blur(10px);
text-shadow: #000 0 0 3px;
scrollbar-width: thin;
transition: all 1s ease-in-out;
flex-direction: column;
border-radius: 20px;
z-index: 3;
border: none;
backdrop-filter: unset;
background-color: unset;
}
body.bubblechat #send_form {
display: grid;
align-items: center;
grid-template-columns: 40px auto 40px;
width: 100%;
margin: 0 auto 0 auto;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 20px;
background-color: var(--crimson70a);
backdrop-filter: blur(10px);
}
body.bubblechat .mes {
display: grid;
grid-template-columns: min-content min-content auto min-content;
padding: 10px 10px 10px 10px;
margin-top: 0;
width: 100%;
color: rgb(181 181 181);
border-radius: 20px;
backdrop-filter: blur(10px) brightness(0.3);
margin-top: 10px;
border: 1px solid rgba(255,255,255,0.2);
}
/*this could be a default replacement for the scrollbar regardless of chat style
but putting it here for now*/
body.bubblechat ::-webkit-scrollbar {
width: 5px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 5px;
}
body.bubblechat ::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.5);
-webkit-box-shadow: inset 0 0 2px var(--black30a);
box-shadow: inset 0 0 3px black;
border-radius: 5px;
}