refactor bulk delete js

bulkDeleteConversations.js

@@ -1,124 +1,106 @@
 async function bulkDeleteConversations() {
-  const conversationCheckboxes = document.querySelectorAll('.conversation-checkbox:checked');
+  const selectedConversations = getSelectedConversations();
-  const checkedIndexes = Array.from(conversationCheckboxes).map(checkbox => parseInt(checkbox.dataset.index));
+
-  if (checkedIndexes.length === 0) {
+  if (selectedConversations.length === 0) {
       console.log("No conversations to delete.");
-
+      removeAllCheckboxes();
-    // Remove all checkboxes
-    const removeConversationCheckboxes = document.querySelectorAll('.conversation-checkbox');
-    removeConversationCheckboxes.forEach(checkbox => {
-      checkbox.remove();
-    });
-
       return;
   }
 
-  async function waitForElement(selector, timeout = 5000) {
+  console.log("Selected Conversations:", selectedConversations);
+
+  await deleteConversation(selectedConversations[0]);
+  const updatedConversations = selectedConversations.map(conversation => conversation - 1);
+
+  delay(1000);
+  await addCheckboxesWithState(updatedConversations.slice(1));
+
+  bulkDeleteConversations();
+}
+
+function getSelectedConversations() {
+  const selectedCheckboxes = document.querySelectorAll('.conversation-checkbox:checked');
+  return Array.from(selectedCheckboxes).map(checkbox => parseInt(checkbox.dataset.index));
+}
+
+function removeAllCheckboxes() {
+  const allCheckboxes = document.querySelectorAll('.conversation-checkbox');
+  allCheckboxes.forEach(checkbox => checkbox.remove());
+}
+
+async function deleteConversation(conversationIndex) {
+  const checkbox = document.querySelector(`.conversation-checkbox[data-index='${conversationIndex}']`);
+  const conversationElement = checkbox.closest('.flex.py-3.px-3.items-center.gap-3.relative.rounded-md');
+
+  console.log("开始删除...");
+  console.log("currentIndex:", conversationIndex);
+  conversationElement.click(); // 点击对话
+
+  const deleteButton = await waitForElement('.absolute.flex.right-1.z-10.text-gray-300.visible button:nth-child(3)');
+
+  if (deleteButton) {
+      console.log("点击删除按钮...");
+      deleteButton.click(); // 点击删除按钮
+
+      // 等待确认删除对话框的按钮出现
+      const confirmButton = await waitForElement('button.btn.btn-danger');
+
+      if (confirmButton) {
+          console.log("点击确认按钮...");
+          confirmButton.click();
+
+          // 等待删除按钮消失
+          await waitForElementToDisappear('button.btn.btn-danger');
+      }
+  }
+
+  console.log("完成删除。");
+}
+
+// 用于等待某元素出现的函数
+async function waitForElement(selector, timeout = 5000) {
   const startedAt = Date.now();
-    let el = null;
   while ((Date.now() - startedAt) < timeout) {
-        el = document.querySelector(selector);
+      const element = document.querySelector(selector);
-        if (el) return el;
+      if (element) return element;
-        await new Promise(r => setTimeout(r, 100));
+      await delay(100);
   }
   throw new Error(`Element ${selector} not found within ${timeout}ms`);
 }
 
-  console.log("开始删除...")
+// 用于等待某元素消失的函数
-  const checkbox = conversationCheckboxes[0];
+async function waitForElementToDisappear(selector, timeout = 5000) {
-  const currentIndex = parseInt(checkbox.dataset.index);
+  const startedAt = Date.now();
-  console.log("currentIndex:", currentIndex);
+  while ((Date.now() - startedAt) < timeout) {
-  const conversationElement = checkbox.closest('.flex.py-3.px-3.items-center.gap-3.relative.rounded-md');
+      const element = document.querySelector(selector);
-  conversationElement.click(); // Click the conversation first
+      if (!element) return;
-  await new Promise(resolve => setTimeout(resolve, 500)); // Add a delay of 0.5 second
+      await delay(100);
-
-  const deleteButton = document.querySelector('.absolute.flex.right-1.z-10.text-gray-300.visible button:nth-child(3)'); // Updated delete button selector
-
-  if (deleteButton) {
-    console.log("点击删除按钮1...")
-    deleteButton.click(); // Click the delete button
-    console.log("点击删除按钮2...")
-    await waitForElement('div[role="dialog"][data-state="open"] button.btn-danger');
-
-    console.log("点击删除按钮3...")
-    // const buttonsContainer = document.querySelector('mt-5 flex flex-col gap-3 sm:mt-4 sm:flex-row-reverse');
-    const confirmButton = document.querySelector('button.btn.btn-danger');
-
-    if (confirmButton) {
-      console.log("点击确认按钮...")
-      confirmButton.click();
-      // await new Promise(resolve => setTimeout(resolve, 1000)); // Add a delay of 1 second
-      // 等待删除按钮消失
-      const deleteButtonDisappeared = new Promise((resolve) => {
-        const observer = new MutationObserver(() => {
-          if (!document.querySelector('button.btn.btn-danger')) {
-            observer.disconnect();
-            resolve();
   }
-        });
+  throw new Error(`Element ${selector} did not disappear within ${timeout}ms`);
-        observer.observe(document.body, {
-          childList: true,
-          subtree: true,
-        });
-      });
-      await deleteButtonDisappeared;
-    }
-  }
-
-  console.log("delete done")
-
-  // 在这里删除当前选中的对话的索引
-  console.log("删除当前选中的对话的索引...")
-  console.log("checkedIndexes before splice", checkedIndexes);
-  const indexToRemove = checkedIndexes.indexOf(currentIndex);
-  if (indexToRemove > -1) {
-    checkedIndexes.splice(indexToRemove, 1);
-  }
-  console.log("checkedIndexes after splice", checkedIndexes);
-
-  // 更新剩余对话的索引
-  console.log("更新剩余对话的索引...")
-  for (let j = 0; j < checkedIndexes.length; j++) {
-    if (checkedIndexes[j] > currentIndex) {
-      checkedIndexes[j]--;
-    }
-  }
-  console.log("checkedIndexes after update index", checkedIndexes);
-
-  // Wait for 1 second before deleting the next conversation
-  await new Promise(resolve => setTimeout(resolve, 1000));
-
-  // 重新添加复选框并设置它们的状态
-  console.log("重新添加复选框并设置它们的状态...")
-  await addCheckboxesWithState(checkedIndexes);
-  
-  console.log("递归调用 bulkDeleteConversations...")
-  bulkDeleteConversations();
 }
 
-async function addCheckboxesWithState(checkedIndexes) {
+// 延迟函数
-  // 移除现有的复选框
+function delay(ms) {
-  const existingCheckboxes = document.querySelectorAll('.conversation-checkbox');
+  return new Promise(resolve => setTimeout(resolve, ms));
-  existingCheckboxes.forEach((checkbox) => {
+}
-    checkbox.remove();
+
-  });
+async function addCheckboxesWithState(remainingConversations) {
+  removeAllCheckboxes();
   
-  // 在这里重新添加复选框
   const conversations = document.querySelectorAll('.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.hover\\:bg-\\[\\#2A2B32\\].cursor-pointer.break-all.hover\\:pr-4.group');
-  conversations.forEach((conversation, index) => {
+  for (const [index, conversation] of conversations.entries()) {
       const checkbox = document.createElement('input');
       checkbox.type = 'checkbox';
       checkbox.className = 'conversation-checkbox';
       checkbox.dataset.index = index;
 
-    if (checkedIndexes.includes(index)) {
+      if (remainingConversations.includes(index)) {
           checkbox.checked = true;
       }
 
       conversation.insertAdjacentElement('afterbegin', checkbox);
-  });
+  }
 
-  // Update data-index attributes for remaining checkboxes
   const remainingCheckboxes = document.querySelectorAll('.conversation-checkbox');
   for (let i = 0; i < remainingCheckboxes.length; i++) {
       remainingCheckboxes[i].dataset.index = i;