callix-dialer-widget 2.3.0 → 2.4.0

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

@@ -6,7 +6,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-import React, { useState, useMemo, useRef, useEffect, useCallback, forwardRef, useLayoutEffect, createContext, useImperativeHandle, StrictMode, useContext } from "react";
+import React, { useState, useMemo, useRef, useEffect, useCallback, forwardRef, useLayoutEffect, useId, createContext, useImperativeHandle, StrictMode, useContext } from "react";
 import require$$0$2, { createPortal } from "react-dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getAugmentedNamespace(n) {
@@ -48510,6 +48510,15 @@ function isFormResponse(value) {
   const form = value;
   return typeof form.id === "number" && !!form.values && typeof form.values === "object" && Array.isArray(form.fields);
 }
+const NETWORK_ERROR_MESSAGE = "Não foi possível conectar ao servidor do discador. Verifique a conexão ou se o back-end está atualizado.";
+const ROUTE_MISSING_MESSAGE = "Rota do formulário não encontrada no servidor do discador. Atualize o back-end (deploy) para esta versão do widget.";
+function describeHttpError(status, body) {
+  if (status === 401) return "Sessão expirada. Entre novamente no discador.";
+  const fromBody = body.message || body.error;
+  if (fromBody) return fromBody;
+  if (status === 404) return ROUTE_MISSING_MESSAGE;
+  return `Erro ${status}`;
+}
 async function requestOnce(url, headers) {
   const controller = new AbortController();
   const timer = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS$1);
@@ -48517,8 +48526,7 @@ async function requestOnce(url, headers) {
     const response = await fetch(url, { method: "GET", headers, credentials: "omit", signal: controller.signal });
     if (!response.ok) {
       const body = await response.json().catch(() => ({}));
-      const message = body.message || body.error || `Erro ${response.status}`;
-      const error2 = new Error(response.status === 401 ? "Sessão expirada. Entre novamente no discador." : message);
+      const error2 = new Error(describeHttpError(response.status, body));
       error2.status = response.status;
       throw error2;
     }
@@ -48531,6 +48539,11 @@ async function requestOnce(url, headers) {
     if (error2 instanceof Error && error2.name === "AbortError") {
       throw new Error("Tempo esgotado ao buscar o formulário");
     }
+    if (error2 instanceof TypeError) {
+      const wrapped = new Error(NETWORK_ERROR_MESSAGE);
+      wrapped.cause = error2;
+      throw wrapped;
+    }
     throw error2;
   } finally {
     clearTimeout(timer);
@@ -56488,9 +56501,55 @@ function DebugPanel({ onClose }) {
   ] });
 }
 const VIEWPORT_MARGIN$1 = 16;
+const BASE_WIDTH = 520;
+const FALLBACK_HEIGHT = 600;
+const FORM_SCALE_STORAGE_KEY = "callix_dialer_form_scale";
+const FORM_SCALE_MIN = 70;
+const FORM_SCALE_MAX = 180;
+const FORM_SCALE_STEP = 10;
+const FORM_SCALE_DEFAULT = 100;
+const CONTROL_MIN_PX = 28;
+const CONTROL_BUTTON_CLASS = "flex flex-shrink-0 items-center justify-center rounded-md transition hover:bg-black hover:bg-opacity-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white";
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function clamp$1(value, min2, max2) {
   return Math.min(Math.max(value, min2), max2);
 }
