@envive-ai/react-widgets-v3 0.3.13 → 0.3.15-alpha.1

package/dist/widgets/dist/packages/hooks/dist/contexts/types.d.cts

@@ -0,0 +1,61 @@
+//#region ../widgets/dist/packages/hooks/dist/contexts/types.d.ts
+
+type ProductCardVariant = 'filled' | 'bordered' | 'minimal' | 'transparentBordered';
+type ProductCardHoverVariant = 'backgroundDark' | 'none';
+type ProductCardLayoutVariant = 'normal' | 'tall' | 'square';
+interface ProductCardConfig {
+  variant: ProductCardVariant;
+  hoverVariant: ProductCardHoverVariant;
+  layoutVariant: ProductCardLayoutVariant;
+  pricePrefix?: string;
+}
+type SuggestionButtonVariant = 'outlined' | 'outlinedLight' | 'primary' | 'secondary' | 'tertiary' | 'dark' | 'darkAccent' | 'darkPrimary' | 'secondaryDark' | 'secondaryAccent' | 'transparent' | 'transparentDark' | 'lightDark';
+interface SuggestionButtonConfig {
+  variant?: SuggestionButtonVariant;
+  hoverVariant?: SuggestionButtonVariant;
+  answerVariant?: SuggestionButtonVariant;
+  borderRadius?: 'sm' | 'md' | 'lg';
+}
+type SearchZeroStateVariant = 'backgroundTertiary' | 'backgroundDark' | 'backgroundPrimary';
+type SearchZeroStateLayout = 'input' | 'icon';
+type SearchInputVariant = 'standard';
+type SearchIconVariant = 'thin' | 'bold';
+declare enum WidgetType {
+  ChatPreview = "ChatPreview",
+  SocialProofV2 = "SocialProofV2",
+  ChatPreviewV2 = "ChatPreviewV2",
+  ChatPreviewIsLoading = "ChatPreviewIsLoading",
+  ChatPreviewPostInteraction = "ChatPreviewPostInteraction",
+  ChatPreviewProductComparison = "ChatPreviewProductComparison",
+  SuggestionBar = "SuggestionBar",
+  SuggestionBarV2 = "SuggestionBarV2",
+  ImagePromptCard = "ImagePromptCard",
+  ImageBanner = "ImageBanner",
+  SingleImagePrompt = "SingleImagePrompt",
+  SearchPrompt = "SearchPrompt",
+  SearchZeroStateEntryPoint = "SearchZeroStateEntryPoint",
+  SearchResultsEntryPoint = "SearchResultsEntryPoint",
+  SearchOverlayHost = "SearchOverlayHost",
+  NoOp = "NoOp",
+}
+interface BaseWidgetConfig<T extends WidgetType> {
+  widgetConfigId: string;
+  type: T;
+  contentId?: string;
+}
+interface SearchEntryPointWidgetConfig extends BaseWidgetConfig<WidgetType.SearchZeroStateEntryPoint> {
+  searchZeroStateVariant: SearchZeroStateVariant;
+  searchInputVariant: SearchInputVariant;
+  searchIconVariant?: SearchIconVariant;
+  searchIconSize?: number;
+  suggestionButtonConfig: SuggestionButtonConfig;
+  layout: SearchZeroStateLayout;
+  searchBoxPlaceholder: string;
+  animationSpeed?: 'standard' | 'slow' | 'none';
+  compactLabel?: string;
+  initialSuggestions?: string[];
+  usingPortal?: boolean;
+  includeSubtitle?: boolean;
+}
+//#endregion
+export { type ProductCardConfig, type SearchEntryPointWidgetConfig, SearchInputVariant, type SuggestionButtonVariant };

package/dist/widgets/dist/packages/hooks/dist/hooks/Search/useSearch.d.cts

