Backport `feat/chat-tree` and fix #4709 (#4712) * Performance improvements due to using chatElement instead of $('#chat'). * Reverts change `hideSwipeButtons()` change. https://github.com/SillyTavern/SillyTavern/pull/4576#discussion_r2394996102 * I’ve been working on a PR for issue #1731: [Swipes on every AI message, not just the last one](https://github.com/SillyTavern/SillyTavern/issues/1731). I’d appreciate feedback to avoid unnecessary effort. Currently, I have User and Assistant branches working. I have not touched `/api/chats/save` or '/api/chats/get', so branches do not persist. To keep `context.chat` unmodified (so extensions and the rest of the code remain unaffected), I’ve stored branches in `chatTree`: ```javascript chatTree = { branch_id: 1, branch: [ { mes: "Hi" }, { mes: "Hello", branch_id: 0, branch: [...] }, ] } ``` When a message is swiped, chatTree is updated via `saveChatToTree()`, then the next branch is loaded using get`ChatFromTree()`. Questions: According to Cohee: [This requires reorganizations in the file format for chats, not viable in the short term.](https://github.com/SillyTavern/SillyTavern/issues/1731#issuecomment-1937845036) I'm hesitant to proceed. May I store chatTree.json files alongside the existing .jsonl chats? Should I create a new /save endpoint, modify the existing one, or discontinue using .jsonl for saving. Known issues: Branches do not persist on refresh. Swiping multiple messages at once throws `Cannot read properties of undefined (reading 'mes') `. This will be fixed in the UI. Branches persist between chats/characters. This will be fixed when loading a chat. The Swipe arrows overlap with messages. No animation plays when swiping then editing a user message. * Fixed bug. Gemini: The calculation of mesId is fragile and contains a bug. The fallback chat[chat.length - 1] is a message object, and Number(object) will result in NaN. This will break the swipe functionality if the preceding expressions are falsy. Additionally, chat.indexOf(message) will almost always point to the last message in the chat, which is incorrect when swiping on an earlier message. A more robust approach is recommended to reliably get the message ID from the clicked element. const mesId = Number($(this).closest('.mes').attr('mesid')); * Fixes swipes on long chats. * chatTree is now persistent. Fixed bugs. * Fixed bugs. https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2390042262 The logic to rename the chat tree file (.json) is currently in an unreachable else block. The if condition !fs.existsSync(pathToOriginalFile) || fs.existsSync(pathToRenamedFile) will almost always evaluate to true after the preceding copyFileSync and unlinkSync operations, because pathToOriginalFile will no longer exist. This prevents the chat tree file from being renamed, which breaks the persistence of message branches when a chat is renamed. The scrollChatToMessage function is implemented incorrectly. Calling .scrollTop() without any arguments on a jQuery object retrieves the current vertical scroll position; it does not scroll the element into view. This function will not have the intended effect of scrolling the chat to the specified message. * Fixed bugs. https://github.com/SillyTavern/SillyTavern/pull/4573#pullrequestreview-3282889120 There's a typo in the property name being deleted. It should be branch to match the data structure you've defined, not branches. This error will prevent the pruning logic from working correctly, potentially leading to corrupted or bloated chatTree data. The modified treeData is not being saved here. Instead, the global chatTree is being sent in the request. This will cause any renames of group members within message branches to be lost upon saving. You should send treeData, which contains the modifications. This function may have performance issues on large chats due to multiple structuredClone calls within a loop. swipelessMessage is created from a deep clone, and then it's deep-cloned again for every swipe. While this ensures data integrity, it is inefficient. Consider refactoring to reduce the number of deep-cloning operations, for instance, by creating swipelessMessage once per message and deep-cloning it only when creating a new branch for a swipe. * Fix warning. https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2390183161 The logic for renaming the chat tree file seems to have a flaw. The condition !fs.existsSync(pathToOriginalTreeFile) || fs.existsSync(pathToRenamedTreeFile) will be true if the original tree file does not exist. In this case, a warning is logged. However, it's a valid scenario for a chat to not have a corresponding tree file, so no warning should be logged. The current logic could lead to confusing log messages. * Refactored chatTree into `public/scripts/chat-tree.js`. https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2390269514 * Displaying swipes on past messages and the entire chat tree functionality is now an opt-in toggle. https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2390273599 * Only allow one concurrent swipe. Fixed: Swiping multiple messages at once throws Cannot read properties of undefined (reading 'mes') . * Fixed bugs. Now `swipe_id >= swipes.length` is set to swipes.length. * Fixed bug. Swiping a user message did not re-show swipe buttons after the generation finished. * Moved `Show Swipes for All Messages` Toggle to `Chat/Message Handling`. https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2395008961 * `JSON.stringify doesn't add spaces by default` https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2395047031 * Fixed "Tree file left behind when renaming chats" https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2395546142 * Fixed "Guard chatTree recursion in group member rename" https://github.com/SillyTavern/SillyTavern/pull/4573#pullrequestreview-3290587129 * Re-implement: https://github.com/SillyTavern/SillyTavern/pull/4576#discussion_r2395506501 * Moved chat trees to a separate directory. https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2395045583 Enabled chat tree backups. * Removed structuredClone() for improved performance. * Fixed bugs. Characters are now correctly renamed in the chatTree. Directories are now recursively created. * Reverts `hideSwipeButtons` to original functionality when `show_swipes_for_all_messages` is false. https://github.com/SillyTavern/SillyTavern/pull/4576#discussion_r2395375718 * Added `refreshSwipeButtons`. Updated `showSwipeButtons` and `hideSwipeButtons`. Fixed bugs. * Fixed. https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2400143193 https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2400143202 * Added `clamp` to util.js. Refactored `swipe`. * Fixed bugs. https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2400685914 https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2400685911 * Fixed bugs. * Fixed swipe animations. * Fixed bug by setting ids with `Number`. * Delete swipes, and bugfixes. * Merged `refactor/swipe`. * Fixed bug created in `Delete swipes, and bugfixes.`. * Merged from origin/staging. * Merged changes from refactor/swipe. * Fixed bug and refactored `syncWithSwipeId`. * Merged from `origin/staging`. * Fixed merge. * Fixed overlapping message generations. * Warn user, and refresh chat. * Added metadata to chatTree file. * Fixed "a sacrifice for the sake of simplicity." https://github.com/SillyTavern/SillyTavern/pull/2752#issuecomment-2323512022 Gemini: https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2464165990 https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2464165991 * Improved swipeGenerate's animation. * Added `SWIPE_SOURCE` constant. * await `switchSwipesAllMessages`. * Added `swipeState`. * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4573#issuecomment-3449690308 * Done: https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2466884547 https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2466884547 https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2466894947 https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2466902075 https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2466911245 https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2466938169 * Removed `NEUTRAL_CHAT_TREE_KEY` * Moved backups * Fixed `/send` and fixed a bug in `sendMessageAs`. * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2466913570 * Fixes usage of `ENOENT`: https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2466929980 * Removed LLM attribution. * Updated link and warning. * Removed debugging comments. * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4573#discussion_r2466905341 * Replaced `isSwipingAllowed` with `swipeState`. * Backported many changes from feat/chat-tree. * Refactored `showSwipeButtons` and `hideSwipeButtons` into `refreshSwipeButtons` * Refactored `showSwipeButtons` and `hideSwipeButtons` into `refreshSwipeButtons` * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2472109888 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2472113323 * Merged from `refactor/backport-chat-tree`. * Proposed fix for https://github.com/SillyTavern/SillyTavern/issues/4709 Reverts commit: https://github.com/SillyTavern/SillyTavern/commit/1b3db273891c1ba8c781d2f691ad2e41937ca2aa On PR: https://github.com/SillyTavern/SillyTavern/pull/2940 * Proposed fix for https://github.com/SillyTavern/SillyTavern/issues/4709 Reverts commit: https://github.com/SillyTavern/SillyTavern/commit/1b3db273891c1ba8c781d2f691ad2e41937ca2aa On PR: https://github.com/SillyTavern/SillyTavern/pull/2940 * Fixed regenerate and continue while editing the last message. * Added swipesHidden. Messages can now be designated as non-swipeable with `message.extra.swipeable`. * Use `.hidden` and classes instead of `.css` to display swipe chevrons. * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3465749700 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2476136375 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2476140043 https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3465776056 https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3465794330 * Fixed bug. * Fixed broken JQuery animation. * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2479003956 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2479011525 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2479014001 * Fixed active arrow transition. * Fixed swipe shake direction. * Fixed truthy check. * Added temporary link to documentation PR. * Moved `switchSwipesAllMessages` * Fixed failed generations deleting the branch. Fixed `forceSwipeId`. Always call `saveChatConditional` if the `swipe_id` has changed. * ESLint. * Fixed bug. Better `syncSwipeToMes` error handling. * Backported changes from `feat/chat-tree` Added failed swipe animation. Fixed `newSwipeId`. * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712 * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#pullrequestreview-3406878337 * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2483143387 * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2483143387 * Added `showSwipes: false` to `showMoreMessages`. And a few more performance improvements. * Fixed animations. * Added `'.mes'` to `.children`. * Significantly improved `animateSwipeTransition` performance on large chats. * Improved `syncSwipeToMes` error handling. * Significantly improved `animateSwipeTransition` performance on large chats. * Improved `syncSwipeToMes` error handling. * Corrected Merge. * Corrected Merge. * Improved: `redisplayChat` https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2484177521 * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2484215469 * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2484217230 * Added a temporary implementation of `branchChat`. * Fixed bug when generating a swipe. * Fixed bug in `branchChat`. * Fixed Off by one error due to `chatElement.children()` selecting `show_more_messages`. https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3478331073 * Fixed Off by one error due to `chatElement.children()` selecting `show_more_messages`. https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3478331073 * Cleaned system messages array and moved `swipeable` * Removed CSS nesting. * Fixed merge. * Improved `syncSwipeToMes` error handling. * Matched `swipes-counter` fade to chevrons. https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3478192184 * Wrapped `transition-behavior: allow-discrete;` in `@supports`. * Fixed types. * Improved swipeability feedback and functions. * Improved `refreshSwipeButtons` performance again. * Swapped `.attr` to `.prop`. * Fixed: `@supports (transition-behavior: allow-discrete)` * Fixed and clarified typo. * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495919425 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495923036 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495927019 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495930080 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495943870 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495950927 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495954387 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495974324 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495974683 * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495957181 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495960920 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495968137 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495968922 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495959430 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495924599 * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495918468 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495931979 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495933092 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2495939511 * Improved `refreshSwipeButtons` performance by skipping 'swipes-counter' updates by default. * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2496382916 https://github.com/SillyTavern/SillyTavern/pull/4712#discussion_r2496379401 * Removed chevron fade-in on Cohee's request: https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3493829978 * Set most system messages to `swipeable: false`. * Implemented `OVERSWIPE_BEHAVIOR`. * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3499706714 * Fix formatting, make comments IDE friendly * IDE friendly enum comments * Move animation frames to a dedicated file * Do not compare with -1 * overswipeBehavior => getOverswipeBehavior * Formatting fix * Don't let regenerate on is_system * Fixed canceled generations in pristine chats. https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3499819670 * Fixed `AUTO_SWIPE` when `animation_duration = 0`. * Fixed mistake in `redisplayChat`. * Holding the swipe button speeds up `swipeDuration`. * Fixed 'animationend' never ending. Altered resetTime. * Swapped from `saveChatConditional` to `saveChatDebounced` in `swipe`. * Skip the animation if it's faster than 50ms instead of 10ms. * Typo. * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#pullrequestreview-3457198109 * Adjust duration reset cooldown * Add quotes to selector * Specify type for message parameter in swipe function * Add type for swipe UI event * Disabled fade-in during printMessages. https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3539315919 * Typo. * Added quotes to selector . * Reduce reset time 500 -> 350 * Loops do not cause a generation so their chevrons should not have increased opacity. https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3543692019 * Revert reset time * Renamed `heldSwipes` to `recentSwipes`. * Autofix the swipes array during `updateSwipeCounter`. * User messages should not have swipes. * Chevrons should always be shown on pristine greetings: https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3557893373 * Improve formatting * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3559617088 * Show `pristineGreetingSwipeNotice` once. * `clearMessageData` when swipe-regenerating a message. * accountStorage is already imported in the module * Removed `await`. * Removed pristine greeting notice. https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3560758598 * Removed redundant functions in `StreamingProcessor` and fixed streamed replies missing counters. * Moved `markUIGenStopped` after `eventSource.emit`. Swapped to `saveChatDebounced` to fix: https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3567014810. * Save a structuredClone of `chat` to prevent an invalid chat from being saved. * Only `structuredClone` `chat` on `saveChatDebounced`. * Revert "Only `structuredClone` `chat` on `saveChatDebounced`." This reverts commit 49498b7aa1410107b294555fb945d977e60bfebf. * Revert "Save a structuredClone of `chat` to prevent an invalid chat from being saved." This reverts commit 5f137ed1380107fde0765b951dc634081bdbf2ff. * Prevent `saveChatDebounced` from saving while the swipe is in progress. See: https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3567077312 * Fixed animation never ending: https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3567106213 * `forceMesId` and `forceSwipeId` are not objects. * Fixed Reduced Motion causing a warning when swiping back. * Only hide `.mes_buttons` when generating. * Fix eslint * Reset duration on switching direction --------- Co-authored-by: user <user@exmaple.com> Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

