callix-dialer-widget 1.1.5 → 1.1.7

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

@@ -53044,10 +53044,10 @@ const MAX_DIAL_LENGTH = 32;
 const DEFAULT_DIALER_DIMENSIONS = { width: 448, height: 640 };
 const MIN_DIALER_WIDTH = 280;
 const MIN_DIALER_HEIGHT = 420;
-const MAX_DIALER_WIDTH = 720;
-const MAX_DIALER_HEIGHT = 900;
-const MIN_DIALER_SCALE = 0.7;
-const MAX_DIALER_SCALE = 1.25;
+const MAX_DIALER_WIDTH = 1024;
+const MAX_DIALER_HEIGHT = 960;
+const MIN_DIALER_SCALE = 0.55;
+const MAX_DIALER_SCALE = 2.5;
 const VIEWPORT_MARGIN_SMALL = 12;
 const VIEWPORT_MARGIN_DEFAULT = 16;
 const keypadKeys = [
@@ -53413,6 +53413,8 @@ function FloatingDialer({
     }
   );
   const scale = Number.isFinite(contentScale) && contentScale > 0 ? contentScale : 1;
+  const scaledWidth = DEFAULT_DIALER_DIMENSIONS.width / scale;
+  const scaledHeight = DEFAULT_DIALER_DIMENSIONS.height / scale;
   const cardStyle = {
     width: manualSize ? `${manualSize.width}px` : void 0,
     height: manualSize ? `${manualSize.height}px` : void 0,
@@ -53427,15 +53429,15 @@ function FloatingDialer({
     flexDirection: "column",
     transform: `scale(${scale})`,
     transformOrigin: "top left",
-    width: `${DEFAULT_DIALER_DIMENSIONS.width}px`,
-    minHeight: `${DEFAULT_DIALER_DIMENSIONS.height}px`
+    width: `${scaledWidth}px`,
+    minHeight: `${scaledHeight}px`
   };
   const cardContentStyle = {
     flex: 1,
     display: "flex",
     flexDirection: "column",
-    minHeight: `${DEFAULT_DIALER_DIMENSIONS.height}px`,
-    width: `${DEFAULT_DIALER_DIMENSIONS.width}px`
+    width: `${DEFAULT_DIALER_DIMENSIONS.width}px`,
+    minHeight: `${DEFAULT_DIALER_DIMENSIONS.height}px`
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
@@ -53455,35 +53457,43 @@ function FloatingDialer({
           className: tw`relative flex flex-col items-start overflow-hidden rounded-3xl border border-slate-200/60 bg-gradient-to-br from-white/95 via-slate-50/95 to-white/90 shadow-2xl backdrop-blur-lg transition-all duration-300 w-[min(32rem,calc(100vw-1.5rem))] max-w-[calc(100vw-1.5rem)] sm:w-[28rem] md:w-[30rem] max-h-[calc(100vh-3rem)] sm:max-h-none`,
           style: cardStyle,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`flex flex-1 flex-col overflow-hidden`, style: scaledWrapperStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex flex-1 flex-col rounded-3xl overflow-hidden`, style: cardContentStyle, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "div",
-                {
-                  className: tw`cursor-grab touch-none active:cursor-grabbing flex items-center justify-between bg-gradient-to-r from-primary to-primaryDark px-4 py-3 sm:px-5 sm:py-4 text-white shadow-sm`,
-                  onPointerDown: beginDrag,
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-3`, children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white/15 shadow-inner sm:h-11 sm:w-11`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhoneCall, { className: tw`text-xl` }) }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-0.5`, children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[11px] uppercase tracking-[0.2em] text-white/70`, children: "Discadora" }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold sm:text-base`, children: username ?? "Visitante" })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        className: tw`rounded-full p-2 text-white/80 transition hover:bg-white/15 hover:text-white`,
-                        onClick: () => setIsOpen(false),
-                        "aria-label": "Fechar discadora",
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-lg` })
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`flex-1 overflow-y-auto p-3 sm:p-4`, children: dialerContent })
-            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`flex flex-1 flex-col overflow-hidden`, style: scaledWrapperStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                "data-floating-dialer-content": true,
+                className: tw`flex flex-1 flex-col rounded-3xl overflow-hidden`,
+                style: cardContentStyle,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "div",
+                    {
+                      className: tw`cursor-grab touch-none active:cursor-grabbing flex items-center justify-between bg-gradient-to-r from-primary to-primaryDark px-4 py-3 text-white shadow-sm`,
+                      onPointerDown: beginDrag,
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-3`, children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white/15 shadow-inner`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhoneCall, { className: tw`text-xl` }) }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-0.5`, children: [
+                            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[11px] uppercase tracking-[0.2em] text-white/70`, children: "Discadora" }),
+                            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-base font-semibold`, children: username ?? "Visitante" })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: tw`rounded-full p-2 text-white/80 transition hover:bg-white/15 hover:text-white`,
+                            onClick: () => setIsOpen(false),
+                            "aria-label": "Fechar discadora",
+                            children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-lg` })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`flex-1 overflow-y-auto p-3`, children: dialerContent })
+                ]
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
@@ -54297,7 +54307,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
       "aria-label": "Discador manual",
       onFocusCapture: handleFocusWithin,
       onBlurCapture: handleBlurWithin,
-      className: tw`space-y-3 sm:space-y-4 rounded-2xl outline-none`,
+      className: tw`space-y-3 rounded-2xl outline-none`,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between gap-2`, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2 min-w-0 flex-1`, children: [
@@ -54506,23 +54516,23 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-xl border border-slate-200 bg-white/80 p-2.5 shadow-sm sm:p-3`, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-xl border border-slate-200 bg-white/80 p-3 shadow-sm`, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex flex-wrap items-center justify-between gap-2`, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] uppercase tracking-wide text-slate-500`, children: "Volume" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: tw`text-xs font-semibold text-slate-800 sm:text-sm`, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: tw`text-sm font-semibold text-slate-800`, children: [
                   "Saída ",
                   volumePercent,
                   "%"
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-1.5 sm:gap-2`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "button",
                   {
                     type: "button",
                     onClick: () => setVolumeClamped((outputVolume ?? 0) - 0.05),
-                    className: tw`inline-flex h-7 w-7 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-600 transition hover:border-primary/60 hover:text-primary sm:h-8 sm:w-8`,
+                    className: tw`inline-flex h-8 w-8 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-600 transition hover:border-primary/60 hover:text-primary`,
                     "aria-label": "Diminuir volume",
                     children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiMinus, { className: tw`text-sm` })
                   }
@@ -54536,7 +54546,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
                     step: 0.01,
                     value: Number.isFinite(outputVolume) ? outputVolume : 0,
                     onChange: (event2) => setVolumeClamped(parseFloat(event2.target.value)),
-                    className: tw`h-1 w-full max-w-[9rem] cursor-pointer appearance-none rounded-full bg-slate-200 accent-primary sm:max-w-none sm:w-32`,
+                    className: tw`h-1 w-full max-w-full cursor-pointer appearance-none rounded-full bg-slate-200 accent-primary`,
                     "aria-label": "Volume de saida"
                   }
                 ),
