From 0e6ae900f62c61c4a0c336c7185408c8f7a2b590 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Tue, 16 May 2023 22:04:17 +0900
Subject: [PATCH] Authors Note draggable.

---
 public/index.html                             | 63 +++++++------
 public/script.js                              | 23 ++++-
 public/scripts/RossAscends-mods.js            | 12 +++
 .../extensions/floating-prompt/index.js       | 90 ++++++++++---------
 .../extensions/floating-prompt/style.css      | 29 ++++--
 public/style.css                              |  9 +-
 6 files changed, 147 insertions(+), 79 deletions(-)

diff --git a/public/index.html b/public/index.html
index ca09563f0..8b10f038a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1221,7 +1221,7 @@
                             Trim Incomplete Sentences
                         </label>
                         <!-- Add margin since this is a child of above -->
-                        <label style="margin-left: 1em;"  class="checkbox_label" for="include_newline_checkbox">
+                        <label style="margin-left: 1em;" class="checkbox_label" for="include_newline_checkbox">
                             <input id="include_newline_checkbox" type="checkbox" />
                             Include Newline
                         </label>
@@ -1739,39 +1739,39 @@
                     <div name="NameAndAvatar" class="flex-container flexFlowColumn drawer25pWidth">
 
 
-                    <div class="inline-drawer wide100p flexFlowColumn">
+                        <div class="inline-drawer wide100p flexFlowColumn">
 
-                        <div class="flex-container flexFlowColumn">
-                            <h4>
-                                Send on Enter
-                            </h4>
-                            <select id="send_on_enter">
-                                <option value="-1">Always disabled</option>
-                                <option value="0">Automatic (desktop)</option>
-                                <option value="1">Always enabled</option>
-                            </select>
-                        </div>
+                            <div class="flex-container flexFlowColumn">
+                                <h4>
+                                    Send on Enter
+                                </h4>
+                                <select id="send_on_enter">
+                                    <option value="-1">Always disabled</option>
+                                    <option value="0">Automatic (desktop)</option>
+                                    <option value="1">Always enabled</option>
+                                </select>
+                            </div>
 
-                        <div id="groupCurrentMemberListToggle" class="inline-drawer-toggle inline-drawer-header">
-                            <b>Auto-swipe</b>
-                            <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
-                        </div>
-                        <div class="inline-drawer-content">
+                            <div id="groupCurrentMemberListToggle" class="inline-drawer-toggle inline-drawer-header">
+                                <b>Auto-swipe</b>
+                                <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
+                            </div>
+                            <div class="inline-drawer-content">
 
-                        <label class="checkbox_label" for="auto_swipe">
-                            <input id="auto_swipe" type="checkbox" />
-                            Enabled
-                        </label>
-                            <div>Minimum generated message length</div>
-                            <input id="auto_swipe_minimum_length" name="auto_swipe_minimum_length" type="number" min="0" step="1" value="0" class="text_pole">
-                            <div>Blacklisted words</div>
-                            <div class="auto_swipe">
-                                <input id="auto_swipe_blacklist" name="auto_swipe_blacklist" placeholder="words you dont want generated separated by comma ','" class="text_pole" maxlength="500" value="" autocomplete="off">
-                                <div>Blacklisted word count to swipe</div>
-                                <input id="auto_swipe_blacklist_threshold" name="auto_swipe_blacklist_threshold" type="number" min="0" step="1" value="1" class="text_pole">
+                                <label class="checkbox_label" for="auto_swipe">
+                                    <input id="auto_swipe" type="checkbox" />
+                                    Enabled
+                                </label>
+                                <div>Minimum generated message length</div>
+                                <input id="auto_swipe_minimum_length" name="auto_swipe_minimum_length" type="number" min="0" step="1" value="0" class="text_pole">
+                                <div>Blacklisted words</div>
+                                <div class="auto_swipe">
+                                    <input id="auto_swipe_blacklist" name="auto_swipe_blacklist" placeholder="words you dont want generated separated by comma ','" class="text_pole" maxlength="500" value="" autocomplete="off">
+                                    <div>Blacklisted word count to swipe</div>
+                                    <input id="auto_swipe_blacklist_threshold" name="auto_swipe_blacklist_threshold" type="number" min="0" step="1" value="1" class="text_pole">
+                                </div>
                             </div>
                         </div>
