@sailfish-ai/recorder 1.7.17 → 1.7.18

package/dist/modal.js

@@ -25,12 +25,12 @@ export function setupIssueReporting(options) {
         const isCmdOrCtrl = e.metaKey || e.ctrlKey;
         // Shortcuts for modal open
         if (!typingInInput && options.enableShortcuts && !isCmdOrCtrl) {
-            if (key === "o") {
+            if (key === "e") {
                 e.preventDefault();
                 injectModalHTML("lookback");
                 return;
             }
-            if (key === "c") {
+            if (key === "n") {
                 e.preventDefault();
                 injectModalHTML("startnow");
                 return;
@@ -59,10 +59,10 @@ export function setupIssueReporting(options) {
             key === "r" &&
             modalOpen &&
             currentState.mode === "startnow") {
-            const recordIcon = document.getElementById("sf-record-icon");
-            if (recordIcon) {
+            const recordBtn = document.getElementById("sf-start-recording-btn");
+            if (recordBtn) {
                 e.preventDefault();
-                recordIcon.click();
+                recordBtn.click();
             }
         }
     });
@@ -107,7 +107,7 @@ function injectModalHTML(initialMode = "lookback") {
     <div style="position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:9998;"></div>
     <div style="position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
       background:#fff; padding:24px; border-radius:12px;
-      width:424px; max-width:90%; z-index:9999;
+      width:476px; max-width:90%; z-index:9999;
       box-shadow:0 4px 20px rgba(0,0,0,0.15); font-family:sans-serif;">
 
       <button id="sf-modal-close-btn"
@@ -121,13 +121,13 @@ function injectModalHTML(initialMode = "lookback") {
       <h2 style="font-size:18px; font-weight:600; margin-bottom:16px;">Report Issue</h2>
 
       <div id="sf-issue-tabs" style="display:flex; gap:4px; margin-bottom:16px; background:#f1f5f9; padding:6px; border-radius:6px; width: fit-content;">
-        <button id="sf-tab-lookback" data-mode="lookback" class="issue-tab ${!isStartNow ? "active" : ""}"
-          style="padding:6px 12px; border:none; background:${!isStartNow ? "white" : "transparent"}; color: ${!isStartNow ? "#0F172A" : "#64748B"}; border-radius:4px; font-size:14px; cursor:pointer; font-weight:500; height:32px;">
-          Already occurred <span style="color:#94a3b8;">[o]</span>
+        <button id="sf-tab-lookback" data-mode="lookback" class="sf-issue-tab ${!isStartNow ? "active" : ""}"
+          style="padding:6px 12px; border:none; background:${!isStartNow ? "white" : "transparent"}; color: ${!isStartNow ? "#0F172A" : "#64748B"}; border-radius:4px; font-size:14px; cursor:pointer; font-weight:500; height:32px; display: flex; align-items: center; gap: 8px;">
+          Existing <span style="background: #F1F5F9; border:1px solid #cbd5e1; border-radius: 4px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-weight: 500;">e</span>
         </button>
-        <button id="sf-tab-startnow" data-mode="startnow" class="issue-tab ${isStartNow ? "active" : ""}"
-          style="padding:6px 12px; border:none; background:${isStartNow ? "white" : "transparent"}; color: ${isStartNow ? "#0F172A" : "#64748B"}; border-radius:4px; font-size:14px; cursor:pointer; font-weight:500; height:32px;">
-          Capture new <span style="color:#94a3b8;">[c]</span>
+        <button id="sf-tab-startnow" data-mode="startnow" class="sf-issue-tab ${isStartNow ? "active" : ""}"
+          style="padding:6px 12px; border:none; background:${isStartNow ? "white" : "transparent"}; color: ${isStartNow ? "#0F172A" : "#64748B"}; border-radius:4px; font-size:14px; cursor:pointer; font-weight:500; height:32px; display: flex; align-items: center; gap: 8px;">
+          Capture new <span style="background: #F1F5F9; border:1px solid #cbd5e1; border-radius: 4px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-weight: 500;">n</span>
         </button>
       </div>
 
@@ -138,11 +138,7 @@ function injectModalHTML(initialMode = "lookback") {
             <path d="M7 9.33333V7" stroke="#A1A1AA" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
             <path d="M7 4.66663H7.00583" stroke="#A1A1AA" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
           </g>
-          <defs>
-            <clipPath id="clip0_2477_11797">
-            <rect width="14" height="14" fill="white"/>
-            </clipPath>
-          </defs>
+          <defs><clipPath id="clip0_2477_11797"><rect width="14" height="14" fill="white"/></clipPath></defs>
         </svg>
         <div style="font-size:14px;">
           ${isStartNow
@@ -159,67 +155,76 @@ function injectModalHTML(initialMode = "lookback") {
                border:1px solid #cbd5e1; border-radius:6px; margin-bottom:20px;
                resize:none; outline:none;"></textarea>
 
-      <div id="sf-lookback-timestamp-container" style="display: ${isStartNow ? "none" : "block"};">
-        <label for="sf-lookback-time-input" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
-          Time stamp
+      <div id="sf-lookback-container" style="display:${isStartNow ? "none" : "block"}; margin-bottom:20px;">
+        <label for="sf-lookback-minutes" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+          When does this happened?
         </label>
-
-        <div id="sf-lookback-time-input" style="display:flex; align-items:center; gap:6px; padding:8px 12px;
-          border:1px solid #cbd5e1; border-radius:6px; width:fit-content; font-size:14px; color:#0f172a; cursor:pointer;">
-          <span id="sf-lookback-time-display">00:00</span>
-          <svg width="16" height="16" fill="none" stroke="#0f172a" stroke-width="1.5" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2" />
-            <circle cx="12" cy="12" r="9" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-        </div>
-
-        <div id="sf-lookback-dropdown" style="display:none; position:absolute; background:white; border:1px solid #e5e7eb;
-          border-radius:6px; padding:12px; margin-top:4px; box-shadow:0 4px 12px rgba(0,0,0,0.1); z-index:10000;">
-          <div style="display:flex; gap:12px;">
-            <div>
-              <label style="font-size:12px; color:#64748b;">Minutes</label>
-              <select id="sf-lookback-minutes" style="margin-top:4px; padding:6px; border:1px solid #cbd5e1; border-radius:4px;">
-                ${Array.from({ length: 60 }, (_, i) => `<option value="${i}">${i
-        .toString()
-        .padStart(2, "0")}</option>`).join("")}
-              </select>
-            </div>
-            <div>
-              <label style="font-size:12px; color:#64748b;">Seconds</label>
-              <select id="sf-lookback-seconds" style="margin-top:4px; padding:6px; border:1px solid #cbd5e1; border-radius:4px;">
-                ${Array.from({ length: 60 }, (_, i) => `<option value="${i}">${i
-        .toString()
-        .padStart(2, "0")}</option>`).join("")}
-              </select>
+        <div style="display:flex; align-items:center; gap:6px;">
+          <div style="position:relative;">
+            <select id="sf-lookback-minutes"
+              style="
+                background: white;
+                padding: 4px 8px;
+                font-size: 14px;
+                border: 1px solid #cbd5e1;
+                border-radius: 6px;
+                color: #64748B;
+                font-family: sans-serif;
+                outline: none;
+                box-shadow: none;
+                appearance: none;
+                -webkit-appearance: none;
+                -moz-appearance: none;
+                padding-right: 28px;
+                cursor: pointer;
+                font-size: 14px;
+                line-height: 20px;
+              ">
+              ${Array.from({ length: 15 }, (_, i) => {
+        const value = i + 1;
+        const selected = value === 2 ? "selected" : "";
+        return `<option value="${value}" ${selected}>${value}</option>`;
+    }).join("")}
+            </select>
+            <div style="position:absolute; left:32px; top:50%; transform:translateY(-50%); pointer-events:none;">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path d="M4 6L8 10L12 6" stroke="#52525B" stroke-width="1.33333"
+                      stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
             </div>
           </div>
+          <span style="font-size:14px; color: #64748B;">mins ago</span>
         </div>
-
-        <div style="font-size:12px; color:#a1a1aa; margin-top:4px;">Enter time stamp here. Max 1 hour.</div>
       </div>
 
-      <div id="sf-start-recording" style="display: ${isStartNow ? "block" : "none"};">
-        <label for="sf-inline-record-chip" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
-          Start recording <span style="color:#94a3b8;">[r]</span>
-        </label>
+      <div id="sf-modal-footer" style="display:flex; justify-content:${isStartNow ? "space-between" : "flex-end"}; align-items:flex-end;">
 
-        <div id="sf-inline-record-chip" style="display:flex; margin-top:8px; align-items:center; gap:8px;">
-          <div id="sf-record-icon" style="padding: 8px; border-radius: 6px; border: 1px solid #9dd3ef;  cursor: pointer;">
-            <div style="width: 14px; height: 14px; background: #fc5555; border-radius: 50%; border: 1px solid #991b1b;"></div>
-          </div>
-          <div>
-            <div id="sf-inline-record-timer" style="font-family: monospace; font-weight: 500; color: #d4d4d8;">00:00</div>
-            <div style="font-size: 12px; color: #a1a1aa; margin-top: 2px;">Max time stamp 1 hour.</div>
+        <div id="sf-record-button-container" style="display:${isStartNow ? "block" : "none"};">
+          <div id="sf-recording-timer-label" style="display:none; font-size:14px; margin-bottom:20px;">
+            Recording: <span id="sf-recording-timer-display">00:00</span>
           </div>
+          <button id="sf-start-recording-btn"
+            style="display:flex; align-items:center; gap:8px; border:1px solid #fc5555;
+                   background:transparent; padding:6px 12px; font-size:14px;
+                   color: #fc5555; border-radius:6px; cursor:pointer; font-weight:500;">
+            <div id="sf-record-icon" style="padding: 6px; border-radius: 6px; border: 1px solid #fc5555; cursor: pointer;">
+              <div style="width: 14px; height: 14px; background: #fc5555; border-radius: 50%; border: 1px solid #991b1b;"></div>
+            </div>
+            <span>Start Recording</span>
+            <span style="background: #F1F5F9; border:1px solid #cbd5e1; border-radius: 4px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-weight: 500;">r</span>
+          </button>
         </div>
-      </div>
 
-      <div style="display:flex; justify-content:flex-end; margin-top:16px;">
         <button id="sf-issue-submit-btn"
           style="background: #295DBF; color:white; border:none; padding:8px 16px;
-          border-radius:6px; font-size:14px; line-height: 24px; font-weight:500; cursor:not-allowed; opacity:0.4;"
-          disabled>
-          Create Triage <span style="color: #E2E8F0; margin-left:6px; font-size:10px; line-height: 20px;">[cmd+enter]</span>
+          border-radius:6px; font-size:14px; line-height: 24px; font-weight:500;
+          cursor:${isStartNow ? "not-allowed" : "pointer"}; opacity:${isStartNow ? "0.4" : "1"}; margin-bottom:1px" ${isStartNow ? "disabled" : ""}>
+          Create Triage <span style="margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; color: #94A3B8; font-size: 14px; line-height:18px;">
+                          <span style="background: #F1F5F9; border-radius: 4px; padding: 0 6px; font-weight: 500;">cmd</span>
+                          +
+                          <span style="background: #F1F5F9; border-radius: 4px; padding: 0 6px; font-weight: 500;">enter</span>
+                        </span>
         </button>
       </div>
     </div>
@@ -245,121 +250,96 @@ function setActiveTab(mode) {
     }
 }
 function updateModeSpecificUI(mode) {
-    const infoText = document.getElementById("sf-issue-mode-info");
-    const infoMessage = infoText?.querySelector("div");
+    const infoMessage = document.querySelector("#sf-issue-mode-info div");
     const submitBtn = document.getElementById("sf-issue-submit-btn");
-    const timerText = document.getElementById("sf-inline-record-timer");
-    const timestampContainer = document.getElementById("sf-lookback-timestamp-container");
-    const startRecording = document.getElementById("sf-start-recording");
-    if (!infoText || !infoMessage || !submitBtn)
+    const recordContainer = document.getElementById("sf-record-button-container");
+    const recordLabel = document.getElementById("sf-recording-timer-label");
+    const recordTime = document.getElementById("sf-recording-timer-display");
+    const footer = document.getElementById("sf-modal-footer");
+    const lookbackContainer = document.getElementById("sf-lookback-container");
+    if (!infoMessage ||
+        !submitBtn ||
+        !recordContainer ||
+        !recordLabel ||
+        !recordTime ||
+        !footer ||
+        !lookbackContainer)
         return;
     if (mode === "startnow") {
-        if (startRecording)
-            startRecording.style.display = "block";
-        if (timestampContainer)
-            timestampContainer.style.display = "none";
+        // Show record button, hide lookback
+        recordContainer.style.display = "block";
+        lookbackContainer.style.display = "none";
+        footer.style.justifyContent = "space-between";
         infoMessage.textContent = "I want to reproduce the issue right now.";
-        // Disable submit if recording not done yet
         const canSubmit = recordingStartTime !== null && recordingEndTime !== null;
         submitBtn.disabled = !canSubmit;
         submitBtn.style.opacity = canSubmit ? "1" : "0.4";
         submitBtn.style.cursor = canSubmit ? "pointer" : "not-allowed";
-        // Show current timer value if available
-        if (recordingStartTime && recordingEndTime && timerText) {
+        if (recordingStartTime && recordingEndTime) {
             const duration = Math.floor((recordingEndTime - recordingStartTime) / 1000);
             const mins = String(Math.floor(duration / 60)).padStart(2, "0");
             const secs = String(duration % 60).padStart(2, "0");
-            timerText.textContent = `${mins}:${secs}`;
-            timerText.style.color = "#171717";
+            recordLabel.style.display = "block";
+            recordTime.textContent = `${mins}:${secs}`;
         }
-        else if (timerText) {
-            timerText.textContent = "00:00";
-            timerText.style.color = "#d4d4d8";
+        else {
+            recordLabel.style.display = "none";
         }
     }
-    else if (mode === "lookback") {
-        if (startRecording)
-            startRecording.style.display = "none";
-        if (timestampContainer)
-            timestampContainer.style.display = "block";
+    else {
+        // Show lookback, hide recording
+        recordContainer.style.display = "none";
+        recordLabel.style.display = "none";
+        lookbackContainer.style.display = "block";
+        footer.style.justifyContent = "flex-end";
         infoMessage.textContent =
             "Something already happened. Capture the past few minutes.";
-        // Enable submit only if a valid timestamp is selected
-        const mins = Number(document.getElementById("sf-lookback-minutes")
-            ?.value || "0");
-        const secs = Number(document.getElementById("sf-lookback-seconds")
-            ?.value || "0");
-        const canSubmit = mins > 0 || secs > 0;
-        submitBtn.disabled = !canSubmit;
-        submitBtn.style.opacity = canSubmit ? "1" : "0.4";
-        submitBtn.style.cursor = canSubmit ? "pointer" : "not-allowed";
+        submitBtn.disabled = false;
+        submitBtn.style.opacity = "1";
+        submitBtn.style.cursor = "pointer";
     }
 }
 function bindListeners() {
-    const timeInput = document.getElementById("sf-lookback-time-input");
-    const dropdown = document.getElementById("sf-lookback-dropdown");
-    const display = document.getElementById("sf-lookback-time-display");
+    const tabButtons = modalEl?.querySelectorAll(".sf-issue-tab");
+    const recordBtn = document.getElementById("sf-start-recording-btn");
     const closeBtn = document.getElementById("sf-modal-close-btn");
-    const recordIcon = document.getElementById("sf-record-icon");
-    if (closeBtn) {
-        closeBtn.onclick = () => {
-            closeModal();
-        };
-    }
-    if (recordIcon) {
-        recordIcon.onclick = () => {
-            const descInput = document.getElementById("sf-issue-description");
-            currentState.description = descInput?.value ?? "";
-            startCountdownThenRecord();
-        };
-    }
-    timeInput?.addEventListener("click", () => {
-        if (!dropdown)
-            return;
-        if (dropdown.style.display === "none") {
-            dropdown.style.display = "block";
-        }
-        else {
-            dropdown.style.display = "none";
-        }
-    });
-    window.addEventListener("click", (e) => {
-        if (!dropdown)
-            return;
-        if (!dropdown.contains(e.target) &&
-            !timeInput?.contains(e.target)) {
-            dropdown.style.display = "none";
-        }
-    });
-    const updateTimeDisplay = () => {
-        const mins = Number(document.getElementById("sf-lookback-minutes")
-            ?.value || "0");
-        const secs = Number(document.getElementById("sf-lookback-seconds")
-            ?.value || "0");
-        if (display) {
-            display.textContent = `${mins.toString().padStart(2, "0")}:${secs
-                .toString()
-                .padStart(2, "0")}`;
-        }
-        updateModeSpecificUI("lookback"); // re-check submit button status
-    };
-    // Handle dropdown value changes
-    document
-        .getElementById("sf-lookback-minutes")
-        ?.addEventListener("change", updateTimeDisplay);
-    document
-        .getElementById("sf-lookback-seconds")
-        ?.addEventListener("change", updateTimeDisplay);
-    modalEl?.querySelectorAll(".issue-tab").forEach((tabBtn) => {
+    const submitBtn = document.getElementById("sf-issue-submit-btn");
+    const minutesSelect = document.getElementById("sf-lookback-minutes");
+    // Tab switch
+    tabButtons?.forEach((tabBtn) => {
         tabBtn.addEventListener("click", (e) => {
             const mode = e.currentTarget.dataset
                 .mode;
-            currentState.mode = mode;
             setActiveTab(mode);
-            // Optionally toggle relevant UI
             updateModeSpecificUI(mode);
         });
     });
+    // Close modal
+    if (closeBtn) {
+        closeBtn.onclick = closeModal;
+    }
+    // Time select change
+    if (minutesSelect) {
+        minutesSelect.addEventListener("change", () => {
+            if (currentState.mode === "lookback") {
+                // Always valid now, so no need to validate input
+                submitBtn.disabled = false;
+                submitBtn.style.opacity = "1";
+                submitBtn.style.cursor = "pointer";
+            }
+        });
+    }
+    // Start recording
+    if (recordBtn) {
+        recordBtn.onclick = () => {
+            const descInput = document.getElementById("sf-issue-description");
+            if (descInput) {
+                currentState.description = descInput.value;
+            }
+            startCountdownThenRecord();
+        };
+    }
+    // Submit
     modalEl?.addEventListener("click", (e) => {
         const target = e.target;
         if (target.closest("#sf-issue-submit-btn")) {
@@ -374,12 +354,8 @@ function bindListeners() {
                 endTimestamp = recordingEndTime ?? Date.now();
             }
             else {
-                // Parse time from time selector
-                const minutes = Number(document.getElementById("sf-lookback-minutes")
-                    ?.value || "0");
-                const seconds = Number(document.getElementById("sf-lookback-seconds")
-                    ?.value || "0");
-                const delta = (minutes * 60 + seconds) * 1000;
+                const minutes = Number(minutesSelect?.value || "2");
+                const delta = minutes * 60 * 1000;
                 endTimestamp = Date.now();
                 startTimestamp = endTimestamp - delta;
             }
@@ -431,28 +407,40 @@ function showFloatingTimer() {
     timer.id = "sf-recording-indicator";
     timer.style.cssText = `
     position: fixed;
-    bottom: 16px;
-    right: 16px;
+    bottom: 20px;
+    right: 20px;
     background: white;
-    border: 1px solid #cbd5e1;
     border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
-    padding: 8px 16px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+    padding: 8px 12px;
     font-family: sans-serif;
     font-size: 14px;
     display: flex;
-    align-items: center;
-    gap: 8px;
+    align-items: start;
+    gap: 24px;
     z-index: 10000;
-    width: 168px;
+    cursor: pointer;
   `;
     timer.innerHTML = `
-    <div id="sf-stop-icon" style="width: 24px; height: 24px; background: #fc5555; border-radius: 6px; border: 1px solid #991b1b; display: flex; align-items: center; justify-content: center; cursor: pointer;">
-      <div style="width: 8px; height: 8px; background: white; border-radius: 2px;"></div>
+    <div style="display:flex; align-items:center; gap:8px;">
+      <div style="width:32px; height:32px; background:#FC5555; border-radius:6px; border:1px solid #991b1b; display:flex; align-items:center; justify-content:center;">
+        <div style="width:10px; height:10px; background:white; border-radius:2px;"></div>
+      </div>
+      <div style="display:flex; flex-direction:column; font-size:14px; line-height:20px;">
+        <span id="sf-recording-timer" style="font-weight:600; color: #171717;">00:00</span>
+        <span style="font-size:12px; line-height:12px; color: #71717A;">Max time 15 mins</span>
+      </div>
+    </div>
+    <div style="display:flex; align-items:center; gap:4px; margin-left:auto; font-size:14px; color:#0F172A;">
+      <span style="color: #71717A;">stop</span>
+      <span style="display: inline-flex; align-items: center; gap: 4px; color: #94A3B8; font-size: 14px; line-height:18px;">
+        <span style="background: #F1F5F9; border-radius: 4px; border:1px solid #cbd5e1; padding: 0 6px; font-weight: 500;">cmd</span>
+        +
+        <span style="background: #F1F5F9; border-radius: 4px; border:1px solid #cbd5e1; padding: 0 6px; font-weight: 500;">esc</span>
+      </span>
     </div>
-    <span id="sf-recording-timer">00:00</span>
-    <div style="font-size:10px; color:#94a3b8;">[cmd] + [esc]</div>
   `;
+    timer.addEventListener("click", () => stopRecording());
     document.body.appendChild(timer);
     const timerEl = timer.querySelector("#sf-recording-timer");
     if (!timerEl)
@@ -467,8 +455,6 @@ function showFloatingTimer() {
             .padStart(2, "0");
         timerEl.textContent = `${mins}:${secs}`;
     }, 1000);
-    const stopBtn = timer.querySelector("#sf-stop-icon");
-    stopBtn?.addEventListener("click", () => stopRecording());
 }
 function stopRecording() {
     recordingEndTime = Date.now();
@@ -480,6 +466,23 @@ function stopRecording() {
 }
 function reopenModalAfterStop() {
     injectModalHTML("startnow");
+    const recordBtn = document.getElementById("sf-start-recording-btn");
+    if (recordBtn) {
+        const span = recordBtn.querySelector("span");
+        if (span)
+            span.textContent = "Re-record";
+    }
+    const timerLabel = document.getElementById("sf-recording-timer-label");
+    const timerDisplay = document.getElementById("sf-recording-timer-display");
+    if (timerLabel && timerDisplay && recordingStartTime && recordingEndTime) {
+        const durationSec = Math.floor((recordingEndTime - recordingStartTime) / 1000);
+        const mins = Math.floor(durationSec / 60)
+            .toString()
+            .padStart(2, "0");
+        const secs = (durationSec % 60).toString().padStart(2, "0");
+        timerDisplay.textContent = `${mins}:${secs}`;
+        timerLabel.style.display = "block";
+    }
     const descBox = document.getElementById("sf-issue-description");
     if (descBox)
         descBox.value = currentState.description;
@@ -536,7 +539,7 @@ function showTriageStatusModal(isLoading, triageId) {
         : "";
     const spinner = isLoading
         ? `<div style="display:flex; justify-content:center; align-items:center; padding: 40px 0;">
-        <div class="spinner" style="width:24px; height:24px; border:2px solid #295dbf; border-top:2px solid white; border-radius:50%; animation:spin 1s linear infinite;"></div>
+        <div style="width:24px; height:24px; border:2px solid #295dbf; border-top:2px solid white; border-radius:50%; animation:spin 1s linear infinite;"></div>
       </div>`
         : "";
     const copiedStatus = !isLoading