@brainfish-ai/widgets-initiator 1.14.0 → 1.15.0

package/dist/web.js

@@ -42,7 +42,7 @@ var __async = (__this, __arguments, generator) => {
 !function() {
   try {
     var e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
-    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "cc70e533-bee1-49bc-ad8a-9e32ce8d059a", e._sentryDebugIdIdentifier = "sentry-dbid-cc70e533-bee1-49bc-ad8a-9e32ce8d059a");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "8cbdac46-7b15-4d3d-b1ea-fcaf3113cd88", e._sentryDebugIdIdentifier = "sentry-dbid-8cbdac46-7b15-4d3d-b1ea-fcaf3113cd88");
   } catch (e2) {
   }
 }();
@@ -113,7 +113,7 @@ function decodeProtectedHeader(token) {
   }
 }
 var _global = typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : {};
-_global.SENTRY_RELEASE = { id: "03aedc254757699e2d2aca22c018ef134a5de216" };
+_global.SENTRY_RELEASE = { id: "a78428dd0393f7306b3a5d99b998727c646efbb9" };
 var WidgetType;
 (function(WidgetType2) {
   WidgetType2["Sidebar"] = "sidebar";
@@ -171,7 +171,7 @@ const sendErrors = (apiHost, error, widgetKey) => {
       "api-key": widgetKey
     },
     body: JSON.stringify({
-      error: `WebWidgetVersion: ${"1.14.0"}. ${error.message}`,
+      error: `WebWidgetVersion: ${"1.15.0"}. ${error.message}`,
       stack: error.stack,
       cause: {
         message: errorData.message,
@@ -342,11 +342,11 @@ function initializeWidget(widget, config) {
     widget.HelpWidget.initPopup(config);
   }
 }
-const initializedWidgets$1 = /* @__PURE__ */ new Set();
+const initializedWidgets$2 = /* @__PURE__ */ new Set();
 const initSearchWidget = (options, config) => __async(null, null, function* () {
   const apiHost = getApiHost(options.overrides);
   try {
-    if (initializedWidgets$1.has(options.widgetKey)) {
+    if (initializedWidgets$2.has(options.widgetKey)) {
       return void 0;
     }
     const result = yield init({
@@ -372,7 +372,7 @@ const initSearchWidget = (options, config) => __async(null, null, function* () {
         });
       }
       initializeWidget(widget, transformedConfig);
-      initializedWidgets$1.add(options.widgetKey);
+      initializedWidgets$2.add(options.widgetKey);
       return widget;
     }
   } catch (error) {
@@ -512,284 +512,38 @@ const createQueues = () => {
     };
   }
 };
-function createElementWithClass(tagName, className, attributes = {}) {
-  const element = document.createElement(tagName);
-  element.className = className;
-  Object.entries(attributes).forEach(([key, value]) => {
-    element.setAttribute(key, value);
-  });
-  return element;
-}
-const IFRAME_CONTAINER_CLASS = "bf-iframe-container";
-const TRIGGER_BUTTON_CLASS = "bf-trigger-button";
-function createTriggerButton(widgetKey, triggerButtonIcon) {
-  const button = createElementWithClass("button", TRIGGER_BUTTON_CLASS, {
-    id: `trigger-button-${widgetKey}`,
-    "aria-controls": IFRAME_CONTAINER_CLASS,
-    "aria-expanded": "false",
-    "data-name": TRIGGER_BUTTON_CLASS
-  });
-  const icon = createElementWithClass("div", "trigger-button-icon", {
-    "aria-hidden": "true"
-  });
-  if (!triggerButtonIcon) {
-    icon.innerHTML = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256" class="close-icon">
-      <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
-    </svg>
-    <svg width="24" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="fish-icon visible">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M1.71844 10.3882L4.60606 6.98384L1.71844 3.58375C1.4014 3.21362 1.44424 2.65841 1.81269 2.33993C1.97978 2.1979 2.65242 1.98701 3.04657 2.43461L5.78425 5.65824C6.14281 5.29523 6.51693 4.95924 6.90479 4.65114C8.88976 3.07437 11.2345 2.22803 13.6931 2.22803C16.9492 2.22803 20.0039 3.71718 22.2917 6.41142C22.5702 6.74282 22.5702 7.22916 22.2917 7.56056C20.0039 10.2591 16.9492 11.744 13.6931 11.744C11.2348 11.744 8.89035 10.8948 6.90554 9.31995C6.51741 9.01199 6.14304 8.67628 5.78425 8.31374L3.04657 11.5374C2.72953 11.9075 2.18114 11.9505 1.81269 11.632C1.44852 11.3179 1.40568 10.7584 1.71844 10.3882ZM5.93026 10.4683C8.17161 12.2599 10.8546 13.25 13.6931 13.25C17.4881 13.25 21.019 11.4034 23.4447 8.52942C24.1873 7.64571 24.1843 6.31801 23.4397 5.43663C20.8944 2.43919 17.4337 0.722025 13.6931 0.722025C10.8555 0.722025 8.17194 1.70845 5.92952 3.50276L4.17682 1.43933C3.57943 0.760929 2.79325 0.630009 2.25286 0.662947C1.98116 0.679506 1.73125 0.736852 1.51895 0.811846C1.26839 0.900352 1.03017 1.02718 0.827835 1.20058C-0.165283 2.05903 -0.283916 3.561 0.574656 4.56345L2.63075 6.98445L0.568104 9.41623C-0.272133 10.4106 -0.166523 11.9125 0.827835 12.7714C1.81372 13.6243 3.34308 13.5062 4.19036 12.5171L5.93026 10.4683Z" fill="currentColor"/>
-    </svg>
-  `;
-  } else {
-    icon.innerHTML = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256" class="close-icon">
-        <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
-      </svg>
-      <img src="${triggerButtonIcon}" class="fish-icon visible" alt="Trigger button icon" height="32" width="32" aria-hidden="true" aria-label="help button icon" />
-    `;
+function base64Encode(text) {
+  const encoder = new TextEncoder();
+  const uint8Array = encoder.encode(text);
+  if (typeof window !== "undefined" && typeof window.btoa === "function") {
+    const binaryString = Array.from(
+      uint8Array,
+      (byte) => String.fromCharCode(byte)
+    ).join("");
+    return btoa(binaryString);
   }
-  button.setAttribute("aria-label", "Open Brainfish widget");
-  button.appendChild(icon);
-  return { button, icon };
-}
-function createIframeContainer(widgetUrl) {
-  const iframeContainer = createElementWithClass(
-    "div",
-    IFRAME_CONTAINER_CLASS,
-    {
-      id: IFRAME_CONTAINER_CLASS,
-      "aria-live": "polite",
-      "aria-hidden": "true"
-    }
-  );
-  const loadingIndicator = createElementWithClass("div", "iframe-loading-indicator");
-  const spinner = createElementWithClass("div", "spinner");
-  loadingIndicator.setAttribute("aria-label", "Loading content");
-  loadingIndicator.setAttribute("role", "status");
-  loadingIndicator.appendChild(spinner);
-  iframeContainer.appendChild(loadingIndicator);
-  const iframe = createElementWithClass("iframe", "trigger-iframe", {
-    src: widgetUrl,
-    sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
-    allow: "clipboard-write",
-    role: "dialog"
-  });
-  iframe.style.opacity = "0";
-  iframe.addEventListener("load", () => {
-    loadingIndicator.style.display = "none";
-    iframe.style.opacity = "1";
-  });
-  iframe.addEventListener("error", (error) => {
-    console.error("Error loading iframe:", error);
-    loadingIndicator.innerHTML = "";
-    const errorIcon = createElementWithClass("div", "loading-error");
-    loadingIndicator.appendChild(errorIcon);
-    loadingIndicator.setAttribute("aria-label", "Failed to load content");
-  });
-  iframeContainer.appendChild(iframe);
-  return { iframeContainer, iframe };
-}
-function toggleIframeSize() {
-  const iframeContainer = document.querySelector(
-    `.${IFRAME_CONTAINER_CLASS}`
-  );
-  if (iframeContainer.classList.contains("expanded")) {
-    iframeContainer.classList.remove("expanded");
-  } else {
-    iframeContainer.classList.add("expanded");
+  if (typeof Buffer !== "undefined") {
+    return Buffer.from(uint8Array).toString("base64");
   }
+  throw new Error("[utils.base64Encode]: Unsupported environment");
 }
-const MOBILE_BREAKPOINT = 576;
-class IframeStateManager {
-  static get isWidgetOpen() {
-    return this.isOpen;
-  }
-  static initialize({
-    button,
-    icon,
-    isButtonHidden
-  }) {
-    var _a, _b;
-    this.button = button || null;
-    this.icon = icon || null;
-    this.isButtonHidden = isButtonHidden || false;
-    if (button) {
-      button.addEventListener("click", () => this.toggleIframeVisibility());
-    }
-    if ((_a = window.Brainfish) == null ? void 0 : _a.HelpWidget) {
-      window.Brainfish.HelpWidget.close = () => this.closeWidget();
-      window.Brainfish.HelpWidget.open = () => this.openWidget();
-    }
-    if ((_b = window.Brainfish) == null ? void 0 : _b.Widgets) {
-      window.Brainfish.Widgets.open = () => this.openWidget();
-      window.Brainfish.Widgets.close = () => this.closeWidget();
-    }
-  }
-  static toggleIframeVisibility() {
-    this.isOpen = !this.isOpen;
-    if (this.isOpen) {
-      this.openWidget();
-    } else {
-      this.closeWidget();
-    }
-  }
-  // Open the widget programmatically
-  static openWidget() {
-    var _a;
-    this.isOpen = true;
-    const iframeContainer = document.querySelector(".bf-iframe-container");
-    const iframe = iframeContainer == null ? void 0 : iframeContainer.querySelector("iframe");
-    iframeContainer == null ? void 0 : iframeContainer.classList.add("open");
-    iframeContainer == null ? void 0 : iframeContainer.setAttribute("aria-hidden", "false");
-    (_a = iframe == null ? void 0 : iframe.contentWindow) == null ? void 0 : _a.postMessage({ type: "FOCUS_SEARCH_FIELD" }, "*");
-    if (this.button && this.icon) {
-      const fishIconSVG = this.icon.querySelector(".fish-icon");
-      const closeIconSVG = this.icon.querySelector(".close-icon");
-      this.button.setAttribute("aria-expanded", "true");
-      fishIconSVG.classList.remove("visible");
-      closeIconSVG.classList.add("visible");
-      if (document.body.clientWidth <= MOBILE_BREAKPOINT) {
-        this.hideTriggerButton();
-      }
-    }
-    window.dispatchEvent(new Event("onBrainfishWidgetOpen"));
-    window.BrainfishAnalytics("track", "Open Widget");
-  }
-  // Close the widget programmatically
-  static closeWidget() {
-    this.isOpen = false;
-    const iframeContainer = document.querySelector(".bf-iframe-container");
-    iframeContainer == null ? void 0 : iframeContainer.classList.remove("open");
-    iframeContainer == null ? void 0 : iframeContainer.setAttribute("aria-hidden", "true");
-    if (this.button && this.icon) {
-      this.button.setAttribute("aria-expanded", "false");
-      const fishIconSVG = this.icon.querySelector(".fish-icon");
-      const closeIconSVG = this.icon.querySelector(".close-icon");
-      fishIconSVG.classList.add("visible");
-      closeIconSVG.classList.remove("visible");
-      if (document.body.clientWidth <= MOBILE_BREAKPOINT) {
-        this.showTriggerButton();
-      }
+const base64Decode = (text) => {
+  if (typeof window !== "undefined" && typeof window.atob === "function") {
+    const binaryString = atob(text);
+    const len = binaryString.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+      bytes[i] = binaryString.charCodeAt(i);
     }
-    window.dispatchEvent(new Event("onBrainfishWidgetClose"));
-    window.BrainfishAnalytics("track", "Close Widget");
-  }
-  static showTriggerButton() {
-    var _a;
-    (_a = this.button) == null ? void 0 : _a.classList.remove("hidden");
+    const decoder2 = new TextDecoder();
+    return decoder2.decode(bytes);
   }
-  static hideTriggerButton() {
-    var _a;
-    (_a = this.button) == null ? void 0 : _a.classList.add("hidden");
+  if (typeof Buffer !== "undefined") {
+    return Buffer.from(text, "base64").toString("utf-8");
   }
-}
-__publicField(IframeStateManager, "isOpen", false);
-__publicField(IframeStateManager, "button", null);
-__publicField(IframeStateManager, "icon", null);
-__publicField(IframeStateManager, "isButtonHidden", false);
-const clientActionHandlerMap = /* @__PURE__ */ new Map();
-const registerClientActionHandler = (key, handler) => {
-  clientActionHandlerMap.set(key, handler);
-};
-const formatErrorReason = (key, err) => {
-  const details = err instanceof Error ? err.message : String(err);
-  return `Error executing Client Action with key ${key}. Details: ${details}`;
-};
-const isPlainObject = (obj) => {
-  return Object.prototype.toString.call(obj) === "[object Object]";
+  throw new Error("[utils.base64Decode]: Unsupported environment");
 };
-const executeClientActionHandler = (key, input) => __async(null, null, function* () {
-  if (clientActionHandlerMap.has(key)) {
-    const handler = clientActionHandlerMap.get(key);
-    if (typeof handler !== "function") {
-      return {
-        success: false,
-        reason: `Client Action registered with key ${key} is not a function`
-      };
-    }
-    try {
-      const result = yield handler(input);
-      if (!isPlainObject(result)) {
-        throw new TypeError("Invalid result, expecting object type");
-      }
-      return {
-        success: true,
-        data: result
-      };
-    } catch (e) {
-      return {
-        success: false,
-        reason: formatErrorReason(key, e)
-      };
-    }
-  }
-  return {
-    success: false,
-    reason: `No Client Action registered with key ${key}`
-  };
-});
-function initMessageListener(iframe, {
-  widgetHost,
-  apiHost,
-  widgetKey,
-  signal
-}) {
-  const messageHandler = (event) => __async(null, null, function* () {
-    var _a;
-    if (event.origin !== widgetHost) return;
-    const { type } = event.data;
-    if (type === "TOGGLE_WIDGET_SIZE") {
-      toggleIframeSize();
-    }
-    if (type === "TRACK_EVENT") {
-      if (!window.BrainfishAnalytics) return;
-      const { eventName, data } = event.data;
-      window.BrainfishAnalytics("track", eventName, data);
-    }
-    if (type === "CLOSE_WIDGET") {
-      window.BrainfishAnalytics("track", "Close Widget");
-      IframeStateManager.toggleIframeVisibility();
-    }
-    if (type === "NEXT_BEST_ACTION_CLICKED") {
-      const { action, searchQueryId, query, answer } = event.data;
-      const context = { action, searchQueryId };
-      if (!["function", "callback"].includes(action.type)) {
-        console.error("Invalid action type", action);
-        return;
-      }
-      window.__bfCallbacks = window.__bfCallbacks || {};
-      if (window.__bfCallbacks[action.id]) {
-        window.__bfCallbacks[action.id](query, answer, context);
-        return;
-      }
-      const scriptUrl = `${apiHost}/api/searchWidgets.callback.codeblocks?apiKey=${widgetKey}&codeblockId=${action.id}`;
-      const script = document.createElement("script");
-      script.src = scriptUrl;
-      document.head.appendChild(script);
-      script.onload = () => {
-        window.__bfCallbacks[action.id](query, answer, context);
-        setTimeout(() => {
-          document.head.removeChild(script);
-        }, 300);
-      };
-    }
-    if (type === "CLIENT_EXECUTION") {
-      const { actionKey, inputs, messageId } = event.data;
-      const result = yield executeClientActionHandler(actionKey, inputs);
-      (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage(
-        {
-          type: "CLIENT_EXECUTION_RESULT",
-          messageId,
-          result
-        },
-        "*"
-      );
-    }
-  });
-  window.addEventListener("message", messageHandler, { signal });
-}
-const styles = '.bf-trigger-button{position:fixed;bottom:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;box-shadow:0 1px 6px #0000000f,0 2px 32px #00000029;transition:transform 167ms cubic-bezier(.33,0,0,1);box-sizing:content-box;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1000;padding:12px;gap:10px;overflow:hidden}.bf-trigger-button.hidden{display:none}.trigger-button-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;position:relative}.trigger-button-icon svg{width:100%;height:100%;position:absolute;inset:0}.trigger-button-icon>svg>path{transition:transform .3s ease,opacity .3s ease;transform:scale(.5);transform-origin:center;opacity:0}.trigger-button-icon .fish-icon{display:none}.trigger-button-icon .fish-icon.visible{display:block}.trigger-button-icon svg.visible{display:block}.trigger-button-icon>svg.visible>path{opacity:1;transform:scale(1)}.trigger-iframe{position:relative;width:100%;height:100%;border:none;outline:none;transform:translateZ(0)}.bf-iframe-container{display:none;position:fixed;z-index:2147483000000;background-color:#fff;bottom:0;right:0;width:100vw;height:100vh;border:none;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease,width .2s ease-in-out,height .2s ease-in-out}.bf-iframe-container.open{display:block;opacity:1;transform:translateY(0);pointer-events:auto;top:0;left:0}@media (min-width: 576px){.bf-iframe-container{bottom:80px;right:24px;width:448px;height:min(750px,calc(100vh - 80px));border-radius:8px;border:1px solid var(--Dark-300, #D4D4D4);box-shadow:0 20px 25px -5px #1212171a,0 10px 10px -5px #1212170a}.bf-iframe-container.open{top:unset;left:unset}.bf-iframe-container.expanded{width:min(calc(448px * 1.35),calc(100vw - 16px));height:min(calc(750px * 1.35),calc(100vh - 80px))}}.iframe-loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;z-index:10}.spinner{width:24px;height:24px;border:2px solid rgba(0,0,0,.1);border-radius:50%;border-top-color:#3498db;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-error{width:24px;height:24px;position:relative;display:flex;align-items:center;justify-content:center}.loading-error:before,.loading-error:after{content:"";position:absolute;width:16px;height:2px;background-color:#e74c3c;border-radius:2px}.loading-error:before{transform:rotate(45deg)}.loading-error:after{transform:rotate(-45deg)}';
+const styles = `.bf-trigger-button{position:fixed;bottom:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;box-shadow:0 1px 6px #0000000f,0 2px 32px #00000029;transition:transform 167ms cubic-bezier(.33,0,0,1);box-sizing:content-box;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1000;padding:12px;gap:10px;overflow:hidden}.bf-trigger-button.hidden{display:none}.trigger-button-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;position:relative}.trigger-button-icon svg{width:100%;height:100%;position:absolute;inset:0}.trigger-button-icon>svg>path{transition:transform .3s ease,opacity .3s ease;transform:scale(.5);transform-origin:center;opacity:0}.trigger-button-icon .fish-icon{display:none}.trigger-button-icon .fish-icon.visible{display:block}.trigger-button-icon svg.visible{display:block}.trigger-button-icon>svg.visible>path{opacity:1;transform:scale(1)}.trigger-iframe{position:relative;width:100%;height:100%;border:none;outline:none;transform:translateZ(0)}.bf-iframe-container,.bf-search-bar-iframe-container{display:none;position:fixed;z-index:2147483000000;background-color:#fff;bottom:0;right:0;width:100vw;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));border:none;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease,width .2s ease-in-out,height .2s ease-in-out}.bf-iframe-container.open,.bf-search-bar-iframe-container.open{display:block;opacity:1;transform:translateY(0);pointer-events:auto;top:env(safe-area-inset-top);left:0}@media (min-width: 576px){.bf-iframe-container,.bf-search-bar-iframe-container{bottom:80px;right:24px;width:448px;height:min(750px,calc(100vh - 80px));border-radius:8px;border:1px solid var(--Dark-300, #D4D4D4);box-shadow:0 20px 25px -5px #1212171a,0 10px 10px -5px #1212170a}.bf-iframe-container.open{top:unset;left:unset}.bf-search-bar-iframe-container.open{width:100vw;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));position:fixed;top:0;left:0}.bf-iframe-container.expanded,.bf-search-bar-iframe-container.expanded{width:min(calc(448px * 1.35),calc(100vw - 16px));height:min(calc(750px * 1.35),calc(100vh - 80px))}}@media (min-width: 962px){.bf-search-bar-iframe-container.open{width:80vw;height:auto;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}}@media (min-width: 1200px){.bf-search-bar-iframe-container.open{width:60vw;min-width:770px}}@media (min-width: 1400px){.bf-search-bar-iframe-container.open{width:50vw;min-width:770px}}brainfish-search-widget{display:flex;align-items:center;height:46px;width:100%;background-color:#fff;border-radius:8px;border:1px solid #ccc;box-shadow:0 2px 4px #0000001a;font-size:16px;color:#171717;padding-left:46px;cursor:text;&:after{content:attr(data-placeholder)}&:before{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="112" cy="112" r="80" fill="none" stroke="%23737373" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="%23737373" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');display:block;width:24px;height:24px;position:absolute;left:12px;top:50%;transform:translateY(-50%)}}.bf-search-bar-iframe-backdrop{display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#d9d9d905;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.iframe-loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;z-index:10}.spinner{width:24px;height:24px;border:2px solid rgba(0,0,0,.1);border-radius:50%;border-top-color:#3498db;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-error{width:24px;height:24px;position:relative;display:flex;align-items:center;justify-content:center}.loading-error:before,.loading-error:after{content:"";position:absolute;width:16px;height:2px;background-color:#e74c3c;border-radius:2px}.loading-error:before{transform:rotate(45deg)}.loading-error:after{transform:rotate(-45deg)}`;
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -1770,6 +1524,10 @@ function requireLighten() {
 }
 var lightenExports = /* @__PURE__ */ requireLighten();
 const lighten = /* @__PURE__ */ getDefaultExportFromCjs(lightenExports);
+const IFRAME_CONTAINER_CLASS = "bf-iframe-container";
+const TRIGGER_BUTTON_CLASS = "bf-trigger-button";
+const SEARCH_BAR_IFRAME_CONTAINER_CLASS = "bf-search-bar-iframe-container";
+const SEARCH_BAR_IFRAME_BACKDROP_CLASS = "bf-search-bar-iframe-backdrop";
 function insertStyles(primaryColor = "#000", foreground = "FFF") {
   const style = document.createElement("style");
   style.attributes.setNamedItem(document.createAttribute("data-widget-styles"));
@@ -1792,18 +1550,366 @@ function insertStylesIfNeeded(config) {
     insertStyles(buttonColor, iconColor);
   }
 }
-function initColorSchemeListener(iframe, signal) {
-  const updateIframeBodyClass = (isDarkMode) => {
-    var _a;
-    (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage(
-      { type: "UPDATE_BODY_CLASS", isDarkMode },
-      "*"
-    );
-  };
-  const checkAndUpdateDarkMode = () => {
-    const isDarkMode = document.body.classList.contains("dark");
-    updateIframeBodyClass(isDarkMode);
-  };
+class WidgetState {
+  constructor(widgetKey, widgetType) {
+    __publicField(this, "isOpen", false);
+    this.widgetKey = widgetKey;
+    this.widgetType = widgetType;
+  }
+  get isWidgetOpen() {
+    return this.isOpen;
+  }
+  openWidget() {
+    this.isOpen = true;
+  }
+  closeWidget() {
+    this.isOpen = false;
+  }
+  toggleWidget() {
+    this.isOpen = !this.isOpen;
+    return this.isOpen;
+  }
+}
+const MOBILE_BREAKPOINT = 576;
+const DESKTOP_BREAKPOINT = 962;
+class WidgetDOMController {
+  constructor(widgetType) {
+    __publicField(this, "button", null);
+    __publicField(this, "icon", null);
+    this.widgetType = widgetType;
+  }
+  get containerClass() {
+    return this.widgetType === WidgetType.Searchbar ? SEARCH_BAR_IFRAME_CONTAINER_CLASS : IFRAME_CONTAINER_CLASS;
+  }
+  setElements(button, icon) {
+    this.button = button || null;
+    this.icon = icon || null;
+  }
+  openWidget(options = {}) {
+    var _a, _b;
+    const iframeContainer = document.querySelector(`.${this.containerClass}`);
+    const iframe = iframeContainer == null ? void 0 : iframeContainer.querySelector("iframe");
+    if (options.newConversation) {
+      (_a = iframe == null ? void 0 : iframe.contentWindow) == null ? void 0 : _a.postMessage({ type: "NEW_CONVERSATION" }, "*");
+    }
+    (_b = iframe == null ? void 0 : iframe.contentWindow) == null ? void 0 : _b.postMessage({ type: "FOCUS_SEARCH_FIELD" }, "*");
+    iframeContainer == null ? void 0 : iframeContainer.classList.add("open");
+    iframeContainer == null ? void 0 : iframeContainer.setAttribute("aria-hidden", "false");
+    this.updateButtonForOpen();
+  }
+  closeWidget() {
+    const iframeContainer = document.querySelector(`.${this.containerClass}`);
+    iframeContainer == null ? void 0 : iframeContainer.classList.remove("open");
+    iframeContainer == null ? void 0 : iframeContainer.setAttribute("aria-hidden", "true");
+    this.updateButtonForClose();
+  }
+  updateButtonForOpen() {
+    if (!this.button || !this.icon) return;
+    const fishIconSVG = this.icon.querySelector(".fish-icon");
+    const closeIconSVG = this.icon.querySelector(".close-icon");
+    this.button.setAttribute("aria-expanded", "true");
+    fishIconSVG == null ? void 0 : fishIconSVG.classList.remove("visible");
+    closeIconSVG == null ? void 0 : closeIconSVG.classList.add("visible");
+    if (this.isMobile()) {
+      this.hideTriggerButton();
+    }
+  }
+  updateButtonForClose() {
+    if (!this.button || !this.icon) return;
+    const fishIconSVG = this.icon.querySelector(".fish-icon");
+    const closeIconSVG = this.icon.querySelector(".close-icon");
+    this.button.setAttribute("aria-expanded", "false");
+    fishIconSVG == null ? void 0 : fishIconSVG.classList.add("visible");
+    closeIconSVG == null ? void 0 : closeIconSVG.classList.remove("visible");
+    if (this.isMobile()) {
+      this.showTriggerButton();
+    }
+  }
+  showTriggerButton() {
+    var _a;
+    (_a = this.button) == null ? void 0 : _a.classList.remove("hidden");
+  }
+  hideTriggerButton() {
+    var _a;
+    (_a = this.button) == null ? void 0 : _a.classList.add("hidden");
+  }
+  isMobile() {
+    return document.body.clientWidth <= MOBILE_BREAKPOINT;
+  }
+  setupButtonClickListener(callback) {
+    if (this.button) {
+      this.button.addEventListener("click", callback);
+    }
+  }
+}
+class WidgetRegistry {
+  static register(widgetKey, instance) {
+    this.instances.set(widgetKey, instance);
+  }
+  static getInstance(widgetKey) {
+    return this.instances.get(widgetKey);
+  }
+  static unregister(widgetKey) {
+    this.instances.delete(widgetKey);
+  }
+  static getAllInstances() {
+    return Array.from(this.instances.values());
+  }
+  static getOpenInstance() {
+    return this.getAllInstances().find((instance) => instance.isWidgetOpen);
+  }
+  static getClosedPopupInstance() {
+    return this.getAllInstances().find(
+      (instance) => !instance.isWidgetOpen && instance.widgetType === WidgetType.Popup
+    );
+  }
+  static clear() {
+    this.instances.clear();
+  }
+}
+__publicField(WidgetRegistry, "instances", /* @__PURE__ */ new Map());
+class WidgetGlobalAPI {
+  static initialize() {
+    if (this.isInitialized) return;
+    this.setupDeprecatedAPI();
+    this.setupNewAPI();
+    this.isInitialized = true;
+  }
+  static setupDeprecatedAPI() {
+    var _a;
+    if ((_a = window.Brainfish) == null ? void 0 : _a.HelpWidget) {
+      window.Brainfish.HelpWidget.close = (trigger) => this.closeCurrentlyOpenWidget();
+      window.Brainfish.HelpWidget.open = (trigger) => this.openCurrentlyClosedPopupWidget(trigger);
+    }
+  }
+  static setupNewAPI() {
+    var _a;
+    if ((_a = window.Brainfish) == null ? void 0 : _a.Widgets) {
+      window.Brainfish.Widgets.open = () => this.openCurrentlyClosedPopupWidget();
+      window.Brainfish.Widgets.close = () => this.closeCurrentlyOpenWidget();
+    }
+  }
+  static closeCurrentlyOpenWidget() {
+    const openInstance = WidgetRegistry.getOpenInstance();
+    if (openInstance) {
+      openInstance.closeWidget();
+    }
+  }
+  static openCurrentlyClosedPopupWidget(trigger) {
+    const closedPopupInstance = WidgetRegistry.getClosedPopupInstance();
+    if (closedPopupInstance) {
+      const options = trigger ? { newConversation: true, trigger } : {};
+      closedPopupInstance.openWidget(options);
+    }
+  }
+}
+__publicField(WidgetGlobalAPI, "isInitialized", false);
+class AnalyticsTracker {
+  constructor(widgetType, widgetKey) {
+    this.widgetType = widgetType;
+    this.widgetKey = widgetKey;
+  }
+  trackOpenWidget(trigger) {
+    this.dispatchEvent("onBrainfishWidgetOpen");
+    if (trigger) {
+      this.trackAnalytics("Open Widget - Custom Trigger", { trigger });
+    } else {
+      this.trackAnalytics("Open Widget");
+    }
+  }
+  trackCloseWidget() {
+    this.dispatchEvent("onBrainfishWidgetClose");
+    this.trackAnalytics("Close Widget");
+  }
+  trackCustomEvent(eventName, data = {}) {
+    this.trackAnalytics(eventName, data);
+  }
+  dispatchEvent(eventName) {
+    window.dispatchEvent(new Event(eventName));
+  }
+  trackAnalytics(eventName, data = {}) {
+    if (window.BrainfishAnalytics) {
+      window.BrainfishAnalytics("track", eventName, __spreadProps(__spreadValues({}, data), {
+        widgetKey: this.widgetKey
+      }), {
+        source: this.widgetType,
+        widgetKey: this.widgetKey
+      });
+    }
+  }
+}
+class IframeStateManager {
+  constructor(widgetKey, widgetType) {
+    __publicField(this, "state");
+    __publicField(this, "domController");
+    __publicField(this, "analyticsTracker");
+    this.state = new WidgetState(widgetKey, widgetType);
+    this.domController = new WidgetDOMController(widgetType);
+    this.analyticsTracker = new AnalyticsTracker(widgetType, widgetKey);
+  }
+  static getInstance(widgetKey) {
+    return WidgetRegistry.getInstance(widgetKey);
+  }
+  get widgetKey() {
+    return this.state.widgetKey;
+  }
+  get widgetType() {
+    return this.state.widgetType;
+  }
+  get isWidgetOpen() {
+    return this.state.isWidgetOpen;
+  }
+  get containerClass() {
+    return this.domController.containerClass;
+  }
+  initialize({
+    button,
+    icon,
+    isButtonHidden
+  }) {
+    this.domController.setElements(button, icon);
+    this.domController.setupButtonClickListener(() => this.toggleIframeVisibility());
+    WidgetRegistry.register(this.widgetKey, this);
+    WidgetGlobalAPI.initialize();
+  }
+  toggleIframeVisibility() {
+    const wasOpen = this.state.toggleWidget();
+    if (wasOpen) {
+      this.openWidget();
+    } else {
+      this.closeWidget();
+    }
+  }
+  // Open the widget programmatically
+  openWidget(options = {}) {
+    this.state.openWidget();
+    this.domController.openWidget(options);
+    this.analyticsTracker.trackOpenWidget(options.trigger);
+  }
+  // Close the widget programmatically
+  closeWidget() {
+    this.state.closeWidget();
+    this.domController.closeWidget();
+    this.analyticsTracker.trackCloseWidget();
+  }
+  showTriggerButton() {
+    this.domController.showTriggerButton();
+  }
+  hideTriggerButton() {
+    this.domController.hideTriggerButton();
+  }
+  trackCustomEvent(eventName, data = {}) {
+    this.analyticsTracker.trackCustomEvent(eventName, data);
+  }
+  // Cleanup method to remove this instance
+  destroy() {
+    WidgetRegistry.unregister(this.widgetKey);
+  }
+  static initialize(options) {
+    const instance = new IframeStateManager(options.widgetKey, options.widgetType);
+    instance.initialize(options);
+    return instance;
+  }
+}
+function createElementWithClass(tagName, className, attributes = {}) {
+  const element = document.createElement(tagName);
+  element.className = className;
+  Object.entries(attributes).forEach(([key, value]) => {
+    element.setAttribute(key, value);
+  });
+  return element;
+}
+function createTriggerButton(widgetKey, triggerButtonIcon) {
+  const button = createElementWithClass("button", TRIGGER_BUTTON_CLASS, {
+    id: `trigger-button-${widgetKey}`,
+    "aria-controls": IFRAME_CONTAINER_CLASS,
+    "aria-expanded": "false",
+    "data-name": TRIGGER_BUTTON_CLASS
+  });
+  const icon = createElementWithClass("div", "trigger-button-icon", {
+    "aria-hidden": "true"
+  });
+  if (!triggerButtonIcon) {
+    icon.innerHTML = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256" class="close-icon">
+      <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
+    </svg>
+    <svg width="24" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="fish-icon visible">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M1.71844 10.3882L4.60606 6.98384L1.71844 3.58375C1.4014 3.21362 1.44424 2.65841 1.81269 2.33993C1.97978 2.1979 2.65242 1.98701 3.04657 2.43461L5.78425 5.65824C6.14281 5.29523 6.51693 4.95924 6.90479 4.65114C8.88976 3.07437 11.2345 2.22803 13.6931 2.22803C16.9492 2.22803 20.0039 3.71718 22.2917 6.41142C22.5702 6.74282 22.5702 7.22916 22.2917 7.56056C20.0039 10.2591 16.9492 11.744 13.6931 11.744C11.2348 11.744 8.89035 10.8948 6.90554 9.31995C6.51741 9.01199 6.14304 8.67628 5.78425 8.31374L3.04657 11.5374C2.72953 11.9075 2.18114 11.9505 1.81269 11.632C1.44852 11.3179 1.40568 10.7584 1.71844 10.3882ZM5.93026 10.4683C8.17161 12.2599 10.8546 13.25 13.6931 13.25C17.4881 13.25 21.019 11.4034 23.4447 8.52942C24.1873 7.64571 24.1843 6.31801 23.4397 5.43663C20.8944 2.43919 17.4337 0.722025 13.6931 0.722025C10.8555 0.722025 8.17194 1.70845 5.92952 3.50276L4.17682 1.43933C3.57943 0.760929 2.79325 0.630009 2.25286 0.662947C1.98116 0.679506 1.73125 0.736852 1.51895 0.811846C1.26839 0.900352 1.03017 1.02718 0.827835 1.20058C-0.165283 2.05903 -0.283916 3.561 0.574656 4.56345L2.63075 6.98445L0.568104 9.41623C-0.272133 10.4106 -0.166523 11.9125 0.827835 12.7714C1.81372 13.6243 3.34308 13.5062 4.19036 12.5171L5.93026 10.4683Z" fill="currentColor"/>
+    </svg>
+  `;
+  } else {
+    icon.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256" class="close-icon">
+        <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
+      </svg>
+      <img src="${triggerButtonIcon}" class="fish-icon visible" alt="Trigger button icon" height="32" width="32" aria-hidden="true" aria-label="help button icon" />
+    `;
+  }
+  button.setAttribute("aria-label", "Open Brainfish widget");
+  button.appendChild(icon);
+  return { button, icon };
+}
+function createIframeContainer({ widgetUrl, widgetType, props }) {
+  const containerClass = widgetType === WidgetType.Searchbar ? SEARCH_BAR_IFRAME_CONTAINER_CLASS : IFRAME_CONTAINER_CLASS;
+  const iframeContainer = createElementWithClass(
+    "div",
+    containerClass,
+    __spreadValues({
+      id: containerClass,
+      "aria-live": "polite",
+      "aria-hidden": "true"
+    }, props || {})
+  );
+  const loadingIndicator = createElementWithClass("div", "iframe-loading-indicator");
+  const spinner = createElementWithClass("div", "spinner");
+  loadingIndicator.setAttribute("aria-label", "Loading content");
+  loadingIndicator.setAttribute("role", "status");
+  loadingIndicator.appendChild(spinner);
+  iframeContainer.appendChild(loadingIndicator);
+  const iframe = createElementWithClass("iframe", "trigger-iframe", {
+    src: widgetUrl,
+    sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
+    allow: "clipboard-write",
+    role: "dialog"
+  });
+  iframe.style.opacity = "0";
+  iframe.addEventListener("load", () => {
+    loadingIndicator.style.display = "none";
+    iframe.style.opacity = "1";
+  });
+  iframe.addEventListener("error", (error) => {
+    console.error("Error loading iframe:", error);
+    loadingIndicator.innerHTML = "";
+    const errorIcon = createElementWithClass("div", "loading-error");
+    loadingIndicator.appendChild(errorIcon);
+    loadingIndicator.setAttribute("aria-label", "Failed to load content");
+  });
+  iframeContainer.appendChild(iframe);
+  return { iframeContainer, iframe };
+}
+function toggleIframeSize() {
+  const iframeContainer = document.querySelector(
+    `.${IFRAME_CONTAINER_CLASS}`
+  );
+  if (iframeContainer.classList.contains("expanded")) {
+    iframeContainer.classList.remove("expanded");
+  } else {
+    iframeContainer.classList.add("expanded");
+  }
+}
+function initColorSchemeListener(iframe, signal) {
+  const updateIframeBodyClass = (isDarkMode) => {
+    var _a;
+    (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage(
+      { type: "UPDATE_BODY_CLASS", isDarkMode },
+      "*"
+    );
+  };
+  const checkAndUpdateDarkMode = () => {
+    const isDarkMode = document.body.classList.contains("dark");
+    updateIframeBodyClass(isDarkMode);
+  };
   const observeBodyClassChanges = () => {
     const observer = new MutationObserver(checkAndUpdateDarkMode);
     observer.observe(document.body, {
@@ -1815,16 +1921,118 @@ function initColorSchemeListener(iframe, signal) {
   checkAndUpdateDarkMode();
   observeBodyClassChanges();
 }
-function observeColorSchemeChanges(iframe, signal) {
+const clientActionHandlerMap = /* @__PURE__ */ new Map();
+const registerClientActionHandler = (key, handler) => {
+  clientActionHandlerMap.set(key, handler);
+};
+const formatErrorReason = (key, err) => {
+  const details = err instanceof Error ? err.message : String(err);
+  return `Error executing Client Action with key ${key}. Details: ${details}`;
+};
+const isPlainObject = (obj) => {
+  return Object.prototype.toString.call(obj) === "[object Object]";
+};
+const executeClientActionHandler = (key, input) => __async(null, null, function* () {
+  if (clientActionHandlerMap.has(key)) {
+    const handler = clientActionHandlerMap.get(key);
+    if (typeof handler !== "function") {
+      return {
+        success: false,
+        reason: `Client Action registered with key ${key} is not a function`
+      };
+    }
+    try {
+      const result = yield handler(input);
+      if (!isPlainObject(result)) {
+        throw new TypeError("Invalid result, expecting object type");
+      }
+      return {
+        success: true,
+        data: result
+      };
+    } catch (e) {
+      return {
+        success: false,
+        reason: formatErrorReason(key, e)
+      };
+    }
+  }
+  return {
+    success: false,
+    reason: `No Client Action registered with key ${key}`
+  };
+});
+function initMessageListener(iframe, {
+  widgetHost,
+  apiHost,
+  widgetKey,
+  widgetType,
+  signal,
+  stateManager
+}) {
+  const messageHandler = (event) => __async(null, null, function* () {
+    var _a;
+    if (event.origin !== widgetHost) return;
+    const { type, widgetKey: messageWidgetKey } = event.data;
+    if (messageWidgetKey && messageWidgetKey !== widgetKey) return;
+    if (type === "TOGGLE_WIDGET_SIZE") {
+      toggleIframeSize();
+    }
+    if (type === "TRACK_EVENT") {
+      const { eventName, data } = event.data;
+      stateManager.trackCustomEvent(eventName, data);
+    }
+    if (type === "CLOSE_WIDGET") {
+      stateManager.closeWidget();
+    }
+    if (type === "NEXT_BEST_ACTION_CLICKED") {
+      const { action, searchQueryId, query, answer } = event.data;
+      const context = { action, searchQueryId };
+      if (!["function", "callback"].includes(action.type)) {
+        console.error("Invalid action type", action);
+        return;
+      }
+      window.__bfCallbacks = window.__bfCallbacks || {};
+      if (window.__bfCallbacks[action.id]) {
+        window.__bfCallbacks[action.id](query, answer, context);
+        return;
+      }
+      const scriptUrl = `${apiHost}/api/searchWidgets.callback.codeblocks?apiKey=${widgetKey}&codeblockId=${action.id}`;
+      const script = document.createElement("script");
+      script.src = scriptUrl;
+      document.head.appendChild(script);
+      script.onload = () => {
+        window.__bfCallbacks[action.id](query, answer, context);
+        setTimeout(() => {
+          document.head.removeChild(script);
+        }, 300);
+      };
+    }
+    if (type === "CLIENT_EXECUTION") {
+      const { actionKey, inputs, messageId } = event.data;
+      const result = yield executeClientActionHandler(actionKey, inputs);
+      (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage(
+        {
+          type: "CLIENT_EXECUTION_RESULT",
+          messageId,
+          result
+        },
+        "*"
+      );
+    }
+  });
+  window.addEventListener("message", messageHandler, { signal });
+}
+function observeColorSchemeChanges(iframe, signal, stateManager) {
   const updateIframeBodyClass = (isMobile) => {
     var _a;
     const message = { type: "UPDATE_BODY_CLASS", isMobile };
     (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage(message, "*");
     if (isMobile) {
-      if (IframeStateManager.isWidgetOpen) {
-        IframeStateManager.hideTriggerButton();
+      if (stateManager.isWidgetOpen) {
+        stateManager.hideTriggerButton();
       } else {
-        IframeStateManager.showTriggerButton();
+        stateManager.showTriggerButton();
       }
     }
   };
@@ -1847,40 +2055,9 @@ function observeColorSchemeChanges(iframe, signal) {
   checkAndUpdateIsMobile();
   observeBodyResize();
 }
-function base64Encode(text) {
-  const encoder = new TextEncoder();
-  const uint8Array = encoder.encode(text);
-  if (typeof window !== "undefined" && typeof window.btoa === "function") {
-    const binaryString = Array.from(
-      uint8Array,
-      (byte) => String.fromCharCode(byte)
-    ).join("");
-    return btoa(binaryString);
-  }
-  if (typeof Buffer !== "undefined") {
-    return Buffer.from(uint8Array).toString("base64");
-  }
-  throw new Error("[utils.base64Encode]: Unsupported environment");
-}
-const base64Decode = (text) => {
-  if (typeof window !== "undefined" && typeof window.atob === "function") {
-    const binaryString = atob(text);
-    const len = binaryString.length;
-    const bytes = new Uint8Array(len);
-    for (let i = 0; i < len; i++) {
-      bytes[i] = binaryString.charCodeAt(i);
-    }
-    const decoder2 = new TextDecoder();
-    return decoder2.decode(bytes);
-  }
-  if (typeof Buffer !== "undefined") {
-    return Buffer.from(text, "base64").toString("utf-8");
-  }
-  throw new Error("[utils.base64Decode]: Unsupported environment");
-};
-const initializedWidgets = /* @__PURE__ */ new Set();
+const initializedWidgets$1 = /* @__PURE__ */ new Set();
 function isWidgetInitialized(widgetKey) {
-  return initializedWidgets.has(widgetKey);
+  return initializedWidgets$1.has(widgetKey);
 }
 function isButtonExisting(widgetKey) {
   return !!document.getElementById(`trigger-button-${widgetKey}`);
@@ -1890,47 +2067,40 @@ function createWidgetWithButton(widgetKey, widgetUrl, {
   triggerButtonIcon
 }) {
   const fragment = document.createDocumentFragment();
+  let stateManager;
   if (!isButtonHidden) {
     const { button, icon } = createTriggerButton(widgetKey, triggerButtonIcon);
     fragment.appendChild(button);
-    IframeStateManager.initialize({ button, icon });
+    stateManager = IframeStateManager.initialize({
+      button,
+      icon,
+      widgetType: WidgetType.Popup,
+      widgetKey
+    });
   } else {
-    IframeStateManager.initialize({ isButtonHidden });
+    stateManager = IframeStateManager.initialize({
+      isButtonHidden,
+      widgetType: WidgetType.Popup,
+      widgetKey
+    });
   }
-  const { iframeContainer, iframe } = createIframeContainer(widgetUrl);
+  const { iframeContainer, iframe } = createIframeContainer({ widgetUrl, widgetType: WidgetType.Popup });
   fragment.appendChild(iframeContainer);
-  return { fragment, iframe };
+  return { fragment, iframe, stateManager };
 }
-function handleInitializationError(apiHost, error, widgetKey) {
+function handleInitializationError$1(apiHost, error, widgetKey) {
   sendBrainfishWidgetError(apiHost, error, error.message, widgetKey);
 }
-const initIframeTrigger = (options, config) => {
-  var _a, _b, _c;
-  const apiHost = getApiHost(options.overrides);
-  const widgetHost = getWidgetHost(options.overrides);
-  const { theme, settings } = config;
-  const encodedRules = base64Encode(
-    JSON.stringify((_a = options.overrides) == null ? void 0 : _a.redirectRules)
-  );
-  const widgetParams = {
-    theme: base64Encode(JSON.stringify(theme)),
-    settings: base64Encode(JSON.stringify(settings)),
-    redirectRules: encodedRules
-  };
-  if ((_b = options.overrides) == null ? void 0 : _b.regions) {
-    widgetParams.regions = base64Encode(
-      JSON.stringify((_c = options.overrides) == null ? void 0 : _c.regions)
-    );
-  }
-  const widgetUrl = `${widgetHost}/?widgetKey=${options.widgetKey}#${new URLSearchParams(widgetParams).toString()}`;
+const initWidgetButton = ({ config, widgetUrl, apiHost, widgetHost, widgetKey }) => {
+  const { settings } = config;
   const isButtonHidden = settings == null ? void 0 : settings.hideTriggerButton;
   const triggerButtonIcon = settings == null ? void 0 : settings.triggerButtonIcon;
   try {
-    if (isWidgetInitialized(options.widgetKey)) return void 0;
-    if (isButtonExisting(options.widgetKey)) return void 0;
+    if (isWidgetInitialized(widgetKey)) return void 0;
+    if (isButtonExisting(widgetKey)) return void 0;
     insertStylesIfNeeded(config);
-    const { fragment, iframe } = createWidgetWithButton(
-      options.widgetKey,
+    const { fragment, iframe, stateManager } = createWidgetWithButton(
+      widgetKey,
       widgetUrl,
       {
         isButtonHidden: isButtonHidden || false,
@@ -1945,14 +2115,107 @@ const initIframeTrigger = (options, config) => {
         initMessageListener(iframe, {
           widgetHost,
           apiHost,
-          widgetKey: options.widgetKey,
-          signal
+          widgetKey,
+          widgetType: WidgetType.Popup,
+          signal,
+          stateManager
         });
-        observeColorSchemeChanges(iframe, signal);
+        observeColorSchemeChanges(iframe, signal, stateManager);
       }, 0);
     };
     document.body.appendChild(fragment);
-    initializedWidgets.add(options.widgetKey);
+    initializedWidgets$1.add(widgetKey);
+    const cleanup = () => {
+      controller.abort();
+      window.removeEventListener("beforeunload", cleanup);
+    };
+    window.addEventListener("beforeunload", cleanup);
+    return void 0;
+  } catch (error) {
+    handleInitializationError$1(apiHost, error, widgetKey);
+  }
+};
+const SEARCH_BAR_SELECTOR = "brainfish-search-widget";
+function createSearchTrigger({ widgetKey, settings }) {
+  const searchBar = document.querySelector(SEARCH_BAR_SELECTOR);
+  if (!searchBar) return void 0;
+  searchBar.setAttribute("data-widget-key", widgetKey);
+  searchBar.setAttribute("tabindex", "0");
+  const placeholderText = (settings == null ? void 0 : settings.placeholder) || "Ask your question here...";
+  searchBar.setAttribute("data-placeholder", placeholderText);
+  searchBar.setAttribute("aria-label", `${placeholderText} - Click to open search`);
+  searchBar.setAttribute("role", "button");
+  searchBar.setAttribute("aria-expanded", "false");
+  searchBar.setAttribute("aria-haspopup", "dialog");
+  return searchBar;
+}
+function handleInitializationError(apiHost, error, widgetKey) {
+  sendBrainfishWidgetError(apiHost, error, error.message, widgetKey);
+}
+function isSearchBarExisting(widgetKey) {
+  return !!document.querySelector(`.${SEARCH_BAR_IFRAME_CONTAINER_CLASS}[data-widget-key="${widgetKey}"]`);
+}
+const initSearchBar = ({ config, widgetUrl, apiHost, widgetHost, widgetKey }) => {
+  const { settings } = config;
+  let stateManager = IframeStateManager.getInstance(widgetKey);
+  const controller = new AbortController();
+  const searchBar = createSearchTrigger({ widgetKey, settings });
+  if (!searchBar) return void 0;
+  insertStylesIfNeeded(config);
+  try {
+    if (!isSearchBarExisting(widgetKey)) {
+      const fragment = document.createDocumentFragment();
+      if (!stateManager) {
+        stateManager = IframeStateManager.initialize({
+          isButtonHidden: true,
+          widgetType: WidgetType.Searchbar,
+          widgetKey
+        });
+      }
+      const { iframeContainer, iframe } = createIframeContainer({
+        widgetUrl,
+        widgetType: WidgetType.Searchbar,
+        props: {
+          "data-widget-type": "searchbar",
+          "data-widget-key": widgetKey
+        }
+      });
+      const { signal } = controller;
+      iframe.onload = () => {
+        setTimeout(() => {
+          initColorSchemeListener(iframe, signal);
+          initMessageListener(iframe, {
+            widgetHost,
+            apiHost,
+            widgetKey,
+            widgetType: WidgetType.Searchbar,
+            signal,
+            stateManager
+          });
+          observeColorSchemeChanges(iframe, signal, stateManager);
+        }, 0);
+      };
+      fragment.appendChild(iframeContainer);
+      document.body.appendChild(fragment);
+    }
+    const displaySearchBar = () => {
+      if (document.body.clientWidth >= DESKTOP_BREAKPOINT) {
+        const backdrop = createElementWithClass("div", SEARCH_BAR_IFRAME_BACKDROP_CLASS);
+        backdrop.onclick = () => {
+          backdrop.remove();
+          stateManager == null ? void 0 : stateManager.closeWidget();
+        };
+        document.body.appendChild(backdrop);
+      }
+      WidgetGlobalAPI.closeCurrentlyOpenWidget();
+      stateManager == null ? void 0 : stateManager.openWidget({ newConversation: true });
+    };
+    searchBar.onclick = () => {
+      displaySearchBar();
+    };
+    searchBar.onfocus = () => {
+      displaySearchBar();
+    };
     const cleanup = () => {
       controller.abort();
       window.removeEventListener("beforeunload", cleanup);
@@ -1960,7 +2223,32 @@ const initIframeTrigger = (options, config) => {
     window.addEventListener("beforeunload", cleanup);
     return void 0;
   } catch (error) {
-    handleInitializationError(apiHost, error, options.widgetKey);
+    handleInitializationError(apiHost, error, widgetKey);
+  }
+};
+const initIframeTrigger = (options, config) => {
+  var _a, _b, _c;
+  const apiHost = getApiHost(options.overrides);
+  const widgetHost = getWidgetHost(options.overrides);
+  const { theme, settings } = config;
+  const encodedRules = base64Encode(
+    JSON.stringify((_a = options.overrides) == null ? void 0 : _a.redirectRules)
+  );
+  const widgetParams = {
+    theme: base64Encode(JSON.stringify(theme)),
+    settings: base64Encode(JSON.stringify(settings)),
+    redirectRules: encodedRules
+  };
+  if ((_b = options.overrides) == null ? void 0 : _b.regions) {
+    widgetParams.regions = base64Encode(
+      JSON.stringify((_c = options.overrides) == null ? void 0 : _c.regions)
+    );
+  }
+  const widgetUrl = `${widgetHost}/?widgetKey=${options.widgetKey}#${new URLSearchParams(widgetParams).toString()}`;
+  if (config.widgetType === "Search") {
+    initSearchBar({ config, widgetUrl, apiHost, widgetHost, widgetKey: options.widgetKey });
+  } else {
+    initWidgetButton({ config, widgetUrl, apiHost, widgetHost, widgetKey: options.widgetKey });
   }
   return void 0;
 };
@@ -2028,6 +2316,45 @@ const initNudgeWidget = (apiHost, widgetKey) => __async(null, null, function* ()
     );
   }
 });
+let routeChangeController = void 0;
+let isHistoryPatched = false;
+let originalPushState;
+let originalReplaceState;
+const listenToRouteChanges = (handler) => {
+  routeChangeController == null ? void 0 : routeChangeController.abort();
+  routeChangeController = new AbortController();
+  const { signal } = routeChangeController;
+  let currentPath = window.location.pathname;
+  const onRouteChange = () => {
+    if (signal.aborted) return;
+    const newPath = window.location.pathname;
+    if (newPath !== currentPath) {
+      currentPath = newPath;
+      handler();
+    }
+  };
+  window.addEventListener("popstate", onRouteChange, { signal });
+  if (!isHistoryPatched) {
+    originalPushState = history.pushState;
+    originalReplaceState = history.replaceState;
+    history.pushState = function(...args) {
+      originalPushState.apply(this, args);
+      setTimeout(onRouteChange, 0);
+    };
+    history.replaceState = function(...args) {
+      originalReplaceState.apply(this, args);
+      setTimeout(onRouteChange, 0);
+    };
+    isHistoryPatched = true;
+  }
+  signal.addEventListener("abort", () => {
+    if (isHistoryPatched) {
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+      isHistoryPatched = false;
+    }
+  });
+};
 let globalBrainfish = null;
 function getBrainfishInstance() {
   if (typeof window !== "undefined" && window.Brainfish) {
@@ -2042,15 +2369,35 @@ function getBrainfishInstance() {
   return globalBrainfish;
 }
 const Brainfish = getBrainfishInstance();
-let initializationPromise = null;
+const initializationPromises = /* @__PURE__ */ new Map();
+const initializedWidgets = /* @__PURE__ */ new Map();
+let routeChangeListenerSetup = false;
 function initializeBrainfish(options, config, apiHost, analyticsApiHost) {
   return __async(this, null, function* () {
     var _a, _b, _c, _d, _e, _f;
     const enableRecording = ((_a = options.overrides) == null ? void 0 : _a.enableRecording) || ((_b = config == null ? void 0 : config.settings) == null ? void 0 : _b.enableRecording) || false;
     const requestedVersion = ((_c = options.overrides) == null ? void 0 : _c.version) || (config == null ? void 0 : config.version);
+    initializedWidgets.set(options.widgetKey, {
+      options,
+      config,
+      apiHost,
+      analyticsApiHost
+    });
     const initPromises = [];
     if (requestedVersion == null ? void 0 : requestedVersion.startsWith("2.")) {
       initIframeTrigger(options, config);
+      if (!routeChangeListenerSetup) {
+        routeChangeListenerSetup = true;
+        listenToRouteChanges(() => {
+          initializedWidgets.forEach(({ options: widgetOptions, config: widgetConfig }) => {
+            var _a2;
+            const widgetVersion = ((_a2 = widgetOptions.overrides) == null ? void 0 : _a2.version) || (widgetConfig == null ? void 0 : widgetConfig.version);
+            if (widgetVersion == null ? void 0 : widgetVersion.startsWith("2.")) {
+              initIframeTrigger(widgetOptions, widgetConfig);
+            }
+          });
+        });
+      }
     } else {
       initPromises.push(initSearchWidget(options, config));
     }
@@ -2126,6 +2473,7 @@ Brainfish.Widgets.init = (options) => __async(null, null, function* () {
     });
     config = fetchedConfig;
   }
+  let initializationPromise = initializationPromises.get(options.widgetKey);
   if (!initializationPromise) {
     initializationPromise = initializeBrainfish(
       options,
@@ -2133,6 +2481,7 @@ Brainfish.Widgets.init = (options) => __async(null, null, function* () {
       apiHost,
       analyticsApiHost
     );
+    initializationPromises.set(options.widgetKey, initializationPromise);
   }
   yield initializationPromise;
   yield initHandOffs(config);