From 86d62a88de13f28b13de07ffa737d969c22190e7 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Mon, 1 May 2023 18:04:41 +0900
Subject: [PATCH] click-zoomable avatars in chat

---
 public/index.html |  4 ++++
 public/script.js  | 33 +++++++++++++++++++++++++++++++++
 public/style.css  | 22 ++++++++++++++++++++++
 3 files changed, 59 insertions(+)

diff --git a/public/index.html b/public/index.html
index 5c2516511..f2efb2b5d 100644
--- a/public/index.html
+++ b/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>
\ No newline at end of file
diff --git a/public/script.js b/public/script.js
index 63037e80b..068870fee 100644
--- a/public/script.js
+++ b/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()
     });
diff --git a/public/style.css b/public/style.css
index 74e59076b..9abae9714 100644
--- a/public/style.css
+++ b/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));