@microsoft/omnichannel-chat-widget 0.1.0-main.60c3e17 → 0.1.0-main.6d27b26

package/lib/cjs/components/livechatwidget/common/ChatAdapterShim.js

@@ -4,33 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChatAdapterShim = void 0;
-
 var _DefaultActivitySubscriber = require("./ActivitySubscriber/DefaultActivitySubscriber");
-
 var _shareObservable = require("./shareObservable");
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 class ChatAdapterShim {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(chatAdapter) {
     _defineProperty(this, "chatAdapter", void 0);
-
     _defineProperty(this, "activityObserver", void 0);
-
     _defineProperty(this, "subscribers", void 0);
-
     this.subscribers = [];
-    this.chatAdapter = { ...chatAdapter,
-      activity$: (0, _shareObservable.shareObservable)( // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.chatAdapter = {
+      ...chatAdapter,
+      activity$: (0, _shareObservable.shareObservable)(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       new window.Observable(observer => {
-        this.activityObserver = observer; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+        this.activityObserver = observer;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const abortController = new window.AbortController();
-
         (async () => {
           try {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -40,31 +39,26 @@ class ChatAdapterShim {
               for (const subscriber of [...this.subscribers, new _DefaultActivitySubscriber.DefaultActivitySubscriber()]) {
                 subscriber.observer = this.activityObserver;
                 activity = await subscriber.next(activity);
-
                 if (!activity) {
                   break;
                 }
               }
             }
-
             observer.complete();
           } catch (error) {
             observer.error(error);
           }
         })();
-
         return () => {
           abortController.abort();
         };
       }))
     };
-  } // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   addSubscriber(subscriber) {
     this.subscribers.push(subscriber);
   }
-
 }
-
 exports.ChatAdapterShim = ChatAdapterShim;

package/lib/cjs/components/livechatwidget/common/Deferred.js

@@ -4,39 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Deferred = void 0;
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 class Deferred {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   constructor() {
     _defineProperty(this, "_promise", void 0);
-
     _defineProperty(this, "_resolve", void 0);
-
     _defineProperty(this, "_reject", () => {
       return;
     });
-
     _defineProperty(this, "resolve", value => {
       this._resolve(value);
     });
-
     _defineProperty(this, "reject", value => {
       this._reject(value);
     });
-
     this._promise = new Promise((resolve, reject) => {
       this._resolve = resolve;
       this._reject = reject;
     });
-  } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   get promise() {
     return this._promise;
   }
-
 }
-
 exports.Deferred = Deferred;

package/lib/cjs/components/livechatwidget/common/authHelper.js

@@ -4,38 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.removeAuthTokenProvider = exports.handleAuthentication = exports.getAuthClientFunction = void 0;
-
 var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants");
-
 var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
-
 var _utils = require("../../../common/utils");
-
 const getAuthClientFunction = chatConfig => {
   let authClientFunction = undefined;
-
   if (chatConfig !== null && chatConfig !== void 0 && chatConfig.LiveChatConfigAuthSettings) {
     var _chatConfig$LiveChatC;
-
     authClientFunction = (chatConfig === null || chatConfig === void 0 ? void 0 : (_chatConfig$LiveChatC = chatConfig.LiveChatConfigAuthSettings) === null || _chatConfig$LiveChatC === void 0 ? void 0 : _chatConfig$LiveChatC.msdyn_javascriptclientfunction) ?? undefined;
   }
-
   return authClientFunction;
-}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+};
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 exports.getAuthClientFunction = getAuthClientFunction;
-
 const handleAuthentication = async (chatSDK, chatConfig, getAuthToken) => {
   const authClientFunction = getAuthClientFunction(chatConfig);
-
   if (getAuthToken && authClientFunction) {
     _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
       Event: _TelemetryConstants.TelemetryEvent.GetAuthTokenCalled
     });
-
     const token = await getAuthToken(authClientFunction);