@@ -0,0 +1,60 @@
+import { SearchResponseProductAttributes } from "../../application/models/api/response.cjs";
+import { ProductCardConfig } from "../../contexts/types.cjs";
+import { SearchResult } from "../../application/models/api/search.cjs";
+import { SelectedFilterOption } from "../../atoms/search/searchAPI.cjs";
+import { SearchFilterDatum, SelectFilterItem } from "../../types/search-filter-types.cjs";
+import { SearchResultsState } from "../utils.cjs";
+import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
+
+//#region ../widgets/dist/packages/hooks/dist/hooks/Search/useSearch.d.ts
+
+//#region ../hooks/dist/hooks/Search/useSearch.d.ts
+//#region src/hooks/Search/useSearch.d.ts
+interface SearchResultsHocProps {
+  searchData: SearchResult | null;
+  searchResponseId: string;
+  merchantShortName: string;
+  productCardConfig: ProductCardConfig;
+  productList: SearchResponseProduct[];
+  autocompleteResults: string[];
+  searchFilters: SearchFilterDatum[];
+  availableDynamicFilters: {
+    name: string;
+    displayName: string;
+  }[];
+  selectedFilterOptions: SelectedFilterOption[];
+  recommendedProducts: SearchResponseProductAttributes['attributes'][];
+  recommendedProductsHeading: string;
+  searchOverlayHeading: string;
+  searchText: string;
+  query: string;
+  searchResultsState: SearchResultsState;
+  isLoadingSearch: boolean;
+  isFilterOpen: boolean;
+  shouldShowAutocomplete: boolean;
+  focusedIndex: number;
+  focusedOptionId: string | undefined;
+  filterButtonText: string;
+  onSearchInputChange: (value: string) => void;
+  onSubmitSearch: () => void;
+  onAutocompleteSelect: (suggestion: string) => void;
+  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onSearchInputFocus: () => void;
+  onSearchInputBlur: () => void;
+  onToggleDynamicFilter: ({
+    filter,
+    dynamicFilterDisplayName
+  }: {
+    filter: string;
+    dynamicFilterDisplayName: string;
+  }) => void;
+  onSelectFilterItem: SelectFilterItem;
+  onRemoveFilter: (filter: SelectedFilterOption) => void;
+  onClearAllFilters: () => void;
+  setIsFilterOpen: (isFilterOpen: boolean) => void;
+  resetSearch: () => void;
+  searchResultsRef: React.RefObject<HTMLDivElement>;
+}
+//#endregion
+//#endregion
+export { SearchResultsHocProps };

package/dist/widgets/dist/packages/hooks/dist/hooks/utils.d.cts

@@ -0,0 +1,12 @@
+//#region ../widgets/dist/packages/hooks/dist/hooks/utils.d.ts
+
+//#region ../hooks/dist/hooks/utils.d.ts
+
+declare enum SearchResultsState {
+  Loading = 0,
+  Results = 1,
+  NoResults = 2,
+}
+//#endregion
+//#endregion
+export { SearchResultsState };

package/dist/widgets/dist/packages/hooks/dist/types/search-filter-types.d.cts

@@ -0,0 +1,28 @@
+//#region ../widgets/dist/packages/hooks/dist/types/search-filter-types.d.ts
+//#region ../hooks/dist/types/search-filter-types.d.ts
+
+type SelectFilterItem = ({
+  filterId,
+  filterItemId,
+  isSelected,
+  displayName
+}: {
+  filterId: string;
+  filterItemId: string;
+  isSelected: boolean;
+  displayName: string;
+}) => void;
+type SearchFilterDatum = {
+  filterId: string;
+  displayName: string;
+  items: SearchFilterItemDatum[];
+};
+type SearchFilterItemDatum = {
+  filterItemId: string;
+  displayName: string;
+  productCount: number;
+  isSelected: boolean;
+};
+//#endregion
+//#endregion
+export { SearchFilterDatum, SelectFilterItem };

package/dist/widgets/dist/packages/hooks/dist/types/test-types.d.cts

@@ -0,0 +1,10 @@
+//#region ../widgets/dist/packages/hooks/dist/types/test-types.d.ts
+//#region ../hooks/dist/types/test-types.d.ts
+//#region src/types/test-types.d.ts
+interface TestProps {
+  dataTestId?: string;
+}
+//#endregion
+//#endregion
+//#endregion
+export { TestProps };

package/dist/widgets/hooks/useGetWidgetStatus.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_functions = require('../utils/functions.cjs');
 let react = require("react");
-let jotai = require("jotai");
 let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
+let jotai = require("jotai");
 let __envive_ai_react_hooks_atoms_chat_chatState = require("@envive-ai/react-hooks/atoms/chat/chatState");
 
 //#region src/widgets/hooks/useGetWidgetStatus.tsx