@@ -54545,21 +54555,21 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
                   {
                     type: "button",
                     onClick: () => setVolumeClamped((outputVolume ?? 0) + 0.05),
-                    className: tw`inline-flex h-7 w-7 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-600 transition hover:border-primary/60 hover:text-primary sm:h-8 sm:w-8`,
+                    className: tw`inline-flex h-8 w-8 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-600 transition hover:border-primary/60 hover:text-primary`,
                     "aria-label": "Aumentar volume",
                     children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiPlus, { className: tw`text-sm` })
                   }
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-600 sm:text-xs`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`mt-2 flex flex-wrap items-center gap-2 text-xs text-slate-600`, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-1.5`, children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(FiMic, { className: tw`text-sm text-primary` }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`truncate max-w-[8rem] sm:max-w-none`, children: inputDeviceLabel })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`truncate max-w-full`, children: inputDeviceLabel })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-1.5`, children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(FiHeadphones, { className: tw`text-sm text-primary` }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`truncate max-w-[8rem] sm:max-w-none`, children: outputDeviceLabel })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`truncate max-w-full`, children: outputDeviceLabel })
               ] }),
               (audioDevices.inputs.length > 0 || audioDevices.outputs.length > 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
@@ -54574,7 +54584,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
                 }
               )
             ] }),
-            isDevicePanelOpen && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`mt-3 grid gap-2 sm:grid-cols-2`, children: [
+            isDevicePanelOpen && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`mt-3 grid gap-2`, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: tw`space-y-1 text-xs text-slate-700`, children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: tw`flex items-center gap-1.5 font-semibold`, children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(FiMic, { className: tw`text-sm text-primary` }),
@@ -54583,7 +54593,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
                 /* @__PURE__ */ jsxRuntimeExports.jsxs(
                   "select",
                   {
-                    className: tw`w-full rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-[11px] shadow-inner focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/40 sm:text-xs`,
+                    className: tw`w-full rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-xs shadow-inner focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/40`,
                     value: selectedInputId ?? "",
                     onChange: handleSelectInputDevice,
                     children: [
@@ -54601,7 +54611,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
                 /* @__PURE__ */ jsxRuntimeExports.jsxs(
                   "select",
                   {
-                    className: tw`w-full rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-[11px] shadow-inner focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/40 sm:text-xs`,
+                    className: tw`w-full rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-xs shadow-inner focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/40`,
                     value: selectedOutputId ?? "",
                     onChange: handleSelectOutputDevice,
                     children: [
@@ -55047,37 +55057,26 @@ function InlineDialer(props) {
               inset: auto !important;
               transform: none !important;
               width: 100% !important;
-              max-width: 100% !important;
-              min-width: 0 !important;
               height: 100% !important;
-              max-height: 100% !important;
-              min-height: 0 !important;
             }
             .callix-inline-wrapper [data-floating-dialer-card] {
+              position: relative !important;
+              inset: auto !important;
+              transform: none !important;
               width: 100% !important;
-              max-width: 100% !important;
-              min-width: 0 !important;
               height: 100% !important;
-              max-height: 100% !important;
-              min-height: 0 !important;
               box-shadow: none !important;
               backdrop-filter: none !important;
             }
-            .callix-inline-wrapper [data-floating-dialer-card] > * {
-              width: 100% !important;
-              height: 100% !important;
-            }
             .callix-inline-wrapper [data-floating-dialer-card] > div:first-child {
-              transform: none !important;
-              width: 100% !important;
-              min-height: 100% !important;
-            }
-            .callix-inline-wrapper [data-floating-dialer-card] > div:first-child > div:first-child {
               width: 100% !important;
-              min-height: 100% !important;
+              height: 100% !important;
+              transform-origin: top left !important;
             }
-            .callix-inline-wrapper [data-floating-dialer-card] .overflow-y-auto {
-              max-height: none !important;
+            .callix-inline-wrapper [data-floating-dialer-card] [data-floating-dialer-content] {
+              width: auto !important;
+              min-width: 448px !important;
+              min-height: 640px !important;
             }
             .callix-inline-wrapper [data-floating-dialer-resize] {
               display: none !important;
@@ -55134,6 +55133,12 @@ class CallixDialerWidget {
     }
   }
 }
+const getStorageKeys = (username) => ({
+  SESSION_TOKEN: `callix_dialer_${username}_session_token`,
+  DOMAIN: `callix_dialer_${username}_domain`,
+  TIMESTAMP: `callix_dialer_${username}_timestamp`
+});
+const LAST_USERNAME_KEY = "callix_dialer_last_username";
 const SESSION_EXPIRATION_MS = 8 * 60 * 60 * 1e3;
 function DialerWrapper({ options }) {
   const [username, setUsername] = useState(null);
@@ -55149,22 +55154,27 @@ function DialerWrapper({ options }) {
       return;
     }
     try {
-      const storedUsername = localStorage.getItem(STORAGE_KEYS.USERNAME);
+      const storedLastUsername = localStorage.getItem(LAST_USERNAME_KEY);
+      if (!storedLastUsername) {
+        setIsRestoringSession(false);
+        return;
+      }
+      const STORAGE_KEYS = getStorageKeys(storedLastUsername);
       const storedToken = localStorage.getItem(STORAGE_KEYS.SESSION_TOKEN);
       const storedDomain = localStorage.getItem(STORAGE_KEYS.DOMAIN);
       const storedTimestamp = localStorage.getItem(STORAGE_KEYS.TIMESTAMP);
-      if (storedUsername && storedToken && storedDomain && storedTimestamp) {
+      if (storedLastUsername && storedToken && storedDomain && storedTimestamp) {
         const timestamp = parseInt(storedTimestamp, 10);
         const now = Date.now();
         if (now - timestamp < SESSION_EXPIRATION_MS) {
-          console.log("[Callix Dialer] Restaurando sessão salva:", storedUsername);
-          setUsername(storedUsername);
+          console.log("[Callix Dialer] Restaurando sessão salva:", storedLastUsername);
+          setUsername(storedLastUsername);
           setSessionToken(storedToken);
           setCallixDomain(storedDomain);
           setIsAuthenticated(true);
         } else {
           console.log("[Callix Dialer] Sessão expirada, limpando...");
-          localStorage.removeItem(STORAGE_KEYS.USERNAME);
+          localStorage.removeItem(LAST_USERNAME_KEY);
           localStorage.removeItem(STORAGE_KEYS.SESSION_TOKEN);
           localStorage.removeItem(STORAGE_KEYS.DOMAIN);
           localStorage.removeItem(STORAGE_KEYS.TIMESTAMP);
@@ -55202,7 +55212,8 @@ function DialerWrapper({ options }) {
       setError(null);
       if (typeof window !== "undefined") {
         try {
-          localStorage.setItem(STORAGE_KEYS.USERNAME, user);
+          const STORAGE_KEYS = getStorageKeys(user);
+          localStorage.setItem(LAST_USERNAME_KEY, user);
           localStorage.setItem(STORAGE_KEYS.SESSION_TOKEN, data.userSessionToken);
           localStorage.setItem(STORAGE_KEYS.DOMAIN, data.domain || "villelabrasil.callix.com.br");
           localStorage.setItem(STORAGE_KEYS.TIMESTAMP, Date.now().toString());
@@ -55222,14 +55233,16 @@ function DialerWrapper({ options }) {
     }
   };
   const handleLogout = () => {
+    const currentUsername = username;
     setUsername(null);
     setIsAuthenticated(false);
     setSessionToken(null);
     setCallixDomain(null);
     setError(null);
-    if (typeof window !== "undefined") {
+    if (typeof window !== "undefined" && currentUsername) {
       try {
-        localStorage.removeItem(STORAGE_KEYS.USERNAME);
+        const STORAGE_KEYS = getStorageKeys(currentUsername);
+        localStorage.removeItem(LAST_USERNAME_KEY);
         localStorage.removeItem(STORAGE_KEYS.SESSION_TOKEN);
         localStorage.removeItem(STORAGE_KEYS.DOMAIN);
         localStorage.removeItem(STORAGE_KEYS.TIMESTAMP);