@envive-ai/react-widgets-v3 0.3.12 → 0.3.13

package/dist/CXIntegration/implementations/useEightByEightUnifiedCXButton.cjs

@@ -0,0 +1,54 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_constants = require('../../widgets/FloatingChatWidget/constants.cjs');
+let __envive_ai_react_hooks_application_utils = require("@envive-ai/react-hooks/application/utils");
+let __envive_ai_react_hooks_hooks_ElementObserver = require("@envive-ai/react-hooks/hooks/ElementObserver");
+
+//#region src/CXIntegration/implementations/useEightByEightUnifiedCXButton.ts
+const EIGHT_BY_EIGHT_BUBBLE_SELECTOR = "div[id^=\"__8x8-chat-button-container-script\"]";
+const EIGHT_BY_EIGHT_BUTTON_SELECTOR = `${EIGHT_BY_EIGHT_BUBBLE_SELECTOR} a[data-type="online"], ${EIGHT_BY_EIGHT_BUBBLE_SELECTOR} a[data-type="offline"]`;
+const EIGHT_BY_EIGHT_CHAT_WINDOW_SELECTOR = "div.__8x8Chat-Container";
+const useEightByEightUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton }) => {
+	const eightByEightBubble = (0, __envive_ai_react_hooks_hooks_ElementObserver.useElementObserver)(__envive_ai_react_hooks_application_utils.SelectorFactory.query(EIGHT_BY_EIGHT_BUBBLE_SELECTOR));
+	const eightByEightChatWindow = (0, __envive_ai_react_hooks_hooks_ElementObserver.useElementObserver)(__envive_ai_react_hooks_application_utils.SelectorFactory.query(EIGHT_BY_EIGHT_CHAT_WINDOW_SELECTOR));
+	const enviveFloatingButton = (0, __envive_ai_react_hooks_hooks_ElementObserver.useElementObserver)(__envive_ai_react_hooks_application_utils.SelectorFactory.id(require_constants.FLOATING_BUTTON_ID));
+	const isEightByEightEnabled = () => !!document.querySelector(EIGHT_BY_EIGHT_BUTTON_SELECTOR);
+	const toggle = () => {
+		const button = document.querySelector(EIGHT_BY_EIGHT_BUTTON_SELECTOR);
+		if (!button) return;
+		onSwitchToAgent();
+		enviveFloatingButton.hide();
+		button.click();
+	};
+	const isSwitchEnabled = () => isEightByEightEnabled();
+	eightByEightBubble.onAdd((el) => {
+		if (suppressMerchantButton && el) eightByEightBubble.hide();
+		enviveFloatingButton.show();
+	});
+	eightByEightBubble.onChange((el) => {
+		if (!el || !suppressMerchantButton) return;
+		if (window.getComputedStyle(el).getPropertyValue("display") !== "none") eightByEightBubble.hide();
+	});
+	eightByEightChatWindow.onChange((el) => {
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		if (rect.width > 50 && rect.height > 50) {
+			enviveFloatingButton.hide();
+			return;
+		}
+		onCXClose?.();
+		if (suppressMerchantButton) eightByEightBubble.hide();
+		enviveFloatingButton.show();
+	});
+	eightByEightChatWindow.onRemove(() => {
+		onCXClose?.();
+		if (suppressMerchantButton) eightByEightBubble.hide();
+		enviveFloatingButton.show();
+	});
+	return {
+		toggle,
+		isSwitchEnabled
+	};
+};
+
+//#endregion
+exports.useEightByEightUnifiedCXButton = useEightByEightUnifiedCXButton;

package/dist/CXIntegration/implementations/useEightByEightUnifiedCXButton.js