-                    </div>
 
                         <div name="NameChanger">
                             <h4>Name</h4>
@@ -2476,6 +2476,7 @@
     <div id="typing_indicator_template" class="template_element">
         <div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div>
     </div>
+    <div id="movingDivs"></div>
     <div id="sheld">
         <div id="sheldheader" class="fa-solid fa-grip drag-grabber"></div>
         <!-- <div class="pull-tab"></div> -->
@@ -2515,6 +2516,10 @@
                 <i class="fa-lg fa-solid fa-bookmark"></i>
                 <span>Save bookmark</span>
             </a>
+            <a id="option_toggle_AN">
+                <i class="fa-lg fa-solid fa-note-sticky"></i>
+                <span>Open Author's Note</span>
+            </a>
             <a id="option_convert_to_group">
                 <i class="fa-lg fa-solid fa-people-arrows"></i>
                 <span>Convert to group</span>
diff --git a/public/script.js b/public/script.js
index 9040454ef..32895b40e 100644
--- a/public/script.js
+++ b/public/script.js
@@ -1532,7 +1532,7 @@ class StreamingProcessor {
         setGenerationProgress(0);
         $('.mes_buttons:last').show();
         generatedPromtCache = '';
-        
+
         console.log("Generated text size:", text.length, text)
 
         if (power_user.auto_swipe) {
@@ -5574,6 +5574,27 @@ $(document).ready(function () {
 
     $("#options [id]").on("click", function () {
         var id = $(this).attr("id");
+
+        if (id == "option_toggle_AN") {
+            if (selected_group || this_chid !== undefined && $("#floatingPrompt").css("display") === 'none') {
+                $("#floatingPrompt").css("display", "flex");
+                $("#floatingPrompt").css("opacity", 0.0);
+                $("#floatingPrompt").transition({
+                    opacity: 1.0,
+                    duration: animation_duration,
+                    easing: animation_easing,
+                });
+                $("#ANBlockToggle").click();
+            } else {
+                $("#floatingPrompt").transition({
+                    opacity: 0.0,
+                    duration: 250,
+                    easing: animation_easing,
+                });
+                setTimeout(function () { $("#floatingPrompt").hide(); }, 250);
+            }
+        }
+
         if (id == "option_select_chat") {
             if ((selected_group && !is_group_generating) || (this_chid !== undefined && !is_send_press)) {
                 displayPastChats();
diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js
index 952adedd7..651629bcf 100644
--- a/public/scripts/RossAscends-mods.js
+++ b/public/scripts/RossAscends-mods.js
@@ -106,10 +106,20 @@ function waitForElement(querySelector, timeout) {
 waitForElement("#expression-image", 10000).then(function () {
 
     dragElement(document.getElementById("expression-holder"));
+    dragElement(document.getElementById("floatingPrompt"));
+
 }).catch(() => {
     console.log("expression holder not loaded yet");
 });
 
+waitForElement("#floatingPrompt", 10000).then(function () {
+
+    dragElement(document.getElementById("floatingPrompt"));
+
+}).catch(() => {
+    console.log("floating prompt box not loaded yet");
+});
+
 // Device detection
 const deviceInfo = await getDeviceInfo();
 
@@ -443,6 +453,7 @@ dragElement(document.getElementById("WorldInfo"));
 
 
 function dragElement(elmnt) {
+
     var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
     if (document.getElementById(elmnt.id + "header")) { //ex: id="sheldheader"
         // if present, the header is where you move the DIV from, but this overrides everything else:
@@ -453,6 +464,7 @@ function dragElement(elmnt) {
     }
 
     function dragMouseDown(e) {
+        //console.log(e);
         e = e || window.event;
         e.preventDefault();
         // get the mouse cursor position at startup:
diff --git a/public/scripts/extensions/floating-prompt/index.js b/public/scripts/extensions/floating-prompt/index.js
index ead3cbd1a..5382df00a 100644
--- a/public/scripts/extensions/floating-prompt/index.js
+++ b/public/scripts/extensions/floating-prompt/index.js
@@ -100,7 +100,7 @@ async function moduleWorker() {
 
     if (lastMessageNumber <= 0 || chat_metadata[metadata_keys.interval] <= 0) {
         context.setExtensionPrompt(MODULE_NAME, '');
-        $('#extension_floating_counter').text('No');
+        $('#extension_floating_counter').text('(disabled)');
         return;
     }
 
@@ -110,57 +110,67 @@ async function moduleWorker() {
     const shouldAddPrompt = messagesTillInsertion == 0;
     const prompt = shouldAddPrompt ? $('#extension_floating_prompt').val() : '';
     context.setExtensionPrompt(MODULE_NAME, prompt, chat_metadata[metadata_keys.position], chat_metadata[metadata_keys.depth]);
-    $('#extension_floating_counter').text(shouldAddPrompt ? 'This' : messagesTillInsertion);
+    $('#extension_floating_counter').text(shouldAddPrompt ? '0' : messagesTillInsertion);
 }
 
 (function () {
     function addExtensionsSettings() {
         const settingsHtml = `
-        <div class="floating_prompt_settings">
-            <div class="inline-drawer">
-                <div class="inline-drawer-toggle inline-drawer-header">
-                    <b>Author's Note / Character Bias</b>
-                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
-            </div>
-            <div class="inline-drawer-content">
-                <small>
-                    Your notes are saved <b>PER CHAT</b>. When you start a new chat, you'll see the default / empty note.<br>
-                    Saving a bookmark will copy your note to a bookmark chat. Making changes to it won't update the note in a parent chat.<br>
-                </small>
-                <label for="extension_floating_prompt">Append the following text:</label>
-                <textarea id="extension_floating_prompt" class="text_pole" rows="8"></textarea>
-                <div class="floating_prompt_radio_group">
-                    <label>
-                        <input type="radio" name="extension_floating_position" value="0" />
-                        After scenario
-                    </label>
-                    <label>
-                        <input type="radio" name="extension_floating_position" value="1" />
-                        In-chat
-                    </label>
-                </div>
-                <label for="extension_floating_interval">Every N messages <b>you</b> send (set to 0 to disable):</label>
-                <input id="extension_floating_interval" class="text_pole" type="number" min="0" max="999" />
-                <label for="extension_floating_interval">Insertion depth (for in-chat positioning):</label>
-                <input id="extension_floating_depth" class="text_pole" type="number" min="0" max="99" />
-                <span>Appending to the prompt in next: <span id="extension_floating_counter">No</span> message(s)</span>
-                </div>
-            </div>
-            <div class="inline-drawer">
-                <div class="inline-drawer-toggle inline-drawer-header">
-                    <b>Default note for new chats</b>
-                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        <div id="floatingPrompt" class="drawer-content flexGap5">
+            <div id="floatingPromptheader" class="fa-solid fa-grip drag-grabber"></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">
-                    <label for="extension_floating_default">Default Author's Note</label>
-                    <textarea id="extension_floating_default" class="text_pole" rows="8"
-                    placeholder="Example:\n[Scenario: wacky adventures; Genre: romantic comedy; Style: verbose, creative]"></textarea>
+                    <small>
+                        <b>Unique to this chat</b>.<br>
+                        Bookmarks inherit the Note from their parent, and can be changed individually after that.<br>
+                    </small>
+                    
+                    <textarea id="extension_floating_prompt" class="text_pole" rows="8"></textarea>
+                    
+                    <div class="floating_prompt_radio_group">
+                        <label>
+                            <input type="radio" name="extension_floating_position" value="0" />
+                            After scenario
+                        </label>
+                        <label>
+                            <input type="radio" name="extension_floating_position" value="1" />
+                            In-chat @ Depth <input id="extension_floating_depth" class="text_pole" type="number" min="0" max="99" />
+                        </label>
+                    </div>
+                    <!--<label for="extension_floating_interval">In-Chat Insertion Depth</label>-->
+                    
+                    <label for="extension_floating_interval">Insertion Frequency</label>                    
+                    
+                    <input id="extension_floating_interval" class="text_pole" type="number" min="0" max="999" /><small> (0 = Disable)</small>
+                    <br>
+
+                    <span>User inputs until next insertion: <span id="extension_floating_counter">(disabled)</span></span>
+
+                    </div>
+                </div>
+                <hr class="sysHR">
+                <div class="inline-drawer">
+                    <div id="defaultANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
+                        <b>Default Author's Note</b>
+                        <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+                    </div>
+                    <div class="inline-drawer-content">
+                    <small>Will be automatically added as the Author's Note for all new chats.</small>
+                        
+                        <textarea id="extension_floating_default" class="text_pole" rows="8"
+                        placeholder="Example:\n[Scenario: wacky adventures; Genre: romantic comedy; Style: verbose, creative]"></textarea>
+                    </div>
                 </div>
             </div>
         </div>
         `;
 
-        $('#extensions_settings').append(settingsHtml);
+        $('#movingDivs').append(settingsHtml);
         $('#extension_floating_prompt').on('input', onExtensionFloatingPromptInput);
         $('#extension_floating_interval').on('input', onExtensionFloatingIntervalInput);
         $('#extension_floating_depth').on('input', onExtensionFloatingDepthInput);
diff --git a/public/scripts/extensions/floating-prompt/style.css b/public/scripts/extensions/floating-prompt/style.css
index 2537e0487..6844684fa 100644
--- a/public/scripts/extensions/floating-prompt/style.css
+++ b/public/scripts/extensions/floating-prompt/style.css
@@ -1,4 +1,26 @@
-.floating_prompt_settings {
+#floatingPrompt {
+    overflow-y: auto;
+    max-width: 90svw;
+    max-height: 90svh;
+    min-width: 100px;
+    min-height: 100px;
+    border-radius: 10px;
+    border: 1px solid var(--white30a);
+    position: fixed;
+    padding: 10px;
+    display: none;
+    flex-direction: column;
+    box-shadow: 0 0 10px var(--black70a);
+    z-index: 3000;
+    left: 0;
+    top: 0;
+    margin: 0;
+    right: unset;
+    width: calc(((100svw - var(--sheldWidth)) / 2) - 1px);
+
+}
+
+.floating_prompt_radio_group {
     display: flex;
     flex-direction: column;
 }
@@ -11,9 +33,4 @@
 .floating_prompt_settings textarea {
     font-size: calc(var(--mainFontSize) * 0.9);
     line-height: 1.2;
-}
-
-.floating_prompt_radio_group {
-    display: flex;
-    flex-direction: column;
 }
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index f0f48475b..5292201d9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -845,7 +845,7 @@ select {
     font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
 
     padding: 7px;
-    width: 100%;
+    /* width: 100%; */
     margin: 5px 0;
 }
 
@@ -3526,11 +3526,13 @@ label[for="extensions_autoconnect"] {
     backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     z-index: 9999 !important;
+    border: 1px solid var(--white30a);
 }
 
 .fillRight,
 .fillLeft,
-#WorldInfo {
+#WorldInfo,
+#floatingPrompt {
     min-width: unset;
     position: fixed;
 }
@@ -3887,7 +3889,8 @@ body.movingUI .drag-grabber {
 body.movingUI #sheld,
 body.movingUI .drawer-content,
 body.movingUI #expression-holder,
-body.movingUI #avatar_zoom_popup {
+body.movingUI #avatar_zoom_popup,
+body.movingUI #floatingPrompt {
     resize: both;
 }