Multiple attachments (#4719) * Multiple file uploads * mes_img_wrapper * mes_video_wrapper * Named export instead of function wrapper * Update public/scripts/chats.js Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> * Fix optional chaining for message extra * Preserve existing files with paste * Improve swipe message extras clean-up * Clean-up: Add chat_backgrounds to known images * Add ensureMessageMediaIsArray to getContext * Fix compatibility warning * Update to media array * Move de-dupe check logic * Fix comment * Fix clean-up logic * Improve typing * `feat/multi-file` Added a toggle between the old gallery and new image list. (#4722) * Added "Toggle Gallery" button. Added `getContainerInfo`. * Refactor * Change checkbox toggle to select * Ensure media_display is set correctly only if any image_swipes were migrated * Rename function * Support Date in parseTimestamp * Add type to main chat array * Add media display reload prompt --------- Co-authored-by: user <user@exmaple.com> Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com> * Use a single wrapper block for media * Fix type annotation * Fix video display in list mode * Refactor saveImageToMessage to include title in media object * Use named constants in migrateMediaToArray * Update img control styles * Fix error container state * Refactor onImageSwiped * Remove redundant event handler * Refactor expandMessageMedia * Use shared function for display handling, fix notice logic * Enhance ChatMessage and ChatMessageExtra types * Refactor media display reload logic * Improve styling for media containers * Adjust spacing in file form styles * Fix scroll handling in appendMediaToMessage * Reduce flicker in appendMediaToMessage * Extract scrollOnMediaLoad func * Improve scroll behavior in gallery display * Improve delegation for click events * Add file d&d handler to #form_sheld * Improve scroll adjust for slow connections * Adjust debounce timeout * Add messageMedia enum provider --------- Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: DeclineThyself <FallenHaze@tutamail.com> Co-authored-by: user <user@exmaple.com>

de7c113346f05f161237c6d9d71a7437ff4c4e5c

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

Signed

Parents: 60a8b519512f81f5418de378a09b3ee3b7c65ce1

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_containermes_media_wrapper"></div>
                                             <div class="mes_img_controlsmes_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 inputMedia barTemplates -->
         <div id="message_file_template" class="template_element">
             <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_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_deletemes_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" multiple 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+370 -113 Viewed

     trimSpaces,
     clamp,
 } from './scripts/utils.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 HTMLImageElementcurrentElement.complete) {
 -            if (image.complete) {
                 incrementAndCheck();
             } else {
                 imagecurrentElement.addEventListener('load', incrementAndCheck);
 +                currentElement.addEventListener('error', incrementAndCheck);
 +            }
 +        }
 +        if (currentElement instanceof HTMLVideoElement) {
 +            if (currentElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
 +                incrementAndCheck();
 +            } else {
 +                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();
+        }
+    }

+}
 /**
 + * Ensures that the message media properties are arrays, adding getters/setters for single media items.
 + * @param {ChatMessage} mes Message object
 + */
 +export function ensureMessageMediaIsArray(mes) {
 +    /**
 +     * Determines if a property of an object is a plain property (not a getter/setter or non-enumerable).
 +     * @param {object} obj Object to check
 +     * @param {string} name Property name
 +     * @returns {boolean} True if the property is a plain property, false otherwise
 +     */
 +    function isPlainObjectProperty(obj, name) {
 +        const hasProperty = Object.hasOwn(obj, name);
 +        if (hasProperty) {
 +            const descriptor = Object.getOwnPropertyDescriptor(obj, name);
 +            return descriptor && descriptor.enumerable && descriptor.configurable && descriptor.writable;
 +        }
 +        return false;
 +    }
++
 +    /**
 +     * Determines if a property of an object is a getter (not a plain property).
 +     * @param {object} obj Object to check
 +     * @param {string} name Property name
 +     * @returns {boolean} True if the property is a getter, false otherwise
 +     */
 +    function isGetterObjectProperty(obj, name) {
 +        const hasProperty = Object.hasOwn(obj, name);
 +        if (hasProperty) {
 +            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,
 +        });
 +    }
