Image swipe is back 🗣️🔥

73cedc115dbd82dff891acb877deb5494f8e653d

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 6c43ab64b52ed904a246768383a770536558a3d6

public/index.html+9 -0 Viewed

                                         <option value="1" data-i18n="Enabled">Enabled</option>
                                     </select>
                                 </div>
+                                <div class="flex-container alignItemsCenter">
+                                    <small data-i18n="Image Swipe Behavior:">
+                                        Image Swipe Behavior:
+                                    </small>
+                                    <select id="image_overswipe" class="widthNatural flex1 margin0">
+                                        <option value="generate" data-i18n="Generate new">Generate new</option>
+                                        <option value="rollover" data-i18n="Roll over">Roll over</option>
+                                    </select>
+                                </div>
                                 <label class="checkbox_label" for="continue_on_send">
                                     <input id="continue_on_send" type="checkbox" />
                                     <small data-i18n="Press Send to continue">

public/scripts/chats.js+7 -19 Viewed

         return;
+    }
-    // Show a message that swipe right no longer automatically generates an image
-    if (direction === SWIPE_DIRECTION.RIGHT && message.extra.media_index === media.length - 1) {
-        const key = 'imageSwipeNoticeShown';
-        const hasSeenNotice = accountStorage.getItem(key);
-        if (!hasSeenNotice) {
-            await Popup.show.text(
-                t`Image swiping no longer automatically generates new images.`,
-                t`Use the 'Generate Image' (paintbrush) button in the message actions menu to generate more images. This message will not be shown again.`,
-            );
-            accountStorage.setItem(key, 'true');
-        }
-    }
-    if (media.length === 1) {
-        console.warn('Only one media item in the message, swiping is not applicable');
-        return;
-    }
     const currentIndex = getMediaIndex(message);
     const mediaDisplay = getMediaDisplay(message);

         return;
+    }
+    await eventSource.emit(event_types.IMAGE_SWIPED, { message, element, direction });
+    if (media.length === 1) {
+        console.warn('Only one media item in the message, swiping is not applicable');
+        return;
+    }
     // Switch to previous image or wrap around if at the beginning
     if (direction === SWIPE_DIRECTION.LEFT) {
         const newIndex = currentIndex === 0 ? media.length - 1 : currentIndex - 1;

@@ -2119,7 +2108,6 @@ async function onImageSwiped(messageId, element, direction) {
2119	}	2108	}
2120		2109
2121	await saveChatConditional();	2110	await saveChatConditional();
2122	await eventSource.emit(event_types.IMAGE_SWIPED, { message, element, direction });
2123	appendMediaToMessage(message, element);	2111	appendMediaToMessage(message, element);
2124	}	2112	}
2125		2113

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

 };
 /**
+ * @enum {string}
+ * @readonly
+ */
+export const IMAGE_OVERSWIPE = {
+    GENERATE: 'generate',
+    ROLLOVER: 'rollover',
+};
+/**
  * @readonly
  */
 export const MEDIA_TYPE = {

public/scripts/extensions/stable-diffusion/index.js+53 -6 Viewed

     SlashCommandArgument,
     SlashCommandNamedArgument,
 } from '../../slash-commands/SlashCommandArgument.js';
-import { debounce_timeout, MEDIA_DISPLAY, MEDIA_SOURCE, MEDIA_TYPE, SCROLL_BEHAVIOR, VIDEO_EXTENSIONS } from '../../constants.js';
+import { debounce_timeout, IMAGE_OVERSWIPE, MEDIA_DISPLAY, MEDIA_SOURCE, MEDIA_TYPE, SCROLL_BEHAVIOR, SWIPE_DIRECTION, VIDEO_EXTENSIONS } from '../../constants.js';
 import { SlashCommandEnumValue } from '../../slash-commands/SlashCommandEnumValue.js';
 import { callGenericPopup, Popup, POPUP_TYPE } from '../../popup.js';
 import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';

         placement: 'top',
     });
