click-zoomable avatars in chat

public/index.html

@@ -2076,6 +2076,10 @@
         <div class="export_format list-group-item" data-format="json">JSON</div>
         <div class="export_format list-group-item" data-format="webp">WEBP</div>
     </div>
+
+    <div id="avatar_zoom_popup">
+        <img id="zoomed_avatar" src="">
+    </div>
 </body>
 
 </html>

public/script.js

@@ -221,6 +221,7 @@ let optionsPopper = Popper.createPopper(document.getElementById('send_form'), do
 let exportPopper = Popper.createPopper(document.getElementById('export_button'), document.getElementById('export_format_popup'), {
     placement: 'left'
 });
+
 let dialogueResolve = null;
 let chat_metadata = {};
 let streamingProcessor = null;
@@ -5400,6 +5401,38 @@ $(document).ready(function () {
         $(this).closest('.inline-drawer').find('.inline-drawer-content').slideToggle();
     });
 
+    $(document).on('click', '.mes .avatar', function () {
+        let avPopperOrigin = $(this);
+        const avatarPopup = {
+            name: 'offset',
+            options: {
+                offset: [0, 8],
+            },
+        };
+
+        let avatarPopper = Popper.createPopper(document.getElementById('top-settings-holder'), document.getElementById('avatar_zoom_popup'), {
+            modifiers: [avatarPopup],
+        });
+        let thumbURL = $(this).children('img').attr('src');
+        let charsPath = '/characters/'
+        let targetAvatarImg = thumbURL.substring(thumbURL.lastIndexOf("=") + 1);
+        let avatarSrc = charsPath + targetAvatarImg;
+
+        if ($(this).parent().attr('is_user') == 'true') { //handle user avatars
+            $("#zoomed_avatar").attr('src', thumbURL);
+        } else if ($(this).parent().attr('is_system') == 'true') { //handle system avatars
+            $("#zoomed_avatar").attr('src', thumbURL);
+        } else if ($(this).parent().attr('is_user') == 'false') { //handle char avatars
+            $("#zoomed_avatar").attr('src', avatarSrc);
+        }
+
+        $('#avatar_zoom_popup').toggle();
+        avatarPopper.update();
+
+
+
+    });
+
     $(document).on('click', '#OpenAllWIEntries', function () {
         $("#world_popup_entries_list").children().find('.inline-drawer-header').click()
     });

public/style.css

@@ -3673,6 +3673,26 @@ body.noShadows * {
     display: none;
 }
 
+#avatar_zoom_popup {
+    /*     height: 600px;
+    width: 400px; */
+    max-height: 60svh;
+    max-width: 40svh;
+    margin: 0 auto;
+    display: block;
+    position: absolute;
+    top: 60px;
+    z-index: 999;
+    display: none;
+}
+
+#zoomed_avatar {
+    border: 1px solid var(--white30a);
+    border-radius: 20px;
+    max-height: 60svh;
+    max-width: 40svh;
+}
+
 /* ---------- @media queries must always go at the bottom ------------*/
 
 /*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
@@ -3830,6 +3850,8 @@ body.noShadows * {
     }
 
 
+
+
     /*     #send_textarea {
                  font-size: calc(var(--mainFontSize));
         line-height: calc(var(--mainFontSize));