Advanced edit (partial)

public/img/check-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>

public/img/chevron-down-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>

public/img/chevron-up-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/></svg>

public/img/copy-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M272 0H396.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H272c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128H192v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>

public/img/scissors-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 192l-39.5-39.5c4.9-12.6 7.5-26.2 7.5-40.5C224 50.1 173.9 0 112 0S0 50.1 0 112s50.1 112 112 112c14.3 0 27.9-2.7 40.5-7.5L192 256l-39.5 39.5c-12.6-4.9-26.2-7.5-40.5-7.5C50.1 288 0 338.1 0 400s50.1 112 112 112s112-50.1 112-112c0-14.3-2.7-27.9-7.5-40.5L499.2 76.8c7.1-7.1 7.1-18.5 0-25.6c-28.3-28.3-74.1-28.3-102.4 0L256 192zm22.6 150.6L396.8 460.8c28.3 28.3 74.1 28.3 102.4 0c7.1-7.1 7.1-18.5 0-25.6L342.6 278.6l-64 64zM64 112a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm48 240a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg>

public/img/xmark-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>

public/index.html

@@ -1271,8 +1271,26 @@
                     <span class="name_text">${characterName}</span>
 
                     <div title="Edit" class="mes_edit"></div>
-                    <div class="mes_edit_cancel menu_button">CANCEL</div><!-- <img src=img/cancel.png></div> -->
+                    <div class="mes_edit_buttons">
-                    <div class="mes_edit_done menu_button">CONFIRM</div><!-- <img src=img/done.png></div> -->
+                        <div class="mes_edit_done menu_button" title="Confirm">
+                            <img alt="" class="svg_icon" src="img/check-solid.svg">
+                        </div>
+                        <div class="mes_edit_copy menu_button" title="Copy this message">
+                            <img alt="" class="svg_icon" src="img/copy-solid.svg">
+                        </div>
+                        <div class="mes_edit_delete menu_button" title="Delete this message">
+                            <img alt="" class="svg_icon" src="img/scissors-solid.svg">
+                        </div>
+                        <div class="mes_edit_up menu_button" title="Move message up">
+                            <img alt="" class="svg_icon" src="img/chevron-up-solid.svg">
+                        </div>
+                        <div class="mes_edit_down menu_button" title="Move message down">
+                            <img alt="" class="svg_icon" src="img/chevron-down-solid.svg">
+                        </div>
+                        <div class="mes_edit_cancel menu_button" title="Cancel">
+                            <img alt="" class="svg_icon" src="img/xmark-solid.svg">
+                        </div>
+                    </div>
                 </div>
                 <div class=mes_text></div>
                 <div class="mes_bias"></div>

public/script.js

@@ -811,7 +811,7 @@ function appendImageToMessage(mes, messageElement) {
     }
 }
 