-    $(document).on('click', '.sd_message_gen', sdMessageButton);
+    $(document).on('click', '.sd_message_gen', (e) => sdMessageButton($(e.currentTarget), { animate: false }));
     $(document).on('click touchend', function (e) {
         const target = $(e.target);

 /**
  * "Paintbrush" button handler to generate a new image for a message.
- * @param {JQuery.ClickEvent} e The click event object.
+ * @param {JQuery<HTMLElement>} $icon The click target.
+ * @param {Object} [options] Additional options for image generation.
+ * @param {boolean} [options.animate] Whether to animate the media during generation.
  * @returns {Promise<void>} A promise that resolves when the image generation process is complete.
  */
-async function sdMessageButton(e) {
+async function sdMessageButton($icon, { animate } = {}) {
     /**
      * Sets the icon to indicate busy or idle state.
      * @param {boolean} isBusy Whether the icon should indicate a busy state.

     function setBusyIcon(isBusy) {
         $icon.toggleClass(classes.idle, !isBusy);
         $icon.toggleClass(classes.busy, isBusy);
+        $media.toggleClass(classes.animation, isBusy);
+    }
-    const classes = { busy: 'fa-hourglass', idle: 'fa-paintbrush' };
+    let $media = jQuery();
+    const classes = { busy: 'fa-hourglass', idle: 'fa-paintbrush', animation: 'fa-fade' };
     const context = getContext();
-    const $icon = $(e.currentTarget);
     if ($icon.hasClass(classes.busy)) {
         buttonAbortController?.abort('Aborted by user');

         ? (message.extra.media[message.extra.media_index] ?? message.extra.media[message.extra.media.length - 1])
         : { url: '', title: message.mes, type: MEDIA_TYPE.IMAGE, generation_type: generationMode.FREE };
+    if (animate && message.extra.media.length > 0) {
+        const index = message.extra.media.indexOf(selectedMedia);
+        $media = messageElement.find(`.mes_media_container[data-index="${index}"]`).find('.mes_img, .mes_video');
+    }
     buttonAbortController = new AbortController();
     const newMediaAttachment = await generateMediaSwipe(
         selectedMedia,

+}
 /**
+ * Handles the image swipe event to potentially generate a new image.
+ * @param {object} param Parameters object
+ * @param {ChatMessage} param.message Message object
+ * @param {JQuery<HTMLElement>} param.element Message element
+ * @param {string} param.direction Swipe direction
+ */
+async function onImageSwiped({ message, element, direction }) {
+    const { powerUserSettings, accountStorage } = getContext();
+    if (!message || direction !== SWIPE_DIRECTION.RIGHT || powerUserSettings.image_overswipe !== IMAGE_OVERSWIPE.GENERATE) {
+        return;
+    }
+    const media = message?.extra?.media;
+    if (!Array.isArray(media) || media.length === 0) {
+        return;
+    }
+    const shouldGenerate = message?.extra?.media_index === media.length - 1;
+    if (!shouldGenerate) {
+        return;
+    }
+    const key = 'imageSwipeNoticeShown';
+    const hasSeenNotice = accountStorage.getItem(key);
+    if (!hasSeenNotice) {
+        await Popup.show.text(
+            t`Image Generation Notice`,
+            t`To disable generation on image swipes, change the "Image Swipe Behavior" setting in the User Settings panel. This message will not be shown again.`,
+        );
+        accountStorage.setItem(key, 'true');
+    }
+    await sdMessageButton(element.find('.sd_message_gen'), { animate: true });
+}
+/**
  * Applies the command arguments to the extension settings.
  * @typedef {import('../../slash-commands/SlashCommand.js').NamedArguments} NamedArguments
  * @typedef {import('../../slash-commands/SlashCommand.js').NamedArgumentsCapture} NamedArgumentsCapture

     });
     eventSource.on(event_types.CHAT_CHANGED, onChatChanged);
+    eventSource.on(event_types.IMAGE_SWIPED, onImageSwiped);
     [event_types.SECRET_WRITTEN, event_types.SECRET_DELETED, event_types.SECRET_ROTATED].forEach(event => {
         eventSource.on(event, async (/** @type {string} */ key) => {

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

 import { accountStorage } from './util/AccountStorage.js';
 import { DEFAULT_REASONING_TEMPLATE, loadReasoningTemplates } from './reasoning.js';
 import { bindModelTemplates } from './chat-templates.js';
-import { MEDIA_DISPLAY } from './constants.js';
+import { IMAGE_OVERSWIPE, MEDIA_DISPLAY } from './constants.js';
 import { t } from './i18n.js';
 export const toastPositionClasses = [

     pin_styles: true,
     click_to_edit: false,
     media_display: MEDIA_DISPLAY.LIST,
+    image_overswipe: IMAGE_OVERSWIPE.GENERATE,
 };
 let themes = [];

     $('#pin_styles').prop('checked', power_user.pin_styles);
     $('#click_to_edit').prop('checked', power_user.click_to_edit);
     $('#media_display').val(power_user.media_display);
+    $('#image_overswipe').val(power_user.image_overswipe);
     for (const theme of themes) {
         const option = document.createElement('option');

+        }
     });
+    $('#image_overswipe').on('input', function () {
+        power_user.image_overswipe = $(this).val().toString();
+        saveSettingsDebounced();
+    });
     $(document).on('click', '#debug_table [data-debug-function]', function () {
         const functionId = $(this).data('debug-function');
         const functionRecord = debug_functions.find(f => f.functionId === functionId);