@@ -0,0 +1,53 @@
+import { FLOATING_BUTTON_ID } from "../../widgets/FloatingChatWidget/constants.js";
+import { SelectorFactory } from "@envive-ai/react-hooks/application/utils";
+import { useElementObserver } from "@envive-ai/react-hooks/hooks/ElementObserver";
+
+//#region src/CXIntegration/implementations/useEightByEightUnifiedCXButton.ts
+const EIGHT_BY_EIGHT_BUBBLE_SELECTOR = "div[id^=\"__8x8-chat-button-container-script\"]";
+const EIGHT_BY_EIGHT_BUTTON_SELECTOR = `${EIGHT_BY_EIGHT_BUBBLE_SELECTOR} a[data-type="online"], ${EIGHT_BY_EIGHT_BUBBLE_SELECTOR} a[data-type="offline"]`;
+const EIGHT_BY_EIGHT_CHAT_WINDOW_SELECTOR = "div.__8x8Chat-Container";
+const useEightByEightUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton }) => {
+	const eightByEightBubble = useElementObserver(SelectorFactory.query(EIGHT_BY_EIGHT_BUBBLE_SELECTOR));
+	const eightByEightChatWindow = useElementObserver(SelectorFactory.query(EIGHT_BY_EIGHT_CHAT_WINDOW_SELECTOR));
+	const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+	const isEightByEightEnabled = () => !!document.querySelector(EIGHT_BY_EIGHT_BUTTON_SELECTOR);
+	const toggle = () => {
+		const button = document.querySelector(EIGHT_BY_EIGHT_BUTTON_SELECTOR);
+		if (!button) return;
+		onSwitchToAgent();
+		enviveFloatingButton.hide();
+		button.click();
+	};
+	const isSwitchEnabled = () => isEightByEightEnabled();
+	eightByEightBubble.onAdd((el) => {
+		if (suppressMerchantButton && el) eightByEightBubble.hide();
+		enviveFloatingButton.show();
+	});
+	eightByEightBubble.onChange((el) => {
+		if (!el || !suppressMerchantButton) return;
+		if (window.getComputedStyle(el).getPropertyValue("display") !== "none") eightByEightBubble.hide();
+	});
+	eightByEightChatWindow.onChange((el) => {
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		if (rect.width > 50 && rect.height > 50) {
+			enviveFloatingButton.hide();
+			return;
+		}
+		onCXClose?.();
+		if (suppressMerchantButton) eightByEightBubble.hide();
+		enviveFloatingButton.show();
+	});
+	eightByEightChatWindow.onRemove(() => {
+		onCXClose?.();
+		if (suppressMerchantButton) eightByEightBubble.hide();
+		enviveFloatingButton.show();
+	});
+	return {
+		toggle,
+		isSwitchEnabled
+	};
+};
+
+//#endregion
+export { useEightByEightUnifiedCXButton };

package/dist/CXIntegration/implementations/useZendeskUnifiedCXButton.cjs

