callix-dialer-widget 1.1.5 → 1.1.6

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.65;
+const MAX_DIALER_SCALE = 2.5;
 const VIEWPORT_MARGIN_SMALL = 12;
 const VIEWPORT_MARGIN_DEFAULT = 16;
 const keypadKeys = [
@@ -53421,21 +53421,10 @@ function FloatingDialer({
     maxWidth: `min(${MAX_DIALER_WIDTH}px, calc(100vw - 1.5rem))`,
     maxHeight: `calc(100vh - 3rem)`
   };
-  const scaledWrapperStyle = {
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    transform: `scale(${scale})`,
-    transformOrigin: "top left",
-    width: `${DEFAULT_DIALER_DIMENSIONS.width}px`,
-    minHeight: `${DEFAULT_DIALER_DIMENSIONS.height}px`
-  };
+  const scalePercent = Math.round(scale * 1e4) / 100;
   const cardContentStyle = {
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    minHeight: `${DEFAULT_DIALER_DIMENSIONS.height}px`,
-    width: `${DEFAULT_DIALER_DIMENSIONS.width}px`
+    fontSize: `${scalePercent}%`,
+    lineHeight: 1.25
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
@@ -53455,18 +53444,18 @@ 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`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`,
+                  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 sm:h-11 sm:w-11`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhoneCall, { className: tw`text-xl` }) }),
+                      /* @__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-sm font-semibold sm:text-base`, children: username ?? "Visitante" })
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-base font-semibold`, children: username ?? "Visitante" })
                       ] })
                     ] }),
                     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -53482,8 +53471,8 @@ function FloatingDialer({
                   ]
                 }
               ),
-              /* @__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-1 overflow-y-auto p-3`, children: dialerContent })
+            ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
@@ -54297,7 +54286,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 +54495,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 +54525,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 +54534,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 +54563,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 +54572,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 +54590,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: [
@@ -55054,6 +55043,9 @@ function InlineDialer(props) {
               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;
@@ -55063,19 +55055,10 @@ function InlineDialer(props) {
               box-shadow: none !important;
               backdrop-filter: none !important;
             }
-            .callix-inline-wrapper [data-floating-dialer-card] > * {
+            .callix-inline-wrapper [data-floating-dialer-card] > div {
               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;
-            }
             .callix-inline-wrapper [data-floating-dialer-card] .overflow-y-auto {
               max-height: none !important;
             }
@@ -55134,6 +55117,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 +55138,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 +55196,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 +55217,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);