@envive-ai/react-widgets-v3 0.3.2

package/package.json

@@ -0,0 +1,158 @@
+{
+  "name": "@envive-ai/react-widgets-v3",
+  "version": "0.3.2",
+  "description": "React widget library v3 for Envive services.",
+  "keywords": [
+    "react",
+    "components",
+    "envive",
+    "ui"
+  ],
+  "author": "Envive AI",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index-VWNd4lyI.d.cts",
+  "files": [
+    "dist",
+    "src",
+    "!**/*.tsbuildinfo",
+    "tailwind-preset.js"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "build:watch": "tsdown --watch",
+    "dev": "npm run get-merchants && storybook dev -p 6006",
+    "prepublish": "npm run build",
+    "storybook:dev": "tsx ./.storybook/getMerchants.ts && storybook dev -p 6006",
+    "storybook:build": "npm run get-merchants && storybook build",
+    "storybook:get-merchants": "tsx ./.storybook/getMerchants.ts",
+    "typecheck": "tsc",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.15",
+    "classnames": "^2.5.1",
+    "framer-motion": "^12.23.24",
+    "jotai": "^2.15.1"
+  },
+  "peerDependencies": {
+    "@envive-ai/react-hooks": "*",
+    "@envive-ai/react-toolkit": "*",
+    "@envive-ai/react-toolkit-v3": "*",
+    "@envive-ai/react-widgets": "*",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1"
+  },
+  "devDependencies": {
+    "@envive-ai/react-widgets": "*",
+    "@envive-ai/react-toolkit-v3": "*",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@mdx-js/react": "^3.1.1",
+    "@storybook/addon-a11y": "^9.1.4",
+    "@storybook/addon-docs": "^9.1.4",
+    "@storybook/addon-onboarding": "^9.1.4",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-vitest": "^9.1.10",
+    "@storybook/icons": "^1.6.0",
+    "@storybook/react-vite": "^9.1.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.3.2",
+    "@types/react": "^19.1.12",
+    "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "autoprefixer": "^10.4.21",
+    "eslint-plugin-storybook": "^9.1.4",
+    "playwright": "^1.56.0",
+    "postcss": "^8.5.6",
+    "storybook": "^9.1.4",
+    "tailwindcss": "^3.4.17",
+    "tsdown": "^0.14.2",
+    "typescript": "^5.4.3",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "*"
+  },
+  "exports": {
+    "./hocs/withBaseWidget": {
+      "import": "./dist/hocs/withBaseWidget/index.js",
+      "require": "./dist/hocs/withBaseWidget/index.cjs"
+    },
+    "./stories/SalesAgentTest": {
+      "import": "./dist/stories/SalesAgentTest/index.js",
+      "require": "./dist/stories/SalesAgentTest/index.cjs"
+    },
+    "./widgets-v2/SearchResults": {
+      "import": "./dist/widgets-v2/SearchResults/index.js",
+      "require": "./dist/widgets-v2/SearchResults/index.cjs"
+    },
+    "./widgets-v2/SearchZeroState": {
+      "import": "./dist/widgets-v2/SearchZeroState/index.js",
+      "require": "./dist/widgets-v2/SearchZeroState/index.cjs"
+    },
+    "./widgets-v2/SuggestionBar": {
+      "import": "./dist/widgets-v2/SuggestionBar/index.js",
+      "require": "./dist/widgets-v2/SuggestionBar/index.cjs"
+    },
+    "./widgets-v2/SuggestionButtonContainer": {
+      "import": "./dist/widgets-v2/SuggestionButtonContainer/index.js",
+      "require": "./dist/widgets-v2/SuggestionButtonContainer/index.cjs"
+    },
+    "./widgets/ChatPreviewComparisonWidget": {
+      "import": "./dist/widgets/ChatPreviewComparisonWidget/index.js",
+      "require": "./dist/widgets/ChatPreviewComparisonWidget/index.cjs"
+    },
+    "./widgets/ChatPreviewLoadingWidget": {
+      "import": "./dist/widgets/ChatPreviewLoadingWidget/index.js",
+      "require": "./dist/widgets/ChatPreviewLoadingWidget/index.cjs"
+    },
+    "./widgets/ChatPreviewWidget": {
+      "import": "./dist/widgets/ChatPreviewWidget/index.js",
+      "require": "./dist/widgets/ChatPreviewWidget/index.cjs"
+    },
+    "./widgets/FloatingChatWidget": {
+      "import": "./dist/widgets/FloatingChatWidget/index.js",
+      "require": "./dist/widgets/FloatingChatWidget/index.cjs"
+    },
+    "./widgets/PromptButtonCarouselWithImageWidget": {
+      "import": "./dist/widgets/PromptButtonCarouselWithImageWidget/index.js",
+      "require": "./dist/widgets/PromptButtonCarouselWithImageWidget/index.cjs"
+    },
+    "./widgets/PromptCarouselWidget": {
+      "import": "./dist/widgets/PromptCarouselWidget/index.js",
+      "require": "./dist/widgets/PromptCarouselWidget/index.cjs"
+    },
+    "./widgets/SocialProofFlowWidget": {
+      "import": "./dist/widgets/SocialProofFlowWidget/index.js",
+      "require": "./dist/widgets/SocialProofFlowWidget/index.cjs"
+    },
+    "./widgets/SocialProofWidget": {
+      "import": "./dist/widgets/SocialProofWidget/index.js",
+      "require": "./dist/widgets/SocialProofWidget/index.cjs"
+    },
+    "./widgets/TitledPromptCarouselWidget": {
+      "import": "./dist/widgets/TitledPromptCarouselWidget/index.js",
+      "require": "./dist/widgets/TitledPromptCarouselWidget/index.cjs"
+    },
+    "./widgets/TypingAnimationFlowWidget": {
+      "import": "./dist/widgets/TypingAnimationFlowWidget/index.js",
+      "require": "./dist/widgets/TypingAnimationFlowWidget/index.cjs"
+    },
+    "./widgets/TypingAnimationWidget": {
+      "import": "./dist/widgets/TypingAnimationWidget/index.js",
+      "require": "./dist/widgets/TypingAnimationWidget/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/src/CXIntegration/hooks/useUnifiedCXButton.ts

@@ -0,0 +1,38 @@
+import { useAtomValue } from 'jotai';
+
+import { hasParsedVariantInfoAtom, supportedEventAtom } from '@envive-ai/react-hooks/atoms/app';
+import { findCustomerServiceImpl } from '../utils/functions';
+import { CustomerServiceType, UnifiedCXButton } from '../types';
+
+interface UseUnifiedCXButtonProps {
+  enabled: boolean;
+  provider: CustomerServiceType;
+  suppressMerchantButton?: boolean;
+  onSwitchToAgent?: () => void;
+}
+
+export const useUnifiedCXButton = ({
+  enabled = false,
+  provider = CustomerServiceType.unsupported,
+  suppressMerchantButton = false,
+  onSwitchToAgent,
+}: UseUnifiedCXButtonProps): UnifiedCXButton | undefined => {
+  const supportedEvent = useAtomValue(supportedEventAtom);
+  const hasParsedVariantInfo = useAtomValue(hasParsedVariantInfoAtom);
+
+  const customerService = findCustomerServiceImpl(provider);
+
+  const selectedCustomerService = customerService({
+    onSwitchToAgent,
+    suppressMerchantButton,
+  });
+
+  if (!enabled) return undefined;
+
+  if (suppressMerchantButton) {
+    const showUnifiedButton = hasParsedVariantInfo && supportedEvent?.supported;
+    if (!showUnifiedButton) return undefined;
+  }
+
+  return selectedCustomerService;
+};

package/src/CXIntegration/implementations/useDefaultUnifiedCXButton.ts

@@ -0,0 +1,8 @@
+import { UnifiedCXButton } from '../types';
+
+export const useDefaultUnifiedCXButton = (): UnifiedCXButton => {
+  return {
+    toggle: () => {},
+    isSwitchEnabled: () => false,
+  };
+};

package/src/CXIntegration/implementations/useGladlyUnifiedCXButton.ts

@@ -0,0 +1,28 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+
+interface UseGladlyUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useGladlyUnifiedCXButton = ({
+  onSwitchToAgent,
+}: UseGladlyUnifiedCXButtonProps): UnifiedCXButton => {
+  const gladlyButton = document.querySelector('[data-aid*="gladlyChatChatButton"]');
+
+  const toggle = () => {
+    onSwitchToAgent();
+    if (gladlyButton && gladlyButton instanceof HTMLElement) {
+      gladlyButton.click();
+    }
+  };
+
+  const isGladlyButtonEnabled = () => {
+    const gladlyButtonElement = document.getElementById('gladlyChat_container');
+    return !!gladlyButtonElement;
+  };
+
+  const isSwitchEnabled = () => isGladlyButtonEnabled();
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/implementations/useGorgiasUnifiedCXButton.ts

@@ -0,0 +1,67 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+
+const CHAT_WINDOW_ID = 'chat-window';
+const CHAT_BUTTON_ID = 'chat-button';
+const GORGIAS_BUTTON_SELECTOR = 'id|chat-button @ id|gorgias-chat-messenger-button';
+
+interface UseGorgiasUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useGorgiasUnifiedCXButton = ({
+  onSwitchToAgent,
+  suppressMerchantButton,
+}: UseGorgiasUnifiedCXButtonProps): UnifiedCXButton => {
+  const chatWindow = useElementObserver(SelectorFactory.id(CHAT_WINDOW_ID));
+  const chatButton = useElementObserver(SelectorFactory.id(CHAT_BUTTON_ID));
+  const trigger = useElementObserver(SelectorFactory.chain(GORGIAS_BUTTON_SELECTOR));
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+
+  const toggle = () => {
+    onSwitchToAgent();
+    chatButton.show();
+    trigger.fire('click');
+
+    if (suppressMerchantButton) {
+      enviveFloatingButton.hide();
+    }
+  };
+
+  const isSwitchEnabled = () => !!SelectorFactory.chain(GORGIAS_BUTTON_SELECTOR).parse();
+
+  chatButton.onAdd(() => {
+    if (suppressMerchantButton) {
+      chatButton.hide();
+      enviveFloatingButton.show();
+    }
+  });
+
+  chatWindow.onAdd(el => {
+    if (el && suppressMerchantButton) {
+      const styles = window.getComputedStyle(el);
+      const chatWindowDisplay = styles.getPropertyValue('display');
+      const chatButtonDisplay = chatButton.targetNode?.style.display;
+
+      if (chatWindowDisplay === 'block' && chatButtonDisplay === 'none') {
+        chatButton.show();
+        enviveFloatingButton.hide();
+      }
+    }
+  });
+
+  chatWindow.onChange(el => {
+    if (el && suppressMerchantButton) {
+      const styles = window.getComputedStyle(el);
+      if (styles.getPropertyValue('display') === 'none') {
+        chatButton.hide();
+        enviveFloatingButton.show();
+      }
+    }
+  });
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/implementations/useGrooveUnifiedCXButton.ts

@@ -0,0 +1,83 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { useRef } from 'react';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+
+declare global {
+  interface Window {
+    groove?: {
+      widget: {
+        open: () => void;
+        close: () => void;
+        shim: {
+          isOpen: boolean;
+        };
+      };
+    };
+  }
+}
+
+interface UseGrooveUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useGrooveUnifiedCXButton = ({
+  onSwitchToAgent,
+  suppressMerchantButton,
+}: UseGrooveUnifiedCXButtonProps): UnifiedCXButton => {
+  const grooveChatContainer = useElementObserver(
+    SelectorFactory.query('div[id*="groove-container"]'),
+  );
+  const windowGrooveWidget = window.groove?.widget;
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+  const previousIsOpenRef = useRef<boolean | undefined>(undefined);
+
+  const toggle = () => {
+    if (suppressMerchantButton) {
+      enviveFloatingButton.hide();
+    }
+
+    onSwitchToAgent();
+    if (windowGrooveWidget) {
+      windowGrooveWidget.open();
+    }
+  };
+
+  const isGrooveWidgetEnabled = () => !!windowGrooveWidget;
+
+  const isSwitchEnabled = () => isGrooveWidgetEnabled();
+
+  const hideEnviveFloatingButton = () => {
+    enviveFloatingButton.hide();
+    if (windowGrooveWidget) {
+      windowGrooveWidget.open();
+    }
+  };
+
+  const showEnviveFloatingButton = () => {
+    enviveFloatingButton.show();
+    if (windowGrooveWidget) {
+      windowGrooveWidget.close();
+    }
+  };
+
+  grooveChatContainer.onChange(() => {
+    if (suppressMerchantButton) {
+      const isOpen = windowGrooveWidget?.shim.isOpen;
+
+      if (isOpen !== previousIsOpenRef.current) {
+        previousIsOpenRef.current = isOpen;
+
+        if (isOpen) {
+          hideEnviveFloatingButton();
+        } else {
+          showEnviveFloatingButton();
+        }
+      }
+    }
+  });
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/implementations/useKustomerUnifiedCXButton.ts

@@ -0,0 +1,120 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+
+interface UseKustomerUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useKustomerUnifiedCXButton = ({
+  onSwitchToAgent,
+  suppressMerchantButton,
+}: UseKustomerUnifiedCXButtonProps): UnifiedCXButton => {
+  const kustomerButton = useElementObserver(
+    SelectorFactory.chain('id|kustomer-ui-sdk-iframe @ query|div[role="button"]'),
+  );
+
+  const kustomerNotification = useElementObserver(
+    SelectorFactory.chain('id|kustomer-ui-sdk-iframe @ query|div[class^="unread__unread"]'),
+  );
+  const kustomerWidgetRoot = useElementObserver(
+    SelectorFactory.chain('id|kustomer-ui-sdk-iframe @ id|root'),
+  );
+
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+
+  const toggle = () => {
+    onSwitchToAgent();
+    if (suppressMerchantButton) {
+      enviveFloatingButton.hide();
+    }
+    kustomerButton.show();
+    kustomerButton.fire('click');
+  };
+
+  const isKustomerButtonEnabled = () => {
+    const kustomerButtonElement = (
+      document.getElementById('kustomer-ui-sdk-iframe') as HTMLIFrameElement
+    )?.contentWindow?.document.getElementById('root')?.children?.length;
+    return !!kustomerButtonElement;
+  };
+
+  const isSwitchEnabled = () => isKustomerButtonEnabled();
+
+  kustomerButton.onAdd(() => {
+    if (suppressMerchantButton) {
+      kustomerButton.hide();
+    }
+  });
+
+  kustomerNotification.onAdd(() => {
+    if (suppressMerchantButton) {
+      kustomerNotification.hide();
+    }
+  });
+
+  kustomerWidgetRoot.onChange(async el => {
+    if (suppressMerchantButton) {
+      for (const child of el?.children || []) {
+        if ([...child.classList].some(cls => cls.includes('widget__widgetWrapper'))) {
+          enviveFloatingButton.hide();
+          kustomerButton.show();
+          kustomerNotification.show();
+        } else if (
+          [...child.classList].some(cls => cls.includes('chatRootIcon__chatIconWrapper'))
+        ) {
+          enviveFloatingButton.show();
+          kustomerButton.hide();
+          kustomerNotification.hide();
+        }
+      }
+    }
+  });
+
+  const observer = new MutationObserver(() => {
+    const iframe = document.getElementById('kustomer-ui-sdk-iframe') as HTMLIFrameElement;
+    const button = iframe.contentWindow?.document.querySelector('div[role="button"]');
+    const notification = iframe.contentWindow?.document.querySelector(
+      'div[class^="unread__unread"]',
+    );
+
+    if (button && suppressMerchantButton) {
+      button.setAttribute('style', 'display: none;');
+    }
+    if (notification && suppressMerchantButton) {
+      notification.setAttribute('style', 'display: none;');
+    }
+  });
+
+  const kustomerIframe = document.getElementById('kustomer-ui-sdk-iframe') as HTMLIFrameElement;
+  if (kustomerIframe?.contentWindow?.document) {
+    observer.observe(kustomerIframe.contentWindow?.document, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  const removeUnifiedCXButton = () => {
+    kustomerButton.show();
+    kustomerNotification.show();
+
+    // Ensure that we are displaying the buttons when we are removing the unified CX button
+    const iframe = document.getElementById('kustomer-ui-sdk-iframe') as HTMLIFrameElement;
+    const button = iframe.contentWindow?.document.querySelector('div[role="button"]');
+    const notification = iframe.contentWindow?.document.querySelector(
+      'div[class^="unread__unread"]',
+    );
+
+    if (button) {
+      button.setAttribute('style', 'display: block;');
+    }
+    if (notification) {
+      notification.setAttribute('style', 'display: block;');
+    }
+  };
+
+  return {
+    toggle,
+    removeUnifiedCXButton,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/implementations/useReDoUnifiedCXButton.ts

@@ -0,0 +1,80 @@
+import { useRef } from 'react';
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+
+const TIMEOUT = 700;
+const REDO_CHAT_CONTAINER_SELECTOR = 'redo-chat-widget';
+const REDO_CHAT_MODAL_SELECTOR = 'id|redo-chat-widget @ query|div > div';
+const REDO_BUTTON_SELECTOR = 'id|redo-chat-widget @ query|div[data-target=supp-chat-bubble]';
+
+interface UseReDoUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useReDoUnifiedCXButton = ({
+  onSwitchToAgent,
+  suppressMerchantButton,
+}: UseReDoUnifiedCXButtonProps): UnifiedCXButton => {
+  const chatContainer = useElementObserver(SelectorFactory.id(REDO_CHAT_CONTAINER_SELECTOR));
+  const chatModal = useElementObserver(SelectorFactory.chain(REDO_CHAT_MODAL_SELECTOR));
+  const chatButton = useElementObserver(SelectorFactory.chain(REDO_BUTTON_SELECTOR));
+  const applyCSSTimeout = useRef<NodeJS.Timeout>(undefined);
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+
+  const toggle = () => {
+    onSwitchToAgent();
+    chatButton.show();
+    chatButton.fire('click');
+
+    if (suppressMerchantButton) {
+      enviveFloatingButton.hide();
+    }
+  };
+
+  const isReDoButtonEnabled = () => !!SelectorFactory.chain(REDO_BUTTON_SELECTOR).parse();
+
+  const isSwitchEnabled = () => isReDoButtonEnabled();
+
+  const hideReDoButtonCSS = (el?: Element | null) => {
+    const shadowRootEl = el?.shadowRoot;
+    if (!shadowRootEl) {
+      return;
+    }
+
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`
+      div[data-target=supp-chat-bubble] {
+        display: none;
+      }
+    `);
+    shadowRootEl.adoptedStyleSheets.push(sheet);
+
+    enviveFloatingButton.show();
+  };
+
+  chatButton.onAdd(() => {
+    if (suppressMerchantButton) {
+      hideReDoButtonCSS(chatContainer.targetNode);
+    }
+  });
+
+  chatContainer.onAdd(el => {
+    if (suppressMerchantButton) {
+      hideReDoButtonCSS(el);
+    }
+  });
+
+  chatModal.onChange(() => {
+    if (suppressMerchantButton) {
+      clearTimeout(applyCSSTimeout.current);
+      applyCSSTimeout.current = setTimeout(() => {
+        hideReDoButtonCSS(chatContainer.targetNode);
+      }, TIMEOUT);
+    }
+  });
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/implementations/useRichpanelUnifiedCXButton.ts

@@ -0,0 +1,83 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+
+interface UseRichpanelUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useRichpanelUnifiedCXButton = ({
+  onSwitchToAgent,
+  suppressMerchantButton,
+}: UseRichpanelUnifiedCXButtonProps): UnifiedCXButton => {
+  const chatWindow = useElementObserver(
+    SelectorFactory.chain('id|richpanel_messenger_iframe @ query|.rp-messenger-container'),
+  );
+  const chatButton = useElementObserver(SelectorFactory.query('.rp-messenger-trigger'));
+  const chatAlternativeButton = useElementObserver(
+    SelectorFactory.query('.rp-micro-app-dummy-icon'),
+  );
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+
+  const toggle = () => {
+    chatWindow.show();
+    onSwitchToAgent();
+
+    if (chatButton) {
+      chatButton.show();
+      chatButton.fire('click');
+      if (suppressMerchantButton) {
+        enviveFloatingButton.hide();
+      }
+    }
+
+    if (chatAlternativeButton) {
+      chatAlternativeButton.show();
+      chatAlternativeButton.fire('click');
+      if (suppressMerchantButton) {
+        enviveFloatingButton.hide();
+      }
+    }
+  };
+
+  const isRichpanelButtonEnabled = () => {
+    return !!chatButton || !!chatAlternativeButton;
+  };
+
+  const isSwitchEnabled = () => isRichpanelButtonEnabled();
+
+  chatButton.onAdd(() => {
+    if (suppressMerchantButton) {
+      chatButton.hide();
+      chatWindow.hide();
+    }
+    enviveFloatingButton.show();
+  });
+
+  chatAlternativeButton.onAdd(() => {
+    if (suppressMerchantButton) {
+      chatAlternativeButton.hide();
+      chatWindow.hide();
+    }
+    enviveFloatingButton.show();
+  });
+
+  chatWindow.onChange(el => {
+    if (el && suppressMerchantButton) {
+      const { classList } = el;
+      if (classList.contains('opened')) {
+        enviveFloatingButton.hide();
+        chatWindow.show();
+      } else if (classList.length === 1 && classList.contains('rp-messenger-container')) {
+        enviveFloatingButton.show();
+        chatButton.hide();
+        chatAlternativeButton.hide();
+        chatWindow.hide();
+      }
+    }
+  });
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};