@sailfish-ai/recorder 1.7.29 → 1.7.34

package/dist/graphql.js

@@ -41,11 +41,33 @@ export function fetchCaptureSettings(apiKey, backendApi) {
     }
   `, { apiKey, backendApi });
 }
-export function startRecordingSession(apiKey, recordingId, backendApi) {
-    return sendGraphQLRequest("StartSession", `mutation StartSession($apiKey: UUID!, $recordingSessionId: UUID!) {
+export function startRecordingSession(apiKey, recordingId, backendApi, serviceIdentifier, serviceVersion, mapUuid, gitSha, library, serviceAdditionalMetadata) {
+    // These must be sent as None/Null for now (not user-provided)
+    const startRecordingFilePath = null;
+    const startRecordingFileNumber = null;
+    return sendGraphQLRequest("StartSession", `mutation StartSession(
+      $apiKey: UUID!,
+      $recordingSessionId: UUID!,
+      $serviceIdentifier: String!,
+      $serviceVersion: String,
+      $mapUuid: String,
+      $gitSha: String,
+      $library: String,
+      $serviceAdditionalMetadata: JSON,
+      $startRecordingFilePath: String,
+      $startRecordingFileNumber: Int
+    ) {
       startRecordingSession(
         companyApiKey: $apiKey,
-        sessionId: $recordingSessionId
+        sessionId: $recordingSessionId,
+        serviceIdentifier: $serviceIdentifier,
+        serviceVersion: $serviceVersion,
+        mapUuid: $mapUuid,
+        gitSha: $gitSha,
+        library: $library,
+        serviceAdditionalMetadata: $serviceAdditionalMetadata,
+        startRecordingFilePath: $startRecordingFilePath,
+        startRecordingFileNumber: $startRecordingFileNumber
       ) {
         id
       }
@@ -53,6 +75,14 @@ export function startRecordingSession(apiKey, recordingId, backendApi) {
         apiKey,
         recordingSessionId: recordingId,
         backendApi,
+        serviceIdentifier,
+        serviceVersion,
+        mapUuid,
+        gitSha,
+        library,
+        serviceAdditionalMetadata,
+        startRecordingFilePath,
+        startRecordingFileNumber,
     });
 }
 export function sendDomainsToNotPropagateHeaderTo(apiKey, domains, backendApi) {

package/dist/{modal.js → inAppReportIssueModal.js}

@@ -1,6 +1,10 @@
 import { createTriageFromRecorder } from "./graphql";
 let modalEl = null;
-let currentState = { mode: "lookback", description: "" };
+let currentState = {
+    mode: "lookback",
+    description: "",
+    occurredInThisTab: true,
+};
 let recordingStartTime = null;
 let recordingEndTime = null;
 let timerInterval = null;
@@ -8,6 +12,19 @@ let isRecording = false;
 let resolveSessionId = null;
 let apiKey = null;
 let backendApi = null;
+let triageBaseUrl = "https://app.sailfishqa.com";
+function isMacPlatform() {
+    // Newer API (Chrome, Edge, Opera)
+    const uaData = navigator.userAgentData;
+    if (uaData?.platform) {
+        return uaData.platform.toLowerCase().includes("mac");
+    }
+    // Fallback: parse userAgent string
+    return /mac/i.test(navigator.userAgent);
+}
+function getShortcutKeyCmdCtrlLabel() {
+    return isMacPlatform() ? "⌘" : "Ctrl";
+}
 function isTypingInInput() {
     const el = document.activeElement;
     return (el instanceof HTMLInputElement ||
@@ -40,6 +57,12 @@ export function setupIssueReporting(options) {
         const modalOpen = !!document.getElementById("sf-report-issue-modal");
         if (!modalOpen && !isRecording)
             return;
+        // Escape key → close modal (only if not recording and modal is open)
+        if (!isCmdOrCtrl && key === "escape" && modalOpen && !isRecording) {
+            e.preventDefault();
+            closeModal();
+            return;
+        }
         // Cmd/Ctrl + Enter → submit
         if (isCmdOrCtrl && key === "enter" && modalOpen) {
             const submitBtn = document.getElementById("sf-issue-submit-btn");
@@ -73,7 +96,7 @@ function getSessionIdSafely() {
     }
     return resolveSessionId();
 }
-export function openReportIssueModal() {
+export function openReportIssueModal(customBaseUrl) {
     if (isRecording) {
         stopRecording();
         return;
@@ -81,14 +104,24 @@ export function openReportIssueModal() {
     injectModalHTML();
     if (modalEl)
         document.body.appendChild(modalEl);
+    // Store custom base URL globally for reuse
+    triageBaseUrl = customBaseUrl ?? "https://app.sailfishqa.com";
 }
 function closeModal() {
+    // ✅ Explicitly blur the focused element
+    if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+    }
     if (modalEl?.parentNode) {
         modalEl.parentNode.removeChild(modalEl);
     }
     modalEl = null;
     if (!isRecording) {
-        currentState = { mode: "lookback", description: "" };
+        currentState = {
+            mode: "lookback",
+            description: "",
+            occurredInThisTab: true,
+        };
         recordingStartTime = null;
         recordingEndTime = null;
     }
@@ -123,11 +156,11 @@ function injectModalHTML(initialMode = "lookback") {
       <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="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>
+          Existing <span style="background: #F1F5F9; border:1px solid #cbd5e1; border-radius: 4px; width: 16px; height: 16px; font-size: 12px; 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="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>
+          Capture new <span style="background: #F1F5F9; border:1px solid #cbd5e1; border-radius: 4px; width: 16px; height: 16px; font-size: 12px; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-weight: 500;">N</span>
         </button>
       </div>
 
@@ -159,8 +192,8 @@ function injectModalHTML(initialMode = "lookback") {
         <label for="sf-lookback-minutes" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
           When did this happen?
         </label>
-        <div style="display:flex; align-items:center; gap:6px;">
-          <div style="position:relative;">
+        <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
+          <div style="position:relative; display:flex; align-items:center; gap:6px;">
             <select id="sf-lookback-minutes"
               style="
                 background: white;
@@ -193,8 +226,21 @@ function injectModalHTML(initialMode = "lookback") {
                       stroke-linecap="round" stroke-linejoin="round"/>
               </svg>
             </div>
+            <span style="font-size:14px; color: #64748B;">minutes ago</span>
+          </div>
+          <div>
+            <label for="sf-occurred-in-tab"
+                  style="display:flex; align-items:center; gap:6px; font-size:14px; color:#0F172A; cursor:pointer; white-space:nowrap;">
+              <input
+                type="checkbox"
+                id="sf-occurred-in-tab"
+                checked
+                disabled
+                style="width:16px; height:16px; accent-color:#295DBF; cursor:pointer;"
+              />
+              The issue occurred in this tab?
+            </label>
           </div>
-          <span style="font-size:14px; color: #64748B;">minutes ago</span>
         </div>
       </div>
 
@@ -212,7 +258,7 @@ function injectModalHTML(initialMode = "lookback") {
               <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>
+            <span style="background: #F1F5F9; border:1px solid #cbd5e1; border-radius: 4px; width: 16px; height: 16px; font-size: 12px; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-weight: 500;">R</span>
           </button>
         </div>
 
@@ -220,10 +266,10 @@ function injectModalHTML(initialMode = "lookback") {
           style="background: #295DBF; color:white; border:none; padding:8px 16px;
           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>
+          Create Triage <span style="margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; color: #94A3B8; font-size: 12px; line-height:16px;">
+                          <span style="background: #F1F5F9; border-radius: 4px; padding: 0 4px; font-weight: 500;">${getShortcutKeyCmdCtrlLabel()}</span>
                           +
-                          <span style="background: #F1F5F9; border-radius: 4px; padding: 0 6px; font-weight: 500;">enter</span>
+                          <span style="background: #F1F5F9; border-radius: 4px; padding: 0 4px; font-weight: 500;">ENTER</span>
                         </span>
         </button>
       </div>
@@ -437,10 +483,10 @@ function showFloatingTimer() {
     </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="display: inline-flex; align-items: center; gap: 4px; color: #94A3B8; font-size: 12px; line-height:16px;">
+        <span style="background: #F1F5F9; border-radius: 4px; border:1px solid #cbd5e1; padding: 0 4px; font-weight: 500;">${getShortcutKeyCmdCtrlLabel()}</span>
         +
-        <span style="background: #F1F5F9; border-radius: 4px; border:1px solid #cbd5e1; padding: 0 6px; font-weight: 500;">esc</span>
+        <span style="background: #F1F5F9; border-radius: 4px; border:1px solid #cbd5e1; padding: 0 4px; font-weight: 500;">ESC</span>
       </span>
     </div>
   `;
@@ -532,9 +578,7 @@ async function createTriage(startTimestamp, endTimestamp, description) {
 }
 function showTriageStatusModal(isLoading, triageId) {
     removeExistingModals();
-    const triageUrl = triageId
-        ? `https://app.sailfishqa.com/triage/${triageId}`
-        : "";
+    const triageUrl = triageId ? `${triageBaseUrl}/triage/${triageId}` : "";
     const container = document.createElement("div");
     container.id = "sf-triage-status-modal";
     const statusTitle = isLoading ? "Creating Triage..." : "Triage created!";

package/dist/index.js

@@ -4,8 +4,8 @@ import { v4 as uuidv4 } from "uuid";
 import { NetworkRequestEventId, STATIC_EXTENSIONS, xSf3RidHeader, } from "./constants";
 import { gatherAndCacheDeviceInfo } from "./deviceInfo";
 import { fetchCaptureSettings, sendDomainsToNotPropagateHeaderTo, startRecordingSession, } from "./graphql";
+import { setupIssueReporting } from "./inAppReportIssueModal";
 import { sendMapUuidIfAvailable } from "./mapUuid";
-import { setupIssueReporting } from "./modal";
 import { getUrlAndStoredUuids, initializeConsolePlugin, initializeDomContentEvents, initializeRecording, } from "./recording";
 import { sendEvent, sendMessage } from "./websocket";
 // Default list of domains to ignore
@@ -771,9 +771,60 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
         }
     }
 }
+// Note - if you update this, you must copy this function to the documentation in docs/docs/getting-started/updating-autoinstall-prs.md.
+function getCompileTimeGitSha() {
+    // 1) Preferred: a hard-coded global replaced at build time (all bundlers support "define")
+    //    e.g. webpack DefinePlugin/esbuild/rollup/vite: __GIT_SHA__ => JSON.stringify('<sha>')
+    try {
+        const g = globalThis;
+        if (g && typeof g.__GIT_SHA__ === "string" && g.__GIT_SHA__) {
+            return g.__GIT_SHA__;
+        }
+    }
+    catch { }
+    // 2) Common pattern: process.env.GIT_SHA (webpack/rollup/esbuild/parcel)
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const p = typeof process !== "undefined" ? process : undefined;
+        if (p?.env?.GIT_SHA)
+            return String(p.env.GIT_SHA);
+    }
+    catch { }
+    // 3) Vite (or other tools exposing import.meta.env)
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const im = import.meta;
+        if (im?.env?.VITE_GIT_SHA)
+            return String(im.env.VITE_GIT_SHA);
+        if (im?.env?.GIT_SHA)
+            return String(im.env.GIT_SHA);
+    }
+    catch { }
+    return undefined;
+}
+// --- helper for mapUuid default from window ---
+function getMapUuidFromWindow() {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const w = window;
+        if (w && typeof w.sfMapUuid === "string" && w.sfMapUuid) {
+            return w.sfMapUuid;
+        }
+    }
+    catch { }
+    return undefined;
+}
 // Main Recording Function
