de7c1133 · permissionBRICK/SillyTavern

public/css/file-form.css+10 -0 Viewed

     border-radius: 15px;
+}
+.mes .mes_file_wrapper:empty {
+    display: none;
+}
+.mes .mes_file_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+}
 .mes_file_container .right_menu_button {
     padding-right: 0;
+}

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

 import { QuickReplyApi } from './scripts/extensions/quick-reply/api/QuickReplyApi';
 import { oai_settings } from './scripts/openai';
 import { textgenerationwebui_settings } from './scripts/textgen-settings';
+import { FileAttachment } from './scripts/chats';
+import { ReasoningMessageExtra } from './scripts/reasoning';
 declare global {
     // Custom types

     type ReasoningSettings = typeof power_user.reasoning;
     type ChatCompletionSettings = typeof oai_settings;
     type TextCompletionSettings = typeof textgenerationwebui_settings;
+    type MessageTimestamp = string | number | Date;
+    interface ChatMessage {
+        name?: string;
+        mes?: string;
+        title?: string;
+        gen_started?: MessageTimestamp;
+        gen_finished?: MessageTimestamp;
+        send_date?: MessageTimestamp;
+        is_user?: boolean;
+        is_system?: boolean;
+        force_avatar?: string;
+        original_avatar?: string;
+        swipes?: string[];
+        swipe_info?: Record<string, any>;
+        swipe_id?: number;
+        extra?: ChatMessageExtra & Partial<ReasoningMessageExtra> & Record<string, any>;
+    };
+    interface ChatMessageExtra {
+        bias?: string;
+        uses_system_ui?: boolean;
+        memory?: string;
+        display_text?: string;
+        reasoning_display_text?: string;
+        tool_invocations?: any[];
+        title?: string;
+        isSmallSys?: boolean;
+        token_count?: number;
+        files?: FileAttachment[];
+        inline_image?: boolean;
+        media_display?: string;
+        media_index?: number;
+        media?: MediaAttachment[],
+        /** @deprecated Use `files` instead */
+        file?: FileAttachment;
+        /** @deprecated Use `media` instead */
+        image?: string;
+        /** @deprecated Use `media` instead */
+        video?: string;
+        /** @deprecated Use `media` with `media_display = 'gallery'` instead */
+        image_swipes?: string[];
+        /** @deprecated Use `MediaAttachment.append_title` instead */
+        append_title?: boolean;
+        /** @deprecated Use `MediaAttachment.generation_type` instead */
+        generationType?: number;
+        /** @deprecated Use `MediaAttachment.negative` instead */
+        negative?: string;
+    }
+    type MediaAttachment = MediaAttachmentProps & ImageGenerationAttachmentProps & ImageCaptionAttachmentProps;
+    interface MediaAttachmentProps {
+        url: string;
+        title?: string;
+        type: string;
+    }
+    interface ImageGenerationAttachmentProps {
+        generation_type?: number;
+        negative?: string;
+    }
+    interface ImageCaptionAttachmentProps {
+        append_title?: boolean;
+    }
     // Global namespace modules
     interface Window {

public/index.html+37 -20 Viewed

                                         <option value="2" data-i18n="Document">Document</option>
                                     </select>
                                 </div>
+                                <div class="flex-container alignitemscenter" title="Default display style for media attachments in chat messages. Extensions can override this setting." data-i18n="[title]Default display style for media attachments in chat messages. Extensions can override this setting.">
+                                    <span data-i18n="Media Style:">Media Style:</span>
+                                    <select id="media_display" class="widthNatural flex1 margin0 text_pole">
+                                        <option value="list" data-i18n="List">List</option>
+                                        <option value="gallery" data-i18n="Gallery">Gallery</option>
+                                    </select>
+                                </div>
                                 <div class="flex-container alignItemsBaseline">
                                     <span data-i18n="Notifications:">Notifications:</span>
                                     <select id="toastr_position" class="widthNatural flex1 margin0 text_pole">

                                 <div title="Prompt" class="mes_button mes_prompt fa-solid fa-square-poll-horizontal " data-i18n="[title]Prompt" style="display: none;"></div>
                                 <div title="Exclude message from prompts" class="mes_button mes_hide fa-solid fa-eye" data-i18n="[title]Exclude message from prompts"></div>
                                 <div title="Include message in prompts" class="mes_button mes_unhide fa-solid fa-eye-slash" data-i18n="[title]Include message in prompts"></div>
+                                <div title="Toggle media display style" class="mes_button mes_media_gallery fa-solid fa-photo-film" data-i18n="[title]Toggle media display style"></div>
+                                <div title="Toggle media display style" class="mes_button mes_media_list fa-solid fa-table-cells-large" data-i18n="[title]Toggle media display style"></div>
                                 <div title="Embed file or image" class="mes_button mes_embed fa-solid fa-paperclip" data-i18n="[title]Embed file or image"></div>
                                 <div title="Create checkpoint" class="mes_button mes_create_bookmark fa-regular fa-solid fa-flag-checkered" data-i18n="[title]Create checkpoint"></div>
                                 <div title="Create branch" class="mes_button mes_create_branch fa-regular fa-code-branch" data-i18n="[title]Create Branch"></div>

                         <div class="mes_reasoning"></div>
                     </details>
                     <div class="mes_text"></div>
-                    <div class="mes_img_container">
+                    <div class="mes_media_wrapper"></div>
-                        <div class="mes_img_controls">
+                    <div class="mes_file_wrapper"></div>
-                            <div title="Expand and zoom" class="right_menu_button fa-lg fa-solid fa-magnifying-glass mes_img_enlarge" data-i18n="[title]Expand and zoom"></div>
-                            <div title="Caption" class="right_menu_button fa-lg fa-solid fa-envelope-open-text mes_img_caption" data-i18n="[title]Caption"></div>
-                            <div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_img_delete" data-i18n="[title]Delete"></div>
-                        </div>
-                        <div class="mes_img_swipes">
-                            <div title="Swipe left" class="right_menu_button fa-lg fa-solid fa-chevron-left mes_img_swipe_left" data-i18n="[title]Swipe left"></div>
-                            <div class="mes_img_swipe_counter">1/1</div>
-                            <div title="Swipe right" class="right_menu_button fa-lg fa-solid fa-chevron-right mes_img_swipe_right" data-i18n="[title]Swipe right"></div>
-                        </div>
-                        <img class="mes_img" src="" />
-                    </div>
                     <div class="mes_bias"></div>
                 </div>
                 <div class="flex-container swipeRightBlock flexFlowColumn flexNoGap">

             </div>
         </div>
-        <!-- chat and input bar -->
+        <!-- Media Templates -->
         <div id="message_file_template" class="template_element">
-            <div class="mes_file_container">
+            <div class="mes_media_container mes_file_container">
                 <div class="fa-lg fa-solid fa-file-alt mes_file_icon"></div>
                 <div class="mes_file_name"></div>
                 <div class="mes_file_size"></div>

             </div>
         </div>
+        <div id="message_image_template" class="template_element">
+            <div class="mes_media_container mes_img_container">
+                <div class="mes_img_controls">
+                    <div title="Expand and zoom" class="right_menu_button fa-lg fa-solid fa-magnifying-glass mes_media_enlarge" data-i18n="[title]Expand and zoom"></div>
+                    <div title="Caption" class="right_menu_button fa-lg fa-solid fa-envelope-open-text mes_img_caption" data-i18n="[title]Caption"></div>
+                    <div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_media_delete" data-i18n="[title]Delete"></div>
+                </div>
+                <img class="mes_img" src="" />
+            </div>
+        </div>
         <div id="message_video_template" class="template_element">
-            <div class="mes_video_container">
+            <div class="mes_media_container mes_video_container">
                 <div class="mes_video_controls">
-                    <div><!-- Placeholder --></div>
+                    <div title="Expand and zoom" class="right_menu_button fa-lg fa-solid fa-magnifying-glass mes_media_enlarge" data-i18n="[title]Expand and zoom"></div>
-                    <div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_video_delete" data-i18n="[title]Delete"></div>
+                    <div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_media_delete" data-i18n="[title]Delete"></div>
                 </div>
                 <video class="mes_video" controls preload="metadata"></video>
             </div>
         </div>
+        <div id="message_gallery_controls" class="template_element">
+            <div class="mes_img_swipes">
+                <div title="Swipe left" class="right_menu_button fa-lg fa-solid fa-chevron-left mes_img_swipe_left" data-i18n="[title]Swipe left"></div>
+                <div class="mes_img_swipe_counter">1/1</div>
+                <div title="Swipe right" class="right_menu_button fa-lg fa-solid fa-chevron-right mes_img_swipe_right" data-i18n="[title]Swipe right"></div>
+            </div>
+        </div>
     </div>
     <div id="movingDivs">
         <div id="floatingPrompt" class="drawer-content flexGap5">

             <div id="send_form" class="no-connection">
                 <form id="file_form" class="wide100p displayNone">
                     <div class="file_attached">
-                        <input id="file_form_input" type="file" hidden>
+                        <input id="file_form_input" type="file" multiple hidden>
-                        <input id="embed_file_input" type="file" hidden>
+                        <input id="embed_file_input" type="file" multiple hidden>
                         <i class="fa-solid fa-file-alt"></i>
                         <span class="file_name">File Name</span>
                         <span class="file_size">File Size</span>

public/script.js+389 -132 Viewed

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

     getSystemMessageByType,
     event_types,
     eventSource,
+    /** @deprecated Use setCharacterSettingsOverrides instead. */
     setCharacterSettingsOverrides as setScenarioOverride,
+    /** @deprecated Use appendMediaToMessage instead. */
+    appendMediaToMessage as appendImageToMessage,
 };
 /**

 let default_user_name = 'User';
 export let name1 = default_user_name;
 export let name2 = systemUserName;
+/** @type {ChatMessage[]} */
 export let chat = [];
 export let isSwipingAllowed = true; //false when a swipe is in progress, or swiping is blocked.
 let chatSaveTimeout;

         addOneMessage(item, { scroll: false, forceId: i, showSwipes: false });
+    }
-    // Scroll to bottom when all images are loaded
+    chatElement.find('.mes').removeClass('last_mes');
-    const images = document.querySelectorAll('#chat .mes img');
+    chatElement.find('.mes').last().addClass('last_mes');
-    let imagesLoaded = 0;
+    refreshSwipeButtons();
+    applyStylePins();
+    scrollChatToBottom();
+    delay(debounce_timeout.short).then(() => scrollOnMediaLoad());
+}
+function scrollOnMediaLoad() {
+    const started = Date.now();
+    const media = chatElement.find('.mes_block img, .mes_block video').toArray();
+    let mediaLoaded = 0;
-    for (let i = 0; i < images.length; i++) {
+    for (const currentElement of media) {
-        const image = images[i];
+        if (currentElement instanceof HTMLImageElement) {
-        if (image instanceof HTMLImageElement) {
+            if (currentElement.complete) {
-            if (image.complete) {
+                incrementAndCheck();
+            } else {
+                currentElement.addEventListener('load', incrementAndCheck);
+                currentElement.addEventListener('error', incrementAndCheck);
+            }
+        }
+        if (currentElement instanceof HTMLVideoElement) {
+            if (currentElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
                 incrementAndCheck();
             } else {
-                image.addEventListener('load', incrementAndCheck);
+                currentElement.addEventListener('loadeddata', incrementAndCheck);
+                currentElement.addEventListener('error', incrementAndCheck);
+            }
+        }
+    }
-    chatElement.find('.mes').removeClass('last_mes');
-    chatElement.find('.mes').last().addClass('last_mes');
-    refreshSwipeButtons();
-    scrollChatToBottom();
-    applyStylePins();
     function incrementAndCheck() {
-        imagesLoaded++;
+        const MAX_DELAY = 1000; // 1 second
-        if (imagesLoaded === images.length) {
+        if ((Date.now() - started) > MAX_DELAY) {
+            return;
+        }
+        mediaLoaded++;
+        if (mediaLoaded === media.length) {
             scrollChatToBottom();
+        }
+    }

+}
 /**
- * Appends image or file to the message element.
+ * Ensures that the message media properties are arrays, adding getters/setters for single media items.
- * @param {object} mes Message object
+ * @param {ChatMessage} mes Message object
- * @param {JQuery<HTMLElement>} messageElement Message element
- * @param {boolean} [adjustScroll=true] Whether to adjust the scroll position after appending the media
  */
-export function appendMediaToMessage(mes, messageElement, adjustScroll = true) {
+export function ensureMessageMediaIsArray(mes) {
-    // Add image to message
+    /**
-    if (mes.extra?.image) {
+     * Determines if a property of an object is a plain property (not a getter/setter or non-enumerable).
-        const container = messageElement.find('.mes_img_container');
+     * @param {object} obj Object to check
-        const chatHeight = chatElement.prop('scrollHeight');
+     * @param {string} name Property name
-        const image = messageElement.find('.mes_img');
+     * @returns {boolean} True if the property is a plain property, false otherwise
-        const text = messageElement.find('.mes_text');
+     */
-        const isInline = !!mes.extra?.inline_image;
+    function isPlainObjectProperty(obj, name) {
-        const doAdjustScroll = () => {
+        const hasProperty = Object.hasOwn(obj, name);
-            if (!adjustScroll) {
+        if (hasProperty) {
-                return;
+            const descriptor = Object.getOwnPropertyDescriptor(obj, name);
-            }
+            return descriptor && descriptor.enumerable && descriptor.configurable && descriptor.writable;
-            const scrollPosition = chatElement.scrollTop();
+        }
-            const newChatHeight = chatElement.prop('scrollHeight');
+        return false;
-            const diff = newChatHeight - chatHeight;
+    }
-            chatElement.scrollTop(scrollPosition + diff);
-        };
+    /**
-        image.off('load').on('load', function () {
+     * Determines if a property of an object is a getter (not a plain property).
-            image.removeAttr('alt');
+     * @param {object} obj Object to check
-            image.removeClass('error');
+     * @param {string} name Property name
-            doAdjustScroll();
+     * @returns {boolean} True if the property is a getter, false otherwise
-        });
+     */
-        image.off('error').on('error', function () {
+    function isGetterObjectProperty(obj, name) {
-            image.attr('alt', '');
+        const hasProperty = Object.hasOwn(obj, name);
-            image.addClass('error');
+        if (hasProperty) {
-            doAdjustScroll();
+            const descriptor = Object.getOwnPropertyDescriptor(obj, name);
+            return descriptor && typeof descriptor.get === 'function';
+        }
+        return false;
+    }
+    /**
+     * Adds a plain property to an object that wraps around an array property.
+     * @param {object} obj Object to add property to
+     * @param {string} plainProperty Plain property name
+     * @param {string} arrayProperty Array property to back the plain property
+     * @param {(value: any) => boolean} [filterFn] Optional filter function to apply when getting/setting the plain property
+     * @param {(value: any) => any} [mapFn] Optional map function to apply when getting/setting the plain property
+     */
+    function addArrayAutoWrapper(obj, plainProperty, arrayProperty, filterFn = () => true, mapFn = (t) => t) {
+        // If the plain property is already a getter, do nothing.
+        const hasGetterProperty = isGetterObjectProperty(obj, plainProperty);
+        if (hasGetterProperty) {
+            return;
+        }
+        // Define the plain property as a getter/setter that wraps around the array property.
+        Object.defineProperty(obj, plainProperty, {
+            // Getting the plain property returns the first item in the array property, or undefined if the array is empty.
+            get: function () {
+                console.trace(`Attempting to GET an array-wrapped property '${plainProperty}'. Use the array property '${arrayProperty}' instead.`);
+                const array = Array.isArray(this[arrayProperty]) ? this[arrayProperty].filter(filterFn).map(mapFn) : [];
+                return array.length > 0 ? array[0] : void 0;
+            },
+            // Setting the plain property is not supported, as it would be ambiguous.
+            set: function () {
+                console.trace(`Attempting to SET an array-wrapped property '${plainProperty}'. Use the array property '${arrayProperty}' instead.`);
+            },
+            // Exclude the property from JSON serialization and from being listed in for...in loops.
+            enumerable: false,
+            // Make the property non-configurable to prevent deletion or redefinition.
+            configurable: false,
         });
-        image.attr('src', mes.extra?.image);
+    }
-        image.attr('title', mes.extra?.title || mes.title || '');
-        container.addClass('img_extra');
-        image.toggleClass('img_inline', isInline);
-        text.toggleClass('displayNone', !isInline);
-        const imageSwipes = mes.extra.image_swipes;
-        if (Array.isArray(imageSwipes) && imageSwipes.length > 0) {
-            container.addClass('img_swipes');
-            const counter = container.find('.mes_img_swipe_counter');
-            const currentImage = imageSwipes.indexOf(mes.extra.image) + 1;
-            counter.text(`${currentImage}/${imageSwipes.length}`);
-            const swipeLeft = container.find('.mes_img_swipe_left');
-            swipeLeft.off('click').on('click', function () {
-                eventSource.emit(event_types.IMAGE_SWIPED, { message: mes, element: messageElement, direction: 'left' });
-            });
-            const swipeRight = container.find('.mes_img_swipe_right');
+    /**
-            swipeRight.off('click').on('click', function () {
+     * Migrates image swipes from a single image property to an array.
-                eventSource.emit(event_types.IMAGE_SWIPED, { message: mes, element: messageElement, direction: 'right' });
+     * @param {ChatMessageExtra} obj
-            });
+     */
+    function migrateMediaToArray(obj) {
+        if (isPlainObjectProperty(obj, 'file')) {
+            if (!Array.isArray(obj.files)) {
+                obj.files = [];
+            }
+            const fileValue = obj.file;
+            delete obj.file;
+            if (fileValue) {
+                obj.files.push(fileValue);
+            }
+        }
-    } else {
-        const container = messageElement.find('.mes_img_container');
+        if (Array.isArray(obj.image_swipes)) {
-        container.removeClass('img_extra img_swipes');
+            if (!Array.isArray(obj.media)) {
-        const text = messageElement.find('.mes_text');
+                obj.media = [];
-        text.removeClass('displayNone');
-    }
-    // Add video to message
-    if (mes.extra?.video) {
-        const container = $('#message_video_template .mes_video_container').clone();
-        messageElement.find('.mes_video_container').remove();
-        messageElement.find('.mes_block').append(container);
-        const chatHeight = chatElement.prop('scrollHeight');
-        const video = container.find('.mes_video');
-        video.off('loadedmetadata').on('loadedmetadata', function () {
-            if (!adjustScroll) {
-                return;
+            }
-            const scrollPosition = chatElement.scrollTop();
+            for (const swipe of obj.image_swipes) {
-            const newChatHeight = chatElement.prop('scrollHeight');
+                if (swipe && typeof swipe === 'string') {
-            const diff = newChatHeight - chatHeight;
+                    obj.media_display = MEDIA_DISPLAY.GALLERY;
-            chatElement.scrollTop(scrollPosition + diff);
+                    obj.media.push({ type: MEDIA_TYPE.IMAGE, url: swipe });
-        });
+                }
+            }
+            delete obj.image_swipes;
+        }
-        video.attr('src', mes.extra?.video);
+        if (isPlainObjectProperty(obj, 'image')) {
-    } else {
+            if (!Array.isArray(obj.media)) {
-        messageElement.find('.mes_video_container').remove();
+                obj.media = [];
-    }
+            }
+            const imageValue = obj.image;
-    // Add file to message
+            delete obj.image;
-    if (mes.extra?.file) {
+            if (imageValue && typeof imageValue === 'string') {
-        messageElement.find('.mes_file_container').remove();
+                obj.media.push({ type: MEDIA_TYPE.IMAGE, url: imageValue });
-        const messageId = messageElement.attr('mesid');
+            }
-        const template = $('#message_file_template .mes_file_container').clone();
+            if (obj.media_display === MEDIA_DISPLAY.GALLERY) {
-        template.find('.mes_file_name').text(mes.extra.file.name);
+                const selectedIndex = obj.media.findIndex(t => t.url === imageValue);
-        template.find('.mes_file_size').text(humanFileSize(mes.extra.file.size));
+                if (selectedIndex > -1) {
-        template.find('.mes_file_download').attr('mesid', messageId);
+                    obj.media_index = selectedIndex;
-        template.find('.mes_file_delete').attr('mesid', messageId);
+                }
-        messageElement.find('.mes_block').append(template);
+            }
-    } else {
+            obj.media = obj.media.filter((v, i, a) => i === a.findIndex(t => t.url === v.url));
-        messageElement.find('.mes_file_container').remove();
+        }
+        if (isPlainObjectProperty(obj, 'video')) {
+            if (!Array.isArray(obj.media)) {
+                obj.media = [];
+            }
+            const videoValue = obj.video;
+            delete obj.video;
+            if (videoValue && typeof videoValue === 'string') {
+                obj.media.push({ type: MEDIA_TYPE.VIDEO, url: videoValue });
+            }
+        }
+    }
+    if (!mes || !mes.extra || typeof mes.extra !== 'object') {
+        return;
+    }
+    migrateMediaToArray(mes.extra);
+    addArrayAutoWrapper(mes.extra, 'file', 'files');
+    addArrayAutoWrapper(mes.extra, 'image', 'media', (t) => t.type === MEDIA_TYPE.IMAGE, (t) => t.url);
+    addArrayAutoWrapper(mes.extra, 'video', 'media', (t) => t.type === MEDIA_TYPE.VIDEO, (t) => t.url);
+}
+/**
+ * Gets the media display setting for a message.
+ * @param {ChatMessage} mes Message object
+ * @returns {MEDIA_DISPLAY} Media display setting
+ */
+export function getMediaDisplay(mes) {
+    const value = mes?.extra?.media_display || power_user.media_display || MEDIA_DISPLAY.LIST;
+    return Object.values(MEDIA_DISPLAY).includes(value) ? value : MEDIA_DISPLAY.LIST;
+}
 /**
- * @deprecated Use appendMediaToMessage instead.
+ * Gets the media index for a message.
+ * @param {ChatMessage} mes Message object
+ * @returns {number} Media index
  */
-export function appendImageToMessage(mes, messageElement) {
+export function getMediaIndex(mes) {
-    appendMediaToMessage(mes, messageElement);
+    if (!Array.isArray(mes?.extra?.media)) {
+        return 0;
+    }
+    const value = mes.extra?.media_index;
+    if (isNaN(value) || value < 0 || value >= mes.extra.media.length) {
+        return 0;
+    }
+    return value;
+}
+/**
+ * Appends image or file to the message element.
+ * @param {ChatMessage} mes Message object
+ * @param {JQuery<HTMLElement>} messageElement Message element
+ * @param {boolean} [adjustScroll=true] Whether to adjust the scroll position after appending the media
+ */
+export function appendMediaToMessage(mes, messageElement, adjustScroll = true) {
+    ensureMessageMediaIsArray(mes);
+    const hasMedia = Array.isArray(mes?.extra?.media) && mes.extra.media.length > 0;
+    const hasFiles = Array.isArray(mes?.extra?.files) && mes.extra.files.length > 0;
+    const mediaDisplay = getMediaDisplay(mes);
+    const hideMessageText = hasMedia && mes?.extra?.inline_image === false;
+    const mediaBlocks = [];
+    const mediaPromises = [];
+    const chatHeight = adjustScroll && (hasMedia || hasFiles) ? chatElement.prop('scrollHeight') : 0;
+    const scrollPosition = chatElement.scrollTop();
+    const doAdjustScroll = () => {
+        if (!adjustScroll) {
+            chatElement.scrollTop(scrollPosition);
+            return;
+        }
+        const newChatHeight = chatElement.prop('scrollHeight');
+        const diff = newChatHeight - chatHeight;
+        chatElement.scrollTop(scrollPosition + diff);
+    };
+    // Set media display attribute
+    messageElement.attr('data-media-display', mediaDisplay);
+    // Toggle text visibility
+    messageElement.find('.mes_text').toggleClass('displayNone', hideMessageText);
+    /**
+     * Appends a single image attachment to the message element.
+     * @param {MediaAttachment} attachment Image attachment object
+     * @param {number} index Index of the image attachment
+     * @returns {JQuery<HTMLElement>} The appended image container element
+     */
+    function appendImageAttachment(attachment, index) {
+        const template = $('#message_image_template .mes_img_container').clone();
+        template.attr('data-index', index);
+        const image = template.find('.mes_img');
+        image.attr('src', attachment.url);
+        image.attr('title', attachment.title || mes.extra.title || '');
+        mediaPromises.push(new Promise((resolve) => {
+            function onLoad() {
+                image.removeAttr('alt');
+                image.removeClass('error');
+                resolve();
+            }
+            function onError() {
+                image.attr('alt', '');
+                image.addClass('error');
+                resolve();
+            }
+            if (image.prop('complete')) {
+                onLoad();
+            } else {
+                image.off('load').on('load', onLoad);
+                image.off('error').on('error', onError);
+            }
+        }));
+        mediaBlocks.push(template);
+        return template;
+    }
+    /**
+     * Appends a single video attachment to the message element.
+     * @param {MediaAttachment} attachment Video attachment object
+     * @param {number} index Index of the video attachment
+     * @returns {JQuery<HTMLElement>} The appended video container element
+     */
+    function appendVideoAttachment(attachment, index) {
+        const template = $('#message_video_template .mes_video_container').clone();
+        template.attr('data-index', index);
+        const video = template.find('.mes_video');
+        video.attr('src', attachment.url);
+        video.attr('title', attachment.title || mes.extra.title || '');
+        mediaPromises.push(new Promise((resolve) => {
+            function onLoad() {
+                resolve();
+            }
+            function onError() {
+                video.addClass('error');
+                resolve();
+            }
+            if (video.prop('readyState') >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+                onLoad();
+            } else {
+                video.off('loadeddata').on('loadeddata', onLoad);
+                video.off('error').on('error', onError);
+            }
+        }));
+        mediaBlocks.push(template);
+        return template;
+    }
+    /**
+     * Appends a media attachment to the message element.
+     * @param {MediaAttachment} attachment Media attachment object
+     * @param {number} index Index of the media attachment
+     * @returns {JQuery<HTMLElement>} The appended media container element
+     */
+    function appendMediaAttachment(attachment, index) {
+        if (!attachment.type) {
+            attachment.type = MEDIA_TYPE.IMAGE;
+        }
+        switch (attachment.type) {
+            case MEDIA_TYPE.IMAGE:
+                return appendImageAttachment(attachment, index);
+            case MEDIA_TYPE.VIDEO:
+                return appendVideoAttachment(attachment, index);
+        }
+        console.warn(`Unknown media type: ${attachment.type}, defaulting to image.`, attachment);
+        return appendImageAttachment(attachment, index);
+    }
+    // Add media gallery to message
+    if (hasMedia && mediaDisplay === MEDIA_DISPLAY.GALLERY) {
+        const mediaIndex = getMediaIndex(mes);
+        const selectedMedia = mes.extra.media[mediaIndex];
+        const galleryControls = $('#message_gallery_controls .mes_img_swipes').clone();
+        const counter = galleryControls.find('.mes_img_swipe_counter');
+        counter.text(`${mediaIndex + 1}/${mes.extra.media.length}`);
+        const template = appendMediaAttachment(selectedMedia, mediaIndex);
+        template.addClass('img_swipes');
+        template.append(galleryControls);
+    }
+    // Add media as a list to message
+    if (hasMedia && mediaDisplay === MEDIA_DISPLAY.LIST) {
+        for (let index = 0; index < mes.extra.media.length; index++) {
+            const attachment = mes.extra.media[index];
+            appendMediaAttachment(attachment, index);
+        }
+    }
+    // Remove existing file containers
+    messageElement.find('.mes_file_wrapper').empty();
+    // Add files to message
+    if (hasFiles) {
+        for (let index = 0; index < mes.extra.files.length; index++) {
+            const file = mes.extra.files[index];
+            const template = $('#message_file_template .mes_file_container').clone();
+            template.attr('data-index', index);
+            template.find('.mes_file_name').text(file.name).attr('title', file.name);
+            template.find('.mes_file_size').text(humanFileSize(file.size)).attr('title', file.size);
+            messageElement.find('.mes_file_wrapper').append(template);
+        }
+    }
+    // TODO: Consider making this awaitable
+    Promise.race([Promise.all(mediaPromises), delay(debounce_timeout.short)]).then(() => {
+        messageElement.find('.mes_media_wrapper').empty().append(mediaBlocks);
+        doAdjustScroll();
+    });
+}
 export function addCopyToCodeBlocks(messageElement) {

 /**
  * Adds a single message to the chat.
- * @param {object} mes Message object
+ * @param {ChatMessage} mes Message object
  * @param {object} [options] Options
  * @param {string} [options.type='normal'] Message type
  * @param {number} [options.insertAfter=null] Message ID to insert the new message after

         avatarImg = mes['force_avatar'];
+    }
-    // if mes.uses_system_ui is true, set an override on the sanitizer options
+    // if mes.extra.uses_system_ui is true, set an override on the sanitizer options
-    const sanitizerOverrides = mes.uses_system_ui ? { MESSAGE_ALLOW_SYSTEM_UI: true } : {};
+    const sanitizerOverrides = mes.extra?.uses_system_ui ? { MESSAGE_ALLOW_SYSTEM_UI: true } : {};
     messageText = messageFormatting(
         messageText,

 /**
  * Formats the title for the generation timer.
- * @param {Date} gen_started Date when generation was started
+ * @param {MessageTimestamp} gen_started Date when generation was started
- * @param {Date} gen_finished Date when generation was finished
+ * @param {MessageTimestamp} gen_finished Date when generation was finished
  * @param {number} tokenCount Number of tokens generated (0 if not available)
  * @param {number?} [reasoningDuration=null] Reasoning duration (null if no reasoning was done)
  * @param {number?} [timeToFirstToken=null] Time to first token

         const prevStarted = chat[chat.length - 1]['gen_started'];
         if (prevFinished && prevStarted) {
-            const timePassed = prevFinished - prevStarted;
+            const timePassed = Number(prevFinished) - Number(prevStarted);
             generation_started = new Date(Date.now() - timePassed);
             chat[chat.length - 1]['gen_started'] = generation_started;
+        }

         coreChat.pop();
+    }
-    coreChat = await Promise.all(coreChat.map(async (chatItem, index) => {
+    coreChat = await Promise.all(coreChat.map(async (/** @type {ChatMessage} */ chatItem, index) => {
         let message = chatItem.mes;
         let regexType = chatItem.is_user ? regex_placement.USER_INPUT : regex_placement.AI_OUTPUT;
         let options = { isPrompt: true, depth: (coreChat.length - index - (isContinue ? 2 : 1)) };

         let regexedMessage = getRegexedString(message, regexType, options);
         regexedMessage = await appendFileContent(chatItem, regexedMessage);
+        const titles = [];
         if (chatItem?.extra?.append_title && chatItem?.extra?.title) {
-            regexedMessage = `${regexedMessage}\n\n${chatItem.extra.title}`;
+            titles.push(chatItem.extra.title);
+        }
+        if (Array.isArray(chatItem?.extra?.media)) {
+            for (const mediaItem of chatItem.extra.media) {
+                if (mediaItem?.title && mediaItem?.append_title) {
+                    titles.push(mediaItem.title);
+                }
+            }
+        }
+        if (titles.length > 0) {
+            regexedMessage = `${regexedMessage}\n\n${titles.join('\n\n')}`;
+        }
         return {

 /**
  * Saves the image to the message object.
  * @param {ParsedImage} img Image object
- * @param {object} mes Chat message object
+ * @param {ChatMessage} mes Chat message object
  * @typedef {{ image?: string, title?: string, inline?: boolean }} ParsedImage
  */
 function saveImageToMessage(img, mes) {

@@ -6105,8 +6360,10 @@ function saveImageToMessage(img, mes) {
6105	if (!mes.extra \|\| typeof mes.extra !== 'object') {	6360	if (!mes.extra \|\| typeof mes.extra !== 'object') {
6106	mes.extra = {};	6361	mes.extra = {};
6107	}	6362	}
6108	mes.extra.image = img.image;	6363	if (!Array.isArray(mes.extra.media)) {
6109	mes.extra.title = img.title;	6364	mes.extra.media = [];
		6365	}
		6366	mes.extra.media.push({ url: img.image, type: MEDIA_TYPE.IMAGE, title: img.title });
6110	mes.extra.inline_image = img.inline;	6367	mes.extra.inline_image = img.inline;
6111	}	6368	}
6112	}	6369	}

             chat_metadata = chat[0]['chat_metadata'] ?? {};
             chat.shift();
+            chat.forEach(ensureMessageMediaIsArray);
         } else {
             chat_create_date = humanizedDateTime();
+        }

         //Update the swipe_id.
         chat[mesId]['swipe_id'] = newSwipeId;
-        if (chat[mesId].extra) {
+        if (chat[mesId].extra && typeof chat[mesId].extra === 'object') {
-            // if message has memory attached - remove it to allow regen
             delete chat[mesId].extra.memory;
-            // ditto for display text
             delete chat[mesId].extra.display_text;
+            delete chat[mesId].extra.media;
-            delete chat[mesId].extra.image;
-            delete chat[mesId].extra.image_swipes;
-            delete chat[mesId].extra.video;
             delete chat[mesId].extra.inline_image;
+            delete chat[mesId].extra.files;
+            delete chat[mesId].extra.fileLength;
+            delete chat[mesId].extra.generationType;
+            delete chat[mesId].extra.negative;
+            delete chat[mesId].extra.title;
+            delete chat[mesId].extra.append_title;
+        }
         delete chat[mesId].gen_started;
         delete chat[mesId].gen_finished;

         syncSwipeToMes(mesId, chat[mesId]['swipe_id']);
+    }
-    //Deepseek-V3.1
     // Helper function to convert transition to promise
     const transitionPromise = (element, properties) => {
         return new Promise((resolve) => {

         if (run_generate && !is_send_press) {
             is_send_press = true;
             generation = Generate('swipe');
-        } else if (parseInt(chat[mesId]['swipe_id']) !== chat[mesId]['swipes'].length) {
+        } else if (Number(chat[mesId]['swipe_id']) !== chat[mesId]['swipes'].length) {
             saveChatDebounced();
+        }

         const oldScroll = chatElement[0].scrollTop;
         const clone = structuredClone(chat[this_edit_mes_id]);
         clone.send_date = Date.now();
-        clone.mes = $(this).closest('.mes').find('.edit_textarea').val();
+        clone.mes = $(this).closest('.mes').find('.edit_textarea').val().toString();
         if (power_user.trim_spaces) {
             clone.mes = clone.mes.trim();

public/scripts/bookmarks.js+1 -0 Viewed

         // Save group-chat marker
         if (index == 0) {
+            // @ts-ignore
             message.is_group = true;
+        }

public/scripts/chats.js+407 -163 Viewed

     printMessages,
     clearChat,
     refreshSwipeButtons,
+    getMediaIndex,
+    getMediaDisplay,
+    chatElement,
 } from '../script.js';
 import { selected_group } from './group-chats.js';
 import { power_user } from './power-user.js';

     getFileText,
     getFileExtension,
     convertTextToBase64,
+    isSameFile,
+    clamp,
 } from './utils.js';
 import { extension_settings, renderExtensionTemplateAsync, saveMetadataDebounced } from './extensions.js';
 import { POPUP_RESULT, POPUP_TYPE, Popup, callGenericPopup } from './popup.js';

 import { t } from './i18n.js';
 import { humanizedDateTime } from './RossAscends-mods.js';
 import { accountStorage } from './util/AccountStorage.js';
+import { MEDIA_DISPLAY, MEDIA_TYPE, SWIPE_DIRECTION } from './constants.js';
 /**
  * @typedef {Object} FileAttachment

 /**
  * Adds a file attachment to the message.
- * @param {object} message Message object
+ * @param {ChatMessage} message Message object
  * @returns {Promise<void>} A promise that resolves when file is uploaded.
  */
 export async function populateFileAttachment(message, inputId = 'file_form_input') {
     try {
         if (!message) return;
-        if (!message.extra) message.extra = {};
+        if (!message.extra || typeof message.extra !== 'object') message.extra = {};
         const fileInput = document.getElementById(inputId);
         if (!(fileInput instanceof HTMLInputElement)) return;
-        const file = fileInput.files[0];
-        if (!file) return;
+        for (const file of fileInput.files) {
+            const slug = getStringHash(file.name);
-        const slug = getStringHash(file.name);
+            const fileNamePrefix = `${Date.now()}_${slug}`;
-        const fileNamePrefix = `${Date.now()}_${slug}`;
+            const fileBase64 = await getBase64Async(file);
-        const fileBase64 = await getBase64Async(file);
+            let base64Data = fileBase64.split(',')[1];
-        let base64Data = fileBase64.split(',')[1];
+            const extension = getFileExtension(file);
-        const extension = getFileExtension(file);
+            const mediaType = MEDIA_TYPE.getFromMime(file.type);
-        // If file is image
+            if (mediaType) {
-        if (file.type.startsWith('image/')) {
+                const imageUrl = await saveBase64AsFile(base64Data, name2, fileNamePrefix, extension);
-            const imageUrl = await saveBase64AsFile(base64Data, name2, fileNamePrefix, extension);
+                if (!Array.isArray(message.extra.media)) {
-            message.extra.image = imageUrl;
+                    message.extra.media = [];
-            message.extra.inline_image = true;
+                }
-        }
+                message.extra.media.push({ url: imageUrl, type: mediaType });
-        // If file is video
+                message.extra.media_index = message.extra.media.length - 1;
-        else if (file.type.startsWith('video/')) {
+                message.extra.inline_image = true;
-            const videoUrl = await saveBase64AsFile(base64Data, name2, fileNamePrefix, extension);
+            } else {
-            message.extra.video = videoUrl;
+                const uniqueFileName = `${fileNamePrefix}.txt`;
-        } else {
-            const uniqueFileName = `${fileNamePrefix}.txt`;
+                if (isConvertible(file.type)) {
+                    try {
-            if (isConvertible(file.type)) {
+                        const converter = getConverter(file.type);
-                try {
+                        const fileText = await converter(file);
-                    const converter = getConverter(file.type);
+                        base64Data = convertTextToBase64(fileText);
-                    const fileText = await converter(file);
+                    } catch (error) {
-                    base64Data = convertTextToBase64(fileText);
+                        toastr.error(String(error), t`Could not convert file`);
-                } catch (error) {
+                        console.error('Could not convert file', error);
-                    toastr.error(String(error), t`Could not convert file`);
+                    }
-                    console.error('Could not convert file', error);
+                }
-            }
-            const fileUrl = await uploadFileAttachment(uniqueFileName, base64Data);
+                const fileUrl = await uploadFileAttachment(uniqueFileName, base64Data);
-            if (!fileUrl) {
+                if (!fileUrl) {
-                return;
+                    continue;
-            }
+                }
-            message.extra.file = {
+                if (!Array.isArray(message.extra.files)) {
-                url: fileUrl,
+                    message.extra.files = [];
-                size: file.size,
+                }
-                name: file.name,
-                created: Date.now(),
-            };
-        }
+                message.extra.files.push({
+                    url: fileUrl,
+                    size: file.size,
+                    name: file.name,
+                    created: Date.now(),
+                });
+            }
+        }
     } catch (error) {
         console.error('Could not upload file', error);
         toastr.error(t`Either the file is corrupted or its format is not supported.`, t`Could not upload the file`);

  */
 async function validateFile(file) {
     const fileText = await file.text();
-    const isImage = file.type.startsWith('image/');
+    const isMedia = file.type.startsWith('image/') || file.type.startsWith('video/');
     const isBinary = /^[\x00-\x08\x0E-\x1F\x7F-\xFF]*$/.test(fileText);
-    if (!isImage && file.size > fileSizeLimit) {
+    if (!isMedia && file.size > fileSizeLimit) {
         toastr.error(t`File is too big. Maximum size is ${humanFileSize(fileSizeLimit)}.`);
         return false;
+    }
     // If file is binary
-    if (isBinary && !isImage && !isConvertible(file.type)) {
+    if (isBinary && !isMedia && !isConvertible(file.type)) {
         toastr.error(t`Binary files are not supported. Select a text file or image.`);
         return false;
+    }

 /**
  * Displays file information in the message sending form.
- * @param {File} file File object
+ * @param {FileList} fileList File object
  * @returns {Promise<void>}
  */
-async function onFileAttach(file) {
+async function onFileAttach(fileList) {
-    if (!file) return;
+    if (!fileList || fileList.length === 0) return;
-    const isValid = await validateFile(file);
+    for (const file of fileList) {
+        const isValid = await validateFile(file);
-    // If file is binary
+        // If file is binary
-    if (!isValid) {
+        if (!isValid) {
-        $('#file_form').trigger('reset');
+            toastr.warning(t`File ${file.name} is not supported.`);
-        return;
+            $('#file_form').trigger('reset');
+            return;
+        }
+    }
-    $('#file_form .file_name').text(file.name);
+    const name = fileList.length === 1 ? fileList[0].name : t`${fileList.length} files selected`;
-    $('#file_form .file_size').text(humanFileSize(file.size));
+    const size = [...fileList].reduce((acc, file) => acc + file.size, 0);
+    const title = [...fileList].map(x => x.name).join('\n');
+    $('#file_form .file_name').text(name).attr('title', title);
+    $('#file_form .file_size').text(humanFileSize(size)).attr('title', size);
     $('#file_form').removeClass('displayNone');
     // Reset form on chat change (if not on a welcome screen)

+}
 /**
- * Deletes file from message.
+ * Deletes file from a message.
+ * @param {JQuery<HTMLElement>} messageBlock Message block element
  * @param {number} messageId Message ID
+ * @param {number} fileIndex File index
  */
-async function deleteMessageFile(messageId) {
+async function deleteMessageFile(messageBlock, messageId, fileIndex) {
+    if (isNaN(messageId) || isNaN(fileIndex)) {
+        console.warn('Invalid message ID or file index');
+        return;
+    }
     const confirm = await callGenericPopup('Are you sure you want to delete this file?', POPUP_TYPE.CONFIRM);
     if (confirm !== POPUP_RESULT.AFFIRMATIVE) {

     const message = chat[messageId];
-    if (!message?.extra?.file) {
+    if (!Array.isArray(message?.extra?.files)) {
-        console.debug('Message has no file');
+        console.debug('Message has no files');
         return;
+    }
-    const url = message.extra.file.url;
+    if (fileIndex < 0 || fileIndex >= message.extra.files.length) {
+        console.warn('Invalid file index for message');
+        return;
+    }
+    const url = message.extra.files[fileIndex]?.url;
+    message.extra.files.splice(fileIndex, 1);
-    delete message.extra.file;
-    $(`.mes[mesid="${messageId}"] .mes_file_container`).remove();
     await saveChatConditional();
     await deleteFileFromServer(url);
-}
+    appendMediaToMessage(message, messageBlock, false);
+}
 /**
  * Opens file from message in a modal.
  * @param {number} messageId Message ID
+ * @param {number} fileIndex File index
  */
-async function viewMessageFile(messageId) {
+async function viewMessageFile(messageId, fileIndex) {
-    const messageFile = chat[messageId]?.extra?.file;
+    if (isNaN(messageId) || isNaN(fileIndex)) {
+        console.warn('Invalid message ID or file index');
+        return;
+    }
+    const message = chat[messageId];
+    if (!Array.isArray(message?.extra?.files)) {
+        console.debug('Message has no files');
+        return;
+    }
+    if (fileIndex < 0 || fileIndex >= message.extra.files.length) {
+        console.warn('Invalid file index for message');
+        return;
+    }
+    const messageFile = message.extra.files[fileIndex];
     if (!messageFile) {
         console.debug('Message has no file or it is empty');

         .on('change', parseAndUploadEmbed)
         .trigger('click');
-    async function parseAndUploadEmbed(e) {
+    async function parseAndUploadEmbed(/** @type {JQuery.ChangeEvent} */ e) {
-        const file = e.target.files[0];
+        if (!(e.target instanceof HTMLInputElement)) return;
-        if (!file) return;
+        if (!e.target.files.length) return;
-        const isValid = await validateFile(file);
+        for (const file of e.target.files) {
+            const isValid = await validateFile(file);
-        if (!isValid) {
+            if (!isValid) {
-            $('#file_form').trigger('reset');
+                toastr.warning(t`File ${file.name} is not supported.`);
-            return;
+                $('#file_form').trigger('reset');
+                return;
+            }
+        }
         await populateFileAttachment(message, 'embed_file_input');
         await eventSource.emit(event_types.MESSAGE_FILE_EMBEDDED, messageId);
-        appendMediaToMessage(message, messageBlock);
+        appendMediaToMessage(message, messageBlock, false);
         await saveChatConditional();
+    }
+}
 /**
  * Appends file content to the message text.
- * @param {object} message Message object
+ * @param {ChatMessage} message Message object
  * @param {string} messageText Message text
  * @returns {Promise<string>} Message text with file content appended.
  */
 export async function appendFileContent(message, messageText) {
-    if (message.extra?.file) {
+    if (!message || !message.extra || typeof message.extra !== 'object') {
-        const fileText = message.extra.file.text || (await getFileAttachment(message.extra.file.url));
+        return messageText;
+    }
-        if (fileText) {
+    if (message.extra.fileLength >= 0) {
-            const fileWrapped = `${fileText}\n\n`;
+        delete message.extra.fileLength;
-            message.extra.fileLength = fileWrapped.length;
+    }
-            messageText = fileWrapped + messageText;
+    if (Array.isArray(message.extra?.files) && message.extra.files.length > 0) {
+        const fileTexts = [];
+        for (const file of message.extra.files) {
+            const fileText = file.text || (await getFileAttachment(file.url));
+            if (fileText) {
+                fileTexts.push(fileText);
+            }
+        }
+        const mergedFileTexts = fileTexts.join('\n\n') + '\n\n';
+        message.extra.fileLength = mergedFileTexts.length;
+        return mergedFileTexts + messageText;
+    }
     return messageText;
+}

     return !power_user.forbid_external_media;
+}
-function expandMessageImage(event) {
+/**
-    const mesBlock = $(event.currentTarget).closest('.mes');
+ * Expands the message media attachment.
-    const mesId = mesBlock.attr('mesid');
+ * @param {number} messageId Message ID
-    const message = chat[mesId];
+ * @param {number} mediaIndex Media index
-    const imgSrc = message?.extra?.image;
+ * @returns {HTMLElement} Enlarged media element
-    const title = message?.extra?.title;
+ */
+function expandMessageMedia(messageId, mediaIndex) {
+    if (isNaN(messageId) || isNaN(mediaIndex)) {
+        console.warn('Invalid message ID or media index');
+        return;
+    }
+    /** @type {ChatMessage} */
+    const message = chat[messageId];
-    if (!imgSrc) {
+    if (!Array.isArray(message?.extra?.media) || message.extra.media.length === 0) {
+        console.warn('Message has no media to expand');
         return;
+    }
-    const img = document.createElement('img');
+    const mediaAttachment = message.extra.media[mediaIndex];
-    img.classList.add('img_enlarged');
+    const title = mediaAttachment.title || message.extra.title || '';
-    img.src = imgSrc;
-    const imgHolder = document.createElement('div');
-    imgHolder.classList.add('img_enlarged_holder');
-    imgHolder.append(img);
-    const imgContainer = $('<div><pre><code class="img_enlarged_title"></code></pre></div>');
-    imgContainer.prepend(imgHolder);
-    imgContainer.addClass('img_enlarged_container');
-    const codeTitle = imgContainer.find('.img_enlarged_title');
+    if (!mediaAttachment) {
-    codeTitle.addClass('txt').text(title);
+        return;
-    const titleEmpty = !title || title.trim().length === 0;
+    }
-    imgContainer.find('pre').toggle(!titleEmpty);
-    addCopyToCodeBlocks(imgContainer);
-    const popup = new Popup(imgContainer, POPUP_TYPE.DISPLAY, '', { large: true, transparent: true });
+    /**
+     * Gets the media element based on its type.
+     * @returns {HTMLElement} Media element
+     */
+    function getMediaElement() {
+        function getImageElement() {
+            const img = document.createElement('img');
+            img.src = mediaAttachment.url;
+            img.classList.add('img_enlarged');
+            return img;
+        }
-    popup.dlg.style.width = 'unset';
+        function getVideoElement() {
-    popup.dlg.style.height = 'unset';
+            const video = document.createElement('video');
+            video.src = mediaAttachment.url;
+            video.classList.add('img_enlarged');
+            video.controls = true;
+            video.autoplay = true;
+            return video;
+        }
-    img.addEventListener('click', event => {
+        switch (mediaAttachment.type) {
-        const shouldZoom = !img.classList.contains('zoomed');
+            case MEDIA_TYPE.IMAGE:
-        img.classList.toggle('zoomed', shouldZoom);
+                return getImageElement();
-        event.stopPropagation();
+            case MEDIA_TYPE.VIDEO:
-    });
+                return getVideoElement();
-    codeTitle[0]?.addEventListener('click', event => {
+        }
+        console.warn('Unsupported media type for enlargement:', mediaAttachment.type);
+        return getImageElement();
+    }
+    const mediaElement = getMediaElement();
+    const mediaHolder = document.createElement('div');
+    mediaHolder.classList.add('img_enlarged_holder');
+    mediaHolder.append(mediaElement);
+    const mediaContainer = document.createElement('div');
+    mediaContainer.classList.add('img_enlarged_container');
+    mediaContainer.append(mediaHolder);
+    mediaElement.addEventListener('click', event => {
+        const shouldZoom = !mediaElement.classList.contains('zoomed') && mediaElement.nodeName === 'IMG';
+        mediaElement.classList.toggle('zoomed', shouldZoom);
         event.stopPropagation();
     });
-    popup.dlg.addEventListener('click', event => {
+    if (title.trim().length > 0) {
+        const mediaTitlePre = document.createElement('pre');
+        const mediaTitleCode = document.createElement('code');
+        mediaTitleCode.classList.add('img_enlarged_title', 'txt');
+        mediaTitleCode.textContent = title;
+        mediaTitlePre.append(mediaTitleCode);
+        mediaTitleCode.addEventListener('click', event => {
+            event.stopPropagation();
+        });
+        mediaContainer.append(mediaTitlePre);
+        addCopyToCodeBlocks(mediaContainer);
+    }
+    const popup = new Popup(mediaContainer, POPUP_TYPE.DISPLAY, '', { large: true, transparent: true });
+    popup.dlg.style.width = 'unset';
+    popup.dlg.style.height = 'unset';
+    popup.dlg.addEventListener('click', () => {
         popup.completeCancelled();
     });
     popup.show();
-    return img;
+    return mediaElement;
+}
-function expandAndZoomMessageImage(event) {
+/**
-    expandMessageImage(event).click();
+ * Deletes an image from a message.
-}
+ * @param {number} messageId Message ID
+ * @param {number} mediaIndex Image index
+ * @param {JQuery<HTMLElement>} messageBlock Message block element
+ */
+async function deleteMessageMedia(messageId, mediaIndex, messageBlock) {
+    if (isNaN(messageId) || isNaN(mediaIndex)) {
+        console.warn('Invalid message ID or media index');
+        return;
+    }
-async function deleteMessageImage() {
+    const value = await Popup.show.confirm(t`Delete media from message?`, t`This action can't be undone.`, {
-    const value = await callGenericPopup('<h3>Delete image from message?<br>This action can\'t be undone.</h3>', POPUP_TYPE.TEXT, '', {
         okButton: t`Delete one`,
+        cancelButton: false,
         customButtons: [
+            {
                 text: t`Delete all`,

         return;
+    }
-    const mesBlock = $(this).closest('.mes');
+    /** @type {ChatMessage} */
-    const mesId = mesBlock.attr('mesid');
+    const message = chat[messageId];
-    const message = chat[mesId];
-    let isLastImage = true;
+    if (!Array.isArray(message?.extra?.media)) {
+        console.debug('Message has no media');
+        return;
+    }
-    if (Array.isArray(message.extra.image_swipes)) {
+    if (mediaIndex < 0 || mediaIndex >= message.extra.media.length) {
-        const indexOf = message.extra.image_swipes.indexOf(message.extra.image);
+        console.warn('Invalid media index for message');
-        if (indexOf > -1) {
+        return;
-            message.extra.image_swipes.splice(indexOf, 1);
+    }
-            isLastImage = message.extra.image_swipes.length === 0;
-            if (!isLastImage) {
+    message.extra.media.splice(mediaIndex, 1);
-                const newIndex = Math.min(indexOf, message.extra.image_swipes.length - 1);
-                message.extra.image = message.extra.image_swipes[newIndex];
+    if (message.extra.media_index === mediaIndex) {
-            }
+        const newIndex = mediaIndex > 0 ? mediaIndex - 1 : 0;
-        }
+        message.extra.media_index = clamp(newIndex, 0, message.extra.media.length - 1);
+    }
-    if (isLastImage || value === POPUP_RESULT.CUSTOM1) {
+    if (value === POPUP_RESULT.CUSTOM1) {
-        delete message.extra.image;
+        delete message.extra.media;
         delete message.extra.inline_image;
         delete message.extra.title;
         delete message.extra.append_title;
-        delete message.extra.image_swipes;
-        mesBlock.find('.mes_img_container').removeClass('img_extra');
-        mesBlock.find('.mes_img').attr('src', '');
-    } else {
-        appendMediaToMessage(message, mesBlock);
+    }
     await saveChatConditional();
+    appendMediaToMessage(message, messageBlock, false);
+}
-async function deleteMessageVideo() {
+/**
-    const confirm = await Popup.show.confirm(t`Delete video from message?`, t`This action can't be undone.`);
+ * Switches the media display mode for a message.
-    if (!confirm) {
+ * @param {number} messageId Message ID
+ * @param {JQuery<HTMLElement>} messageBlock Message block element
+ * @param {MEDIA_DISPLAY} targetDisplay Target display mode
+ */
+async function switchMessageMediaDisplay(messageId, messageBlock, targetDisplay) {
+    if (isNaN(messageId)) {
+        console.warn('Invalid message ID');
         return;
+    }
-    const mesBlock = $(this).closest('.mes');
+    /** @type {ChatMessage} */
-    const mesId = mesBlock.attr('mesid');
+    const message = chat[messageId];
-    const message = chat[mesId];
-    if (!message?.extra?.video) {
+    if (!message) {
-        console.warn('Message has no video or it is empty');
+        console.warn('Message not found for ID', messageId);
         return;
+    }
-    delete message.extra.video;
+    if (!message.extra || typeof message.extra !== 'object') {
-    mesBlock.find('.mes_video_container').remove();
+        message.extra = {};
+    }
+    message.extra.media_display = targetDisplay;
     await saveChatConditional();
+    appendMediaToMessage(message, messageBlock, false);
+}
 /**

     });
+}
+/**
+ * Switches an image to the next or previous one in the swipe list.
+ * @param {number} messageId Message ID
+ * @param {JQuery<HTMLElement>} element Message element
+ * @param {string} direction Swipe direction
+ * @returns {Promise<void>}
+ */
+async function onImageSwiped(messageId, element, direction) {
+    const animationClass = 'fa-fade';
+    const messageMedia = element.find('.mes_img, .mes_video');
+    // Current image is already animating
+    if (messageMedia.hasClass(animationClass)) {
+        return;
+    }
+    const message = chat[messageId];
+    const media = message?.extra?.media;
+    if (!message || !Array.isArray(media) || media.length === 0) {
+        console.warn('No media found in the message');
+        return;
+    }
+    const currentIndex = getMediaIndex(message);
+    const mediaDisplay = getMediaDisplay(message);
+    if (mediaDisplay !== MEDIA_DISPLAY.GALLERY) {
+        console.warn('Image swiping is only supported for gallery media display');
+        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;
+        message.extra.media_index = newIndex;
+    }
+    // Switch to next image or generate a new one if at the end
+    if (direction === SWIPE_DIRECTION.RIGHT) {
+        const newIndex = currentIndex === media.length - 1 ? 0 : currentIndex + 1;
+        message.extra.media_index = newIndex >= media.length ? 0 : newIndex;
+    }
+    // Show a message that swipe right no longer automatically generates an image
+    if (media.length > 0 && direction === SWIPE_DIRECTION.RIGHT && message.extra.media_index === 0) {
+        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');
+        }
+    }
+    await saveChatConditional();
+    await eventSource.emit(event_types.IMAGE_SWIPED, { message, element, direction });
+    appendMediaToMessage(message, element);
+}
 export function initChatUtilities() {
     $(document).on('click', '.mes_hide', async function () {
         const messageBlock = $(this).closest('.mes');

     $(document).on('click', '.mes_file_delete', async function () {
         const messageBlock = $(this).closest('.mes');
         const messageId = Number(messageBlock.attr('mesid'));
-        await deleteMessageFile(messageId);
+        const fileBlock = $(this).closest('.mes_file_container');
+        const fileIndex = Number(fileBlock.attr('data-index'));
+        await deleteMessageFile(messageBlock, messageId, fileIndex);
     });
     $(document).on('click', '.mes_file_open', async function () {
         const messageBlock = $(this).closest('.mes');
         const messageId = Number(messageBlock.attr('mesid'));
-        await viewMessageFile(messageId);
+        const fileBlock = $(this).closest('.mes_file_container');
+        const fileIndex = Number(fileBlock.attr('data-index'));
+        await viewMessageFile(messageId, fileIndex);
     });
     $(document).on('click', '.assistant_note_export', async function () {

         openGlobalStylesPreferenceDialog();
     });
-    $(document).on('click', '.mes_img', expandMessageImage);
+    /**
-    $(document).on('click', '.mes_img_enlarge', expandAndZoomMessageImage);
+     * Returns information about the closest media container.
-    $(document).on('click', '.mes_img_delete', deleteMessageImage);
+     * @returns {MediaContainerInfo} Information about the media container
-    $(document).on('click', '.mes_video_delete', deleteMessageVideo);
+     * @typedef {object} MediaContainerInfo
+     * @property {JQuery<HTMLElement>} messageBlock The closest message block
+     * @property {number} messageId The message ID
+     * @property {JQuery<HTMLElement>} mediaBlock The closest media container block
+     * @property {number} mediaIndex The media index within the message
+     */
+    function getMediaContainerInfo(containerClass = '.mes_media_container') {
+        const messageBlock = $(this).closest('.mes');
+        const messageId = Number(messageBlock.attr('mesid'));
+        const mediaBlock = $(this).closest(containerClass);
+        const mediaIndex = Number(mediaBlock.attr('data-index'));
+        return { messageBlock, messageId, mediaBlock, mediaIndex };
+    }
+    chatElement.on('click', '.mes_img', async function () {
+        const { messageId, mediaIndex } = getMediaContainerInfo.call(this);
+        expandMessageMedia(messageId, mediaIndex);
+    });
+    chatElement.on('click', '.mes_media_enlarge', async function () {
+        const { messageId, mediaIndex } = getMediaContainerInfo.call(this);
+        expandMessageMedia(messageId, mediaIndex).click();
+    });
+    chatElement.on('click', '.mes_media_delete', async function () {
+        const { messageId, mediaIndex, messageBlock } = getMediaContainerInfo.call(this);
+        await deleteMessageMedia(messageId, mediaIndex, messageBlock);
+    });
+    chatElement.on('click', '.mes_media_list', async function () {
+        const { messageId, messageBlock } = getMediaContainerInfo.call(this);
+        await switchMessageMediaDisplay(messageId, messageBlock, MEDIA_DISPLAY.GALLERY);
+    });
+    chatElement.on('click', '.mes_media_gallery', async function () {
+        const { messageId, messageBlock } = getMediaContainerInfo.call(this);
+        await switchMessageMediaDisplay(messageId, messageBlock, MEDIA_DISPLAY.LIST);
+    });
+    chatElement.on('click', '.mes_img_swipe_left', async function () {
+        const { messageId, messageBlock } = getMediaContainerInfo.call(this);
+        await onImageSwiped(messageId, messageBlock, SWIPE_DIRECTION.LEFT);
+    });
+    chatElement.on('click', '.mes_img_swipe_right', async function () {
+        const { messageId, messageBlock } = getMediaContainerInfo.call(this);
+        await onImageSwiped(messageId, messageBlock, SWIPE_DIRECTION.RIGHT);
+    });
     $('#file_form_input').on('change', async () => {
         const fileInput = document.getElementById('file_form_input');
         if (!(fileInput instanceof HTMLInputElement)) return;
-        const file = fileInput.files[0];
+        await onFileAttach(fileInput.files);
-        await onFileAttach(file);
     });
     $('#file_form').on('reset', function () {
         $('#file_form').addClass('displayNone');

         event.preventDefault();
         event.stopPropagation();
+        await handleFileAttach(Array.from(event.clipboardData.files));
+    });
+    new DragAndDropHandler('#form_sheld', async (files) => {
+        await handleFileAttach(files);
+    });
+    /**
+     * Common handler for file attachments.
+     * @param {File[]} files Files to attach
+     * @returns {Promise<void>}
+     */
+    async function handleFileAttach(files) {
         const fileInput = document.getElementById('file_form_input');
         if (!(fileInput instanceof HTMLInputElement)) return;
         // Workaround for Firefox: Use a DataTransfer object to indirectly set fileInput.files
         const dataTransfer = new DataTransfer();
-        for (let i = 0; i < event.clipboardData.files.length; i++) {
+        for (let i = 0; i < files.length; i++) {
-            dataTransfer.items.add(event.clipboardData.files[i]);
+            dataTransfer.items.add(files[i]);
+        }
+        // Preserve existing non-duplicate files in the input
+        for (const file of fileInput.files) {
+            if (!Array.from(dataTransfer.files).some(f => isSameFile(f, file))) {
+                dataTransfer.items.add(file);
+            }
+        }
         fileInput.files = dataTransfer.files;
-        await onFileAttach(fileInput.files[0]);
+        await onFileAttach(fileInput.files);
-    });
+    }
     eventSource.on(event_types.CHAT_CHANGED, checkForCreatorNotesStyles);
+}

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

 ];
 /**
+ * @enum {string}
+ * @readonly
+ */
+export const MEDIA_DISPLAY = {
+    LIST: 'list',
+    GALLERY: 'gallery',
+};
+/**
+ * @readonly
+ */
+export const MEDIA_TYPE = {
+    getFromMime: (/** @type {string} */ mimeType) => {
+        if (mimeType.startsWith('image/')) {
+            return MEDIA_TYPE.IMAGE;
+        }
+        if (mimeType.startsWith('video/')) {
+            return MEDIA_TYPE.VIDEO;
+        }
+        return null;
+    },
+    IMAGE: 'image',
+    VIDEO: 'video',
+};
+/**
  * @type {{readonly LEFT: 'left', readonly RIGHT: 'right'}}
  */
 export const SWIPE_DIRECTION = {

public/scripts/extensions/caption/index.js+65 -25 Viewed

 import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
 import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
 import { callGenericPopup, Popup, POPUP_TYPE } from '../../popup.js';
+import { MEDIA_DISPLAY, MEDIA_TYPE } from '../../constants.js';
 export { MODULE_NAME };
 const MODULE_NAME = 'caption';

 /**
  * Appends caption to an existing message.
- * @param {Object} data Message data
+ * @param {ChatMessage} message Message data
+ * @param {number} mediaIndex Index of the image to caption
  * @returns {Promise<void>}
  */
-async function captionExistingMessage(data) {
+async function captionExistingMessage(message, mediaIndex) {
-    if (!(data?.extra?.image)) {
+    if (!Array.isArray(message?.extra?.media) || message.extra.media.length === 0) {
         return;
+    }
-    const imageData = await fetch(data.extra.image);
+    if (mediaIndex === undefined || isNaN(mediaIndex) || mediaIndex < 0 || mediaIndex >= message.extra.media.length) {
+        mediaIndex = 0;
+    }
+    const mediaAttachment = message.extra.media[mediaIndex];
+    if (!mediaAttachment || !mediaAttachment.url || mediaAttachment.type === MEDIA_TYPE.VIDEO) {
+        return;
+    }
+    const imageData = await fetch(mediaAttachment.url);
     const blob = await imageData.blob();
     const type = imageData.headers.get('Content-Type');
     const file = new File([blob], 'image.png', { type });

@@ -140,17 +152,17 @@ async function captionExistingMessage(data) {
140		152
141	const wrappedCaption = await wrapCaptionTemplate(caption);	153	const wrappedCaption = await wrapCaptionTemplate(caption);
142		154
143	const messageText = String(data.mes).trim();	155	const messageText = String(message.mes).trim();
144		156
145	if (!messageText) {	157	if (!messageText) {
146	data.extra.inline_image = false;	158	message.extra.inline_image = false;
147	data.mes = wrappedCaption;	159	message.mes = wrappedCaption;
148	data.extra.title = wrappedCaption;	160	mediaAttachment.title = wrappedCaption;
149	}	161	}
150	else {	162	else {
151	data.extra.inline_image = true;	163	message.extra.inline_image = true;
152	data.extra.append_title = true;	164	mediaAttachment.append_title = true;
153	data.extra.title = wrappedCaption;	165	mediaAttachment.title = wrappedCaption;
154	}	166	}
155	}	167	}
156		168

     const messageText = await wrapCaptionTemplate(caption);
     const context = getContext();
+    /** @type {MediaAttachment} */
+    const mediaAttachment = {
+        url: image,
+        type: MEDIA_TYPE.IMAGE,
+        title: messageText,
+    };
+    /** @type {ChatMessage} */
     const message = {
         name: context.name1,
         is_user: true,
         send_date: getMessageTimeStamp(),
         mes: messageText,
         extra: {
-            image: image,
+            media: [mediaAttachment],
-            title: messageText,
+            media_display: MEDIA_DISPLAY.GALLERY,
+            media_index: 0,
             inline_image: !!extension_settings.caption.show_in_chat,
         },
     };

  */
 async function captionCommandCallback(args, prompt) {
     const quiet = isTrueBoolean(args?.quiet);
-    const mesId = args?.mesId ?? args?.id;
+    const messageId = args?.mesId ?? args?.id;
+    const index = Number(args?.index ?? 0);
-    if (!isNaN(Number(mesId))) {
+    if (!isNaN(Number(messageId))) {
-        const message = getContext().chat[mesId];
+        /** @type {ChatMessage} */
-        if (message?.extra?.image) {
+        const message = getContext().chat[messageId];
+        if (Array.isArray(message?.extra?.media) && message.extra.media.length > 0) {
             try {
-                const fetchResult = await fetch(message.extra.image);
+                const mediaAttachment = message.extra.media[index] || message.extra.media[0];
+                if (!mediaAttachment || !mediaAttachment.url) {
+                    toastr.error('The specified message does not contain an image.');
+                    return '';
+                }
+                if (mediaAttachment.type === MEDIA_TYPE.VIDEO) {
+                    toastr.error('The specified media is a video. Captioning videos is not supported.');
+                    return '';
+                }
+                const fetchResult = await fetch(mediaAttachment.url);
                 const blob = await fetchResult.blob();
                 const file = new File([blob], 'image.jpg', { type: blob.type });
                 return await getCaptionForFile(file, prompt, quiet);

         saveSettingsDebounced();
     });
-    const onMessageEvent = async (index) => {
+    const onMessageEvent = async (messageId) => {
         if (!extension_settings.caption.auto_mode) {
             return;
+        }
-        const data = getContext().chat[index];
+        const message = getContext().chat[messageId];
-        await captionExistingMessage(data);
+        await captionExistingMessage(message, 0);
     };
     eventSource.on(event_types.MESSAGE_SENT, onMessageEvent);

     $(document).on('click', '.mes_img_caption', async function () {
         const animationClass = 'fa-fade';
         const messageBlock = $(this).closest('.mes');
-        const messageImg = messageBlock.find('.mes_img');
+        const imageBlock = $(this).closest('.mes_img_container');
+        const messageImg = imageBlock.find('.mes_img');
         if (messageImg.hasClass(animationClass)) return;
         messageImg.addClass(animationClass);
         try {
-            const index = Number(messageBlock.attr('mesid'));
+            const messageId = Number(messageBlock.attr('mesid'));
-            const data = getContext().chat[index];
+            const imageIndex = Number(imageBlock.attr('data-index'));
-            await captionExistingMessage(data);
+            const data = getContext().chat[messageId];
+            await captionExistingMessage(data, imageIndex);
             appendMediaToMessage(data, messageBlock, false);
             await saveChatConditional();
         } catch (e) {

                 typeList: [ARGUMENT_TYPE.NUMBER],
                 enumProvider: commonEnumProviders.messages(),
             }),
+            SlashCommandNamedArgument.fromProps({
+                name: 'index',
+                description: 'index of the image in the message to caption (starting from 0)',
+                typeList: [ARGUMENT_TYPE.NUMBER],
+                enumProvider: commonEnumProviders.messageMedia(),
+            }),
         ],
         unnamedArgumentList: [
             new SlashCommandArgument(

public/scripts/extensions/stable-diffusion/index.js+115 -167 Viewed

     SlashCommandArgument,
     SlashCommandNamedArgument,
 } from '../../slash-commands/SlashCommandArgument.js';
-import { debounce_timeout, VIDEO_EXTENSIONS } from '../../constants.js';
+import { debounce_timeout, MEDIA_DISPLAY, MEDIA_TYPE, 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';

         extension_settings.sd.styles = defaultStyles;
+    }
+    // Preserve an original seed if exists
+    if (extension_settings.sd.original_seed >= 0) {
+        extension_settings.sd.seed = extension_settings.sd.original_seed;
+        delete extension_settings.sd.original_seed;
+    }
     $('#sd_source').val(extension_settings.sd.source);
     $('#sd_scale').val(extension_settings.sd.scale).trigger('input');
     $('#sd_steps').val(extension_settings.sd.steps).trigger('input');

     const name = context.groupId ? systemUserName : context.name2;
     const template = extension_settings.sd.prompts[generationMode.MESSAGE] || '{{prompt}}';
     const messageText = substituteParamsExtended(template, { char: name, prompt: prompt, prefixedPrompt: prefixedPrompt });
+    const mediaType = isVideo(format) ? MEDIA_TYPE.VIDEO : MEDIA_TYPE.IMAGE;
+    /** @type {MediaAttachment} */
+    const mediaAttachment = {
+        url: image,
+        type: mediaType,
+        title: prompt,
+        generation_type: generationType,
+        negative: additionalNegativePrefix,
+    };
+    /** @type {ChatMessage} */
     const message = {
         name: name,
         is_user: false,

         send_date: getMessageTimeStamp(),
         mes: messageText,
         extra: {
-            image: image,
+            media: [mediaAttachment],
-            title: prompt,
+            media_display: MEDIA_DISPLAY.GALLERY,
-            generationType: generationType,
+            media_index: 0,
-            negative: additionalNegativePrefix,
             inline_image: false,
-            image_swipes: [image],
         },
     };
-    if (isVideo(format)) {
-        message.extra.video = image;
-        delete message.extra.image;
-        delete message.extra.image_swipes;
-        delete message.extra.inline_image;
-    }
     context.chat.push(message);
     const messageId = context.chat.length - 1;
     await eventSource.emit(event_types.MESSAGE_RECEIVED, messageId, 'extension');

 let buttonAbortController = null;
+/**
+ * "Paintbrush" button handler to generate a new image for a message.
+ * @param {JQuery.ClickEvent} e The click event object.
+ * @returns {Promise<void>} A promise that resolves when the image generation process is complete.
+ */
 async function sdMessageButton(e) {
+    /**
+     * 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('fa-paintbrush', !isBusy);
+        $icon.toggleClass(classes.idle, !isBusy);
-        $icon.toggleClass(busyClass, isBusy);
+        $icon.toggleClass(classes.busy, isBusy);
+    }
-    const busyClass = 'fa-hourglass';
+    const classes = { busy: 'fa-hourglass', idle: 'fa-paintbrush' };
     const context = getContext();
     const $icon = $(e.currentTarget);
-    const $mes = $icon.closest('.mes');
-    const message_id = $mes.attr('mesid');
-    const message = context.chat[message_id];
-    const characterFileName = context.groupId
-        ? context.groups[Object.keys(context.groups).filter(x => context.groups[x].id === context.groupId)[0]]?.id?.toString()
-        : context.characters[context.characterId]?.name;
-    const messageText = message?.mes;
-    const hasSavedImage = message?.extra?.image && message?.extra?.title;
-    const hasSavedNegative = message?.extra?.negative;
-    if ($icon.hasClass(busyClass)) {
+    if ($icon.hasClass(classes.busy)) {
         buttonAbortController?.abort('Aborted by user');
         console.log('Previous image is still being generated...');
         return;
+    }
-    let dimensions = null;
+    const messageElement = $icon.closest('.mes');
-    buttonAbortController = new AbortController();
+    const messageId = Number(messageElement.attr('mesid'));
-    try {
+    /** @type {ChatMessage} */
-        setBusyIcon(true);
+    const message = context.chat[messageId];
-        if (hasSavedImage) {
-            const prompt = await refinePrompt(message.extra.title, false);
-            const negative = hasSavedNegative ? await refinePrompt(message.extra.negative, true) : '';
-            message.extra.title = prompt;
-            const generationType = message?.extra?.generationType ?? generationMode.FREE;
-            console.log('Regenerating an image, using existing prompt:', prompt);
-            dimensions = setTypeSpecificDimensions(generationType);
-            await sendGenerationRequest(generationType, prompt, negative, characterFileName, saveGeneratedImage, initiators.action, buttonAbortController?.signal);
-        }
-        else {
-            console.log('doing /sd raw last');
-            await generatePicture(initiators.action, {}, 'raw_last', messageText, saveGeneratedImage);
-        }
-    }
-    catch (error) {
-        console.error('Could not generate inline image: ', error);
-    }
-    finally {
-        setBusyIcon(false);
-        if (dimensions) {
+    if (!message) {
-            restoreOriginalDimensions(dimensions);
+        console.error('Could not find message for SD generation button');
-        }
+        return;
+    }
-    function saveGeneratedImage(prompt, image, generationType, negative, _initiator, _prefixedPrompt, format) {
+    if (!message.extra || typeof message.extra !== 'object') {
-        // Some message sources may not create the extra object
+        message.extra = {};
-        if (typeof message.extra !== 'object' || message.extra === null) {
+    }
-            message.extra = {};
-        }
-        // Add image to the swipe list if it's not already there
-        if (!Array.isArray(message.extra.image_swipes)) {
-            message.extra.image_swipes = [];
-        }
-        const swipes = message.extra.image_swipes;
-        if (message.extra.image && !swipes.includes(message.extra.image)) {
+    if (!Array.isArray(message.extra.media)) {
-            swipes.push(message.extra.image);
+        message.extra.media = [];
-        }
+    }
-        const isVideoFormat = isVideo(format);
+    /** @type {MediaAttachment} */
+    const selectedMedia = message.extra.media.length > 0
+        ? (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 (isVideoFormat) {
+    buttonAbortController = new AbortController();
-            message.extra.video = image;
+    const newMediaAttachment = await generateMediaSwipe(
-        } else {
+        selectedMedia,
-            swipes.push(image);
+        message,
+        () => setBusyIcon(true),
+        () => setBusyIcon(false),
+        buttonAbortController,
+    );
+    if (!newMediaAttachment) {
+        return;
+    }
-            // If already contains an image and it's not inline - leave it as is
+    // If already contains an image and it's not inline - leave it as is
-            message.extra.inline_image = !(message.extra.image && !message.extra.inline_image);
+    message.extra.inline_image = !(message.extra.media.length && !message.extra.inline_image);
-            message.extra.image = image;
+    message.extra.media.push(newMediaAttachment);
-        }
+    message.extra.media_index = message.extra.media.length - 1;
-        message.extra.title = prompt;
+    appendMediaToMessage(message, messageElement, false);
-        message.extra.generationType = generationType;
-        message.extra.negative = negative;
-        appendMediaToMessage(message, $mes);
-        return context.saveChat();
+    await context.saveChat();
-    }
+}
 async function onCharacterPromptShareInput() {

+}
 /**
- * Switches an image to the next or previous one in the swipe list.
+ * Generates a new media attachment based on the provided media attachment metadata.
- * @param {object} args Event arguments
+ * @param {MediaAttachment} mediaAttachment - The media attachment metadata.
- * @param {any} args.message Message object
+ * @param {ChatMessage} message - The chat message containing the media attachment.
- * @param {JQuery<HTMLElement>} args.element Message element
+ * @param {Function} onStart - Callback function to be called when generation starts.
- * @param {string} args.direction Swipe direction
+ * @param {Function} onComplete - Callback function to be called when generation completes.
- * @returns {Promise<void>}
+ * @param {AbortController} abortController - An AbortController to handle cancellation of the generation process.
+ * @returns {Promise<MediaAttachment|null>} - A promise that resolves to the newly generated media attachment, or null if generation failed or was aborted.
  */
-async function onImageSwiped({ message, element, direction }) {
+async function generateMediaSwipe(mediaAttachment, message, onStart, onComplete, abortController = new AbortController()) {
-    const context = getContext();
+    const stopButton = document.getElementById('sd_stop_gen');
-    const animationClass = 'fa-fade';
+    const stopListener = () => abortController.abort('Aborted by user');
-    const messageImg = element.find('.mes_img');
+    const generationType = mediaAttachment.generation_type ?? message?.extra?.generationType ?? generationMode.FREE;
+    const dimensions = setTypeSpecificDimensions(generationType);
-    // Current image is already animating
+    extension_settings.sd.original_seed = extension_settings.sd.seed;
-    if (messageImg.hasClass(animationClass)) {
+    extension_settings.sd.seed = extension_settings.sd.seed >= 0 ? Math.round(Math.random() * (Math.pow(2, 32) - 1)) : -1;
-        return;
-    }
-    const swipes = message?.extra?.image_swipes;
-    if (!Array.isArray(swipes)) {
-        console.warn('No image swipes found in the message');
-        return;
-    }
-    const currentIndex = swipes.indexOf(message.extra.image);
-    if (currentIndex === -1) {
+    /** @type {MediaAttachment} */
-        console.warn('Current image not found in the swipes');
+    const result = {
-        return;
+        url: '',
-    }
+        type: MEDIA_TYPE.IMAGE,
+    };
-    // Switch to previous image or wrap around if at the beginning
+    try {
-    if (direction === 'left') {
+        $(stopButton).show();
-        const newIndex = currentIndex === 0 ? swipes.length - 1 : currentIndex - 1;
+        eventSource.once(CUSTOM_STOP_EVENT, stopListener);
-        message.extra.image = swipes[newIndex];
+        const callback = (_a, _b, _c, _d, _e, _f, format) => { result.type = isVideo(format) ? MEDIA_TYPE.VIDEO : MEDIA_TYPE.IMAGE; };
+        const savedPrompt = mediaAttachment.title ?? message.extra.title ?? '';
+        const prompt = await refinePrompt(savedPrompt, false);
+        const savedNegative = mediaAttachment.negative ?? message.extra.negative ?? '';
+        const negative = savedNegative ? await refinePrompt(savedNegative, true) : '';
-        // Update the image in the message
+        const context = getContext();
-        appendMediaToMessage(message, element, false);
+        const characterName = context.groupId
+            ? context.groups[Object.keys(context.groups).filter(x => context.groups[x].id === context.groupId)[0]]?.id?.toString()
+            : context.characters[context.characterId]?.name;
+        onStart();
+        result.url = await sendGenerationRequest(generationType, prompt, negative, characterName, callback, initiators.swipe, abortController.signal);
+        result.generation_type = generationType;
+        result.title = prompt;
+        result.negative = negative;
+    } finally {
+        onComplete();
+        $(stopButton).hide();
+        eventSource.removeListener(CUSTOM_STOP_EVENT, stopListener);
+        restoreOriginalDimensions(dimensions);
+        extension_settings.sd.seed = extension_settings.sd.original_seed;
+        delete extension_settings.sd.original_seed;
+    }
-    // Switch to next image or generate a new one if at the end
+    if (!result.url) {
-    if (direction === 'right') {
+        return null;
-        const newIndex = currentIndex === swipes.length - 1 ? swipes.length : currentIndex + 1;
-        if (newIndex === swipes.length) {
-            const abortController = new AbortController();
-            const swipeControls = element.find('.mes_img_swipes');
-            const stopButton = document.getElementById('sd_stop_gen');
-            const stopListener = () => abortController.abort('Aborted by user');
-            const generationType = message?.extra?.generationType ?? generationMode.FREE;
-            const dimensions = setTypeSpecificDimensions(generationType);
-            const originalSeed = extension_settings.sd.seed;
-            extension_settings.sd.seed = extension_settings.sd.seed >= 0 ? Math.round(Math.random() * (Math.pow(2, 32) - 1)) : -1;
-            let imagePath = '';
-            try {
-                $(stopButton).show();
-                eventSource.once(CUSTOM_STOP_EVENT, stopListener);
-                const callback = () => { };
-                const hasNegative = message.extra.negative;
-                const prompt = await refinePrompt(message.extra.title, false);
-                const negativePromptPrefix = hasNegative ? await refinePrompt(message.extra.negative, true) : '';
-                message.extra.title = prompt;
-                const characterName = context.groupId
-                    ? context.groups[Object.keys(context.groups).filter(x => context.groups[x].id === context.groupId)[0]]?.id?.toString()
-                    : context.characters[context.characterId]?.name;
-                messageImg.addClass(animationClass);
-                swipeControls.hide();
-                imagePath = await sendGenerationRequest(generationType, prompt, negativePromptPrefix, characterName, callback, initiators.swipe, abortController.signal);
-            } finally {
-                $(stopButton).hide();
-                messageImg.removeClass(animationClass);
-                swipeControls.show();
-                eventSource.removeListener(CUSTOM_STOP_EVENT, stopListener);
-                restoreOriginalDimensions(dimensions);
-                extension_settings.sd.seed = originalSeed;
-            }
-            if (!imagePath) {
-                return;
-            }
-            swipes.push(imagePath);
-        }
-        message.extra.image = swipes[newIndex];
-        appendMediaToMessage(message, element, false);
+    }
-    await context.saveChat();
+    return result;
+}
 /**

+        }
     });
-    eventSource.on(event_types.IMAGE_SWIPED, onImageSwiped);
     eventSource.on(event_types.CHAT_CHANGED, onChatChanged);
     [event_types.SECRET_WRITTEN, event_types.SECRET_DELETED, event_types.SECRET_ROTATED].forEach(event => {

public/scripts/extensions/vectors/index.js+37 -22 Viewed

 /**
  * Retrieves files from the chat and inserts them into the vector index.
- * @param {object[]} chat Array of chat messages
+ * @param {ChatMessage[]} chat Array of chat messages
  * @returns {Promise<void>}
  */
 async function processFiles(chat) {

+        }
         for (const message of chat) {
-            // Message has no file
+            // Message has no files
-            if (!message?.extra?.file) {
+            if (!Array.isArray(message?.extra?.files) || !message.extra.files.length) {
                 continue;
+            }
             // Trim file inserted by the script
-            const fileText = String(message.mes)
+            const allFileText = String(message.mes || '').substring(0, message.extra.fileLength).trim();
-                .substring(0, message.extra.fileLength).trim();
             // Convert kilobytes to string length
             const thresholdLength = settings.size_threshold * 1024;
             // File is too small
-            if (fileText.length < thresholdLength) {
+            if (allFileText.length < thresholdLength) {
                 continue;
+            }
             message.mes = message.mes.substring(message.extra.fileLength);
-            const fileName = message.extra.file.name;
+            const allFileChunks = [];
-            const fileUrl = message.extra.file.url;
+            const queryText = await getQueryText(chat, 'file');
-            const collectionId = getFileCollectionId(fileUrl);
-            const hashesInCollection = await getSavedHashes(collectionId);
-            // File is already in the collection
+            for (const file of message.extra.files) {
-            if (!hashesInCollection.length) {
+                const fileName = file.name;
-                await vectorizeFile(fileText, fileName, collectionId, settings.chunk_size, settings.overlap_percent);
+                const fileUrl = file.url;
-            }
+                const collectionId = getFileCollectionId(fileUrl);
+                const hashesInCollection = await getSavedHashes(collectionId);
+                // File is not vectorized yet
+                if (!hashesInCollection.length) {
+                    const fileText = file.text || (await getFileAttachment(fileUrl));
+                    if (!fileText) {
+                        continue;
+                    }
+                    await vectorizeFile(fileText, fileName, collectionId, settings.chunk_size, settings.overlap_percent);
+                }
-            const queryText = await getQueryText(chat, 'file');
+                const fileChunks = await retrieveFileChunks(queryText, collectionId);
-            const fileChunks = await retrieveFileChunks(queryText, collectionId);
+                if (fileChunks) {
+                    allFileChunks.push(fileChunks);
+                }
+            }
-            message.mes = `${fileChunks}\n\n${message.mes}`;
+            message.mes = `${allFileChunks.join('\n\n')}\n\n${message.mes}`;
+        }
     } catch (error) {
         console.error('Vectors: Failed to retrieve files', error);

 /**
  * Removes the most relevant messages from the chat and displays them in the extension prompt
- * @param {object[]} chat Array of chat messages
+ * @param {ChatMessage[]} chat Array of chat messages
  * @param {number} _contextSize Context size (unused)
  * @param {function} _abort Abort function (unused)
  * @param {string} type Generation type

 /**
  * Gets the text to query from the chat
- * @param {object[]} chat Chat messages
+ * @param {ChatMessage[]} chat Chat messages
  * @param {'file'|'chat'|'world-info'} initiator Initiator of the query
  * @returns {Promise<string>} Text to query
  */
 async function getQueryText(chat, initiator) {
+    const getTextWithoutAttachments = (x) => {
+        const fileLength = x?.extra?.fileLength || 0;
+        return String(x?.mes || '').substring(fileLength).trim();
+    };
     let hashedMessages = chat
-        .map(x => ({ text: String(substituteParams(x.mes)), hash: getStringHash(substituteParams(x.mes)), index: chat.indexOf(x) }))
+        .map(x => ({ text: substituteParams(getTextWithoutAttachments(x)), hash: getStringHash(substituteParams(getTextWithoutAttachments(x))), index: chat.indexOf(x) }))
         .filter(x => x.text)
         .reverse()
         .slice(0, settings.query);

 async function onVectorizeAllFilesClick() {
     try {
         const dataBank = getDataBankAttachments();
-        const chatAttachments = getContext().chat.filter(x => x.extra?.file).map(x => x.extra.file);
+        const chatAttachments = getContext().chat.filter(x => Array.isArray(x.extra?.files)).map(x => x.extra.files).flat();
         const allFiles = [...dataBank, ...chatAttachments];
         /**

 async function onPurgeFilesClick() {
     try {
         const dataBank = getDataBankAttachments();
-        const chatAttachments = getContext().chat.filter(x => x.extra?.file).map(x => x.extra.file);
+        const chatAttachments = getContext().chat.filter(x => Array.isArray(x.extra?.files)).map(x => x.extra.files).flat();
         const allFiles = [...dataBank, ...chatAttachments];
         for (const file of allFiles) {

public/scripts/group-chats.js+2 -0 Viewed

     shouldAutoContinue,
     unshallowCharacter,
     chatElement,
+    ensureMessageMediaIsArray,
 } from '../script.js';
 import { printTagList, createTagMapFromList, applyTagsOnCharacterSelect, tag_map, applyTagsOnGroupSelect } from './tags.js';
 import { FILTER_TYPES, FilterHelper } from './filters.js';

     } else if (Array.isArray(data) && data.length) {
         data[0].is_group = true;
         chat.splice(0, chat.length, ...data);
+        chat.forEach(ensureMessageMediaIsArray);
         chatElement.find('.mes').remove();
         await printMessages();
+    }

public/scripts/openai.js+55 -16 Viewed

     Generate,
     getExtensionPrompt,
     getExtensionPromptMaxDepth,
+    getMediaDisplay,
+    getMediaIndex,
     getRequestHeaders,
     getStoppingStrings,
     is_send_press,

 import { t } from './i18n.js';
 import { ToolManager } from './tool-calling.js';
 import { accountStorage } from './util/AccountStorage.js';
-import { COMETAPI_IGNORE_PATTERNS, IGNORE_SYMBOL } from './constants.js';
+import { COMETAPI_IGNORE_PATTERNS, IGNORE_SYMBOL, MEDIA_DISPLAY, MEDIA_TYPE } from './constants.js';
 export {
     openai_messages_count,

         // Apply the "wrap in quotes" option
         if (role == 'user' && oai_settings.wrap_in_quotes) content = `"${content}"`;
         const name = chat[j]['name'];
-        const image = chat[j]?.extra?.image;
+        const media = chat[j]?.extra?.media;
-        const video = chat[j]?.extra?.video;
+        const mediaDisplay = getMediaDisplay(chat[j]);
+        const mediaIndex = getMediaIndex(chat[j]);
         const invocations = chat[j]?.extra?.tool_invocations;
-        messages[i] = { 'role': role, 'content': content, name: name, 'image': image, 'video': video, 'invocations': invocations };
+        messages[i] = { 'role': role, 'content': content, name: name, 'media': media, 'mediaDisplay': mediaDisplay, 'mediaIndex': mediaIndex, 'invocations': invocations };
         j++;
+    }

             await chatMessage.setName(messageName);
+        }
-        if (imageInlining && chatPrompt.image) {
+        /**
-            await chatMessage.addImage(chatPrompt.image);
+         * Inline a media attachment into the chat message.
+         * @param {MediaAttachment} media - The media attachment to inline.
+         */
+        async function inlineMediaAttachment(media) {
+            if (!media || !media.url) {
+                return;
+            }
+            if (!media.type) {
+                media.type = MEDIA_TYPE.IMAGE;
+            }
+            if (imageInlining && media.type === MEDIA_TYPE.IMAGE) {
+                await chatMessage.addImage(media.url);
+            }
+            if (videoInlining && media.type === MEDIA_TYPE.VIDEO) {
+                await chatMessage.addVideo(media.url);
+            }
+        }
-        if (videoInlining && chatPrompt.video) {
+        if (Array.isArray(chatPrompt.media) && chatPrompt.media.length) {
-            await chatMessage.addVideo(chatPrompt.video);
+            if (chatPrompt.mediaDisplay === MEDIA_DISPLAY.LIST) {
+                for (const media of chatPrompt.media) {
+                    await inlineMediaAttachment(media);
+                }
+            }
+            if (chatPrompt.mediaDisplay === MEDIA_DISPLAY.GALLERY) {
+                const media = chatPrompt.media[chatPrompt.mediaIndex];
+                await inlineMediaAttachment(media);
+            }
+        }
         if (canUseTools && Array.isArray(chatPrompt.invocations)) {

      */
     async addImage(image) {
         const textContent = this.content;
+        if (!Array.isArray(this.content)) {
+            this.content = [];
+            if (typeof textContent === 'string') {
+                this.content.push({ type: 'text', text: textContent });
+            }
+        }
         const isDataUrl = isDataURL(image);
         if (!isDataUrl) {
             try {

         image = await this.compressImage(image);
         const quality = oai_settings.inline_image_quality || default_settings.inline_image_quality;
-        this.content = [
+        this.content.push({ type: 'image_url', image_url: { 'url': image, 'detail': quality } });
-            { type: 'text', text: textContent },
-            { type: 'image_url', image_url: { 'url': image, 'detail': quality } },
-        ];
         try {
             const tokens = await this.getImageTokenCost(image, quality);

+        }
+    }
+    /**
+     * Adds a video to the message.
+     * @param {string} video Video URL or Data URL.
+     * @returns {Promise<void>}
+     */
     async addVideo(video) {
         const textContent = this.content;
+        if (!Array.isArray(this.content)) {
+            this.content = [];
+            if (typeof textContent === 'string') {
+                this.content.push({ type: 'text', text: textContent });
+            }
+        }
         const isDataUrl = isDataURL(video);
         if (!isDataUrl) {
             try {

+        }
         // Note: No compression for videos (unlike images)
-        this.content = [
+        this.content.push({ type: 'video_url', video_url: { 'url': video } });
-            { type: 'text', text: textContent },
-            { type: 'video_url', video_url: { 'url': video } },
-        ];
         try {
             // Convservative estimate for video token cost without knowing duration

public/scripts/power-user.js+67 -3 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 { t } from './i18n.js';
 export const toastPositionClasses = [
     'toast-top-left',

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

     $('#font_scale').val(power_user.font_scale);
+}
+/**
+ * Checks if the chat needs to be reloaded to apply media display settings.
+ * @returns {boolean} True if the chat needs reload to apply media display settings
+ */
+function isMediaDisplayReloadNeeded() {
+    // A user is not currently in a chat.
+    const chatId = getCurrentChatId();
+    if (!chatId) {
+        return false;
+    }
+    const firstDisplayedIndex = getFirstDisplayedMessageId();
+    const hasUnprocessedMediaMessages = chat.some((message, index) => {
+        // Skip messages that are not currently displayed
+        if (index < firstDisplayedIndex) {
+            return false;
+        }
+        const hasMediaAttachments = Array.isArray(message?.extra?.media) && message.extra.media.length > 0;
+        const lacksMediaDisplay = !message?.extra?.media_display;
+        return hasMediaAttachments && lacksMediaDisplay;
+    });
+    return hasUnprocessedMediaMessages;
+}
+/**
+ * Shows a toast notification prompting the user to reload the chat if media display settings have changed
+ * and there are messages with media attachments that haven't been processed with the new display format.
+ */
+function showMediaDisplayReloadPrompt() {
+    if (!isMediaDisplayReloadNeeded()) {
+        return;
+    }
+    toastr.info(
+        t`Reload the chat to apply the changes. Click here to reload.`,
+        t`Media Style changed`,
+        { onclick: () => void reloadCurrentChat() },
+    );
+}
 function applyTheme(name) {
     const theme = themes.find(x => x.name == name);

                 $('#click_to_edit').prop('checked', power_user.click_to_edit);
             },
         },
+        {
+            key: 'media_display',
+            action: (oldValue, newValue) => {
+                $('#media_display').val(power_user.media_display);
+                if (oldValue !== newValue) {
+                    showMediaDisplayReloadPrompt();
+                }
+            },
+        },
     ];
     for (const { key, selector, type, action } of themeProperties) {
         if (theme[key] !== undefined) {
-            power_user[key] = theme[key];
+            const oldValue = power_user[key];
-            if (selector) $(selector).attr('color', power_user[key]);
+            const newValue = theme[key];
+            power_user[key] = newValue;
+            if (selector) $(selector).attr('color', newValue);
             if (type) applyThemeColor(type);
-            if (action) action();
+            if (action) action(oldValue, newValue);
         } else {
             console.debug(`Empty theme key: ${key}`);
+        }

     $('#forbid_external_media').prop('checked', power_user.forbid_external_media);
     $('#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);
     for (const theme of themes) {
         const option = document.createElement('option');

         compact_input_area: power_user.compact_input_area,
         show_swipe_num_all_messages: power_user.show_swipe_num_all_messages,
         click_to_edit: power_user.click_to_edit,
+        media_display: power_user.media_display,
     };
+}

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

public/scripts/reasoning.js+2 -2 Viewed

         if (!power_user.reasoning.prefix || !power_user.reasoning.suffix)
             return mesChanged;
-        /** @type {{ mes: string, [key: string]: any}} */
+        /** @type {ChatMessage} */
         const message = chat[messageId];
         if (!message) return mesChanged;

 /**
  * Parse reasoning in an array of swipe strings if auto-parsing is enabled.
  * @param {string[]} swipes Array of swipe strings
- * @param {{extra: ReasoningMessageExtra}[]} swipeInfoArray Array of swipe info objects
+ * @param {{extra: Partial<ReasoningMessageExtra>}[]} swipeInfoArray Array of swipe info objects
  * @param {number?} duration Duration of the reasoning
  * @typedef {object} ReasoningMessageExtra Extra reasoning data
  * @property {string} reasoning Reasoning block

public/scripts/slash-commands.js+0 -5 Viewed

         return '';
+    }
-    if (lastMessage.extra?.image) {
-        toastr.warning(t`Can't add swipes to message containing an image.`);
-        return '';
-    }
     if (!Array.isArray(lastMessage.swipes)) {
         lastMessage.swipes = [lastMessage.mes];
         lastMessage.swipe_info = [{}];

public/scripts/slash-commands/SlashCommandCommonEnumsProvider.js+17 -0 Viewed

     server: '🖥️',
     popup: '🗔',
     image: '🖼️',
+    video: '🎥',
     key: '🔑',
     true: '✔️',

     },
     /**
+     * Media items attached to a specific message
+     * @returns {(executor:SlashCommandExecutor, scope:SlashCommandScope) => SlashCommandEnumValue[]}
+     */
+    messageMedia: () => (executor, _scope) => {
+        const messageId = Number(executor.namedArgumentList.find(it => ['mesId', 'id'].includes(it.name))?.value || '');
+        if (isNaN(messageId) || messageId === null || messageId < 0 || messageId >= chat.length) {
+            return [];
+        }
+        const message = chat[messageId];
+        if (!Array.isArray(message?.extra?.media)) {
+            return [];
+        }
+        return message.extra.media.map((media, index) => new SlashCommandEnumValue(index.toString(), media.title || message.extra.title || '[Untitled]', enumTypes.enum, enumIcons[media.type] || enumIcons.file));
+    },
+    /**
      * All names used in the current chat.
+     *
      * @returns {SlashCommandEnumValue[]}

public/scripts/st-context.js+6 -0 Viewed

     deleteMessage,
     refreshSwipeButtons,
     isSwipingAllowed,
+    ensureMessageMediaIsArray,
+    getMediaDisplay,
+    getMediaIndex,
 } from '../script.js';
 import {
     extension_settings,

         humanizedDateTime,
         updateMessageBlock,
         appendMediaToMessage,
+        ensureMessageMediaIsArray,
+        getMediaDisplay,
+        getMediaIndex,
         swipe: {
             left: swipe_left,
             right: swipe_right,

public/scripts/system-messages.js+15 -11 Viewed

 import { SlashCommandBrowser } from './slash-commands/SlashCommandBrowser.js';
 import { renderTemplateAsync } from './templates.js';
-// Initialized in getSystemMessages()
+/** @type {Record<string, ChatMessage>} */
 export const system_messages = {};
+/** @type {ChatMessage[]} */
 export const SAFETY_CHAT = [];
 /**

 };
 export async function initSystemMessages() {
+    /** @type {Record<string, ChatMessage>} */
     const result = {
         help: {
             name: systemUserName,

             is_system: true,
             mes: await renderTemplateAsync('macros'),
         },
-        welcome:
+        welcome: {
-        {
             name: systemUserName,
             force_avatar: system_avatar,
             is_user: false,
             is_system: true,
-            uses_system_ui: true,
             mes: await renderTemplateAsync('welcome', { displayVersion }),
+            extra: {
+                uses_system_ui: true,
+            },
         },
         empty: {
             name: systemUserName,

             force_avatar: system_avatar,
             is_user: false,
             is_system: true,
-            uses_system_ui: true,
             mes: await renderTemplateAsync('welcomePrompt'),
             extra: {
+                uses_system_ui: true,
                 isSmallSys: true,
             },
         },

             is_user: false,
             is_system: true,
             mes: await renderTemplateAsync('assistantNote'),
-            uses_system_ui: true,
             extra: {
+                uses_system_ui: true,
                 isSmallSys: true,
             },
         },

     Object.assign(system_messages, result);
+    /** @type {ChatMessage} */
     const safetyMessage = {
         name: systemUserName,
         force_avatar: system_avatar,
         is_system: true,
         is_user: false,
-        create_date: 0,
+        send_date: getMessageTimeStamp(),
         mes: t`You deleted a character/chat and arrived back here for safety reasons! Pick another character!`,
     };
     SAFETY_CHAT.splice(0, SAFETY_CHAT.length, safetyMessage);

  * Gets a system message by type.
  * @param {string} type Type of system message
  * @param {string} [text] Text to be sent
- * @param {object} [extra] Additional data to be added to the message
+ * @param {ChatMessageExtra} [extra] Additional data to be added to the message
- * @returns {object} System message object
+ * @returns {ChatMessage} System message object
  */
 export function getSystemMessageByType(type, text, extra = {}) {
     const systemMessage = system_messages[type];

@@ -150,7 +154,7 @@ export function getSystemMessageByType(type, text, extra = {}) {
150	newMessage.mes = getSlashCommandsHelp();	154	newMessage.mes = getSlashCommandsHelp();
151	}	155	}
152		156
153	if (!newMessage.extra) {	157	if (!newMessage.extra \|\| typeof newMessage.extra !== 'object') {
154	newMessage.extra = {};	158	newMessage.extra = {};
155	}	159	}
156		160

  * Sends a system message to the chat.
  * @param {string} type Type of system message
  * @param {string} [text] Text to be sent
- * @param {object} [extra] Additional data to be added to the message
+ * @param {ChatMessageExtra} [extra] Additional data to be added to the message
  */
 export function sendSystemMessage(type, text, extra = {}) {
     const newMessage = getSystemMessageByType(type, text, extra);

public/scripts/utils.js+17 -2 Viewed

+}
 /**
+ * Fuzzily compares two files for equality. Only checks attributes, not contents.
+ * @param {File} a First file
+ * @param {File} b Second file
+ * @returns {boolean} True if the files are probably the same, false otherwise.
+ */
+export function isSameFile(a, b) {
+    return a.lastModified === b.lastModified && a.name === b.name && a.size === b.size && a.type === b.type;
+}
+/**
  * Returns a promise that resolves to the file's text.
  * @param {Blob} file The file to read.
  * @returns {Promise<string>} A promise that resolves to the file's text.

 /**
  * Cached version of moment() to avoid re-parsing the same date strings.
  * Important: Moment objects are mutable, so use clone() before modifying them!
- * @param {string|number} timestamp String or number representing a date.
+ * @param {MessageTimestamp} timestamp String or number representing a date.
  * @returns {import('moment').Moment} Moment object
  */
 export function timestampToMoment(timestamp) {

 /**
  * Parses a timestamp and returns a moment object representing the parsed date and time.
- * @param {string|number} timestamp - The timestamp to parse. It can be a string or a number.
+ * @param {MessageTimestamp} timestamp - The timestamp to parse. It can be a string or a number.
  * @returns {string} - If the timestamp is valid, returns an ISO 8601 string.
  */
 function parseTimestamp(timestamp) {
     if (!timestamp) return;
+    // Date object
+    if (timestamp instanceof Date) {
+        return timestamp.toISOString();
+    }
     // Unix time (legacy TAI / tags)
     if (typeof timestamp === 'number' || /^\d+$/.test(timestamp)) {
         const unixTime = Number(timestamp);

public/style.css+48 -10 Viewed

     margin-bottom: 10px;
+}
+.mes_text p:last-child,
+.mes_reasoning p:last-child {
+    margin-bottom: 0;
+}
 .mes_text li tt,
 .mes_reasoning li tt {
     display: inline-block;

     display: flex;
+}
+.mes .mes_media_gallery,
+.mes .mes_media_list {
+    display: none;
+}
+.mes[data-media-display="gallery"] .mes_media_gallery,
+.mes[data-media-display="list"] .mes_media_list {
+    display: flex;
+}
 small {
     color: var(--SmartThemeBodyColor);
     opacity: 0.7;

+}
 /* Message images/video */
+.mes .mes_media_wrapper:empty {
+    display: none;
+}
+.mes .mes_media_wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5em;
+}
+.mes_media_wrapper:not(:empty)~.mes_file_wrapper:not(:empty) {
+    margin-top: 0.5em;
+}
 .mes .mes_img_container,
 .mes .mes_video_container {
     max-width: 100%;

     position: relative;
     width: fit-content;
     transition: all var(--animation-duration);
-    padding: 0.5rem;
+    border-radius: 5px;
+    overflow: hidden;
+}
 .mes .mes_video_container:has(.mes_video[src]) {

+}
 .mes_img {
-    border-radius: 5px;
     max-width: 100%;
     max-height: 40vh;
     image-rendering: -webkit-optimize-contrast;

 .mes_img_controls,
 .mes_video_controls {
     position: absolute;
-    top: 0.1em;
+    top: 0;
     left: 0;
     width: 100%;
     display: flex;

     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding: 1em;
+    padding: 10px;
     z-index: 1;
     transition: opacity var(--animation-duration) ease-in-out;
+    background: linear-gradient(rgba(0, 0, 0, 0.8), transparent);
+}
 .mes_img_swipes {
     top: unset;
-    bottom: 0.1rem;
+    bottom: 0;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+}
 .mes_img_swipes .right_menu_button,

 .mes_img_container:focus-within .mes_img_swipes,
 .mes_img_container:hover .mes_img_controls,
 .mes_img_container:focus-within .mes_img_controls,
-.mes_video_container:hover .mes_video_controls {
+.mes_video_container:hover .mes_video_controls,
+.mes_video_container:has(.mes_video.error) .mes_img_swipes,
+.mes_video_container:hover .mes_img_swipes {
     opacity: 1;
+}
-.mes .mes_img_container.img_extra {
+.mes_media_container:has(.error) .mes_img_controls,
+.mes_media_container:has(.error) .mes_img_swipes {
+    background: none;
+}
+.mes .mes_img_container {
     display: flex;
+}

@@ -5048,8 +5088,7 @@ body:not(.caption) .mes_img_caption {
5048	display: none;	5088	display: none;
5049	}	5089	}
5050		5090
5051	.mes_img_container:not(.img_swipes) .mes_img_swipes,	5091	.mes_img_container:not(.img_swipes) .mes_img_swipes {
5052	body:not(.sd) .mes_img_swipes {
5053	display: none;	5092	display: none;
5054	}	5093	}
5055		5094

 .mes_video {
     max-width: 100%;
     max-height: 400px;
-    border-radius: 5px;
     background: #000;
+}

src/endpoints/data-maid.js+38 -6 Viewed

  */
 /**
+ * @typedef {object} DataMaidMedia - The media object.
+ * @property {string} url - The media URL
+ */
+/**
  * @typedef {object} DataMaidChatMetadata - The chat metadata object.
  * @property {DataMaidFile[]} [attachments] - The array of attachments, if any.
+ * @property {string[]} [chat_backgrounds] - The array of chat background image links, if any.
  */
 /**
  * @typedef {object} DataMaidMessageExtra - The extra data object.
- * @property {string} [image] - The link to the image, if any.
+ * @property {string} [image] - The link to the image, if any - DEPRECATED, use `media` instead.
- * @property {string} [video] - The link to the video, if any.
+ * @property {string} [video] - The link to the video, if any - DEPRECATED, use `media` instead.
- * @property {string[]} [image_swipes] - The links to the image swipes, if any.
+ * @property {string[]} [image_swipes] - The links to the image swipes, if any - DEPRECATED, use `media` instead.
- * @property {DataMaidFile} [file] - The file object, if any.
+ * @property {DataMaidMedia[]} [media] - The links to the media, if any.
+ * @property {DataMaidFile} [file] - The file object, if any - DEPRECATED, use `files` instead.
+ * @property {DataMaidFile[]} [files] - The array of file objects, if any.
  */
 /**

         const result = [];
         try {
-            const messages = await this.#parseAllChats(x => !!x?.extra?.image || !!x?.extra?.video || Array.isArray(x?.extra?.image_swipes));
+            const messages = await this.#parseAllChats(x => !!x?.extra?.image || !!x?.extra?.video || Array.isArray(x?.extra?.image_swipes) || Array.isArray(x?.extra?.media));
             const knownImages = new Set();
             for (const message of messages) {
                 if (message?.extra?.image) {

                         knownImages.add(swipe);
+                    }
+                }
+                if (Array.isArray(message?.extra?.media)) {
+                    for (const media of message.extra.media) {
+                        if (media?.url) {
+                            knownImages.add(media.url);
+                        }
+                    }
+                }
+            }
+            const metadata = await this.#parseAllMetadata(x => Array.isArray(x?.chat_backgrounds) && x.chat_backgrounds.length > 0);
+            for (const meta of metadata) {
+                if (Array.isArray(meta?.chat_backgrounds)) {
+                    for (const background of meta.chat_backgrounds) {
+                        if (background) {
+                            knownImages.add(background);
+                        }
+                    }
+                }
+            }
             const knownImageFullPaths = new Set();
             knownImages.forEach(image => {

         const result = [];
         try {
-            const messages = await this.#parseAllChats(x => !!x?.extra?.file?.url);
+            const messages = await this.#parseAllChats(x => !!x?.extra?.file?.url || (Array.isArray(x?.extra?.files) && x.extra.files.length > 0));
             const knownFiles = new Set();
             for (const message of messages) {
                 if (message?.extra?.file?.url) {
                     knownFiles.add(message.extra.file.url);
+                }
+                if (Array.isArray(message?.extra?.files)) {
+                    for (const file of message.extra.files) {
+                        if (file?.url) {
+                            knownFiles.add(file.url);
+                        }
+                    }
+                }
+            }
             const metadata = await this.#parseAllMetadata(x => Array.isArray(x?.attachments) && x.attachments.length > 0);
             for (const meta of metadata) {