++
 +    /**
 +     * Migrates image swipes from a single image property to an array.
 +     * @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);
 +            }
 +        }
++
 +        if (Array.isArray(obj.image_swipes)) {
 +            if (!Array.isArray(obj.media)) {
 +                obj.media = [];
 +            }
 +            for (const swipe of obj.image_swipes) {
 +                if (swipe && typeof swipe === 'string') {
 +                    obj.media_display = MEDIA_DISPLAY.GALLERY;
 +                    obj.media.push({ type: MEDIA_TYPE.IMAGE, url: swipe });
 +                }
 +            }
 +            delete obj.image_swipes;
 +        }
++
 +        if (isPlainObjectProperty(obj, 'image')) {
 +            if (!Array.isArray(obj.media)) {
 +                obj.media = [];
 +            }
 +            const imageValue = obj.image;
 +            delete obj.image;
 +            if (imageValue && typeof imageValue === 'string') {
 +                obj.media.push({ type: MEDIA_TYPE.IMAGE, url: imageValue });
 +            }
 +            if (obj.media_display === MEDIA_DISPLAY.GALLERY) {
 +                const selectedIndex = obj.media.findIndex(t => t.url === imageValue);
 +                if (selectedIndex > -1) {
 +                    obj.media_index = selectedIndex;
 +                }
 +            }
 +            obj.media = obj.media.filter((v, i, a) => i === a.findIndex(t => t.url === v.url));
 +        }
++
 +        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;
 +}
++
 +/**
 + * Gets the media index for a message.
 + * @param {ChatMessage} mes Message object
 + * @returns {number} Media index
 + */
 +export function getMediaIndex(mes) {
 +    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 {objectChatMessage} 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) {
 -    // Add image to message
 +    ensureMessageMediaIsArray(mes);
 -    if (mes.extra?.image) {
++
 -        const container = messageElement.find('.mes_img_container');
 +    const hasMedia = Array.isArray(mes?.extra?.media) && mes.extra.media.length > 0;
 -        const chatHeight = chatElement.prop('scrollHeight');
 +    const hasFiles = Array.isArray(mes?.extra?.files) && mes.extra.files.length > 0;
             const imagemediaDisplay = messageElement.findgetMediaDisplay('.mes_img'mes);
 -        const text = messageElement.find('.mes_text');
 +    const hideMessageText = hasMedia && mes?.extra?.inline_image === false;
 -        const isInline = !!mes.extra?.inline_image;
++
 +    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 scrollPosition = chatElement.scrollTop();
         const newChatHeight = chatElement.prop('scrollHeight');
         const diff = newChatHeight - chatHeight;
         chatElement.scrollTop(scrollPosition + diff);
     };
 -        image.off('load').on('load', function () {
++
 +    // 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');
             doAdjustScroll                resolve();
 -        });
 +            }
 -        image.off('error').on('error', function () {
 +            function onError() {
                 image.attr('alt', '');
                 image.addClass('error');
             doAdjustScroll                resolve();
 -        });
 +            }
 -        image.attr('src', mes.extra?.image);
 +            if (image.prop('complete')) {
 -        image.attr('title', mes.extra?.title || mes.title || '');
 +                onLoad();
 -        container.addClass('img_extra');
 +            } else {
                         image.toggleClassoff('img_inlineload').on('load', isInlineonLoad);
 -        text.toggleClass('displayNone', !isInline);
 +                image.off('error').on('error', onError);
 +            }
 +        }));
 -        const imageSwipes = mes.extra.image_swipes;
 +        mediaBlocks.push(template);
 -        if (Array.isArray(imageSwipes) && imageSwipes.length > 0) {
 +        return template;
 -            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 () {
 +     * Appends a single video attachment to the message element.
 -                eventSource.emit(event_types.IMAGE_SWIPED, { message: mes, element: messageElement, direction: 'left' });
 +     * @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 swipeRightvideo = containertemplate.find('.mes_img_swipe_rightmes_video');
 -            swipeRight.off('click').on('click', function () {
 +        video.attr('src', attachment.url);
 -                eventSource.emit(event_types.IMAGE_SWIPED, { message: mes, element: messageElement, direction: 'right' });
 +        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 {
 -        const container = messageElement.find('.mes_img_container');
 +                video.off('loadeddata').on('loadeddata', onLoad);
 -        container.removeClass('img_extra img_swipes');
 +                video.off('error').on('error', onError);
 -        const text = messageElement.find('.mes_text');
 -        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();
 +        }));
 -            const newChatHeight = chatElement.prop('scrollHeight');
 -            const diff = newChatHeight - chatHeight;
 -            chatElement.scrollTop(scrollPosition + diff);
 -        });
 -        video.attr('src', mes.extra?.video);
 +        mediaBlocks.push(template);
 -    } else {
 +        return template;
 -        messageElement.find('.mes_video_container').remove();
+    }
 -    // Add file to message
 +    /**
 -    if (mes.extra?.file) {
 +     * Appends a media attachment to the message element.
 -        messageElement.find('.mes_file_container').remove();
 +     * @param {MediaAttachment} attachment Media attachment object
 -        const messageId = messageElement.attr('mesid');
 +     * @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.find('.mes_file_name').text(mes.extra.file.name);
 +            template.attr('data-index', index);
                     template.find('.mes_file_sizemes_file_name').text(humanFileSize(mesfile.extraname).attr('title', file.size)name);
                     template.find('.mes_file_downloadmes_file_size').text(humanFileSize(file.size)).attr('mesidtitle', messageIdfile.size);
         template            messageElement.find('.mes_file_deletemes_file_wrapper').attrappend('mesid', messageIdtemplate);
 -        messageElement.find('.mes_block').append(template);
 -    } else {
 -        messageElement.find('.mes_file_container').remove();
+        }
+    }
 -/**
 +    // TODO: Consider making this awaitable
 - * @deprecated Use appendMediaToMessage instead.
 +    Promise.race([Promise.all(mediaPromises), delay(debounce_timeout.short)]).then(() => {
 - */
 +        messageElement.find('.mes_media_wrapper').empty().append(mediaBlocks);
 -export function appendImageToMessage(mes, messageElement) {
 +        doAdjustScroll();
 -    appendMediaToMessage(mes, messageElement);
 +    });