fc85b205ac3b65eac3f1ed0f70d6b37f057d5f95

DeclineThyself <235079501+DeclineThyself@users.noreply.github.com>

Signed

Parents: 5993084ee6ebd887625fa4a8404d21e56ab69f32

public/css/animations.css+20 -0 Viewed

         overflow-y: hidden;
+    }
+}
+@keyframes slide {
+% {
+        transform: translateX(var(--slide-mes-x-start, 0px));
+    }
+% {
+        transform: translateX(var(--slide-mes-x-end, 0px));
+    }
+}
+@-webkit-keyframes slide {
+% {
+        transform: translateX(var(--slide-mes-x-start, 0px));
+    }
+% {
+        transform: translateX(var(--slide-mes-x-end, 0px));
+    }
+}

public/global.d.ts+6 -0 Viewed

 import { textgenerationwebui_settings } from './scripts/textgen-settings';
 import { FileAttachment } from './scripts/chats';
 import { ReasoningMessageExtra } from './scripts/reasoning';
+import { OVERSWIPE_BEHAVIOR } from './scripts/constants';
 declare global {
     // Custom types

         title?: string;
         isSmallSys?: boolean;
         token_count?: number;
+        /** When false, the message cannot be swiped. */
+        swipeable?: boolean;
+        overswipe_behavior?: OVERSWIPE_BEHAVIOR;
         files?: FileAttachment[];
         inline_image?: boolean;
         media_display?: string;

@@ -202,4 +206,6 @@ declare global {
202	rgba: string;	206	rgba: string;
203	}	207	}
204	};	208	};
		209
		210	type SwipeEvent = JQuery.TriggeredEvent<any, any, HTMLElement, HTMLElement>;
205	}	211	}

public/index.html+2 -2 Viewed

                     <div class="mes_timer"></div>
                     <div class="tokenCounterDisplay"></div>
                 </div>
-                <div class="swipe_left fa-solid fa-chevron-left" style="display: none;"></div>
+                <div class="swipe_left fa-solid fa-chevron-left"></div>
                 <div class="mes_block">
                     <div class="ch_name flex-container justifySpaceBetween">
                         <div class="flex-container flex1 alignitemscenter">

                     <div class="mes_bias"></div>
                 </div>
                 <div class="flex-container swipeRightBlock flexFlowColumn flexNoGap">
-                    <div class="swipe_right fa-solid fa-chevron-right" style="display: none;"></div>
+                    <div class="swipe_right fa-solid fa-chevron-right"></div>
                     <div class="swipes-counter"></div>
                 </div>
             </div>

public/script.js+563 -230 Viewed

     canUseNegativeLookbehind,
     trimSpaces,
     clamp,
+    shakeElement,
+    createTimeout,
 } from './scripts/utils.js';
-import { debounce_timeout, GENERATION_TYPE_TRIGGERS, IGNORE_SYMBOL, inject_ids, MEDIA_DISPLAY, MEDIA_SOURCE, MEDIA_TYPE, SCROLL_BEHAVIOR, SWIPE_DIRECTION } from './scripts/constants.js';
+import { debounce_timeout, GENERATION_TYPE_TRIGGERS, IGNORE_SYMBOL, inject_ids, MEDIA_DISPLAY, MEDIA_SOURCE, MEDIA_TYPE, OVERSWIPE_BEHAVIOR, SCROLL_BEHAVIOR, SWIPE_DIRECTION, SWIPE_SOURCE, SWIPE_STATE } from './scripts/constants.js';
 import { cancelDebouncedMetadataSave, doDailyExtensionUpdatesCheck, extension_settings, initExtensions, loadExtensionSettings, runGenerationInterceptors } from './scripts/extensions.js';
 import { COMMENT_NAME_DEFAULT, CONNECT_API_MAP, executeSlashCommandsOnChatInput, initDefaultSlashCommands, isExecutingCommandsFromChatInput, pauseScriptExecution, stopScriptExecution, UNIQUE_APIS } from './scripts/slash-commands.js';

 export let name2 = systemUserName;
 /** @type {ChatMessage[]} */
 export let chat = [];
-export let isSwipingAllowed = true; //false when a swipe is in progress, or swiping is blocked.
+/**
+ * @type {import('./scripts/constants.js').SWIPE_STATE}
+ */
+export let swipeState = SWIPE_STATE.NONE;
 let chatSaveTimeout;
 let importFlashTimeout;
 export let isChatSaving = false;

 export let online_status = 'no_connection';
 export let is_send_press = false; //Send generation
+export const isGenerating = () => (is_send_press || is_group_generating);
 let this_del_mes = -1;

 export let amount_gen = 80; //default max length of AI generated responses
 export let max_context = 2048;
-var swipes = true;
+/** User preference for swipeable messages */
+let swipes = true;
+/** Forcefully hide swipes. */
+export let swipesHidden = false;
+/** @type {{ now: number, direction: string }} */
+export let lastSwipeInfo = { now: performance.now(), direction: SWIPE_DIRECTION.RIGHT };
+export let recentSwipes = 0;
 export let extension_prompts = {};
 export let main_api;// = "kobold";

     while (messageId > 0 && count > 0) {
         let newMessageId = messageId - 1;
-        addOneMessage(chat[newMessageId], { insertBefore: messageId >= chat.length ? null : messageId, scroll: false, forceId: newMessageId });
+        addOneMessage(chat[newMessageId], { insertBefore: messageId >= chat.length ? null : messageId, scroll: false, forceId: newMessageId, showSwipes: false });
         count--;
         messageId--;
+    }
+    refreshSwipeButtons();
     if (messageId == 0) {
         $('#show_more_messages').remove();

     chatElement.find('.mes').removeClass('last_mes');
     chatElement.find('.mes').last().addClass('last_mes');
-    refreshSwipeButtons();
+    refreshSwipeButtons(false, false);
     applyStylePins();
     scrollChatToBottom({ waitForFrame: true });
     delay(debounce_timeout.short).then(() => scrollOnMediaLoad());

     if (is_delete_mode) {
         $('#dialogue_del_mes_cancel').trigger('click');
+    }
+    //This will also remove non '.mes' elements, e.g. '<div id="show_more_messages">Show more messages</div>'.
     chatElement.children().remove();
     if ($('.zoomed_avatar[forChar]').length) {
         console.debug('saw avatars to remove');

  * Send the message currently typed into the chat box.
  */
 export async function sendTextareaMessage() {
+    // don't proceed during swipeGenerate()
+    if (swipeState == SWIPE_STATE.EDITING) {
+        toastr.warning(t`Confirm the edit to start a generation.`, t`You cannot send a message during a swipe-edit.`);
+        return;
+    }
+    if (swipeState !== SWIPE_STATE.NONE) return; // don't proceed if mid-swipe.
     if (is_send_press) return;
     if (isExecutingCommandsFromChatInput) return;
+    hideSwipeButtons(); //Swipe buttons must be hidden now, otherwise concurrent generations are possible.
     let generateType = 'normal';
     // "Continue on send" is activated when the user hits "send" (or presses enter) on an empty chat box, and the last
     // message was sent from a character (not the user or the system).

@@ -1597,7 +1621,9 @@ export async function sendTextareaMessage() {
1597	await newAssistantChat({ temporary: false });	1621	await newAssistantChat({ temporary: false });
1598	}	1622	}
1599		1623
1600	return await Generate(generateType);	1624	let generation = await Generate(generateType);
		1625	showSwipeButtons();
		1626	return generation;
1601	}	1627	}
1602		1628
1603	/**	1629	/**

  * @param {boolean} [options.scroll=true] Whether to scroll to the new message
  * @param {number} [options.insertBefore=null] Message ID to insert the new message before
  * @param {number} [options.forceId=null] Force the message ID
- * @param {boolean} [options.showSwipes=true] Whether to show swipe buttons
+ * @param {boolean} [options.showSwipes=true] Whether to refresh the swipe buttons.
  * @returns {void}
  */
 export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll = true, insertBefore = null, forceId = null, showSwipes = true } = {}) {

     });
     if (type === 'swipe') {
-        const messageId = forceId ?? chat.length - 1;
+        const swipeMessage = chatElement.find(`[mesid="${newMessageId}"]`);
-        const swipeMessage = chatElement.find(`[mesid="${messageId}"]`);
         swipeMessage.attr('swipeid', params.swipeId);
         swipeMessage.find('.mes_text').html(messageText).attr('title', title);
         swipeMessage.find('.timestamp').text(timestamp).attr('title', `${params.extra.api} - ${params.extra.model}`);

             swipeMessage.find('.tokenCounterDisplay').empty();
+        }
     } else {
-        const messageId = forceId ?? chat.length - 1;
+        chatElement.find(`[mesid="${newMessageId}"] .mes_text`).append(messageText);
-        chatElement.find(`[mesid="${messageId}"] .mes_text`).append(messageText);
         appendMediaToMessage(mes, newMessage, scroll ? SCROLL_BEHAVIOR.ADJUST : SCROLL_BEHAVIOR.NONE);
-        showSwipes && hideSwipeButtons();
+    }
     addCopyToCodeBlocks(newMessage);
