From 51d2c9febacae1340942661df4f1169bd7541af8 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Wed, 25 Oct 2023 22:39:31 +0300
Subject: [PATCH] Add UI option for group gen strategy

---
 public/css/rm-groups.css      |  1 +
 public/index.html             | 56 ++++++++++++++++++++---------------
 public/scripts/group-chats.js | 32 ++++++++++++++++----
 server.js                     |  1 +
 4 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/public/css/rm-groups.css b/public/css/rm-groups.css
index b33c23103..4bc82ee6b 100644
--- a/public/css/rm-groups.css
+++ b/public/css/rm-groups.css
@@ -78,6 +78,7 @@
 
 #rm_group_members:empty {
     width: 100%;
+    padding: 0.5em 0;
 }
 
 #rm_group_members:empty::before {
diff --git a/public/index.html b/public/index.html
index 02bcc1f0f..773f6a9b7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3591,7 +3591,12 @@
 
                     <div class="inline-drawer wide100p flexFlowColumn">
                         <div id="groupControlsToggle" class="inline-drawer-toggle inline-drawer-header">
-                            <span data-i18n="Group Controls">Group Controls</span>
+                            <span>
+                                <span data-i18n="Group Controls">Group Controls</span>
+                                <a href="https://docs.sillytavern.app/usage/core-concepts/groupchats/" class="notes-link" target="_blank">
+                                    <span class="note-link-span">?</span>
+                                </a>
+                            </span>
                             <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                         </div>
                         <div class="inline-drawer-content">
@@ -3607,7 +3612,7 @@
                                     </div>
                                     <div id="groupTagList" class="tags paddingTopBot5"></div>
                                 </div>
-                                <div id="rm_group_top_bar" class="flex-container alignitemscenter spaceBetween width100p">
+                                <div id="rm_group_top_bar" class="flex-container alignitemscenter spaceBetween width100p fontsize80p">
                                     <div>
                                         <label class="add_avatar avatar flex-container justifyCenter" for="group_avatar_button" title="Click to select a new avatar for this group" data-i18n="[title]Click to select a new avatar for this group">
                                             <div id="group_avatar_preview">
@@ -3618,32 +3623,24 @@
                                             <input hidden type="file" id="group_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
                                         </label>
                                     </div>
-                                    <div name="GroupStragegyAndOrder" id="rm_group_buttons" class="fontsize80p flex-container paddingLeftRight5 flex2">
-                                        <div class="">
+                                    <div name="GroupStragegyAndOrder" id="rm_group_buttons" class="flex-container paddingLeftRight5 flex2">
+                                        <div class="flex1 flexGap5">
                                             <div class="flex-container flexnowrap width100p whitespacenowrap">
                                                 <span data-i18n="Group reply strategy">Group reply strategy</span>
-                                                <a href="https://docs.sillytavern.app/usage/core-concepts/groupchats/" class="notes-link" target="_blank">
-                                                    <span class="note-link-span">?</span>
-                                                </a>
                                             </div>
-                                            <label class="checkbox_label flexnowrap whitespacenowrap">
-                                                <input type="radio" name="rm_group_activation_strategy" value="0" />
-                                                <span data-i18n="Natural order">Natural order</span>
-                                            </label>
-                                            <label class="checkbox_label flexnowrap whitespacenowrap">
-                                                <input type="radio" name="rm_group_activation_strategy" value="1" />
-                                                <span data-i18n="List order">List order</span>
-                                            </label>
+                                            <select id="rm_group_activation_strategy">
+                                                <option value="0" data-i18n="Natural order">Natural order</option>
+                                                <option value="1" data-i18n="List order">List order</option>
+                                            </select>
                                         </div>
-                                        <div class="">
-                                            <label class="checkbox_label whitespacenowrap">
-                                                <input id="rm_group_allow_self_responses" type="checkbox" />
-                                                <span data-i18n="Allow self responses">Allow self responses</span>
-                                            </label>
-                                            <label id="rm_group_automode_label" class="checkbox_label whitespacenowrap">
-                                                <input id="rm_group_automode" type="checkbox" />
-                                                <span data-i18n="Auto Mode">Auto Mode</span>
-                                            </label>
+                                        <div class="flex1 flexGap5">
+                                            <div class="flex-container flexnowrap width100p whitespacenowrap">
+                                                <span data-i18n="Group generation handling mode">Group generation handling mode</span>
+                                            </div>
+                                            <select id="rm_group_generation_mode">
+                                                <option value="0" data-i18n="Swap character cards">Swap character cards</option>
+                                                <option value="1" data-i18n="Join character cards">Join character cards</option>
+                                            </select>
                                         </div>
                                     </div>
                                     <div id="GroupFavDelOkBack" class="flex-container flexGap5 spaceEvenly flex1">
@@ -3654,6 +3651,17 @@
                                         <div id="rm_group_submit" class="heightFitContent margin0 menu_button fa-solid fa-check" title="Create" data-i18n="[title]Create"></div>
                                         <div id="rm_group_restore_avatar" class="heightFitContent margin0 menu_button fa-solid fa-images" title="Restore collage avatar" data-i18n="[title]Restore collage avatar"></div>
                                         <div id="rm_group_delete" class="heightFitContent margin0 menu_button fa-solid fa-trash-can" title="Delete" data-i18n="[title]Delete"></div>
