- added bubblechat style as a toggle

- modified FastUI to work with both

public/index.html

@@ -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>

public/scripts/power-user.js

@@ -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();
+    });
 });

public/style.css

@@ -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;
 }