+}
 export function addCopyToCodeBlocks(messageElement) {

 /**
  * Adds a single message to the chat.
  * @param {objectChatMessage} 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.extra.uses_system_ui is true, set an override on the sanitizer options
     const sanitizerOverrides = mes.extra?.uses_system_ui ? { MESSAGE_ALLOW_SYSTEM_UI: true } : {};
     messageText = messageFormatting(
         messageText,

 /**
  * Formats the title for the generation timer.
  * @param {DateMessageTimestamp} gen_started Date when generation was started
  * @param {DateMessageTimestamp} 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 = 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 (/** @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 {objectChatMessage} 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	6360	if (!mes.extra \|\| typeof mes.extra !== 'object') {
6106	6361	mes.extra = {};
6107	6362	}
6108		- mes.extra.image = img.image;
	6363	+ if (!Array.isArray(mes.extra.media)) {
6109	6364	mes.extra.titlemedia = img.title[];
	6365	+ }
	6366	+ mes.extra.media.push({ url: img.image, type: MEDIA_TYPE.IMAGE, title: img.title });
6110	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 && 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 (parseIntNumber(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().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+365 -121 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 {objectChatMessage} 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 || 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 fileNamePrefix = `${Date.now()}_${slug}`;
             const fileBase64 = await getBase64Async(file);
             let base64Data = fileBase64.split(',')[1];
             const extension = getFileExtension(file);
 -        // If file is image
 +            const mediaType = MEDIA_TYPE.getFromMime(file.type);
 -        if (file.type.startsWith('image/')) {
 +            if (mediaType) {
                 const imageUrl = await saveBase64AsFile(base64Data, name2, fileNamePrefix, extension);
 -            message.extra.image = imageUrl;
 +                if (!Array.isArray(message.extra.media)) {
                                 message.extra.inline_imagemedia = true[];
+                }
 -        // If file is video
 +                message.extra.media.push({ url: imageUrl, type: mediaType });
 -        else if (file.type.startsWith('video/')) {
 +                message.extra.media_index = message.extra.media.length - 1;
 -            const videoUrl = await saveBase64AsFile(base64Data, name2, fileNamePrefix, extension);
 +                message.extra.inline_image = true;
 -            message.extra.video = videoUrl;
             } else {
                 const uniqueFileName = `${fileNamePrefix}.txt`;

                 const fileUrl = await uploadFileAttachment(uniqueFileName, base64Data);
                 if (!fileUrl) {
 -                return;
 +                    continue;
+                }
 -            message.extra.file = {
 +                if (!Array.isArray(message.extra.files)) {
 +                    message.extra.files = [];
 +                }
++
 +                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 isImageisMedia = file.type.startsWith('image/') || file.type.startsWith('video/');
     const isBinary = /^[\x00-\x08\x0E-\x1F\x7F-\xFF]*$/.test(fileText);
     if (!isImageisMedia && file.size > fileSizeLimit) {
         toastr.error(t`File is too big. Maximum size is ${humanFileSize(fileSizeLimit)}.`);
         return false;
+    }
     // If file is binary
     if (isBinary && !isImageisMedia && !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 {FileFileList} filefileList File object
  * @returns {Promise<void>}
  */
 async function onFileAttach(filefileList) {
     if (!filefileList || fileList.length === 0) return;
 +    for (const file of fileList) {
         const isValid = await validateFile(file);
         // If file is binary
         if (!isValid) {
 +            toastr.warning(t`File ${file.name} is not supported.`);
             $('#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 a message.
 + * @param {JQuery<HTMLElement>} messageBlock Message block element
  * @param {number} messageId Message ID
 + * @param {number} fileIndex File index
  */
 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 (!Array.isArray(message?.extra?.filefiles)) {
         console.debug('Message has no filefiles');
         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, 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(/** @type {JQuery.ChangeEvent} */ e) {
 -        const file = e.target.files[0];
 +        if (!(e.target instanceof HTMLInputElement)) return;
         if (!filee.target.files.length) return;
 +        for (const file of e.target.files) {
             const isValid = await validateFile(file);
             if (!isValid) {
 +                toastr.warning(t`File ${file.name} is not supported.`);
                 $('#file_form').trigger('reset');
                 return;
+            }
 +        }
         await populateFileAttachment(message, 'embed_file_input');
         await eventSource.emit(event_types.MESSAGE_FILE_EMBEDDED, messageId);
         appendMediaToMessage(message, messageBlock, false);
         await saveChatConditional();
+    }
+}
 /**
  * Appends file content to the message text.
  * @param {objectChatMessage} 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 (message.extra.fileLength >= 0) {
 +        delete message.extra.fileLength;
 +    }
 +    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) {
 -            const fileWrapped = `${fileText}\n\n`;
 +                fileTexts.push(fileText);
 -            message.extra.fileLength = fileWrapped.length;
 +            }
 -            messageText = fileWrapped + messageText;
+        }
 +        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;
 +    }
 -    if (!imgSrc) {
 +    /** @type {ChatMessage} */
 +    const message = chat[messageId];
++
 +    if (!Array.isArray(message?.extra?.media) || message.extra.media.length === 0) {
 +        console.warn('Message has no media to expand');
 +        return;
 +    }
++
 +    const mediaAttachment = message.extra.media[mediaIndex];
 +    const title = mediaAttachment.title || message.extra.title || '';
++
 +    if (!mediaAttachment) {
         return;
+    }
 +    /**
 +     * 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');
 -    img.src = imgSrc;
 +            return img;
 -    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');
 -    codeTitle.addClass('txt').text(title);
 -    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 });
 -    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;
 +        }
++
 +        switch (mediaAttachment.type) {
 +            case MEDIA_TYPE.IMAGE:
 +                return getImageElement();
 +            case MEDIA_TYPE.VIDEO:
 +                return getVideoElement();
 +        }
++
 +        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);
     imgmediaElement.addEventListener('click', event => {
         const shouldZoom = !imgmediaElement.classList.contains('zoomed') && mediaElement.nodeName === 'IMG';
         imgmediaElement.classList.toggle('zoomed', shouldZoom);
         event.stopPropagation();
     });
 -    codeTitle[0]?.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);
 +    }
 -    popup.dlg.addEventListener('click', event => {
 +    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 imgmediaElement;
+}
 -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 mesIdmessage = mesBlock.attr('mesid')chat[messageId];
 -    const message = chat[mesId];
+-
 -    let isLastImage = true;
     if (!Array.isArray(message?.extra?.image_swipesmedia)) {
 -        const indexOf = message.extra.image_swipes.indexOf(message.extra.image);
 +        console.debug('Message has no media');
 -        if (indexOf > -1) {
 +        return;
 -            message.extra.image_swipes.splice(indexOf, 1);
 -            isLastImage = message.extra.image_swipes.length === 0;
 -            if (!isLastImage) {
 -                const newIndex = Math.min(indexOf, message.extra.image_swipes.length - 1);
 -                message.extra.image = message.extra.image_swipes[newIndex];
+    }
++
 +    if (mediaIndex < 0 || mediaIndex >= message.extra.media.length) {
 +        console.warn('Invalid media index for message');
 +        return;
+    }
++
 +    message.extra.media.splice(mediaIndex, 1);
++
 +    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) {
         delete message.extra.imagemedia;
         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 mesIdmessage = mesBlock.attr('mesid')chat[messageId];
 -    const message = chat[mesId];
     if (!message?.extra?.video) {
         console.warn('Message has no video ornot itfound isfor emptyID', 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 =await onFileAttach(fileInput.files[0]);
 -        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++) {
             dataTransfer.items.add(event.clipboardData.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]);
     });
     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 {ObjectChatMessage} datamessage Message data
 + * @param {number} mediaIndex Index of the image to caption
  * @returns {Promise<void>}
  */
 async function captionExistingMessage(datamessage, mediaIndex) {
     if (!Array.isArray(datamessage?.extra?.imagemedia) || 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	153	const wrappedCaption = await wrapCaptionTemplate(caption);
142	154
143	155	const messageText = String(datamessage.mes).trim();
144	156
145	157	if (!messageText) {
146	158	datamessage.extra.inline_image = false;
147	159	datamessage.mes = wrappedCaption;
148	160	data.extramediaAttachment.title = wrappedCaption;
149	161	}
150	162	else {
151	163	datamessage.extra.inline_image = true;
152	164	data.extramediaAttachment.append_title = true;
153	165	data.extramediaAttachment.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: {
             imagemedia: image[mediaAttachment],
             titlemedia_display: messageTextMEDIA_DISPLAY.GALLERY,
 +            media_index: 0,
             inline_image: !!extension_settings.caption.show_in_chat,
         },
     };

  */
 async function captionCommandCallback(args, prompt) {
     const quiet = isTrueBoolean(args?.quiet);
     const mesIdmessageId = args?.mesId ?? args?.id;
 +    const index = Number(args?.index ?? 0);
     if (!isNaN(Number(mesIdmessageId))) {
 -        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 fetchResultmediaAttachment = awaitmessage.extra.media[index] fetch(|| message.extra.image)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 (indexmessageId) => {
         if (!extension_settings.caption.auto_mode) {
             return;
+        }
         const datamessage = getContext().chat[indexmessageId];
         await captionExistingMessage(datamessage, 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 messageImgimageBlock = messageBlock$(this).findclosest('.mes_imgmes_img_container');
 +        const messageImg = imageBlock.find('.mes_img');
         if (messageImg.hasClass(animationClass)) return;
         messageImg.addClass(animationClass);
         try {
             const indexmessageId = Number(messageBlock.attr('mesid'));
             const dataimageIndex = getContextNumber()imageBlock.chat[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+97 -149 Viewed

     SlashCommandArgument,
     SlashCommandNamedArgument,
 } from '../../slash-commands/SlashCommandArgument.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: {
             imagemedia: image[mediaAttachment],
             titlemedia_display: promptMEDIA_DISPLAY.GALLERY,
             generationTypemedia_index: generationType0,
 -            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'classes.idle, !isBusy);
         $icon.toggleClass(busyClassclasses.busy, isBusy);
+    }
     const busyClassclasses = { 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(busyClassclasses.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 {
 -        setBusyIcon(true);
 -        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;
 +    /** @type {ChatMessage} */
 -            console.log('Regenerating an image, using existing prompt:', prompt);
 +    const message = context.chat[messageId];
 -            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!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
 -        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.media)) {
 -        if (!Array.isArray(message.extra.image_swipes)) {
 +        message.extra.media = [];
 -            message.extra.image_swipes = [];
+    }
 -        const swipes = message.extra.image_swipes;
 +    /** @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 (message.extra.image && !swipes.includes(message.extra.image)) {
 +    buttonAbortController = new AbortController();
 -            swipes.push(message.extra.image);
 +    const newMediaAttachment = await generateMediaSwipe(
 +        selectedMedia,
 +        message,
 +        () => setBusyIcon(true),
 +        () => setBusyIcon(false),
 +        buttonAbortController,
 +    );
++
 +    if (!newMediaAttachment) {
 +        return;
+    }
 -        const isVideoFormat = isVideo(format);
+-
 -        if (isVideoFormat) {
 -            message.extra.video = image;
 -        } else {
 -            swipes.push(image);
+-
     // If already contains an image and it's not inline - leave it as is
                 message.extra.inline_image = !(message.extra.imagemedia.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    await context.saveChat();
 -    }
+}
 async function onCharacterPromptShareInput() {

+}
 /**
  * Switches anGenerates imagea tonew themedia nextattachment orbased previouson onethe inprovided themedia swipeattachment listmetadata.
  * @param {objectMediaAttachment} argsmediaAttachment Event- argumentsThe media attachment metadata.
  * @param {anyChatMessage} args.message Message- objectThe 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 onImageSwipedgenerateMediaSwipe({mediaAttachment, message, elementonStart, directiononComplete, }abortController = new AbortController()) {
 -    const context = getContext();
 -    const animationClass = 'fa-fade';
 -    const messageImg = element.find('.mes_img');
+-
 -    // Current image is already animating
 -    if (messageImg.hasClass(animationClass)) {
 -        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) {
 -        console.warn('Current image not found in the swipes');
 -        return;
 -    }
+-
 -    // Switch to previous image or wrap around if at the beginning
 -    if (direction === 'left') {
 -        const newIndex = currentIndex === 0 ? swipes.length - 1 : currentIndex - 1;
 -        message.extra.image = swipes[newIndex];
+-
 -        // Update the image in the message
 -        appendMediaToMessage(message, element, false);
 -    }
+-
 -    // Switch to next image or generate a new one if at the end
 -    if (direction === 'right') {
 -        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 = mediaAttachment.generation_type ?? message?.extra?.generationType ?? generationMode.FREE;
     const dimensions = setTypeSpecificDimensions(generationType);
             const originalSeed    extension_settings.sd.original_seed = 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 = '';
++
 +    /** @type {MediaAttachment} */
 +    const result = {
 +        url: '',
 +        type: MEDIA_TYPE.IMAGE,
 +    };
     try {
         $(stopButton).show();
         eventSource.once(CUSTOM_STOP_EVENT, stopListener);
 -                const callback = () => { };
 +        const callback = (_a, _b, _c, _d, _e, _f, format) => { result.type = isVideo(format) ? MEDIA_TYPE.VIDEO : MEDIA_TYPE.IMAGE; };
                         const hasNegativesavedPrompt = mediaAttachment.title ?? message.extra.negativetitle ?? '';
                         const prompt = await refinePrompt(message.extra.titlesavedPrompt, false);
                         const negativePromptPrefixsavedNegative = hasNegativemediaAttachment.negative ? await? refinePrompt(message.extra.negative, true) :?? '';
 -                message.extra.title = prompt;
 +        const negative = savedNegative ? await refinePrompt(savedNegative, true) : '';
++
 +        const context = getContext();
         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);
 +        onStart();
 -                swipeControls.hide();
 +        result.url = await sendGenerationRequest(generationType, prompt, negative, characterName, callback, initiators.swipe, abortController.signal);
 -                imagePath = await sendGenerationRequest(generationType, prompt, negativePromptPrefix, characterName, callback, initiators.swipe, abortController.signal);
 +        result.generation_type = generationType;
 +        result.title = prompt;
 +        result.negative = negative;
     } finally {
 +        onComplete();
         $(stopButton).hide();
 -                messageImg.removeClass(animationClass);
 -                swipeControls.show();
         eventSource.removeListener(CUSTOM_STOP_EVENT, stopListener);
         restoreOriginalDimensions(dimensions);
                         extension_settings.sd.seed = originalSeedextension_settings.sd.original_seed;
 +        delete extension_settings.sd.original_seed;
+    }
                 if (!imagePathresult.url) {
                         return null;
 -            }
+-
 -            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+31 -16 Viewed

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

+        }
         for (const message of chat) {
             // Message has no filefiles
             if (!Array.isArray(message?.extra?.filefiles) || !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 (fileTextallFileText.length < thresholdLength) {
                 continue;
+            }
             message.mes = message.mes.substring(message.extra.fileLength);
             const fileNameallFileChunks = message.extra.file.name[];
 -            const fileUrl = message.extra.file.url;
 +            const queryText = await getQueryText(chat, 'file');
++
 +            for (const file of message.extra.files) {
 +                const fileName = file.name;
 +                const fileUrl = file.url;
                 const collectionId = getFileCollectionId(fileUrl);
                 const hashesInCollection = await getSavedHashes(collectionId);
                             // File is already innot thevectorized collectionyet
                 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);
 +                if (fileChunks) {
 +                    allFileChunks.push(fileChunks);
 +                }
 +            }
             message.mes = `${fileChunksallFileChunks.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 {objectChatMessage[]} 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 {objectChatMessage[]} 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(getTextWithoutAttachments(x.mes)), hash: getStringHash(substituteParams(getTextWithoutAttachments(x.mes))), 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 => Array.isArray(x.extra?.filefiles)).map(x => x.extra.filefiles).flat();
         const allFiles = [...dataBank, ...chatAttachments];
         /**

 async function onPurgeFilesClick() {
     try {
         const dataBank = getDataBankAttachments();
         const chatAttachments = getContext().chat.filter(x => Array.isArray(x.extra?.filefiles)).map(x => x.extra.filefiles).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, 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 imagemedia = chat[j]?.extra?.imagemedia;
         const videomediaDisplay = getMediaDisplay(chat[j]?.extra?.video);
 +        const mediaIndex = getMediaIndex(chat[j]);
         const invocations = chat[j]?.extra?.tool_invocations;
         messages[i] = { 'role': role, 'content': content, name: name, 'imagemedia': imagemedia, 'videomediaDisplay': videomediaDisplay, '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 (videoInliningArray.isArray(chatPrompt.media) && chatPrompt.videomedia.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]const oldValue = themepower_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(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}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: 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: {
 -        {
             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_datesend_date: 0getMessageTimeStamp(),
         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 {objectChatMessageExtra} [extra] Additional data to be added to the message
  * @returns {objectChatMessage} 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	154	newMessage.mes = getSlashCommandsHelp();
151	155	}
152	156
153	157	if (!newMessage.extra \|\| typeof newMessage.extra !== 'object') {
154	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 {objectChatMessageExtra} [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|numberMessageTimestamp} 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|numberMessageTimestamp} 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);
     paddingborder-radius: 0.5rem5px;
 +    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;
     left: 0;
     width: 100%;
     display: flex;

     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: 1em10px;
     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;
 +    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: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	5088	display: none;
5049	5089	}
5050	5090
5051	5091	.mes_img_container:not(.img_swipes) .mes_img_swipes, {
5052		-body:not(.sd) .mes_img_swipes {
5053	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 - DEPRECATED, use `media` instead.
  * @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 - DEPRECATED, use `media` instead.
  * @property {DataMaidFileDataMaidMedia[]} [filemedia] - The filelinks objectto 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) || 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 || (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) {