Merge branch 'dev' of https://github.com/SillyLossy/TavernAI into dev

public/index.html

@@ -2698,12 +2698,15 @@
                     <span class="name_text">${characterName}</span>
 
                     <div class="mes_buttons">
-                        <div title="Translate message" class="mes_translate fa-solid fa-language"></div>
+                        <div class="extraMesButtonsHint fa-solid fa-ellipsis"></div>
-                        <div title="Open bookmark chat" class="mes_bookmark fa-solid fa-bookmark"></div>
+                        <div class="extraMesButtons">
-                        <div title="Generate Image" class="sd_message_gen fa-solid fa-paintbrush"></div>
+                            <div title="Translate message" class="mes_translate fa-solid fa-language"></div>
-                        <div title="Narrate" class="mes_narrate fa-solid fa-bullhorn"></div>
+                            <div title="Open bookmark chat" class="mes_bookmark fa-solid fa-bookmark"></div>
-                        <div title="Prompt" class="mes_prompt fa-solid fa-square-poll-horizontal "></div>
+                            <div title="Generate Image" class="sd_message_gen fa-solid fa-paintbrush"></div>
-                        <div title="Copy" class="mes_copy fa-solid fa-copy "></div>
+                            <div title="Narrate" class="mes_narrate fa-solid fa-bullhorn"></div>
+                            <div title="Prompt" class="mes_prompt fa-solid fa-square-poll-horizontal "></div>
+                            <div title="Copy" class="mes_copy fa-solid fa-copy "></div>
+                        </div>
                         <div title="Edit" class="mes_edit fa-solid fa-pencil "></div>
                     </div>
                     <div class="mes_edit_buttons">
@@ -2886,4 +2889,4 @@
     </script>
 </body>
 
-</html>
+</html>

public/script.js

@@ -5429,7 +5429,6 @@ $(document).ready(function () {
             easing: animation_easing,
         });
         setTimeout(function () { $("#character_popup").css("display", "none"); }, 200);
-        //$("#character_popup").css("display", "none");
     });
     $("#character_popup_ok").click(function () {
         is_advanced_char_open = false;
@@ -6371,6 +6370,25 @@ $(document).ready(function () {
         }
     })
 
+    $(document).on("click", ".extraMesButtonsHint", function (e) {
+        const elmnt = e.target;
+        $(elmnt).transition({
+            opacity: 0,
+            duration: 150,
+            easing: 'ease-in-out',
+        });
+        setTimeout(function () {
+            $(elmnt).hide();
+            $(elmnt).siblings(".extraMesButtons").css('opcacity', '0');
+            $(elmnt).siblings(".extraMesButtons").css('display', 'flex');
+            $(elmnt).siblings(".extraMesButtons").transition({
+                opacity: 1,
+                duration: 150,
+                easing: 'ease-in-out',
+            });
+        }, 150);
+    })
+
     $(document).on("click", ".mes_edit_cancel", function () {
         let text = chat[this_edit_mes_id]["mes"];
 

public/scripts/extensions/floating-prompt/index.js

@@ -143,12 +143,16 @@ async function moduleWorker() {
     function addExtensionsSettings() {
         const settingsHtml = `
         <div id="floatingPrompt" class="drawer-content flexGap5">
-            <div id="floatingPromptheader" class="fa-solid fa-grip drag-grabber"></div>
+            <div class="panelControlBar flex-container">
+                <div id="floatingPromptheader" class="fa-solid fa-grip drag-grabber"></div>
+                <div id="ANClose" class="fa-solid fa-circle-xmark"></div>
+            </div>
             <div name="floatingPromptHolder">
                 <div class="inline-drawer">
                     <div id="ANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
                         <b>Author's Note</b>
                         <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+                        
                 </div>
                 <div class="inline-drawer-content">
                     <small>
@@ -202,6 +206,14 @@ async function moduleWorker() {
         $('#extension_floating_depth').on('input', onExtensionFloatingDepthInput);
         $('#extension_floating_default').on('input', onExtensionFloatingDefaultInput);
         $('input[name="extension_floating_position"]').on('change', onExtensionFloatingPositionInput);
+        $('#ANClose').on('click', function () {
+            $("#floatingPrompt").transition({
+                opacity: 0,
+                duration: 200,
+                easing: 'ease-in-out',
+            });
+            setTimeout(function () { $('#floatingPrompt').hide() }, 200);
+        })
     }
 
     addExtensionsSettings();

public/scripts/extensions/floating-prompt/style.css

@@ -8,6 +8,7 @@
     border: 1px solid var(--white30a);
     position: fixed;
     padding: 10px;
+    padding-top: 25px;
     display: none;
     flex-direction: column;
     box-shadow: 0 0 10px var(--black70a);
@@ -33,4 +34,28 @@
 .floating_prompt_settings textarea {
     font-size: calc(var(--mainFontSize) * 0.9);
     line-height: 1.2;
+}
+
+#ANClose {
+    height: 15px;
+    aspect-ratio: 1 / 1;
+    font-size: 20px;
+    opacity: 0.5;
+    transition: all 250ms;
+}
+
+#ANClose:hover {
+    cursor: pointer;
+    opacity: 1;
+}
+
+.panelControlBar {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    margin-right: 5px;
+}
+
+#floatingPrompt .drag-grabber {
+    position: unset;
 }

public/style.css

@@ -364,6 +364,11 @@ code {
     cursor: -webkit-grab;
     display: none;
     filter: drop-shadow(0px 0px 0px black);
+    transition: all 250ms;
+}
+
+.drag-grabber:hover {
+    opacity: 1;
 }
 
 #sheldheader:active {
@@ -2279,14 +2284,21 @@ input[type="range"]::-webkit-slider-thumb {
     backdrop-filter: blur(var(--SmartThemeBlurStrength));
 }
 
-.mes_buttons {
+
-    height: 20px;
+.mes_buttons,
-    grid-row-start: 1;
+.extraMesButtons {
+    /* height: 20px; */
     position: relative;
     display: flex;
     gap: 10px;
     flex-wrap: nowrap;
     justify-content: flex-end;
+    transition: all 200ms;
+    overflow-x: hidden;
+}
+
+.extraMesButtons {
+    display: none;
 }
 
 .last_mes .mes_buttons {
@@ -2297,14 +2309,18 @@ input[type="range"]::-webkit-slider-thumb {
     margin-right: 30px;
 }
 
-.mes_buttons>div {
+.mes_buttons .mes_edit,
+.extraMesButtonsHint,
+.extraMesButtons div {
     cursor: pointer;
     transition: 0.3s ease-in-out;
     filter: drop-shadow(0px 0px 2px black);
     opacity: 0.2;
 }
 
-.mes_buttons>div:hover {
+.mes_buttons .mes_edit:hover,
+.extraMesButtonsHint:hover,
+.extraMesButtons div:hover {
     opacity: 1;
 }