Update script.js

script.js

@@ -1,6 +1,8 @@
 // این فایل script.js نسخه نهایی شده بر اساس کد اصلی شماست.
 // شامل تمام اصلاحات لازم برای کار در Hugging Face Space جدید با مدل heydariAI/persian-embeddings.
 // تمام قابلیت های اضافه شده و رفع اشکالات شناسایی شده در فرآیند عیب یابی در آن لحاظ شده است.
+// این نسخه شامل مدیریت بصری وضعیت (لودینگ، آماده) با رنگ و اسپینر است.
+
 
 // ****** تعریف متغیرهای عناصر HTML در بالاترین اسکوپ ******
 // این متغیرها در بلوک DOMContentLoaded پس از بارگذاری صفحه مقداردهی اولیه می شوند.
@@ -15,7 +17,8 @@ let bookCheckboxes; // <--- مطابق با class در index.html شما (HTMLCo
 
 let resultsPerPageSelect; // <--- مطابق با ID در index.html شما
 let similarityThresholdInput; // <--- مطابق با ID در index.html شما
-// نکته: در index.html شما المانی برای نمایش عددی آستانه شباهت در کنار input type="number" وجود ندارد، پس نیازی به متغیر برای آن نیست.
+
+let loadingSpinnerElement; // <--- متغیر برای المان لودینگ اسپینر
 
 // *************************************************
 
@@ -50,19 +53,50 @@ let memoirsWithEmbeddings = []; // این آرایه حاوی خاطرات با
 // ****** توابع کمکی برای مدیریت پیام ها و وضعیت UI ******
 
 // تابع کمکی برای نمایش پیام وضعیت بارگذاری/پردازش در المان loadingStatusElement