+function clampFormScale(percent) {
+  if (!Number.isFinite(percent)) return FORM_SCALE_DEFAULT;
+  const rounded = Math.round(percent / FORM_SCALE_STEP) * FORM_SCALE_STEP;
+  return clamp$1(rounded, FORM_SCALE_MIN, FORM_SCALE_MAX);
+}
+function readStoredFormScale() {
+  if (typeof window === "undefined") return FORM_SCALE_DEFAULT;
+  try {
+    const raw = window.localStorage.getItem(FORM_SCALE_STORAGE_KEY);
+    if (raw === null || raw.trim() === "") return FORM_SCALE_DEFAULT;
+    return clampFormScale(Number(raw));
+  } catch {
+    return FORM_SCALE_DEFAULT;
+  }
+}
+function storeFormScale(percent) {
+  try {
+    window.localStorage.setItem(FORM_SCALE_STORAGE_KEY, String(percent));
+  } catch {
+  }
+}
+function detectZoomSupport() {
+  if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return true;
+  try {
+    if (!CSS.supports("zoom", "1.5")) return false;
+  } catch {
+    return true;
+  }
+  const firefox = typeof navigator !== "undefined" ? /\bFirefox\/(\d+)/.exec(navigator.userAgent) : null;
+  if (firefox && Number(firefox[1]) < 131) return false;
+  return true;
+}
+function readViewport() {
+  if (typeof window === "undefined") return { width: 1024, height: 768 };
+  return { width: window.innerWidth, height: window.innerHeight };
+}
 function formatDuration(seconds) {
   const hrs = Math.floor(seconds / 3600);
   const mins = Math.floor(seconds % 3600 / 60);
@@ -56513,13 +56572,24 @@ function DraggableClientInfoModal({
   campaignContactPhoneId,
   callDuration,
   isCallActive,
-  onClose
+  onClose,
+  portalTarget
 }) {
   const containerRef = useRef(null);
   const pointerRef = useRef({ pointerId: null, offsetX: 0, offsetY: 0 });
   const dragMovedRef = useRef(false);
+  const focusWithinRef = useRef(false);
+  const previouslyFocusedRef = useRef(null);
+  const titleId = useId();
   const [position2, setPosition] = useState({ x: 100, y: 100 });
   const [isDragging, setIsDragging] = useState(false);
+  const [viewport, setViewport] = useState(readViewport);
+  const zoomSupported = useMemo(detectZoomSupport, []);
+  const [scalePercent, setScalePercent] = useState(readStoredFormScale);
+  const [announcement, setAnnouncement] = useState("");
+  const scale = zoomSupported ? scalePercent / 100 : 1;
+  const scaleRef = useRef(scale);
+  scaleRef.current = scale;
   const [form, setForm] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error2, setError] = useState(null);
@@ -56533,39 +56603,47 @@ function DraggableClientInfoModal({
   const requestRef = useRef(request);
   requestRef.current = request;
   const partialRefreshKeyRef = useRef(null);
-  const clampPositionToViewport = useCallback((proposed) => {
-    if (typeof window === "undefined") {
-      return proposed;
-    }
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    const element = containerRef.current;
-    const width = (element == null ? void 0 : element.offsetWidth) ?? 500;
-    const height = (element == null ? void 0 : element.offsetHeight) ?? 600;
-    const minX = VIEWPORT_MARGIN$1;
-    const minY = VIEWPORT_MARGIN$1;
-    const maxX = Math.max(minX, viewportWidth - width - VIEWPORT_MARGIN$1);
-    const maxY = Math.max(minY, viewportHeight - height - VIEWPORT_MARGIN$1);
+  const measure = useCallback(() => {
+    var _a2;
+    const rect = (_a2 = containerRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+    const currentScale = scaleRef.current;
     return {
-      x: clamp$1(proposed.x, minX, maxX),
-      y: clamp$1(proposed.y, minY, maxY)
+      width: rect && rect.width > 0 ? rect.width : BASE_WIDTH * currentScale,
+      height: rect && rect.height > 0 ? rect.height : FALLBACK_HEIGHT * currentScale
     };
   }, []);
-  useEffect(() => {
+  const clampPositionToViewport = useCallback(
+    (proposed) => {
+      if (typeof window === "undefined") {
+        return proposed;
+      }
+      const { width, height } = measure();
+      const minX = VIEWPORT_MARGIN$1;
+      const minY = VIEWPORT_MARGIN$1;
+      const maxX = Math.max(minX, window.innerWidth - width - VIEWPORT_MARGIN$1);
+      const maxY = Math.max(minY, window.innerHeight - height - VIEWPORT_MARGIN$1);
+      return {
+        x: clamp$1(proposed.x, minX, maxX),
+        y: clamp$1(proposed.y, minY, maxY)
+      };
+    },
+    [measure]
+  );
+  useIsomorphicLayoutEffect(() => {
     if (isOpen && typeof window !== "undefined") {
-      const element = containerRef.current;
-      const width = (element == null ? void 0 : element.offsetWidth) ?? 500;
-      const height = (element == null ? void 0 : element.offsetHeight) ?? 600;
+      setViewport(readViewport());
+      const { width, height } = measure();
       const centerX = (window.innerWidth - width) / 2;
       const centerY = (window.innerHeight - height) / 2;
       setPosition(clampPositionToViewport({ x: centerX, y: centerY }));
     }
-  }, [isOpen, clampPositionToViewport]);
+  }, [isOpen, measure, clampPositionToViewport]);
   useEffect(() => {
     if (!isOpen || typeof window === "undefined") {
       return;
     }
     const handleViewportChange = () => {
+      setViewport(readViewport());
       setPosition((prev) => clampPositionToViewport(prev));
     };
     window.addEventListener("resize", handleViewportChange);
@@ -56575,6 +56653,27 @@ function DraggableClientInfoModal({
       window.removeEventListener("orientationchange", handleViewportChange);
     };
   }, [isOpen, clampPositionToViewport]);
+  const keepInsideViewport = useCallback(() => {
+    setPosition((prev) => {
+      const next = clampPositionToViewport(prev);
+      return next.x === prev.x && next.y === prev.y ? prev : next;
+    });
+  }, [clampPositionToViewport]);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    keepInsideViewport();
+  }, [isOpen, scalePercent, keepInsideViewport]);
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!isOpen || !element || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(() => keepInsideViewport());
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [isOpen, keepInsideViewport]);
   useEffect(() => {
     const current = requestRef.current;
     if (!current || !requestKey) {
@@ -56615,13 +56714,11 @@ function DraggableClientInfoModal({
       return;
     }
     const handlePointerMove = (event) => {
-      var _a2, _b;
       if (pointerRef.current.pointerId !== event.pointerId) {
         return;
       }
       dragMovedRef.current = true;
-      const modalWidth = ((_a2 = containerRef.current) == null ? void 0 : _a2.offsetWidth) ?? 0;
-      const modalHeight = ((_b = containerRef.current) == null ? void 0 : _b.offsetHeight) ?? 0;
+      const { width: modalWidth, height: modalHeight } = measure();
       const nextX = event.clientX - pointerRef.current.offsetX;
       const nextY = event.clientY - pointerRef.current.offsetY;
       const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 0;
@@ -56644,19 +56741,32 @@ function DraggableClientInfoModal({
     };
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerUp);
     return () => {
       window.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerUp);
     };
-  }, [isDragging]);
+  }, [isDragging, measure]);
   const beginDrag = useCallback((event) => {
     if (event.button !== 0 && event.pointerType !== "touch") {
       return;
     }
+    if (event.target instanceof Element && event.target.closest("button")) {
+      return;
+    }
     const element = containerRef.current;
     if (!element) {
       return;
     }
+    event.preventDefault();
+    const handle = event.currentTarget;
+    if (typeof handle.setPointerCapture === "function") {
+      try {
+        handle.setPointerCapture(event.pointerId);
+      } catch {
+      }
+    }
     const rect = element.getBoundingClientRect();
     pointerRef.current = {
       pointerId: event.pointerId,
@@ -56674,6 +56784,59 @@ function DraggableClientInfoModal({
   const handleRetry = useCallback(() => {
     setRetry((prev) => ({ key: requestKey, n: prev.n + 1 }));
   }, [requestKey]);
+  const applyScale = useCallback((next) => {
+    const value = clampFormScale(next);
+    setScalePercent(value);
+    storeFormScale(value);
+    return value;
+  }, []);
+  const canDecrease = scalePercent > FORM_SCALE_MIN;
+  const canIncrease = scalePercent < FORM_SCALE_MAX;
+  const handleDecrease = useCallback(() => {
+    if (canDecrease) setAnnouncement(`Tamanho do formulário: ${applyScale(scalePercent - FORM_SCALE_STEP)}%`);
+  }, [applyScale, canDecrease, scalePercent]);
+  const handleIncrease = useCallback(() => {
+    if (canIncrease) setAnnouncement(`Tamanho do formulário: ${applyScale(scalePercent + FORM_SCALE_STEP)}%`);
+  }, [applyScale, canIncrease, scalePercent]);
+  const handleResetScale = useCallback(() => {
+    applyScale(FORM_SCALE_DEFAULT);
+    setAnnouncement("");
+  }, [applyScale]);
+  useEffect(() => {
+    if (!isOpen || typeof document === "undefined") {
+      return;
+    }
+    const container = containerRef.current;
+    const active = document.activeElement;
+    previouslyFocusedRef.current = active && active !== document.body ? active : null;
+    if (container && (!active || active === document.body)) {
+      container.focus({ preventScroll: true });
+    }
+    return () => {
+      const previous = previouslyFocusedRef.current;
+      if (focusWithinRef.current && previous && previous.isConnected) {
+        previous.focus({ preventScroll: true });
+      }
+      focusWithinRef.current = false;
+    };
+  }, [isOpen]);
+  const handleFocusWithin = useCallback(() => {
+    focusWithinRef.current = true;
+  }, []);
+  const handleBlurWithin = useCallback((event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      focusWithinRef.current = false;
+    }
+  }, []);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape" && !isCallActive) {
+        event.stopPropagation();
+        handleCloseClick();
+      }
+    },
+    [handleCloseClick, isCallActive]
+  );
   if (!isOpen) {
     return null;
   }
@@ -56681,101 +56844,180 @@ function DraggableClientInfoModal({
   const hasRows = rows.length > 0;
   const hasFields = Boolean(form && form.fields.length > 0);
   const hasData = hasRows || hasFields;
-  const modalContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  const scaledStyle = {
+    zoom: scale,
+    width: `${BASE_WIDTH}px`,
+    maxWidth: `${Math.max(160, Math.floor((viewport.width - 2 * VIEWPORT_MARGIN$1) / scale))}px`,
+    maxHeight: `${Math.max(120, Math.floor((viewport.height - 2 * VIEWPORT_MARGIN$1) / scale))}px`
+  };
+  const controlPx = scale < 1 ? Math.ceil(CONTROL_MIN_PX / scale) : CONTROL_MIN_PX;
+  const controlStyle = { width: `${controlPx}px`, height: `${controlPx}px` };
+  const percentStyle = { height: `${controlPx}px`, minWidth: `${Math.ceil(48 / Math.min(scale, 1))}px` };
+  const modalContent = /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref: containerRef,
-      className: tw`fixed z-[9999] flex flex-col overflow-hidden rounded-xl border border-slate-300 bg-white shadow-2xl`,
+      role: "dialog",
+      "aria-labelledby": titleId,
+      tabIndex: -1,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocusWithin,
+      onBlur: handleBlurWithin,
+      className: tw`fixed z-[9999] overflow-hidden rounded-xl border border-gray-300 bg-white text-gray-900 shadow-2xl focus:outline-none`,
       style: {
         left: `${position2.x}px`,
         top: `${position2.y}px`,
-        width: "520px",
-        maxWidth: "calc(100vw - 32px)",
-        maxHeight: "calc(100vh - 32px)"
+        maxWidth: `calc(100vw - ${2 * VIEWPORT_MARGIN$1}px)`,
+        maxHeight: `calc(100vh - ${2 * VIEWPORT_MARGIN$1}px)`
       },
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            onPointerDown: beginDrag,
-            className: tw`flex cursor-move items-center justify-between border-b border-slate-200 bg-gradient-to-r from-blue-500 to-blue-600 px-4 py-3 text-white`,
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { className: tw`h-5 w-5` }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: tw`text-sm font-bold`, children: "Informações da Campanha" })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: handleCloseClick,
-                  disabled: isCallActive,
-                  className: tw`rounded-full p-1 transition hover:bg-white/20 disabled:cursor-not-allowed disabled:opacity-40`,
-                  title: isCallActive ? "Aguarde o fim da chamada para fechar" : "Fechar",
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`h-5 w-5` })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex-1 space-y-3 overflow-y-auto p-4`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`grid grid-cols-2 gap-3`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(FiClock, { className: tw`h-4 w-4 text-slate-500` }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-slate-500 uppercase tracking-wide font-medium`, children: "Duração" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-bold text-slate-800`, children: formatDuration(callDuration) })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { className: tw`h-4 w-4 text-slate-500` }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`min-w-0 flex-1`, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-slate-500 uppercase tracking-wide font-medium`, children: "Cliente" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`truncate text-sm font-bold text-slate-800`, children: (campaignContact == null ? void 0 : campaignContact.label) || "N/A" })
-              ] })
-            ] })
-          ] }),
-          isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg border border-blue-200 bg-blue-50 p-6 text-center`, role: "status", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`mx-auto mb-2 inline-block h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent` }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs font-medium text-blue-700`, children: "Carregando dados do contato..." })
-          ] }),
-          error2 && !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`rounded-lg border border-red-200 bg-red-50 p-3`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertCircle, { className: tw`h-4 w-4 flex-shrink-0 text-red-600` }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`min-w-0 flex-1`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs font-semibold text-red-700`, children: "Erro ao carregar dados" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-red-600`, children: error2 })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "button",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          "data-testid": "campaign-form-scaled",
+          "data-scale": zoomSupported ? scalePercent : FORM_SCALE_DEFAULT,
+          className: tw`flex flex-col`,
+          style: scaledStyle,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
               {
-                type: "button",
-                onClick: handleRetry,
-                className: tw`rounded-md border border-red-300 bg-white px-2 py-1 text-[11px] font-semibold text-red-700 transition hover:bg-red-100`,
-                children: "Tentar novamente"
+                onPointerDown: beginDrag,
+                className: tw`flex flex-wrap cursor-move select-none items-center gap-2 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700 px-3 py-2.5 text-white`,
+                style: { touchAction: "none" },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex min-w-[7rem] flex-1 items-center gap-2`, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { "aria-hidden": true, className: tw`h-5 w-5 flex-shrink-0` }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { id: titleId, className: tw`truncate text-sm font-bold`, children: "Informações da Campanha" })
+                  ] }),
+                  zoomSupported && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { role: "group", "aria-label": "Tamanho do formulário", className: tw`ml-auto flex flex-shrink-0 items-center gap-0.5`, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleDecrease,
+                        "aria-disabled": !canDecrease,
+                        "aria-label": "Diminuir o tamanho do formulário",
+                        title: "Diminuir o formulário e o texto",
+                        className: tw`${CONTROL_BUTTON_CLASS} ${canDecrease ? "" : "cursor-not-allowed"}`,
+                        style: controlStyle,
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiMinus, { "aria-hidden": true, className: tw`h-4 w-4 ${canDecrease ? "" : "opacity-40"}` })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleResetScale,
+                        "aria-label": `Tamanho atual ${scalePercent}%. Restaurar o tamanho padrão`,
+                        title: "Restaurar o tamanho padrão (100%)",
+                        className: tw`flex-shrink-0 rounded-md px-1 text-center text-xs font-semibold tabular-nums transition hover:bg-black hover:bg-opacity-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white`,
+                        style: percentStyle,
+                        children: [
+                          scalePercent,
+                          "%"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleIncrease,
+                        "aria-disabled": !canIncrease,
+                        "aria-label": "Aumentar o tamanho do formulário",
+                        title: "Aumentar o formulário e o texto",
+                        className: tw`${CONTROL_BUTTON_CLASS} ${canIncrease ? "" : "cursor-not-allowed"}`,
+                        style: controlStyle,
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiPlus, { "aria-hidden": true, className: tw`h-4 w-4 ${canIncrease ? "" : "opacity-40"}` })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { role: "status", className: tw`sr-only`, children: announcement })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCloseClick,
+                      disabled: isCallActive,
+                      "aria-label": isCallActive ? "Aguarde o fim da chamada para fechar" : "Fechar",
+                      className: tw`${CONTROL_BUTTON_CLASS} rounded-full disabled:cursor-not-allowed disabled:opacity-40`,
+                      style: controlStyle,
+                      title: isCallActive ? "Aguarde o fim da chamada para fechar" : "Fechar",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { "aria-hidden": true, className: tw`h-5 w-5` })
+                    }
+                  )
+                ]
               }
-            )
-          ] }) }),
-          !isLoading && !error2 && hasRows && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`space-y-2`, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`grid gap-2 ${gridColsFor(row.length)}`, children: row.map((field, fieldIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Field,
-            {
-              label: field.label,
-              value: field.value || "-",
-              fullWidth: field.width === "100%"
-            },
-            `${rowIndex}-${fieldIndex}-${field.key}`
-          )) }, rowIndex)) }),
-          !isLoading && !error2 && !hasRows && hasFields && form && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`grid grid-cols-2 gap-2`, children: form.fields.map((field) => /* @__PURE__ */ jsxRuntimeExports.jsx(Field, { label: field.label, value: field.value || "-" }, field.key)) }),
-          !isLoading && !error2 && !hasData && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex flex-col items-center justify-center rounded-lg border border-slate-200 bg-slate-50 px-4 py-8 text-center`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { className: tw`mb-2 h-8 w-8 text-slate-400` }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm text-slate-500`, children: "Nenhum dado disponível" })
-          ] })
-        ] }),
-        isCallActive && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`border-t border-slate-200 bg-slate-50 px-4 py-2`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-center text-xs text-slate-500`, children: "Aguarde o fim da chamada para fechar" }) })
-      ]
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                tabIndex: 0,
+                role: "region",
+                "aria-label": "Dados do contato",
+                className: tw`min-h-0 flex-1 space-y-3 overflow-y-auto p-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`grid grid-cols-2 gap-3`, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2`, children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(FiClock, { "aria-hidden": true, className: tw`h-4 w-4 text-gray-500` }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-gray-500 uppercase tracking-wide font-medium`, children: "Duração" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-bold text-gray-800`, children: formatDuration(callDuration) })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2`, children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { "aria-hidden": true, className: tw`h-4 w-4 text-gray-500` }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`min-w-0 flex-1`, children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-gray-500 uppercase tracking-wide font-medium`, children: "Cliente" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`truncate text-sm font-bold text-gray-800`, children: (campaignContact == null ? void 0 : campaignContact.label) || "N/A" })
+                      ] })
+                    ] })
+                  ] }),
+                  isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg border border-blue-200 bg-blue-50 p-6 text-center`, role: "status", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`mx-auto mb-2 inline-block h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent` }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs font-medium text-blue-700`, children: "Carregando dados do contato..." })
+                  ] }),
+                  error2 && !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`rounded-lg border border-red-200 bg-red-50 p-3`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertCircle, { "aria-hidden": true, className: tw`h-4 w-4 flex-shrink-0 text-red-600` }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`min-w-0 flex-1`, children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-xs font-semibold text-red-700`, children: "Erro ao carregar dados" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[10px] text-red-600`, children: error2 })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleRetry,
+                        className: tw`rounded-md border border-red-300 bg-white px-2 py-1 text-[11px] font-semibold text-red-700 transition hover:bg-red-100`,
+                        children: "Tentar novamente"
+                      }
+                    )
+                  ] }) }),
+                  !isLoading && !error2 && hasRows && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`space-y-2`, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`grid gap-2 ${gridColsFor(row.length)}`, children: row.map((field, fieldIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Field,
+                    {
+                      label: field.label,
+                      value: field.value || "-",
+                      fullWidth: field.width === "100%"
+                    },
+                    `${rowIndex}-${fieldIndex}-${field.key}`
+                  )) }, rowIndex)) }),
+                  !isLoading && !error2 && !hasRows && hasFields && form && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`grid grid-cols-2 gap-2`, children: form.fields.map((field) => /* @__PURE__ */ jsxRuntimeExports.jsx(Field, { label: field.label, value: field.value || "-" }, field.key)) }),
+                  !isLoading && !error2 && !hasData && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-gray-50 px-4 py-8 text-center`, children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(FiUser, { "aria-hidden": true, className: tw`mb-2 h-8 w-8 text-gray-400` }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm text-gray-500`, children: "Nenhum dado disponível" })
+                  ] })
+                ]
+              }
+            ),
+            isCallActive && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`border-t border-gray-200 bg-gray-50 px-4 py-2`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-center text-xs text-gray-500`, children: "Aguarde o fim da chamada para fechar" }) })
+          ]
+        }
+      )
     }
   );
   if (typeof document !== "undefined") {
-    return createPortal(modalContent, document.body);
+    return createPortal(modalContent, portalTarget ?? document.body);
   }
   return null;
 }
@@ -56785,9 +57027,16 @@ function Field({
   fullWidth
 }) {
   const widthClass = fullWidth ? "col-span-full" : "";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg border border-slate-200 bg-white p-2 ${widthClass}`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`mb-0.5 truncate text-[9px] font-semibold uppercase tracking-wide text-slate-500`, children: label }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`break-words text-xs font-semibold text-slate-800 line-clamp-2`, children: value })
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg border border-gray-200 bg-white p-2 ${widthClass}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`mb-0.5 truncate text-[9px] font-semibold uppercase tracking-wide text-gray-500`, children: label }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "p",
+      {
+        className: tw`overflow-hidden break-words text-xs font-semibold text-gray-800`,
+        style: { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" },
+        children: value
+      }
+    )
   ] });
 }
 if (typeof window !== "undefined" && !window.__fetchIntercepted__) {
@@ -58364,14 +58613,15 @@ function InlineDialer({ variant = "default", portalTarget, isAuthenticated, mode
   if (!isAuthenticated || !isMiniMode) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { variant, portalTarget, isAuthenticated, ...props });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(AuthenticatedMiniDialer, { ...props });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AuthenticatedMiniDialer, { portalTarget, ...props });
 }
 function AuthenticatedMiniDialer({
   username,
   onLogin,
   onLogout,
   isLoadingSession,
-  sessionError
+  sessionError,
+  portalTarget
 }) {
   var _a2;
   const { skipManualQualification } = useDialerConfig();
@@ -58636,7 +58886,8 @@ function AuthenticatedMiniDialer({
         campaignContactPhoneId: ((_a2 = currentCall == null ? void 0 : currentCall.data) == null ? void 0 : _a2.campaignContactPhoneId) ?? null,
         callDuration: callDurationSeconds,
         isCallActive: isInCall || isConnecting,
-        onClose: () => setIsClientInfoModalOpen(false)
+        onClose: () => setIsClientInfoModalOpen(false),
+        portalTarget
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -58878,7 +59129,7 @@ function ClickToCallAgent({ enabled = true, pollIntervalMs, sessionToken, onTask
   }, [enabled, pollIntervalMs, sessionToken]);
   return null;
 }
-const WIDGET_VERSION = "2.3.0";
+const WIDGET_VERSION = "2.4.0";
 let currentSipWebSocket = null;
 function sendSipUnregisterIfPossible(ws) {
   if (ws.readyState !== WebSocket.OPEN) return;