Audio media attachments (#4741) * Add audio-player component * Enhance audio player functionality and styles - Adjust audio player layout and styles in CSS for better spacing and alignment. - Add audio element to message template in HTML. - Implement audio attachment handling in JavaScript, including a new AudioPlayer class. - Update media attachment structure to include titles for audio files. - Extend supported media file types in constants. * Add audio inlining control * Fix file formats list * Simplify hints * Add to prompt * Add progress title hint * Add to scrollOnMediaLoad * Add audio size hint * Add gallery controls * Delete removed media attachments from server * Adjust min width * No-op when swiping a singular media * Fix clean-up * Fix silent deletion logic * More accurate media prompt estimations * Round durations with ceiling function * Adjust rounding logic * you don't have to say it twice * Export deleteFileFromServer * Don't reference module from HTML * Clean-up styles * Move formatTime to utils * Add fa-fw to delete

2577e35c0bc162774745970fdd0057e055d4399f

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

Signed

Parents: 447c271b36be10a4f117331ec35354bcdc2a0194

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

     display: flex;
     text-align: left;
+}
+/* Audio Player Styles */
+.mes_audio_container {
+    cursor: default;
+    display: flex;
+    width: fit-content;
+    min-width: min(350px, 100%);
+    max-width: 100%;
+    background-color: var(--white20a);
+    border: 2px solid var(--SmartThemeBorderColor);
+    padding: 0.5em 1em;
+    border-radius: 15px;
+}
+.mes_audio_container .mes_img_swipes {
+    position: unset;
+    opacity: unset;
+    background: none;
+    padding: 0;
+}
+.mes_audio_container .mes_img_swipes .right_menu_button {
+    filter: brightness(75%);
+    text-shadow: none;
+}
+.mes_audio_container .mes_img_swipes .mes_img_swipe_counter {
+    filter: none;
+    text-shadow: none;
+}
+.audio-player {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+.audio-player-header {
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+    align-items: center;
+    justify-content: space-between;
+}
+.audio-player-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.audio-player-controls {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.audio-player-play-pause,
+.audio-player-volume {
+    background: none;
+    border: none;
+}
+.audio-player-time-separator {
+    font-size: 0.9em;
+    text-align: center;
+}
+.audio-player-current-time,
+.audio-player-total-time {
+    font-size: 0.9em;
+    color: var(--SmartThemeQuoteColor);
+    min-width: 40px;
+    text-align: center;
+}
+.audio-player-progress {
+    flex: 1;
+    height: 6px;
+    background-color: var(--black30a);
+    border-radius: 3px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+.audio-player-progress-bar {
+    height: 100%;
+    background-color: var(--SmartThemeEmColor);
+    border-radius: 3px;
+    transition: width 0.1s linear;
+    width: 0%;
+}

public/index.html+40 -10 Viewed

                                             </div>
                                         </label>
                                         <div id="image_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
-                                            <span data-i18n="image_inlining_hint_1">Sends images in prompts if the model supports it. Use the</span>
+                                            <span data-i18n="image_inlining_hint_1">Sends images in prompts if the model supports it.</span>
-                                            <code><i class="fa-solid fa-paperclip"></i></code>
-                                            <span data-i18n="image_inlining_hint_2">action on any message or the</span>
-                                            <code><i class="fa-solid fa-wand-magic-sparkles"></i></code>
-                                            <span data-i18n="image_inlining_hint_3">menu to attach an image file to the chat.</span>
                                         </div>
                                         <div class="flex-container flexFlowColumn wide100p textAlignCenter marginTop10" data-source="openai,custom,xai,pollinations,cohere,cometapi,nanogpt,moonshot,aimlapi,openrouter,mistralai,electronhub,azure_openai,zai">
                                             <div class="flex-container oneline-dropdown">

                                             </div>
                                         </label>
                                         <div id="video_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
-                                            <span data-i18n="video_inlining_hint_1">Sends videos in prompts if the model supports it. Use the</span>
+                                            <span data-i18n="video_inlining_hint_1">Sends videos in prompts if the model supports it.</span>
-                                            <code><i class="fa-solid fa-paperclip"></i></code>
-                                            <span data-i18n="video_inlining_hint_2">action on any message or the</span>
-                                            <code><i class="fa-solid fa-wand-magic-sparkles"></i></code>
-                                            <span data-i18n="video_inlining_hint_3">menu to attach a video file to the chat.</span>
                                             <strong data-i18n="video_inlining_hint_4">Videos must be less than 20 MB and under 1 minute long</strong>
                                         </div>
                                     </div>
                                     <div class="range-block" data-source="makersuite,vertexai">
+                                        <label for="openai_audio_inlining" class="checkbox_label flexWrap widthFreeExpand">
+                                            <input id="openai_audio_inlining" type="checkbox" />
+                                            <span data-i18n="Send inline audio">Send inline audio</span>
+                                            <div id="openai_audio_inlining_supported" data-cc-toggle="false">
+                                                <i class="icon-supported fa-solid fa-circle-check" title="Supported by the current model" data-i18n="[title]Supported by the current model"></i>
+                                                <i class="icon-unsupported fa-solid fa-circle-exclamation" title="Unsupported by the current model" data-i18n="[title]Unsupported by the current model"></i>
+                                            </div>
+                                        </label>
+                                        <div id="audio_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
+                                            <span data-i18n="audio_inlining_hint_1">Sends audio in prompts if the model supports it.</span>
+                                            <strong data-i18n="audio_inlining_hint_2">Audio must be less than 20 MB</strong>
+                                        </div>
+                                    </div>
+                                    <div class="range-block" data-source="makersuite,vertexai">
                                         <label for="openai_request_images" class="checkbox_label widthFreeExpand">
                                             <input id="openai_request_images" type="checkbox" />
                                             <span>

                 <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 id="message_audio_template" class="template_element">
+            <div class="mes_media_container mes_audio_container audio-player">
+                <audio class="mes_audio" preload="auto" hidden></audio>
+                <div class="audio-player-header">
+                    <div class="audio-player-title">Audio</div>
+                    <div class="right_menu_button mes_media_delete fa-fw fa-solid fa-trash-can" title="Delete" data-i18n="[title]Delete"></div>
+                </div>
+                <div class="audio-player-controls">
+                    <button class="audio-player-play-pause right_menu_button fa-fw fa-solid fa-play" title="Play" data-i18n="[title]Play"></button>
+                    <div class="audio-player-time">
+                        <span class="audio-player-current-time">0:00</span>
+                        <span class="audio-player-time-separator">/</span>
+                        <span class="audio-player-total-time">0:00</span>
+                    </div>
+                    <div class="audio-player-progress">
+                        <div class="audio-player-progress-bar"></div>
+                    </div>
+                    <div class="audio-player-volume-control">
+                        <button class="audio-player-volume right_menu_button fa-fw fa-solid fa-volume-high" title="Mute" data-i18n="[title]Mute"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
     <div id="movingDivs">
         <div id="floatingPrompt" class="drawer-content flexGap5">

public/locales/ar-sa.json+1 -1 Viewed

     "Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.": "يجمع الرسائل المتتالية للنظام في رسالة واحدة (باستثناء الحوارات المثالية). قد يحسن التتابع لبعض النماذج.",
     "Enable function calling": "تمكين استدعاء الوظيفة",
     "Send inline images": "إرسال الصور المضمنة",
-    "image_inlining_hint_1": "يرسل الصور في المطالبات إذا كان النموذج يدعمها .\n                                                استخدم ال",
+    "image_inlining_hint_1": "يرسل الصور في المطالبات إذا كان النموذج يدعمها .",
     "image_inlining_hint_2": "الإجراء على أي رسالة أو",
     "image_inlining_hint_3": "القائمة لإرفاق ملف صورة للدردشة.",
     "Inline Image Quality": "جودة الصورة المضمنة",

public/locales/de-de.json+1 -1 Viewed

     "Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.": "Kombiniert aufeinanderfolgende Systemnachrichten zu einer (ausschließlich Beispiel-Dialoge ausgeschlossen). Kann die Kohärenz für einige Modelle verbessern.",
     "Enable function calling": "Funktionsaufruf aktivieren",
     "Send inline images": "Inline-Bilder senden",
-    "image_inlining_hint_1": "Sendet Bilder in Eingabeaufforderungen, wenn das Modell dies unterstützt.\nVerwenden Sie die",
+    "image_inlining_hint_1": "Sendet Bilder in Eingabeaufforderungen, wenn das Modell dies unterstützt.",
     "image_inlining_hint_2": "Aktion auf eine Nachricht oder die",
     "image_inlining_hint_3": "Menü, um eine Bilddatei an den Chat anzuhängen.",
     "Inline Image Quality": "Inline-Bildqualität",

public/locales/es-es.json+1 -1 Viewed

     "Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.": "Combina mensajes del sistema consecutivos en uno solo (excluyendo diálogos de ejemplo). Puede mejorar la coherencia para algunos modelos.",
     "Enable function calling": "Habilitar llamada a función",
     "Send inline images": "Enviar imágenes en línea",
-    "image_inlining_hint_1": "Envía imágenes en mensajes si el modelo lo admite.\n                                                Utilizar el",
+    "image_inlining_hint_1": "Envía imágenes en mensajes si el modelo lo admite.",
     "image_inlining_hint_2": "acción sobre cualquier mensaje o el",
     "image_inlining_hint_3": "menú para adjuntar un archivo de imagen al chat.",
     "Inline Image Quality": "Calidad de imagen en línea",

public/locales/fr-fr.json+1 -1 Viewed

     "Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.": "Combine les messages système consécutifs en un seul (à l'exclusion des dialogues d'exemple). Peut améliorer la cohérence pour certains modèles.",
     "Enable function calling": "Activer l'appel de fonction",
     "Send inline images": "Envoyer des images en ligne",
-    "image_inlining_hint_1": "Envoie des images dans les prompts si le modèle le prend en charge.\nUtilisez le",
+    "image_inlining_hint_1": "Envoie des images dans les prompts si le modèle le prend en charge.",
     "image_inlining_hint_2": "action sur n'importe quel message ou le",
     "image_inlining_hint_3": "menu pour joindre un fichier image au chat.",
     "Inline Image Quality": "Qualité d'image en ligne",

public/locales/is-is.json+1 -1 Viewed

     "Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.": "Sameinar samhliða kerfisskilaboð í eitt (sem er utan umsagna dæmum). Getur bætt samfelldni fyrir sumar módel.",
     "Enable function calling": "Virkja aðgerðarkall",
     "Send inline images": "Senda myndir í línu",
-    "image_inlining_hint_1": "Sendir myndir í skilaboðum ef líkanið styður það.\n                                                Nota",
+    "image_inlining_hint_1": "Sendir myndir í skilaboðum ef líkanið styður það.",
     "image_inlining_hint_2": "aðgerð á hvaða skilaboðum sem er eða",
     "image_inlining_hint_3": "valmynd til að hengja myndskrá við spjallið.",
     "Inline Image Quality": "Innbyggð myndgæði",

public/locales/it-it.json+1 -1 Viewed

     "Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.": "Combina i messaggi di sistema consecutivi in uno solo (escludendo i dialoghi di esempio). Potrebbe migliorare la coerenza per alcuni modelli.",
     "Enable function calling": "Abilita la chiamata alla funzione",
     "Send inline images": "Invia immagini inline",
-    "image_inlining_hint_1": "Invia immagini nei prompt se il modello lo supporta.\n                                                Usa il",
+    "image_inlining_hint_1": "Invia immagini nei prompt se il modello lo supporta.",
     "image_inlining_hint_2": "azione su qualsiasi messaggio o il",
     "image_inlining_hint_3": "menu per allegare un file immagine alla chat.",
     "Inline Image Quality": "Qualità dell'immagine in linea",

public/locales/ko-kr.json+1 -3 Viewed

     "Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.": "연속된 시스템 메시지를 하나로 결합합니다(예제 대화 제외). 일부 모델의 일관성을 향상시킬 수 있습니다.",
     "Enable function calling": "함수 호출 활성화",
     "Send inline images": "인라인 이미지 전송",
-    "image_inlining_hint_1": "모델이 지원하는 경우 메시지로 이미지를 보냅니다.\n                                                사용",
+    "image_inlining_hint_1": "모델이 지원하는 경우 메시지로 이미지를 보냅니다.",
-    "image_inlining_hint_2": "메시지에 대한 조치 또는",
-    "image_inlining_hint_3": "채팅에 이미지 파일을 첨부하는 메뉴입니다.",
     "Inline Image Quality": "인라인 이미지 품질",
     "openai_inline_image_quality_auto": "자동",
     "openai_inline_image_quality_low": "낮은",

public/locales/nl-nl.json+1 -3 Viewed

     "Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.": "Combineert opeenvolgende systeemberichten tot één (exclusief voorbeeld dialogen). Kan de coherentie verbeteren voor sommige modellen.",
     "Enable function calling": "Schakel functieaanroepen in",
     "Send inline images": "Inline afbeeldingen verzenden",
-    "image_inlining_hint_1": "Verzendt afbeeldingen in prompts als het model dit ondersteunt.\n                                                Gebruik de",
+    "image_inlining_hint_1": "Verzendt afbeeldingen in prompts als het model dit ondersteunt.",
-    "image_inlining_hint_2": "actie op elk bericht of de",
-    "image_inlining_hint_3": "menu om een afbeeldingsbestand aan de chat toe te voegen.",
     "Inline Image Quality": "Inline-beeldkwaliteit",
     "openai_inline_image_quality_auto": "Auto",
     "openai_inline_image_quality_low": "Laag",

public/locales/pt-pt.json+1 -3 Viewed

     "Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.": "Combina mensagens do sistema consecutivas em uma (excluindo diálogos de exemplo). Pode melhorar a coerência para alguns modelos.",
     "Enable function calling": "Habilitar chamada de função",
     "Send inline images": "Enviar imagens inline",
-    "image_inlining_hint_1": "Envia imagens em prompts se o modelo suportar.\n                                                Use o",
+    "image_inlining_hint_1": "Envia imagens em prompts se o modelo suportar.",
-    "image_inlining_hint_2": "ação em qualquer mensagem ou",
-    "image_inlining_hint_3": "menu para anexar um arquivo de imagem ao chat.",
     "Inline Image Quality": "Qualidade de imagem embutida",
     "openai_inline_image_quality_auto": "Auto",
     "openai_inline_image_quality_low": "Baixo",

public/locales/ru-ru.json+2 -6 Viewed

     "The prompt to be sent.": "Текст промпта.",
     "prompt_manager_forbid_overrides": "Запретить перезапись",
     "This prompt cannot be overridden by character cards, even if overrides are preferred.": "Карточка персонажа не сможет перезаписать этот промпт, даже если настройки отдают приоритет именно ей.",
-    "image_inlining_hint_1": "Отправлять картинки как часть промпта, если позволяет модель. Чтобы добавить в чат изображение, используйте на нужном сообщении действие",
+    "image_inlining_hint_1": "Отправлять картинки как часть промпта, если позволяет модель.",
-    "image_inlining_hint_2": ". Также это можно сделать через меню",
-    "image_inlining_hint_3": ".",
     "Contest Winners": "Победители конкурса",
     "Rename Background": "Переименовать фон",
     "Lock": "Закрепить",

     "Allocates a portion of the response length for thinking (min: 1024 tokens, low: 10%, medium: 25%, high: 50%, max: 95%), but minimum 1024 tokens. Auto does not request thinking.": "Отводит часть ответа под рассуждения (Минимальные: 10%, Обычные: 25%, Подробные: 50%, Максимальные: 95%), но минимум 1024 токена. При выборе значение Авто рассуждения не запрашиваются.",
     "Use system prompt": "Включить системный промпт",
     "Send inline videos": "Отправлять inline-видео",
-    "video_inlining_hint_1": "Отправляет модели видео, если она поддерживает такую возможность. Чтобы прикрепить видео к чату, используйте на любом сообщении кнопку",
+    "video_inlining_hint_1": "Отправляет модели видео, если она поддерживает такую возможность.",
-    "video_inlining_hint_2": "либо меню",
-    "video_inlining_hint_3": ".",
     "video_inlining_hint_4": "Видео должно весить не более 20 Мб и длиться не дольше 1 минуты.",
     "Allocates a portion of the response length for thinking (Flash 2.5/Pro 2.5) (min: 0/128 tokens, low: 10%, medium: 25%, high: 50%, max: 24576/32768 tokens). Auto lets the model decide.": "Отводит часть ответа под рассуждения (Flash 2.5/Pro 2.5) (Минимальные: 0/128 токенов, Поверхностные: 10%, Обычные: 25%, Подробные: 50%, Максимальные: 24576/32768 токенов). При выборе значения Авто модель определяет объём самостоятельно.",
     "Google Vertex AI Configuration": "Настройки Google Vertex AI",

public/locales/th-th.json+2 -4 Viewed

   "Allows the model to return its thinking process.": "อนุญาตให้โมเดลส่งคืนกระบวนการคิดของตัวเอง",
   "This setting affects visibility only.": "การตั้งค่านี้มีผลต่อการมองเห็นเท่านั้น",
   "Send inline images": "ส่งรูปภาพแบบ inline",
-  "image_inlining_hint_1": "ส่งรูปภาพในพรอมต์หากโมเดลรองรับ โดยใช้",
+  "image_inlining_hint_1": "ส่งรูปภาพในพรอมต์หากโมเดลรองรับ",
-  "image_inlining_hint_2": "เพื่อดำเนินการในข้อความนั้นๆ หรือใช้ตัวเลือก",
-  "image_inlining_hint_3": "เพื่อแนบไฟล์รูปภาพลงในแชท",
   "Inline Image Quality": "คุณภาพรูปภาพ Inline",
   "openai_inline_image_quality_auto": "อัตโนมัติ",
   "openai_inline_image_quality_low": "ต่ำ",

   "Stop Inspecting": "Stop Inspecting",
   "Inspect Prompts": "ตรวจสอบ Prompt",
   "Toggle prompt inspection": "สลับการตรวจสอบ Prompt"
-}
 \ No newline at end of file
+}

public/locales/uk-ua.json+1 -3 Viewed

     "Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.": "Об'єднує послідовні системні повідомлення в одне (крім прикладів діалогів). Може покращити співпрацю для деяких моделей.",
     "Enable function calling": "Увімкнути виклик функцій",
     "Send inline images": "Надсилати вбудовані зображення",
-    "image_inlining_hint_1": "Надсилає зображення у підказках, якщо модель це підтримує.\n                                                Використовувати",
+    "image_inlining_hint_1": "Надсилає зображення у підказках, якщо модель це підтримує.",
-    "image_inlining_hint_2": "дії з будь-яким повідомленням або",
-    "image_inlining_hint_3": "меню, щоб прикріпити файл зображення до чату.",
     "Inline Image Quality": "Якість вбудованого зображення",
     "openai_inline_image_quality_auto": "Авто",
     "openai_inline_image_quality_low": "Низький",

public/locales/vi-vn.json+1 -3 Viewed

     "Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.": "Kết hợp các tin nhắn hệ thống liên tiếp thành một (loại bỏ các đoạn hội thoại mẫu). Có thể cải thiện tính nhất quán cho một số model.",
     "Enable function calling": "Sử dụng tính năng gọi hàm (function calling)",
     "Send inline images": "Gửi hình ảnh nội bộ",
-    "image_inlining_hint_1": "Gửi hình ảnh theo Prompt nếu kiểu máy hỗ trợ.\n                                                Sử dụng",
+    "image_inlining_hint_1": "Gửi hình ảnh theo Prompt nếu kiểu máy hỗ trợ.",
-    "image_inlining_hint_2": "hành động đối với bất kỳ tin nhắn nào hoặc",
-    "image_inlining_hint_3": "menu để đính kèm tệp hình ảnh vào cuộc trò chuyện.",
     "Inline Image Quality": "Chất lượng hình ảnh nội tuyến",
     "openai_inline_image_quality_auto": "Tự động",
     "openai_inline_image_quality_low": "Thấp",

public/locales/zh-cn.json+2 -6 Viewed

     "enable_functions_desc_3": "可以被各种扩展利用来提供附加功能。",
     "enable_functions_desc_4": "当提示词后处理没有选择工具时不支持。",
     "Send inline images": "发送图片",
-    "image_inlining_hint_1": "如果模型支持，就可以在提示词中发送图片。\n发送消息时，点击",
+    "image_inlining_hint_1": "如果模型支持，就可以在提示词中发送图片。",
-    "image_inlining_hint_2": "在这里（",
-    "image_inlining_hint_3": "）将图片添加到消息中。",
     "Inline Image Quality": "图片画质",
     "openai_inline_image_quality_auto": "自动",
     "openai_inline_image_quality_low": "低",
     "openai_inline_image_quality_high": "高",
     "Send inline videos": "发送视频",
-    "video_inlining_hint_1": "当模型支持时，将视频发送给模型。使用",
+    "video_inlining_hint_1": "当模型支持时，将视频发送给模型。",
-    "video_inlining_hint_2": "在任意消息上添加视频，或",
-    "video_inlining_hint_3": "菜单来添加视频。",
     "video_inlining_hint_4": "视频必须在 20MB 以下且时长不超过1分钟。",
     "Request inline images": "请求图片返回",
     "Allows the model to return image attachments.": "允许模型返回图片附件。",

public/locales/zh-tw.json+2 -6 Viewed

     "Combines consecutive system messages into one (excluding example dialogues). May improve coherence for some models.": "將連續的系統訊息合併為一個（不包括對話範例）。可能會提高某些模型的一致性。",
     "Enable function calling": "啟用函式呼叫",
     "Send inline images": "傳送內嵌圖片",
-    "image_inlining_hint_1": "如果模型支援，則在提示詞中傳送圖片。\n使用任何訊息上的",
+    "image_inlining_hint_1": "如果模型支援，則在提示詞中傳送圖片。",
-    "image_inlining_hint_2": "動作或",
-    "image_inlining_hint_3": "選單來附加圖片文件到聊天中。",
     "Inline Image Quality": "內嵌圖片品質",
     "openai_inline_image_quality_auto": "自動",
     "openai_inline_image_quality_low": "低",

     "Min Keep": "最小保留",
     "enable_functions_desc_4": "當使用「無工具」提示後處理時不支援！",
     "Send inline videos": "傳送內嵌影片",
-    "video_inlining_hint_1": "若模型支援，則在提示中傳送影片。使用",
+    "video_inlining_hint_1": "若模型支援，則在提示中傳送影片。",
-    "video_inlining_hint_2": "操作於任何訊息或使用",
-    "video_inlining_hint_3": "選單以上傳影片檔案到聊天中。",
     "video_inlining_hint_4": "影片大小必須小於 20 MB 且長度低於 1 分鐘",
     "This setting affects visibility only.": "此設定僅影響可見性。",
     "Allocates a portion of the response length for thinking (min: 1024 tokens, low: 10%, medium: 25%, high: 50%, max: 95%), but minimum 1024 tokens. Auto does not request thinking.": "為推理部分分配回應長度（最大回應長度至少需 1024 符元，低：10%、中：25%、高：50%、最高：95%）。選擇「自動」將不請求推理。",

public/script.js+40 -2 Viewed

 import { applyStreamFadeIn } from './scripts/util/stream-fadein.js';
 import { initDomHandlers } from './scripts/dom-handlers.js';
 import { SimpleMutex } from './scripts/util/SimpleMutex.js';
+import { AudioPlayer } from './scripts/audio-player.js';
 // API OBJECT FOR EXTERNAL WIRING
 globalThis.SillyTavern = {

 function scrollOnMediaLoad() {
     const started = Date.now();
-    const media = chatElement.find('.mes_block img, .mes_block video').toArray();
+    const media = chatElement.find('.mes_block img, .mes_block video, .mes_block audio').toArray();
     let mediaLoaded = 0;
     for (const currentElement of media) {

@@ -1433,7 +1434,7 @@ function scrollOnMediaLoad() {
1433	currentElement.addEventListener('error', incrementAndCheck);	1434	currentElement.addEventListener('error', incrementAndCheck);
1434	}	1435	}
1435	}	1436	}
1436	if (currentElement instanceof HTMLVideoElement) {	1437	if (currentElement instanceof HTMLMediaElement) {
1437	if (currentElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {	1438	if (currentElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
1438	incrementAndCheck();	1439	incrementAndCheck();
1439	} else {	1440	} else {

+    }
     /**
+     * Appends a single audio attachment to the message element.
+     * @param {MediaAttachment} attachment Audio attachment object
+     * @param {number} index Index of the audio attachment
+     * @returns {JQuery<HTMLElement>} The appended audio container element
+     */
+    function appendAudioAttachment(attachment, index) {
+        const template = $('#message_audio_template .mes_audio_container').clone();
+        template.attr('data-index', index);
+        const audio = template.find('.mes_audio');
+        audio.attr('src', attachment.url);
+        audio.attr('title', attachment.title || mes.extra.title || '');
+        mediaPromises.push(new Promise((resolve) => {
+            function onLoad() {
+                resolve();
+            }
+            function onError() {
+                audio.addClass('error');
+                resolve();
+            }
+            if (audio.prop('readyState') >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+                onLoad();
+            } else {
+                audio.off('loadeddata').on('loadeddata', onLoad);
+                audio.off('error').on('error', onError);
+            }
+        }));
+        new AudioPlayer(audio.get(0), template.get(0));
+        mediaBlocks.push(template);
+        return template;
+    }
+    /**
      * Appends a media attachment to the message element.
      * @param {MediaAttachment} attachment Media attachment object
      * @param {number} index Index of the media attachment

                 return appendImageAttachment(attachment, index);
             case MEDIA_TYPE.VIDEO:
                 return appendVideoAttachment(attachment, index);
+            case MEDIA_TYPE.AUDIO:
+                return appendAudioAttachment(attachment, index);
+        }
         console.warn(`Unknown media type: ${attachment.type}, defaulting to image.`, attachment);

public/scripts/audio-player.js+605 -0 Viewed

+import { formatTime } from './utils.js';
+export class AudioPlayer {
+    /**
+     * Creates an audio player instance
+     * @param {HTMLElement} audioElement - The audio element to control
+     * @param {HTMLElement} containerElement - The container element with player controls
+     * @param {Object} options - Configuration options
+     */
+    constructor(audioElement, containerElement, options = {}) {
+        if (!(audioElement instanceof HTMLAudioElement)) {
+            throw new Error('First argument must be an HTMLAudioElement');
+        }
+        if (!(containerElement instanceof HTMLElement)) {
+            throw new Error('Second argument must be an HTMLElement');
+        }
+        this.audio = audioElement;
+        this.container = containerElement;
+        this.options = {
+            title: '',
+            autoplay: false,
+            volume: 1.0,
+            onPlay: null,
+            onPause: null,
+            onEnded: null,
+            onTimeUpdate: null,
+            onVolumeChange: null,
+            ...options,
+        };
+        this.isDragging = false;
+        this.isDestroyed = false;
+        // Store bound event handlers for cleanup
+        this.boundHandlers = {
+            // Audio event handlers
+            audioLoadedMetadata: this.onAudioLoadedMetadata.bind(this),
+            audioTimeUpdate: this.onAudioTimeUpdate.bind(this),
+            audioPlay: this.onAudioPlay.bind(this),
+            audioPause: this.onAudioPause.bind(this),
+            audioEnded: this.onAudioEnded.bind(this),
+            audioVolumeChange: this.onAudioVolumeChange.bind(this),
+            // Control event handlers
+            playPauseClick: this.onPlayPauseClick.bind(this),
+            volumeClick: this.onVolumeClick.bind(this),
+            volumeInput: this.onVolumeInput.bind(this),
+            progressMouseDown: this.onProgressMouseDown.bind(this),
+            progressClick: this.onProgressClick.bind(this),
+            progressMouseMove: this.onProgressMouseMove.bind(this),
+            documentMouseMove: this.onDocumentMouseMove.bind(this),
+            documentMouseUp: this.onDocumentMouseUp.bind(this),
+        };
+        // MutationObserver for DOM cleanup detection
+        this.observer = null;
+        this.init();
+    }
+    /**
+     * Initializes the audio player by setting up elements, events, and initial state
+     * @returns {void}
+     */
+    init() {
+        this.findElements();
+        this.bindEvents();
+        this.setupDOMObserver();
+        if (this.options.title) {
+            this.setTitle(this.options.title);
+        } else if (this.audio.title) {
+            this.setTitle(this.audio.title);
+        } else if (this.audio.src) {
+            const srcParts = this.audio.src.split('/');
+            this.setTitle(decodeURIComponent(srcParts[srcParts.length - 1]));
+        }
+        if (this.options.autoplay) {
+            this.play();
+        }
+        this.setVolume(this.options.volume);
+        // Initialize time displays
+        this.updateTimeDisplays();
+    }
+    /**
+     * Finds and caches all required DOM elements within the container
+     * @returns {void}
+     */
+    findElements() {
+        this.elements = {
+            title: this.container.querySelector('.audio-player-title'),
+            playPauseBtn: this.container.querySelector('.audio-player-play-pause'),
+            currentTime: this.container.querySelector('.audio-player-current-time'),
+            totalTime: this.container.querySelector('.audio-player-total-time'),
+            progress: this.container.querySelector('.audio-player-progress'),
+            progressBar: this.container.querySelector('.audio-player-progress-bar'),
+            volumeBtn: this.container.querySelector('.audio-player-volume'),
+        };
+        // Validate required elements
+        const requiredElements = ['playPauseBtn', 'currentTime', 'totalTime', 'progress', 'progressBar', 'volumeBtn'];
+        for (const key of requiredElements) {
+            if (!this.elements[key]) {
+                console.warn(`AudioPlayer: Required element .audio-player-${key.replace(/([A-Z])/g, '-$1').toLowerCase()} not found`);
+            }
+        }
+    }
+    /**
+     * Sets up a MutationObserver to detect when audio or container elements are removed from DOM
+     * @returns {void}
+     */
+    setupDOMObserver() {
+        // Watch for removal of audio or container from DOM
+        this.observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                for (const node of mutation.removedNodes) {
+                    if (node === this.audio || node === this.container ||
+                        node.contains?.(this.audio) || node.contains?.(this.container)) {
+                        this.destroy();
+                        return;
+                    }
+                }
+            }
+        });
+        // Observe the parent nodes
+        const chatParent = this.audio.closest('#chat') ?? document.body;
+        if (chatParent) {
+            this.observer.observe(chatParent, { childList: true, subtree: true });
+        }
+    }
+    /**
+     * Binds all event listeners to audio and control elements
+     * @returns {void}
+     */
+    bindEvents() {
+        // Audio events
+        this.audio.addEventListener('loadedmetadata', this.boundHandlers.audioLoadedMetadata);
+        this.audio.addEventListener('timeupdate', this.boundHandlers.audioTimeUpdate);
+        this.audio.addEventListener('play', this.boundHandlers.audioPlay);
+        this.audio.addEventListener('pause', this.boundHandlers.audioPause);
+        this.audio.addEventListener('ended', this.boundHandlers.audioEnded);
+        this.audio.addEventListener('volumechange', this.boundHandlers.audioVolumeChange);
+        // Control events
+        if (this.elements.playPauseBtn) {
+            this.elements.playPauseBtn.addEventListener('click', this.boundHandlers.playPauseClick);
+        }
+        if (this.elements.volumeBtn) {
+            this.elements.volumeBtn.addEventListener('click', this.boundHandlers.volumeClick);
+        }
+        if (this.elements.progress) {
+            this.elements.progress.addEventListener('mousedown', this.boundHandlers.progressMouseDown);
+            this.elements.progress.addEventListener('click', this.boundHandlers.progressClick);
+            this.elements.progress.addEventListener('mousemove', this.boundHandlers.progressMouseMove);
+        }
+    }
+    /**
+     * Removes all event listeners from audio and control elements
+     * @returns {void}
+     */
+    unbindEvents() {
+        // Audio events
+        this.audio.removeEventListener('loadedmetadata', this.boundHandlers.audioLoadedMetadata);
+        this.audio.removeEventListener('timeupdate', this.boundHandlers.audioTimeUpdate);
+        this.audio.removeEventListener('play', this.boundHandlers.audioPlay);
+        this.audio.removeEventListener('pause', this.boundHandlers.audioPause);
+        this.audio.removeEventListener('ended', this.boundHandlers.audioEnded);
+        this.audio.removeEventListener('volumechange', this.boundHandlers.audioVolumeChange);
+        // Control events
+        if (this.elements.playPauseBtn) {
+            this.elements.playPauseBtn.removeEventListener('click', this.boundHandlers.playPauseClick);
+        }
+        if (this.elements.volumeBtn) {
+            this.elements.volumeBtn.removeEventListener('click', this.boundHandlers.volumeClick);
+        }
+        if (this.elements.progress) {
+            this.elements.progress.removeEventListener('mousedown', this.boundHandlers.progressMouseDown);
+            this.elements.progress.removeEventListener('click', this.boundHandlers.progressClick);
+            this.elements.progress.removeEventListener('mousemove', this.boundHandlers.progressMouseMove);
+        }
+        // Document events
+        document.removeEventListener('mousemove', this.boundHandlers.documentMouseMove);
+        document.removeEventListener('mouseup', this.boundHandlers.documentMouseUp);
+    }
+    // Audio event handlers
+    /**
+     * Handles the audio element's loadedmetadata event
+     * @returns {void}
+     */
+    onAudioLoadedMetadata() {
+        if (this.isDestroyed) return;
+        this.updateTimeDisplays();
+    }
+    /**
+     * Handles the audio element's timeupdate event
+     * @returns {void}
+     */
+    onAudioTimeUpdate() {
+        if (this.isDestroyed || this.isDragging) return;
+        const percent = (this.audio.currentTime / this.audio.duration) * 100 || 0;
+        if (this.elements.progressBar) {
+            /** @type {HTMLElement} */ (this.elements.progressBar).style.width = percent + '%';
+        }
+        if (this.elements.currentTime) {
+            this.elements.currentTime.textContent = formatTime(this.audio.currentTime);
+        }
+        if (typeof this.options.onTimeUpdate === 'function') {
+            this.options.onTimeUpdate.call(this, this.audio.currentTime, this.audio.duration);
+        }
+    }
+    /**
+     * Handles the audio element's play event
+     * @returns {void}
+     */
+    onAudioPlay() {
+        if (this.isDestroyed) return;
+        if (this.elements.playPauseBtn) {
+            this.elements.playPauseBtn.classList.remove('fa-play');
+            this.elements.playPauseBtn.classList.add('fa-pause');
+            this.elements.playPauseBtn.setAttribute('title', 'Pause');
+        }
+        if (typeof this.options.onPlay === 'function') {
+            this.options.onPlay.call(this);
+        }
+    }
+    /**
+     * Handles the audio element's pause event
+     * @returns {void}
+     */
+    onAudioPause() {
+        if (this.isDestroyed) return;
+        if (this.elements.playPauseBtn) {
+            this.elements.playPauseBtn.classList.remove('fa-pause');
+            this.elements.playPauseBtn.classList.add('fa-play');
+            this.elements.playPauseBtn.setAttribute('title', 'Play');
+        }
+        if (typeof this.options.onPause === 'function') {
+            this.options.onPause.call(this);
+        }
+    }
+    /**
+     * Handles the audio element's ended event
+     * @returns {void}
+     */
+    onAudioEnded() {
+        if (this.isDestroyed) return;
+        if (this.elements.playPauseBtn) {
+            this.elements.playPauseBtn.classList.remove('fa-pause');
+            this.elements.playPauseBtn.classList.add('fa-play');
+            this.elements.playPauseBtn.setAttribute('title', 'Play');
+        }
+        if (typeof this.options.onEnded === 'function') {
+            this.options.onEnded.call(this);
+        }
+    }
+    /**
+     * Handles the audio element's volumechange event
+     * @returns {void}
+     */
+    onAudioVolumeChange() {
+        if (this.isDestroyed) return;
+        this.updateVolumeIcon();
+        if (typeof this.options.onVolumeChange === 'function') {
+            this.options.onVolumeChange.call(this, this.audio.volume, this.audio.muted);
+        }
+    }
+    // Control event handlers
+    /**
+     * Handles click events on the play/pause button
+     * @param {MouseEvent} e - The click event
+     * @returns {void}
+     */
+    onPlayPauseClick(e) {
+        e.preventDefault();
+        this.togglePlay();
+    }
+    /**
+     * Handles click events on the volume button
+     * @param {MouseEvent} e - The click event
+     * @returns {void}
+     */
+    onVolumeClick(e) {
+        e.preventDefault();
+        this.toggleMute();
+    }
+    /**
+     * Handles input events on the volume slider
+     * @param {InputEvent} e - The input event
+     * @returns {void}
+     */
+    onVolumeInput(e) {
+        if (!(e.target instanceof HTMLInputElement)) return;
+        const value = parseFloat(e.target.value);
+        this.setVolume(value);
+    }
+    /**
+     * Handles mousedown events on the progress bar
+     * @param {MouseEvent} e - The mousedown event
+     * @returns {void}
+     */
+    onProgressMouseDown(e) {
+        this.isDragging = true;
+        this.updateProgress(e);
+        document.addEventListener('mousemove', this.boundHandlers.documentMouseMove);
+        document.addEventListener('mouseup', this.boundHandlers.documentMouseUp);
+    }
+    /**
+     * Handles click events on the progress bar
+     * @param {MouseEvent} e - The click event
+     * @returns {void}
+     */
+    onProgressClick(e) {
+        if (!this.isDragging) {
+            this.updateProgress(e);
+        }
+    }
+    /**
+     * Handles mousemove on the progress bar (no-op if dragging)
+     * @param {MouseEvent} e - The mousemove event
+     * @returns {void}
+     */
+    onProgressMouseMove(e) {
+        if (!this.isDragging) {
+            this.updateProgressTitle(e);
+        }
+    }
+    /**
+     * Handles document mousemove events during progress bar dragging
+     * @param {MouseEvent} e - The mousemove event
+     * @returns {void}
+     */
+    onDocumentMouseMove(e) {
+        if (this.isDragging) {
+            this.updateProgress(e);
+        }
+    }
+    /**
+     * Handles document mouseup events to end progress bar dragging
+     * @returns {void}
+     */
+    onDocumentMouseUp() {
+        if (this.isDragging) {
+            this.isDragging = false;
+            document.removeEventListener('mousemove', this.boundHandlers.documentMouseMove);
+            document.removeEventListener('mouseup', this.boundHandlers.documentMouseUp);
+        }
+    }
+    /**
+     * Updates the progress bar position and seeks audio based on mouse position
+     * @param {MouseEvent} e - The mouse event containing position information
+     * @returns {void}
+     */
+    updateProgress(e) {
+        if (!this.elements.progress) return;
+        const rect = this.elements.progress.getBoundingClientRect();
+        const offsetX = e.clientX - rect.left;
+        const width = rect.width;
+        const percent = Math.max(0, Math.min(100, (offsetX / width) * 100));
+        if (this.elements.progressBar) {
+            /** @type {HTMLElement} */ (this.elements.progressBar).style.width = percent + '%';
+        }
+        const seekTime = (percent / 100) * this.audio.duration;
+        if (isFinite(seekTime)) {
+            this.audio.currentTime = seekTime;
+            if (this.elements.currentTime) {
+                this.elements.currentTime.textContent = formatTime(seekTime);
+            }
+        }
+    }
+    /**
+     * Updates the volume icon based on current volume and mute state
+     * @returns {void}
+     */
+    updateVolumeIcon() {
+        if (!this.elements.volumeBtn) return;
+        const volume = this.audio.volume;
+        const isMuted = this.audio.muted;
+        this.elements.volumeBtn.classList.remove('fa-volume-high', 'fa-volume-low', 'fa-volume-off', 'fa-volume-xmark');
+        if (isMuted || volume === 0) {
+            this.elements.volumeBtn.classList.add('fa-volume-xmark');
+        } else if (volume < 0.5) {
+            this.elements.volumeBtn.classList.add('fa-volume-low');
+        } else {
+            this.elements.volumeBtn.classList.add('fa-volume-high');
+        }
+    }
+    /**
+     * Updates the current time and total time display elements
+     * @returns {void}
+     */
+    updateTimeDisplays() {
+        if (this.elements.currentTime) {
+            this.elements.currentTime.textContent = formatTime(this.audio.currentTime || 0);
+        }
+        if (this.elements.totalTime) {
+            this.elements.totalTime.textContent = formatTime(this.audio.duration || 0);
+        }
+    }
+    /**
+     * Updates the mouseover title on the progress bar to show time at cursor position
+     * @param {MouseEvent} e - The mouse event
+     * @returns {void}
+     */
+    updateProgressTitle(e) {
+        if (!this.elements.progress) return;
+        const rect = this.elements.progress.getBoundingClientRect();
+        const offsetX = e.clientX - rect.left;
+        const width = rect.width;
+        const percent = Math.max(0, Math.min(100, (offsetX / width) * 100));
+        this.elements.progress.setAttribute('title', formatTime((percent / 100) * this.audio.duration));
+    }
+    // Public methods
+    /**
+     * Starts audio playback
+     * @returns {void}
+     */
+    play() {
+        if (this.isDestroyed) return;
+        if (this.audio.paused) {
+            const playPromise = this.audio.play();
+            if (playPromise !== undefined) {
+                playPromise.catch(error => {
+                    console.error('Audio play failed:', error);
+                });
+            }
+        }
+    }
+    /**
+     * Pauses audio playback
+     * @returns {void}
+     */
+    pause() {
+        if (this.isDestroyed) return;
+        if (!this.audio.paused) {
+            this.audio.pause();
+        }
+    }
+    /**
+     * Toggles between play and pause states
+     * @returns {void}
+     */
+    togglePlay() {
+        if (this.audio.paused) {
+            this.play();
+        } else {
+            this.pause();
+        }
+    }
+    /**
+     * Seeks to a specific time in the audio
+     * @param {number} time - The time in seconds to seek to
+     * @returns {void}
+     */
+    seek(time) {
+        if (this.isDestroyed) return;
+        if (isFinite(time) && time >= 0 && time <= this.audio.duration) {
+            this.audio.currentTime = time;
+        }
+    }
+    /**
+     * Sets the volume level
+     * @param {number} volume - Volume level between 0.0 and 1.0
+     * @returns {void}
+     */
+    setVolume(volume) {
+        if (this.isDestroyed) return;
+        volume = Math.max(0, Math.min(1, volume));
+        this.audio.volume = volume;
+        if (volume > 0 && this.audio.muted) {
+            this.audio.muted = false;
+        }
+    }
+    /**
+     * Mutes the audio
+     * @returns {void}
+     */
+    mute() {
+        if (this.isDestroyed) return;
+        this.audio.muted = true;
+    }
+    /**
+     * Unmutes the audio
+     * @returns {void}
+     */
+    unmute() {
+        if (this.isDestroyed) return;
+        this.audio.muted = false;
+    }
+    /**
+     * Toggles the mute state
+     * @returns {void}
+     */
+    toggleMute() {
+        if (this.isDestroyed) return;
+        this.audio.muted = !this.audio.muted;
+    }
+    /**
+     * Sets the audio source URL
+     * @param {string} src - The URL of the audio file
+     * @returns {void}
+     */
+    setSrc(src) {
+        if (this.isDestroyed) return;
+        this.audio.src = src;
+    }
+    /**
+     * Sets the title displayed in the player
+     * @param {string} title - The title text to display
+     * @returns {void}
+     */
+    setTitle(title) {
+        if (this.isDestroyed) return;
+        this.options.title = title;
+        if (this.elements.title) {
+            this.elements.title.textContent = title;
+        }
+    }
+    /**
+     * Cleans up the player by removing event listeners and clearing references
+     * @returns {void}
+     */
+    destroy() {
+        if (this.isDestroyed) return;
+        this.isDestroyed = true;
+        // Stop observing DOM changes
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+        // Pause and clear audio
+        this.pause();
+        this.audio.src = '';
+        // Remove all event listeners
+        this.unbindEvents();
+        // Clear references to prevent memory leaks
+        this.audio = null;
+        this.container = null;
+        this.elements = null;
+        this.options = null;
+        this.boundHandlers = null;
+    }
+}

public/scripts/chats.js+76 -6 Viewed

                 if (!Array.isArray(message.extra.media)) {
                     message.extra.media = [];
+                }
-                message.extra.media.push({ url: imageUrl, type: mediaType });
+                message.extra.media.push({ url: imageUrl, type: mediaType, title: file.name });
                 message.extra.media_index = message.extra.media.length - 1;
                 message.extra.inline_image = true;
             } else {

  */
 async function validateFile(file) {
     const fileText = await file.text();
-    const isMedia = file.type.startsWith('image/') || file.type.startsWith('video/');
+    const isMedia = file.type.startsWith('image/') || file.type.startsWith('video/') || file.type.startsWith('audio/');
     const isBinary = /^[\x00-\x08\x0E-\x1F\x7F-\xFF]*$/.test(fileText);
     if (!isMedia && file.size > fileSizeLimit) {

         return;
+    }
+    if (mediaAttachment.type === MEDIA_TYPE.AUDIO) {
+        console.warn('Audio media cannot be expanded');
+        return;
+    }
     /**
      * Gets the media element based on its type.
      * @returns {HTMLElement} Media element

         return;
+    }
+    const deleteUrls = [];
+    const deleteFromServerId = 'delete_media_files_checkbox';
+    let deleteFromServer = true;
     const value = await Popup.show.confirm(t`Delete media from message?`, t`This action can't be undone.`, {
         okButton: t`Delete one`,
         cancelButton: false,

                 result: POPUP_RESULT.CANCELLED,
             },
         ],
+        customInputs: [
+            {
+                type: 'checkbox',
+                label: t`Also delete files from server`,
+                id: deleteFromServerId,
+                defaultState: true,
+            },
+        ],
+        onClose: (popup) => {
+            deleteFromServer = Boolean(popup.inputResults.get(deleteFromServerId) ?? false);
+        },
     });
     if (!value) {

         return;
+    }
+    deleteUrls.push(message.extra.media[mediaIndex].url);
     message.extra.media.splice(mediaIndex, 1);
     if (message.extra.media_index === mediaIndex) {

+    }
     if (value === POPUP_RESULT.CUSTOM1) {
+        for (const media of message.extra.media) {
+            deleteUrls.push(media.url);
+        }
         delete message.extra.media;
         delete message.extra.inline_image;
         delete message.extra.title;
         delete message.extra.append_title;
+    }
+    if (deleteFromServer) {
+        for (const url of deleteUrls) {
+            if (!url) continue;
+            await deleteMediaFromServer(url, true);
+        }
+    }
     await saveChatConditional();
     appendMediaToMessage(message, messageBlock, SCROLL_BEHAVIOR.KEEP);
+}

+}
 /**
+ * Deletes media file from the server.
+ * @param {string} url Path to the media file on the server
+ * @param {boolean} [silent=false] If true, do not show error messages
+ * @returns {Promise<boolean>} True if media file was deleted, false otherwise.
+ */
+export async function deleteMediaFromServer(url, silent = false) {
+    try {
+        const result = await fetch('/api/images/delete', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+            body: JSON.stringify({ path: url }),
+        });
+        if (!result.ok) {
+            if (!silent) {
+                const error = await result.text();
+                throw new Error(error);
+            }
+            return false;
+        }
+        await eventSource.emit(event_types.MEDIA_ATTACHMENT_DELETED, url);
+        return true;
+    } catch (error) {
+        toastr.error(String(error), t`Could not delete image`);
+        console.error('Could not delete image', error);
+        return false;
+    }
+}
+/**
  * Deletes file from the server.
  * @param {string} url Path to the file on the server
  * @param {boolean} [silent=false] If true, do not show error messages
  * @returns {Promise<boolean>} True if file was deleted, false otherwise.
  */
-async function deleteFileFromServer(url, silent = false) {
+export async function deleteFileFromServer(url, silent = false) {
     try {
         const result = await fetch('/api/files/delete', {
             method: 'POST',

             body: JSON.stringify({ path: url }),
         });
-        if (!result.ok && !silent) {
+        if (!result.ok) {
-            const error = await result.text();
+            if (!silent) {
-            throw new Error(error);
+                const error = await result.text();
+                throw new Error(error);
+            }
+            return false;
+        }
         await eventSource.emit(event_types.FILE_ATTACHMENT_DELETED, url);

         return;
+    }
+    if (media.length === 1) {
+        console.warn('Only one media item in the message, swiping is not applicable');
+        return;
+    }
     const currentIndex = getMediaIndex(message);
     const mediaDisplay = getMediaDisplay(message);

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

         if (mimeType.startsWith('video/')) {
             return MEDIA_TYPE.VIDEO;
+        }
+        if (mimeType.startsWith('audio/')) {
+            return MEDIA_TYPE.AUDIO;
+        }
         return null;
     },
     IMAGE: 'image',
     VIDEO: 'video',
+    AUDIO: 'audio',
 };
 /**

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

     PRESET_RENAMED_BEFORE: 'preset_renamed_before',
     MAIN_API_CHANGED: 'main_api_changed',
     WORLDINFO_ENTRIES_LOADED: 'worldinfo_entries_loaded',
+    MEDIA_ATTACHMENT_DELETED: 'media_attachment_deleted',
 };
 export const eventSource = new EventEmitter([event_types.APP_READY]);

public/scripts/extensions/gallery/index.js+3 -14 Viewed

 import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
 import { t, translate } from '../../i18n.js';
 import { Popup } from '../../popup.js';
+import { deleteMediaFromServer } from '../../chats.js';
 const extensionName = 'gallery';
 const extensionFolderPath = `scripts/extensions/${extensionName}/`;

  * @param {string} url - The URL of the image to be deleted.
  */
 async function deleteGalleryItem(url) {
-    try {
+    const isDeleted = await deleteMediaFromServer(url, false);
-        const response = await fetch('/api/images/delete', {
+    if (isDeleted){
-            method: 'POST',
-            headers: getRequestHeaders(),
-            body: JSON.stringify({ path: url }),
-        });
-        if (!response.ok) {
-            throw new Error(`HTTP error. Status: ${response.status}`);
-        }
         toastr.success(t`Image deleted successfully.`);
-    } catch (error) {
-        console.error('Failed to delete the image:', error);
-        toastr.error(t`Failed to delete the image. Check the console for details.`);
+    }
+}

public/scripts/openai.js+102 -19 Viewed

     createThumbnail,
     delay,
     download,
+    getAudioDurationFromDataURL,
     getBase64Async,
     getFileText,
     getImageSizeFromDataURL,
     getSortableDelay,
     getStringHash,
+    getVideoDurationFromDataURL,
     isDataURL,
     isUuid,
     isValidUrl,

     image_inlining: ['#openai_image_inlining', 'image_inlining', true, false],
     inline_image_quality: ['#openai_inline_image_quality', 'inline_image_quality', false, false],
     video_inlining: ['#openai_video_inlining', 'video_inlining', true, false],
+    audio_inlining: ['#openai_audio_inlining', 'audio_inlining', true, false],
     continue_prefill: ['#continue_prefill', 'continue_prefill', true, false],
     continue_postfix: ['#continue_postfix', 'continue_postfix', false, false],
     function_calling: ['#openai_function_calling', 'function_calling', true, false],

     vertexai_region: 'us-central1',
     vertexai_express_project_id: '',
     squash_system_messages: false,
-    image_inlining: false,
+    image_inlining: true,
-    inline_image_quality: 'low',
+    inline_image_quality: 'auto',
-    video_inlining: false,
+    video_inlining: true,
+    audio_inlining: true,
     bypass_status_check: false,
     continue_prefill: false,
     function_calling: false,

     const imageInlining = isImageInliningSupported();
     const videoInlining = isVideoInliningSupported();
+    const audioInlining = isAudioInliningSupported();
     const canUseTools = ToolManager.isToolCallingSupported();
     // Insert chat messages as long as there is budget available

@@ -872,6 +877,9 @@ async function populateChatHistory(messages, prompts, chatCompletion, type = nul
872	if (videoInlining && media.type === MEDIA_TYPE.VIDEO) {	877	if (videoInlining && media.type === MEDIA_TYPE.VIDEO) {
873	await chatMessage.addVideo(media.url);	878	await chatMessage.addVideo(media.url);
874	}	879	}
		880	if (audioInlining && media.type === MEDIA_TYPE.AUDIO) {
		881	await chatMessage.addAudio(media.url);
		882	}
875	}	883	}
876		884
877	if (Array.isArray(chatPrompt.media) && chatPrompt.media.length) {	885	if (Array.isArray(chatPrompt.media) && chatPrompt.media.length) {

+    }
     /**
-     * Adds an image to the message.
+     * Ensures the content is an array. If it's a string, converts it to an array with a single text object.
-     * @param {string} image Image URL or Data URL.
+     * @returns {any[]} Content as an array
-     * @returns {Promise<void>}
      */
-    async addImage(image) {
+    ensureContentIsArray() {
         const textContent = this.content;
         if (!Array.isArray(this.content)) {
             this.content = [];

                 this.content.push({ type: 'text', text: textContent });
+            }
+        }
+        return this.content;
+    }
+    /**
+     * Adds an image to the message.
+     * @param {string} image Image URL or Data URL.
+     * @returns {Promise<void>}
+     */
+    async addImage(image) {
+        this.content = this.ensureContentIsArray();
         const isDataUrl = isDataURL(image);
         if (!isDataUrl) {
             try {

      * @returns {Promise<void>}
      */
     async addVideo(video) {
-        const textContent = this.content;
+        this.content = this.ensureContentIsArray();
-        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 {

         this.content.push({ type: 'video_url', video_url: { 'url': video } });
         try {
-            // Convservative estimate for video token cost without knowing duration
             // Using Gemini calculation (263 tokens per second)
-            const tokens = 10000; // ~40 second video (60 seconds max)
+            const duration = await getVideoDurationFromDataURL(video);
-            this.tokens += tokens;
+            this.tokens += 263 * Math.ceil(duration);
         } catch (error) {
-            this.tokens += 10000;
+            // Convservative estimate for video token cost without knowing duration
+            this.tokens += 263 * 40; // ~40 second video (60 seconds max)
             console.error('Failed to get video token cost', error);
+        }
+    }
     /**
+     * Adds a audio to the message.
+     * @param {string} audio Audio URL or Data URL.
+     * @returns {Promise<void>}
+     */
+    async addAudio(audio) {
+        this.content = this.ensureContentIsArray();
+        const isDataUrl = isDataURL(audio);
+        if (!isDataUrl) {
+            try {
+                const response = await fetch(audio, { method: 'GET', cache: 'force-cache' });
+                if (!response.ok) throw new Error('Failed to fetch audio');
+                const blob = await response.blob();
+                audio = await getBase64Async(blob);
+            } catch (error) {
+                console.error('Audio adding skipped', error);
+                return;
+            }
+        }
+        this.content.push({ type: 'audio_url', audio_url: { 'url': audio } });
+        try {
+            // Using Gemini calculation (32 tokens per second)
+            const duration = await getAudioDurationFromDataURL(audio);
+            this.tokens += 32 * Math.ceil(duration);
+        } catch (error) {
+            // Estimate for audio token cost without knowing duration
+            const tokens = 32 * 300; // ~5 minute audio
+            this.tokens += tokens;
+            console.error('Failed to get audio token cost', error);
+        }
+    }
+    /**
      * Compress an image if it exceeds the size threshold for the current chat completion source.
      * @param {string} image Data URL of the image.
      * @returns {Promise<string>} Compressed image as a Data URL.

     oai_settings.image_inlining = settings.image_inlining ?? default_settings.image_inlining;
     oai_settings.inline_image_quality = settings.inline_image_quality ?? default_settings.inline_image_quality;
     oai_settings.video_inlining = settings.video_inlining ?? default_settings.video_inlining;
+    oai_settings.audio_inlining = settings.audio_inlining ?? default_settings.audio_inlining;
     oai_settings.bypass_status_check = settings.bypass_status_check ?? default_settings.bypass_status_check;
     oai_settings.vertexai_express_project_id = settings.vertexai_express_project_id ?? default_settings.vertexai_express_project_id;
     oai_settings.show_thoughts = settings.show_thoughts ?? default_settings.show_thoughts;

     $(`#openai_inline_image_quality option[value="${oai_settings.inline_image_quality}"]`).prop('selected', true);
     $('#openai_video_inlining').prop('checked', oai_settings.video_inlining);
+    $('#openai_audio_inlining').prop('checked', oai_settings.audio_inlining);
     $('#model_openai_select').val(oai_settings.openai_model);
     $(`#model_openai_select option[value="${oai_settings.openai_model}"`).prop('selected', true);

         image_inlining: settings.image_inlining,
         inline_image_quality: settings.inline_image_quality,
         video_inlining: settings.video_inlining,
+        audio_inlining: settings.audio_inlining,
         bypass_status_check: settings.bypass_status_check,
         continue_prefill: settings.continue_prefill,
         continue_postfix: settings.continue_postfix,

+}
 /**
+ * Check if the model supports video inlining
+ * @returns {boolean} True if the model supports audio inlining
+ */
+export function isAudioInliningSupported() {
+    if (main_api !== 'openai') {
+        return false;
+    }
+    if (!oai_settings.audio_inlining) {
+        return false;
+    }
+    // Only Gemini models support audio for now
+    const audioSupportedModels = [
+        'gemini-2.0',
+        'gemini-2.5',
+        'gemini-exp-1206',
+    ];
+    switch (oai_settings.chat_completion_source) {
+        case chat_completion_sources.MAKERSUITE:
+            return audioSupportedModels.some(model => oai_settings.google_model.includes(model));
+        case chat_completion_sources.VERTEXAI:
+            return audioSupportedModels.some(model => oai_settings.vertexai_model.includes(model));
+        default:
+            return false;
+    }
+}
+/**
  * Proxy stuff
  */
 export function loadProxyPresets(settings) {

         openai_function_calling_supported: ToolManager.isToolCallingSupported(),
         openai_image_inlining_supported: isImageInliningSupported(),
         openai_video_inlining_supported: isVideoInliningSupported(),
+        openai_audio_inlining_supported: isAudioInliningSupported(),
     };
     for (const [key, value] of Object.entries(featureFlags)) {

         saveSettingsDebounced();
     });
+    $('#openai_audio_inlining').on('input', function () {
+        oai_settings.audio_inlining = !!$(this).prop('checked');
+        updateFeatureSupportFlags();
+        saveSettingsDebounced();
+    });
     $('#continue_prefill').on('input', function () {
         oai_settings.continue_prefill = !!$(this).prop('checked');
         saveSettingsDebounced();

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

+}
 /**
+ * Formats time in seconds to MM:SS format
+ * @param {number} seconds - Time in seconds
+ * @returns {string} Formatted time string
+ */
+export function formatTime(seconds) {
+    if (!isFinite(seconds) || isNaN(seconds)) {
+        return '0:00';
+    }
+    const minutes = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${minutes}:${secs.toString().padStart(2, '0')}`;
+}
+/**
  * Counts the number of occurrences of a character in a string.
  * @param {string} string The string to count occurrences in.
  * @param {string} character The character to count occurrences of.

+}
 /**
+ * Gets the duration of a video from a data URL.
+ * @param {string} dataUrl Video data URL
+ * @returns {Promise<number>} Duration in seconds
+ */
+export function getVideoDurationFromDataURL(dataUrl) {
+    const video = document.createElement('video');
+    video.src = dataUrl;
+    return new Promise((resolve, reject) => {
+        video.onloadedmetadata = function () {
+            resolve(video.duration);
+        };
+        video.onerror = function () {
+            reject(new Error('Failed to load video'));
+        };
+    });
+}
+/**
+ * Gets the duration of an audio from a data URL.
+ * @param {string} dataUrl Audio data URL
+ * @returns {Promise<number>} Duration in seconds
+ */
+export function getAudioDurationFromDataURL(dataUrl) {
+    const audio = document.createElement('audio');
+    audio.src = dataUrl;
+    return new Promise((resolve, reject) => {
+        audio.onloadedmetadata = function () {
+            resolve(audio.duration);
+        };
+        audio.onerror = function () {
+            reject(new Error('Failed to load audio'));
+        };
+    });
+}
+/**
  * Gets the filename of the character avatar without extension
  * @param {string|number?} [chid=null] - Character ID. If not provided, uses the current character ID
  * @param {object} [options={}] - Options arguments

src/constants.js+7 -0 Viewed

     '3gp',
     'mkv',
     'mpg',
+    'mp3',
+    'wav',
+    'ogg',
+    'flac',
+    'aac',
+    'm4a',
+    'aiff',
 ];

src/prompt-converters.js+20 -19 Viewed

         //create the prompt parts
         const parts = [];
         message.content.forEach((part) => {
+            const addDataUrlPart = (/** @type {string} */ url, /** @type {string} */ defaultMimeType) => {
+                if (url && url.startsWith('data:')) {
+                    const [header, base64Data] = url.split(',');
+                    const mimeType = header.match(/data:([^;]+)/)?.[1] || defaultMimeType;
+                    parts.push({
+                        inlineData: {
+                            mimeType: mimeType,
+                            data: base64Data,
+                        },
+                    });
+                }
+            };
             if (part.type === 'text') {
                 parts.push({ text: part.text });
             } else if (part.type === 'tool_call_id') {

                     toolNameMap[toolCall.id] = toolCall.function.name;
                 });
             } else if (part.type === 'image_url') {
-                const mimeType = part.image_url.url.split(';')[0].split(':')[1];
+                const imageUrl = part.image_url?.url;
-                const base64Data = part.image_url.url.split(',')[1];
+                addDataUrlPart(imageUrl, 'image/png');
-                parts.push({
-                    inlineData: {
-                        mimeType: mimeType,
-                        data: base64Data,
-                    },
-                });
             } else if (part.type === 'video_url') {
                 const videoUrl = part.video_url?.url;
-                if (videoUrl && videoUrl.startsWith('data:')) {
+                addDataUrlPart(videoUrl, 'video/mp4');
-                    const [header, data] = videoUrl.split(',');
+            } else if (part.type === 'audio_url') {
-                    const mimeType = header.match(/data:([^;]+)/)?.[1] || 'video/mp4';
+                const audioUrl = part.audio_url?.url;
+                addDataUrlPart(audioUrl, 'audio/mpeg');
-                    parts.push({
-                        inlineData: {
-                            mimeType: mimeType,
-                            data: data,
-                        },
-                    });
-                }
+            }
         });