-function addOneMessage(mes, type = "normal") {
+function addOneMessage(mes, type = "normal", insertAfter = null) {
 
     var messageText = mes["mes"];
     var characterName = name1;
@@ -851,7 +851,15 @@ function addOneMessage(mes, type = "normal") {
     var HTMLForEachMes = getMessageFromTemplate(count_view_mes, characterName, mes.is_user, avatarImg, bias, isSystem);
 
     if (type !== 'swipe') {
-        $("#chat").append(HTMLForEachMes);
+        if (!insertAfter) {
+            $("#chat").append(HTMLForEachMes);
+        }
+        else {
+            const target = $("#chat").find(`.mes[mesid="${insertAfter}"]`);
+            $(HTMLForEachMes).insertAfter(target);
+            $(HTMLForEachMes).find('.swipe_left').css('display', 'none');
+            $(HTMLForEachMes).find('.swipe_right').css('display', 'none');
+        }
     }
 
     const newMessage = $(`#chat [mesid="${count_view_mes}"]`);
@@ -878,16 +886,18 @@ function addOneMessage(mes, type = "normal") {
         count_view_mes++;
 
     }
-    $('#chat .mes').last().addClass('last_mes');
-    $('#chat .mes').eq(-2).removeClass('last_mes');
 
-    hideSwipeButtons();
+    // Don't scroll if not inserting last
-    showSwipeButtons();
+    if (!insertAfter) {
+        $('#chat .mes').last().addClass('last_mes');
+        $('#chat .mes').eq(-2).removeClass('last_mes');
 
-    // TODO: figure out smooth scrolling that wouldn't hit performance much.
+        hideSwipeButtons();
-    var $textchat = $("#chat");
+        showSwipeButtons();
-    $textchat.scrollTop(($textchat[0].scrollHeight));
+
-    //$('#chat .mes').last().get(0).scrollIntoView({ behavior: "smooth" });
+        var $textchat = $("#chat");
+        $textchat.scrollTop(($textchat[0].scrollHeight));
+    }
 }
 
 function substituteParams(content) {
@@ -2344,14 +2354,8 @@ function isInt(value) {
 }
 
 function messageEditDone(div) {
-    var text = div
+    let mesBlock = div.closest(".mes_block");
-        .parent()
+    var text = mesBlock.find(".edit_textarea").val().trim();
-        .parent()
-        .children(".mes_text")
-        .children(".edit_textarea")
-        .val();
-    //var text = chat[this_edit_mes_id];
-    text = text.trim();
     const bias = extractMessageBias(text);
     chat[this_edit_mes_id]["mes"] = text;
 
@@ -2362,17 +2366,12 @@ function messageEditDone(div) {
 
     chat[this_edit_mes_id]["extra"]["bias"] = bias ?? null;
 
-    div.parent().parent().children(".mes_text").empty();
+    mesBlock.find(".mes_text").empty();
-    div.css("display", "none");
+    mesBlock.find(".mes_edit_buttons").css("display", "none");
-    div.parent().children(".mes_edit_cancel").css("display", "none");
+    mesBlock.find(".mes_edit").css("display", "inline-block");
-    div.parent().children(".mes_edit").css("display", "inline-block");
+    mesBlock.find(".mes_text").append(messageFormating(text, this_edit_mes_chname));
-    div
+    mesBlock.find(".mes_bias").empty();
-        .parent()
+    mesBlock.find(".mes_bias").append(messageFormating(bias));
-        .parent()
-        .children(".mes_text")
-        .append(messageFormating(text, this_edit_mes_chname));
-    div.parent().parent().children(".mes_bias").empty();
-    div.parent().parent().children(".mes_bias").append(messageFormating(bias));
     appendImageToMessage(chat[this_edit_mes_id], div.closest(".mes"));
     this_edit_mes_id = undefined;
     if (selected_group) {
@@ -3968,9 +3967,8 @@ $(document).ready(function () {
                 let mes_edited = $("#chat")
                     .children()
                     .filter('[mesid="' + this_edit_mes_id + '"]')
-                    .children(".mes_block")
+                    .find(".mes_block")
-                    .children(".ch_name")
+                    .find(".mes_edit_done");
-                    .children(".mes_edit_done");
                 if (edit_mes_id == count_view_mes - 1) { //if the generating swipe (...)
                     if (chat[edit_mes_id]['swipe_id'] !== undefined) {
                         if (chat[edit_mes_id]['swipes'].length === chat[edit_mes_id]['swipe_id']) {
@@ -3983,11 +3981,10 @@ $(document).ready(function () {
                 }
                 messageEditDone(mes_edited);
             }
-            $(this).parent().parent().children(".mes_text").empty();
+            $(this).closest(".mes_block").find(".mes_text").empty();
             $(this).css("display", "none");
-            $(this).parent().children(".mes_edit_done").css("display", "inline-block");
+            $(this).closest(".mes_block").find(".mes_edit_buttons").css("display", "inline-flex");
-            $(this).parent().children(".mes_edit_cancel").css("display", "inline-block");
+            var edit_mes_id = $(this).closest(".mes").attr("mesid");
-            var edit_mes_id = $(this).parent().parent().parent().attr("mesid");
             this_edit_mes_id = edit_mes_id;
 
             var text = chat[edit_mes_id]["mes"];
@@ -4000,19 +3997,16 @@ $(document).ready(function () {
             }
             text = text.trim();
             $(this)
-                .parent()
+                .closest(".mes_block")
-                .parent()
+                .find(".mes_text")
-                .children(".mes_text")
                 .append(
                     '<textarea class=edit_textarea style="max-width:auto; ">' +
                     text +
                     "</textarea>"
                 );
             let edit_textarea = $(this)
-                .parent()
+                .closest(".mes_block")
-                .parent()
+                .find(".edit_textarea");
-                .children(".mes_text")
-                .children(".edit_textarea");
             edit_textarea.height(0);
             edit_textarea.height(edit_textarea[0].scrollHeight);
             edit_textarea.focus();
@@ -4028,18 +4022,60 @@ $(document).ready(function () {
     $(document).on("click", ".mes_edit_cancel", function () {
         let text = chat[this_edit_mes_id]["mes"];
 
-        $(this).parent().parent().children(".mes_text").empty();
+        $(this).closest(".mes_block").find(".mes_text").empty();
-        $(this).css("display", "none");
+        $(this).closest(".mes_edit_buttons").css("display", "none");
-        $(this).parent().children(".mes_edit_done").css("display", "none");
+        $(this).closest(".mes_block").find(".mes_edit").css("display", "inline-block");
-        $(this).parent().children(".mes_edit").css("display", "inline-block");
         $(this)
-            .parent()
+            .closest(".mes_block")
-            .parent()
+            .find(".mes_text")
-            .children(".mes_text")
             .append(messageFormating(text, this_edit_mes_chname));
         appendImageToMessage(chat[this_edit_mes_id], $(this).closest(".mes"));
         this_edit_mes_id = undefined;
     });
+
+    $(document).on("click", ".mes_edit_copy", function () {
+        if (!confirm('Create a copy of this message?')) {
+            return;
+        }
+
+        hideSwipeButtons();
+        let oldScroll = $('#chat')[0].scrollTop;
+        const clone = JSON.parse(JSON.stringify(chat[this_edit_mes_id])); // quick and dirty clone
+        clone.send_date = Date.now();
+        clone.mes = $(this).closest(".mes").find('.edit_textarea').val().trim();
+
+        chat.splice(Number(this_edit_mes_id) + 1, 0, clone);
+        addOneMessage(clone, 'normal', this_edit_mes_id);
+
+        updateViewMessageIds();
+        saveChatConditional();
+        $('#chat')[0].scrollTop = oldScroll;
+        showSwipeButtons();
+    });
+
+    $(document).on("click", ".mes_edit_delete", function () {
+        if (!confirm("Are you sure you want to delete this message?")) {
+            return;
+        }
+
+        const mes = $(this).closest(".mes");
+
+        if (!mes) {
+            return;
+        }
+
+        chat.splice(this_edit_mes_id, 1);
+        this_edit_mes_id = undefined;
+        mes.remove();
+        count_view_mes--;
+
+        updateViewMessageIds();
+        saveChatConditional();
+
+        hideSwipeButtons();
+        showSwipeButtons();
+    });
+
     $(document).on("click", ".mes_edit_done", function () {
         messageEditDone($(this));
     });
@@ -4264,3 +4300,20 @@ $(document).ready(function () {
         $(this).closest('.inline-drawer').find('.inline-drawer-content').slideToggle();
     });
 })
+function saveChatConditional() {
+    if (selected_group) {
+        saveGroupChat();
+    }
+    else {
+        saveChat();
+    }
+}
+
+function updateViewMessageIds() {
+    $('#chat').find(".mes").each(function (index, element) {
+        $(element).attr("mesid", index);
+    });
+
+    $('#chat .mes').removeClass('last_mes');
+    $('#chat .mes').last().addClass('last_mes');
+}

public/style.css

@@ -1741,26 +1741,32 @@ input[type="range"]{
     opacity: 1;
 }
 
-.last_mes .mes_edit, .last_mes .mes_edit_done, .last_mes .mes_edit_cancel {
+.last_mes .mes_edit, .last_mes .mes_edit_buttons {
-grid-row-start: 1;
+    grid-row-start: 1;
-position: relative;
+    position: relative;
-right: -30px;
+    right: -30px;
 }
 
-.mes_edit_done, .mes_edit_cancel {
+.mes_edit_buttons {
     display: none;
+    flex-direction: row;
+    column-gap: 10px;
     float: right;
     cursor: pointer;
-    margin-right: 10px;
+    padding-bottom: 5px;
     filter: drop-shadow(0px 0px 2px black);
     transition: 0.3s ease-in-out;
 }
 
-.mes_edit_cancel {
+.mes_edit_buttons .menu_button .svg_icon {
-    margin-right: 0px;
+    height: 18px;
+    width: 18px;
+    margin: 2px;
+    filter: invert(1);
 }
 
-.mes_edit_cancel.menu_button, .mes_edit_done.menu_button{
+
+.mes_edit_buttons .menu_button {
     opacity: 0.5;
     padding: 5px;
     margin-top: 0;
@@ -1770,7 +1776,7 @@ right: -30px;
 .mes_edit_cancel.menu_button{background-color: var(--crimson70a);}
 .mes_edit_done.menu_button{background-color: var(--okGreen70a);}
 
-.mes_edit_cancel.menu_button:hover, .mes_edit_done.menu_button:hover{
+.mes_edit_buttons .menu_button:hover {
     opacity: 1;
 }