@envive-ai/react-widgets-v3 0.3.24 → 0.3.26

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.cjs

@@ -2,18 +2,17 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
 require('../../hocs/withBaseWidget/index.cjs');
 const require_functions = require('../utils/functions.cjs');
+let react = require("react");
+let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
+let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
 let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
-let jotai = require("jotai");
+let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
 let __envive_ai_react_hooks_contexts_featureFlagServiceContext = require("@envive-ai/react-hooks/contexts/featureFlagServiceContext");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
-let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
 let __envive_ai_react_hooks_hooks_WidgetInteraction = require("@envive-ai/react-hooks/hooks/WidgetInteraction");
 let __envive_ai_react_hooks_hooks_WidgetInteraction_types = require("@envive-ai/react-hooks/hooks/WidgetInteraction/types");
 let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_atoms_chat_chatState = require("@envive-ai/react-hooks/atoms/chat/chatState");
 let __envive_ai_react_toolkit_v3_PromptButton_types = require("@envive-ai/react-toolkit-v3/PromptButton/types");
 let __envive_ai_react_toolkit_v3_TypingAnimation = require("@envive-ai/react-toolkit-v3/TypingAnimation");
 let __envive_ai_react_toolkit_v3_WidgetWrapper = require("@envive-ai/react-toolkit-v3/WidgetWrapper");
@@ -31,7 +30,7 @@ const mockAnimatedTextSequence = ["..."];
 const mockHintText = "Ask me anything";
 const TypingAnimationWidgetHandler = (props) => {
 	const { onTypedMessageSubmitted } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
-	const onToggle = (0, jotai.useSetAtom)(__envive_ai_react_hooks_atoms_chat_chatState.chatOnToggleAtom);
+	const { openChat } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
 	const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 	const titleLabel = hardcopyContent?.values?.titleLabel || "";
 	const headlineText = hardcopyContent?.values?.headlineText || "";
@@ -74,16 +73,16 @@ const TypingAnimationWidgetHandler = (props) => {
 			userTyped: false,
 			displayLocation: __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION
 		});
