Add custom avatars for groups

public/scripts/group-chats.js

@@ -3,6 +3,8 @@ import {
     onlyUnique,
     debounce,
     delay,
+    isDataURL,
+    createThumbnail,
 } from './utils.js';
 import { RA_CountCharTokens, humanizedDateTime } from "./RossAscends-mods.js";
 import { sortCharactersList, sortGroupMembers } from './power-user.js';
@@ -57,6 +59,7 @@ import {
     event_types,
     getCurrentChatId,
     setScenarioOverride,
+    getCropPopup,
 } from "../script.js";
 import { appendTagToList, createTagMapFromList, getTagsList, applyTagsOnCharacterSelect, tag_map } from './tags.js';
 
@@ -357,6 +360,14 @@ function updateGroupAvatar(group) {
 }
 
 function getGroupAvatar(group) {
+    if (!group) {
+        return $(`<div class="avatar"><img src="${default_avatar}"></div>`);
+    }
+
+    if (isDataURL(group.avatar_url)) {
+        return $(`<div class="avatar"><img src="${group.avatar_url}"></div>`);
+    }
+
     const memberAvatars = [];
     if (group && Array.isArray(group.members) && group.members.length) {
         for (const member of group.members) {
@@ -925,6 +936,8 @@ function select_group_chats(groupId, skipAnimation) {
     const group = groupId && groups.find((x) => x.id == groupId);
     const groupName = group?.name ?? "";
     setMenuType(!!group ? 'group_edit' : 'group_create');
+    $("#group_avatar_preview").empty().append(getGroupAvatar(group));
+    $("#rm_group_restore_avatar").toggle(!!group && isDataURL(group.avatar_url));
     $("#rm_group_chat_name").val(groupName);
     $("#rm_group_chat_name").off();
     $("#rm_group_chat_name").on("input", async function () {
@@ -1049,6 +1062,67 @@ function select_group_chats(groupId, skipAnimation) {
         $("#rm_group_automode_label").hide();
     }
 
+    $("#group_avatar_button").off('input').on("input", uploadGroupAvatar);
+    $("#rm_group_restore_avatar").off('click').on("click", restoreGroupAvatar);
+
+
+    async function uploadGroupAvatar(event) {
+        const file = event.target.files[0];
+
+        if (!file) {
+            return;
+        }
+
+        const e = await new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = resolve;
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+        });
+
+        $('#dialogue_popup').addClass('large_dialogue_popup wide_dialogue_popup');
+
+        const croppedImage = await callPopup(getCropPopup(e.target.result), 'avatarToCrop');
+
+        if (!croppedImage) {
+            return;
+        }
+
+        const thumbnail = await createThumbnail(croppedImage, 96, 144);
+
+        if (!groupId) {
+            $('#group_avatar_preview img').attr('src', thumbnail);
+            $('#rm_group_restore_avatar').show();
+            return;
+        }
+
+        let _thisGroup = groups.find((x) => x.id == groupId);
+        _thisGroup.avatar_url = thumbnail;
+        $("#group_avatar_preview").empty().append(getGroupAvatar(_thisGroup));
+        $("#rm_group_restore_avatar").show();
+        await editGroup(groupId, true, true);
+    }
+
+    async function restoreGroupAvatar() {
+        const confirm = await callPopup('<h3>Are you sure you want to restore the group avatar?</h3> Your custom image will be deleted, and a collage will be used instead.', 'confirm');
+
+        if (!confirm) {
+            return;
+        }
+
+        if (!groupId) {
+            $("#group_avatar_preview img").attr("src", default_avatar);
+            $("#rm_group_restore_avatar").hide();
+            return;
+        }
+
+        let _thisGroup = groups.find((x) => x.id == groupId);
+        _thisGroup.avatar_url = '';
+        $("#group_avatar_preview").empty().append(getGroupAvatar(_thisGroup));
+        $("#rm_group_restore_avatar").hide();
+        await editGroup(groupId, true, true);
+    }
+
     $(document).off("click", ".group_member .right_menu_button");
     $(document).on("click", ".group_member .right_menu_button", async function (event) {
         event.stopPropagation();
@@ -1174,8 +1248,7 @@ async function createGroup() {
         name = `Group: ${memberNames}`;
     }
 
-    // placeholder
-    const avatar_url = 'img/five.png';
+    const avatar_url = $('#group_avatar_preview img').attr('src');
 
     const chatName = humanizedDateTime();
     const chats = [chatName];
@@ -1186,7 +1259,7 @@ async function createGroup() {
         body: JSON.stringify({
             name: name,
             members: members,
-            avatar_url: avatar_url,
+            avatar_url: isDataURL(avatar_url) ? avatar_url : default_avatar,
             allow_self_responses: allow_self_responses,
             activation_strategy: activation_strategy,
             disabled_members: [],