-
     if (!(0, _utils.isNullOrEmptyString)(token)) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       chatSDK.setAuthTokenProvider(async () => {
@@ -46,20 +35,16 @@ const handleAuthentication = async (chatSDK, chatConfig, getAuthToken) => {
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
         Event: _TelemetryConstants.TelemetryEvent.ReceivedNullOrEmptyToken
       });
-
       return false;
     }
   }
-
   return false;
-}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+};
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 exports.handleAuthentication = handleAuthentication;
-
 const removeAuthTokenProvider = chatSDK => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   chatSDK.authenticatedUserToken = null;
 };
-
 exports.removeAuthTokenProvider = removeAuthTokenProvider;

package/lib/cjs/components/livechatwidget/common/createAdapter.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createAdapter = void 0;
-
 var _NotificationHandler = require("../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler");
-
 var _NotificationLevel = require("../../webchatcontainerstateful/webchatcontroller/enums/NotificationLevel");
-
 var _NotificationScenarios = require("../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios");
-
 var _defaultMiddlewareLocalizedTexts = require("../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts");
-
 var _ChatAdapterShim = require("./ChatAdapterShim");
-
 var _PauseActivitySubscriber = require("./ActivitySubscriber/PauseActivitySubscriber");
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const createAdapter = async chatSDK => {
   const chatAdapterOptionalParams = {
@@ -26,11 +19,9 @@ const createAdapter = async chatSDK => {
           if (notification.id === _NotificationScenarios.NotificationScenarios.InternetConnection && notification.level == _NotificationLevel.NotificationLevel.Error) {
             notification.message = _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION;
           }
-
           if (notification.id === _NotificationScenarios.NotificationScenarios.InternetConnection && notification.level == _NotificationLevel.NotificationLevel.Success) {
             notification.message = _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE;
           }
-
           if (notification.id && notification.message) {
             _NotificationHandler.NotificationHandler.notifyWithLevel(notification.id, notification.message, notification.level);
           }
@@ -38,15 +29,13 @@ const createAdapter = async chatSDK => {
       }
     }
   };
-  let adapter = await chatSDK.createChatAdapter(chatAdapterOptionalParams); //so far, there is no need to convert to the shim adapter when using visual tests
-
+  let adapter = await chatSDK.createChatAdapter(chatAdapterOptionalParams);
+  //so far, there is no need to convert to the shim adapter when using visual tests
   if (chatSDK.isMockModeOn !== true) {
     adapter = new _ChatAdapterShim.ChatAdapterShim(adapter);
     adapter.addSubscriber(new _PauseActivitySubscriber.PauseActivitySubscriber());
     return adapter.chatAdapter;
   }
-
   return adapter;
 };
-
 exports.createAdapter = createAdapter;

package/lib/cjs/components/livechatwidget/common/createFooter.js

@@ -4,30 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createFooter = void 0;
-
 var _FooterStateful = _interopRequireDefault(require("../../footerstateful/FooterStateful"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
-
 var _componentController = require("../../../controller/componentController");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const createFooter = (props, state) => {
   var _props$controlProps, _props$componentOverr;
-
   const hideFooterDisplay = !((_props$controlProps = props.controlProps) !== null && _props$controlProps !== void 0 && _props$controlProps.hideFooter) && (0, _componentController.shouldShowFooter)(state) ? false : true;
-
   const footer = (0, _omnichannelChatComponents.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.footer) || /*#__PURE__*/_react.default.createElement(_FooterStateful.default, {
     footerProps: props.footerProps,
     downloadTranscriptProps: props.downloadTranscriptProps,
     audioNotificationProps: props.audioNotificationProps,
     hideFooterDisplay: hideFooterDisplay
   });
-
   return footer;
 };
-
 exports.createFooter = createFooter;

package/lib/cjs/components/livechatwidget/common/createInternetConnectionChangeHandler.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createInternetConnectionChangeHandler = void 0;
-
 var _Constants = require("../../../common/Constants");
-
 var _NotificationHandler = require("../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler");
-
 var _NotificationScenarios = require("../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios");
-
 var _defaultMiddlewareLocalizedTexts = require("../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts");
-
 var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
-
 var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants");
-
 const isInternetConnected = async () => {
   try {
     const response = await fetch(_Constants.Constants.internetConnectionTestUrl);
@@ -26,29 +19,24 @@ const isInternetConnected = async () => {
     return false;
   }
 };
-
 const createInternetConnectionChangeHandler = async () => {
   const handler = async () => {
     const connected = await isInternetConnected();
-
     if (!connected) {
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.WARN, {
         Event: _TelemetryConstants.TelemetryEvent.NetworkDisconnected
       });
-
       _NotificationHandler.NotificationHandler.notifyError(_NotificationScenarios.NotificationScenarios.InternetConnection, _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION);
     } else {
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.WARN, {
         Event: _TelemetryConstants.TelemetryEvent.NetworkReconnected
       });
-
       _NotificationHandler.NotificationHandler.notifySuccess(_NotificationScenarios.NotificationScenarios.InternetConnection, _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE);
     }
-  }; // Checking connection status on online & offline events due to possible false positives
-
+  };
 
+  // Checking connection status on online & offline events due to possible false positives
   window.addEventListener("online", () => handler(), false);
   window.addEventListener("offline", () => handler(), false);
 };
