@ada-support/embed2 1.10.0 → 1.11.1

package/dist/npm-entry/client/components/ChatFrame/fallback-html.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns a data URI containing the fallback HTML.
+ * This is used when the chat iframe fails to load within the timeout period.
+ */
+export declare function getFallbackDataURI(): string;

package/dist/npm-entry/client/components/ChatFrame/index.d.ts

@@ -38,6 +38,7 @@ type ChatFrameProps = PropsFromState & OwnProps & PropsFromDispatch;
 interface ChatFrameState {
     isMounted: boolean;
     closeTransitionTime: number;
+    showFallback: boolean;
 }
 export declare class ChatFrame extends Component<ChatFrameProps, ChatFrameState> {
     iframeRef: import("preact").RefObject<any>;
@@ -50,6 +51,10 @@ export declare class ChatFrame extends Component<ChatFrameProps, ChatFrameState>
     componentDidMount(): void;
     componentDidUpdate(prevProps: ChatFrameProps): void;
     componentWillUnmount(): void;
+    /**
+     * Clears the fallback timeout and ensures cleanup
+     */
+    clearFallbackTimeout(): void;
     get darkMode(): boolean;
     getIframeSrc(): string;
     get styles(): string;
@@ -59,6 +64,7 @@ export declare class ChatFrame extends Component<ChatFrameProps, ChatFrameState>
     get chooseStyles(): string;
     handleScrollLock(): void;
     collapseIframe(): void;
+    handleFallbackMessage(event: MessageEvent): void;
     /**
      * Initial body "overflow" style may be set to something other than "auto"
      * We should remember it, to put back the initial value when we unlock the scrolling

package/dist/npm-entry/common/constants/timeouts.d.ts

@@ -1 +1,2 @@
 export declare const ANIMATION_DELAY = 50;
+export declare const CHAT_FALLBACK_DELAY_MS = 5000;

package/dist/npm-entry/common/types/store-state.d.ts

@@ -64,4 +64,5 @@ export interface StartOptionsNoFunction {
     crossWindowPersistence?: boolean;
     testMode?: boolean;
     preload?: boolean;
+    showFallbackOnTimeout?: boolean;
 }

package/dist/npm-entry/index.js

@@ -15919,7 +15919,7 @@ const client = new BrowserClient({
     return event;
   },
   environment: "production",
-  release: "1.10.0-3873935",
+  release: "1.11.1-c291df9",
   sampleRate: 0.25,
   autoSessionTracking: false,
   // Integrations don't seem to work with Sentry: https://github.com/getsentry/sentry-javascript/issues/2541
@@ -16368,45 +16368,22 @@ let ActionTypes = /*#__PURE__*/function (ActionTypes) {
   ActionTypes["FOCUS_OFF_ADA_TYPE"] = "FOCUS_OFF_ADA";
   return ActionTypes;
 }({});
-;// CONCATENATED MODULE: ./src/client/helpers/event-subscriptions/index.ts
-let subscriptions = [];
-const getNextUniqueId = (() => {
-  let lastId = 0;
-  return () => {
-    lastId += 1;
-    return lastId;
-  };
-})();
-function unsubscribeEvent(id) {
-  subscriptions = subscriptions.filter(s => s.id !== id);
-}
-function subscribeEvent(eventKey, callback) {
-  const id = getNextUniqueId();
-  subscriptions.push({
-    eventKey,
-    callback,
-    id
-  });
-  return id;
-}
-function publishEvent(eventKey, data) {
-  subscriptions.forEach(subscription => {
-    // Using startsWith instead of === allows subscribing to a specific event OR a namespace,
-    // e.g. ada:campaigns subscribes to ada:campaigns:opened, ada:campaigns:engaged, and
-    // ada:campaigns:shown. Broadcasting this way simultaneously reaches subscriptions
-    // that have subscribed to a specific event, and those that have subscribed to a namespace
-    if (eventKey.startsWith(subscription.eventKey)) {
-      // try/catch to guard against missing or bad callbacks
-      try {
-        subscription.callback(data, {
-          eventKey
-        });
-      } catch {
-        // silently fail and proceed with remaining callbacks
-      }
-    }
-  });
+;// CONCATENATED MODULE: ./src/services/helpers.ts
+const NO_OP_FUNCTION = () => {
+  // Do nothing
+};
+function isStartOptions(input) {
+  if (!(typeof input === "object")) {
+    return false;
+  }
+  if (input === null) {
+    return false;
+  }
+  return typeof input.handle === "string";
 }
+// EXTERNAL MODULE: ./node_modules/lodash.memoize/index.js
+var lodash_memoize = __webpack_require__(7654);
+var lodash_memoize_default = /*#__PURE__*/__webpack_require__.n(lodash_memoize);
 ;// CONCATENATED MODULE: ./src/common/helpers/http.ts
 /**
  * Vanilla HTTP request. Returns a Promise.
@@ -16451,6 +16428,101 @@ function httpRequest(obj) {
     xhr.send(obj.body);
   });
 }
+;// CONCATENATED MODULE: ./src/services/logger/index.ts
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+
+
+const DEFAULT_LOG_SAMPLE_RATE = 0.01;
+const DD_BASE_URL = "https://browser-http-intake.logs.datadoghq.com/v1/input/";
+const DD_TOKEN = "pubfe23baedd2ea322bebb5ed2020fa2fa1";
+
+// We need memoization to ensure consistency of logs
+const shouldLog = lodash_memoize_default()(sampleRate => {
+  if (!DD_TOKEN || sampleRate === 0) {
+    return false;
+  }
+  return Math.random() < (sampleRate || DEFAULT_LOG_SAMPLE_RATE);
+});
+
+/**
+ * Sends log to Datadog
+ */
+async function log(message, extra, options) {
+  if (!shouldLog(options === null || options === void 0 ? void 0 : options.sampleRate)) {
+    return;
+  }
+  await httpRequest({
+    url: `${DD_BASE_URL}${DD_TOKEN}?ddsource=browser&ddtags=version:1.5.0,env:${"production"}`,
+    method: "POST",
+    body: JSON.stringify(_objectSpread(_objectSpread({
+      message
+    }, extra), {}, {
+      level: (options === null || options === void 0 ? void 0 : options.level) || "info",
+      sampleRate: (options === null || options === void 0 ? void 0 : options.sampleRate) || DEFAULT_LOG_SAMPLE_RATE,
+      service: "embed",
+      env: "production",
+      embedVersion: 2,
+      version: "1.11.1",
+      isNpm: true,
+      commitHash: "c291df9"
+    }))
+  });
+}
+;// CONCATENATED MODULE: ./src/client/helpers/event-subscriptions/index.ts
+
+
+let subscriptions = [];
+const getNextUniqueId = (() => {
+  let lastId = 0;
+  return () => {
+    lastId += 1;
+    return lastId;
+  };
+})();
+function unsubscribeEvent(id) {
+  subscriptions = subscriptions.filter(s => s.id !== id);
+}
+function subscribeEvent(eventKey, callback) {
+  const id = getNextUniqueId();
+
+  // Log chat_frame_timeout event subscriptions
+  if (eventKey === "ada:chat_frame_timeout") {
+    log("Client subscribed to chat_frame_timeout event", {
+      handle: isStartOptions(window.adaSettings) ? window.adaSettings.handle : undefined,
+      hostPage: window.location.href,
+      timestamp: new Date().toISOString()
+    }, {
+      sampleRate: 0.1,
+      level: "info"
+    });
+  }
+  subscriptions.push({
+    eventKey,
+    callback,
+    id
+  });
+  return id;
+}
+function publishEvent(eventKey, data) {
+  subscriptions.forEach(subscription => {
+    // Using startsWith instead of === allows subscribing to a specific event OR a namespace,
+    // e.g. ada:campaigns subscribes to ada:campaigns:opened, ada:campaigns:engaged, and
+    // ada:campaigns:shown. Broadcasting this way simultaneously reaches subscriptions
+    // that have subscribed to a specific event, and those that have subscribed to a namespace
+    if (eventKey.startsWith(subscription.eventKey)) {
+      // try/catch to guard against missing or bad callbacks
+      try {
+        subscription.callback(data, {
+          eventKey
+        });
+      } catch {
+        // silently fail and proceed with remaining callbacks
+      }
+    }
+  });
+}
 ;// CONCATENATED MODULE: ./src/common/helpers/config-info.ts
 const isProduction = "production" === "production";
 ;// CONCATENATED MODULE: ./src/common/helpers/url/constants.ts
@@ -16468,8 +16540,8 @@ const ports = {
 };
 ;// CONCATENATED MODULE: ./src/common/helpers/url/index.ts
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function url_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function url_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? url_ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : url_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 
 const DEFAULT_ADA_DOMAIN = "ada";
@@ -16496,7 +16568,7 @@ function getEmbedURL(_ref) {
   } else {
     host = `http://${handle}.localhost:9001`;
   }
-  return `${host}/embed/${frameName}/${"3873935"}/index.html`;
+  return `${host}/embed/${frameName}/${"c291df9"}/index.html`;
 }
 function constructQueryString(query) {
   return Object.keys(query).map(key => {
@@ -16544,7 +16616,7 @@ function getChatURL(_ref3) {
     domain,
     qp
   } = _ref3;
-  const queryParams = _objectSpread(_objectSpread({}, qp), {}, {
+  const queryParams = url_objectSpread(url_objectSpread({}, qp), {}, {
     version
   });
   const queryString = constructQueryString(queryParams);
@@ -17036,7 +17108,8 @@ const getInitialState = adaSettings => ({
   chatterInLiveChat: false,
   wasCampaignShownButNowClosed: false,
   proactiveCampaignHadMessages: false,
-  deviceToken: null
+  deviceToken: null,
+  showFallbackOnTimeout: false
 });
 ;// CONCATENATED MODULE: ./src/common/helpers/get-intro-for-url.ts
 function getProcessedPath(path) {
@@ -17302,19 +17375,6 @@ const get_browser_language_getBrowserLanguage = () => {
   return browserLanguageString;
 };
 /* harmony default export */ var get_browser_language = (get_browser_language_getBrowserLanguage);
-;// CONCATENATED MODULE: ./src/services/helpers.ts
-const NO_OP_FUNCTION = () => {
-  // Do nothing
-};
-function isStartOptions(input) {
-  if (!(typeof input === "object")) {
-    return false;
-  }
-  if (input === null) {
-    return false;
-  }
-  return typeof input.handle === "string";
-}
 ;// CONCATENATED MODULE: ./src/campaigns/campaign.ts
 
 function campaign_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -17637,51 +17697,6 @@ function getButtonText(client) {
   }
   return buttonTextMap[languageKey];
 }
-// EXTERNAL MODULE: ./node_modules/lodash.memoize/index.js
-var lodash_memoize = __webpack_require__(7654);
-var lodash_memoize_default = /*#__PURE__*/__webpack_require__.n(lodash_memoize);
-;// CONCATENATED MODULE: ./src/services/logger/index.ts
-
-function logger_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function logger_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? logger_ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : logger_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-
-
-const DEFAULT_LOG_SAMPLE_RATE = 0.01; // 1% of logs will go through
-
-const DD_BASE_URL = "https://browser-http-intake.logs.datadoghq.com/v1/input/";
-const DD_TOKEN = "pubfe23baedd2ea322bebb5ed2020fa2fa1";
-
-// We need memoization to ensure consistency of logs
-const shouldLog = lodash_memoize_default()(sampleRate => {
-  if (!DD_TOKEN || sampleRate === 0) {
-    return false;
-  }
-  return Math.random() < (sampleRate || DEFAULT_LOG_SAMPLE_RATE);
-});
-
-/**
- * Sends log to Datadog
- */
-async function log(message, extra, options) {
-  if (!shouldLog(options === null || options === void 0 ? void 0 : options.sampleRate)) {
-    return;
-  }
-  await httpRequest({
-    url: `${DD_BASE_URL}${DD_TOKEN}?ddsource=browser&ddtags=version:1.5.0,env:${"production"}`,
-    method: "POST",
-    body: JSON.stringify(logger_objectSpread(logger_objectSpread({
-      message
-    }, extra), {}, {
-      sampleRate: (options === null || options === void 0 ? void 0 : options.sampleRate) || DEFAULT_LOG_SAMPLE_RATE,
-      service: "embed",
-      env: "production",
-      embedVersion: 2,
-      version: "1.10.0",
-      isNpm: true,
-      commitHash: "3873935"
-    }))
-  });
-}
 ;// CONCATENATED MODULE: ./src/client/helpers/alternative-bot-rollout/index.ts
 
 function alternative_bot_rollout_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -18333,12 +18348,26 @@ const CHAT_MANIFEST_PATH = "https://static.ada.support/chat-manifest.json";
 const loadChatManifest = async () => {
   try {
     const r = await fetch(CHAT_MANIFEST_PATH);
+    if (!r.ok) {
+      log(`Failed to load chat manifest - HTTP ${r.status}`, {
+        hostPage: window.location.href,
+        manifestUrl: CHAT_MANIFEST_PATH
+      }, {
+        level: "error",
+        sampleRate: 1.0
+      });
+      return undefined;
+    }
     return r.json();
   } catch (e) {
     // handling cases where r is undefined / other fetch errors
     // by returning undefined, we tell the server to load the unversioned index.html file for chat
     log("Failed to load chat manifest", {
-      hostPage: window.location.href
+      hostPage: window.location.href,
+      manifestUrl: CHAT_MANIFEST_PATH
+    }, {
+      level: "error",
+      sampleRate: 1.0
     });
     return undefined;
   }
@@ -18720,6 +18749,7 @@ function ButtonFrame_mapStateToProps(storeState) {
 /* harmony default export */ var components_ButtonFrame = (connect(ButtonFrame_mapStateToProps)(ButtonFrame));
 ;// CONCATENATED MODULE: ./src/common/constants/timeouts.ts
 const ANIMATION_DELAY = 50;
+const CHAT_FALLBACK_DELAY_MS = 5000;
 ;// CONCATENATED MODULE: ./src/common/helpers/is-mobile.ts
 const isMobile = /(iPhone)|(iPod)|(android)|(webOS)/i.exec(navigator.userAgent) !== null;
 ;// CONCATENATED MODULE: ./src/client/components/ChatFrame/chatFrameEvents/chatterEvent/index.ts
@@ -18742,6 +18772,134 @@ function storeChatterEventDataInBrowser(client, payload) {
 }
 ;// CONCATENATED MODULE: ./src/client/components/ChatFrame/chatFrameEvents/index.ts
 
+;// CONCATENATED MODULE: ./src/client/components/ChatFrame/fallback-html.ts
+/**
+ * Fallback HTML shown when the chat iframe fails to load within the timeout period.
+ * This is a self-contained HTML page with inline styles and JavaScript.
+ */
+const FALLBACK_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height">
+  <meta http-equiv="x-ua-compatible" content="IE=edge">
+  <title>Chat - Technical Difficulties</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    .container {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      background-color: #ffffff;
+    }
+    .content-area {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 16px;
+    }
+    .message-container {
+      width: 100%;
+      max-width: 351px;
+    }
+    .message-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 16px;
+      border: 1px solid #e8e8eb;
+      border-radius: 16px;
+      background-color: #ffffff;
+      box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.06);
+    }
+    .icon-container {
+      margin-bottom: 8px;
+    }
+    .icon-container svg {
+      fill: rgba(0, 0, 0, 0.65);
+      display: block;
+    }
+    .message-text {
+      margin: 8px 0 0 0;
+      line-height: 20px;
+      font-size: 1rem;
+      text-align: center;
+      color: rgba(0, 0, 0, 0.95);
+    }
+    .close-button {
+      margin-top: 16px;
+      padding: 12px 24px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #ffffff;
+      background-color: #000000;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+      font-family: inherit;
+    }
+    .close-button:hover {
+      background-color: #333333;
+    }
+    .close-button:active {
+      background-color: #1a1a1a;
+    }
+    .close-button:focus {
+      outline: 2px solid #4d90fe;
+      outline-offset: 2px;
+    }
+  </style>
+</head>
+<body style="margin:0">
+  <div id="app">
+    <div class="container">
+      <div class="content-area">
+        <div class="message-container">
+          <div class="message-card">
+            <div class="icon-container">
+              <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12,9a1,1,0,0,0-1,1v3a1,1,0,0,0,2,0V10A1,1,0,0,0,12,9Zm7-7H5A3,3,0,0,0,2,5V15a3,3,0,0,0,3,3H16.59l3.7,3.71A1,1,0,0,0,21,22a.84.84,0,0,0,.38-.08A1,1,0,0,0,22,21V5A3,3,0,0,0,19,2Zm1,16.59-2.29-2.3A1,1,0,0,0,17,16H5a1,1,0,0,1-1-1V5A1,1,0,0,1,5,4H19a1,1,0,0,1,1,1ZM12,6a1,1,0,1,0,1,1A1,1,0,0,0,12,6Z"></path>
+              </svg>
+            </div>
+            <p role="alert" data-testid="default-outage-message" class="message-text">
+              The chat is experiencing technical difficulties and we're working to fix them as soon as possible. Please check back for an update in a few minutes.
+            </p>
+            <button class="close-button" id="closeButton" aria-label="Close chat window">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    document.getElementById('closeButton').addEventListener('click', function() {
+      try {
+        window.parent.postMessage('ADA_FALLBACK_CLOSE', '*');
+      } catch (error) {
+        console.error('Failed to close chat:', error);
+      }
+    });
+  </script>
+</body>
+</html>`;
+
+/**
+ * Returns a data URI containing the fallback HTML.
+ * This is used when the chat iframe fails to load within the timeout period.
+ */
+function getFallbackDataURI() {
+  return `data:text/html;charset=utf-8,${encodeURIComponent(FALLBACK_HTML)}`;
+}
 ;// CONCATENATED MODULE: ./src/client/components/ChatFrame/index.tsx
 
 
@@ -18760,6 +18918,7 @@ function storeChatterEventDataInBrowser(client, payload) {
 
 
 
+
 class ChatFrame extends d {
   constructor() {
     super(...arguments);
@@ -18771,7 +18930,8 @@ class ChatFrame extends d {
     _defineProperty(this, "url", this.getIframeSrc());
     _defineProperty(this, "state", {
       isMounted: false,
-      closeTransitionTime: 200
+      closeTransitionTime: 200,
+      showFallback: false
     });
   } // This url must be a static property - if getIframeSrc is called repeatedly, the resulting URL may change improperly
   // For example, the skipGreeting query parameter was being changed from true to false, causing the AFM-384 bug
@@ -18792,9 +18952,14 @@ class ChatFrame extends d {
     this.bindChatEventHandlers();
     this.handleScrollLock();
 
+    // Listen for messages from the fallback iframe
+    window.addEventListener("message", this.handleFallbackMessage.bind(this));
+
     // We use this log to track number of chat impressions (times when users see chat iFrame render first time).
     log("Chat frame mount", {
       handle,
+      chatUrl: this.url,
+      embedVersion: "c291df9".slice(0, 7),
       embedSettings: adaSettings
     });
 
@@ -18809,8 +18974,23 @@ class ChatFrame extends d {
     const {
       isDrawerOpen
     } = this.props;
+    const {
+      showFallback
+    } = this.state;
     if (isDrawerOpen !== prevProps.isDrawerOpen) {
       this.handleScrollLock();
+
+      // When opening after fallback was shown, reset state and reload iframe
+      if (isDrawerOpen && !prevProps.isDrawerOpen && showFallback) {
+        this.setState({
+          showFallback: false
+        });
+
+        // Force reload by updating src (frameLoaded will handle timeout setup)
+        if (this.iframeRef.current) {
+          this.iframeRef.current.src = this.url;
+        }
+      }
     }
   }
   componentWillUnmount() {
@@ -18818,6 +18998,17 @@ class ChatFrame extends d {
       messageService
     } = this.props;
     messageService.unregisterChannel("chat");
+    this.clearFallbackTimeout();
+  }
+
+  /**
+   * Clears the fallback timeout and ensures cleanup
+   */
+  clearFallbackTimeout() {
+    if (this.chatRenderTimeout) {
+      clearTimeout(this.chatRenderTimeout);
+      this.chatRenderTimeout = undefined;
+    }
   }
   get darkMode() {
     var _client$ui_settings, _client$ui_settings$c;
@@ -18852,7 +19043,7 @@ class ChatFrame extends d {
     const hostPageUrlParams = new URL(window.location.href).searchParams;
     const smsToken = hostPageUrlParams.get("adaSMSToken");
     const queryParams = {
-      embedVersion: "3873935".slice(0, 7),
+      embedVersion: "c291df9".slice(0, 7),
       greeting,
       language,
       skipGreeting,
@@ -19062,6 +19253,19 @@ class ChatFrame extends d {
     this.iframeRef.current.style.width = 0;
     this.iframeRef.current.style.height = 0;
   }
+  handleFallbackMessage(event) {
+    var _this$iframeRef$curre;
+    // Only accept messages from our own iframe
+    if (!event.source || event.source !== ((_this$iframeRef$curre = this.iframeRef.current) === null || _this$iframeRef$curre === void 0 ? void 0 : _this$iframeRef$curre.contentWindow)) {
+      return;
+    }
+    if (event.data === "ADA_FALLBACK_CLOSE") {
+      const {
+        toggleChat
+      } = this.props;
+      toggleChat();
+    }
+  }
 
   /**
    * Initial body "overflow" style may be set to something other than "auto"
@@ -19138,7 +19342,7 @@ class ChatFrame extends d {
           if (!this.channel) {
             throw new AdaEmbedError("`this.channel` is not defined");
           }
-          clearTimeout(this.chatRenderTimeout);
+          this.clearFallbackTimeout();
           this.channel.isConnected = true;
           setConnectionState({
             chat: ConnectionState.Done
@@ -19406,33 +19610,81 @@ class ChatFrame extends d {
     });
   }
   frameLoaded() {
+    var _this$iframeRef$curre2;
     const {
       handle,
-      adaSettings
+      adaSettings,
+      isDrawerOpen
     } = this.props;
+    const {
+      showFallback
+    } = this.state;
     // SUP-1141- TODO: Remove chatFrameTimeoutCallback
     const {
-      chatFrameTimeoutCallback
+      chatFrameTimeoutCallback,
+      showFallbackOnTimeout
     } = adaSettings;
+
+    // Don't start timeout if drawer is closed
+    if (!isDrawerOpen) {
+      return;
+    }
+
+    // Don't start timeout if already showing fallback (prevents redundant timeouts)
+    if (showFallback) {
+      return;
+    }
+
+    // Don't start timeout if loading fallback data URI (would create infinite loop)
+    const currentSrc = (_this$iframeRef$curre2 = this.iframeRef.current) === null || _this$iframeRef$curre2 === void 0 ? void 0 : _this$iframeRef$curre2.src;
+    if (currentSrc !== null && currentSrc !== void 0 && currentSrc.startsWith("data:text/html")) {
+      return;
+    }
+
+    // Clear any existing timeout before starting new one (prevents orphaned timeouts)
+    this.clearFallbackTimeout();
     this.chatRenderTimeout = window.setTimeout(() => {
       var _this$channel;
-      log("Chat frame took over 5 seconds to respond", {
+      log(`Chat frame took over ${CHAT_FALLBACK_DELAY_MS / 1000} seconds to respond`, {
         handle,
+        chatUrl: this.url,
+        embedVersion: "c291df9".slice(0, 7),
         embedSettings: adaSettings
+      }, {
+        level: "error",
+        sampleRate: 1.0
       });
-      if (!((_this$channel = this.channel) !== null && _this$channel !== void 0 && _this$channel.isConnected)) {
+      const {
+        isDrawerOpen: drawerIsOpen
+      } = this.props;
+
+      // Only show fallback if drawer is STILL open and chat hasn't connected
+      if (!((_this$channel = this.channel) !== null && _this$channel !== void 0 && _this$channel.isConnected) && drawerIsOpen) {
+        log("Chat frame took over 5 seconds to respond", {
+          handle,
+          embedSettings: adaSettings
+        });
+
         // SUP-1141- TODO: Remove chatFrameTimeoutCallback
         if (chatFrameTimeoutCallback) {
           chatFrameTimeoutCallback();
         }
         publishEvent("ada:chat_frame_timeout", undefined);
+        if (showFallbackOnTimeout) {
+          this.setState({
+            showFallback: true
+          });
+        }
       }
-    }, 5000);
+    }, CHAT_FALLBACK_DELAY_MS);
   }
   render() {
     const {
       client
     } = this.props;
+    const {
+      showFallback
+    } = this.state;
     const iFrameName = `ada-chat-frame`;
     const sandboxParams = "allow-downloads allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation allow-forms allow-modals";
     const roleDescription = () => {
@@ -19441,8 +19693,11 @@ class ChatFrame extends d {
       }
       return `${client.handle.charAt(0).toUpperCase() + client.handle.slice(1)} Chat Window`;
     };
+
+    // Use fallback URL if showFallback is true, otherwise use normal chat URL
+    const iframeSrc = showFallback ? getFallbackDataURI() : this.url;
     return v("iframe", {
-      src: this.url,
+      src: iframeSrc,
       scrolling: "no",
       style: this.chooseStyles,
       frameBorder: "0",
@@ -19498,6 +19753,8 @@ function ChatFrame_mapDispatchToProps(dispatch) {
     toggleChat: bindActionCreators(ActionCreators.TOGGLE_CHAT_ACTION, dispatch)
   };
 }
+
+// eslint-disable-next-line import/no-default-export
 /* harmony default export */ var components_ChatFrame = (connect(ChatFrame_mapStateToProps, ChatFrame_mapDispatchToProps)(ChatFrame));
 ;// CONCATENATED MODULE: ./src/client/components/IntroFrame/index.tsx
 

package/dist/npm-entry/services/logger/index.d.ts

@@ -5,4 +5,5 @@ export declare const shouldLog: ((sampleRate?: number) => boolean) & import("lod
  */
 export declare function log(message: string, extra?: Record<string, unknown>, options?: {
     sampleRate?: number;
+    level?: "error" | "warn" | "info" | "debug";
 }): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ada-support/embed2",
-  "version": "1.10.0",
+  "version": "1.11.1",
   "description": "",
   "main": "dist/npm-entry",
   "typings": "dist/npm-entry/index-npm.d.ts",
@@ -52,8 +52,8 @@
     "@babel/plugin-transform-runtime": "^7.16.10",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-typescript": "^7.23.2",
+    "@testing-library/jest-dom": "^5",
     "@testing-library/preact": "^2.0.1",
-    "@types/enzyme": "^3.10.18",
     "@types/jest": "^27.0.2",
     "@types/json-stable-stringify": "^1.0.33",
     "@types/lodash.debounce": "^4.0.6",
@@ -62,15 +62,12 @@
     "@types/uniqid": "^5.3.2",
     "@types/webpack": "^5.28.0",
     "@types/webpack-bundle-analyzer": "^4.4.1",
-    "@types/webpack-dev-server": "^4.7.2",
     "babel-loader": "9.1.2",
     "babel-preset-preact": "^2.0.0",
     "browserslist": "^4.17.4",
-    "cypress": "^9.6.1",
+    "cypress": "^13.0.0",
     "depcheck": "^1.4.3",
     "dotenv": "^8.2.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-preact-pure": "^4.0.1",
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-chai-friendly": "^0.7.2",
@@ -85,14 +82,14 @@
     "mock-xmlhttprequest": "^7.0.4",
     "npm-run-all": "^4.1.5",
     "prettier": "2.7.1",
-    "start-server-and-test": "^2.0.4",
+    "start-server-and-test": "^2.1.2",
     "ts-node": "^10.2.1",
     "tsconfig-paths": "^3.11.0",
     "typescript": "^5.6.3",
     "webpack": "^5.76.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.3.1",
+    "webpack-dev-server": "^5.2.2",
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
@@ -113,7 +110,8 @@
     "minimist": ">=1.2.6",
     "terser": ">=5.14.2",
     "@babel/traverse": ">=7.23.2",
-    "semver": ">=7.5.2"
+    "semver": ">=7.5.2",
+    "form-data": ">=4.0.4"
   },
   "files": [
     "dist/npm-entry"
@@ -125,4 +123,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}