package/dist/widgets/hooks/useGetWidgetStatus.js

@@ -1,7 +1,7 @@
 import { isLoading, isProductComparison, userHasInteracted, userHasNotInteracted } from "../utils/functions.js";
 import { useMemo } from "react";
-import { useAtomValue } from "jotai";
 import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
+import { useAtomValue } from "jotai";
 import { responseStreamingAtom } from "@envive-ai/react-hooks/atoms/chat/chatState";
 
 //#region src/widgets/hooks/useGetWidgetStatus.tsx

package/dist/widgets/utils/functions.cjs

@@ -4,19 +4,6 @@ let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks
 let __envive_ai_react_hooks_atoms_atomStore = require("@envive-ai/react-hooks/atoms/atomStore");
 
 //#region src/widgets/utils/functions.ts
-const getProductImageUrl = (lastAssistantMessage) => {
-	const productImageUrls = lastAssistantMessage != null ? lastAssistantMessage.reduce((acc, msg) => {
-		if (msg.type === __envive_ai_react_hooks_application_models.MessageType.Product && msg.metadata) {
-			if (msg.metadata.imageUrls?.length) return [...acc, ...msg.metadata.imageUrls];
-			if (msg.metadata.imageUrl) return [...acc, msg.metadata.imageUrl];
-		}
-		return acc;
-	}, []) : [];
-	return (() => {
-		const productImageUrlIndex = 1;
-		return productImageUrls.length > 0 && productImageUrlIndex > productImageUrls.length - 1 ? productImageUrls[productImageUrls.length - 1] : productImageUrls[productImageUrlIndex];
-	})();
-};
 const getRecentProductImageUrls = (lastMessages, currentProductId) => {
 	const productMessages = lastMessages.filter((message) => message.type === __envive_ai_react_hooks_application_models.MessageType.Product && message.metadata?.imageUrl).map((m) => m);
 	return [...productMessages.filter((m) => m.metadata?.id === currentProductId), ...productMessages.filter((m) => m.metadata?.id !== currentProductId)].map((m) => m.metadata.imageUrl);
@@ -44,11 +31,19 @@ const isProductComparison = (lastMsg) => {
 	if (lastMsg) return lastMsg?.filter((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Product).length === 2;
 	return (0, __envive_ai_react_hooks_atoms_atomStore.getAtomStore)().get(__envive_ai_react_hooks_atoms_chat.lastAssistantMessageAtom)?.filter((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Product).length === 2;
 };
+/** Finds the string_id (id) from raw widget text values for the given display text */
+const getStringIdForText = (rawValues, text) => {
+	if (!rawValues) return void 0;
+	for (const raw of Object.values(rawValues)) {
+		const found = (Array.isArray(raw) ? raw : [raw]).find((s) => s.value === text);
+		if (found) return found.id;
+	}
+};
 
 //#endregion
 exports.getMessageText = getMessageText;
-exports.getProductImageUrl = getProductImageUrl;
 exports.getRecentProductImageUrls = getRecentProductImageUrls;
+exports.getStringIdForText = getStringIdForText;
 exports.isLoading = isLoading;
 exports.isProductComparison = isProductComparison;
 exports.userHasInteracted = userHasInteracted;

package/dist/widgets/utils/functions.js

@@ -3,19 +3,6 @@ import { MessageRole, MessageType } from "@envive-ai/react-hooks/application/mod
 import { getAtomStore } from "@envive-ai/react-hooks/atoms/atomStore";
 
 //#region src/widgets/utils/functions.ts
-const getProductImageUrl = (lastAssistantMessage) => {
-	const productImageUrls = lastAssistantMessage != null ? lastAssistantMessage.reduce((acc, msg) => {
-		if (msg.type === MessageType.Product && msg.metadata) {
-			if (msg.metadata.imageUrls?.length) return [...acc, ...msg.metadata.imageUrls];
-			if (msg.metadata.imageUrl) return [...acc, msg.metadata.imageUrl];
-		}
-		return acc;
-	}, []) : [];
-	return (() => {
-		const productImageUrlIndex = 1;
-		return productImageUrls.length > 0 && productImageUrlIndex > productImageUrls.length - 1 ? productImageUrls[productImageUrls.length - 1] : productImageUrls[productImageUrlIndex];
-	})();
-};
 const getRecentProductImageUrls = (lastMessages, currentProductId) => {
 	const productMessages = lastMessages.filter((message) => message.type === MessageType.Product && message.metadata?.imageUrl).map((m) => m);
 	return [...productMessages.filter((m) => m.metadata?.id === currentProductId), ...productMessages.filter((m) => m.metadata?.id !== currentProductId)].map((m) => m.metadata.imageUrl);
@@ -43,6 +30,14 @@ const isProductComparison = (lastMsg) => {
 	if (lastMsg) return lastMsg?.filter((msg) => msg.type === MessageType.Product).length === 2;
 	return getAtomStore().get(lastAssistantMessageAtom)?.filter((msg) => msg.type === MessageType.Product).length === 2;
 };
+/** Finds the string_id (id) from raw widget text values for the given display text */
+const getStringIdForText = (rawValues, text) => {
+	if (!rawValues) return void 0;
+	for (const raw of Object.values(rawValues)) {
+		const found = (Array.isArray(raw) ? raw : [raw]).find((s) => s.value === text);
+		if (found) return found.id;
+	}
+};
 
 //#endregion
-export { getMessageText, getProductImageUrl, getRecentProductImageUrls, isLoading, isProductComparison, userHasInteracted, userHasNotInteracted };
+export { getMessageText, getRecentProductImageUrls, getStringIdForText, isLoading, isProductComparison, userHasInteracted, userHasNotInteracted };

package/dist/widgets-v2/SearchZeroState/index.d.cts

@@ -1,4 +1,5 @@
-import { SearchEntryPointWidgetConfig, SearchInputVariant, SearchZeroStateProps } from "../../widgets/dist/SearchZeroState/types.cjs";
+import { SearchEntryPointWidgetConfig, SearchInputVariant } from "../../widgets/dist/packages/hooks/dist/contexts/types.cjs";
+import { SearchZeroStateProps } from "../../widgets/dist/SearchZeroState/types.cjs";
 import { SearchZeroState } from "../../widgets/dist/SearchZeroState/SearchZeroState.cjs";
 import { SearchZeroStateWidget } from "../../widgets/dist/SearchZeroState/SearchZeroStateWidget.cjs";
 export { SearchEntryPointWidgetConfig, SearchInputVariant, SearchZeroState, SearchZeroStateProps, SearchZeroStateWidget };

package/dist/widgets-v2/SearchZeroState/index.d.ts

@@ -1,4 +1,5 @@
-import { SearchEntryPointWidgetConfig, SearchInputVariant, SearchZeroStateProps } from "../../packages/widgets/dist/SearchZeroState/types.js";
+import { SearchEntryPointWidgetConfig, SearchInputVariant } from "../../packages/widgets/dist/packages/hooks/dist/contexts/types.js";
+import { SearchZeroStateProps } from "../../packages/widgets/dist/SearchZeroState/types.js";
 import { SearchZeroState } from "../../packages/widgets/dist/SearchZeroState/SearchZeroState.js";
 import { SearchZeroStateWidget } from "../../packages/widgets/dist/SearchZeroState/SearchZeroStateWidget.js";
 import "../../packages/widgets/dist/SearchZeroState/index.js";

package/dist/widgets-v2/SuggestionButtonContainer/index.d.ts

@@ -1,3 +1,4 @@
 import { SuggestionButtonContainerProps } from "../../packages/widgets/dist/SuggestionButtonContainer/types.js";
 import { SuggestionButtonContainer } from "../../packages/widgets/dist/SuggestionButtonContainer/SuggestionButtonContainer.js";
+import "../../packages/widgets/dist/SuggestionButtonContainer/index.js";
 export { SuggestionButtonContainer, SuggestionButtonContainerProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.13",
+  "version": "0.3.15-alpha.1",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",
@@ -42,8 +42,8 @@
     "@envive-ai/react-toolkit": "*",
     "@envive-ai/react-toolkit-v3": "*",
     "@envive-ai/react-widgets": "*",
-    "react": ">=18.3.1",
-    "react-dom": ">=18.3.1"
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
     "@envive-ai/react-widgets": "*",
@@ -163,4 +163,4 @@
       "plugin:storybook/recommended"
     ]
   }
-}
+}

package/src/CXIntegration/implementations/useHelpScoutUnifiedCXButton.ts

@@ -0,0 +1,108 @@
+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 BEACON_CONTAINER_ID = 'beacon-container';
+
+interface UseHelpScoutUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useHelpScoutUnifiedCXButton = ({
+  onSwitchToAgent,
+  suppressMerchantButton,
+}: UseHelpScoutUnifiedCXButtonProps): UnifiedCXButton => {
+  const beaconContainer = useElementObserver(SelectorFactory.id(BEACON_CONTAINER_ID));
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+
+  const toggle = () => {
+    onSwitchToAgent();
+
+    // Try using the Help Scout Beacon API first
+    if (typeof (window as any).Beacon !== 'undefined') {
+      (window as any).Beacon('open');
+    } else {
+      // Fallback: Find and click the FAB button
+      const container = document.getElementById(BEACON_CONTAINER_ID);
+      const fabButton = container?.querySelector('.BeaconFabButtonFrame') as HTMLElement;
+      if (fabButton) {
+        fabButton.style.display = '';
+        fabButton.click();
+      }
+    }
+
+    if (suppressMerchantButton) {
+      enviveFloatingButton.hide();
+    }
+  };
+
+  const isHelpScoutButtonEnabled = () => {
+    // Check for the main Help Scout Beacon container
+    const beaconContainerEl = document.getElementById('beacon-container');
+    if (!beaconContainerEl) return false;
+
+    // Check for the FAB button (Floating Action Button) or the global Beacon API
+    const fabButton = beaconContainerEl.querySelector('.BeaconFabButtonFrame');
+    const hasBeaconAPI = typeof (window as any).Beacon !== 'undefined';
+
+    return !!(fabButton || hasBeaconAPI);
+  };
+
+  const isSwitchEnabled = () => isHelpScoutButtonEnabled();
+
+  // Hide Help Scout FAB button when beacon container is added
+  beaconContainer.onAdd(() => {
+    if (suppressMerchantButton) {
+      const fabButton = document
+        .getElementById(BEACON_CONTAINER_ID)
+        ?.querySelector('.BeaconFabButtonFrame') as HTMLElement;
+      if (fabButton) {
+        fabButton.style.display = 'none';
+      }
+      enviveFloatingButton.show();
+    }
+  });
+
+  // Observe the beacon container for visibility changes
+  // Help Scout Beacon adds/removes classes to show/hide the widget
+  beaconContainer.onChange(el => {
+    if (el && suppressMerchantButton) {
+      // Check if the BeaconContainer widget is open
+      const beaconWidget = el.querySelector('.BeaconContainer');
+      const fabButton = el.querySelector('.BeaconFabButtonFrame') as HTMLElement;
+
+      if (beaconWidget && fabButton) {
+        const { classList } = beaconWidget;
+
+        // When beacon is open (has enter-done class)
+        if (
+          classList.contains('BeaconContainer-enter-done') ||
+          classList.contains('BeaconContainer-enter-active')
+        ) {
+          fabButton.style.display = '';
+          enviveFloatingButton.hide();
+        }
+
+        // When beacon is closed (has exit class)
+        if (
+          classList.contains('BeaconContainer-exit') ||
+          classList.contains('BeaconContainer-exit-active')
+        ) {
+          fabButton.style.display = 'none';
+          enviveFloatingButton.show();
+        }
+      }
+    }
+  });
+
+  // Cleanup when container is removed
+  beaconContainer.onRemove(() => {
+    if (suppressMerchantButton) {
+      enviveFloatingButton.show();
+    }
+  });
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/implementations/useTalkdeskUnifiedCXButton.ts

@@ -0,0 +1,94 @@
+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 UseTalkdeskUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useTalkdeskUnifiedCXButton = ({
+  onSwitchToAgent,
+  suppressMerchantButton,
+}: UseTalkdeskUnifiedCXButtonProps): UnifiedCXButton => {
+  const talkdeskButton = useElementObserver(SelectorFactory.id('talkdesk-chat-widget-trigger'));
+  const talkdeskWidget = useElementObserver(SelectorFactory.id('talkdesk-chat-widget'));
+  const talkdeskContainer = useElementObserver(SelectorFactory.id('tdWebchat'));
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+
+  const toggle = () => {
+    onSwitchToAgent();
+    if (suppressMerchantButton) {
+      enviveFloatingButton.hide();
+    }
+    talkdeskButton.show();
+    talkdeskButton.fire('click');
+  };
+
+  const isTalkdeskButtonEnabled = () => {
+    // Check for the main Talkdesk container
+    const talkdeskMainContainer = document.getElementById('tdWebchat');
+    if (!talkdeskMainContainer) return false;
+
+    // Check for the trigger button (it's directly in the DOM, not inside an iframe)
+    const talkdeskTriggerButton = document.getElementById('talkdesk-chat-widget-trigger');
+    return !!talkdeskTriggerButton;
+  };
+
+  const isSwitchEnabled = () => isTalkdeskButtonEnabled();
+
+  // Hide Talkdesk button when it's added to DOM (if suppressMerchantButton is enabled)
+  talkdeskButton.onAdd(() => {
+    if (suppressMerchantButton) {
+      talkdeskButton.hide();
+      enviveFloatingButton.show();
+    }
+  });
+
+  // Observe the widget container (NOT the button) to avoid infinite loops
+  talkdeskWidget.onAdd(el => {
+    if (el && suppressMerchantButton) {
+      const ariaHidden = el.getAttribute('aria-hidden');
+
+      // Widget is open initially (aria-hidden="false")
+      if (ariaHidden === 'false') {
+        talkdeskButton.show();
+        enviveFloatingButton.hide();
+      } else {
+        // Widget is closed initially
+        talkdeskButton.hide();
+        enviveFloatingButton.show();
+      }
+    }
+  });
+
+  // Track widget visibility changes
+  talkdeskWidget.onChange(el => {
+    if (el && suppressMerchantButton) {
+      const ariaHidden = el.getAttribute('aria-hidden');
+
+      // Widget is open (aria-hidden="false")
+      if (ariaHidden === 'false') {
+        talkdeskButton.show();
+        enviveFloatingButton.hide();
+      }
+
+      // Widget is closed (aria-hidden="true")
+      if (ariaHidden === 'true') {
+        talkdeskButton.hide();
+        enviveFloatingButton.show();
+      }
+    }
+  });
+
+  // Cleanup when container is removed
+  talkdeskContainer.onRemove(() => {
+    if (suppressMerchantButton) {
+      talkdeskButton.hide();
+      enviveFloatingButton.show();
+    }
+  });
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/types.ts

@@ -9,6 +9,8 @@ export enum CustomerServiceType {
   gladly = 'gladly',
   richpanel = 'richpanel',
   zendesk = 'zendesk',
+  helpscout = 'helpscout',
+  talkdesk = 'talkdesk',
   eightByEight = '8x8',
   unsupported = 'unsupported',
 }

package/src/CXIntegration/utils/functions.ts

@@ -10,6 +10,8 @@ import { useReDoUnifiedCXButton } from '../implementations/useReDoUnifiedCXButto
 import { useRichpanelUnifiedCXButton } from '../implementations/useRichpanelUnifiedCXButton';
 import { useZendeskUnifiedCXButton } from '../implementations/useZendeskUnifiedCXButton';
 import { useKustomerUnifiedCXButton } from '../implementations/useKustomerUnifiedCXButton';
+import { useHelpScoutUnifiedCXButton } from '../implementations/useHelpScoutUnifiedCXButton';
+import { useTalkdeskUnifiedCXButton } from '../implementations/useTalkdeskUnifiedCXButton';
 import { useEightByEightUnifiedCXButton } from '../implementations/useEightByEightUnifiedCXButton';
 import { useDefaultUnifiedCXButton } from '../implementations/useDefaultUnifiedCXButton';
 
@@ -46,6 +48,12 @@ export const findCustomerServiceImpl = (
   if (provider === CustomerServiceType.zendesk) {
     return useZendeskUnifiedCXButton;
   }
+  if (provider === CustomerServiceType.helpscout) {
+    return useHelpScoutUnifiedCXButton;
+  }
+  if (provider === CustomerServiceType.talkdesk) {
+    return useTalkdeskUnifiedCXButton;
+  }
   if (provider === CustomerServiceType.eightByEight) {
     return useEightByEightUnifiedCXButton;
   }