callix-dialer-widget 2.7.0 → 2.8.1

package/WIDGET-README.md

@@ -119,18 +119,33 @@ CallixDialer.init({
   apiUrl: 'https://callix-zeta.vercel.app/api/user-sdk-session', // continua: é onde o login é feito
   uiVariant: 'mobile',
   engineUrl: 'https://motor.exemplo.com',   // host do motor (HTTPS; o navegador exige origem segura para o microfone)
-  engineToken: '...',                       // ENGINE_TAB_TOKEN do host
 });
 ```
 
-Também pelo HTML: `data-callix-engine-url` e `data-callix-engine-token` no container.
+Também pelo HTML: `data-callix-engine-url` no container. Só isso: desde a 2.8.0 o widget não
+precisa do token do host (`engineToken`). A credencial da aba é a própria sessão do Callix que
+o widget cria em `apiUrl` e guarda no navegador: uma aba nova ou um F5 no mesmo navegador
+apresenta esse token e entra na sessão que o motor roda; outro navegador ou computador não o
+tem, vê "Entrar" com o aviso de que o discador está em uso em outro lugar, e ao entrar faz um
+login novo que substitui a sessão de lá (como o Callix web faz). O host confirma no Callix
+toda sessão entregue antes de subir o motor com ela. `engineToken` continua aceito, mas só
+serve para uso administrativo (página `tab/` do motor, roteiros); não o coloque em página
+pública.
 
 Fluxo de login no modo motor: o widget conecta ao host com o usuário; se o motor já segura
-a sessão desse agente, entra direto. Senão, faz o login em `apiUrl` e entrega a sessão ao
-motor, que sobe o SDK no servidor. O widget nunca cria uma sessão por cima de uma viva: o
-login exclusivo do Callix derrubaria a que o motor está usando. Se o Callix derrubar a
-sessão (login no Callix web, supervisor, bloqueio), o widget volta à tela de login com o
-motivo e não reentra sozinho.
+a sessão desse agente e a aba tem a credencial dela, entra direto. Senão, faz o login em
+`apiUrl` e entrega a sessão ao motor, que sobe o SDK no servidor. No mesmo navegador o
+widget nunca cria uma sessão por cima de uma viva (o login exclusivo do Callix derrubaria a
+que o motor está usando); de outro navegador ele só cria depois que o agente clica em
+Entrar, avisado de que encerra a sessão de lá. Se o Callix derrubar a sessão (login no
+Callix web, supervisor, bloqueio), o widget volta à tela de login com o motivo e não reentra
+sozinho.
+
+Pausas no modo motor (2.8.1): a lista de pausas é a do serviço no Callix, trazida pela vista
+do motor; a pausa escolhida vai no comando `pause` e o discador mostra o nome dela. Com um
+motor anterior ao 2.8.1 a lista cai numa pausa única ("Pausa") e o motor usa a configurada
+nele. O widget também informa a própria versão ao host, que a registra no log: é o jeito de
+achar navegadores com um build antigo em cache.
 
 Sem `engineUrl` nada muda: o SDK continua rodando no navegador como sempre.
 

package/dist-widget/callix-dialer.es.js

@@ -43725,6 +43725,13 @@ function requireClientSdkReact() {
   return clientSdkReact;
 }
 var clientSdkReactExports = requireClientSdkReact();
+class EngineAccessError extends Error {
+  constructor(code, message) {
+    super(message);
+    this.code = code;
+    this.name = "EngineAccessError";
+  }
+}
 class EngineSignal {
   constructor(value) {
     this.value = value;
@@ -43791,7 +43798,8 @@ class EngineClient {
       outputMuted: false,
       outputVolume: 100,
       transcript: INITIAL_TRANSCRIPT,
-      sessionLost: null
+      sessionLost: null,
+      rejected: null
     };
   }
   // ------------------------------------------------------------------ store
@@ -43824,7 +43832,17 @@ class EngineClient {
       if (this.ws !== ws) return;
       this.reconnectDelay = RECONNECT_MIN_MS;
       this.setState({ wsState: "open" });
-      const hello = { type: "hello", role: "tab", agentId: this.agentId, token: this.options.token, label: this.options.label ?? "Discador", ...this.session ? { session: this.session } : {} };
+      const sessionToken = !this.session && this.options.sessionToken ? this.options.sessionToken() : null;
+      const hello = {
+        type: "hello",
+        role: "tab",
+        agentId: this.agentId,
+        ...this.options.token ? { token: this.options.token } : {},
+        ...this.options.version ? { version: this.options.version } : {},
+        ...sessionToken ? { sessionToken } : {},
+        label: this.options.label ?? "Discador",
+        ...this.session ? { session: this.session } : {}
+      };
       this.send(hello);
       this.log("conectado ao host do motor");
     };
@@ -43871,18 +43889,30 @@ class EngineClient {
     for (const waiter of this.viewWaiters.splice(0)) clearTimeout(waiter.timer);
     this.setState({ wsState: "closed", tabId: null, engaged: false });
   }
-  /** a view atual, ou a próxima que o host mandar (welcome/view) */
-  waitForView(timeoutMs = 15e3) {
-    if (this.state.view && this.state.tabId) return Promise.resolve(this.state.view);
+  /**
+   * A view atual, ou a próxima que o host mandar (welcome/view). Com `accept`, espera uma
+   * view que passe no filtro (ex.: motor subindo depois de entregar a sessão). Rejeita com
+   * `EngineAccessError` se o host recusou esta aba (`rejected`).
+   */
+  waitForView(timeoutMs = 15e3, accept, options) {
+    const rejected = this.state.rejected;
+    if (rejected) return Promise.reject(new EngineAccessError(rejected.code, rejected.message));
+    if (!(options == null ? void 0 : options.fresh) && this.state.view && this.state.tabId && (!accept || accept(this.state.view))) return Promise.resolve(this.state.view);
     return new Promise((resolve, reject) => {
       const timer = setTimeout(() => {
         const index = this.viewWaiters.findIndex((w) => w.timer === timer);
         if (index >= 0) this.viewWaiters.splice(index, 1);
         reject(new Error("o motor não respondeu"));
       }, timeoutMs);
-      this.viewWaiters.push({ resolve, timer });
+      this.viewWaiters.push({ resolve, reject, accept, timer });
     });
   }
+  rejectWaiters(error2) {
+    for (const waiter of this.viewWaiters.splice(0)) {
+      clearTimeout(waiter.timer);
+      waiter.reject(error2);
+    }
+  }
   send(message) {
     if (this.ws && this.ws.readyState === WebSocket.OPEN) this.ws.send(JSON.stringify(message));
   }
@@ -43890,7 +43920,7 @@ class EngineClient {
     switch (message.type) {
       case "welcome": {
         if (Array.isArray(message.iceServers) && message.iceServers.length > 0) this.iceServers = message.iceServers;
-        this.setState({ tabId: message.tabId });
+        this.setState({ tabId: message.tabId, rejected: null });
         this.applyView(message.view);
         this.log(`sou a aba ${message.tabId}`);
         if (this.options.autoEngage !== false && message.view.engagedTabId !== message.tabId) this.engage();
@@ -43908,6 +43938,19 @@ class EngineClient {
         void this.onSignal(message.payload);
         break;
       case "error":
+        if (message.code === "unauthorized") {
+          this.setState({ lastError: message.message, rejected: { code: message.code, message: message.message } });
+          this.session = null;
+          this.reconnectDelay = RECONNECT_MAX_MS;
+          this.log(`acesso recusado pelo host: ${message.message}`);
+          this.rejectWaiters(new EngineAccessError(message.code, message.message));
+          break;
+        }
+        if (message.code === "session-changed") {
+          this.session = null;
+          this.log("a sessão deste agente foi trocada por um login novo; reconectando com a credencial atual");
+          break;
+        }
         this.setState({ lastError: message.message });
         this.log(`erro do host: ${message.message}`);
         break;
@@ -43945,6 +43988,10 @@ class EngineClient {
     if (call && typeof call.muted === "boolean" && call.muted !== this.state.inputMuted && call.state !== "ended") patch.inputMuted = call.muted;
     this.setState(patch);
     for (const waiter of this.viewWaiters.splice(0)) {
+      if (waiter.accept && !waiter.accept(view)) {
+        this.viewWaiters.push(waiter);
+        continue;
+      }
       clearTimeout(waiter.timer);
       waiter.resolve(view);
     }
@@ -43957,10 +44004,33 @@ class EngineClient {
     };
   }
   // ------------------------------------------------------------------ sessão e comandos
-  /** modo sdk: o widget fez login no back-end e entrega a sessão ao host */
+  /**
+   * Modo sdk: o widget fez login no back-end e entrega a sessão ao host. Com a conexão
+   * aberta manda `session`; recusada ou caída, reconecta agora apresentando a sessão no hello
+   * (é assim que um login novo substitui a sessão de outro navegador).
+   */
   setSession(session) {
     this.session = session;
-    this.send({ type: "session", session });
+    this.setState({ rejected: null, sessionLost: null });
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      if (this.state.tabId) {
+        this.send({ type: "session", session });
+        return;
+      }
+      const stale = this.ws;
+      this.ws = null;
+      stale.onopen = null;
+      stale.onmessage = null;
+      stale.onclose = null;
+      stale.close();
+      this.setState({ wsState: "closed" });
+    }
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    this.reconnectDelay = RECONNECT_MIN_MS;
+    this.connect();
   }
   engage() {
     this.send({ type: "engage" });
@@ -44159,6 +44229,18 @@ function useEngineState(client2) {
   return useSyncExternalStore(client2.subscribe.bind(client2), client2.getState.bind(client2), client2.getState.bind(client2));
 }
 const ENGINE_BREAKS = [{ id: 0, name: "Pausa" }];
+function breaksFromView(view) {
+  var _a2;
+  const breaks = (_a2 = view == null ? void 0 : view.snapshot) == null ? void 0 : _a2.leg.breaks;
+  return breaks && breaks.length > 0 ? breaks.map((b) => ({ id: b.id, name: b.name })) : ENGINE_BREAKS;
+}
+function currentBreakFromView(view) {
+  var _a2;
+  return ((_a2 = view.snapshot) == null ? void 0 : _a2.leg.break) ?? breaksFromView(view)[0];
+}
+function pauseCommand(breakId) {
+  return typeof breakId === "number" ? { name: "pause", breakId } : { name: "pause" };
+}
 function toCallQualification(q) {
   return { id: q.id, name: q.name, isSystemQualification: false, systemQualificationType: 0 };
 }
@@ -44291,7 +44373,7 @@ function operatorStateFromView(view, call) {
     case "afterCall":
       return { state: "afterCall" };
     case "onBreak":
-      return { state: "onBreak", break: ENGINE_BREAKS[0] };
+      return { state: "onBreak", break: currentBreakFromView(view) };
     case "offline":
       return { state: "offline" };
     case "error":
@@ -44374,7 +44456,7 @@ function useEngineControls(client2) {
         if (status === "onBreak") client2.command({ name: "resume" });
       },
       goOffline: () => void 0,
-      enterOnBreak: () => client2.command({ name: "pause" }),
+      enterOnBreak: (breakId) => client2.command(pauseCommand(breakId)),
       makeManualCall: (phoneNumber) => client2.command({ name: "dial", phone: phoneNumber }),
       finishAfterCall: (data) => {
         if (typeof data.qualificationId === "number") client2.command({ name: "qualify", qualificationId: data.qualificationId, result: data.result === "failure" ? "discard" : "success" });
@@ -44428,7 +44510,8 @@ const operators = /* @__PURE__ */ new WeakMap();
 function engineOperator(client2) {
   let operator = operators.get(client2);
   if (!operator) {
-    const breaks = new EngineSignal(ENGINE_BREAKS);
+    const breaks = new EngineSignal(breaksFromView(client2.getState().view));
+    client2.subscribe(() => breaks.set(breaksFromView(client2.getState().view)));
     operator = {
       breaks,
       user: client2.userSignal,
@@ -44443,7 +44526,7 @@ function engineOperator(client2) {
         var _a2, _b;
         if (((_b = (_a2 = client2.getState().view) == null ? void 0 : _a2.snapshot) == null ? void 0 : _b.leg.status) === "onBreak") client2.command({ name: "resume" });
       },
-      enterOnBreak: () => client2.command({ name: "pause" }),
+      enterOnBreak: (breakId) => client2.command(pauseCommand(breakId)),
       makeManualCall: (phoneNumber) => client2.command({ name: "dial", phone: phoneNumber }),
       finishAfterCall: (data) => {
         if (typeof data.qualificationId === "number") client2.command({ name: "qualify", qualificationId: data.qualificationId, result: data.result === "failure" ? "discard" : "success" });
@@ -58627,7 +58710,7 @@ function AuthenticatedMobileDialer({
   showClientInfoModal = false,
   density
 }) {
-  var _a2, _b, _c, _d;
+  var _a2, _b, _c, _d, _e;
   const { skipManualQualification } = useDialerConfig();
   const [dialValue, setDialValue] = useState("");
   const [activeScreen, setActiveScreen] = useState("dialer");
@@ -59340,11 +59423,12 @@ function AuthenticatedMobileDialer({
     if (isOnBreak) return "paused";
     return "available";
   }, [isError, isOnBreak]);
+  const activeBreakName = (operatorState == null ? void 0 : operatorState.state) === "onBreak" ? (_a2 = operatorState.break) == null ? void 0 : _a2.name : void 0;
   const statusBadgeText = useMemo(() => {
     if (isError) return (dialerNotice == null ? void 0 : dialerNotice.source) === "device" ? dialerNotice.title : "Erro";
-    if (isOnBreak) return currentBreakName || "Em pausa";
+    if (isOnBreak) return currentBreakName || activeBreakName || "Em pausa";
     return "Disponível";
-  }, [dialerNotice, isError, isOnBreak, currentBreakName]);
+  }, [dialerNotice, isError, isOnBreak, currentBreakName, activeBreakName]);
   const pauseDurationLabel = useMemo(() => {
     const hours = Math.floor(pauseDurationSeconds / 3600);
     const minutes = Math.floor(pauseDurationSeconds % 3600 / 60).toString().padStart(2, "0");
@@ -59482,15 +59566,15 @@ function AuthenticatedMobileDialer({
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "client-card-header", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-user-circle client-avatar" }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "client-main-info", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-name", id: "clientName", children: findValue(contactData.finalData, ["DECISOR", "NOME", "CLIENTE", "PROSPECT"]) ?? ((_a2 = callInfo.info.campaignContact) == null ? void 0 : _a2.label) ?? "--" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-company", id: "clientCompany", children: findValue(contactData.finalData, ["EMPRESA", "RAZAO SOCIAL", "RAZÃO SOCIAL", "RAZAO_SOCIAL"]) ?? ((_b = callInfo.info.campaign) == null ? void 0 : _b.name) ?? "--" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-name", id: "clientName", children: findValue(contactData.finalData, ["DECISOR", "NOME", "CLIENTE", "PROSPECT"]) ?? ((_b = callInfo.info.campaignContact) == null ? void 0 : _b.label) ?? "--" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-company", id: "clientCompany", children: findValue(contactData.finalData, ["EMPRESA", "RAZAO SOCIAL", "RAZÃO SOCIAL", "RAZAO_SOCIAL"]) ?? ((_c = callInfo.info.campaign) == null ? void 0 : _c.name) ?? "--" })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "client-card-divider" }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "client-info-list", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "client-info-row", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-info-label", children: "Socio" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-info-value", children: findValue(contactData.finalData, ["SOCIO", "PROSPECT", "DECISOR", "NOME", "CLIENTE"]) ?? ((_c = callInfo.info.campaignContact) == null ? void 0 : _c.label) ?? "--" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-info-value", children: findValue(contactData.finalData, ["SOCIO", "PROSPECT", "DECISOR", "NOME", "CLIENTE"]) ?? ((_d = callInfo.info.campaignContact) == null ? void 0 : _d.label) ?? "--" })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "client-info-row", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "client-info-label", children: "Empresa" }),
@@ -59687,7 +59771,7 @@ function AuthenticatedMobileDialer({
       {
         isOpen: isClientInfoModalOpen,
         campaignCallInfo,
-        campaignContactPhoneId: ((_d = currentCall == null ? void 0 : currentCall.data) == null ? void 0 : _d.campaignContactPhoneId) ?? null,
+        campaignContactPhoneId: ((_e = currentCall == null ? void 0 : currentCall.data) == null ? void 0 : _e.campaignContactPhoneId) ?? null,
         callDuration: callDurationSeconds,
         isCallActive: isInCall || isConnecting,
         onClose: () => setIsClientInfoModalOpen(false)
@@ -60671,7 +60755,7 @@ function ClickToCallAgent({ enabled = true, pollIntervalMs, sessionToken, onTask
   }, [enabled, pollIntervalMs, sessionToken]);
   return null;
 }
-const WIDGET_VERSION = "2.7.0";
+const WIDGET_VERSION = "2.8.1";
 let currentSipWebSocket = null;
 function sendSipUnregisterIfPossible(ws) {
   if (ws.readyState !== WebSocket.OPEN) return;
@@ -61070,7 +61154,11 @@ function DialerWrapper({ options, containerEl }) {
       current == null ? void 0 : current.close();
       const client2 = new EngineClient({
         url: options.engineUrl ?? "",
-        token: options.engineToken ?? "",
+        token: options.engineToken || void 0,
+        version: WIDGET_VERSION,
+        // credencial da aba: o token da sessão do Callix guardado neste navegador (lido a cada
+        // hello, para a reconexão depois de uma troca de sessão pegar o token novo)
+        sessionToken: () => readStoredToken(user),
         agentId: user,
         label: "Discador",
         log: (message) => console.log("[Callix Dialer/motor]", message)
@@ -61227,8 +61315,26 @@ function DialerWrapper({ options, containerEl }) {
     setEngineWaiting(!client2.getState().view);
     const fallback = setTimeout(() => setEngineWaiting(false), 15e3);
     let joining = false;
+    let rejectedNote = false;
     const sync = () => {
-      const { view, sessionLost } = client2.getState();
+      const { view, sessionLost, rejected } = client2.getState();
+      if (!rejected && rejectedNote) {
+        rejectedNote = false;
+        setTabNote(null);
+      }
+      if (rejected) {
+        rejectedNote = true;
+        setEngineWaiting(false);
+        if (isLoadingRef.current) return;
+        if (isAuthenticatedRef.current) {
+          console.log("[Callix Dialer] o motor recusou esta aba: a sessão do agente foi trocada por um login em outro lugar");
+          setIsAuthenticated(false);
+          setSessionToken(null);
+          setCallixDomain(null);
+        }
+        setTabNote(rejected.message);
+        return;
+      }
       if (!view) return;
       setEngineWaiting(false);
       if (view.engine === "stopped" || view.engine === "crashed") logoffPendingRef.current = false;
@@ -61412,9 +61518,15 @@ function DialerWrapper({ options, containerEl }) {
         setLoginStatus("Conectando ao motor...");
         logoffPendingRef.current = false;
         const client2 = ensureEngine(user);
-        const view = await client2.waitForView(15e3);
+        let view = null;
+        try {
+          view = await client2.waitForView(15e3);
+        } catch (err) {
+          if (!(err instanceof EngineAccessError)) throw err;
+          console.log("[Callix Dialer] o motor recusou a credencial desta aba; fazendo login novo que substitui a sessão de lá");
+        }
         const domain = engineDomain();
-        const engineHasSession = (view.engine === "running" || view.engine === "starting") && !view.sessionLost;
+        const engineHasSession = view !== null && (view.engine === "running" || view.engine === "starting") && !view.sessionLost;
         let token = null;
         if (engineHasSession) {
           token = readStoredToken(user);
@@ -61433,8 +61545,18 @@ function DialerWrapper({ options, containerEl }) {
           }
           const data = await response.json();
           token = data.userSessionToken;
+          try {
+            const STORAGE_KEYS = getStorageKeys(user);
+            localStorage.setItem(LAST_USERNAME_KEY, user);
+            localStorage.setItem(STORAGE_KEYS.SESSION_TOKEN, token);
+            localStorage.setItem(STORAGE_KEYS.DOMAIN, domain);
+            localStorage.setItem(STORAGE_KEYS.TIMESTAMP, Date.now().toString());
+          } catch {
+          }
           client2.setSession({ domain, userSessionToken: token });
           setLoginStatus("Subindo o motor...");
+          const up = await client2.waitForView(2e4, (v) => v.engine === "running" || v.engine === "starting" || Boolean(v.sessionLost), { fresh: true });
+          if (up.sessionLost) throw new Error(up.sessionLost.message);
         }
         await enterEngine(user, domain, token);
         console.log("[Callix Dialer] Conectado ao motor como", user);