@microsoft/omnichannel-chat-widget 0.1.0-main.3d1c026 → 0.1.0-main.4151518

package/lib/esm/components/loadingpanestateful/LoadingPaneStateful.js

@@ -5,36 +5,61 @@ import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralLoadingPaneStyleProps } from "./common/defaultStyleProps/defaultgeneralLoadingPaneStyleProps";
 import { findAllFocusableElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
-export const LoadingPaneStateful = props => {
-  var _props$styleProps;
+import useWindowDimensions from "../../hooks/useWindowDimensions";
+import { errorUILoadingPaneStyleProps } from "./common/errorUIStyleProps/errorUILoadingPaneStyleProps";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const LoadingPaneStateful = props => {
+  var _loadingPaneProps$sty, _startChatErrorPanePr, _startChatErrorPanePr2;
   const [state] = useChatContextStore();
-  const generalStyleProps = Object.assign({}, defaultGeneralLoadingPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
-  const styleProps = { ...props.styleProps,
-    generalStyleProps: generalStyleProps
+  const {
+    loadingPaneProps,
+    startChatErrorPaneProps
+  } = props;
+  const generalLoadingPaneStyleProps = Object.assign({}, defaultGeneralLoadingPaneStyleProps, loadingPaneProps === null || loadingPaneProps === void 0 ? void 0 : (_loadingPaneProps$sty = loadingPaneProps.styleProps) === null || _loadingPaneProps$sty === void 0 ? void 0 : _loadingPaneProps$sty.generalStyleProps);
+  const loadingPaneStyleProps = {
+    ...(loadingPaneProps === null || loadingPaneProps === void 0 ? void 0 : loadingPaneProps.styleProps),
+    generalStyleProps: generalLoadingPaneStyleProps
   };
-  const controlProps = {
+  const errorUIStyleProps = {
+    ...errorUILoadingPaneStyleProps
+  };
+  const loadingPaneControlProps = {
     id: "oc-lcw-loading-pane",
     dir: state.domainStates.globalDir,
-    ...props.controlProps
-  }; // Move focus to the first button
+    ...(loadingPaneProps === null || loadingPaneProps === void 0 ? void 0 : loadingPaneProps.controlProps)
+  };
+  const errorUIControlProps = {
+    ...(loadingPaneProps === null || loadingPaneProps === void 0 ? void 0 : loadingPaneProps.controlProps),
+    id: "oc-lcw-alert-pane",
+    dir: state.domainStates.globalDir,
+    titleText: (startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr = startChatErrorPaneProps.controlProps) === null || _startChatErrorPanePr === void 0 ? void 0 : _startChatErrorPanePr.titleText) ?? "We are unable to load chat at this time.",
+    subtitleText: (startChatErrorPaneProps === null || startChatErrorPaneProps === void 0 ? void 0 : (_startChatErrorPanePr2 = startChatErrorPaneProps.controlProps) === null || _startChatErrorPanePr2 === void 0 ? void 0 : _startChatErrorPanePr2.subtitleText) ?? "Please try again later.",
+    hideSpinner: true,
+    hideSpinnerText: true
+  };
+  const {
+    height,
+    width
+  } = useWindowDimensions();
 
+  // Move focus to the first button
   useEffect(() => {
     const firstElement = findAllFocusableElement(`#${state.domainStates.widgetElementId}`);
-
     if (firstElement && firstElement[0]) {
       firstElement[0].focus();
     }
-
-    TelemetryHelper.logActionEvent(LogLevel.INFO, {
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.LoadingPaneLoaded,
       Description: "Loading pane loaded."
     });
   }, []);
   return /*#__PURE__*/React.createElement(LoadingPane, {
-    componentOverrides: props.componentOverrides,
-    controlProps: controlProps,
-    styleProps: styleProps
+    componentOverrides: loadingPaneProps === null || loadingPaneProps === void 0 ? void 0 : loadingPaneProps.componentOverrides,
+    controlProps: state.appStates.isStartChatFailing ? errorUIControlProps : loadingPaneControlProps,
+    styleProps: state.appStates.isStartChatFailing ? errorUIStyleProps : loadingPaneStyleProps,
+    windowWidth: width,
+    windowHeight: height
   });
 };
 export default LoadingPaneStateful;

package/lib/esm/components/loadingpanestateful/common/errorUIStyleProps/errorUILoadingPaneStyleProps.js

@@ -0,0 +1,50 @@
+import { ImageFit } from "@fluentui/react";
+import { AlertIcon } from "../../../../assets/Icons";
+export const errorUILoadingPaneStyleProps = {
+  generalStyleProps: {
+    position: "initial",
+    width: "100%",
+    height: "100%",
+    left: "0%",
+    top: "0%",
+    borderRadius: "0 0 4px 4px",
+    borderWidth: "0px",
+    backgroundColor: "#FFFFFF"
+  },
+  titleStyleProps: {
+    fontFamily: "'Segoe UI',Arial,sans-serif",
+    fontWeight: "normal",
+    fontSize: "18px",
+    color: "#36454F",
+    textAlign: "center",
+    display: "flex",
+    order: 2,
+    alignSelf: "auto"
+  },
+  subtitleStyleProps: {
+    fontFamily: "'Segoe UI',Arial,sans-serif",
+    fontWeight: "normal",
+    fontSize: "18px",
+    color: "#36454F",
+    textAlign: "center",
+    display: "flex",
+    order: 3,
+    alignSelf: "auto"
+  },
+  iconStyleProps: {
+    display: "flex",
+    order: 1,
+    alignSelf: "auto",
+    backgroundColor: "#FFFFFF",
+    boxShadow: "#FFFFFF 0px 0px 0px 0px",
+    margin: "0px 0px 0px 0px"
+  },
+  iconImageProps: {
+    src: AlertIcon,
+    imageFit: ImageFit.center,
+    width: "86px",
+    height: "86px",
+    shouldFadeIn: false,
+    shouldStartVisible: true
+  }
+};

package/lib/esm/components/loadingpanestateful/interfaces/IStartChatErrorPaneControlProps.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/loadingpanestateful/interfaces/IStartChatErrorPaneProps.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/ooohpanestateful/OOOHPaneStateful.js

@@ -1,28 +1,33 @@
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
 import { OutOfOfficeHoursPane } from "@microsoft/omnichannel-chat-components";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralStyleProps } from "./common/defaultStyleProps/defaultgeneralOOOHPaneStyleProps";
 import { findAllFocusableElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
 export const OutOfOfficeHoursPaneStateful = props => {
   var _props$styleProps;
-
   const [state] = useChatContextStore();
   const generalStyleProps = Object.assign({}, defaultGeneralStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
-  const styleProps = { ...props.styleProps,
+  const styleProps = {
+    ...props.styleProps,
     generalStyleProps: generalStyleProps
   };
   const controlProps = {
     id: "oc-lcw-outofofficehours-pane",
     dir: state.domainStates.globalDir,
     ...props.controlProps
-  }; // Move focus to the first button
+  };
 
+  // Move focus to the first button
   useEffect(() => {
     const firstElement = findAllFocusableElement(`#${state.domainStates.widgetElementId}`);
-
     if (firstElement && firstElement[0]) {
       firstElement[0].focus();
     }
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.OutOfOfficePaneLoaded
+    });
   }, []);
   return /*#__PURE__*/React.createElement(OutOfOfficeHoursPane, {
     componentOverrides: props.componentOverrides,

package/lib/esm/components/postchatloadingpanestateful/PostChatLoadingPaneStateful.js

@@ -3,12 +3,14 @@ import { LoadingPane } from "@microsoft/omnichannel-chat-components";
 import { defaultGeneralPostChatLoadingPaneStyleProps } from "./common/defaultgeneralPostChatLoadingPaneStyleProps";
 import { findAllFocusableElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 export const PostChatLoadingPaneStateful = props => {
   var _props$styleProps;
-
   const [state] = useChatContextStore();
   const generalStyleProps = Object.assign({}, defaultGeneralPostChatLoadingPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
-  const styleProps = { ...props.styleProps,
+  const styleProps = {
+    ...props.styleProps,
     generalStyleProps: generalStyleProps
   };
   const controlProps = {
@@ -20,14 +22,17 @@ export const PostChatLoadingPaneStateful = props => {
     hideSpinnerText: true,
     subtitleText: "Please take a moment to give us feedback about your chat experience. We are loading the survey for you now.",
     ...props.controlProps
-  }; // Move focus to the first button
+  };
 
+  // Move focus to the first button
   useEffect(() => {
     const firstElement = findAllFocusableElement(`#${state.domainStates.widgetElementId}`);
-
     if (firstElement && firstElement[0]) {
       firstElement[0].focus();
     }
+    TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.PostChatSurveyLoadingPaneLoaded
+    });
   }, []);
   return /*#__PURE__*/React.createElement(LoadingPane, {
     componentOverrides: props.componentOverrides,

package/lib/esm/components/postchatsurveypanestateful/PostChatSurveyPaneStateful.js

@@ -5,39 +5,62 @@ import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralPostChatSurveyPaneStyleProps } from "./common/defaultStyleProps/defaultgeneralPostChatSurveyPaneStyleProps";
 import { findAllFocusableElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
+import { PostChatSurveyMode } from "./enums/PostChatSurveyMode";
+import { CustomerVoiceEvents } from "./enums/CustomerVoiceEvents";
 export const PostChatSurveyPaneStateful = props => {
-  var _props$styleProps, _props$controlProps;
-
-  const [state] = useChatContextStore(); // ToDo : TASK 2628392 Fix PostChat iframe reloading on Minimize
-
+  var _state$domainStates$l, _state$domainStates$l2, _props$styleProps, _props$controlProps;
+  const [state] = useChatContextStore();
+  const postChatSurveyMode = (_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.msdyn_postconversationsurveymode;
   const generalStyleProps = Object.assign({}, defaultGeneralPostChatSurveyPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps, {
     display: state.appStates.isMinimized ? "none" : ""
   });
   let surveyInviteLink = "";
-
-  if (state.domainStates.postChatContext.surveyInviteLink) {
-    surveyInviteLink = state.domainStates.postChatContext.surveyInviteLink + "&lang=" + (state.domainStates.postChatContext.formsProLocale ?? "en");
+  if (state.appStates.shouldUseBotSurvey && state.domainStates.postChatContext.botSurveyInviteLink) {
+    surveyInviteLink = state.domainStates.postChatContext.botSurveyInviteLink + "&embed=" + (postChatSurveyMode === PostChatSurveyMode.Embed).toString() + "&compact=" + (props.isCustomerVoiceSurveyCompact ?? true).toString() + "&lang=" + (state.domainStates.postChatContext.formsProLocale ?? "en") + "&showmultilingual=false";
+  } else {
+    surveyInviteLink = state.domainStates.postChatContext.surveyInviteLink + "&embed=" + (postChatSurveyMode === PostChatSurveyMode.Embed).toString() + "&compact=" + (props.isCustomerVoiceSurveyCompact ?? true).toString() + "&lang=" + (state.domainStates.postChatContext.formsProLocale ?? "en") + "&showmultilingual=false";
   }
-
-  const styleProps = { ...props.styleProps,
+  const styleProps = {
+    ...props.styleProps,
     generalStyleProps: generalStyleProps
   };
   const controlProps = {
     id: "oc-lcw-postchatsurvey-pane",
     surveyURL: ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.surveyURL) ?? surveyInviteLink,
     ...props.controlProps
-  }; // Move focus to the first button
+  };
 
+  // Move focus to the first button
   useEffect(() => {
     const firstElement = findAllFocusableElement(`#${controlProps.id}`);
-
     if (firstElement && firstElement[0]) {
       firstElement[0].focus();
     }
-
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.PostChatSurveyLoaded
     });
+
+    //Customer Voice Telemetry Events
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    window.addEventListener("message", message => {
+      const {
+        data
+      } = message;
+      if (!data) return;
+      if (data === CustomerVoiceEvents.ResponsePageLoaded) {
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.CustomerVoiceResponsePageLoaded
+        });
+      } else if (data === CustomerVoiceEvents.FormResponseSubmitted) {
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.CustomerVoiceFormResponseSubmitted
+        });
+      } else if (data === CustomerVoiceEvents.FormResponseError) {
+        TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.CustomerVoiceFormResponseError
+        });
+      }
+    });
   }, []);
   return /*#__PURE__*/React.createElement(PostChatSurveyPane, {
     controlProps: controlProps,

package/lib/esm/components/postchatsurveypanestateful/common/defaultStyleProps/defaultgeneralPostChatSurveyPaneStyleProps.js

@@ -6,5 +6,5 @@ export const defaultGeneralPostChatSurveyPaneStyleProps = {
   top: "0%",
   borderRadius: "0 0 4px 4px",
   borderWidth: "0px",
-  overflowY: "auto"
+  maxHeight: "calc(100% - 80px)"
 };

package/lib/esm/components/postchatsurveypanestateful/enums/CustomerVoiceEvents.js

@@ -0,0 +1,6 @@
+export let CustomerVoiceEvents;
+(function (CustomerVoiceEvents) {
+  CustomerVoiceEvents["ResponsePageLoaded"] = "ResponsePageLoaded";
+  CustomerVoiceEvents["FormResponseSubmitted"] = "FormResponseSubmitted";
+  CustomerVoiceEvents["FormResponseError"] = "FormResponseError";
+})(CustomerVoiceEvents || (CustomerVoiceEvents = {}));

package/lib/esm/components/postchatsurveypanestateful/enums/PostChatSurveyMode.js

@@ -1,5 +1,4 @@
 export let PostChatSurveyMode;
-
 (function (PostChatSurveyMode) {
   PostChatSurveyMode["Embed"] = "192350000";
   PostChatSurveyMode["Link"] = "192350001";

package/lib/esm/components/postchatsurveypanestateful/interfaces/IPostChatSurveyPaneStatefulProps.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/prechatsurveypanestateful/PreChatSurveyPaneStateful.js

@@ -1,18 +1,18 @@
+import { HtmlAttributeNames, Regex } from "../../common/Constants";
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
-import { extractPreChatSurveyResponseValues, findAllFocusableElement, parseAdaptiveCardPayload } from "../../common/utils";
+import { extractPreChatSurveyResponseValues, findAllFocusableElement, getStateFromCache, isUndefinedOrEmpty, parseAdaptiveCardPayload } from "../../common/utils";
 import { ConversationState } from "../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
 import { PreChatSurveyPane } from "@microsoft/omnichannel-chat-components";
-import { HtmlAttributeNames, Regex } from "../../common/Constants";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralPreChatSurveyPaneStyleProps } from "./common/defaultStyles/defaultGeneralPreChatSurveyPaneStyleProps";
 import { defaultPreChatSurveyLocalizedTexts } from "./common/defaultProps/defaultPreChatSurveyLocalizedTexts";
-import useChatContextStore from "../../hooks/useChatContextStore"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import useChatContextStore from "../../hooks/useChatContextStore";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const PreChatSurveyPaneStateful = props => {
   var _surveyProps$stylePro, _props$surveyProps, _props$surveyProps$co;
-
   const [state, dispatch] = useChatContextStore();
   const {
     surveyProps,
@@ -20,8 +20,9 @@ export const PreChatSurveyPaneStateful = props => {
   } = props;
   const generalStyleProps = Object.assign({}, defaultGeneralPreChatSurveyPaneStyleProps, surveyProps === null || surveyProps === void 0 ? void 0 : (_surveyProps$stylePro = surveyProps.styleProps) === null || _surveyProps$stylePro === void 0 ? void 0 : _surveyProps$stylePro.generalStyleProps, {
     display: state.appStates.isMinimized ? "none" : ""
-  }); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  });
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const setPreChatResponseEmail = preChatResponse => {
     if (preChatResponse) {
       for (let index = 0; index < preChatResponse.length; index++) {
@@ -34,12 +35,11 @@ export const PreChatSurveyPaneStateful = props => {
       }
     }
   };
-
   const getAdaptiveCardPayload = (payload, requiredFieldMissingMessage) => {
     try {
       return parseAdaptiveCardPayload(payload, requiredFieldMissingMessage);
     } catch (ex) {
-      TelemetryHelper.logLoadingEvent(LogLevel.ERROR, {
+      TelemetryHelper.logConfigDataEvent(LogLevel.ERROR, {
         Event: TelemetryEvent.ParseAdaptiveCardFailed,
         Description: "Adaptive Card JSON Parse Failed.",
         ExceptionDetails: {
@@ -48,7 +48,6 @@ export const PreChatSurveyPaneStateful = props => {
       });
     }
   };
-
   const requiredFieldMissingMessage = ((_props$surveyProps = props.surveyProps) === null || _props$surveyProps === void 0 ? void 0 : (_props$surveyProps$co = _props$surveyProps.controlProps) === null || _props$surveyProps$co === void 0 ? void 0 : _props$surveyProps$co.requiredFieldMissingMessage) ?? defaultPreChatSurveyLocalizedTexts.PRECHAT_REQUIRED_FIELD_MISSING_MESSAGE;
   const controlProps = {
     id: "oc-lcw-prechatsurvey-pane",
@@ -64,16 +63,26 @@ export const PreChatSurveyPaneStateful = props => {
         type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
         payload: ConversationState.Loading
       });
-
       try {
-        const prechatResponseValues = extractPreChatSurveyResponseValues(state.domainStates.preChatSurveyResponse, values);
-        const optionalParams = {
-          initContext: {
+        var _state$domainStates, _state$domainStates$t, _state$domainStates$t2, _persistedState$domai, _persistedState$appSt;
+        const persistedState = getStateFromCache(((_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : (_state$domainStates$t = _state$domainStates.telemetryInternalData) === null || _state$domainStates$t === void 0 ? void 0 : _state$domainStates$t.orgId) ?? "", ((_state$domainStates$t2 = state.domainStates.telemetryInternalData) === null || _state$domainStates$t2 === void 0 ? void 0 : _state$domainStates$t2.widgetId) ?? "", state.domainStates.widgetInstanceId ?? "");
+        let optionalParams = {};
+
+        //Connect to Active chats and chat is not popout
+        if (persistedState && !isUndefinedOrEmpty(persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$domai = persistedState.domainStates) === null || _persistedState$domai === void 0 ? void 0 : _persistedState$domai.liveChatContext) && (persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$appSt = persistedState.appStates) === null || _persistedState$appSt === void 0 ? void 0 : _persistedState$appSt.conversationState) === ConversationState.Active && state.appStates.hideStartChatButton === false) {
+          var _persistedState$domai2;
+          optionalParams = {
+            liveChatContext: persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$domai2 = persistedState.domainStates) === null || _persistedState$domai2 === void 0 ? void 0 : _persistedState$domai2.liveChatContext
+          };
+          await initStartChat(optionalParams, persistedState);
+        } else {
+          const prechatResponseValues = extractPreChatSurveyResponseValues(state.domainStates.preChatSurveyResponse, values);
+          optionalParams = {
             preChatResponse: prechatResponseValues
-          }
-        };
-        setPreChatResponseEmail(values);
-        await initStartChat(optionalParams);
+          };
+          setPreChatResponseEmail(values);
+          await initStartChat(optionalParams);
+        }
       } catch (ex) {
         TelemetryHelper.logActionEvent(LogLevel.ERROR, {
           Event: TelemetryEvent.PreChatSurveyStartChatMethodFailed,
@@ -86,41 +95,34 @@ export const PreChatSurveyPaneStateful = props => {
     },
     ...(surveyProps === null || surveyProps === void 0 ? void 0 : surveyProps.controlProps)
   };
-  const styleProps = { ...(surveyProps === null || surveyProps === void 0 ? void 0 : surveyProps.styleProps),
+  const styleProps = {
+    ...(surveyProps === null || surveyProps === void 0 ? void 0 : surveyProps.styleProps),
     generalStyleProps: generalStyleProps
   };
   useEffect(() => {
     // Set Aria-Label Attribute for Inputs
     const adaptiveCardElements = document.getElementsByClassName(HtmlAttributeNames.adaptiveCardClassName);
-
     if (adaptiveCardElements && adaptiveCardElements.length > 0) {
       const children = adaptiveCardElements[0].children;
       let value = "";
-
       for (let index = 0; index < children.length; index++) {
         const current = children[index];
-
         if (current && current.className == HtmlAttributeNames.adaptiveCardTextBlockClassName) {
           value = current.innerHTML;
         }
-
         if (current && current.tagName.toLowerCase() == HtmlAttributeNames.div && current.childElementCount > 0) {
           const input = current.children[0].children;
-
-          if (input && input.length > 0 && input[0].className != HtmlAttributeNames.adaptiveCardToggleInputClassName) {
+          if ((input === null || input === void 0 ? void 0 : input.length) > 0 && input[0].className != HtmlAttributeNames.adaptiveCardToggleInputClassName && input[0].className != HtmlAttributeNames.adaptiveCardActionSetClassName) {
             input[0].setAttribute(HtmlAttributeNames.ariaLabel, value);
           }
         }
       }
-    } // Move focus to the first button
-
-
+    }
+    // Move focus to the first button
     const firstElement = findAllFocusableElement(`#${controlProps.id}`);
-
     if (firstElement && firstElement[0]) {
       firstElement[0].focus();
     }
-
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.PrechatSurveyLoaded
     });

package/lib/esm/components/prechatsurveypanestateful/common/defaultStyles/defaultGeneralPreChatSurveyPaneStyleProps.js

@@ -1,7 +1,7 @@
 export const defaultGeneralPreChatSurveyPaneStyleProps = {
   borderStyle: "solid",
   borderRadius: "inherit",
-  borderWidth: "3px",
+  borderWidth: "0px",
   backgroundColor: "#FFFFFF",
   borderColor: "#F1F1F1",
   overflowY: "auto",

package/lib/esm/components/proactivechatpanestateful/ProactiveChatPaneStateful.js

@@ -1,4 +1,4 @@
-import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect, useState } from "react";
 import { createTimer, setFocusOnElement } from "../../common/utils";
 import { BroadcastService } from "@microsoft/omnichannel-chat-components";
@@ -8,55 +8,59 @@ import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetAc
 import { ProactiveChatPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { TelemetryTimers } from "../../common/telemetry/TelemetryManager";
-import useChatContextStore from "../../hooks/useChatContextStore"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import useChatContextStore from "../../hooks/useChatContextStore";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const ProactiveChatPaneStateful = props => {
   var _proactiveChatProps$c;
-
   const [state, dispatch] = useChatContextStore();
   const {
     proactiveChatProps,
     startChat
-  } = props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  } = props;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [timeoutRemoved, setTimeoutRemoved] = useState(false);
-
   const handleProactiveChatInviteTimeout = () => {
     if (!timeoutRemoved) {
       setTimeoutRemoved(true);
+      dispatch({
+        type: LiveChatWidgetActionType.SET_PROACTIVE_CHAT_PARAMS,
+        payload: {
+          proactiveChatBodyTitle: "",
+          proactiveChatEnablePrechat: false,
+          proactiveChatInNewWindow: false
+        }
+      });
       dispatch({
         type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
         payload: ConversationState.Closed
       });
-      TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
         Event: TelemetryEvent.ProactiveChatRejected,
         ElapsedTimeInMilliseconds: TelemetryTimers.LcwLoadToChatButtonTimer.milliSecondsElapsed,
         Description: "Proactive chat invitation timed out."
       });
     }
   };
-
   const controlProps = {
     id: "oc-lcw-proactivechat",
     dir: state.domainStates.globalDir,
     onStart: async () => {
       var _state$domainStates$l, _state$domainStates$l2;
-
       setTimeoutRemoved(true);
       TelemetryHelper.logActionEvent(LogLevel.INFO, {
         Event: TelemetryEvent.ProactiveChatAccepted,
         Description: "Proactive chat accepted."
       });
-
       if (state.appStates.proactiveChatStates.proactiveChatInNewWindow) {
         // TODO: BroadcastService: replace with the sdk broadcast service, when in place
         const startPopoutChatEvent = {
-          eventName: "StartPopoutChat"
+          eventName: BroadcastEvent.ProactiveChatStartPopoutChat
         };
         BroadcastService.postMessage(startPopoutChatEvent);
         dispatch({
-          type: LiveChatWidgetActionType.SET_SKIP_CHAT_BUTTON_RENDERING,
-          payload: true
+          type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+          payload: ConversationState.Closed
         });
       } else if (((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.OutOfOperatingHours) === "True") {
         dispatch({
@@ -68,6 +72,10 @@ export const ProactiveChatPaneStateful = props => {
           payload: ConversationState.OutOfOffice
         });
       } else {
+        const proactiveChatStarted = {
+          eventName: BroadcastEvent.ProactiveChatStartChat
+        };
+        BroadcastService.postMessage(proactiveChatStarted);
         await startChat();
       }
     },
@@ -77,13 +85,21 @@ export const ProactiveChatPaneStateful = props => {
         Event: TelemetryEvent.ProactiveChatClosed,
         Description: "Proactive chat closed."
       });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_PROACTIVE_CHAT_PARAMS,
+        payload: {
+          proactiveChatBodyTitle: "",
+          proactiveChatEnablePrechat: false,
+          proactiveChatInNewWindow: false
+        }
+      });
       dispatch({
         type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
         payload: ConversationState.Closed
       });
     },
     ...(proactiveChatProps === null || proactiveChatProps === void 0 ? void 0 : proactiveChatProps.controlProps),
-    bodyTitleText: state.appStates.proactiveChatStates.proactiveChatBodyTitle ?? (proactiveChatProps === null || proactiveChatProps === void 0 ? void 0 : (_proactiveChatProps$c = proactiveChatProps.controlProps) === null || _proactiveChatProps$c === void 0 ? void 0 : _proactiveChatProps$c.bodyTitleText)
+    bodyTitleText: state.appStates.proactiveChatStates.proactiveChatBodyTitle ? state.appStates.proactiveChatStates.proactiveChatBodyTitle : proactiveChatProps === null || proactiveChatProps === void 0 ? void 0 : (_proactiveChatProps$c = proactiveChatProps.controlProps) === null || _proactiveChatProps$c === void 0 ? void 0 : _proactiveChatProps$c.bodyTitleText
   };
   useEffect(() => {
     setFocusOnElement(document.getElementById(controlProps.id + "-startbutton"));

package/lib/esm/components/proactivechatpanestateful/interfaces/IProactiveChatNotificationConfig.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/reconnectchatpanestateful/ReconnectChatPaneStateful.js

@@ -8,29 +8,32 @@ import { setFocusOnElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
 import useChatSDKStore from "../../hooks/useChatSDKStore";
 export const ReconnectChatPaneStateful = props => {
-  const [state, dispatch] = useChatContextStore(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  const [state, dispatch] = useChatContextStore();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const chatSDK = useChatSDKStore();
   const {
     reconnectChatProps,
     initStartChat
   } = props;
-
   const startChat = async continueChat => {
     dispatch({
       type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
       payload: ConversationState.Loading
     });
-
     if (continueChat && state.appStates.reconnectId) {
       const optionalParams = {
         reconnectId: state.appStates.reconnectId
       };
       await initStartChat(optionalParams);
     } else {
+      var _state$domainStates;
+      dispatch({
+        type: LiveChatWidgetActionType.SET_RECONNECT_ID,
+        payload: undefined
+      });
+      chatSDK.requestId = state === null || state === void 0 ? void 0 : (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : _state$domainStates.initialChatSdkRequestId;
       const parseToJson = false;
       const preChatSurveyResponse = await chatSDK.getPreChatSurvey(parseToJson);
-
       if (preChatSurveyResponse) {
         dispatch({
           type: LiveChatWidgetActionType.SET_PRE_CHAT_SURVEY_RESPONSE,
@@ -49,7 +52,6 @@ export const ReconnectChatPaneStateful = props => {
       }
     }
   };
-
   const controlProps = {
     id: "lcw-components-reconnect-chat-pane",
     dir: state.domainStates.globalDir,