+
+                                        <div class="flex1">
+                                            <label class="checkbox_label whitespacenowrap">
+                                                <input id="rm_group_allow_self_responses" type="checkbox" />
+                                                <span data-i18n="Allow self responses">Allow self responses</span>
+                                            </label>
+                                            <label id="rm_group_automode_label" class="checkbox_label whitespacenowrap">
+                                                <input id="rm_group_automode" type="checkbox" />
+                                                <span data-i18n="Auto Mode">Auto Mode</span>
+                                            </label>
+                                        </div>
                                     </div>
 
                                 </div>
diff --git a/public/scripts/group-chats.js b/public/scripts/group-chats.js
index 2d4f2bbbf..eb8d75a61 100644
--- a/public/scripts/group-chats.js
+++ b/public/scripts/group-chats.js
@@ -101,6 +101,11 @@ export const group_activation_strategy = {
     LIST: 1,
 };
 
+export const group_generation_mode = {
+    SWAP: 0,
+    APPEND: 1,
+}
+
 export const groupCandidatesFilter = new FilterHelper(debounce(printGroupCandidates, 100));
 const groupAutoModeInterval = setInterval(groupChatAutoModeWorker, 5000);
 const saveGroupDebounced = debounce(async (group, reload) => await _save(group, reload), 500);
@@ -922,6 +927,14 @@ async function onGroupActivationStrategyInput(e) {
     }
 }
 
+async function onGroupGenerationModeInput(e) {
+    if (openGroupId) {
+        let _thisGroup = groups.find((x) => x.id == openGroupId);
+        _thisGroup.generation_mode = Number(e.target.value);
+        await editGroup(openGroupId, false, false);
+    }
+}
+
 async function onGroupNameInput() {
     if (openGroupId) {
         let _thisGroup = groups.find((x) => x.id == openGroupId);
@@ -1085,12 +1098,16 @@ function select_group_chats(groupId, skipAnimation) {
     const group = openGroupId && groups.find((x) => x.id == openGroupId);
     const groupName = group?.name ?? "";
     const replyStrategy = Number(group?.activation_strategy ?? group_activation_strategy.NATURAL);
+    const generationMode = Number(group?.generation_mode ?? group_generation_mode.DEFAULT);
 
     setMenuType(!!group ? 'group_edit' : 'group_create');
     $("#group_avatar_preview").empty().append(getGroupAvatar(group));
     $("#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_activation_strategy").val(replyStrategy);
+    $(`#rm_group_activation_strategy option[value="${replyStrategy}"]`).prop('selected', true);
+    $("#rm_group_generation_mode").val(generationMode);
+    $(`#rm_group_generation_mode option[value="${generationMode}"]`).prop('selected', true);
     $("#rm_group_chat_name").val(groupName);
 
     if (!skipAnimation) {
@@ -1311,8 +1328,9 @@ function filterGroupMembers() {
 
 async function createGroup() {
     let name = $("#rm_group_chat_name").val();
-    let allow_self_responses = !!$("#rm_group_allow_self_responses").prop("checked");
-    let activation_strategy = $('input[name="rm_group_activation_strategy"]:checked').val() ?? group_activation_strategy.NATURAL;
+    let allowSelfResponses = !!$("#rm_group_allow_self_responses").prop("checked");
+    let activationStrategy = Number($('#rm_group_activation_strategy').find(':selected').val()) ?? group_activation_strategy.NATURAL;
+    let generationMode = Number($('#rm_group_generation_mode').find(':selected').val()) ?? group_generation_mode.SWAP;
     const members = newGroupMembers;
     const memberNames = characters.filter(x => members.includes(x.avatar)).map(x => x.name).join(", ");
 
@@ -1332,8 +1350,9 @@ async function createGroup() {
             name: name,
             members: members,
             avatar_url: isValidImageUrl(avatar_url) ? avatar_url : default_avatar,
-            allow_self_responses: allow_self_responses,
-            activation_strategy: activation_strategy,
+            allow_self_responses: allowSelfResponses,
+            activation_strategy: activationStrategy,
+            generation_mode: generationMode,
             disabled_members: [],
             chat_metadata: {},
             fav: fav_grp_checked,
@@ -1605,7 +1624,8 @@ jQuery(() => {
     $("#rm_group_delete").off().on("click", onDeleteGroupClick);
     $("#group_favorite_button").on('click', onFavoriteGroupClick);
     $("#rm_group_allow_self_responses").on("input", onGroupSelfResponsesClick);
-    $('input[name="rm_group_activation_strategy"]').on("input", onGroupActivationStrategyInput);
+    $("#rm_group_activation_strategy").on("change", onGroupActivationStrategyInput);
+    $("#rm_group_generation_mode").on("change", onGroupGenerationModeInput);
     $("#group_avatar_button").on("input", uploadGroupAvatar);
     $("#rm_group_restore_avatar").on("click", restoreGroupAvatar);
     $(document).on("click", ".group_member .right_menu_button", onGroupActionClick);
diff --git a/server.js b/server.js
index dec4ae0a6..94dcc9ace 100644
--- a/server.js
+++ b/server.js
@@ -2573,6 +2573,7 @@ app.post('/creategroup', jsonParser, (request, response) => {
         avatar_url: request.body.avatar_url,
         allow_self_responses: !!request.body.allow_self_responses,
         activation_strategy: request.body.activation_strategy ?? 0,
+        generation_mode: request.body.generation_mode ?? 0,
         disabled_members: request.body.disabled_members ?? [],
         chat_metadata: request.body.chat_metadata ?? {},
         fav: request.body.fav,