-    // Set the swipes counter for past messages, only visible if 'Show Swipes on All Message' is enabled
+    // Set the swipes counter for all non-user messages.
-    if (!params.isUser && newMessageId !== 0 && newMessageId !== chat.length - 1) {
+    if (!params.isUser) {
-        const swipesNum = chat[newMessageId].swipes?.length;
+        updateSwipeCounter(newMessageId);
-        const swipeId = chat[newMessageId].swipe_id + 1;
-        newMessage.find('.swipes-counter').text(formatSwipeCounter(swipeId, swipesNum));
+    }
-    if (showSwipes) {
+    //last_mes should always be updated.
+    chatElement.find('.mes').removeClass('last_mes');
     chatElement.find('.mes').last().addClass('last_mes');
-        chatElement.find('.mes').eq(-2).removeClass('last_mes');
+    if (showSwipes) {
         refreshSwipeButtons();
+    }

@@ -3275,7 +3297,7 @@ class StreamingProcessor {
3275	}	3297	}
3276		3298
3277	markUIGenStopped() {	3299	markUIGenStopped() {
3278	activateSendButtons();	3300	unblockGeneration();
3279	}	3301	}
3280		3302
3281	async onStartStreaming(text) {	3303	async onStartStreaming(text) {

+    }
     async onFinishStreaming(messageId, text) {
-        this.markUIGenStopped();
         await this.onProgressStreaming(messageId, text, true);
-        addCopyToCodeBlocks(chatElement.find(`.mes[mesid="${messageId}"]`));
+        const messageElement = chatElement.find(`.mes[mesid="${messageId}"]`);
+        const message = chat[messageId];
+        addCopyToCodeBlocks(messageElement);
         await this.reasoningHandler.finish(messageId);
         if (Array.isArray(this.swipes) && this.swipes.length > 0) {
-            const message = chat[messageId];
             const swipeInfoExtra = structuredClone(message.extra ?? {});
             delete swipeInfoExtra.token_count;
             delete swipeInfoExtra.reasoning;

             };
             const swipeInfoArray = Array(this.swipes.length).fill().map(() => structuredClone(swipeInfo));
             parseReasoningInSwipes(this.swipes, swipeInfoArray, message.extra?.reasoning_duration);
-            chat[messageId].swipes.push(...this.swipes);
+            message.swipes.push(...this.swipes);
-            chat[messageId].swipe_info.push(...swipeInfoArray);
+            message.swipe_info.push(...swipeInfoArray);
+        }
+        syncMesToSwipe(messageId);
+        saveLogprobsForActiveMessage(this.messageLogprobs.filter(Boolean), this.continueMessage);
         if (Array.isArray(this.images) && this.images.length > 0) {
-            await processImageAttachment(chat[messageId], { imageUrls: this.images });
+            await processImageAttachment(message, { imageUrls: this.images });
-            appendMediaToMessage(chat[messageId], $(this.messageDom));
+            appendMediaToMessage(message, $(this.messageDom));
+        }
+        this.markUIGenStopped();
         if (this.type !== 'impersonate') {
             await eventSource.emit(event_types.MESSAGE_RECEIVED, this.messageId, this.type);
             await eventSource.emit(event_types.CHARACTER_MESSAGE_RENDERED, this.messageId, this.type);

@@ -3440,15 +3467,13 @@ class StreamingProcessor {
3440	await eventSource.emit(event_types.IMPERSONATE_READY, text);	3467	await eventSource.emit(event_types.IMPERSONATE_READY, text);
3441	}	3468	}
3442		3469
3443	syncMesToSwipe(messageId);	3470	updateSwipeCounter(messageId, { message, messageElement });
3444	saveLogprobsForActiveMessage(this.messageLogprobs.filter(Boolean), this.continueMessage);
3445	await saveChatConditional();
3446	unblockGeneration();
3447		3471
3448	const isAborted = this.abortController.signal.aborted;	3472	const isAborted = this.abortController.signal.aborted;
3449	if (!isAborted && power_user.auto_swipe && generatedTextFiltered(text)) {	3473	if (!isAborted && power_user.auto_swipe && generatedTextFiltered(text)) {
3450	return swipe_right();	3474	return await swipe(null, SWIPE_DIRECTION.RIGHT, { source: SWIPE_SOURCE.AUTO_SWIPE, repeated: true, forceMesId: chat.length - 1 });
3451	}	3475	}
		3476	saveChatDebounced();
3452		3477
3453	playMessageSound();	3478	playMessageSound();
3454	}	3479	}

         this.isStopped = true;
         this.markUIGenStopped();
-        unblockGeneration();
         const noEmitTypes = ['swipe', 'impersonate', 'continue'];
         if (!noEmitTypes.includes(this.type)) {

         const isAborted = abortController && abortController.signal.aborted;
         if (!isAborted && power_user.auto_swipe && generatedTextFiltered(getMessage)) {
             is_send_press = false;
-            return swipe_right();
+            return await swipe(null, SWIPE_DIRECTION.RIGHT, { source: SWIPE_SOURCE.AUTO_SWIPE, repeated: true, forceMesId: chat.length - 1 });
+        }
         console.debug('/api/chats/save called by /Generate');

     is_send_press = false;
     activateSendButtons();
-    showSwipeButtons();
     setGenerationProgress(0);
     flushEphemeralStoppingStrings();
     flushWIInjections();

+}
 /**
+ * Creates a message's `swipes`, `swipe_id` and `swipe_info` if necessary.
+ * @param {ChatMessage} message
+ * @returns {boolean} true if the message was updated.
+ */
+export function ensureSwipes(message) {
+    let updated = false;
+    if (!message || typeof message !== 'object') {
+        console.trace(`[ensureSwipes] failed. '${message}' is not an object.`);
+        return updated;
+    }
+    //Small system messages and user messages should not have swipes.
+    if (message?.is_user || message?.extra?.isSmallSys) {
+        return updated;
+    }
+    if (!Array.isArray(message.swipes)) {
+        message.swipes = [message.mes ?? ''];
+        updated = true;
+    }
+    if (typeof message.swipe_id !== 'number') {
+        message.swipe_id = 0;
+        updated = true;
+    }
+    if (!Array.isArray(message.swipe_info)) {
+        message.swipe_info = message.swipes.map(_ => ({
+            send_date: message.send_date,
+            gen_started: message.gen_started,
+            gen_finished: message.gen_finished,
+            extra: structuredClone(message.extra) ?? {},
+        }));
+        updated = true;
+    }
+    return updated;
+}
+/**
  * Syncs the current message and all its data into the swipe data at the given message ID (or the last message if no ID is given).
+ *
  * If the swipe data is invalid in some way, this function will exit out without doing anything.

 export function activateSendButtons() {
     is_send_press = false;
     hideStopButton();
+    showSwipeButtons();
     delete document.body.dataset.generating;
+}

  */
 export function deactivateSendButtons() {
     showStopButton();
+    hideSwipeButtons();
     document.body.dataset.generating = 'true';
+}

     const mesElement = div.closest('.mes');
     const mes = chat[mesElement.attr('mesid')];
+    // editing old messages
+    mes['extra'] ??= {};
     let regexPlacement;