-
 exports.createInternetConnectionChangeHandler = createInternetConnectionChangeHandler;

package/lib/cjs/components/livechatwidget/common/createMarkdown.js

@@ -4,27 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createMarkdown = void 0;
-
 var _markdownIt = _interopRequireDefault(require("markdown-it"));
-
 var _markdownItForInline = _interopRequireDefault(require("markdown-it-for-inline"));
-
 var _defaultMarkdownLocalizedTexts = require("../../webchatcontainerstateful/common/defaultProps/defaultMarkdownLocalizedTexts");
-
 var _Constants = require("../../../common/Constants");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineMarkdownSupport) => {
   let markdown;
-
   if (!disableMarkdownMessageFormatting) {
     markdown = new _markdownIt.default(_Constants.Constants.Default, {
       html: true,
       linkify: true,
       breaks: !disableNewLineMarkdownSupport
-    }); // ToDo: Commenting below usage of plugin until deferred bug is resolved: https://github.com/mayashavin/markdown-it-slack/issues/1
+    });
+    // ToDo: Commenting below usage of plugin until deferred bug is resolved: https://github.com/mayashavin/markdown-it-slack/issues/1
     // markdown.use(MarkdownSlack);
   } else {
     markdown = new _markdownIt.default(_Constants.Constants.Zero, {
@@ -32,38 +26,37 @@ const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineMarkdown
       linkify: true,
       breaks: !disableNewLineMarkdownSupport
     });
-    markdown.enable(["entity", // Rule to process html entity - {, ¯, "
-    "linkify", // Rule to replace link-like texts with link nodes
-    "html_block", // Rule to process html blocks and paragraphs
-    "html_inline", // Rule to process html tags
+    markdown.enable(["entity",
+    // Rule to process html entity - {, ¯, "
+    "linkify",
+    // Rule to replace link-like texts with link nodes
+    "html_block",
+    // Rule to process html blocks and paragraphs
+    "html_inline",
+    // Rule to process html tags
     "newline" // Rule to proceess '\n'
     ]);
-  } // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   markdown.use(_markdownItForInline.default, "url_new_win", "link_open", function (tokens, idx, env) {
-    const targetAttrIndex = tokens[idx].attrIndex(_Constants.Constants.Target); // Put a transparent pixel instead of the "open in new window" icon, so developers can easily modify the icon in CSS.
-
+    const targetAttrIndex = tokens[idx].attrIndex(_Constants.Constants.Target);
+    // Put a transparent pixel instead of the "open in new window" icon, so developers can easily modify the icon in CSS.
     const TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
-
     if (~targetAttrIndex) {
       tokens[idx].attrs[targetAttrIndex][1] = _Constants.Constants.Blank;
     } else {
       tokens[idx].attrPush([_Constants.Constants.Target, _Constants.Constants.Blank]);
     }
-
     const relAttrIndex = tokens[idx].attrIndex(_Constants.Constants.TargetRelationship);
-
     if (~relAttrIndex) {
       tokens[idx].attrs[relAttrIndex][1] = _Constants.Constants.TargetRelationshipAttributes;
     } else {
       tokens[idx].attrPush([_Constants.Constants.TargetRelationship, _Constants.Constants.TargetRelationshipAttributes]);
-
       if (!disableMarkdownMessageFormatting) {
-        tokens[idx].attrPush([_Constants.Constants.Title, _defaultMarkdownLocalizedTexts.defaultMarkdownLocalizedTexts.MARKDOWN_EXTERNAL_LINK_ALT]); // eslint-disable-next-line quotes
-
+        tokens[idx].attrPush([_Constants.Constants.Title, _defaultMarkdownLocalizedTexts.defaultMarkdownLocalizedTexts.MARKDOWN_EXTERNAL_LINK_ALT]);
+        // eslint-disable-next-line quotes
         const iconTokens = markdown.parseInline(`![${_defaultMarkdownLocalizedTexts.defaultMarkdownLocalizedTexts.MARKDOWN_EXTERNAL_LINK_ALT}](${TRANSPARENT_GIF})`, env)[0].children;
-
         if (iconTokens && iconTokens.length > 0) {
           iconTokens[0].attrJoin("class", _Constants.Constants.OpenLinkIconCssClass);
           tokens.splice(idx + 2, 0, ...iconTokens);
@@ -73,5 +66,4 @@ const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineMarkdown
   });
   return markdown;
 };
-
 exports.createMarkdown = createMarkdown;

package/lib/cjs/components/livechatwidget/common/defaultProps/defaultScrollBarProps.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultScrollBarProps = void 0;
+const defaultScrollBarProps = {
+  width: "7px",
+  trackBackgroundColor: "#f1f1f1",
+  thumbBackgroundColor: "#888",
+  thumbBorderRadius: "10px",
+  thumbHoverColor: "#555"
+};
+exports.defaultScrollBarProps = defaultScrollBarProps;

package/lib/cjs/components/livechatwidget/common/defaultProps/dummyDefaultProps.js

@@ -4,34 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dummyDefaultProps = void 0;
-
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
-
 var _mockadapter = _interopRequireDefault(require("../../../webchatcontainerstateful/common/mockadapter"));
-
 var _Audios = require("../../../../assets/Audios");
-
 var _WebChatStoreLoader = require("../../../webchatcontainerstateful/webchatcontroller/WebChatStoreLoader");
-
 var _activityStatusMiddleware = require("../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityStatusMiddleware");
-
 var _activityMiddleware = require("../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityMiddleware");
-
 var _attachmentMiddleware = _interopRequireDefault(require("../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentMiddleware"));
-
 var _avatarMiddleware = require("../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/avatarMiddleware");
-
 var _createMarkdown = require("../createMarkdown");
-
+var _WebChatLogger = require("../../../webchatcontainerstateful/webchatcontroller/webchattelemetry/WebChatLogger");
 var _groupActivitiesMiddleware = require("../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/groupActivitiesMiddleware");
-
 var _typingIndicatorMiddleware = require("../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/typingIndicatorMiddleware");
-
-var _WebChatLogger = require("../../../webchatcontainerstateful/webchatcontroller/webchattelemetry/WebChatLogger");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any */
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const dummyDefaultProps = {
   audioNotificationProps: {
@@ -426,6 +413,7 @@ const dummyDefaultProps = {
         width: "90px",
         cursor: "pointer",
         overflow: "hidden",
+        padding: "0px",
         whiteSpace: "nowrap"
       },
       subtitleStyleProps: {
@@ -433,6 +421,7 @@ const dummyDefaultProps = {
         fontWeight: "200",
         color: "#666",
         overflow: "hidden",
+        padding: "0px",
         fontFamily: "'Segoe UI',Arial,sans-serif",
         display: "block",
         alignItems: "center",
@@ -488,28 +477,30 @@ const dummyDefaultProps = {
       cancelButtonText: "Cancel",
       cancelButtonAriaLabel: "Cancel. Return to Chat",
       brightnessValueOnDim: "0.2",
-      disableDimLayer: false,
       onConfirm: () => {},
       // Detailed implementation omitted
       onCancel: () => {} // Detailed implementation omitted
-
     },
+
     styleProps: {
       generalStyleProps: {
+        display: "flex",
+        minHeight: "160px",
+        maxHeight: "300px",
+        boxSizing: "border-box",
         backgroundColor: "#FFFFFF",
         borderRadius: "2px",
         color: "black",
         fontFamily: "Segoe UI, Arial, sans-serif",
         fontSize: "14px",
-        height: "160px",
         padding: "10px 20px",
-        width: "262px",
         position: "absolute",
         justifyContent: "center",
         alignItems: "center",
-        display: "flex",
         flexFlow: "column",
-        zIndex: "9999"
+        zIndex: "9999",
+        left: "26px",
+        right: "26px"
       },
       titleStyleProps: {
         color: "#323130",
@@ -531,10 +522,14 @@ const dummyDefaultProps = {
       },
       buttonGroupStyleProps: {
         display: "flex",
+        width: "auto",
+        height: "auto",
+        boxSizing: "border-box",
         flexFlow: "row",
         justifyContent: "center",
         alignItems: "center",
-        gap: "10px"
+        gap: "10px",
+        marginBottom: "10px"
       },
       confirmButtonStyleProps: {
         backgroundColor: "rgba(9,72,159,1)",
@@ -598,7 +593,7 @@ const dummyDefaultProps = {
     hideProactiveChatPane: false,
     hideReconnectChatPane: false,
     hideWebChatContainer: false,
-    skipChatButtonRendering: false
+    hideStartChatButton: false
   },
   directLine: new _mockadapter.default(),
   downloadTranscriptProps: {
@@ -639,7 +634,6 @@ const dummyDefaultProps = {
       cancelButtonText: "Cancel",
       cancelButtonAriaLabel: "Cancel",
       brightnessValueOnDim: "0.2",
-      disableDimLayer: false,
       onSend: undefined,
       onCancel: undefined,
       checkInput: undefined
@@ -1083,8 +1077,8 @@ const dummyDefaultProps = {
       titleText: "We're Offline",
       subtitleText: "No agents available",
       onClick: () => {} // Detailed implementation omitted
-
     },
+
     styleProps: {
       // ...[Existing chat button style props]
       iconStyleProps: {
@@ -1102,8 +1096,8 @@ const dummyDefaultProps = {
         text: "We're Offline"
       },
       onMinimizeClick: () => {} // Detailed implementation omitted
-
     },
+
     styleProps: {
       // ...[Existing chat button style props]
       generalStyleProps: {
@@ -1172,7 +1166,7 @@ const dummyDefaultProps = {
       subtitleText: "Please take a moment to give us feedback about your chat experience. We are loading the survey for you now."
     },
     styleProps: {
-      // ...[Existing chat button style props]
+      // ...[Existing loading pane style props]
       generalStyleProps: {
         position: "initial",
         width: "100%",
@@ -1203,6 +1197,47 @@ const dummyDefaultProps = {
     },
     isCustomerVoiceSurveyCompact: undefined
   },
+  preChatSurveyPaneProps: {
+    controlProps: {
+      id: "oc-lcw-prechatsurveypane-default",
+      dir: "auto",
+      hidePreChatSurveyPane: false,
+      adaptiveCardHostConfig: "{\"fontFamily\":\"Segoe UI, Helvetica Neue, sans-serif\",\"containerStyles\":{\"default\":{\"foregroundColors\":{\"default\":{\"default\":\"#000000\"}},\"backgroundColor\":\"#FFFFFF\"}},\"actions\":{\"actionsOrientation\":\"Vertical\",\"actionAlignment\":\"stretch\"}}",
+      payload: "{\"$schema\":\"http://adaptivecards.io/schemas/adaptive-card.json\",\"type\":\"AdaptiveCard\",\"version\":\"1.1\",\"body\":[{\"type\":\"TextBlock\",\"weight\":\"bolder\",\"text\":\"Please answer below questions.\"},{\"type\":\"Input.Text\",\"id\":\"1e5e4e7a-8f0b-ec11-b6e6-000d3a305d38\",\"label\":\"name pls?\",\"maxLength\":100,\"isRequired\":true,\"errorMessage\":\"Name is required\"},{\"type\":\"Input.Text\",\"id\":\"7f8f5d6d-995e-ec11-8f8f-000d3a31376e\",\"label\":\"multi\\nmulti\\nmulti\",\"style\":\"text\",\"isMultiline\":true,\"maxLength\":250},{\"type\":\"Input.ChoiceSet\",\"id\":\"e4bdf7cb-995e-ec11-8f8f-000d3a31376e\",\"label\":\"options\",\"isMultiSelect\":false,\"value\":\"1\",\"style\":\"compact\",\"choices\":[{\"title\":\"one\",\"value\":\"1\"},{\"title\":\"two\",\"value\":\"2\"},{\"title\":\"three\",\"value\":\"3\"}]},{\"type\":\"Input.Toggle\",\"id\":\"b26011d2-995e-ec11-8f8f-000d3a31376e\",\"title\":\"consent\",\"valueOn\":\"True\",\"valueOff\":\"False\",\"value\":\"false\"},{\"type\":\"TextBlock\",\"isSubtle\":true,\"text\":\"Fields marked with * are mandatory.\",\"wrap\":true}],\"actions\":[{\"type\":\"Action.Submit\",\"title\":\"Submit\",\"data\":{\"Type\":\"InputSubmit\"}}]}",
+      onSubmit: function () {} // Detailed implementation omitted
+    },
+
+    styleProps: {
+      generalStyleProps: {
+        borderStyle: "solid",
+        borderRadius: "4px",
+        borderWidth: "3px",
+        backgroundColor: "#FFFFFF",
+        borderColor: "#F1F1F1",
+        overflowY: "auto",
+        height: "inherit",
+        width: "inherit"
+      },
+      customButtonStyleProps: {
+        backgroundColor: "rgb(49, 95, 162)",
+        color: "#FFFFFF",
+        fontFamily: "Segoe UI, Arial, sans-serif",
+        fontSize: "15px",
+        height: "48px"
+      },
+      adaptiveCardContainerStyleProps: {
+        border: "1px solid #ECECEC",
+        borderRadius: "4px",
+        margin: "3%"
+      },
+      customTextInputStyleProps: {
+        height: "20px"
+      },
+      customMultilineTextInputStyleProps: {
+        height: "52px"
+      }
+    }
+  },
   proactiveChatPaneProps: {
     componentOverrides: {
       title: undefined,
@@ -1241,8 +1276,8 @@ const dummyDefaultProps = {
       onClose: () => {},
       // Detailed implementation omitted
       onStart: () => {} // Detailed implementation omitted
-
     },
+
     styleProps: {
       generalStyleProps: {
         backgroundColor: "rgb(255, 255, 255)",
@@ -1373,8 +1408,8 @@ const dummyDefaultProps = {
       onStartNewChat: () => {},
       // Detailed implementation omitted
       onMinimize: () => {} // Detailed implementation omitted
-
     },
+
     styleProps: {
       generalStyleProps: {
         backgroundColor: "rgb(255, 255, 255)",
@@ -1459,7 +1494,6 @@ const dummyDefaultProps = {
         startNewChatButtonClassName: undefined
       }
     },
-    isReconnectEnabled: undefined,
     reconnectId: undefined,
     redirectInSameWindow: undefined
   },
@@ -1581,6 +1615,12 @@ const dummyDefaultProps = {
         lineHeight: "16px",
         padding: "0px 10px 0 10px"
       },
+      userMessageBoxStyles: {
+        maxWidth: "90%"
+      },
+      systemMessageBoxStyles: {
+        maxWidth: "90%"
+      },
       typingIndicatorStyleProps: {
         marginLeft: "10px",
         marginBottom: "5px",