@@ -5,10 +5,10 @@ let __envive_ai_react_hooks_hooks_ElementObserver = require("@envive-ai/react-ho
 
 //#region src/CXIntegration/implementations/useZendeskUnifiedCXButton.ts
 const useZendeskUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton }) => {
-	const zendeskButton = (0, __envive_ai_react_hooks_hooks_ElementObserver.useElementObserver)(__envive_ai_react_hooks_application_utils.SelectorFactory.chain("id|launcher @ query|button"));
+	const zendeskButton = (0, __envive_ai_react_hooks_hooks_ElementObserver.useElementObserver)(__envive_ai_react_hooks_application_utils.SelectorFactory.chain("query|iframe#launcher @ query|button"));
 	const zendeskAlternativeIframe = (0, __envive_ai_react_hooks_hooks_ElementObserver.useElementObserver)(__envive_ai_react_hooks_application_utils.SelectorFactory.chain("id|webWidget"));
 	const enviveFloatingButton = (0, __envive_ai_react_hooks_hooks_ElementObserver.useElementObserver)(__envive_ai_react_hooks_application_utils.SelectorFactory.id(require_constants.FLOATING_BUTTON_ID));
-	const zendeskIframe = (0, __envive_ai_react_hooks_hooks_ElementObserver.useElementObserver)(__envive_ai_react_hooks_application_utils.SelectorFactory.id("launcher"));
+	const zendeskIframe = (0, __envive_ai_react_hooks_hooks_ElementObserver.useElementObserver)(__envive_ai_react_hooks_application_utils.SelectorFactory.query("iframe#launcher"));
 	const toggle = () => {
 		zendeskIframe.hide();
 		onSwitchToAgent();

package/dist/CXIntegration/implementations/useZendeskUnifiedCXButton.js

@@ -4,10 +4,10 @@ import { useElementObserver } from "@envive-ai/react-hooks/hooks/ElementObserver
 
 //#region src/CXIntegration/implementations/useZendeskUnifiedCXButton.ts
 const useZendeskUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton }) => {
-	const zendeskButton = useElementObserver(SelectorFactory.chain("id|launcher @ query|button"));
+	const zendeskButton = useElementObserver(SelectorFactory.chain("query|iframe#launcher @ query|button"));
 	const zendeskAlternativeIframe = useElementObserver(SelectorFactory.chain("id|webWidget"));
 	const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
-	const zendeskIframe = useElementObserver(SelectorFactory.id("launcher"));
+	const zendeskIframe = useElementObserver(SelectorFactory.query("iframe#launcher"));
 	const toggle = () => {
 		zendeskIframe.hide();
 		onSwitchToAgent();

package/dist/CXIntegration/types.cjs

@@ -11,6 +11,7 @@ let CustomerServiceType = /* @__PURE__ */ function(CustomerServiceType$1) {
 	CustomerServiceType$1["gladly"] = "gladly";
 	CustomerServiceType$1["richpanel"] = "richpanel";
 	CustomerServiceType$1["zendesk"] = "zendesk";
+	CustomerServiceType$1["eightByEight"] = "8x8";
 	CustomerServiceType$1["unsupported"] = "unsupported";
 	return CustomerServiceType$1;
 }({});

package/dist/CXIntegration/types.js

@@ -10,6 +10,7 @@ let CustomerServiceType = /* @__PURE__ */ function(CustomerServiceType$1) {
 	CustomerServiceType$1["gladly"] = "gladly";
 	CustomerServiceType$1["richpanel"] = "richpanel";
 	CustomerServiceType$1["zendesk"] = "zendesk";
+	CustomerServiceType$1["eightByEight"] = "8x8";
 	CustomerServiceType$1["unsupported"] = "unsupported";
 	return CustomerServiceType$1;
 }({});

package/dist/CXIntegration/utils/functions.cjs

@@ -9,6 +9,7 @@ const require_useReDoUnifiedCXButton = require('../implementations/useReDoUnifie
 const require_useRichpanelUnifiedCXButton = require('../implementations/useRichpanelUnifiedCXButton.cjs');
 const require_useZendeskUnifiedCXButton = require('../implementations/useZendeskUnifiedCXButton.cjs');
 const require_useKustomerUnifiedCXButton = require('../implementations/useKustomerUnifiedCXButton.cjs');
+const require_useEightByEightUnifiedCXButton = require('../implementations/useEightByEightUnifiedCXButton.cjs');
 const require_useDefaultUnifiedCXButton = require('../implementations/useDefaultUnifiedCXButton.cjs');
 
 //#region src/CXIntegration/utils/functions.ts
@@ -23,6 +24,7 @@ const findCustomerServiceImpl = (provider) => {
 	if (provider === require_types.CustomerServiceType.redo) return require_useReDoUnifiedCXButton.useReDoUnifiedCXButton;
 	if (provider === require_types.CustomerServiceType.richpanel) return require_useRichpanelUnifiedCXButton.useRichpanelUnifiedCXButton;
 	if (provider === require_types.CustomerServiceType.zendesk) return require_useZendeskUnifiedCXButton.useZendeskUnifiedCXButton;
+	if (provider === require_types.CustomerServiceType.eightByEight) return require_useEightByEightUnifiedCXButton.useEightByEightUnifiedCXButton;
 	return require_useDefaultUnifiedCXButton.useDefaultUnifiedCXButton;
 };
 

package/dist/CXIntegration/utils/functions.js

@@ -9,6 +9,7 @@ import { useReDoUnifiedCXButton } from "../implementations/useReDoUnifiedCXButto
 import { useRichpanelUnifiedCXButton } from "../implementations/useRichpanelUnifiedCXButton.js";
 import { useZendeskUnifiedCXButton } from "../implementations/useZendeskUnifiedCXButton.js";
 import { useKustomerUnifiedCXButton } from "../implementations/useKustomerUnifiedCXButton.js";
+import { useEightByEightUnifiedCXButton } from "../implementations/useEightByEightUnifiedCXButton.js";
 import { useDefaultUnifiedCXButton } from "../implementations/useDefaultUnifiedCXButton.js";
 
 //#region src/CXIntegration/utils/functions.ts
@@ -23,6 +24,7 @@ const findCustomerServiceImpl = (provider) => {
 	if (provider === CustomerServiceType.redo) return useReDoUnifiedCXButton;
 	if (provider === CustomerServiceType.richpanel) return useRichpanelUnifiedCXButton;
 	if (provider === CustomerServiceType.zendesk) return useZendeskUnifiedCXButton;
+	if (provider === CustomerServiceType.eightByEight) return useEightByEightUnifiedCXButton;
 	return useDefaultUnifiedCXButton;
 };
 

package/dist/hocs/withBaseWidget/withBaseWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.cjs";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/hocs/withBaseWidget/withBaseWidget.d.ts
 declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
-  (props: P): react_jsx_runtime14.JSX.Element;
+  (props: P): react_jsx_runtime17.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/hocs/withBaseWidget/withBaseWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.js";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/hocs/withBaseWidget/withBaseWidget.d.ts
 declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
-  (props: P): react_jsx_runtime15.JSX.Element;
+  (props: P): react_jsx_runtime11.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/packages/widgets/dist/SearchResults/SearchResultsWidget.d.ts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchResults/SearchResultsWidget.d.ts
 //#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime1.JSX.Element;
+declare const SearchResultsWidget: () => react_jsx_runtime0.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/packages/widgets/dist/SearchZeroState/SearchZeroStateWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchZeroState/SearchZeroStateWidget.d.ts
 //#region src/SearchZeroState/SearchZeroStateWidget.d.ts
@@ -11,7 +11,7 @@ declare const SearchZeroStateWidget: ({
   initialIsOpen,
   widgetConfigId,
   entryPointRef
-}: SearchZeroStateWidgetProps) => react_jsx_runtime3.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/packages/widgets/dist/SuggestionBar/SuggestionBar.d.ts

@@ -1,5 +1,5 @@
 import { SuggestionBarLocationForMetrics } from "./types.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
 import { Message } from "postcss";
 
@@ -30,7 +30,7 @@ declare function SuggestionBar({
   buttonBorderRadius,
   handleReply,
   dataTestId
-}: Readonly<SuggestionBarProps>): react_jsx_runtime2.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts
 declare const ChatPreviewComparisonWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime17.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime7.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewComparisonWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewComparisonWidgetProps {
 declare const ChatPreviewComparisonWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime17.JSX.Element;
+  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime7.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts
 declare const ChatPreviewLoadingWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime4.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime9.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewLoadingWidgetProps {
@@ -11,6 +11,6 @@ interface ChatPreviewLoadingWidgetProps {
 }
 declare const ChatPreviewLoadingWidget: ({
   widgetConfigId
-}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime4.JSX.Element;
+}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime9.JSX.Element;
 //#endregion
 export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetProps, ChatPreviewLoadingWidgetWithBaseWidget };

package/dist/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts
 declare const ChatPreviewLoadingWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime13.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime4.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewLoadingWidgetProps {
@@ -11,6 +11,6 @@ interface ChatPreviewLoadingWidgetProps {
 }
 declare const ChatPreviewLoadingWidget: ({
   widgetConfigId
-}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime13.JSX.Element;
+}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetProps, ChatPreviewLoadingWidgetWithBaseWidget };

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.d.ts
 interface FloatingChatWidgetProps {
@@ -9,7 +9,7 @@ declare const FloatingChatWidget: {
   ({
     previewButtonOnly,
     previewChatAlwaysOpen
-  }?: FloatingChatWidgetProps): react_jsx_runtime19.JSX.Element;
+  }?: FloatingChatWidgetProps): react_jsx_runtime13.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.d.ts
 interface FloatingChatWidgetProps {
@@ -9,7 +9,7 @@ declare const FloatingChatWidget: {
   ({
     previewButtonOnly,
     previewChatAlwaysOpen
-  }?: FloatingChatWidgetProps): react_jsx_runtime3.JSX.Element;
+  }?: FloatingChatWidgetProps): react_jsx_runtime14.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.d.ts
 
@@ -8,7 +8,7 @@ interface FullPageSalesAgentBaseWidgetProps {
 declare const FullPageSalesAgentWidget: {
   ({
     widgetConfigId
-  }: FullPageSalesAgentBaseWidgetProps): react_jsx_runtime9.JSX.Element;
+  }: FullPageSalesAgentBaseWidgetProps): react_jsx_runtime12.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ProductCardWidget/ProductCardWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/widgets/ProductCardWidget/ProductCardWidget.d.ts
 interface ProductCardWidgetProps {
@@ -7,7 +7,7 @@ interface ProductCardWidgetProps {
 declare const ProductCardWidget: {
   ({
     widgetConfigId
-  }: ProductCardWidgetProps): react_jsx_runtime7.JSX.Element;
+  }: ProductCardWidgetProps): react_jsx_runtime14.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ProductCardWidget/ProductCardWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/widgets/ProductCardWidget/ProductCardWidget.d.ts
 interface ProductCardWidgetProps {
@@ -7,7 +7,7 @@ interface ProductCardWidgetProps {
 declare const ProductCardWidget: {
   ({
     widgetConfigId
-  }: ProductCardWidgetProps): react_jsx_runtime7.JSX.Element;
+  }: ProductCardWidgetProps): react_jsx_runtime9.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts
 declare const PromptButtonCarouselWithImageWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime8.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime4.JSX.Element;
   displayName: string;
 };
 interface PromptButtonCarouselWithImageWidgetProps {
@@ -12,7 +12,7 @@ interface PromptButtonCarouselWithImageWidgetProps {
 declare const PromptButtonCarouselWithImageWidget: {
   ({
     widgetConfigId
-  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime8.JSX.Element;
+  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime4.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts
 declare const PromptButtonCarouselWithImageWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime11.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 interface PromptButtonCarouselWithImageWidgetProps {
@@ -12,7 +12,7 @@ interface PromptButtonCarouselWithImageWidgetProps {
 declare const PromptButtonCarouselWithImageWidget: {
   ({
     widgetConfigId
-  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime11.JSX.Element;
+  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/widgets/PromptCarouselWidget/PromptCarouselWidget.d.ts
 interface PromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface PromptCarouselWidgetProps {
 declare const PromptCarouselWidget: {
   ({
     widgetConfigId
-  }: PromptCarouselWidgetProps): react_jsx_runtime10.JSX.Element;
+  }: PromptCarouselWidgetProps): react_jsx_runtime6.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/widgets/PromptCarouselWidget/PromptCarouselWidget.d.ts
 interface PromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface PromptCarouselWidgetProps {
 declare const PromptCarouselWidget: {
   ({
     widgetConfigId
-  }: PromptCarouselWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: PromptCarouselWidgetProps): react_jsx_runtime15.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.cjs

@@ -11,21 +11,21 @@ let __envive_ai_react_toolkit_v3_ChatPreviewLoading = require("@envive-ai/react-
 //#region src/widgets/SocialProofFlowWidget/SocialProofFlowWidget.tsx
 const SocialProofFlowWidget = ({ widgetConfigId }) => {
 	const { userHasInteractedValue, userHasNotInteractedValue, isLoadingValue, isProductComparisonValue } = require_useGetWidgetStatus.default();
-	if (userHasInteractedValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewWidget.ChatPreviewWidgetWithBaseWidget, {
+	if (userHasInteractedValue && isLoadingValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewLoadingWidget.ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewV3
+		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewLoadingV3
 	});
-	if (userHasNotInteractedValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SocialProofWidget.SocialProofWidgetWithBaseWidget, {
+	if (userHasInteractedValue && isProductComparisonValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewComparisonWidget.ChatPreviewComparisonWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.SocialProofV3
+		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewComparisonV3
 	});
-	if (isLoadingValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewLoadingWidget.ChatPreviewLoadingWidgetWithBaseWidget, {
+	if (userHasInteractedValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewWidget.ChatPreviewWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewLoadingV3
+		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewV3
 	});
-	if (isProductComparisonValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewComparisonWidget.ChatPreviewComparisonWidgetWithBaseWidget, {
+	if (userHasNotInteractedValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SocialProofWidget.SocialProofWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewComparisonV3
+		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.SocialProofV3
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_ChatPreviewLoading.ChatPreviewLoading, { fullIsLoading: true });
 };

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.ts
 interface SocialProofFlowWidgetProps {
@@ -7,7 +7,7 @@ interface SocialProofFlowWidgetProps {
 declare const SocialProofFlowWidget: {
   ({
     widgetConfigId
-  }: SocialProofFlowWidgetProps): react_jsx_runtime13.JSX.Element;
+  }: SocialProofFlowWidgetProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.ts
 interface SocialProofFlowWidgetProps {
@@ -7,7 +7,7 @@ interface SocialProofFlowWidgetProps {
 declare const SocialProofFlowWidget: {
   ({
     widgetConfigId
-  }: SocialProofFlowWidgetProps): react_jsx_runtime4.JSX.Element;
+  }: SocialProofFlowWidgetProps): react_jsx_runtime6.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.js

@@ -10,21 +10,21 @@ import { ChatPreviewLoading } from "@envive-ai/react-toolkit-v3/ChatPreviewLoadi
 //#region src/widgets/SocialProofFlowWidget/SocialProofFlowWidget.tsx
 const SocialProofFlowWidget = ({ widgetConfigId }) => {
 	const { userHasInteractedValue, userHasNotInteractedValue, isLoadingValue, isProductComparisonValue } = useGetWidgetStatus_default();
-	if (userHasInteractedValue) return /* @__PURE__ */ jsx(ChatPreviewWidgetWithBaseWidget, {
+	if (userHasInteractedValue && isLoadingValue) return /* @__PURE__ */ jsx(ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: WidgetTypeV3.ChatPreviewV3
+		widgetType: WidgetTypeV3.ChatPreviewLoadingV3
 	});
-	if (userHasNotInteractedValue) return /* @__PURE__ */ jsx(SocialProofWidgetWithBaseWidget, {
+	if (userHasInteractedValue && isProductComparisonValue) return /* @__PURE__ */ jsx(ChatPreviewComparisonWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: WidgetTypeV3.SocialProofV3
+		widgetType: WidgetTypeV3.ChatPreviewComparisonV3
 	});
-	if (isLoadingValue) return /* @__PURE__ */ jsx(ChatPreviewLoadingWidgetWithBaseWidget, {
+	if (userHasInteractedValue) return /* @__PURE__ */ jsx(ChatPreviewWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: WidgetTypeV3.ChatPreviewLoadingV3
+		widgetType: WidgetTypeV3.ChatPreviewV3
 	});
-	if (isProductComparisonValue) return /* @__PURE__ */ jsx(ChatPreviewComparisonWidgetWithBaseWidget, {
+	if (userHasNotInteractedValue) return /* @__PURE__ */ jsx(SocialProofWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: WidgetTypeV3.ChatPreviewComparisonV3
+		widgetType: WidgetTypeV3.SocialProofV3
 	});
 	return /* @__PURE__ */ jsx(ChatPreviewLoading, { fullIsLoading: true });
 };

package/dist/widgets/SocialProofWidget/SocialProofWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofWidget/SocialProofWidget.d.ts
 declare const SocialProofWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime1.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 interface SocialProofWidgetProps {
@@ -12,7 +12,7 @@ interface SocialProofWidgetProps {
 declare const SocialProofWidget: {
   ({
     widgetConfigId
-  }: SocialProofWidgetProps): react_jsx_runtime1.JSX.Element;
+  }: SocialProofWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts
 interface TitledPromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface TitledPromptCarouselWidgetProps {
 declare const TitledPromptCarouselWidget: {
   ({
     widgetConfigId
-  }: TitledPromptCarouselWidgetProps): react_jsx_runtime6.JSX.Element;
+  }: TitledPromptCarouselWidgetProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts
 interface TitledPromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface TitledPromptCarouselWidgetProps {
 declare const TitledPromptCarouselWidget: {
   ({
     widgetConfigId
-  }: TitledPromptCarouselWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: TitledPromptCarouselWidgetProps): react_jsx_runtime1.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.cjs

@@ -11,21 +11,21 @@ let __envive_ai_react_toolkit_v3_ChatPreviewLoading = require("@envive-ai/react-
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.tsx
 const TypingAnimationFlowWidget = ({ widgetConfigId }) => {
 	const { userHasInteractedValue, userHasNotInteractedValue, isLoadingValue, isProductComparisonValue } = require_useGetWidgetStatus.default();
-	if (userHasInteractedValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewWidget.ChatPreviewWidgetWithBaseWidget, {
+	if (userHasInteractedValue && isLoadingValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewLoadingWidget.ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewV3
+		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewLoadingV3
 	});
-	if (userHasNotInteractedValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TypingAnimationWidget.TypingAnimationWithBaseWidget, {
+	if (userHasInteractedValue && isProductComparisonValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewComparisonWidget.ChatPreviewComparisonWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.TypingAnimationV3
+		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewComparisonV3
 	});
-	if (isLoadingValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewLoadingWidget.ChatPreviewLoadingWidgetWithBaseWidget, {
+	if (userHasInteractedValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewWidget.ChatPreviewWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewLoadingV3
+		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewV3
 	});
-	if (isProductComparisonValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChatPreviewComparisonWidget.ChatPreviewComparisonWidgetWithBaseWidget, {
+	if (userHasNotInteractedValue) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TypingAnimationWidget.TypingAnimationWithBaseWidget, {
 		widgetConfigId,
-		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ChatPreviewComparisonV3
+		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.TypingAnimationV3
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_ChatPreviewLoading.ChatPreviewLoading, { fullIsLoading: true });
 };

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts
 interface TypingAnimationFlowWidgetProps {
@@ -7,7 +7,7 @@ interface TypingAnimationFlowWidgetProps {
 declare const TypingAnimationFlowWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationFlowWidgetProps): react_jsx_runtime8.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime10.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.js

@@ -10,21 +10,21 @@ import { ChatPreviewLoading } from "@envive-ai/react-toolkit-v3/ChatPreviewLoadi
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.tsx
 const TypingAnimationFlowWidget = ({ widgetConfigId }) => {
 	const { userHasInteractedValue, userHasNotInteractedValue, isLoadingValue, isProductComparisonValue } = useGetWidgetStatus_default();
-	if (userHasInteractedValue) return /* @__PURE__ */ jsx(ChatPreviewWidgetWithBaseWidget, {
+	if (userHasInteractedValue && isLoadingValue) return /* @__PURE__ */ jsx(ChatPreviewLoadingWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: WidgetTypeV3.ChatPreviewV3
+		widgetType: WidgetTypeV3.ChatPreviewLoadingV3
 	});
-	if (userHasNotInteractedValue) return /* @__PURE__ */ jsx(TypingAnimationWithBaseWidget, {
+	if (userHasInteractedValue && isProductComparisonValue) return /* @__PURE__ */ jsx(ChatPreviewComparisonWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: WidgetTypeV3.TypingAnimationV3
+		widgetType: WidgetTypeV3.ChatPreviewComparisonV3
 	});
-	if (isLoadingValue) return /* @__PURE__ */ jsx(ChatPreviewLoadingWidgetWithBaseWidget, {
+	if (userHasInteractedValue) return /* @__PURE__ */ jsx(ChatPreviewWidgetWithBaseWidget, {
 		widgetConfigId,
-		widgetType: WidgetTypeV3.ChatPreviewLoadingV3
+		widgetType: WidgetTypeV3.ChatPreviewV3
 	});
-	if (isProductComparisonValue) return /* @__PURE__ */ jsx(ChatPreviewComparisonWidgetWithBaseWidget, {
+	if (userHasNotInteractedValue) return /* @__PURE__ */ jsx(TypingAnimationWithBaseWidget, {
 		widgetConfigId,
-		widgetType: WidgetTypeV3.ChatPreviewComparisonV3
+		widgetType: WidgetTypeV3.TypingAnimationV3
 	});
 	return /* @__PURE__ */ jsx(ChatPreviewLoading, { fullIsLoading: true });
 };

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts
 declare const TypingAnimationWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime2.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime18.JSX.Element;
   displayName: string;
 };
 interface TypingAnimationWidgetProps {
@@ -12,7 +12,7 @@ interface TypingAnimationWidgetProps {
 declare const TypingAnimationWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationWidgetProps): react_jsx_runtime2.JSX.Element;
+  }: TypingAnimationWidgetProps): react_jsx_runtime18.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts
 declare const TypingAnimationWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime5.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime7.JSX.Element;
   displayName: string;
 };
 interface TypingAnimationWidgetProps {
@@ -12,7 +12,7 @@ interface TypingAnimationWidgetProps {
 declare const TypingAnimationWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationWidgetProps): react_jsx_runtime5.JSX.Element;
+  }: TypingAnimationWidgetProps): react_jsx_runtime7.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/dist/SearchResults/SearchResultsWidget.d.cts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchResults/SearchResultsWidget.d.ts
 //#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime1.JSX.Element;
+declare const SearchResultsWidget: () => react_jsx_runtime0.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SearchZeroState/SearchZeroStateWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchZeroState/SearchZeroStateWidget.d.ts
 //#region src/SearchZeroState/SearchZeroStateWidget.d.ts
@@ -11,7 +11,7 @@ declare const SearchZeroStateWidget: ({
   initialIsOpen,
   widgetConfigId,
   entryPointRef
-}: SearchZeroStateWidgetProps) => react_jsx_runtime3.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SuggestionBar/SuggestionBar.d.cts

@@ -1,5 +1,5 @@
 import { SuggestionBarLocationForMetrics } from "./types.cjs";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
 import { Message } from "postcss";
 
@@ -30,7 +30,7 @@ declare function SuggestionBar({
   buttonBorderRadius,
   handleReply,
   dataTestId
-}: Readonly<SuggestionBarProps>): react_jsx_runtime2.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",

package/src/CXIntegration/implementations/useEightByEightUnifiedCXButton.ts

@@ -0,0 +1,91 @@
+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 UseEightByEightUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+const EIGHT_BY_EIGHT_BUBBLE_SELECTOR = 'div[id^="__8x8-chat-button-container-script"]';
+
+const EIGHT_BY_EIGHT_BUTTON_SELECTOR = `${EIGHT_BY_EIGHT_BUBBLE_SELECTOR} a[data-type="online"], ${EIGHT_BY_EIGHT_BUBBLE_SELECTOR} a[data-type="offline"]`;
+
+const EIGHT_BY_EIGHT_CHAT_WINDOW_SELECTOR = 'div.__8x8Chat-Container';
+
+export const useEightByEightUnifiedCXButton = ({
+  onSwitchToAgent,
+  onCXClose,
+  suppressMerchantButton,
+}: UseEightByEightUnifiedCXButtonProps): UnifiedCXButton => {
+  const eightByEightBubble = useElementObserver(
+    SelectorFactory.query(EIGHT_BY_EIGHT_BUBBLE_SELECTOR),
+  );
+  const eightByEightChatWindow = useElementObserver(
+    SelectorFactory.query(EIGHT_BY_EIGHT_CHAT_WINDOW_SELECTOR),
+  );
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+
+  const isEightByEightEnabled = () => !!document.querySelector(EIGHT_BY_EIGHT_BUTTON_SELECTOR);
+
+  const toggle = () => {
+    const button = document.querySelector(EIGHT_BY_EIGHT_BUTTON_SELECTOR) as HTMLElement | null;
+
+    if (!button) {
+      return;
+    }
+
+    onSwitchToAgent();
+    enviveFloatingButton.hide();
+
+    button.click();
+  };
+
+  const isSwitchEnabled = () => isEightByEightEnabled();
+
+  eightByEightBubble.onAdd(el => {
+    if (suppressMerchantButton && el) {
+      eightByEightBubble.hide();
+    }
+    enviveFloatingButton.show();
+  });
+
+  eightByEightBubble.onChange(el => {
+    if (!el || !suppressMerchantButton) return;
+
+    const styles = window.getComputedStyle(el);
+    const display = styles.getPropertyValue('display');
+    if (display !== 'none') {
+      eightByEightBubble.hide();
+    }
+  });
+
+  eightByEightChatWindow.onChange(el => {
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    const isOpen = rect.width > 50 && rect.height > 50;
+
+    if (isOpen) {
+      enviveFloatingButton.hide();
+      return;
+    }
+
+    onCXClose?.();
+    if (suppressMerchantButton) {
+      eightByEightBubble.hide();
+    }
+    enviveFloatingButton.show();
+  });
+
+  eightByEightChatWindow.onRemove(() => {
+    onCXClose?.();
+    if (suppressMerchantButton) {
+      eightByEightBubble.hide();
+    }
+    enviveFloatingButton.show();
+  });
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/implementations/useZendeskUnifiedCXButton.ts

@@ -10,10 +10,12 @@ export const useZendeskUnifiedCXButton = ({
   onCXClose,
   suppressMerchantButton,
 }: UseZendeskUnifiedCXButtonProps): UnifiedCXButton => {
-  const zendeskButton = useElementObserver(SelectorFactory.chain('id|launcher @ query|button'));
+  const zendeskButton = useElementObserver(
+    SelectorFactory.chain('query|iframe#launcher @ query|button'),
+  );
   const zendeskAlternativeIframe = useElementObserver(SelectorFactory.chain('id|webWidget'));
   const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
-  const zendeskIframe = useElementObserver(SelectorFactory.id('launcher'));
+  const zendeskIframe = useElementObserver(SelectorFactory.query('iframe#launcher'));
 
   const toggle = () => {
     zendeskIframe.hide();

package/src/CXIntegration/types.ts

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

package/src/CXIntegration/utils/functions.ts

@@ -10,6 +10,7 @@ import { useReDoUnifiedCXButton } from '../implementations/useReDoUnifiedCXButto
 import { useRichpanelUnifiedCXButton } from '../implementations/useRichpanelUnifiedCXButton';
 import { useZendeskUnifiedCXButton } from '../implementations/useZendeskUnifiedCXButton';
 import { useKustomerUnifiedCXButton } from '../implementations/useKustomerUnifiedCXButton';
+import { useEightByEightUnifiedCXButton } from '../implementations/useEightByEightUnifiedCXButton';
 import { useDefaultUnifiedCXButton } from '../implementations/useDefaultUnifiedCXButton';
 
 export const findCustomerServiceImpl = (
@@ -45,6 +46,9 @@ export const findCustomerServiceImpl = (
   if (provider === CustomerServiceType.zendesk) {
     return useZendeskUnifiedCXButton;
   }
+  if (provider === CustomerServiceType.eightByEight) {
+    return useEightByEightUnifiedCXButton;
+  }
 
   return useDefaultUnifiedCXButton;
 };

package/src/widgets/SocialProofFlowWidget/SocialProofFlowWidget.tsx

@@ -19,38 +19,38 @@ export const SocialProofFlowWidget = ({ widgetConfigId }: SocialProofFlowWidgetP
     isProductComparisonValue,
   } = useGetWidgetStatus();
 
-  if (userHasInteractedValue) {
+  if (userHasInteractedValue && isLoadingValue) {
     return (
-      <ChatPreviewWidgetWithBaseWidget
+      <ChatPreviewLoadingWidgetWithBaseWidget
         widgetConfigId={widgetConfigId}
-        widgetType={WidgetTypeV3.ChatPreviewV3}
+        widgetType={WidgetTypeV3.ChatPreviewLoadingV3}
       />
     );
   }
 
-  if (userHasNotInteractedValue) {
+  if (userHasInteractedValue && isProductComparisonValue) {
     return (
-      <SocialProofWidgetWithBaseWidget
+      <ChatPreviewComparisonWidgetWithBaseWidget
         widgetConfigId={widgetConfigId}
-        widgetType={WidgetTypeV3.SocialProofV3}
+        widgetType={WidgetTypeV3.ChatPreviewComparisonV3}
       />
     );
   }
 
-  if (isLoadingValue) {
+  if (userHasInteractedValue) {
     return (
-      <ChatPreviewLoadingWidgetWithBaseWidget
+      <ChatPreviewWidgetWithBaseWidget
         widgetConfigId={widgetConfigId}
-        widgetType={WidgetTypeV3.ChatPreviewLoadingV3}
+        widgetType={WidgetTypeV3.ChatPreviewV3}
       />
     );
   }
 
-  if (isProductComparisonValue) {
+  if (userHasNotInteractedValue) {
     return (
-      <ChatPreviewComparisonWidgetWithBaseWidget
+      <SocialProofWidgetWithBaseWidget
         widgetConfigId={widgetConfigId}
-        widgetType={WidgetTypeV3.ChatPreviewComparisonV3}
+        widgetType={WidgetTypeV3.SocialProofV3}
       />
     );
   }

package/src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.tsx

@@ -19,38 +19,38 @@ export const TypingAnimationFlowWidget = ({ widgetConfigId }: TypingAnimationFlo
     isProductComparisonValue,
   } = useGetWidgetStatus();
 
-  if (userHasInteractedValue) {
+  if (userHasInteractedValue && isLoadingValue) {
     return (
-      <ChatPreviewWidgetWithBaseWidget
+      <ChatPreviewLoadingWidgetWithBaseWidget
         widgetConfigId={widgetConfigId}
-        widgetType={WidgetTypeV3.ChatPreviewV3}
+        widgetType={WidgetTypeV3.ChatPreviewLoadingV3}
       />
     );
   }
 
-  if (userHasNotInteractedValue) {
+  if (userHasInteractedValue && isProductComparisonValue) {
     return (
-      <TypingAnimationWithBaseWidget
+      <ChatPreviewComparisonWidgetWithBaseWidget
         widgetConfigId={widgetConfigId}
-        widgetType={WidgetTypeV3.TypingAnimationV3}
+        widgetType={WidgetTypeV3.ChatPreviewComparisonV3}
       />
     );
   }
 
-  if (isLoadingValue) {
+  if (userHasInteractedValue) {
     return (
-      <ChatPreviewLoadingWidgetWithBaseWidget
+      <ChatPreviewWidgetWithBaseWidget
         widgetConfigId={widgetConfigId}
-        widgetType={WidgetTypeV3.ChatPreviewLoadingV3}
+        widgetType={WidgetTypeV3.ChatPreviewV3}
       />
     );
   }
 
-  if (isProductComparisonValue) {
+  if (userHasNotInteractedValue) {
     return (
-      <ChatPreviewComparisonWidgetWithBaseWidget
+      <TypingAnimationWithBaseWidget
         widgetConfigId={widgetConfigId}
-        widgetType={WidgetTypeV3.ChatPreviewComparisonV3}
+        widgetType={WidgetTypeV3.TypingAnimationV3}
       />
     );
   }