@envive-ai/react-widgets-v3 0.3.68 → 0.3.69

package/src/CXIntegration/implementations/__tests__/useGladlyUnifiedCXButton.test.ts

@@ -0,0 +1,233 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { DOMObserver } from '@envive-ai/react-hooks/application/utils';
+import { useGladlyUnifiedCXButton } from '../useGladlyUnifiedCXButton';
+
+const GLADLY_CONTAINER_ID = 'gladlyChat_container';
+const HIDE_STYLE_ID = 'envive-gladly-pill-hide';
+const ENVIVE_BUTTON_HIDE_STYLE_ID = 'envive-floating-button-hide';
+
+/**
+ * Gladly renders into an OPEN shadow root attached to `#gladlyChat_container`
+ * (confirmed via live DOM inspection — see PR history). The host's own
+ * attributes/size never change between open and closed, and it has zero
+ * light-DOM children, so open/close can only be read from inside the shadow
+ * tree. Closed state: a small launcher icon (~50x50). Open state: a chat
+ * panel comfortably larger than the 200px threshold in both dimensions.
+ */
+describe('useGladlyUnifiedCXButton', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    document.head.innerHTML = '';
+  });
+
+  afterEach(() => {
+    DOMObserver.destroy();
+  });
+
+  const flush = (ms = 0) =>
+    new Promise<void>(resolve => {
+      setTimeout(resolve, ms);
+    });
+
+  // jsdom has no layout engine — getBoundingClientRect() always returns all
+  // zeroes — so the sizes our production code reads from the real DOM have
+  // to be stubbed per element to exercise that branch here.
+  const stubRect = (el: HTMLElement, width: number, height: number) => {
+    Object.defineProperty(el, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => ({ width, height, top: 0, left: 0, right: width, bottom: height }) as DOMRect,
+    });
+  };
+
+  const createHostWithShadowRoot = () => {
+    const host = document.createElement('div');
+    host.id = GLADLY_CONTAINER_ID;
+    document.body.appendChild(host);
+    const shadowRoot = host.attachShadow({ mode: 'open' });
+    return shadowRoot;
+  };
+
+  const renderClosedIcon = (shadowRoot: ShadowRoot) => {
+    const icon = document.createElement('button');
+    icon.className = '_chatIconButton_z80r8_17';
+    stubRect(icon, 50, 50);
+    shadowRoot.appendChild(icon);
+    return icon;
+  };
+
+  const renderOpenPanel = (shadowRoot: ShadowRoot) => {
+    const panel = document.createElement('div');
+    panel.className = '_baseWidgetContainer_1mosp_1 _panel_1mosp_21';
+    stubRect(panel, 364, 577);
+    shadowRoot.appendChild(panel);
+    return panel;
+  };
+
+  it('opens, then closes when the panel is replaced by the closed-state launcher icon', async () => {
+    const onSwitchToAgent = vi.fn();
+    const onCXClose = vi.fn();
+
+    // Host + shadow root already exist before the hook mounts, so its
+    // mount-time attach() finds them synchronously (no need to wait out the
+    // retry interval here — that path is covered by the next test).
+    const shadowRoot = createHostWithShadowRoot();
+    const icon = renderClosedIcon(shadowRoot);
+
+    const { result } = renderHook(() =>
+      useGladlyUnifiedCXButton({ onSwitchToAgent, onCXClose, suppressMerchantButton: true }),
+    );
+    await flush();
+
+    result.current.toggle();
+    expect(onSwitchToAgent).toHaveBeenCalledTimes(1);
+    expect(document.getElementById(ENVIVE_BUTTON_HIDE_STYLE_ID)).not.toBeNull();
+
+    // Gladly swaps the closed-state icon for the open chat panel.
+    icon.remove();
+    renderOpenPanel(shadowRoot);
+    await flush();
+
+    expect(onCXClose).not.toHaveBeenCalled();
+    expect(document.getElementById(ENVIVE_BUTTON_HIDE_STYLE_ID)).not.toBeNull();
+
+    // Real close: panel replaced by the small launcher icon again.
+    shadowRoot.querySelector('div')?.remove();
+    renderClosedIcon(shadowRoot);
+    await flush();
+
+    await waitFor(() => expect(onCXClose).toHaveBeenCalledTimes(1));
+    expect(document.getElementById(ENVIVE_BUTTON_HIDE_STYLE_ID)).toBeNull();
+    // The closed-state launcher icon lives inside the shadow root, out of
+    // reach of the `#custom-gladly-pill` document-level suppression rule —
+    // the whole host must be force-hidden again so it doesn't reappear.
+    expect(document.getElementById(GLADLY_CONTAINER_ID)?.style.display).toBe('none');
+  });
+
+  it('attaches to the shadow root even when it is not available until after the host node is created', async () => {
+    const onSwitchToAgent = vi.fn();
+    const onCXClose = vi.fn();
+
+    renderHook(() =>
+      useGladlyUnifiedCXButton({ onSwitchToAgent, onCXClose, suppressMerchantButton: true }),
+    ).result.current.toggle();
+
+    // Host appears first (e.g. Gladly SDK init), shadow root + content a tick
+    // later — after the hook's first attach() attempt already ran and found
+    // nothing, so this exercises the retry interval actually catching up.
+    const host = document.createElement('div');
+    host.id = GLADLY_CONTAINER_ID;
+    document.body.appendChild(host);
+    await flush();
+
+    const shadowRoot = host.attachShadow({ mode: 'open' });
+    renderOpenPanel(shadowRoot);
+    await flush(350);
+
+    expect(onCXClose).not.toHaveBeenCalled();
+
+    shadowRoot.querySelector('div')?.remove();
+    renderClosedIcon(shadowRoot);
+    await flush();
+
+    await waitFor(() => expect(onCXClose).toHaveBeenCalledTimes(1));
+  });
+
+  it('does not treat a transient small render during the opening animation as a close', async () => {
+    // toggle() sets wasOpenRef optimistically before the panel has actually
+    // grown to its open size. Without the hasConfirmedOpenRef gate, reading
+    // the panel here (still mid-animation) would be misread as "closed" and
+    // immediately flip the Envive button back — the panel flashing open then
+    // shut that an earlier version of this fix regressed on.
+    const onSwitchToAgent = vi.fn();
+    const onCXClose = vi.fn();
+
+    const shadowRoot = createHostWithShadowRoot();
+    const panel = document.createElement('div');
+    panel.className = '_baseWidgetContainer_1mosp_1 _panel_1mosp_21';
+    stubRect(panel, 40, 40); // still animating in, hasn't reached open size yet
+    shadowRoot.appendChild(panel);
+
+    renderHook(() =>
+      useGladlyUnifiedCXButton({ onSwitchToAgent, onCXClose, suppressMerchantButton: true }),
+    ).result.current.toggle();
+    await flush();
+
+    expect(onCXClose).not.toHaveBeenCalled();
+    expect(document.getElementById(ENVIVE_BUTTON_HIDE_STYLE_ID)).not.toBeNull();
+  });
+
+  it('confirms the open state via polling when the panel grows without an accompanying DOM mutation', async () => {
+    // MutationObserver never fires for a size change that isn't driven by a
+    // DOM mutation (e.g. a CSS transition finishing). Only the polling
+    // fallback can pick this up and set hasConfirmedOpenRef, which the later
+    // real (mutation-based) close then depends on to fire at all.
+    const onSwitchToAgent = vi.fn();
+    const onCXClose = vi.fn();
+
+    const shadowRoot = createHostWithShadowRoot();
+    const panel = document.createElement('div');
+    panel.className = '_baseWidgetContainer_1mosp_1 _panel_1mosp_21';
+    stubRect(panel, 40, 40);
+    shadowRoot.appendChild(panel);
+
+    renderHook(() =>
+      useGladlyUnifiedCXButton({ onSwitchToAgent, onCXClose, suppressMerchantButton: true }),
+    ).result.current.toggle();
+    await flush();
+
+    // Panel reaches its open size purely via layout/animation — no DOM
+    // mutation accompanies it.
+    stubRect(panel, 364, 577);
+    await flush(300); // > SHADOW_POLL_MS, no further mutation triggered
+
+    panel.remove();
+    renderClosedIcon(shadowRoot);
+    await flush();
+
+    await waitFor(() => expect(onCXClose).toHaveBeenCalledTimes(1));
+  });
+
+  it('removes the suppression rule and restores the host when suppressMerchantButton turns off', async () => {
+    const onSwitchToAgent = vi.fn();
+    const onCXClose = vi.fn();
+
+    const { rerender } = renderHook(
+      ({ suppressMerchantButton }) =>
+        useGladlyUnifiedCXButton({ onSwitchToAgent, onCXClose, suppressMerchantButton }),
+      { initialProps: { suppressMerchantButton: true } },
+    );
+
+    expect(document.getElementById(HIDE_STYLE_ID)).not.toBeNull();
+
+    const host = document.createElement('div');
+    host.id = GLADLY_CONTAINER_ID;
+    host.style.display = 'none';
+    document.body.appendChild(host);
+
+    rerender({ suppressMerchantButton: false });
+
+    expect(document.getElementById(HIDE_STYLE_ID)).toBeNull();
+    expect(document.getElementById(GLADLY_CONTAINER_ID)?.style.display).toBe('');
+  });
+
+  it('cleans up the suppression rule and host on unmount, so switching providers does not leave Gladly hidden', () => {
+    const onSwitchToAgent = vi.fn();
+    const onCXClose = vi.fn();
+
+    const host = document.createElement('div');
+    host.id = GLADLY_CONTAINER_ID;
+    document.body.appendChild(host);
+
+    const { unmount } = renderHook(() =>
+      useGladlyUnifiedCXButton({ onSwitchToAgent, onCXClose, suppressMerchantButton: true }),
+    );
+    expect(document.getElementById(HIDE_STYLE_ID)).not.toBeNull();
+
+    // FloatingChatWidget remounts this provider (key={cxProvider}) when the
+    // configured provider changes away from Gladly.
+    unmount();
+
+    expect(document.getElementById(HIDE_STYLE_ID)).toBeNull();
+    expect(document.getElementById(GLADLY_CONTAINER_ID)?.style.display).toBe('');
+  });
+});