-		onToggle(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION);
+		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION);
 		onPromptClicked(text);
 	}, [
 		hardcopyContent,
 		trackEvent,
 		onTypedMessageSubmitted,
-		onToggle
+		openChat
 	]);
 	const handleTextFieldClick = (0, react.useCallback)(() => {
-		onToggle(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION);
+		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.TYPING_ANIMATION);
 		trackWidgetInteraction({
 			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
 			trigger: {
@@ -91,7 +90,7 @@ const TypingAnimationWidgetHandler = (props) => {
 				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.QUERY_INPUT_CLICKED
 			}
 		});
-	}, [onToggle]);
+	}, [openChat]);
 	const handleTranscriptionStarted = (0, react.useCallback)(() => {
 		trackWidgetInteraction({
 			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,

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

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

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.js

@@ -1,18 +1,17 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import "../../hocs/withBaseWidget/index.js";
 import { getStringIdForText } from "../utils/functions.js";
+import { useCallback } from "react";
+import { EnviveMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { jsx } from "react/jsx-runtime";
 import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
-import { useSetAtom } from "jotai";
+import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
 import { useFeatureFlagService } from "@envive-ai/react-hooks/contexts/featureFlagServiceContext";
 import { ChatElementDisplayLocationV3, FeatureGates } from "@envive-ai/react-hooks/application/models";
-import { EnviveMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
 import { WidgetInteractionComponent, WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
 import { PromptCarouselRows, usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
-import { useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-import { chatOnToggleAtom } from "@envive-ai/react-hooks/atoms/chat/chatState";
 import { PromptButtonVariant } from "@envive-ai/react-toolkit-v3/PromptButton/types";
 import { TypingAnimation } from "@envive-ai/react-toolkit-v3/TypingAnimation";
 import { WidgetWrapperVariant } from "@envive-ai/react-toolkit-v3/WidgetWrapper";
@@ -30,7 +29,7 @@ const mockAnimatedTextSequence = ["..."];
 const mockHintText = "Ask me anything";
 const TypingAnimationWidgetHandler = (props) => {
 	const { onTypedMessageSubmitted } = useSalesAgent();
-	const onToggle = useSetAtom(chatOnToggleAtom);
+	const { openChat } = useChatToggle();
 	const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 	const titleLabel = hardcopyContent?.values?.titleLabel || "";
 	const headlineText = hardcopyContent?.values?.headlineText || "";
@@ -73,16 +72,16 @@ const TypingAnimationWidgetHandler = (props) => {
 			userTyped: false,
 			displayLocation: ChatElementDisplayLocationV3.TYPING_ANIMATION
 		});
-		onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
+		openChat(ChatElementDisplayLocationV3.TYPING_ANIMATION);
 		onPromptClicked(text);
 	}, [
 		hardcopyContent,
 		trackEvent,
 		onTypedMessageSubmitted,
-		onToggle
+		openChat
 	]);
 	const handleTextFieldClick = useCallback(() => {
-		onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
+		openChat(ChatElementDisplayLocationV3.TYPING_ANIMATION);
 		trackWidgetInteraction({
 			eventName: EnviveMetricsEventName.WidgetInteraction,
 			trigger: {
@@ -90,7 +89,7 @@ const TypingAnimationWidgetHandler = (props) => {
 				widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED
 			}
 		});
-	}, [onToggle]);
+	}, [openChat]);
 	const handleTranscriptionStarted = useCallback(() => {
 		trackWidgetInteraction({
 			eventName: EnviveMetricsEventName.WidgetInteraction,

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

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchResults/SearchResultsWidget.d.ts
 //#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime2.JSX.Element;
+declare const SearchResultsWidget: () => react_jsx_runtime1.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_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime2 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_runtime0.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

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 __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let jotai = require("jotai");
-let react = require("react");
 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 { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { useAtomValue } from "jotai";
-import { useMemo } from "react";
 import { responseStreamingAtom } from "@envive-ai/react-hooks/atoms/chat/chatState";
 
 //#region src/widgets/hooks/useGetWidgetStatus.tsx

package/package.json

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

package/src/CXIntegration/implementations/useTidioUnifiedCXButton.ts

@@ -3,6 +3,9 @@ import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver
 import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
 import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
 
+const CHAT_BUTTON_ID = 'tidio-chat';
+const CHAT_BUTTON_SELECTOR = 'id|tidio-chat @ id|button';
+
 declare global {
   interface Window {
     tidioChatApi?: {
@@ -16,21 +19,40 @@ interface UseTidioUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useTidioUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
+  suppressMerchantButton,
 }: UseTidioUnifiedCXButtonProps): UnifiedCXButton => {
-  const tidioButton = window.tidioChatApi;
+  const tidioApi = window.tidioChatApi;
   const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+  const tidioChatButton = useElementObserver(SelectorFactory.chain(CHAT_BUTTON_SELECTOR));
+  const tidioFrame = useElementObserver(SelectorFactory.id(CHAT_BUTTON_ID));
+
+  const chatButtonControl = (el: HTMLElement | null) => {
+    if (el) {
+      if (el.className.includes('chat-closed')) {
+        onCXClose?.();
+        if (suppressMerchantButton) {
+          tidioFrame.hide();
+        }
+        enviveFloatingButton.show();
+      }
+      if (el.className.includes('chat-open')) {
+        tidioFrame.show();
+        enviveFloatingButton.show();
+      }
+    }
+  };
+  tidioChatButton.onAdd(chatButtonControl);
+  tidioChatButton.onChange(chatButtonControl);
 
   const toggle = () => {
     onSwitchToAgent();
     enviveFloatingButton.hide();
-    if (tidioButton) {
-      tidioButton.open();
-    }
+    tidioFrame.show();
+    tidioApi?.open();
   };
 
-  const isTidioButtonEnabled = () => !!document.getElementById('tidio-chat-iframe');
-
-  const isSwitchEnabled = () => isTidioButtonEnabled();
+  const isSwitchEnabled = () => !!SelectorFactory.chain(CHAT_BUTTON_SELECTOR).parse();
 
   return {
     toggle,

package/src/widgets/TypingAnimationWidget/TypingAnimationWidget.tsx

@@ -2,7 +2,6 @@ import {
   ChatElementDisplayLocationV3,
   FeatureGates,
 } from '@envive-ai/react-hooks/application/models';
-import { chatOnToggleAtom } from '@envive-ai/react-hooks/atoms/chat/chatState';
 import {
   EnviveMetricsEventName,
   useAmplitude,
@@ -25,7 +24,7 @@ import {
 } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { TypingAnimation } from '@envive-ai/react-toolkit-v3/TypingAnimation';
 import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
-import { useSetAtom } from 'jotai';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { useCallback } from 'react';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { RawValues, getStringIdForText } from '../utils/functions';
@@ -44,7 +43,7 @@ const mockHintText = 'Ask me anything';
 
 const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
   const { onTypedMessageSubmitted } = useSalesAgent();
-  const onToggle = useSetAtom(chatOnToggleAtom);
+  const { openChat } = useChatToggle();
 
   const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 
@@ -110,14 +109,14 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
         userTyped: false,
         displayLocation: ChatElementDisplayLocationV3.TYPING_ANIMATION,
       });
-      onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
+      openChat(ChatElementDisplayLocationV3.TYPING_ANIMATION);
       onPromptClicked(text);
     },
-    [hardcopyContent, trackEvent, onTypedMessageSubmitted, onToggle],
+    [hardcopyContent, trackEvent, onTypedMessageSubmitted, openChat],
   );
 
   const handleTextFieldClick = useCallback(() => {
-    onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
+    openChat(ChatElementDisplayLocationV3.TYPING_ANIMATION);
     trackWidgetInteraction({
       eventName: EnviveMetricsEventName.WidgetInteraction,
       trigger: {
@@ -125,7 +124,7 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
         widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
       },
     });
-  }, [onToggle]);
+  }, [openChat]);
 
   const handleTranscriptionStarted = useCallback(() => {
     trackWidgetInteraction({