callix-dialer-widget 2.8.0 → 2.8.2

package/WIDGET-README.md

@@ -141,6 +141,19 @@ Entrar, avisado de que encerra a sessão de lá. Se o Callix derrubar a sessão
 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. No console da página, `CallixDialer.version`
+diz qual build está carregado.
+
+Comandos durante uma queda da conexão (2.8.2): um clique dado enquanto a conexão com o host
+está caída ou reconectando (rede instável) não se perde mais em silêncio. O comando fica
+guardado, a tela avisa que a conexão está voltando, e ele é enviado no reconectar, se ainda
+tiver menos de 15 s; mais velho que isso é descartado, para não atingir outra chamada. Antes,
+um "encerrar" dado nesse momento deixava a chamada ativa no motor.
+
 Sem `engineUrl` nada muda: o SDK continua rodando no navegador como sempre.
 
 ## 🔐 Login e usuário conhecido

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

@@ -43754,6 +43754,8 @@ const INITIAL_TRANSCRIPT = { segments: [], status: null, insight: null, interims
 const MAX_SEGMENTS = 300;
 const RECONNECT_MIN_MS = 500;
 const RECONNECT_MAX_MS = 5e3;
+const PENDING_COMMANDS_MAX = 10;
+const PENDING_COMMANDS_TTL_MS = 15e3;
 function engineWsUrl(baseUrl) {
   const url = new URL(baseUrl, typeof window !== "undefined" ? window.location.href : "http://localhost");
   url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
@@ -43771,6 +43773,7 @@ class EngineClient {
     this.viewWaiters = [];
     this.ws = null;
     this.reconnectDelay = RECONNECT_MIN_MS;
+    this.pendingCommands = [];
     this.reconnectTimer = null;
     this.closed = false;
     this.iceServers = [{ urls: "stun:stun.l.google.com:19302" }];
@@ -43838,6 +43841,7 @@ class EngineClient {
         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 } : {}
@@ -43920,6 +43924,7 @@ class EngineClient {
       case "welcome": {
         if (Array.isArray(message.iceServers) && message.iceServers.length > 0) this.iceServers = message.iceServers;
         this.setState({ tabId: message.tabId, rejected: null });
+        this.flushPendingCommands();
         this.applyView(message.view);
         this.log(`sou a aba ${message.tabId}`);
         if (this.options.autoEngage !== false && message.view.engagedTabId !== message.tabId) this.engage();
@@ -44012,8 +44017,17 @@ class EngineClient {
     this.session = session;
     this.setState({ rejected: null, sessionLost: null });
     if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-      this.send({ type: "session", session });
-      return;
+      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);
@@ -44029,8 +44043,29 @@ class EngineClient {
     this.send({ type: "release" });
   }
   command(command) {
-    this.send({ type: "command", command });
-    this.log(`comando: ${command.name}${command.phone ? ` ${command.phone}` : ""}`);
+    if (this.ws && this.ws.readyState === WebSocket.OPEN && this.state.tabId) {
+      this.send({ type: "command", command });
+      this.log(`comando: ${command.name}${command.phone ? ` ${command.phone}` : ""}`);
+      return;
+    }
+    this.pendingCommands.push({ command, at: Date.now() });
+    if (this.pendingCommands.length > PENDING_COMMANDS_MAX) this.pendingCommands.shift();
+    this.log(`comando: ${command.name} guardado até a conexão com o motor voltar`);
+    this.setState({ lastError: "Sem conexão com o motor neste momento; o comando será enviado assim que ela voltar." });
+    this.connect();
+  }
+  /** manda os comandos guardados que ainda fazem sentido (os velhos poderiam atingir outra chamada) */
+  flushPendingCommands() {
+    const now = Date.now();
+    const pending = this.pendingCommands.splice(0);
+    for (const entry of pending) {
+      if (now - entry.at > PENDING_COMMANDS_TTL_MS) {
+        this.log(`comando ${entry.command.name} descartado: a conexão demorou demais para voltar`);
+        continue;
+      }
+      this.send({ type: "command", command: entry.command });
+      this.log(`comando: ${entry.command.name} (enviado depois da reconexão)`);
+    }
   }
   // ------------------------------------------------------------------ áudio
   setInputMuted(muted) {
@@ -44219,6 +44254,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 };
 }
@@ -44351,7 +44398,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":
@@ -44434,7 +44481,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" });
@@ -44488,7 +44535,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,
@@ -44503,7 +44551,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" });
@@ -58687,7 +58735,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");
@@ -59400,11 +59448,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");
@@ -59542,15 +59591,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" }),
@@ -59747,7 +59796,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)
@@ -60731,7 +60780,7 @@ function ClickToCallAgent({ enabled = true, pollIntervalMs, sessionToken, onTask
   }, [enabled, pollIntervalMs, sessionToken]);
   return null;
 }
-const WIDGET_VERSION = "2.8.0";
+const WIDGET_VERSION = "2.8.2";
 let currentSipWebSocket = null;
 function sendSipUnregisterIfPossible(ws) {
   if (ws.readyState !== WebSocket.OPEN) return;
@@ -61131,6 +61180,7 @@ function DialerWrapper({ options, containerEl }) {
       const client2 = new EngineClient({
         url: options.engineUrl ?? "",
         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),