-function updateStatus(message, isError = false) {
+// Optional state parameter: 'loading', 'ready', 'error', '' (یا هر پیام دیگر که وضعیت خاصی را نشان ندهد)
+function updateStatus(message, isError = false, state = '') {
     if (loadingStatusElement) {
-        loadingStatusElement.textContent = message;
-        loadingStatusElement.style.color = isError ? 'red' : '#666'; // رنگ قرمز برای خطا، خاکستری برای وضعیت
-        loadingStatusElement.style.fontWeight = isError ? 'bold' : 'normal'; // خطاها با فونت ضخیم تر
-        loadingStatusElement.style.display = message ? 'block' : 'none'; // نمایش المان فقط وقتی پیام دارد
+        loadingStatusElement.textContent = message; // Set text first
+
+        // پاک کردن کلاس های وضعیت قبلی
+        loadingStatusElement.classList.remove('loading', 'ready', 'error');
+
+        // اضافه کردن کلاس وضعیت مناسب بر اساس isError یا پارامتر state
+        if (isError) {
+            loadingStatusElement.classList.add('error');
+            // رنگ و فونت ضخیم توسط کلاس .error-message یا .status-message.error در CSS مدیریت می شود
+             loadingStatusElement.style.color = ''; // ریست کردن استایل های اینلاین احتمالی
+             loadingStatusElement.style.fontWeight = ''; // ریست کردن استایل های اینلاین احتمالی
+        } else if (state === 'loading') {
+            loadingStatusElement.classList.add('loading');
+             loadingStatusElement.style.color = '';
+             loadingStatusElement.style.fontWeight = '';
+        } else if (state === 'ready') {
+            loadingStatusElement.classList.add('ready');
+             loadingStatusElement.style.color = '';
+             loadingStatusElement.style.fontWeight = '';
+        } else {
+             // وضعیت پیش فرض یا پیام های عادی بدون وضعیت خاص
+            loadingStatusElement.style.color = '#666'; // رنگ پیش فرض
+            loadingStatusElement.style.fontWeight = 'normal'; // فونت نرمال پیش فرض
+        }
+
+        // مدیریت نمایش اسپینر (اسپینر با CSS و کلاس .status-message.loading کنترل می شود)
+        // نیازی به نمایش/پنهان کردن مستقیم اسپینر اینجا نیست اگر CSS به درستی تنظیم شده باشد.
+
+        loadingStatusElement.style.display = message ? 'flex' : 'none'; // استفاده از flex برای نمایش و مرکز کردن محتوا (متن و اسپینر)
+         // اگر پیام خالی باشد، المان مخفی می شود.
+
+
     } else {
-        console.log("Status:", message); // لاگ برای توسعه
+        console.log("Status:", message, "isError:", isError, "state:", state); // لاگ برای توسعه
     }
-    // پاک کردن پیام خطای انتخاب کتاب اگر پیامی در status نمایش داده می شود
+
+    // پاک کردن پیام خطای انتخاب کتاب اگر یک پیام وضعیت نمایش داده می شود
     if (message && selectionErrorElement) {
         selectionErrorElement.textContent = '';
         selectionErrorElement.style.display = 'none';
+        selectionErrorElement.classList.remove('error'); // پاک کردن کلاس خطا
     }
 }
 
@@ -70,16 +104,20 @@ function updateStatus(message, isError = false) {
 function updateSelectionError(message) {
     if (selectionErrorElement) {
         selectionErrorElement.textContent = message;
-        selectionErrorElement.style.color = 'red';
-        selectionErrorElement.style.fontWeight = 'bold'; // خطاها با فونت ضخیم تر
-        selectionErrorElement.style.display = message ? 'block' : 'none'; // نمایش المان فقط وقتی پیام دارد
+        selectionErrorElement.style.color = 'red'; // رنگ قرمز
+        selectionErrorElement.style.fontWeight = 'bold'; // فونت ضخیم
+        selectionErrorElement.style.display = message ? 'flex' : 'none'; // نمایش با فلکس
+        selectionErrorElement.classList.add('error'); // اضافه کردن کلاس خطا
+
     } else {
          console.error("Selection Error Element not found."); // لاگ برای توسعه
     }
-    // پاک کردن پیام وضعیت اگر پیامی در selectionError نمایش داده می شود
+    // پاک کردن پیام وضعیت اگر یک پیام خطای انتخاب نمایش داده می شود
     if (message && loadingStatusElement) {
         loadingStatusElement.textContent = '';
         loadingStatusElement.style.display = 'none';
+        loadingStatusElement.classList.remove('loading', 'ready'); // پاک کردن کلاس های وضعیت
+         // اسپینر نیز توسط CSS و کلاس مدیریت می شود.
     }
 }
 
@@ -122,11 +160,15 @@ function checkAndEnableSearchButton() {
 // این تابع هر زمان که انتخاب کتاب ها تغییر می کند، داده ها را بارگذاری مجدد می کند.
 async function updateSelectedBooksData() {
     console.log("Updating selected books data..."); // لاگ برای توسعه
-    updateStatus("در حال بارگذاری داده‌ها..."); // پیام برای کاربر
-    updateSelectionError(""); // پاک کردن پیام خطای قبلی
-    setButtonEnabled(false); // غیرفعال کردن دکمه در طول بارگذاری داده ها
+    // تنظیم وضعیت به "در حال بارگذاری" با رنگ و اسپینر
+    updateStatus("در حال بارگذاری داده‌ها...", false, 'loading');
+    updateSelectionError(""); // پاک کردن پیام خطاهای قبلی
+    setButtonEnabled(false); // غیرفعال کردن دکمه جستجو
+
+
      if (searchResultsContainer) { // پاک کردن نتایج قبلی
-       searchResultsContainer.innerHTML = '<p>پس از انتخاب کتاب‌ها و وارد کردن سوال، نتایج اینجا نمایش داده می‌شوند.</p>'; // پیام اولیه
+       // نمایش پیام اولیه واضح در بخش نتایج
+       searchResultsContainer.innerHTML = '<p>در حال بارگذاری اطلاعات کتاب‌ها. لطفاً صبر کنید تا دکمه جستجو فعال شود...</p>';
     }
 
 
@@ -135,7 +177,7 @@ async function updateSelectedBooksData() {
     if (!bookCheckboxes || bookCheckboxes.length === 0) {
          console.error("No book checkboxes found with class 'book-checkbox'. Cannot load data.");
          updateStatus(""); // پاک کردن پیام وضعیت
-         updateSelectionError("المان‌های انتخاب کتاب یافت نشد. لطفاً ساختار HTML را بررسی کنید."); // پیام خطا برای کاربر
+         updateSelectionError("المان‌های انتخاب کتاب یافت نشد. لطفاً ساختار HTML را بررسی کنید."); // پیام خطا
          memoirsWithEmbeddings = [];
          checkAndEnableSearchButton();
          return;
@@ -151,11 +193,11 @@ async function updateSelectedBooksData() {
     // ****** چک کردن اینکه حداقل یک کتاب انتخاب شده باشد ******
     if (selectedBookFiles.length === 0) {
         updateStatus(""); // پاک کردن پیام وضعیت
-        updateSelectionError("لطفاً حداقل یک کتاب برای جستجو انتخاب کنید."); // پیام خطا برای کاربر
-        console.warn("No books selected. Cannot load data."); // لاگ برای توسعه
+        updateSelectionError("لطفاً حداقل یک کتاب برای جستجو انتخاب کنید."); // پیام خطا
+        console.warn("No books selected. Cannot load data."); // لاگ
         memoirsWithEmbeddings = []; // پاک کردن داده های قبلی
         checkAndEnableSearchButton(); // مطمئن می شویم دکمه غیرفعال بماند
-        return; // توقف فرآیند اگر هیچ کتابی انتخاب نشده است
+        return; // توقف فرآیند
     }
     // ********************************************************
 
@@ -171,28 +213,27 @@ async function updateSelectedBooksData() {
              return fetch(filePath).then(response => {
                  if (!response.ok) {
                      // اگر فایل پیدا نشد یا خطای دیگری رخ داد (مثلاً 404)
-                     console.error(`Workspace error for ${filePath}: Status ${response.status}`); // لاگ خطا برای توسعه
-                     // تلاش برای خواندن متن خطا از پاسخ برای اطلاعات بیشتر
+                     console.error(`Workspace error for ${filePath}: Status ${response.status}`); // لاگ خطا
+                     // تلاش برای خواندن متن خطا از پاسخ
                      return response.text().then(text => {
                           console.error(`Response body for ${filePath}: ${text}`);
                           throw new Error(`Error fetching file: "${filename}" (Status: ${response.status}). Check if the file exists at "${filePath}".`);
                      }).catch(() => {
-                          // اگر خواندن متن خطا هم موفق نبود
                           throw new Error(`Error fetching file: "${filename}" (Status: ${response.status}). Check if the file exists at "${filePath}".`);
                      });
 
                  }
-                 // بررسی Content-Type پاسخ برای اطمینان از اینکه واقعا JSON است
+                 // بررسی Content-Type پاسخ
                  const contentType = response.headers.get("content-type");
                  if (!contentType || !contentType.includes("application/json")) {
-                     console.error(`Workspace error for ${filePath}: Expected application/json, but received ${contentType}`);
+                     console.error(`Workspace error for ${filePath}: Expected application/json, but received ${contentType}`); // لاگ خطا
                      throw new Error(`Error fetching file: "${filename}". Expected JSON, but received unexpected content type.`);
                  }
                  return response.json();
              })
              .catch(error => {
                  // گرفتن خطاهای شبکه یا تجزیه JSON
-                 console.error(`Failed to fetch or parse file "${filename}":`, error); // لاگ خطا برای توسعه
+                 console.error(`Failed to fetch or parse file "${filename}":`, error); // لاگ خطا
                  throw new Error(`Failed to load data for book file "${filename}". ${error.message || 'Unknown error'}. Check file name and location.`);
              });
         });
@@ -201,32 +242,31 @@ async function updateSelectedBooksData() {
         const booksData = await Promise.all(fetchPromises); // انتظار برای دانلود و تجزیه همه فایل ها
 
         // ترکیب داده‌ها از تمام فایل‌های JSON بارگذاری شده و افزودن اطلاعات کتاب
-        booksData.forEach((data, index) => { // اضافه کردن index برای دسترسی به selectedBookFiles
-            const filename = selectedBookFiles[index]; // نام فایل JSON فعلی (value چک باکس)
-            // پیدا کردن نام نمایشی کتاب از map bookInfo بر اساس نام فایل
+        booksData.forEach((data, index) => { // اضافه کردن index
+            const filename = selectedBookFiles[index]; // نام فایل JSON فعلی
+            // پیدا کردن نام نمایشی کتاب از map bookInfo
             const bookDisplayName = bookInfo[filename] || filename;
 
             if (Array.isArray(data)) {
                  // فیلتر کردن آیتم هایی که بردار embedding معتبر دارند و افزودن اطلاعات کتاب به آن ها
-                 // مطمئن می شویم که آیتم یک آبجکت معتبر است و فیلد embedding را دارد
                  const memoirsWithBookInfo = data.filter(item => item && typeof item === 'object' && item.embedding && Array.isArray(item.embedding) && item.embedding.length > 0)
                                                  .map(item => ({
                                                      ...item, // کپی کردن تمام پراپرتی های موجود (passage_original, passage_combined, reference, embedding, etc.)
-                                                     book_title: bookDisplayName, // افزودن نام نمایشی کتاب
-                                                     book_file: filename // افزودن نام فایل اصلی کتاب
+                                                     book_title: bookDisplayName, // افزودن نام نمایشی
+                                                     book_file: filename // افزودن نام فایل
                                                  }));
 
                  memoirsWithEmbeddings = memoirsWithEmbeddings.concat(memoirsWithBookInfo);
 
-                 // هشدار برای آیتم هایی که بردار ندارند یا فرمتشان مشکل دارد (فقط در کنسول)
-                 const invalidMemoirsCount = data.length - memoirsWithBookInfo.length; // تعداد کل - تعداد معتبر با اطلاعات کتاب
+                 // هشدار برای آیتم های نامعتبر
+                 const invalidMemoirsCount = data.length - memoirsWithBookInfo.length;
                  if(invalidMemoirsCount > 0){
-                     console.warn(`Skipped ${invalidMemoirsCount} items from file "${filename}" due to missing or invalid embedding or format.`);
+                     console.warn(`Skipped ${invalidMemoirsCount} items from file "${filename}" due to missing or invalid embedding or format.`); // لاگ هشدار
                  }
 
             } else {
-                 console.error(`Loaded data from "${filename}" is not an array:`, data); // لاگ برای توسعه
-                 updateSelectionError(`خطا در فرمت داده از فایل "${filename}". انتظار آرایه داشتیم.`);
+                 console.error(`Loaded data from "${filename}" is not an array:`, data); // لاگ خطا
+                 updateSelectionError(`خطا در فرمت داده از فایل "${filename}". انتظار آرایه داشتیم.`); // پیام خطا
             }
         });
 
@@ -234,139 +274,131 @@ async function updateSelectedBooksData() {
         const totalPassagesLoaded = memoirsWithEmbeddings.length;
 
          if (totalPassagesLoaded === 0) {
-             console.warn("No valid passages with embeddings were loaded after processing all files.");
-             updateStatus(`داده‌ها بارگذاری شد، اما هیچ خاطره‌ای با بردار معتبر از کتاب‌های انتخاب شده (${loadedBooksCount} کتاب) یافت نشد.`, true); // پیام خطا برای کاربر
-             updateSelectionError("هیچ خاطره‌ای با بردار معتبر از کتاب‌های انتخاب شده یافت نشد. فرمت فایل‌های JSON و وجود فیلد embedding را بررسی کنید.");
+             console.warn("No valid passages with embeddings were loaded..."); // لاگ هشدار
+             // تنظیم وضعیت به "خطا در بارگذاری"
+             updateStatus(`داده‌ها بارگذاری شد، اما هیچ خاطره‌ای با بردار معتبر از کتاب‌های انتخاب شده (${loadedBooksCount} کتاب) یافت نشد.`, true, 'error');
+             updateSelectionError("هیچ خاطره‌ای با بردار معتبر از کتاب‌های انتخاب شده یافت نشد. فرمت فایل‌های JSON و وجود فیلد embedding را بررسی کنید."); // پیام خطا
          } else {
-              console.log(`Successfully loaded data from ${loadedBooksCount} book(s). Total valid passages loaded: ${totalPassagesLoaded}`); // لاگ برای توسعه
-             updateStatus(`داده‌ها از ${loadedBooksCount} کتاب با موفقیت بارگذاری شد. مجموع خاطرات قابل جستجو: ${totalPassagesLoaded}. آماده جستجو هستید.`); // پیام برای کار
+              console.log(`Successfully loaded data from ${loadedBooksCount} book(s)...`); // لاگ
+             // تنظیم وضعیت به "آماده"
+             updateStatus(`داده‌ها از ${loadedBooksCount} کتاب با موفقیت بارگذاری شد. مجموع خاطرات قابل جستجو: ${totalPassagesLoaded}. آماده جستجو هستید.`, false, 'ready');
          }
 
-        checkAndEnableSearchButton(); // بررسی و فعال کردن دکمه پس از بارگذاری داده
-
+        checkAndEnableSearchButton(); // بررسی و فعال کردن دکمه
 
     } catch (error) {
-        console.error("Error loading selected books data:", error); // لاگ برای توسعه
-        updateStatus("خطا در بارگذاری داده‌ها.", true); // پیام برای کار
-        // پیام خطای برای کاربر شامل جزئیات بیشتر از علت خطا
+        console.error("Error loading selected books data:", error); // لاگ خطا
+        // تنظیم وضعیت به "خطا در بارگذاری"
+        updateStatus("خطا در بارگذاری داده‌ها.", true, 'error');
+        // پیام خطای برای کاربر شامل جزئیات بیشتر
         updateSelectionError(`خطا در بارگذاری داده‌ها: ${error.message || 'خطای نامشخص'}. جزئیات بیشتر در کنسول مرورگر.`);
         memoirsWithEmbeddings = []; // اطمینان از خالی بودن داده در صورت خطا
         checkAndEnableSearchButton(); // مطمئن می شویم دکمه غیرفعال بماند
-         if (searchResultsContainer) { // بازگرداندن پیام اولیه در صورت خطا
+         if (searchResultsContainer) { // بازگرداندن پیام اولیه
             searchResultsContainer.innerHTML = '<p>پس از انتخاب کتاب‌ها و وارد کردن سوال، نتایج اینجا نمایش داده می‌شوند.</p>';
          }
     } finally {
-        // در نهایت، چه بارگذاری موفقیت آمیز باشد چه با خطا مواجه شود، دکمه جستجو وضعیت خود را بررسی می کند.
-        // checkAndEnableSearchButton(); // این فراخوانی در پایان هر دو شاخه try/catch در بالا نیز وجود دارد.
+       // checkAndEnableSearchButton در هر دو شاخه try/catch صدا زده می شود.
     }
 }
 
 
 // ****** تابع کمکی برای محاسبه شباهت کسینوسی بین دو بردار ******
-// این تابع همان تابع استاندارد محاسبه شباهت کسینوسی است.
 function cosineSimilarity(vecA, vecB) {
-     // بررسی وجود و صحت بردارها قبل از شروع محاسبات
+     // بررسی وجود و صحت بردارها
      if (!vecA || !vecB || vecA.length !== vecB.length || vecA.length === 0) {
-        console.error("Cosine Similarity Error: Invalid or empty vectors provided.", {vecA_length: vecA ? vecA.length : 'null', vecB_length: vecB ? vecB.length : 'null'});
-        return 0; // برگرداندن 0 در صورت ورودی نامعتبر
+        console.error("Cosine Similarity Error: Invalid or empty vectors provided.", {vecA_length: vecA ? vecA.length : 'null', vecB_length: vecB ? vecB.length : 'null'}); // لاگ خطا
+        return 0; // برگرداندن 0
      }
 
     let dotProduct = 0;
     let magnitudeA = 0;
     let magnitudeB = 0;
 
-    // محاسبه نقطه ضرب و مربع اندازه بردارها در یک حلقه برای بهینه سازی
+    // محاسبه نقطه ضرب و مربع اندازه
     for (let i = 0; i < vecA.length; i++) {
         dotProduct += vecA[i] * vecB[i];
         magnitudeA += vecA[i] * vecA[i];
         magnitudeB += vecB[i] * vecB[i];
     }
 
-    // گرفتن ریشه دوم برای اندازه بردارها
+    // گرفتن ریشه دوم
     magnitudeA = Math.sqrt(magnitudeA);
     magnitudeB = Math.sqrt(magnitudeB);
 
-    // جلوگیری از تقسیم بر صفر اگر یکی از بردارها صفر باشد
+    // جلوگیری از تقسیم بر صفر
     if (magnitudeA === 0 || magnitudeB === 0) {
-        //console.warn("Cosine Similarity Warning: Magnitude is zero for one or both vectors."); // لاگ هشدار برای توسعه (اختیاری)
         return 0;
     }
 
-    // محاسبه شباهت کسینوسی
+    // محاسبه شباهت
     const similarity = dotProduct / (magnitudeA * magnitudeB);
-    //console.log(`Calculated similarity: ${similarity}`); // لاگ برای توسعه (اختیاری، ممکن است خیلی زیاد شود)
-    return similarity; // برگرداندن امتیاز شباهت
+    return similarity; // برگرداندن امتیاز
 }
 
-// تابع کمکی برای حذف بخش کلمات کلیدی از متن Passage
-// این تابع بر اساس فرمتی که در generate_embeddings.py برای ترکیب متن و کلیدواژه ها استفاده شده، کار می کند.
-// با توجه به استفاده مستقیم از passage_original، این تابع ممکن است دیگر به صورت مستقیم برای نمایش متن اصلی استفاده نشود،
-// اما می تواند برای پردازش passage_combined اگر کاربر بخواهد استفاده شود.
+// تابع کمکی برای حذف بخش کلمات کلیدی از متن Passage_combined
+// این تابع فعلاً برای نمایش passage_original مستقیماً استفاده نمی شود، اما نگه داشته شده است.
 function cleanPassageTextForDisplay(passage) {
     if (!passage || typeof passage !== 'string') {
-        console.warn("cleanPassageTextForDisplay received invalid input:", passage);
-        return ''; // برگرداندن رشته خالی برای ورودی نامعتبر
+        console.warn("cleanPassageTextForDisplay received invalid input:", passage); // لاگ هشدار
+        return ''; // برگرداندن رشته خالی
     }
-    // فرض می کنیم فرمت ترکیب متن همان ' <کلیدواژه ها: ...>' است.
     const startDelimiter = ' <کلیدواژه ها: ';
     const startIndex = passage.indexOf(startDelimiter);
 
     if (startIndex === -1) {
-        return passage.trim(); // اگر جداکننده پیدا نشد، کل متن را برگردان (با حذف فاصله های اضافی ابتدا و انتها)
+        return passage.trim(); // اگر جداکننده پیدا نشد
     }
 
-    // اگر جداکننده پیدا شد، فقط بخش قبل از آن را برگردان
     let cleanText = passage.substring(0, startIndex);
-    return cleanText.trim(); // حذف فاصله های اضافی ابتدا و ان��های متن تمیز شده
+    return cleanText.trim(); // حذف فاصله های اضافی
 }
 
 
 // ****** تعریف کامل تابع async function searchMemoirs() { ... } ******
-// این تابع شامل منطق اصلی جستجو است: دریافت بردار سوال، محاسبه شباهت، فیلتر، مرتب سازی، نمایش نتایج.
 async function searchMemoirs() {
-    console.log("Search triggered."); // لاگ برای توسعه
-    console.log(`Data loaded state (passages count): ${memoirsWithEmbeddings.length}`); // لاگ برای توسعه
+    console.log("Search triggered."); // لاگ
+    console.log(`Data loaded state (passages count): ${memoirsWithEmbeddings.length}`); // لاگ
 
-    // ****** چک کردن اینکه داده ها (از کتاب های انتخاب شده) بارگذاری شده باشند ******
+    // ****** چک کردن اینکه داده ها بارگذاری شده باشند ******
     if (memoirsWithEmbeddings.length === 0) {
-        console.warn("No memoir data loaded. Cannot search."); // لاگ برای توسعه
-        updateSelectionError("لطفاً ابتدا کتاب‌های مورد نظر برای جستجو را انتخاب کرده و منتظر بارگذاری داده‌ها بمانید."); // پیام خطا برای کاربر
-        // searchResultsContainer در ابتدای updateSelectedBooksData() پاک می شود.
+        console.warn("No memoir data loaded. Cannot search."); // لاگ هشدار
+        updateSelectionError("لطفاً ابتدا کتاب‌های مورد نظر برای جستجو را انتخاب کرده و منتظر بارگذاری داده‌ها بمانید."); // پیام خطا
         return;
     }
     // **************************************************************************
 
-    // اطمینان از وجود userQuestionInput قبل از دسترسی به value
+    // اطمینان از وجود userQuestionInput
     if (!userQuestionInput) {
-         console.error("Search input element not found. Cannot get query.");
-         updateSelectionError("المان ورودی جستجو پیدا نشد. امکان جستجو وجود ندارد.");
+         console.error("Search input element not found."); // لاگ خطا
+         updateSelectionError("المان ورودی جستجو پیدا نشد. امکان جستجو وجود ندارد."); // پیام خطا
          return;
     }
     const query = userQuestionInput.value.trim();
-    console.log(`Query text is: "${query}"`); // لاگ برای توسعه
+    console.log(`Query text is: "${query}"`); // لاگ
 
     if (!query) {
-         if (searchResultsContainer) { // استفاده از نام متغیر صحیح
-            searchResultsContainer.innerHTML = `<p>لطفاً عبارت مورد نظر برای جستجو را وارد کنید.</p>`; // پیام برای کاربر
+         if (searchResultsContainer) {
+            searchResultsContainer.innerHTML = `<p>لطفاً عبارت مورد نظر برای جستجو را وارد کنید.</p>`; // پیام
          }
-         console.warn("Search query is empty."); // لاگ برای توسعه
-         updateSelectionError("لطفاً عبارت مورد نظر برای جستجو را وارد کنید."); // پیام خطا برای کاربر
+         console.warn("Search query is empty."); // لاگ هشدار
+         updateSelectionError("لطفاً عبارت مورد نظر برای جستجو را وارد کنید."); // پیام خطا
         return;
     }
 
-    // نمایش پیام "در حال جستجو" و غیرفعال کردن دکمه
-    updateStatus("در حال جستجو...", false); // رنگ خاکستری
-    updateSelectionError(""); // پاک کردن پیام خطای احتمالی قبلی
+    // نمایش پیام "در حال جستجو" با وضعیت لودینگ
+    updateStatus("در حال جستجو...", false, 'loading');
+    updateSelectionError(""); // پاک کردن خطاهای قبلی
      if (searchResultsContainer) { // پاک کردن نتایج قبلی
          searchResultsContainer.innerHTML = '';
      }
-    setButtonEnabled(false); // غیرفعال کردن دکمه در طول جستجو
+    setButtonEnabled(false); // غیرفعال کردن دکمه
 
 
     try {
-        console.log("Requesting query embedding from Backend..."); // لاگ برای توسعه
+        console.log("Requesting query embedding from Backend..."); // لاگ
 
-        // ارسال درخواست به سرور Backend برای دریافت بردار سوال
+        // ارسال درخواست به Backend
         const serverResponse = await fetch(EMBEDDING_SERVER_URL, {
             method: 'POST',
             headers: {
@@ -375,320 +407,283 @@ async function searchMemoirs() {
             body: JSON.stringify({ query: query })
         });
 
-        // بررسی موفقیت آمیز بودن پاسخ سرور (کد وضعیت 2xx)
+        // بررسی موفقیت آمیز بودن پاسخ
         if (!serverResponse.ok) {
-             const errorBody = await serverResponse.text(); // بخوان به صورت متن برای اطلاعات بیشتر
-             console.error(`Backend responded with status ${serverResponse.status}:`, errorBody); // لاگ خطا برای توسعه
+             const errorBody = await serverResponse.text(); // خواندن متن خطا
+             console.error(`Backend responded with status ${serverResponse.status}:`, errorBody); // لاگ خطا
 
-             // تلاش برای تجزیه پاسخ خطا به صورت JSON اگر سرور خطای JSON برگردانده باشد
              let serverErrorMessage = `خطا از Backend (${serverResponse.status}).`;
-             try {
+             try { // تلاش برای خواندن JSON خطا
                  const errorJson = JSON.parse(errorBody);
                  if (errorJson.error) {
                      serverErrorMessage += ` پیام: ${errorJson.error}`;
                  }
-             } catch (e) {
-                 // اگر پاسخ خطا JSON نبود، متن خام را اضافه کن
-                 serverErrorMessage += ` پاسخ خام: ${errorBody.substring(0, Math.min(errorBody.length, 100))}...`; // نمایش بخشی از پاسخ خام (حداثر 100 کاراکتر)
+             } catch (e) { // اگر JSON نبود
+                 serverErrorMessage += ` پاسخ خام: ${errorBody.substring(0, Math.min(errorBody.length, 100))}...`;
              }
 
-             updateStatus("جستجو با خطا مواجه شد.", true); // پیام اصلی برای کاربر (رنگ قرمز)
-             updateSelectionError(serverErrorMessage + " جزئیات بیشتر در کنسول مرورگر."); // نمایش جزئیات خطا در بخش خطای انتخاب
-             return; // خروج از تابع searchMemoirs پس از خطا
-
+             // تنظیم وضعیت به "خطا"
+             updateStatus("جستجو با خطا مواجه شد.", true, 'error');
+             updateSelectionError(serverErrorMessage + " جزئیات بیشتر در کنسول مرورگر."); // نمایش خطا
+             return; // خروج
         }
 
-        // دریافت داده های JSON از پاسخ سرور
+        // دریافت و بررسی پاسخ JSON
         const serverData = await serverResponse.json();
         const queryEmbeddingArray = serverData.embedding;
 
-        // بررسی اینکه بردار embedding معتبر و غیر خالی است
         if (!queryEmbeddingArray || !Array.isArray(queryEmbeddingArray) || queryEmbeddingArray.length === 0) {
-             console.error("Backend returned an invalid or empty embedding:", serverData); // لاگ خطا برای توسعه
-             updateStatus("جستجو با خطا مواجه شد.", true); // پیام اصلی برای کاربر
-             updateSelectionError("Backend بردار جستجو را به درستی برنگرداند. جزئیات در کنسول مرورگر."); // نمایش جزئیات خطا در بخش خطای انتخاب
-             return; // خروج از تابع searchMemoirs
+             console.error("Backend returned an invalid or empty embedding:", serverData); // لاگ خطا
+             // تنظیم وضعیت به "خطا"
+             updateStatus("جستجو با خطا مواجه شد.", true, 'error');
+             updateSelectionError("Backend بردار جستجو را به درستی برنگرداند. جزئیات در کنسول مرورگر."); // نمایش خطا
+             return; // خروج
         }
 
-        console.log("Query embedding received from Backend successfully."); // لاگ برای توسعه
-        console.log(`Query embedding dimensions: ${queryEmbeddingArray.length}`); // لاگ برای توسعه
-        console.log("Calculating similarities in browser..."); // لاگ برای توسعه
+        console.log("Query embedding received from Backend successfully."); // لاگ
+        console.log(`Query embedding dimensions: ${queryEmbeddingArray.length}`); // لاگ
+        console.log("Calculating similarities in browser..."); // لاگ
 
-        // محاسبه شباهت بین بردار سوال و بردارهای تمام خاطرات بارگذاری شده
+        // محاسبه شباهت با تمام خاطرات
         const searchResults = [];
-        // memoirsWithEmbeddings حاوی خاطرات با بردارهای embedding و اطلاعات کتاب است.
         for (const memoir of memoirsWithEmbeddings) {
-            // اطمینان از وجود و صحت بردار embedding در آیتم خاطره
-            // و اینکه بردار خاطره همان ابعاد بردار سوال را دارد (خیلی مهم)
+            // اطمینان از وجود و صحت بردار embedding و تطابق ابعاد
             if (memoir.embedding && Array.isArray(memoir.embedding) && memoir.embedding.length === queryEmbeddingArray.length) {
                  const similarity = cosineSimilarity(queryEmbeddingArray, memoir.embedding);
-                // اضافه کردن تمام فیلدهای اصلی خاطره و امتیاز شباهت به نتیجه جستجو
-                searchResults.push({ ...memoir, similarity: similarity }); // استفاده از نام فیلد similarity برای امتیاز شباهت
+                searchResults.push({ ...memoir, similarity: similarity });
             } else {
-                 // هشدار برای آیتم های بدون بردار یا با ابعاد نامعتبر (فقط در کنسول)
-                 console.warn(`Skipping memoir due to missing or invalid embedding or dimension mismatch: ${memoir.book_title || memoir.book_file || 'Unknown Book'} - ${memoir.reference || 'Unknown Reference'}`);
+                 console.warn(`Skipping memoir due to missing or invalid embedding or dimension mismatch: ${memoir.book_title || memoir.book_file || 'Unknown Book'} - ${memoir.reference || 'Unknown Reference'}`); // لاگ هشدار
             }
         }
-        console.log(`Similarity calculation complete. Found ${searchResults.length} results with valid embeddings.`); // لاگ برای توسعه
+        console.log(`Similarity calculation complete. Found ${searchResults.length} results...`); // لاگ
 
 
-        // ****** خواندن آستانه شباهت از ورودی کاربر و فیلتر کردن نتایج ******
-        let currentSimilarityThreshold = DEFAULT_SIMILARITY_THRESHOLD; // مقدار پیش فرض به عنوان fallback
-        if (similarityThresholdInput) { // اگر المان ورودی آستانه شباهت پیدا شد
+        // ****** فیلتر کردن نتایج بر اساس آستانه شباهت ******
+        let currentSimilarityThreshold = DEFAULT_SIMILARITY_THRESHOLD;
+        if (similarityThresholdInput) {
             const inputValue = parseFloat(similarityThresholdInput.value);
-            // چک می کنیم عدد معتبر باشد و در محدوده [0, 1] باشد
             if (!isNaN(inputValue) && inputValue >= 0.0 && inputValue <= 1.0) {
                 currentSimilarityThreshold = inputValue;
                 console.log("Using user-defined similarity threshold:", currentSimilarityThreshold); // لاگ
             } else {
-                 console.warn("Invalid similarity threshold input value, using default:", DEFAULT_SIMILARITY_THRESHOLD); // لاگ
-                 updateSelectionError(`مقدار آستانه شباهت وارد شده (${similarityThresholdInput.value}) معتبر نیست. از مقدار پیش فرض ${DEFAULT_SIMILARITY_THRESHOLD.toFixed(2)} استفاده می‌شود.`); // پیام خطا برای کاربر
-                 currentSimilarityThreshold = DEFAULT_SIMILARITY_THRESHOLD; // بازگشت به مقدار پیش فرض
+                 console.warn("Invalid similarity threshold input value, using default:", DEFAULT_SIMILARITY_THRESHOLD); // لاگ هشدار
+                 updateSelectionError(`مقدار آستانه شباهت وارد شده (${similarityThresholdInput.value}) معتبر نیست. از مقدار پیش فرض ${DEFAULT_SIMILARITY_THRESHOLD.toFixed(2)} استفاده می‌شود.`); // پیام خطا
+                 currentSimilarityThreshold = DEFAULT_SIMILARITY_THRESHOLD;
             }
         } else {
-            console.warn("Similarity threshold input element not found, using default threshold:", DEFAULT_SIMILARITY_THRESHOLD); // لاگ
+            console.warn("Similarity threshold input element not found...", DEFAULT_SIMILARITY_THRESHOLD); // لاگ هشدار
         }
 
-        // فیلتر کردن نتایج بر اساس آستانه شباهت
         const filteredResults = searchResults.filter(result => result.similarity >= currentSimilarityThreshold);
         console.log(`Filtered results based on threshold ${currentSimilarityThreshold.toFixed(2)}: ${filteredResults.length} results remaining.`); // لاگ
         // *************************************************************
 
 
         console.log("Sorting results by similarity..."); // لاگ
-        // مرتب سازی نتایج فیلتر شده بر اساس امتیاز شباهت به صورت نزولی (بیشترین شباهت اول)
         filteredResults.sort((a, b) => b.similarity - a.similarity);
         console.log("Filtered results sorted."); // لاگ
 
-        // ****** انتخاب تعداد نتایج برتر بر اساس انتخاب کاربر ******
-        let finalResultsPerPage = 10; // مقدار پیش فرض
-        if (resultsPerPageSelect) { // اگر المان انتخاب تعداد نتایج پیدا شد
-             const selectedValue = parseInt(resultsPerPageSelect.value, 10); // خواندن مقدار انتخاب شده
-             // اطمینان از اینکه عدد معتبر و مثبت است
-             finalResultsPerPage = (!isNaN(selectedValue) && selectedValue > 0) ? selectedValue : 10; // مقدار پیش فرض 10
+        // ****** انتخاب تعداد نتایج برتر ******
+        let finalResultsPerPage = 10;
+        if (resultsPerPageSelect) {
+             const selectedValue = parseInt(resultsPerPageSelect.value, 10);
+             finalResultsPerPage = (!isNaN(selectedValue) && selectedValue > 0) ? selectedValue : 10;
         } else {
-             console.warn("Results per page select element not found, using default:", finalResultsPerPage); // لاگ
+             console.warn("Results per page select element not found...", finalResultsPerPage); // لاگ هشدار
         }
 
-        // برش لیست نتایج برای نمایش فقط تعداد مورد نظر
         const topResults = filteredResults.slice(0, finalResultsPerPage);
-        console.log(`Displaying top ${topResults.length} results from filtered list based on user selection (${finalResultsPerPage} per page setting).`);
+        console.log(`Displaying top ${topResults.length} results...`); // لاگ
 
-        // لاگ کردن نتایج برتر نمایش داده شده برای عیب یابی (اختیاری، می توانید حذف کنید)
-        console.log("Top results data before display:", topResults); // <-- لاگ برای بررسی داده های نتایج
-        // ********************************************
+        // لاگ کردن نتایج برتر برای عیب یابی (اختیاری)
+        // console.log("Top results data before display:", topResults);
 
 
         // ****** منطق نمایش نتایج در HTML ******
-        if (searchResultsContainer) { // اگر کانتینر نمایش نتایج پیدا شد
-             // نتایج قبلی در ابتدای تابع پاک شده اند.
-
-             if (topResults.length === 0) { // اگر هیچ نتیجه ای یافت نشد
-                 // پیام مناسب برای کاربر، شامل آستانه شباهت استفاده شده
+        if (searchResultsContainer) {
+             if (topResults.length === 0) {
                  searchResultsContainer.innerHTML = `<p>نتیجه مرتبطی با آستانه شباهت مورد نظر (${currentSimilarityThreshold.toFixed(2)}) یافت نشد. سعی کنید عبارت دیگری را جستجو کنید یا آستانه را کاهش دهید.</p>`;
-                 console.log("No relevant results found after filtering and slicing."); // لاگ
-             } else { // اگر نتایجی یافت شد
+                 console.log("No relevant results found..."); // لاگ
+             } else {
                   console.log("Results found, updating DOM.");
 
-                 // ایجاد کانتینر برای لیست نتایج برای کنترل بهتر استایل دهی (اختیاری اما مفید)
                  const resultsList = document.createElement('div');
-                 resultsList.classList.add('results-list'); // می توانید استایل هایی برای این کلاس در CSS اضافه کنید.
-
+                 resultsList.classList.add('results-list');
 
                  topResults.forEach(result => {
-                     // ایجاد المان برای هر آیتم نتیجه
                      const resultItem = document.createElement('div');
-                     resultItem.classList.add('result-item'); // کلاس اصلی هر نتیجه
-
-
-                     // ایجاد و اضافه کردن تمام بخش های یک نتیجه (امتیاز، نام کتاب، مرجع، متن خاطره، دکمه کپی)
+                     resultItem.classList.add('result-item');
 
-                     // ****** نمایش امتیاز شباهت ******
-                     // استفاده از p مطابق با ساختار HTML و کلاس CSS شما
+                     // نمایش امتیاز شباهت
                      const similarityElement = document.createElement('p');
                      similarityElement.classList.add('result-similarity');
-                     // نمایش امتیاز با 4 رقم اعشار
                      similarityElement.textContent = `شباهت: ${result.similarity !== undefined ? result.similarity.toFixed(4) : 'N/A'}`;
-                     // اضافه کردن به آیتم نتیجه (ترتیب مهم است برای فلوت float: right)
                      resultItem.appendChild(similarityElement);
-                     // ******************************
-
 
                      // نمایش نام کتاب
-                     // استفاده از p مطابق با ساختار HTML و کلاس CSS شما
                      const bookTitleElement = document.createElement('p');
                      bookTitleElement.classList.add('result-book-title');
                      bookTitleElement.textContent = `از کتاب: ${result.book_title || 'نامشخص'}`;
-                      resultItem.appendChild(bookTitleElement); // اضا��ه کردن به آیتم نتیجه
-
+                     resultItem.appendChild(bookTitleElement);
 
                      // نمایش مرجع خاطره
-                     // استفاده از p مطابق با ساختار HTML و کلاس CSS شما
                      const referenceElement = document.createElement('p');
                      referenceElement.classList.add('result-reference');
-                     referenceElement.innerHTML = `<strong>مرجع:</strong> ${result.reference || 'نامشخص'}`; // استفاده از innerHTML برای bold کردن "مرجع:"
-                     resultItem.appendChild(referenceElement); // اضافه کردن به آیتم نتیجه
+                     referenceElement.innerHTML = `<strong>مرجع:</strong> ${result.reference || 'نامشخص'}`;
+                     resultItem.appendChild(referenceElement);
 
 
                      // ****** نمایش متن اصلی خاطره (استفاده از passage_original) ******
-                     // استفاده از p مطابق با ساختار HTML و کلاس CSS شما
                      const passageElement = document.createElement('p');
                      passageElement.classList.add('result-passage');
                      // مستقیماً از فیلد passage_original استفاده می کنیم
                      passageElement.textContent = result.passage_original || 'متن خاطره موجود نیست.';
-                      resultItem.appendChild(passageElement); // اضافه کردن به آیتم نتیجه
+                     resultItem.appendChild(passageElement);
                      // ***************************************************************
 
 
                      // ****** اضافه کردن دکمه کپی ******
                      const copyButton = document.createElement('button');
-                     copyButton.classList.add('copy-button'); // کلاس CSS برای استایل دهی
-                     copyButton.textContent = 'کپی متن'; // متن دکمه
-
-                     // ****** اضافه کردن استایل Inline برای تست عیب‌یابی (موقت) ******
-                     // این استایل ها برای کمک به ظاهر شدن دکمه اضافه شده اند.
-                     // اگر با این استایل ها دکمه ظاهر شد، مشکل در فایل style.css یا اعمال آن است.
-                     // پس از حل مشکل نمایش در style.css، این خطوط را حذف کنید.
-                     copyButton.style.display = 'block'; // نمایش به صورت بلوک جداگانه
-                     copyButton.style.marginTop = '10px'; // فاصله از بالا
-                     copyButton.style.marginLeft = 'auto'; // راست چین کردن در RTL با margin auto و margin-right 0
+                     copyButton.classList.add('copy-button');
+                     copyButton.textContent = 'کپی متن';
+                     // استایل های اینلاین موقت برای تست - بهتر است به style.css منتقل شوند
+                     copyButton.style.display = 'block';
+                     copyButton.style.marginTop = '10px';
+                     copyButton.style.marginLeft = 'auto';
                      copyButton.style.marginRight = '0';
-                     copyButton.style.backgroundColor = '#007bff'; // رنگ آبی
+                     copyButton.style.backgroundColor = '#007bff';
                      copyButton.style.color = 'white';
-                     copyButton.style.padding = '5px 5px'; // padding
+                     copyButton.style.padding = '5px 5px';
                      copyButton.style.border = 'none';
-                     copyButton.style.borderRadius = '4px'; // گوشه گرد
-                     copyButton.style.cursor = 'pointer'; // نشانگر موس
-                     copyButton.style.fontSize = '0.8em'; // اندازه فونت
-                     copyButton.style.fontFamily = "'Vazirmatn', sans-serif"; // اعمال فونت
-                     // *****************************************************************
-
-
-                     // Event listener برای دکمه کپی
-                     // این Listener در بلوک DOMContentLoaded به صورت Delegation اضافه شده و در اینجا فقط دکمه به DOM اضافه می شود.
-                     resultItem.appendChild(copyButton); // دکمه کپی در انتها
-
+                     copyButton.style.borderRadius = '4px';
+                     copyButton.style.cursor = 'pointer';
+                     copyButton.style.fontSize = '0.8em';
+                     copyButton.style.fontFamily = "'Vazirmatn', sans-serif";
+                     // **********************************
+                     // Listener برای دکمه کپی به صورت Delegation در DOMContentLoaded اضافه شده است.
+                     resultItem.appendChild(copyButton);
                      // **************************************************************************
 
 
-                     resultsList.appendChild(resultItem); // اضافه کردن آیتم نتیجه به لیست نتایج
+                     resultsList.appendChild(resultItem);
                  });
 
-                 searchResultsContainer.appendChild(resultsList); // اضافه کردن لیست نتایج به کانتینر اصلی
+                 searchResultsContainer.appendChild(resultsList);
                  console.log("DOM updated with results.");
 
-                 // لاگ کردن نتایج برتر نمایش داده شده برای عیب یابی (اختیاری، می توانید حذف کنید)
+                 // لاگ کردن نتایج برتر نمایش داده شده (اختیاری)
                  console.log(`Top ${topResults.length} results displayed (reference, book, similarity, passage start):`);
                  topResults.forEach(result => {
-                     console.log(`  Book: ${result.book_title || 'Unknown'}, Ref: ${result.reference || 'N/A'}, Sim: ${result.similarity !== undefined ? result.similarity.toFixed(4) : 'N/A'}, Passage: "${result.passage_original ? result.passage_original.substring(0, Math.min(result.passage_original.length, 50)).replace(/\n/g, ' ') + '...' : 'N/A'}"`); // لاگ جزئیات بیشتر و جایگزینی خط جدید
+                     console.log(`  Book: ${result.book_title || 'Unknown'}, Ref: ${result.reference || 'N/A'}, Sim: ${result.similarity !== undefined ? result.similarity.toFixed(4) : 'N/A'}, Passage: "${result.passage_original ? result.passage_original.substring(0, Math.min(result.passage_original.length, 50)).replace(/\n/g, ' ') + '...' : 'N/A'}"`);
                  });
              }
 
              // به‌روزرسانی پیام وضعیت پس از جستجو
               if (topResults.length > 0) {
-                 updateStatus(`جستجو به پایان رسید. ${topResults.length} نتیجه برتر (پس از فیلتر با آستانه ${currentSimilarityThreshold.toFixed(2)}) نمایش داده شد.`, false); // پیام موفقیت (رنگ خاکستری)
+                 updateStatus(`جستجو به پایان رسید. ${topResults.length} نتیجه برتر (پس از فیلتر با آستانه ${currentSimilarityThreshold.toFixed(2)}) نمایش داده شد.`, false, 'ready'); // وضعیت "آماده"
               } else {
-                 updateStatus(`جستجو به پایان رسید. هیچ نتیجه مرتبطی با آستانه شباهت مورد نظر (${currentSimilarityThreshold.toFixed(2)}) یافت نشد. سعی کنید عبارت دیگری را جستجو کنید یا آستانه را کاهش دهید.`, false); // پیام وضعیت (رنگ خاکستری)
+                 updateStatus(`جستجو به پایان رسید. هیچ نتیجه مرتبطی با آستانه شباهت مورد نظر (${currentSimilarityThreshold.toFixed(2)}) یافت نشد. سعی کنید عبارت دیگری را جستجو کنید یا آستانه را کاهش دهید.`, false, 'ready'); // وضعیت "آماده"
               }
 
 
         } else {
-            console.error("Could not find searchResultsContainer to display results."); // لاگ
-             updateStatus("جستجو با خطا مواجه شد.", true); // پیام خطا (رنگ قرمز)
-             updateSelectionError("المان نمایش نتایج پیدا نشد. لطفاً ساختار HTML را بررسی کنید."); // پیام خطا در بخش انتخاب
+            console.error("Could not find searchResultsContainer to display results."); // لاگ خطا
+             updateStatus("جستجو با خطا مواجه شد.", true, 'error'); // وضعیت "خطا"
+             updateSelectionError("المان نمایش نتایج پیدا نشد. لطفاً ساختار HTML را بررسی کنید."); // پیام خطا
         }
 
 
     } catch (error) {
         // مدیریت خطا هنگام درخواست به Backend یا پردازش پاسخ
-        console.error("Error during search:", error); // لاگ
-         if (searchResultsContainer) { // استفاده از نام متغیر صحیح
+        console.error("Error during search:", error); // لاگ خطا
+         if (searchResultsContainer) {
             searchResultsContainer.innerHTML = `<p style=\"color: red;\">هنگام جستجو خطایی رخ داد: ${error.message || 'خطای نامشخص'}. جزئیات بیشتر در کنسول مرورگر موجود است.</p>`;
          }
-        updateStatus("جستجو با خطا مواجه شد.", true); // پیام خطا (رنگ قرمز)
-        updateSelectionError(`هنگام جستجو خطایی رخ داد: ${error.message || 'خطای نامشخص'}.`); // نمایش خطای اصلی در بخش خطای انتخاب
+        // تنظیم وضعیت به "خطا"
+        updateStatus("جستجو با خطا مواجه شد.", true, 'error');
+        updateSelectionError(`هنگام جستجو خطایی رخ داد: ${error.message || 'خطای نامشخص'}.`); // نمایش خطا
     } finally {
-        // در نهایت، چه جستجو موفقیت آمیز باشد چه با خطا مواجه شود، دکمه جستجو وضعیت خود را بررسی می کند.
+        // در نهایت دکمه جستجو وضعیت خود را بررسی می کند.
         checkAndEnableSearchButton(); // فعال کردن مجدد دکمه جستجو (اگر شرایط فراهم باشد)
     }
 }
-// پایان تعریف تابع async function searchMemoirs()
 
 
 // ****** بلوک DOMContentLoaded: این کد پس از بارگذاری کامل ساختار صفحه اجرا می شود ******
 document.addEventListener('DOMContentLoaded', () => {
-    console.log("DOM fully loaded and parsed. Initializing script.");
+    console.log("DOM fully loaded and parsed. Initializing script."); // لاگ
 
     // ****** دریافت رفرنس المان های HTML (مطابق با ID ها و کلاس ها در index.html شما) ******
     // این رفرنس ها متغیرهای سراسری تعریف شده در بالای فایل هستند.
     searchButton = document.getElementById('searchButton');
-    userQuestionInput = document.getElementById('userQuestion'); // <--- مطابق با ID در index.html شما
-    searchResultsContainer = document.getElementById('searchResults'); // <--- مطابق با ID در index.html شما
-    loadingStatusElement = document.getElementById('loadingStatus'); // <--- مطابق با ID در index.html شما
-    selectionErrorElement = document.getElementById('selectionError'); // <--- مطابق با ID در index.html شما
+    userQuestionInput = document.getElementById('userQuestion'); // <--- مطابق با ID
+    searchResultsContainer = document.getElementById('searchResults'); // <--- مطابق با ID
+    loadingStatusElement = document.getElementById('loadingStatus'); // <--- مطابق با ID
+    selectionErrorElement = document.getElementById('selectionError'); // <--- مطابق با ID
 
-    selectAllCheckbox = document.getElementById('select_all_books'); // <--- مطابق با ID در index.html شما
+    selectAllCheckbox = document.getElementById('select_all_books'); // <--- مطابق با ID
     // getElementsByClassName برمی گرداند HTMLCollection زنده.
-    bookCheckboxes = document.getElementsByClassName('book-checkbox'); // <--- مطابق با class در index.html شما
+    bookCheckboxes = document.getElementsByClassName('book-checkbox'); // <--- مطابق با class
+
+    resultsPerPageSelect = document.getElementById('resultsPerPage'); // <--- مطابق با ID
+    similarityThresholdInput = document.getElementById('similarityThresholdInput'); // <--- مطابق با ID
+
+    loadingSpinnerElement = document.querySelector('#loadingStatus .loading-spinner'); // <--- دریافت رفرنس اسپینر
+
 
-    resultsPerPageSelect = document.getElementById('resultsPerPage'); // <--- مطابق با ID در index.html شما
-    similarityThresholdInput = document.getElementById('similarityThresholdInput'); // <--- مطابق با ID در index.html شما
     // **********************************************************************************
 
 
     // ****** چک کردن وجود المان های ضروری برای جلوگیری از خطا ******
     // چک می کنیم که تمام المان های مورد نیاز برای اجرای اسکریپت پیدا شده باشند.
     // bookCheckboxes باید وجود داشته باشد و حداقل یک المان (چک باکس) داشته باشد.
-    const requiredElementsFound = searchButton && userQuestionInput && searchResultsContainer && loadingStatusElement && selectionErrorElement && selectAllCheckbox && bookCheckboxes && bookCheckboxes.length > 0 && resultsPerPageSelect && similarityThresholdInput;
+    const requiredElementsFound = searchButton && userQuestionInput && searchResultsContainer && loadingStatusElement && selectionErrorElement && selectAllCheckbox && bookCheckboxes && bookCheckboxes.length > 0 && resultsPerPageSelect && similarityThresholdInput && loadingSpinnerElement;
 
     if (requiredElementsFound) {
-        console.log("All critical DOM elements found. Proceeding with initialization.");
+        console.log("All critical DOM elements found. Proceeding with initialization."); // لاگ
 
         // ****** تنظیم Event Listeners ******
 
         // Listener برای دکمه جستجو: فراخوانی تابع searchMemoirs هنگام کلیک
         searchButton.addEventListener('click', searchMemoirs);
-        console.log("Search button click listener added.");
+        console.log("Search button click listener added."); // لاگ
 
         // Listener برای کلید Enter در کادر ورودی سوال: شبیه سازی کلیک روی دکمه جستجو
         userQuestionInput.addEventListener('keypress', (event) => {
             if (event.key === 'Enter') {
-                event.preventDefault(); // جلوگیری از ارسال فرم پیش فرض مرورگر
-                 // فقط اگر دکمه جستجو فعال است، کلیک را شبیه سازی کن
-                 if (!searchButton.disabled) {
+                event.preventDefault(); // جلوگیری از ارسال فرم
+                 if (!searchButton.disabled) { // فقط اگر دکمه فعال است
                     searchButton.click();
-                    console.log("Enter key pressed in search input, simulating search button click."); // Log
+                    console.log("Enter key pressed in search input, simulating search button click."); // لاگ
                  }
             }
         });
-        console.log("Search input keypress listener added.");
+        console.log("Search input keypress listener added."); // لاگ
 
 
         // ****** Listener برای تغییر محتوای کادر سوال: بررسی وضعیت دکمه جستجو ******
         // این Listener باعث می شود دکمه جستجو زمانی که متن وارد می شود فعال شود.
         userQuestionInput.addEventListener('input', () => {
-            console.log("Search input value changed, checking button state."); // لاگ برای توسعه
+            console.log("Search input value changed, checking button state."); // لاگ
             checkAndEnableSearchButton(); // <--- فراخوانی تابع بررسی وضعیت دکمه
         });
         console.log("Search input 'input' listener added.");
         // *********************************************************************
 
 
-        // Listener برای تغییر مقدار ورودی آستانه شباهت: به‌روزرسانی وضعیت دکمه (فعال/غیرفعال شدن)
-        // مقدار آستانه شباهت مستقیماً در تابع searchMemoirs از این input خوانده می شود.
+        // Listener برای تغییر مقدار ورودی آستانه شباهت: به‌روزرسانی وضعیت دکمه
         similarityThresholdInput.addEventListener('input', () => {
             console.log("Similarity threshold input value changed."); // لاگ
-            checkAndEnableSearchButton(); // بررسی وضعیت دکمه پس از تغییر مقدار (اگر مقدار نامعتبر شود دکمه غیرفعال می شود)
+            checkAndEnableSearchButton(); // بررسی وضعیت دکمه (اگر مقدار نامعتبر شود غیرفعال می شود)
         });
-        console.log("Similarity threshold input listener added.");
+        console.log("Similarity threshold input listener added."); // لاگ
 
-        // Listener برای تغییر انتخاب در نتایج در صفحه (resultsPerPageSelect)
-        // مقدار نتایج در صفحه مستقیماً در تابع searchMemoirs از این select خوانده می شود.
+        // Listener برای تغییر انتخاب تعداد نتایج در صفحه
         resultsPerPageSelect.addEventListener('change', () => {
              console.log("Results per page setting changed."); // لاگ
-             // نیازی به checkAndEnableSearchButton نیست چون تغییر این مقدار به تنهایی دکمه را فعال/غیرفعال نمی کند.
+             // نیازی به checkAndEnableSearchButton نیست.
         });
-        console.log("Results per page select listener added.");
+        console.log("Results per page select listener added."); // لاگ
 
 
         // Listener ها برای چک باکس 'انتخاب همه' و چک باکس های تکی کتاب ها
@@ -696,123 +691,111 @@ document.addEventListener('DOMContentLoaded', () => {
 
         if (selectAllCheckbox) {
              selectAllCheckbox.addEventListener('change', () => {
-                const isChecked = selectAllCheckbox.checked; // استفاده مستقیم از selectAllCheckbox
-                // getElementsByClassName برمی گرداند HTMLCollection زنده، باید آن را به آرایه تبدیل کرد
-                Array.from(bookCheckboxes).forEach(cb => { // استفاده از bookCheckboxes
+                const isChecked = selectAllCheckbox.checked;
+                Array.from(bookCheckboxes).forEach(cb => {
                     cb.checked = isChecked;
                 });
                 console.log(`'Select All' checkbox changed to ${isChecked}. All book checkboxes updated.`); // لاگ
-                // پس از تغییر انتخاب کتاب، باید داده ها را بارگذاری مجدد کنیم.
                 updateSelectedBooksData(); // <--- فراخوانی بارگذاری مجدد داده ها
             });
-            console.log("'Select All' checkbox change listener added.");
+            console.log("'Select All' checkbox change listener added."); // لاگ
         } else {
-             console.error("'Select All' checkbox element with ID 'select_all_books' not found."); // لاگ
-             // اگر این المان پیدا نشد، قابلیت "انتخاب همه" کار نخواهد کرد.
+             console.error("'Select All' checkbox element with ID 'select_all_books' not found."); // لاگ خطا
         }
 
         if (bookCheckboxes && bookCheckboxes.length > 0) {
-             Array.from(bookCheckboxes).forEach(cb => { // استفاده از bookCheckboxes
+             Array.from(bookCheckboxes).forEach(cb => {
                  cb.addEventListener('change', () => {
-                     // بررسی کنید که آیا همه چک باکس های تکی انتخاب شده اند
-                     const allOthersChecked = Array.from(bookCheckboxes).every(cb => cb.checked); // استفاده از bookCheckboxes
-                     if (selectAllCheckbox) { // اگر چک باکس "انتخاب همه" وجود دارد، وضعیت آن را بر اساس وضعیت چک باکس های تکی به‌روزرسانی کن
+                     const allOthersChecked = Array.from(bookCheckboxes).every(cb => cb.checked);
+                     if (selectAllCheckbox) {
                           selectAllCheckbox.checked = allOthersChecked;
                      }
                       console.log("Individual book checkbox changed. Checking 'Select All' status."); // لاگ
-                      // پس از تغییر انتخاب کتاب، باید داده ها را بارگذاری مجدد کنیم.
                       updateSelectedBooksData(); // <--- فراخوانی بارگذاری مجدد داده ها
                  });
              });
-             console.log("Individual book checkboxes change listeners added.");
+             console.log("Individual book checkboxes change listeners added."); // لاگ
         } else {
-             console.warn("No book checkboxes found with class 'book-checkbox'. Book selection filtering will not work as expected."); // لاگ
-             // اگر المان های چک باکس تکی پیدا نشدند، فیلترینگ بر اساس کتاب انتخاب شده کار نخواهد کرد.
-             // در این حالت، updateSelectedBooksData با لیست خالی selectedBookFiles اجرا خواهد شد.
+             console.warn("No book checkboxes found with class 'book-checkbox'..."); // لاگ هشدار
         }
 
 
-        // Listener برای دکمه های کپی (به صورت Delegation در searchResultsContainer)
-        // این Listener روی کانتینر نتایج گوش می دهد و برای دکمه های کپی که به صورت پویا اضافه می شوند، فعال می شود.
+        // Listener برای دکمه های کپی (به صورت Delegation)
         searchResultsContainer.addEventListener('click', (event) => {
-            // چک می کنیم که آیا کلیک روی المانی با کلاس 'copy-button' رخ داده است؟
             if (event.target && event.target.classList && event.target.classList.contains('copy-button')) {
-                 // جلوگیری از رفتار پیش فرض دکمه (مثلا ارسال فرم اگر داخل فرم باشد)
-                 event.preventDefault(); // اضافه شده
+                 event.preventDefault(); // جلوگیری از رفتار پیش فرض
 
-                 // المان والد نتیجه را پیدا می کنیم (.result-item)
                  const resultItemElement = event.target.closest('.result-item');
                  if (resultItemElement) {
-                      // متن کپی شامل متن خاطره، مرجع، نام کتاب و شباهت است.
-                      // این اطلاعات از متن نمایش داده شده در المان های نتیجه استخراج می شود.
-                      // استفاده از ? در selector برای جلوگیری از خطا اگر المان پیدا نشد.
+                      // استخراج متن از المان های نمایش داده شده
                       const passageText = resultItemElement.querySelector('.result-passage')?.textContent || '';
-                      // جایگزینی 'مرجع:' و trim برای تمیز کردن متن استخراج شده.
                       const referenceText = resultItemElement.querySelector('.result-reference')?.textContent.replace('مرجع:', '').trim() || 'نامشخص';
                       const bookTitleText = resultItemElement.querySelector('.result-book-title')?.textContent.replace('از کتاب:', '').trim() || 'نامشخص';
-                       const similarityElementText = resultItemElement.querySelector('.result-similarity')?.textContent || ''; // گرفتن متن کامل عنصر شباهت (مثلا "شباهت: 0.7500")
+                      // گرفتن متن کامل عنصر شباهت (مثلا "شباهت: 0.7500")
+                      const similarityElementText = resultItemElement.querySelector('.result-similarity')?.textContent || '';
+
 
-                       // ساخت متنی که باید کپی شود با فرمت دلخواه
-                       const textToCopy = `خاطره:\n${passageText}\n\nمرجع: ${referenceText}\nاز کتاب: ${bookTitleText}\n${similarityElementText}`; // اضافه کردن متن کامل شباهت
+                       // ساخت متنی که باید کپی شود
+                       const textToCopy = `خاطره:\n${passageText}\n\nمرجع: ${referenceText}\nاز کتاب: ${bookTitleText}\n${similarityElementText}`;
 
 
                        // کپی کردن متن به کلیپ بورد
                        navigator.clipboard.writeText(textToCopy)
                            .then(() => {
-                               // نمایش پیام موفقیت روی همان دکمه
                                event.target.textContent = 'کپی شد!';
                                setTimeout(() => {
                                    event.target.textContent = 'کپی متن';
-                               }, 2000); // بازگرداندن متن دکمه بعد از 2 ثانیه
-                               console.log("Passage, reference, book title, and similarity copied to clipboard."); // لاگ موفقیت
+                               }, 2000);
+                               console.log("Passage, reference, book title, and similarity copied."); // لاگ
                            })
                            .catch(err => {
-                               console.error('Failed to copy text: ', err); // لاگ خطا در کنسول
-                               event.target.textContent = 'خطا در کپی'; // پیام بازخورد خطا
+                               console.error('Failed to copy text: ', err); // لاگ خطا
+                               event.target.textContent = 'خطا در کپی';
                                 setTimeout(() => {
                                    event.target.textContent = 'کپی متن';
                                }, 2000);
                            });
                  } else {
-                      console.warn("Result item parent not found for copy button click."); // لاگ
+                      console.warn("Result item parent not found for copy button click."); // لاگ هشدار
                  }
             }
         });
-        console.log("Copy button delegation click listener added.");
+        console.log("Copy button delegation click listener added."); // لاگ
 
 
         // ****** راه اندازی اولیه: بارگذاری داده ها هنگام بارگذاری صفحه ******
         // این تابع فرآیند بارگذاری داده از فایل های JSON بر اساس چک باکس های پیش فرض انتخاب شده در HTML را شروع می کند.
         updateSelectedBooksData(); // این فراخوانی در نهایت checkAndEnableSearchButton را صدا می زند.
-        console.log("Initial data loading process started.");
+        console.log("Initial data loading process started."); // لاگ
 
 
     } else {
-        // اگر تمام عناصر مورد نیاز پیدا نشدند، پیام خطا در کنسول و روی صفحه نمایش داده میشود
+        // اگر تمام عناصر مورد نیاز پیدا نشدند
         const errorMessage = "خطا در بارگذاری صفحه: برخی یا تمام عناصر لازم (HTML) پیدا نشدند. شناسه‌های HTML و نام کلاس‌ها را در index.html بررسی کنید و مطمئن شوید همه عناصر ضروری وجود دارند."; // پیام خطا برای کاربر
-        console.error(errorMessage, {
-            searchButton: !!searchButton, // از !! برای تبدیل به boolean استفاده می کنیم
+        console.error(errorMessage, { // لاگ جزئیات خطا
+            searchButton: !!searchButton,
             userQuestionInput: !!userQuestionInput,
             searchResultsContainer: !!searchResultsContainer,
             loadingStatusElement: !!loadingStatusElement,
             selectionErrorElement: !!selectionErrorElement,
             selectAllCheckbox: !!selectAllCheckbox,
-            bookCheckboxesCount: bookCheckboxes ? bookCheckboxes.length : 0, // تعداد المان ها را نشان می دهد
+            bookCheckboxesCount: bookCheckboxes ? bookCheckboxes.length : 0,
             resultsPerPageSelect: !!resultsPerPageSelect,
-            similarityThresholdInput: !!similarityThresholdInput
+            similarityThresholdInput: !!similarityThresholdInput,
+            loadingSpinnerElement: !!loadingSpinnerElement // بررسی وجود اسپینر
         });
-         if (searchResultsContainer) { // اگر کانتینر نتایج پیدا شد، خطا را در آن نمایش بده
+         if (searchResultsContainer) { // نمایش خطا روی ��فحه
              searchResultsContainer.innerHTML = `<p style=\"color: red;\">${errorMessage}</p>`;
         }
         // نمایش خطا در المان های وضعیت و خطای جداگانه
-        updateStatus("راه‌اندازی اولیه با خطا مواجه شد.", true);
+        updateStatus("راه‌اندازی اولیه با خطا مواجه شد.", true, 'error');
         updateSelectionError(errorMessage);
 
-        // غیرفعال نگه داشتن دکمه جستجو اگر پیدا شد
+        // غیرفعال نگه داشتن دکمه جستجو
         if (searchButton) {
             setButtonEnabled(false);
         }
-         // نیازی به return نیست چون کد بعد از این بلوک اجرا نمی شود (به دلیل عدم وجود المان های ضروری)
+        // نیازی به return نیست.
     }
 });
 // پایان بلوک DOMContentLoaded و پایان کامل فایل script.js