Add bulk and drag&drop to chats import (#4652) * Add bulk and drag-drop to chats import * Perform list refresh only once

3234045d64ffbd09f474cdc968f7f835f5b41bb7

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

Signed

Parents: 0748af59e399369a5b586793d3df75663563a7e5

public/index.html+1 -1 Viewed

                 <div name="selectChatPopupHeader" class="flex-container alignitemscenter justifySpaceBetween flexGap10">
                     <div id="select_chat_import"> <!-- import chat popup header -->
                         <form id="form_import_chat" action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
-                            <input type="file" id="chat_import_file" accept=".json, .jsonl" name="avatar">
+                            <input type="file" id="chat_import_file" accept=".json, .jsonl" multiple name="avatar">
                             <input id="chat_import_file_type" name="file_type" class="text_pole" value="" autocomplete="off" style="display: none;">
                             <input id="chat_import_avatar_url" name="avatar_url" class="text_pole" value="" autocomplete="off" style="display: none;">
                             <input id="chat_import_character_name" name="character_name" class="text_pole" value="" autocomplete="off" style="display: none;">

public/script.js+37 -34 Viewed

 let scrollLock = false;
 export let abortStatusCheck = new AbortController();
 export let charDragDropHandler = null;
+export let chatDragDropHandler = null;
 /** @type {debounce_timeout} The debounce timeout used for chat/settings save. debounce_timeout.long: 1.000 ms */
 export const DEFAULT_SAVE_EDIT_TIMEOUT = debounce_timeout.relaxed;

 /**
  * Saves the chat to the server.
  * @param {FormData} formData Form data to send to the server.
- * @param {EventTarget} eventTarget Event target to trigger the event on.
+ * @param {object} [options={}] Options for the import
+ * @param {boolean} [options.refresh] Whether to refresh the group chat list after import
  */
-async function importCharacterChat(formData, eventTarget) {
+async function importCharacterChat(formData, { refresh = true } = {}) {
     const fetchResult = await fetch('/api/chats/import', {
         method: 'POST',
         body: formData,

@@ -8062,14 +8064,10 @@ async function importCharacterChat(formData, eventTarget) {
8062		8064
8063	if (fetchResult.ok) {	8065	if (fetchResult.ok) {
8064	const data = await fetchResult.json();	8066	const data = await fetchResult.json();
8065	if (data.res) {	8067	if (data.res && refresh) {
8066	await displayPastChats();	8068	await displayPastChats();
8067	}	8069	}
8068	}	8070	}
8069
8070	if (eventTarget instanceof HTMLInputElement) {
8071	eventTarget.value = '';
8072	}
8073	}	8071	}
8074		8072
8075	function updateViewMessageIds(startFromZero = false) {	8073	function updateViewMessageIds(startFromZero = false) {

     });
     $('#chat_import_file').on('change', async function (e) {
-        const targetElement = /** @type {HTMLInputElement} */ (e.target);
+        const targetElement = e.target;
-        if (!(targetElement instanceof HTMLInputElement)) {
+        const formElement = document.getElementById('form_import_chat');
-            return;
+        if (!(targetElement instanceof HTMLInputElement) || !(formElement instanceof HTMLFormElement)) {
-        }
-        const file = targetElement.files[0];
-        if (!file) {
             return;
+        }
-        const ext = file.name.match(/\.(\w+)$/);
+        for (const file of targetElement.files) {
-        if (
+            const ext = file.name.match(/\.(\w+)$/);
-            !ext ||
+            const format = ext?.[1]?.toLowerCase();
-            (ext[1].toLowerCase() != 'json' && ext[1].toLowerCase() != 'jsonl')
-        ) {
-            return;
-        }
-        if (selected_group && file.name.endsWith('.json')) {
+            if (!['json', 'jsonl'].includes(format)) {
-            toastr.warning('Only SillyTavern\'s own format is supported for group chat imports. Sorry!');
+                toastr.warning(t`Only JSON and JSONL files are supported for chat imports.`);
-            return;
+                continue;
-        }
+            }
-        const format = ext[1].toLowerCase();
+            if (selected_group && format === 'json') {
-        $('#chat_import_file_type').val(format);
+                toastr.warning(t`Only SillyTavern's own format is supported for group chat imports. Sorry!`);
+                continue;
+            }
-        const formData = new FormData(/** @type {HTMLFormElement} */($('#form_import_chat').get(0)));
+            const formData = new FormData(formElement);
-        formData.append('user_name', name1);
+            formData.set('file_type', format);
-        $('#select_chat_div').html('');
+            formData.set('avatar', file);
+            formData.set('user_name', name1);
-        if (selected_group) {
+            const importFn = selected_group ? importGroupChat : importCharacterChat;
-            await importGroupChat(formData, e.originalEvent.target);
+            await importFn(formData, { refresh: false });
-        } else {
-            await importCharacterChat(formData, e.originalEvent.target);
+        }
+        await displayPastChats();
+        targetElement.value = '';
     });
     $('#rm_button_group_chats').on('click', function () {

         await processDroppedFiles(files);
     }, { noAnimation: true });
+    chatDragDropHandler = new DragAndDropHandler('#select_chat_popup', async (_, event) => {
+        const importFile = document.getElementById('chat_import_file');
+        if (importFile instanceof HTMLInputElement) {
+            importFile.files = event.originalEvent.dataTransfer.files;
+            $(importFile).trigger('change');
+        }
+    });
     $('#charListGridToggle').on('click', async () => {
         doCharListDisplaySwitch();
     });

public/scripts/group-chats.js+6 -7 Viewed

 /**
  * Imports a group chat from a file and adds it to the group.
  * @param {FormData} formData Form data to send to the server
- * @param {EventTarget} eventTarget Element that triggered the import
+ * @param {object} [options={}] Options for the import
+ * @param {boolean} [options.refresh] Whether to refresh the group chat list after import
  */
-export async function importGroupChat(formData, eventTarget) {
+export async function importGroupChat(formData, { refresh = true } = {}) {
     const fetchResult = await fetch('/api/chats/group/import', {
         method: 'POST',
         headers: getRequestHeaders({ omitContentType: true }),

@@ -2083,14 +2084,12 @@ export async function importGroupChat(formData, eventTarget) {
2083	if (group) {	2084	if (group) {
2084	group.chats.push(chatId);	2085	group.chats.push(chatId);
2085	await editGroup(selected_group, true, true);	2086	await editGroup(selected_group, true, true);
2086	await displayPastChats();	2087	if (refresh) {
		2088	await displayPastChats();
		2089	}
2087	}	2090	}
2088	}	2091	}
2089	}	2092	}
2090
2091	if (eventTarget instanceof HTMLInputElement) {
2092	eventTarget.value = '';
2093	}
2094	}	2093	}
2095		2094
2096	export async function saveGroupBookmarkChat(groupId, name, metadata, mesId) {	2095	export async function saveGroupBookmarkChat(groupId, name, metadata, mesId) {