-    if (mes.is_user) {
+    if (mes?.is_user) {
         regexPlacement = regex_placement.USER_INPUT;
     } else if (mes.extra?.type === 'narrator') {
         regexPlacement = regex_placement.SLASH_COMMAND;

+    }
     mes['mes'] = text;
     if (mes['swipe_id'] !== undefined) {
+        ensureSwipes(mes);
         mes['swipes'][mes['swipe_id']] = text;
+    }
-    // editing old messages
+    if (mes?.is_system || mes?.is_user || mes.extra?.type === system_message_types.NARRATOR) {
-    if (!mes.extra) {
-        mes.extra = {};
-    }
-    if (mes.is_system || mes.is_user || mes.extra.type === system_message_types.NARRATOR) {
         mes.extra.bias = bias ?? null;
     } else {
         mes.extra.bias = null;

     this_edit_mes_id = editMessageId;
     this_edit_mes_chname = editMessage.name || (editMessage.is_user ? name1 : name2);
-    const hideCounters = editMessageId < chat.length - 1;
+    refreshSwipeButtons();
-    hideSwipeButtons({ hideCounters });
     const chatScrollPosition = chatElement.scrollTop();
     const messageBlock = messageElement.find('.mes_block');

     if (this?.classList?.contains('mes_edit_cancel')) {
         thisMesDiv = $(this).closest('.mes');
     } else {
-        thisMesDiv = chatElement.children().filter(`[mesid="${messageId}"]`);
+        thisMesDiv = chatElement.children('.mes').filter(`[mesid="${messageId}"]`);
+    }
     const thisMesBlock = thisMesDiv.find('.mes_block');

+    }
     updateViewMessageIds();
+    refreshSwipeButtons();
     await saveChatConditional();
     return true;
+}
 async function messageEditDone(div) {
+    if (!(this_edit_mes_id >= 0)) {
+        console.trace('this_edit_mes_id cannot be blank when calling messageEditDone.');
+        return;
+    }
     let { mesBlock, text, mes, bias } = updateMessage(div);
     if (this_edit_mes_id == 0) {
         text = substituteParams(text);

 /**
  * Update the swipe counter for mesId.
+ * By default, the swipe counter's opacity will appear greyed out. The opacity is changed with CSS.
  * @param {Number} mesId
+ * @param {object} [options] Options
+ * @param {ChatMessage} [options.message=undefined] Swipe numbers from this message will be used instead of mesId.
+ * @param {JQuery<HTMLElement>} [options.messageElement=undefined] Target Element. Passing in the message's element will save a DOM query.
  */
-export async function updateSwipeCounter(mesId) {
+export async function updateSwipeCounter(mesId, { message = undefined, messageElement = undefined } = {}) {
-    const swipeCounterText = formatSwipeCounter((chat[mesId]?.['swipe_id'] + 1), chat[mesId]?.['swipes']?.length);
+    message ??= chat[mesId];
-    const currentMessage = chatElement.children().filter(`[mesid="${mesId}"]`);
+    messageElement ??= chatElement.children('.mes').filter(`[mesid="${mesId}"]`);
-    const swipeCounter = currentMessage.find('.swipes-counter');
-    swipeCounter.text(swipeCounterText).show();
+    //If the message does not have swipes, create them.
+    if (ensureSwipes(message)) {
+        syncMesToSwipe(mesId);
+    }
+    const swipeCounterText = formatSwipeCounter((message?.swipe_id + 1), message?.swipes?.length);
+    const swipeCounter = messageElement.find('.swipes-counter');
+    swipeCounter.text(swipeCounterText).prop('hidden', false);
+}
 /**
- * Swipe buttons are often toggled to update their position.
+ * Returns true if messages are generally swipeable.
- * This should be replaced with a more efficient function.
+ * @returns {boolean}
  */
-export function refreshSwipeButtons() {
+export function isSwipingAllowed() {
-    hideSwipeButtons();
+    return (
-    showSwipeButtons();
+        //Swipe cannot be called on an empty chat.
+        chat.length !== 0 &&
+        //The swipes setting must be enabled, and swipes can't be hidden.
+        swipes && !swipesHidden &&
+        //Cannot swipe while generating.
+        !isGenerating() &&
+        //If mid-swipe, the message cannot be swiped.
+        swipeState === SWIPE_STATE.NONE
+    );
+}
-export function showSwipeButtons(mesId = chat.length - 1) {
+/**
-    isSwipingAllowed = true;
+ * Returns true if the message is swipeable.
+ * This does not check if messages are generally swipeable. See isSwipingAllowed().
+ * This does not check if the swipes exist or are valid.
+ * @param {number} messageId The message Id to check.
+ * @param {ChatMessage} [message=undefined] If undefined, then the message checks will be skipped.
+ * @returns {boolean}
+ */
+export function isMessageSwipeable(messageId, message = undefined) {
+    message ??= chat[messageId];
-    if (chat.length === 0) {
+    //If the message does not have swipes, create them.
-        return;
+    if (ensureSwipes(message)) {
+        syncMesToSwipe(messageId);
+    }
     if (
-        chat[mesId].is_system ||
+        //Only messages below the currently edited message can be swiped, if it's not mid-swipe edit.
-        !swipes ||
+        ((messageId > (this_edit_mes_id ?? -1)) && (swipeState != SWIPE_STATE.EDITING)) &&
-        Number($('.mes:last').attr('mesid')) < 0 ||
-        chat[mesId].is_user ||
+        //If the message is the last message, and it exists.
-        (selected_group && is_group_generating)
+        (messageId == chat.length - 1) &&
-    ) {
+        (message &&
-        return;
+            //Small system messages cannot be swiped.
+            !(message?.extra?.isSmallSys) &&
+            //Some messages, like the welcome screen, are not swipeable.
+            !(message?.extra?.swipeable === false) &&
+            //User messages are not swipeable.
+            !message.is_user
+        )
+    )
+    //The message is swipeable.
+    { return true; }
+    //The message is not swipeable.
+    else { return false; }
+}
-    // swipe_id should be set if alternate greetings are added
+/**
-    if (chat.length == 1 && chat[0].swipe_id === undefined) {
+ * Returns the message's behavior when swiped past it's last branch.
+ * This does not check if the message can currently be swiped. See isMessageSwipeable().
+ * This does not check if messages are generally swipeable. See isSwipingAllowed().
+ * This does not check if the swipes exist or are valid.
+ * @param {number} messageId The message Id to check.
+ * @param {ChatMessage} [message=undefined] If defined, this will be used instead of chat[messageId].
+ * @returns {OVERSWIPE_BEHAVIOR}
+ */
+export function getOverswipeBehavior(messageId, message = undefined) {
+    message ??= chat[messageId];
+    const isPristine = !chat_metadata?.tainted;
+    const isGreeting = messageId === 0;
+    //Do not override explicitly set overswipe_behavior.
+    if (typeof message?.extra?.overswipe_behavior == 'string') return message.extra.overswipe_behavior;
+    //Some messages, like the welcome screen, are not swipeable.
+    else if (message?.extra?.swipeable === false) return OVERSWIPE_BEHAVIOR.NONE;
+    //Small System messages can't be swiped.
+    else if (message?.extra?.isSmallSys) return OVERSWIPE_BEHAVIOR.NONE;
+    //The first message in a priistine chat will loop. It's chevrons will always be visible https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3557893373
+    else if (isGreeting && isPristine) return OVERSWIPE_BEHAVIOR.PRISTINE_GREETING;
+    //Non-user and non-prompt hidden messages will regenerate.
+    else if (!message?.is_user && !message?.is_system) return OVERSWIPE_BEHAVIOR.REGENERATE;
+    //By default, all other messages will loop. Their swipe chevrons will only be shown if there is more than one swipe.
+    else { return OVERSWIPE_BEHAVIOR.LOOP; }
+}
+/**
+ * Refreshes all swipe buttons and updates their swipe counters.
+ * This has been optimized for bulk updates by minimizing DOM queries.
+ * @param {boolean} updateCounters When true, the swipe counters will also be updated. Typically redundant because addOneMessage updates the counters.
+ * @param {boolean} fade By default, the chevrons fade in and out.
+ * @returns
+ */
+export function refreshSwipeButtons(updateCounters = false, fade = true) {
+    //Never show swipe buttons on an empty chat.
+    if (chat?.length === 0) return false;
+    //If swipes are disabled or hidden, hide all swipe buttons.
+    if (!isSwipingAllowed()) {
+        $('body').addClass('hideAllSwipeButtons');
         return;
+        //Don't hide all swipe buttons.
+    } else {
+        //CSS will hide all messages.
+        $('body').removeClass('hideAllSwipeButtons');
+    }
+    //Non-messages can appear in chat. '.mes' is required.
+    const messageElements = chatElement.children('.mes[mesid]');
-    //had to add this to make the swipe counter work
+    const firstDisplayedMesId = Number(messageElements.first().attr('mesid'));
-    //(copied from the onclick functions for swipe buttons..
-    //don't know why the array isn't set for non-swipe messages in Generate or addOneMessage..)
-    if (chat[mesId]['swipe_id'] === undefined) {              // if there is no swipe-message in the last spot of the chat array
-        chat[mesId]['swipe_id'] = 0;                        // set it to id 0
-        chat[mesId]['swipes'] = [];                         // empty the array
-        chat[mesId]['swipes'][0] = chat[mesId]['mes'];  //assign swipe array with last message from chat
-        chat[mesId]['swipe_info'] = [];
-        chat[mesId]['swipe_info'][0] = {
-            'send_date': chat[mesId]['send_date'],
-            'gen_started': chat[mesId]['gen_started'],
-            'gen_finished': chat[mesId]['gen_finished'],
-            'extra': structuredClone(chat[mesId]['extra']),
-        };
-    }
-    const currentMessage = chatElement.children().filter(`[mesid="${mesId}"]`);
+    //Group each message.
-    const swipeId = chat[mesId].swipe_id;
+    messageElements.each((index, div) => {
-    const swipeCounterText = formatSwipeCounter((swipeId + 1), chat[mesId]['swipes'].length);
+        //This assumes the messages are in order and their Id's are accurate.
-    const swipeRight = currentMessage.find('.swipe_right');
+        const messageId = firstDisplayedMesId + index;
-    const swipeLeft = currentMessage.find('.swipe_left');
+        //Number($(div).attr('mesid')); Would not misscount due to a missing div, but is much slower.
-    const swipeCounter = currentMessage.find('.swipes-counter');
-    if (swipeId !== undefined && (chat[mesId].swipes.length > 1 || swipeId > 0)) {
+        const message = chat[messageId];
-        swipeLeft.css('display', 'flex');
-    }
+        //Chevrons should not fade-in during printMessages. //https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3539315919
-    //only show right when generate is off, or when next right swipe would not make a generate happen
+        div.classList.toggle('fade', fade);
-    if (is_send_press === false || chat[mesId].swipes.length >= swipeId) {
-        swipeRight.css('display', 'flex').css('opacity', '0.3');
+        if (isMessageSwipeable(messageId, message)) {
-        swipeCounter.css('opacity', '0.3');
+            //If a right swipe would trigger a generation or loop to the first swipe.
+            const isLastSwipe = (message?.swipes?.length ?? 1) - 1 <= (message?.swipe_id ?? 0);
+            const hasSwipes = (message?.swipes?.length > 1);
+            const overswipe = getOverswipeBehavior(messageId, message);
+            // Chevrons should always be shown on pristine greetings: https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3557893373
+            const pristineGreeting = overswipe == OVERSWIPE_BEHAVIOR.PRISTINE_GREETING;
+            //The swipe button will be shown if an overswipe would trigger REGENERATE or EDIT_GENERATE.
+            const isOverswipeable = isLastSwipe &&
+                overswipe == OVERSWIPE_BEHAVIOR.REGENERATE ||
+                overswipe == OVERSWIPE_BEHAVIOR.EDIT_GENERATE;
+            div.classList.toggle('last_swipe', isOverswipeable);
+            //If there's only one swipe, the left arrow should not be shown.
+            div.classList.toggle('swipes_visible', hasSwipes || pristineGreeting);
+            //updateSwipeCounter does not need to be awaited, It can run a bit later.
+            if (updateCounters) updateSwipeCounter(messageId, { message, messageElement: $(div) });
+        } else {
+            //Hide all messages that are not swipeable.
+            div.classList.remove('swipes_visible', 'last_swipe');
+        }
-    if ((chat[mesId].swipes.length - swipeId) === 1) {
+    });
-        //chevron was moved out of hardcode in HTML to class toggle dependent on last_mes or not
-        //necessary for 'swipe_right' div in past messages to have no chevron if 'show swipes for all messages' is turned on
-        swipeRight.css('opacity', '0.7');
-        swipeCounter.css('opacity', '0.7');
+}
+/**
-    //allows for writing individual swipe counters for past messages
+ * This function is misleadingly named. It allows generation then refreshes the swipe buttons and counters.
-    const lastSwipeCounter = $('.last_mes .swipes-counter');
+ */
-    lastSwipeCounter.text(swipeCounterText).show();
+export function showSwipeButtons() {
+    swipesHidden = false;
+    refreshSwipeButtons();
+}
 /**
+ * This function is misleadingly named. It blocks generation then refreshes the swipe buttons and counters.
  * @param {object} [options] Options
  * @param {boolean} [options.hideCounters=false] Also hide the swipes counter.
  */
 export function hideSwipeButtons({ hideCounters = false } = {}) {
-    isSwipingAllowed = false;
+    swipesHidden = true;
-    chatElement.find('.swipe_right').hide();
+    refreshSwipeButtons();
-    chatElement.find('.swipe_left').hide();
     if (hideCounters === true) {
-        chatElement.find('.last_mes .swipes-counter').hide();
+        chatElement.find('.last_mes .swipes-counter').prop('hidden', true);
+    }
+}

     // Select the next swipe, or the one before if it was the last one
     const newSwipeId = Math.min(swipeId, message.swipes.length - 1);
-    syncSwipeToMes(messageId, newSwipeId);
     chat_metadata['tainted'] = true;
+    messageId = Number(messageId);
+    swipeId = Number(swipeId);
     await eventSource.emit(event_types.MESSAGE_SWIPE_DELETED, { messageId, swipeId, newSwipeId });
+    let direction = (swipeId <= newSwipeId) ? SWIPE_DIRECTION.RIGHT : SWIPE_DIRECTION.LEFT;
+    //Animate swipe and swap dispayed message.
+    await swipe(null, direction, { source: SWIPE_SOURCE.DELETE, repeated: false, forceMesId: messageId, forceSwipeId: newSwipeId });
     await saveChatConditional();
-    await reloadCurrentChat();
     return newSwipeId;
+}

         return;
+    }
-    const message = chatElement.find(`.mes[mesid="${this_edit_mes_id}"]`);
+    const message = chatElement.children('.mes').filter(`.mes[mesid="${this_edit_mes_id}"]`);
     const downButton = message.find('.mes_edit_down');
     const upButton = message.find('.mes_edit_up');

+}
 /**
+ * Visually updates all chat messages including andd after index by removing them, then adding them.
+ * @param {ChatMessage[]} chat All messages in chat before index will remain unchanged.
+ * @param {Number} index The last unchanged messageId.
+ */
+export async function redisplayChat(chat, index) {
+    //Remove messages after index.
+    chatElement.children(`.mes[mesid="${index}"]`).nextAll('.mes').addBack().remove();
+    //Skip to index, then add extra messages.
+    for (let i = index; i <= chat.length - 1; i++) {
+        //addOneMessage will update last_mes.
+        addOneMessage(chat[i], { scroll: false, showSwipes: false, forceId: i });
+    }
+    refreshSwipeButtons();
+}
+/**
  * Formats a counter for a swipe view.
  * @param {number} current The current number of items.
  * @param {number} total The total number of items.

 /**
  * Handles the swipe event.
- * @param {JQuery.Event} _event Event.
+ * @param {SwipeEvent} event Event.
  * @param {'left'|'right'} direction The direction to swipe.
  * @param {object} params Additional parameters.
- * @param {string} [params.source] The source of the swipe event.
+ * @param {import('./scripts/constants.js').SWIPE_SOURCE} [params.source]  The source of the swipe event. null, 'keyboard', 'auto_swipe', 'back' or 'delete'.
  * @param {boolean} [params.repeated] Is the swipe event repeated.
- * @param {object} [params.message=chat[chat.length - 1]] The chat message to swipe.
+ * @param {ChatMessage} [params.message=chat[chat.length - 1]] The chat message to swipe.
+ * @param {number} [params.forceMesId] The message id to swipe.
+ * @param {number} [params.forceSwipeId] The target swipe_id. When out of range, it will be looped or clamped.
+ * @param {number} [params.forceDuration] Overwrites the default swipe duration.
  */
-export async function swipe(_event, direction, { source, repeated, message = chat[chat.length - 1] } = {}) {
+export async function swipe(event, direction, { source, repeated, message = chat[chat.length - 1], forceMesId, forceSwipeId, forceDuration } = {}) {
     if (chat.length === 0) {
         console.warn('Swipe was called on an empty chat.');
         return;
+    }
-    //Only allow one concurrent swipe.
-    if (!isSwipingAllowed) {
-        console.info('The swipe has been ignored because another is in progress.');
-        return;
-    }
-    isSwipingAllowed = false;
-    let generation;
     let messageIndex;
     //Only set messageIndex if message exists because -1 is truthy.
     if (message) {
         messageIndex = chat.indexOf(message);
-        if (messageIndex === -1) {
+        if (messageIndex === -1 && typeof (forceMesId) != 'number') {
             console.error(`The message must exist in chat. ${message};`);
             return;
+        }
+    }
-    const mesId = Number($(this).closest('.mes').attr('mesid') ?? messageIndex ?? chat.length - 1);
+    const mesId = Number(forceMesId ?? event?.currentTarget?.closest('.mes')?.getAttribute('mesid') ?? messageIndex ?? chat.length - 1);
+    if (source === SWIPE_SOURCE.DELETE || source === SWIPE_SOURCE.BACK || source === SWIPE_SOURCE.AUTO_SWIPE) {
+        console.info(`The ${direction} swipe source on message #${mesId} is ${source}, Most checks have been bypassed. `);
+    } else {
+        //Only show an error if swipes are not hidden and a message is generating.
+        if (isGenerating() && (swipes && !swipesHidden && (swipeState === SWIPE_STATE.NONE))) {
+            toastr.warning(t`Cannot swipe while generating. Stop the request and try again.`, t`Swipe aborted`);
+            return;
+        }
+        //Only allow one concurrent swipe.
+        if (!isSwipingAllowed()) {
+            console.info('The swipe has been ignored messages cannot currently be swiped.');
+            return;
+        }
+        if (!isMessageSwipeable(mesId, message)) {
+            console.info(`Message #${mesId} cannot be swiped. ${message}`);
+            return;
+        }
+    }
+    // Cancel pending save to prevent accidental swipe_id overwrites.
+    cancelDebouncedChatSave();
+    swipeState = SWIPE_STATE.SWIPING;
+    let generation;
-    const thisMesDiv = chatElement.children().filter(`.mes[mesid="${mesId}"]`);
+    const thisMesDiv = chatElement.children('.mes').filter(`[mesid="${mesId}"]`);
     const thisMesText = thisMesDiv.find('.mes_block .mes_text');
     const thisMesDivHeight = thisMesDiv[0]?.scrollHeight;
     const thisMesTextHeight = thisMesText[0]?.scrollHeight;

         return;
+    }
     const originalSwipeId = Number(chat[mesId]?.['swipe_id'] ?? 0);
-    let newSwipeId = Number(originalSwipeId);
+    let newSwipeId = Number(forceSwipeId ?? originalSwipeId);
-    const isPristine = !chat_metadata?.tainted;
+    /**
-    const swipeDuration = Math.round(animation_duration * 1.25);
+     * Calculates the next swipe duration with how many swipes have been repeated.
-    const swipeRange = direction === SWIPE_DIRECTION.RIGHT ? -700 : 700;
+     * @param {number} animation_duration
+     * @returns {number} The adjusted swipe duration.
+     */
+    function getSwipeDuration(animation_duration) {
+        const now = performance.now();
+        const resetTime = animation_duration * 2 + 300;
+        //Reset the counter if the last swipe was more than half a second ago.
+        if (now - lastSwipeInfo.now >= resetTime || direction !== lastSwipeInfo.direction) recentSwipes = 0;
+        recentSwipes++;
+        lastSwipeInfo = { now, direction };
+        //At 4 swipes, animation_duration will be halved.
+        const sigmoid = 1 / (1 + Math.exp(recentSwipes - 4));
+        return animation_duration * sigmoid;
+    }
-    async function endSwipe() {
+    const swipeDuration = forceDuration ?? getSwipeDuration(animation_duration);
+    //The offscreen messages may be visible if the user resizes the viewport during a swipe.
+    const thisMesDivWidth = thisMesDiv.width() + 30;
+    let swipeRange = (direction === SWIPE_DIRECTION.RIGHT) ? -thisMesDivWidth : thisMesDivWidth;
+    /**
+     * Waits for the generation to end, reverts the swipe if swipe_id has not changed.
+     * @param {boolean} revert Attept to revert the swipe without saving.
+     */
+    async function endSwipe(revert = false) {
         //Wait for the generation to end.
         try {
+            //`mes_buttons` need to be hidden until the animation completes.
+            if (generation) {
+                document.body.dataset.swiping = 'true';
                 await generation;
+            }
+        }
         catch (error) {
             console.warn(`Swipe failed, Swiping back. ${error}`);
+        }
-        //Allow for another swipe.
-        showSwipeButtons();
         //Clamp Id between swipes.
         let clampedId = clamp(chat[mesId]['swipe_id'], 0, Math.max(0, chat[mesId]['swipes'].length - 1));
-        //If the id is not within bounds, Swipe back.
-        if (chat[mesId]['swipe_id'] !== clampedId) {
-            chat[mesId]['swipe_id'] = clampedId;
-            syncSwipeToMes(mesId);
-            addOneMessage(chat[mesId], { type: 'swipe', forceId: mesId, scroll: true });
-        }
         await updateSwipeCounter(mesId);
         //Fallback.
         if (mesId != chat.length - 1) {
             await updateSwipeCounter(chat.length - 1);
+        }
+        // If swipe_id has not changed, give the user feedback.
+        if (clampedId == originalSwipeId && source != SWIPE_SOURCE.DELETE) {
+            try {
+                //Shake 700/140=5px
+                shakeElement(thisMesDiv, -swipeRange / 140, animation_duration, 'ease-in');
+                //Flash red.
+                const flashTime = Math.max(animation_duration * 2, 100);
+                await Promise.race([thisMesDiv.find('.swipes-counter').animate({ color: 'red' }, flashTime).animate({ color: '' }).promise(), createTimeout(flashTime * 4, `The shake animation did not end within ${flashTime * 4}ms`)].filter(Boolean));
+            } catch (error) {
+                console.warn(error);
+            }
+        }
+        //If the id is not within bounds, Swipe back.
+        if (chat[mesId]?.swipe_id !== clampedId || revert) {
+            // Prevent recursion.
+            if (source != SWIPE_SOURCE.BACK) {
+                source = SWIPE_SOURCE.BACK;
+                chat[mesId].swipe_id = clampedId;
+                //Update the chat.
+                await loadFromSwipeId(mesId, chat[mesId].swipe_id);
+                await redisplayChat(chat, mesId);
+            }
+            else {
+                await Popup.show.confirm(
+                    t`ERROR: <code>syncSwipeToMes</code> has failed to revert the failed ${direction} swipe on message #${mesId}.`,
+                    t`<p>After you click OK, the chat will be reloaded to prevent data corruption.</p>`,
+                    { okButton: 'OK', cancelButton: false },
+                );
+                console.trace(`Error! Recursion detected when reverting failed ${direction} swipe on message #${mesId}. Something has broken.`);
+                await reloadCurrentChat();
+            }
+            //Out of bounds swipes should not be saved.
+        } else if (source != SWIPE_SOURCE.BACK) {
+            //Save the chat if swipe_id has changed.
+            saveChatDebounced();
+        }
-    async function standardSwipe() {
+        //Allow for another swipe.
+        swipeState = SWIPE_STATE.NONE;
+        delete document.body.dataset.swiping;
+        showSwipeButtons();
+    }
+    async function standardSwipe(newSwipeId) {
         //If swipe_id has changed, or the source is being deleted.
-        if (newSwipeId !== originalSwipeId || source == 'delete') {
+        if (newSwipeId !== originalSwipeId || source == SWIPE_SOURCE.DELETE || source == SWIPE_SOURCE.BACK) {
             //Update the chat.
             await loadFromSwipeId(mesId, newSwipeId);
             //Transition to the new chat.

+    }
     /**
+     * Removes a message's extra and gen times.
+     * @param {ChatMessage} message
+     */
+    function clearMessageData(message) {
+        if (message.extra && typeof message.extra === 'object') {
+            delete message.extra.memory;
+            delete message.extra.display_text;
+            delete message.extra.media;
+            delete message.extra.inline_image;
+            delete message.extra.files;
+            delete message.extra.fileLength;
+            delete message.extra.generationType;
+            delete message.extra.negative;
+            delete message.extra.title;
+            delete message.extra.append_title;
+        }
+        delete message.gen_started;
+        delete message.gen_finished;
+    }
+    /**
      * Sets the message to the newSwipeId and loads it.
      * @param {number} mesId
      * @param {number} newSwipeId

         //Update the swipe_id.
         chat[mesId]['swipe_id'] = newSwipeId;
-        if (chat[mesId].extra && typeof chat[mesId].extra === 'object') {
+        clearMessageData(chat[mesId]);
-            delete chat[mesId].extra.memory;
-            delete chat[mesId].extra.display_text;
+        //Load from swipes.
-            delete chat[mesId].extra.media;
+        if (syncSwipeToMes(mesId, newSwipeId) == false) {
-            delete chat[mesId].extra.inline_image;
+            let errorMessage = t`When swiping ${direction} on message ${mesId}, syncSwipeToMes has returned false. Attempting to swipe back!`;
-            delete chat[mesId].extra.files;
+            toastr.error(errorMessage);
-            delete chat[mesId].extra.fileLength;
-            delete chat[mesId].extra.generationType;
+            chat[mesId].swipe_id = originalSwipeId;
-            delete chat[mesId].extra.negative;
+            await endSwipe(true);
-            delete chat[mesId].extra.title;
+        }
-            delete chat[mesId].extra.append_title;
+        return true;
-        }
+    }
-        delete chat[mesId].gen_started;
-        delete chat[mesId].gen_finished;
-        //load from swipes.
-        syncSwipeToMes(mesId, chat[mesId]['swipe_id']);
-    }
-    // Helper function to convert transition to promise
-    const transitionPromise = (element, properties) => {
-        return new Promise((resolve) => {
-            element.transition({
-                ...properties,
-                complete: resolve,
-            });
-        });
-    };
     /**
      * Animates a swipe for all messages >= mesId.
      * @param {number} mesId
-     * @param {number} x
+     * @param {object} params
-     * @param {number} duration
+     * @param {string} [params.xStart='opx']
-     */
+     * @param {string} [params.xEnd='0px']
-    async function animateSwipeTransition(mesId, x, duration) {
+     * @param {number} [params.duration=animation_duration]
-        //Selects the swiped message.
+     * @param {string} [params.classes=''] Additional CSS classes to target during the swipe.
-        const swipedMessagesDiv = chatElement.children().filter((index, div) => {
+     * @param {boolean} [params.freeze=true] When true, do not remove the class from the animation, leaving it stuck at xEnd.
-            const $div = $(div);
+     * @returns {Promise<boolean|Function>} endSlide unfreezes the messages from xEnd.
-            return mesId === Number($div.attr('mesid'));
+     */
-        });
+    async function animateSwipeTransition(mesId, { xStart = '0px', xEnd = '0px', duration = animation_duration, classes = '', freeze = false } = {}) {
-        const swipedElementsDiv = swipedMessagesDiv.children('.mes_block, .mesAvatarWrapper');
+        // If the animation_duration is zero, the 'animationend' promise will never resolve.
+        //Skip the animation if it's faster than 50ms.
+        if (duration <= 50) return;
+        //Select MAXIMUM_ANIMATED messages after mesId. Ideally, only visible messages would be animated.
+        const MAXIMUM_ANIMATED = 100;
+        const messages = chatElement.children('.mes');
+        const firstDisplayedMesId = Number(messages.first().attr('mesid'));
+        const swipedMessagesDiv = messages.filter((index, div) => {
+            // const messageId = Number($(div).attr('mesid')); //Slower.
+            //This assumes the messages are in order and their Id's are accurate.
+            const divMessageId = firstDisplayedMesId + index;
+            return (divMessageId < mesId + MAXIMUM_ANIMATED && divMessageId >= mesId);
+        });
+        if (swipedMessagesDiv.length > 0) {
+            let swipeClasses = '.mes_block, .mesAvatarWrapper';
+            swipeClasses += classes;
+            //Select only the target classes.
+            const swipedElementsDiv = swipedMessagesDiv.children(swipeClasses);
+            if (swipedElementsDiv.length > 0) {
+                //This is a global variable, only one swipe transition can occur concurrently.
+                document.documentElement.style.setProperty('--slide-mes-x-start', xStart);
+                document.documentElement.style.setProperty('--slide-mes-x-end', xEnd);
+                document.documentElement.style.setProperty('--slide-mes-x-duration', `${duration}ms`);
+                //The class must be removed to unfreze previous slides.
+                swipedElementsDiv.removeClass('slide');
+                //CSS starts the animation.
+                void swipedElementsDiv[0].offsetWidth;
+                swipedElementsDiv.addClass('slide');
+                const endSlide = () => {
+                    //Remove the style when done.
+                    swipedElementsDiv.removeClass('slide');
+                    document.documentElement.style.setProperty('--slide-mes-x-start', '');
+                    document.documentElement.style.setProperty('--slide-mes-x-end', '');
+                    document.documentElement.style.setProperty('--slide-mes-duration', '');
+                    return true;
+                };
+                //Wait for the animation's end. https://developer.mozilla.org/en-US/docs/Web/API/Animation/finished
+                const animation = swipedElementsDiv[0]?.getAnimations().filter((a) => a['animationName'] == 'slide')[0];
+                try {
+                    await Promise.race([animation?.finished, createTimeout(duration * 2, `The ${duration}ms swipe animation has not ended after ${duration * 2}ms. It has been skipped.`)].filter(Boolean));
+                } catch (error) {
+                    console.warn(error);
+                }
-        //Swipe.
+                //If not frozen, end the slide now.
-        await transitionPromise(swipedElementsDiv, {
+                return freeze ? endSlide : endSlide();
-            x: x,
+            }
-            duration: duration,
+        }
-            easing: animation_easing,
+        console.warn(`No animatable messages were found after message #${mesId}.`);
-            queue: false,
+        return false;
-        });
+    }
     function getMessageBottomHeight(thisMesDiv) {

     /**
      * Anime a swipe, optionally running a generation.
      * @param {boolean} run_generate
+     * @param {boolean} [skipSwipeOut=false]
      */
-    async function animateSwipe(run_generate = false) {
+    async function animateSwipe(run_generate = false, skipSwipeOut = false) {
+        if (!skipSwipeOut) {
             //Swipe out.
-        await animateSwipeTransition(mesId, swipeRange, swipeDuration);
+            await animateSwipeTransition(mesId, { xEnd: `${swipeRange}px`, duration: swipeDuration });
+        }
         if (run_generate) {
             await updateSwipeCounter(mesId);

             //Only scroll when swiping the last message.
             const scroll = (mesId == chat.length - 1);
-            addOneMessage(chat[mesId], { type: 'swipe', forceId: mesId, scroll: scroll });
+            //The swipe buttons will be refreshed in endSwipe(), refreshing them now will cause flickering.
+            addOneMessage(chat[mesId], { type: 'swipe', forceId: mesId, scroll: scroll, showSwipes: false });
             if (power_user.message_token_count_enabled) {
                 if (!chat[mesId].extra) {

         thisMesDiv.css('height', thisMesDivHeight);
         expandNewMessage(thisMesDiv);
-        //Jump to the opposite side.
-        await animateSwipeTransition(mesId, -swipeRange, 0);
         appendMediaToMessage(chat[mesId], thisMesDiv);
         await eventSource.emit(event_types.MESSAGE_SWIPED, (mesId));

         if (run_generate && !is_send_press) {
             is_send_press = true;
             generation = Generate('swipe');
-        } else if (Number(chat[mesId]['swipe_id']) !== chat[mesId]['swipes'].length) {
-            saveChatDebounced();
+        }
-        //Swipe in.
+        //Swipe in from the opposite side.
-        await animateSwipeTransition(mesId, 0, swipeDuration);
+        await animateSwipeTransition(mesId, { xStart: `${-swipeRange}px`, xEnd: `${0}px`, duration: swipeDuration });
+    }
     if (mesId === Number(this_edit_mes_id)) {

+    }
     //If the swipe is not being deleted.
-    if (source != 'delete') {
+    if (source != SWIPE_SOURCE.DELETE && source != SWIPE_SOURCE.BACK) {
         // Make sure ad-hoc changes to extras are saved before swiping away
         syncMesToSwipe(mesId);

+        }
         // If the user is holding down the key and we're at the last or first swipe, don't do anything.
         let isLastSwipe = (direction === SWIPE_DIRECTION.RIGHT) ? (chat[mesId].swipe_id === Math.max(0, chat[mesId]['swipes'].length - 1)) : chat[mesId].swipe_id === 0;
-        if (source === 'keyboard' && repeated && isLastSwipe) {
+        if (source === SWIPE_SOURCE.KEYBOARD && repeated && isLastSwipe) {
             await endSwipe();
             return;
+        }
-    } else if (source == 'delete') {
+    } else if (source == SWIPE_SOURCE.DELETE || source == SWIPE_SOURCE.BACK) {
-        //If the swipe is being deleted.
+        //If the swipe is being deleted or reverted.
-        await standardSwipe();
+        await standardSwipe(newSwipeId);
         return;
+    }
     //If swiping left.
     if (direction === SWIPE_DIRECTION.LEFT) {
-        newSwipeId--;
+        if (forceSwipeId == null) newSwipeId--;
         //Loop to last swipe if negative.
         if (newSwipeId < 0) {
             newSwipeId = Math.max(0, chat[mesId]['swipes'].length - 1);

             await endSwipe();
             return;
+        }
-        await standardSwipe();
+        await standardSwipe(newSwipeId);
         return;
+    }
     //If swiping right.
     else if (direction === SWIPE_DIRECTION.RIGHT) {
         // make new slot in array
-        newSwipeId++;
+        if (forceSwipeId == null) newSwipeId++;
         //Minimum of zero.
         if (newSwipeId < 0) {

             return;
+        }
-        //if swipe id of last message is the same as the length of the 'swipes' array and not the greeting.
+        //If overswiping.
-        if (newSwipeId >= chat[mesId]['swipes'].length && ((chat.length !== 1 || !isPristine))) {
+        if (newSwipeId >= chat[mesId]['swipes'].length) {
             newSwipeId = chat[mesId]['swipes'].length;
             //Update the swipe_id.
             chat[mesId]['swipe_id'] = newSwipeId;
-            //Cancel the generation if it's a user message or the first message in a pristine chat.
+            const overswipe = getOverswipeBehavior(mesId);
-            if (chat[mesId].is_user || (mesId === 0 && isPristine)) {
+            //Cancel the generation.
+            if (overswipe == OVERSWIPE_BEHAVIOR.NONE) {
                 //Cancel swipe.
                 chat[mesId]['swipe_id'] = originalSwipeId;
                 await endSwipe();
                 return;
-            } else {
+            }
-                //Generate.
+            //Regenerate the message
-                await loadFromSwipeId(mesId, newSwipeId);
+            else if (overswipe == OVERSWIPE_BEHAVIOR.REGENERATE) {
+                clearMessageData(chat[mesId]);
                 let run_generate = true;
+                //Generate.
                 await animateSwipe(run_generate);
                 await endSwipe();
                 return;
+            }
-        }
+            // Loop to the first swipe.
-        else {
+            else if (overswipe == OVERSWIPE_BEHAVIOR.LOOP || overswipe == OVERSWIPE_BEHAVIOR.PRISTINE_GREETING) {
-            // if swipe_right is called on the last alternate greeting in pristine chats, loop back around
-            if (chat.length === 1 && newSwipeId !== undefined && newSwipeId === chat[0]['swipes'].length && isPristine) {
                 newSwipeId = 0;
+            }
+        }
-        await standardSwipe();
+        await standardSwipe(newSwipeId);
         return;
+    }
+}

 /**
  * @deprecated Use `swipe` instead.
  * Handles the swipe to the left event.
- * @param {JQuery.Event} _event Event.
+ * @param {SwipeEvent} [event] Event.
  * @param {object} params Additional parameters.
- * @param {string} [params.source] The source of the swipe event.
+ * @param {import('./scripts/constants.js').SWIPE_SOURCE} [params.source]  The source of the swipe event. null, 'keyboard', 'auto_swipe', 'back' or 'delete'.
  * @param {boolean} [params.repeated] Is the swipe event repeated.
  * @param {object} [params.message] The chat message to swipe.
  */
-export async function swipe_left(_event, { source, repeated, message } = {}) {
+export async function swipe_left(event, { source, repeated, message } = {}) {
-    await swipe.call(this, _event, SWIPE_DIRECTION.LEFT, { source: source, repeated: repeated, message: message });
+    await swipe.call(this, event, SWIPE_DIRECTION.LEFT, { source: source, repeated: repeated, message: message });
+}
 /**
  * @deprecated Use `swipe` instead.
  * Handles the swipe to the right event.
- * @param {JQuery.Event} [_event] Event.
+ * @param {SwipeEvent} [event] Event.
  * @param {object} params Additional parameters.
- * @param {string} [params.source] The source of the swipe event.
+ * @param {import('./scripts/constants.js').SWIPE_SOURCE} [params.source] The source of the swipe event. null, 'keyboard', 'auto_swipe', 'back' or 'delete'.
  * @param {boolean} [params.repeated] Is the swipe event repeated.
  * @param {object} [params.message] The chat message to swipe.
  */
 //MARK: swipe_right
-export async function swipe_right(_event = null, { source, repeated, message } = {}) {
+export async function swipe_right(event = null, { source, repeated, message } = {}) {
-    await swipe.call(this, _event, SWIPE_DIRECTION.RIGHT, { source: source, repeated: repeated, message: message });
+    await swipe.call(this, event, SWIPE_DIRECTION.RIGHT, { source: source, repeated: repeated, message: message });
+}
 /**

+        }
         else if (id == 'option_regenerate') {
-            closeMessageEditor();
+            //Attempting to regenerate a user message will instead generate a new message.
+            if (chat.length && chat.length - 1 === this_edit_mes_id && chat[this_edit_mes_id]?.is_user == false) {
+                toastr.warning(t`Finish the edit before starting a generation.`, t`You cannot regenerate the message you are editing.`);
+                return;
+            }
             if (is_send_press == false) {
-                //hideSwipeButtons();
                 if (selected_group) {
                     regenerateGroup();
+                }

+        }
         else if (id == 'option_continue') {
-            if (this_edit_mes_id >= 0) return; // don't proceed if editing a message
+            if (swipeState == SWIPE_STATE.EDITING) {
+                toastr.warning(t`Confirm the edit to start a generation.`, t`You cannot send a message during a swipe-edit.`);
+                return;
+            }
+            if (chat.length && chat.length - 1 === this_edit_mes_id) {
+                toastr.warning(t`Finish the edit before starting a generation.`, t`You cannot continue the message you are editing.`);
+                return;
+            }
             if (is_send_press == false || fromSlashCommand) {
                 is_send_press = true;

public/scripts/RossAscends-mods.js+5 -5 Viewed

 import { chat_completion_sources, oai_settings } from './openai.js';
 import { getTokenCountAsync } from './tokenizers.js';
 import { textgen_types, textgenerationwebui_settings as textgen_settings, getTextGenServer } from './textgen-settings.js';
-import { debounce_timeout } from './constants.js';
+import { debounce_timeout, SWIPE_SOURCE } from './constants.js';
 import { Popup } from './popup.js';
 import { accountStorage } from './util/AccountStorage.js';

         if (event.key == 'ArrowLeft') {        //swipes left
             if (
-                isSwipingAllowed &&
+                isSwipingAllowed() &&
                 !isNanogallery2LightboxActive() &&  // Check if lightbox is NOT active
                 $('#send_textarea').val() === '' &&
                 $('#character_popup').css('display') === 'none' &&

                 !isInputElementInFocus() &&
                 !isModifiedKeyboardEvent(event)
             ) {
-                $('.swipe_left:last').trigger('click', { source: 'keyboard', repeated: event.repeat });
+                $('.swipe_left:last').trigger('click', { source: SWIPE_SOURCE.KEYBOARD, repeated: event.repeat });
                 return;
+            }
+        }
         if (event.key == 'ArrowRight') { //swipes right
             if (
-                isSwipingAllowed &&
+                isSwipingAllowed() &&
                 !isNanogallery2LightboxActive() &&  // Check if lightbox is NOT active
                 $('#send_textarea').val() === '' &&
                 $('#character_popup').css('display') === 'none' &&

@@ -1128,7 +1128,7 @@ export function initRossMods() {
1128	!isInputElementInFocus() &&	1128	!isInputElementInFocus() &&
1129	!isModifiedKeyboardEvent(event)	1129	!isModifiedKeyboardEvent(event)
1130	) {	1130	) {
1131	$('.swipe_right:last').trigger('click', { source: 'keyboard', repeated: event.repeat });	1131	$('.swipe_right:last').trigger('click', { source: SWIPE_SOURCE.KEYBOARD, repeated: event.repeat });
1132	return;	1132	return;
1133	}	1133	}
1134	}	1134	}

public/scripts/constants.js+37 -0 Viewed

 };
 /**
+ * @enum {string}
+ * @readonly
+ */
+export const OVERSWIPE_BEHAVIOR = {
+    /** The overswipe right chevron will not be displayed. */
+    NONE: 'none',
+    /** An overswipe will loop to the first swipe. */
+    LOOP: 'loop',
+    /** Pristine greetings will loop, and chevrons will always be shown: https://github.com/SillyTavern/SillyTavern/pull/4712#issuecomment-3557893373 */
+    PRISTINE_GREETING: 'pristine_greeting',
+    /** If chat tree is enabled, then an overswipe will allow the user to edit the message before starting a new generation. */
+    EDIT_GENERATE: 'edit_generate',
+    /** This is the default behavior on character messages. */
+    REGENERATE: 'regenerate',
+};
+/**
  * @type {{readonly LEFT: 'left', readonly RIGHT: 'right'}}
  */
 export const SWIPE_DIRECTION = {
     LEFT: 'left',
     RIGHT: 'right',
 };
+/**
+ * @type {{readonly DELETE: 'delete', readonly KEYBOARD: 'keyboard', readonly BACK: 'back', readonly AUTO_SWIPE: 'auto_swipe'}}
+ */
+export const SWIPE_SOURCE = {
+    DELETE: 'delete',
+    KEYBOARD: 'keyboard',
+    BACK: 'back',
+    AUTO_SWIPE: 'auto_swipe',
+};
+/**
+ * @enum {string}
+ * @readonly
+ */
+export const SWIPE_STATE = {
+    NONE: 'none',
+    SWIPING: 'swiping',
+    EDITING: 'editing',
+};

public/scripts/power-user.js+1 -1 Viewed

     while (getFirstDisplayedMessageId() > mesId && getFirstDisplayedMessageId() !== 0) {
         await showMoreMessages();
         await delay(1);
-        target = $('#chat').find(`.mes[mesid=${mesId}]`);
+        target = $('#chat').find(`.mes[mesid="${mesId}"]`);
         if (target.length) {
             break;

public/scripts/st-context.js+5 -1 Viewed

     hideSwipeButtons,
     deleteMessage,
     refreshSwipeButtons,
+    swipe,
     isSwipingAllowed,
+    swipeState,
     ensureMessageMediaIsArray,
     getMediaDisplay,
     getMediaIndex,

         swipe: {
             left: swipe_left,
             right: swipe_right,
+            to: swipe,
             show: showSwipeButtons,
             hide: hideSwipeButtons,
             refresh: refreshSwipeButtons,
-            isAllowed: () => isSwipingAllowed,
+            isAllowed: isSwipingAllowed,
+            state: () => swipeState,
         },
         variables: {
             local: {

public/scripts/system-messages.js+39 -62 Viewed

+import { lodash } from '../lib.js';
 import { addOneMessage, chat, displayVersion, setSendButtonState, system_avatar, systemUserName } from '../script.js';
 import { t } from './i18n.js';
 import { getMessageTimeStamp } from './RossAscends-mods.js';

 };
 export async function initSystemMessages() {
-    /** @type {Record<string, ChatMessage>} */
+    /** @type {ChatMessage} */
-    const result = {
+    const defaultMessage = {
-        help: {
         name: systemUserName,
         force_avatar: system_avatar,
         is_user: false,
         is_system: true,
+        extra: { swipeable: false },
+    };
+    /** @type {Record<string, ChatMessage>} */
+    const result = {
+        /** @type {ChatMessage} */
+        help: lodash.merge(structuredClone(defaultMessage), {
             mes: await renderTemplateAsync('help'),
-        },
+        }),
-        slash_commands: {
+        /** @type {ChatMessage} */
-            name: systemUserName,
+        slash_commands: lodash.merge(structuredClone(defaultMessage), {
-            force_avatar: system_avatar,
-            is_user: false,
-            is_system: true,
             mes: '',
-        },
+        }),
-        hotkeys: {
+        /** @type {ChatMessage} */
-            name: systemUserName,
+        hotkeys: lodash.merge(structuredClone(defaultMessage), {
-            force_avatar: system_avatar,
-            is_user: false,
-            is_system: true,
             mes: await renderTemplateAsync('hotkeys'),
-        },
+        }),
-        formatting: {
+        /** @type {ChatMessage} */
-            name: systemUserName,
+        formatting: lodash.merge(structuredClone(defaultMessage), {
-            force_avatar: system_avatar,
-            is_user: false,
-            is_system: true,
             mes: await renderTemplateAsync('formatting'),
-        },
+        }),
-        macros: {
+        /** @type {ChatMessage} */
-            name: systemUserName,
+        macros: lodash.merge(structuredClone(defaultMessage), {
-            force_avatar: system_avatar,
-            is_user: false,
-            is_system: true,
             mes: await renderTemplateAsync('macros'),
-        },
+        }),
-        welcome: {
+        /** @type {ChatMessage} */
-            name: systemUserName,
+        welcome: lodash.merge(structuredClone(defaultMessage), {
-            force_avatar: system_avatar,
-            is_user: false,
-            is_system: true,
             mes: await renderTemplateAsync('welcome', { displayVersion }),
             extra: {
                 uses_system_ui: true,
             },
-        },
+        }),
-        empty: {
+        /** @type {ChatMessage} */
-            name: systemUserName,
+        empty: lodash.merge(structuredClone(defaultMessage), {
-            force_avatar: system_avatar,
-            is_user: false,
-            is_system: true,
             mes: 'No one hears you. <b>Hint&#58;</b> add more members to the group!',
-        },
+        }),
-        generic: {
+        /** @type {ChatMessage} */
-            name: systemUserName,
+        generic: lodash.merge(structuredClone(defaultMessage), {
-            force_avatar: system_avatar,
-            is_user: false,
-            is_system: true,
             mes: 'Generic system message. User `text` parameter to override the contents',
-        },
+        }),
-        welcome_prompt: {
+        /** @type {ChatMessage} */
-            name: systemUserName,
+        welcome_prompt: lodash.merge(structuredClone(defaultMessage), {
-            force_avatar: system_avatar,
-            is_user: false,
-            is_system: true,
             mes: await renderTemplateAsync('welcomePrompt'),
             extra: {
                 uses_system_ui: true,
                 isSmallSys: true,
             },
-        },
+        }),
-        assistant_note: {
+        /** @type {ChatMessage} */
-            name: systemUserName,
+        assistant_note: lodash.merge(structuredClone(defaultMessage), {
-            force_avatar: system_avatar,
-            is_user: false,
-            is_system: true,
             mes: await renderTemplateAsync('assistantNote'),
             extra: {
                 uses_system_ui: true,
                 isSmallSys: true,
             },
-        },
+        }),
     };
     Object.assign(system_messages, result);

 /**
  * Gets a system message by type.
+ * By default system messages are not swipeable.
+ * This can be overridden by setting extra.swipeable to true.
  * @param {string} type Type of system message
  * @param {string} [text] Text to be sent
  * @param {ChatMessageExtra} [extra] Additional data to be added to the message

         newMessage.mes = getSlashCommandsHelp();
+    }
-    if (!newMessage.extra || typeof newMessage.extra !== 'object') {
-        newMessage.extra = {};
-    }
     newMessage.extra = Object.assign(newMessage.extra, extra);
     newMessage.extra.type = type;
     return newMessage;

public/scripts/utils.js+41 -0 Viewed

+    }
+}
+/**
+ * If value is less than min, it's set to min.
+ * If value is greater than max, it's set to max.
+ * @param {number} value The target value.
+ * @param {number} min The minimum for value.
+ * @param {number} max The maximum for value.
+ * @returns {number} The clamped value.
+ */
 export const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/**
+ * Shakes the targetElement.
+ * @param {HTMLElement|JQuery<HTMLElement>} targetElement
+ * @param {number} distance Distance in pixels.
+ * @param {number} duration Duration in milliseconds.
+ * @param {string} easing CSS easing function.
+ */
+export function shakeElement(targetElement, distance = 10, duration = 100, easing = 'ease-in-out') {
+    // Don't call the JQuery animation.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/animate
+    if (targetElement instanceof jQuery) targetElement = targetElement[0];
+    return targetElement.animate([
+        { transform: 'translateX(0)' },
+        { transform: `translateX(${distance}px)` },
+        { transform: 'translateX(0)' },
+    ], { duration, easing });
+}
+/**
+ * Creates a promise that rejects after a specified delay.
+ * Used for Promise.race fallbacks.
+ * @param {number} ms The delay in milliseconds.
+ * @param {string?} [errorMessage='']
+ * @returns {Promise<never>} A promise that rejects.
+ */
+export function createTimeout(ms, errorMessage = '') {
+    errorMessage ??= `Operation timed out after ${ms}ms.`;
+    return new Promise((_, reject) => {
+        setTimeout(() => reject(new Error(errorMessage)), ms);
+    });
+}

public/scripts/welcome-screen.js+1 -0 Viewed

         send_date: getMessageTimeStamp(),
         extra: {
             type: system_message_types.ASSISTANT_MESSAGE,
+            swipeable: false,
         },
     };

public/style.css+60 -15 Viewed

     margin: 0;
+}
-.mes.smallSysMes .swipe_right,
-.mes.smallSysMes .swipe_left {
-    display: none !important;
-}
 .mes.smallSysMes .mes_text {
     padding: 0 !important;
     text-align: center;

     --swipeCounterMargin: 5px;
+}
+/* https://stackoverflow.com/a/31819499 */
+/* This has much better performance than .transform on large chats*/
+.slide {
+    animation: slide calc(var(--slide-mes-x-duration, var(--animation-duration, 125ms))) ease-in-out forwards;
+    -webkit-animation: slide calc(var(--slide-mes-x-duration, var(--animation-duration, 125ms))) ease-in-out forwards;
+    will-change: transform;
+}
 .swipe_right,
 .swipe_left {
     width: 25px;

+}
 .swipes-counter {
+    opacity: 0.3;
     color: var(--SmartThemeBodyColor);
     font-size: 12px;
     padding: 0 5px;

     height: var(--swipeCounterHeight);
+}
-body:not(.swipeAllMessages) .mes:not(.last_mes) .swipes-counter {
-    visibility: hidden;
-}
 body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
     /* Avoid expensive DOM queries */
-    opacity: 0.3 !important;
+    opacity: 0.3;
-    display: flex !important;
+    display: flex;
+}
 .swipe_left {

 .swipe_right {
     right: 5px;
     align-self: center;
+    display: flex;
+}
+/* The last swipe must be highlighted */
+.last_swipe :is(.swipes-counter, .swipe_right) {
+    opacity: 0.7;
+    /* Doubled opacity needs a longer transition to match a non active arrow. */
+    /* (Duration * Active Opacity / Inactive Opacity * 2) */
+    transition-duration: calc(var(--animation-duration-2x) * 0.7/0.3);
+}
+.fade :is(.swipes-counter, .swipe_left, .swipe_right){
+    /* Fade in and out: */
+    /* https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects */
+    /* https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior#description */
+    transition: opacity calc(var(--animation-duration) * 2) ease-in;
+    /* Fade in. */
+    @supports (transition-behavior: allow-discrete) {
+        transition:
+            opacity var(--animation-duration-2x) ease-in,
+            display var(--animation-duration-2x) ease-in,
+            visibility var(--animation-duration-2x) ease-in;
+        transition-behavior: allow-discrete;
+    }
+}
+/* Hide all but the last message. */
+body:not(.swipeAllMessages) .mes:not(.last_mes) :is(.swipe_left, .swipe_right, .swipes-counter),
+/* Hide non-visible swipe_left. */
+.mes:not(.swipes_visible) .swipe_left,
+/* Only hide swipe_right if it's not visible, and not the last swipe. */
+.mes:not(.swipes_visible, .last_swipe) :is(.swipe_right),
+/* Hide all swipe buttons if .hideAllSwipeButtons. */
+body.hideAllSwipeButtons :is(.swipe_left, .swipe_right),
+.swipes-counter[hidden],
+.swipe_right[hidden],
+.swipe_left[hidden] {
+    /* Fade out */
+    opacity: 0 !important;
+    /* With display:none, the swipes-counter div wil collapse, shifting the chevron. */
+    visibility: hidden;
+    /* Interactivity has limited availability https://caniuse.com/?search=interactivity */
+}
 .ui-settings {

     field-sizing: content;
+}
-body[data-generating="true"] #send_but,
+body:is([data-generating="true"], [data-swiping="true"]) :is(
-body[data-generating="true"] #mes_continue,
+    #send_but,
-body[data-generating="true"] #mes_impersonate,
+    #mes_continue,
-body[data-generating="true"] #chat .last_mes .mes_buttons,
+    #mes_impersonate,
-body[data-generating="true"] #chat .last_mes .mes_reasoning_actions {
+    #chat .last_mes .mes_buttons,
+    #chat .last_mes .mes_reasoning_actions) {
     display: none;
+}