From ab460199ab229079a933591e93bb8b747819e96b Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Fri, 8 Sep 2023 16:36:00 +0300
Subject: [PATCH] #1117 Fix typing indicator and auto-scroll breaking mobile
 layout

---
 public/script.js              | 34 ++++++++++++++++++++++++----------
 public/scripts/group-chats.js | 10 +++-------
 public/style.css              |  3 ++-
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/public/script.js b/public/script.js
index c3a2bfb36..078319658 100644
--- a/public/script.js
+++ b/public/script.js
@@ -5410,17 +5410,18 @@ function select_rm_info(type, charId, previousCharId = null) {
                 $('#rm_print_characters_pagination').pagination('go', page);
 
                 waitUntilCondition(() => document.querySelector(selector) !== null).then(() => {
-                    const element = $(selector).parent().get(0);
+                    const parent = $('#rm_print_characters_block');
+                    const element = $(selector).parent();
 
-                    if (!element) {
+                    if (element.length === 0) {
                         console.log(`Could not find element for character ${charId}`);
                         return;
                     }
 
-                    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                    $(element).addClass('flash animated');
+                    parent.scrollTop(element.position().top + parent.scrollTop());
+                    element.addClass('flash animated');
                     setTimeout(function () {
-                        $(element).removeClass('flash animated');
+                        element.removeClass('flash animated');
                     }, 5000);
                 });
             } catch (e) {
@@ -5429,16 +5430,29 @@ function select_rm_info(type, charId, previousCharId = null) {
         }
 
         if (type === 'group_create') {
-            //for groups, ${charId} = data.id from group-chats.js createGroup()
-            const element = $(`#rm_characters_block [grid="${charId}"]`).get(0);
-            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            // Find the page at which the character is located
+            const charData = getEntitiesList({ doFilter: true });
+            const charIndex = charData.findIndex((x) => String(x?.item?.id) === String(charId));
+
+            if (charIndex === -1) {
+                console.log(`Could not find group ${charId} in the list`);
+                return;
+            }
+
+            const perPage = Number(localStorage.getItem('Characters_PerPage'));
+            const page = Math.floor(charIndex / perPage) + 1;
+            $('#rm_print_characters_pagination').pagination('go', page);
+            const parent = $('#rm_print_characters_block');
+            const selector = `#rm_print_characters_block [grid="${charId}"]`;
             try {
-                if (element !== undefined || element !== null) {
+                waitUntilCondition(() => document.querySelector(selector) !== null).then(() => {
+                    const element = $(selector);
+                    parent.scrollTop(element.position().top + parent.scrollTop());
                     $(element).addClass('flash animated');
                     setTimeout(function () {
                         $(element).removeClass('flash animated');
                     }, 5000);
-                } else { console.log('didnt find the element'); }
+                });
             } catch (e) {
                 console.error(e);
             }
diff --git a/public/scripts/group-chats.js b/public/scripts/group-chats.js
index ee75a3571..bb2439280 100644
--- a/public/scripts/group-chats.js
+++ b/public/scripts/group-chats.js
@@ -582,10 +582,7 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
                 typingIndicator
                     .find(".typing_indicator_name")
                     .text(characters[chId].name);
-                $("#chat").append(typingIndicator);
-                typingIndicator.show(200, function () {
-                    typingIndicator.get(0).scrollIntoView({ behavior: "smooth" });
-                });
+                typingIndicator.show();
             }
 
             // TODO: This is awful. Refactor this
@@ -681,9 +678,7 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
             }
         }
     } finally {
-        // hide and reapply the indicator to the bottom of the list
-        typingIndicator.hide(200);
-        $("#chat").append(typingIndicator);
+        typingIndicator.hide();
 
         is_group_generating = false;
         $("#send_textarea").attr("disabled", false);
@@ -1109,6 +1104,7 @@ function select_group_chats(groupId, skipAnimation) {
     $("#rm_group_restore_avatar").toggle(!!group && isValidImageUrl(group.avatar_url));
     $("#rm_group_filter").val("").trigger("input");
     $(`input[name="rm_group_activation_strategy"][value="${replyStrategy}"]`).prop('checked', true);
+    $("#rm_group_chat_name").val(groupName);
 
     if (!skipAnimation) {
         selectRightMenuWithAnimation('rm_group_chats_block');
diff --git a/public/style.css b/public/style.css
index d9f73a354..ef21e17c7 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2768,6 +2768,7 @@ body .ui-widget-content li:hover {
     margin: 10px;
     opacity: 0.85;
     text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
+    order: 9999;
 }
 
 .typing_indicator:after {
@@ -3608,4 +3609,4 @@ a {
         height: 100vh;
         z-index: 9999;
     }
-}
\ No newline at end of file
+}