-export async function startRecording({ apiKey, backendApi = "https://api-service.sailfishqa.com", domainsToPropagateHeaderTo = [], domainsToNotPropagateHeaderTo = [], serviceVersion = "", serviceIdentifier = "", }) {
-    let sessionId = getOrSetSessionId();
+// Note - we do NOT send serviceIdentifier because
+// it would be 1 serviceIdentifier per frontend user session,
+// which is very wasteful
+export async function startRecording({ apiKey, backendApi = "https://api-service.sailfishqa.com", domainsToPropagateHeaderTo = [], domainsToNotPropagateHeaderTo = [], serviceVersion, serviceIdentifier, gitSha, serviceAdditionalMetadata, }) {
+    const effectiveGitSha = gitSha ?? getCompileTimeGitSha();
+    const effectiveServiceIdentifier = serviceIdentifier ?? "";
+    const effectiveServiceVersion = serviceVersion ?? "";
+    const effectiveLibrary = "JS/TS"; // from Recorder.LIBRARY_CHOICES
+    const effectiveMapUuid = getMapUuidFromWindow();
+    const sessionId = getOrSetSessionId();
     initializeDomContentEvents(sessionId);
     initializeConsolePlugin(DEFAULT_CONSOLE_RECORDING_SETTINGS, sessionId);
     storeCredentialsAndConnection({ apiKey, backendApi });
@@ -806,7 +857,7 @@ export async function startRecording({ apiKey, backendApi = "https://api-service
         const captureSettingsResponse = await fetchCaptureSettings(apiKey, backendApi);
         const captureSettings = captureSettingsResponse.data?.captureSettingsFromApiKey ||
             DEFAULT_CAPTURE_SETTINGS;
-        const sessionResponse = await startRecordingSession(apiKey, sessionId, backendApi);
+        const sessionResponse = await startRecordingSession(apiKey, sessionId, backendApi, effectiveServiceIdentifier, effectiveServiceVersion, effectiveMapUuid, effectiveGitSha, effectiveLibrary, serviceAdditionalMetadata);
         if (sessionResponse.data?.startRecordingSession) {
             const websocket = await initializeRecording(captureSettings, 
             // DEFAULT_NETWORK_CAPTURE_SETTINGS,
@@ -839,7 +890,7 @@ export const initRecorder = async (options) => {
 };
 // Re-export from other modules
 export * from "./graphql";
-export { openReportIssueModal } from "./modal";
+export { openReportIssueModal } from "./inAppReportIssueModal";
 export * from "./recording";
 export * from "./sendSailfishMessages";
 export * from "./types";

package/dist/recording.js

@@ -3,8 +3,9 @@ import { getRecordConsolePlugin, } from "@sailfish-rrweb/rrweb-plugin-console-re
 // import { NetworkRecordOptions } from "@sailfish-rrweb/rrweb-plugin-network-record";
 import { EventType } from "@sailfish-rrweb/types";
 import { ZendeskAPI } from "react-zendesk";
+import { Complete, DomContentEventId, DomContentSource, Loading, } from "./constants";
+import suppressConsoleLogsDuringCall from "./suppressConsoleLogsDuringCall";
 import { initializeWebSocket, sendEvent } from "./websocket";
-import { DomContentEventId, DomContentSource, Loading, Complete } from "./constants";
 const MASK_CLASS = "sailfishSanitize";
 const ZENDESK_ELEMENT_ID = "zendesk_chat";
 const ZENDESK_PROVIDER = "Zendesk";
@@ -121,9 +122,11 @@ backendApi, apiKey, sessionId) {
             maskTextClass: MASK_CLASS,
             ...captureSettings,
         });
-        ZendeskAPI("messenger:set", "conversationTags", [
-            `${ZENDESK_TAG_PREFIX}${sessionId}`,
-        ]);
+        suppressConsoleLogsDuringCall(() => {
+            ZendeskAPI("messenger:set", "conversationTags", [
+                `${ZENDESK_TAG_PREFIX}${sessionId}`,
+            ]);
+        });
         const handleWidgetOpen = () => {
             record.addSailfishEvent(EventType.SailfishCustom, {
                 action: "customer support chat opened",
@@ -145,9 +148,11 @@ backendApi, apiKey, sessionId) {
                 provider: ZENDESK_PROVIDER,
             });
         };
-        ZendeskAPI("messenger:on", "open", handleWidgetOpen);
-        ZendeskAPI("messenger:on", "close", handleWidgetClose);
-        ZendeskAPI("messenger:on", "unreadMessages", handleUnreadMessages);
+        suppressConsoleLogsDuringCall(() => {
+            ZendeskAPI("messenger:on", "open", handleWidgetOpen);
+            ZendeskAPI("messenger:on", "close", handleWidgetClose);
+            ZendeskAPI("messenger:on", "unreadMessages", handleUnreadMessages);
+        });
     }
     catch (error) {
         console.error("Error importing plugins!", error);