package/src/CXIntegration/implementations/useGladlyUnifiedCXButton.ts

@@ -5,9 +5,24 @@ import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
 import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
 
 const GLADLY_CONTAINER_ID = 'gladlyChat_container';
-const GLADLY_BUTTON_SELECTOR = '[data-aid*="gladlyChatChatButton"]';
-const GLADLY_OPEN_SIZE_THRESHOLD = 200;
-const POLL_INTERVAL_MS = 400;
+const GLADLY_BUTTON_SELECTOR = '#custom-gladly-pill';
+const HIDE_STYLE_ID = 'envive-gladly-pill-hide';
+const ENVIVE_BUTTON_HIDE_STYLE_ID = 'envive-floating-button-hide';
+// Gladly renders its actual UI (launcher icon and chat panel alike) inside an
+// open shadow root attached to `#gladlyChat_container` — confirmed via live
+// inspection: the host's own attributes/size/display never change between
+// open and closed, and the host has zero light-DOM children, so nothing
+// outside the shadow root reflects open/closed state. The open chat panel is
+// comfortably larger than this in both dimensions; the closed-state launcher
+// icon and tooltips are not.
+const GLADLY_PANEL_OPEN_SIZE_THRESHOLD = 200;
+const SHADOW_ATTACH_RETRY_MS = 300;
+// MutationObserver only fires on DOM mutations (nodes/attributes added,
+// removed, or changed) — a size change driven purely by a CSS
+// animation/transition with no accompanying DOM change would never be seen,
+// leaving `hasConfirmedOpenRef` stuck false and the Envive button hidden
+// forever. This polls the shadow root as a safety net alongside it.
+const SHADOW_POLL_MS = 250;
 
 type GladlySdk = {
   show?: () => void;
@@ -25,6 +40,56 @@ const restoreContainer = (node: HTMLElement | null) => {
   node?.style.removeProperty('display');
 };
 
+/**
+ * Hide the merchant's floating pill with an injected CSS rule instead of
+ * toggling `display` on a specific element reference. Gladly can re-create
+ * the pill node after our reference is taken (re-renders, SDK re-init), so a
+ * rule keyed by selector keeps applying no matter how many times the node is
+ * swapped out, whereas a stale/detached node reference would silently no-op
+ * and let the merchant pill reappear next to ours.
+ */
+const hideMerchantButton = () => {
+  if (document.getElementById(HIDE_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = HIDE_STYLE_ID;
+  style.textContent = `${GLADLY_BUTTON_SELECTOR} { display: none !important; }`;
+  document.head.appendChild(style);
+};
+
+const showMerchantButton = () => {
+  document.getElementById(HIDE_STYLE_ID)?.remove();
+};
+
+/**
+ * Hide/show the Envive floating button via an injected CSS rule rather than
+ * `enviveFloatingButton.hide()/.show()`, which toggles inline `display` on a
+ * cached node reference. `FloatingChatWidget` unmounts and remounts that
+ * button in response to `isCXOpen` (see `buttonShouldRender`), so the cached
+ * reference can point at a node React has already removed — the toggle then
+ * silently no-ops and the button stays invisible after Gladly closes. A rule
+ * keyed by id keeps applying across remounts instead.
+ */
+const hideEnviveButton = () => {
+  if (document.getElementById(ENVIVE_BUTTON_HIDE_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = ENVIVE_BUTTON_HIDE_STYLE_ID;
+  style.textContent = `#${FLOATING_BUTTON_ID} { display: none !important; }`;
+  document.head.appendChild(style);
+};
+
+const showEnviveButton = () => {
+  document.getElementById(ENVIVE_BUTTON_HIDE_STYLE_ID)?.remove();
+};
+
+const isPanelOpenInShadowRoot = (shadowRoot: ShadowRoot): boolean =>
+  Array.from(shadowRoot.querySelectorAll('*')).some(el => {
+    const rect = el.getBoundingClientRect();
+    return (
+      rect.width > GLADLY_PANEL_OPEN_SIZE_THRESHOLD &&
+      rect.height > GLADLY_PANEL_OPEN_SIZE_THRESHOLD
+    );
+  });
+
 interface UseGladlyUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useGladlyUnifiedCXButton = ({
@@ -33,10 +98,53 @@ export const useGladlyUnifiedCXButton = ({
   suppressMerchantButton,
 }: UseGladlyUnifiedCXButtonProps): UnifiedCXButton => {
   const gladlyContainer = useElementObserver(SelectorFactory.id(GLADLY_CONTAINER_ID));
-  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
   const wasOpenRef = useRef(false);
+  // `toggle()` sets `wasOpenRef` optimistically before Gladly has actually
+  // opened the panel. Confirmed-open gates the close check below so a
+  // transient intermediate state during opening can't be misread as a close.
+  const hasConfirmedOpenRef = useRef(false);
+
+  const isSwitchEnabled = () => {
+    const gladly = getGladly();
+    const hasGladlySdk = !!gladly && typeof gladly.show === 'function';
+    const hasGladlyButton = !!document.querySelector(GLADLY_BUTTON_SELECTOR);
+    const hasGladlyContainer = !!document.getElementById(GLADLY_CONTAINER_ID);
+
+    return hasGladlySdk || hasGladlyButton || hasGladlyContainer;
+  };
 
-  const isSwitchEnabled = () => !!document.getElementById(GLADLY_CONTAINER_ID);
+  const handleOpen = () => {
+    wasOpenRef.current = true;
+    hideEnviveButton();
+  };
+
+  const handleClose = () => {
+    wasOpenRef.current = false;
+    hasConfirmedOpenRef.current = false;
+    onCXClose?.();
+    // The merchant-visible launcher Gladly falls back to on close lives
+    // inside the shadow root, out of reach of the `#custom-gladly-pill`
+    // document-level suppression rule below — hiding the whole host is the
+    // only way to keep it suppressed once the panel closes.
+    if (suppressMerchantButton) {
+      forceHideContainer(document.getElementById(GLADLY_CONTAINER_ID));
+    }
+    showEnviveButton();
+  };
+
+  // Keep the latest handleOpen/handleClose (and the suppressMerchantButton
+  // auto-open guard) reachable from the shadow-root MutationObserver set up
+  // once below, without re-subscribing that observer on every render.
+  const checkShadowOpenStateRef = useRef<(shadowRoot: ShadowRoot) => void>(() => {});
+  checkShadowOpenStateRef.current = (shadowRoot: ShadowRoot) => {
+    const open = isPanelOpenInShadowRoot(shadowRoot);
+    if (open) {
+      hasConfirmedOpenRef.current = true;
+      if (!wasOpenRef.current) handleOpen();
+    } else if (wasOpenRef.current && hasConfirmedOpenRef.current) {
+      handleClose();
+    }
+  };
 
   gladlyContainer.onAdd(el => {
     if (suppressMerchantButton && el && !wasOpenRef.current) {
@@ -51,55 +159,80 @@ export const useGladlyUnifiedCXButton = ({
     }
   });
 
+  // Defensive fallback in case Gladly unmounts the container in some
+  // configuration we haven't observed.
+  gladlyContainer.onRemove(() => {
+    if (wasOpenRef.current) handleClose();
+  });
+
   useEffect(() => {
-    if (!suppressMerchantButton) {
+    if (suppressMerchantButton) {
+      hideMerchantButton();
+    } else {
+      showMerchantButton();
       restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
     }
+    // `FloatingChatWidget` remounts this provider when the configured
+    // provider changes (`key={cxProvider}`), so without a cleanup, switching
+    // away from Gladly would leave the injected suppression rule (and
+    // potentially the host's forced display:none) behind even though this
+    // integration is no longer active.
+    return () => {
+      showMerchantButton();
+      restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
+    };
   }, [suppressMerchantButton]);
 
+  // `#gladlyChat_container` is an open shadow host — its own light-DOM
+  // attributes/size never change between Gladly's open and closed states, so
+  // open/close has to be read from inside the shadow tree instead. The
+  // shadow root may attach asynchronously after the host node itself exists,
+  // so this retries briefly until it's there, then observes it directly
+  // (regular MutationObserver subtree watching doesn't cross shadow
+  // boundaries, which is why nothing here used to fire on open/close).
   useEffect(() => {
-    const handleOpen = () => {
-      wasOpenRef.current = true;
-      enviveFloatingButton.hide();
-    };
-
-    const handleClose = () => {
-      wasOpenRef.current = false;
-      onCXClose?.();
-      const node = document.getElementById(GLADLY_CONTAINER_ID);
-      if (suppressMerchantButton) {
-        forceHideContainer(node);
+    let shadowObserver: MutationObserver | null = null;
+    let retryIntervalId: number | undefined;
+    let pollIntervalId: number | undefined;
+
+    const attach = () => {
+      const host = document.getElementById(GLADLY_CONTAINER_ID);
+      const shadowRoot = host?.shadowRoot;
+      if (!shadowRoot || shadowObserver) return;
+
+      shadowObserver = new MutationObserver(() => checkShadowOpenStateRef.current(shadowRoot));
+      shadowObserver.observe(shadowRoot, { childList: true, subtree: true, attributes: true });
+      checkShadowOpenStateRef.current(shadowRoot);
+      pollIntervalId = window.setInterval(
+        () => checkShadowOpenStateRef.current(shadowRoot),
+        SHADOW_POLL_MS,
+      );
+
+      if (retryIntervalId) {
+        window.clearInterval(retryIntervalId);
+        retryIntervalId = undefined;
       }
-      enviveFloatingButton.show();
     };
 
-    const checkState = () => {
-      const node = document.getElementById(GLADLY_CONTAINER_ID);
-      if (!node) return;
-
-      const styles = window.getComputedStyle(node);
-      const isHidden = styles.display === 'none' || styles.visibility === 'hidden';
-      if (isHidden) {
-        if (wasOpenRef.current) handleClose();
-        return;
-      }
-
-      const rect = node.getBoundingClientRect();
-      const isOpen =
-        rect.width > GLADLY_OPEN_SIZE_THRESHOLD && rect.height > GLADLY_OPEN_SIZE_THRESHOLD;
-
-      if (isOpen && !wasOpenRef.current) handleOpen();
-      else if (!isOpen && wasOpenRef.current) handleClose();
+    // Started before the synchronous attach() attempt so a successful
+    // same-tick attachment (shadow root already present) can clear it
+    // immediately, instead of leaving it running for the component's entire
+    // lifetime because it was created after attach() already returned.
+    retryIntervalId = window.setInterval(attach, SHADOW_ATTACH_RETRY_MS);
+    attach();
+
+    return () => {
+      shadowObserver?.disconnect();
+      if (retryIntervalId) window.clearInterval(retryIntervalId);
+      if (pollIntervalId) window.clearInterval(pollIntervalId);
     };
-
-    const intervalId = window.setInterval(checkState, POLL_INTERVAL_MS);
-    return () => window.clearInterval(intervalId);
-  }, [suppressMerchantButton, enviveFloatingButton, onCXClose]);
+  }, []);
 
   const toggle = () => {
     onSwitchToAgent();
-    enviveFloatingButton.hide();
+    hideEnviveButton();
     wasOpenRef.current = true;
+    hasConfirmedOpenRef.current = false;
 
     restoreContainer(document.getElementById(GLADLY_CONTAINER_ID));
 

package/src/debug/reportIssue.tsx

@@ -5,7 +5,8 @@ import {
   Suggestion,
   TurnInfo,
 } from '@spiffy-ai/commerce-api-client';
-import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useAtomValue } from 'jotai';
 
 import { Message, MessageType } from '@envive-ai/react-hooks/application/models';
@@ -418,18 +419,49 @@ interface DrawerProps {
   onClose: () => void;
   children: React.ReactNode;
   width?: string;
+  // An element inside the same root (shadow root, or document for tests/Storybook)
+  // the drawer should portal into — see the comment on getPortalTarget below.
+  anchorNode: Element | null;
 }
 
+// The drawer is `position: fixed`, but it's rendered wherever ReportIssue
+// happens to be mounted — currently inside the chat footer, which framer-motion
+// animates via `layoutId` (FullPageSalesAgent.tsx). That layout animation keeps
+// a `transform`/`will-change: transform` on the footer, which (per the CSS
+// spec) makes it the containing block for any `position: fixed` descendant,
+// trapping the drawer inside the footer's own bounds instead of the viewport.
+// Portaling to the root of the current shadow tree (or document.body outside
+// one, e.g. Storybook/tests) sidesteps that regardless of where ReportIssue
+// ends up nested in the future — CSS custom properties and the Tailwind
+// utility classes it relies on still apply, since both work off the whole
+// shadow tree rather than DOM-portal structure.
+const getPortalTarget = (node: Element | null): Element | ShadowRoot | null => {
+  const root = node?.getRootNode();
+  if (root instanceof ShadowRoot) {
+    return root;
+  }
+  if (root instanceof Document) {
+    return root.body;
+  }
+  return null;
+};
+
 const Drawer = ({
   isOpen,
   onClose,
   children,
   width = 'md:envive-tw-w-[80%] lg:envive-tw-w-[67%]',
+  anchorNode,
 }: DrawerProps) => {
   if (!isOpen) return null;
 
-  return (
-    <div className="envive-tw-fixed envive-tw-right-[0] envive-tw-top-[0] envive-tw-z-[9999] envive-tw-flex envive-tw-w-full envive-tw-flex-row envive-tw-justify-end">
+  const content = (
+    // Even portaled to the shadow root, this still competes for stacking order
+    // against the merchant's own page content (not just our widget tree) —
+    // some themes put their own chrome (nav, sticky headers) at the
+    // practical max z-index (2147483647, the largest value z-index accepts),
+    // which would otherwise still paint over a merely-high value like 9999.
+    <div className="envive-tw-fixed envive-tw-right-[0] envive-tw-top-[0] envive-tw-z-[2147483647] envive-tw-flex envive-tw-w-full envive-tw-flex-row envive-tw-justify-end">
       <div
         className="envive-tw-bg envive-tw-flex-grow envive-tw-bg-black/40"
         onClick={onClose}
@@ -441,9 +473,13 @@ const Drawer = ({
       </div>
     </div>
   );
+
+  const portalTarget = getPortalTarget(anchorNode);
+  return portalTarget ? createPortal(content, portalTarget) : content;
 };
 
 export const ReportIssue = () => {
+  const anchorRef = useRef<HTMLDivElement>(null);
   const { messages, suggestions, userEvents } = useAtomValue(chatAtom);
   const lastMessages = useAtomValue(lastAssistantMessageAtom);
   const [lastMessagesText, setLastMessagesText] = useState<string>('');
@@ -606,7 +642,10 @@ export const ReportIssue = () => {
   });
 
   return (
-    <div className="envive-tw-mx-[16px] envive-tw-block envive-tw-h-[24px] envive-tw-w-full">
+    <div
+      ref={anchorRef}
+      className="envive-tw-mx-[16px] envive-tw-block envive-tw-h-[24px] envive-tw-w-full"
+    >
       <button
         type="button"
         onClick={e => {
@@ -620,6 +659,7 @@ export const ReportIssue = () => {
       <Drawer
         isOpen={isOpen}
         onClose={onClose}
+        anchorNode={anchorRef.current}
       >
         <ReportHeader onClose={onClose} />
         <div className="envive-tw-min-h-0 envive-tw-p-0 envive-tw-flex envive-tw-flex-[1_1_auto] envive-tw-flex-col envive-tw-overflow-y-auto">

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -156,7 +156,20 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
       enabled={customerServiceIntegration?.enabled ?? false}
       suppressMerchantButton={customerServiceIntegration?.suppressMerchantButton ?? false}
       onSwitchToAgent={() => setIsCXOpen(true)}
-      onCXClose={() => setIsCXOpen(false)}
+      onCXClose={() => {
+        setIsCXOpen(false);
+        // Closing the CX provider's chat (e.g. Gladly) should collapse the
+        // whole widget back to the floating button, not just drop back to
+        // the Envive chat underneath — the floating button only renders
+        // when both `isCXOpen` and the overlay's own `isOpen` are false.
+        if (!previewChatAlwaysOpen) {
+          closeChat(
+            ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON,
+            undefined,
+            'close_button',
+          );
+        }
+      }}
     >
       {({ isSwitchEnabled, toggle }) => (
         <>