embed-dossier-mstr-react/dist/index.js

A production-ready React library for embedding MicroStrategy Dossiers, Reports, and Bot Consumption pages with full TypeScript support.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var src_exports = {};
__export(src_exports, {
  BotConsumptionPage: () => BotConsumptionPage,
  BotConsumptionPageWithAuth: () => BotConsumptionPageWithAuth,
  DashboardEmbed: () => DashboardEmbed,
  DashboardEmbedWithAuth: () => DashboardEmbedWithAuth,
  EVENT_TYPE: () => EVENT_TYPE,
  LibraryPageEmbed: () => LibraryPageEmbed,
  LibraryPageEmbedWithAuth: () => LibraryPageEmbedWithAuth,
  getAuthToken: () => getAuthToken,
  getInfoFromUrl: () => getInfoFromUrl,
  getServerUrl: () => getServerUrl,
  useCreateBotConsumptionPage: () => useCreateBotConsumptionPage,
  useCreateBotConsumptionPageWithAuth: () => useCreateBotConsumptionPageWithAuth,
  useCreateDashboard: () => useCreateDashboard,
  useCreateDashboardWithAuth: () => useCreateDashboardWithAuth,
  useCreateLibraryPage: () => useCreateLibraryPage,
  useCreateLibraryPageWithAuth: () => useCreateLibraryPageWithAuth,
  useLoadMstrSDK: () => useLoadMstrSDK
});
module.exports = __toCommonJS(src_exports);

// src/constants/eventType.ts
var EVENT_TYPE = {
  ON_COMPONENT_SELECTION_CHANGED: "onComponentSelectionChanged",
  ON_DOSSIER_AUTHORING_CLOSED: "onDossierAuthoringClosed",
  ON_DOSSIER_AUTHORING_SAVED: "onDossierAuthoringSaved",
  ON_DOSSIER_INSTANCE_CHANGED: "onDossierInstanceChanged",
  ON_DOSSIER_INSTANCE_ID_CHANGE: "onDossierInstanceIDChange",
  ON_ERROR: "onError",
  ON_FILTER_UPDATED: "onFilterUpdated",
  ON_GRAPHICS_SELECTED: "onGraphicsSelected",
  ON_LAYOUT_CHANGED: "onLayoutChanged",
  ON_LIBRARY_ITEM_SELECTED: "onLibraryItemSelected",
  ON_LIBRARY_ITEM_SELECTION_CLEARED: "onLibraryItemSelectionCleared",
  ON_LIBRARY_MENU_SELECTED: "onLibraryMenuSelected",
  ON_PAGE_LOADED: "onPageLoaded",
  ON_PAGE_RENDER_FINISHED: "onPageRenderFinished",
  ON_PAGE_SWITCHED: "onPageSwitched",
  ON_PANEL_SWITCHED: "onPanelSwitched",
  ON_PROMPT_ANSWERED: "onPromptAnswered",
  ON_PROMPT_LOADED: "onPromptLoaded",
  ON_SESSION_ERROR: "onSessionError",
  ON_VISUALIZATION_RESIZED: "onVisualizationResized",
  ON_VIZ_ELEMENT_CHANGED: "onVisualizationElementsChanged",
  ON_VIZ_SELECTION_CHANGED: "onVizSelectionChanged"
};

// src/hooks/useCreateDashboard.ts
var import_react2 = require("react");

// src/hooks/useLoadMstrSDK.ts
var import_react = require("react");
var useLoadMstrSDK = ({ serverUrlLibrary }) => {
  const [isSdkLoaded, setIsSdkLoaded] = (0, import_react.useState)(false);
  const [isSdkError, setIsSdkError] = (0, import_react.useState)({
    isError: false,
    message: ""
  });
  (0, import_react.useEffect)(() => {
    if (window.microstrategy) {
      setIsSdkLoaded(true);
      return;
    }
    if (!serverUrlLibrary) {
      setIsSdkError({
        isError: true,
        message: "serverUrlLibrary is required to load the MicroStrategy SDK"
      });
      return;
    }
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `${serverUrlLibrary}/javascript/embeddinglib.js`;
    script.onload = () => {
      setIsSdkLoaded(true);
    };
    script.onerror = () => {
      setIsSdkError({
        isError: true,
        message: `Failed to load MicroStrategy SDK from ${serverUrlLibrary}`
      });
    };
    document.head.appendChild(script);
    return () => {
      script.remove();
    };
  }, [serverUrlLibrary]);
  return { isSdkLoaded, isSdkError };
};

// src/hooks/useCreateDashboard.ts
var useCreateDashboard = ({
  serverUrlLibrary,
  config
}) => {
  const containerRef = (0, import_react2.useRef)(null);
  const [dashboard, setDashboard] = (0, import_react2.useState)(null);
  const dashboardRef = (0, import_react2.useRef)(null);
  const [isDashboardError, setIsDashboardError] = (0, import_react2.useState)(false);
  const { isSdkLoaded } = useLoadMstrSDK({ serverUrlLibrary });
  (0, import_react2.useEffect)(() => {
    if (!isSdkLoaded)
      return;
    let mounted = true;
    async function createDashboard() {
      try {
        const dossier = await window.microstrategy.dossier.create({
          ...config,
          placeholder: containerRef.current
        });
        if (mounted) {
          dashboardRef.current = dossier;
          setDashboard(dossier);
        }
      } catch (error) {
        if (mounted) {
          console.error("Failed to create dashboard:", error);
          setIsDashboardError(true);
        }
      }
    }
    createDashboard();
    return () => {
      mounted = false;
      if (dashboardRef.current) {
        try {
          dashboardRef.current.close();
        } catch {
        }
        dashboardRef.current = null;
      }
    };
  }, [isSdkLoaded]);
  return {
    dashboard,
    containerRef,
    isSdkLoaded,
    isDashboardError
  };
};

// src/utils.ts
var getInfoFromUrl = (url) => {
  if (!url || typeof url !== "string") {
    throw new Error("A valid MicroStrategy dossier URL is required");
  }
  let parsed;
  try {
    parsed = new URL(url);
  } catch {
    throw new Error(
      `Invalid URL format: "${url}". Expected format: https://{host}/{libraryName}/app/{projectId}/{dossierId}`
    );
  }
  const pathSegments = parsed.pathname.split("/").filter(Boolean);
  if (pathSegments.length < 4 || pathSegments[1] !== "app") {
    throw new Error(
      `Invalid MicroStrategy URL path: "${parsed.pathname}". Expected format: /{libraryName}/app/{projectId}/{dossierId}`
    );
  }
  const serverUrl = parsed.origin;
  const libraryName = pathSegments[0];
  const serverUrlLibrary = `${serverUrl}/${libraryName}`;
  const projectId = pathSegments[2];
  const dossierId = pathSegments[3];
  return { serverUrl, serverUrlLibrary, libraryName, projectId, dossierId };
};
var getServerUrl = (url) => {
  const appIndex = url.indexOf("/app/");
  if (appIndex === -1) {
    throw new Error(
      `URL does not contain "/app/" segment: "${url}". Expected format: https://{host}/{libraryName}/app/{projectId}/{dossierId}`
    );
  }
  return url.substring(0, appIndex);
};
var getAuthToken = async ({
  serverUrlLibrary
}) => {
  const options = {
    method: "GET",
    credentials: "include",
    mode: "cors",
    headers: { "content-type": "application/json" }
  };
  try {
    const response = await fetch(`${serverUrlLibrary}/api/auth/token`, options);
    if (response.ok) {
      const data = await response.json();
      return data.token;
    }
    return void 0;
  } catch (error) {
    console.error("Failed to get auth token:", error);
    return void 0;
  }
};

// src/components/DashboardEmbed.tsx
var import_clsx = require("clsx");
var import_jsx_runtime = require("react/jsx-runtime");
var DashboardEmbed = ({
  dossierUrl,
  className,
  style,
  config
}) => {
  let serverUrlLibrary = "";
  try {
    const urlInfo = getInfoFromUrl(dossierUrl);
    serverUrlLibrary = urlInfo.serverUrlLibrary;
  } catch (error) {
    console.error("Failed to parse dossier URL:", error);
  }
  const { containerRef } = useCreateDashboard({
    serverUrlLibrary,
    config: {
      url: dossierUrl,
      ...config
    }
  });
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, className: (0, import_clsx.clsx)(className), style });
};

// src/hooks/useCreateDashboardWithAuth.ts
var import_react3 = require("react");
var useCreateDashboardWithAuth = ({
  serverUrlLibrary,
  placeholder,
  config,
  loginMode,
  username,
  password
}) => {
  const [dashboard, setDashboard] = (0, import_react3.useState)(null);
  const [authState, setAuthState] = (0, import_react3.useState)({
    isAuthenticated: false,
    isAuthenticating: false,
    error: null
  });
  const { isSdkLoaded } = useLoadMstrSDK({ serverUrlLibrary });
  (0, import_react3.useEffect)(() => {
    if (!isSdkLoaded || !placeholder)
      return;
    let mounted = true;
    const initializeDashboard = async () => {
      if (!mounted)
        return;
      setAuthState((prev) => ({
        ...prev,
        isAuthenticating: true,
        error: null
      }));
      try {
        switch (loginMode) {
          case "standard":
          case "ldap": {
            if (!username || !password) {
              throw new Error(
                "Username and password are required for standard/LDAP authentication"
              );
            }
            const standardOptions = {
              method: "POST",
              credentials: "include",
              mode: "cors",
              headers: { "content-type": "application/json" },
              body: JSON.stringify({
                loginMode: 1,
                username,
                password
              })
            };
            await fetch(`${serverUrlLibrary}/api/auth/login`, standardOptions);
            break;
          }
          case "guest": {
            const guestOptions = {
              method: "POST",
              credentials: "include",
              mode: "cors",
              headers: { "content-type": "application/json" },
              body: JSON.stringify({ loginMode: 8 })
            };
            await fetch(`${serverUrlLibrary}/api/auth/login`, guestOptions);
            break;
          }
          case "saml":
            try {
              await window.microstrategy.auth.samlLogin(serverUrlLibrary);
            } catch (e) {
              if (e instanceof Error && e.message.includes("Failed to open a new tab")) {
                throw new Error(
                  "Please enable popups to be directed to the SAML login site"
                );
              }
              throw e;
            }
            break;
          case "oidc":
            try {
              await window.microstrategy.auth.oidcLogin(serverUrlLibrary);
            } catch (e) {
              if (e instanceof Error && e.message.includes("Failed to open a new tab")) {
                throw new Error(
                  "Please enable popups to be directed to the OIDC login site"
                );
              }
              throw e;
            }
            break;
        }
        const dossier = await window.microstrategy.dossier.create({
          ...config,
          placeholder,
          enableCustomAuthentication: true,
          customAuthenticationType: window.microstrategy.dossier.CustomAuthenticationType.AUTH_TOKEN,
          getLoginToken: async () => {
            const options = {
              method: "GET",
              credentials: "include",
              mode: "cors",
              headers: { "content-type": "application/json" }
            };
            const response = await fetch(
              `${serverUrlLibrary}/api/auth/token`,
              options
            );
            return response.ok ? response.headers.get("x-mstr-authtoken") : null;
          }
        });
        if (mounted) {
          setDashboard(dossier);
          setAuthState((prev) => ({ ...prev, isAuthenticated: true }));
        }
      } catch (error) {
        if (mounted) {
          console.error("Dashboard auth error:", error);
          setAuthState((prev) => ({
            ...prev,
            error: error instanceof Error ? error.message : "Failed to initialize dashboard",
            isAuthenticated: false
          }));
        }
      } finally {
        if (mounted) {
          setAuthState((prev) => ({ ...prev, isAuthenticating: false }));
        }
      }
    };
    initializeDashboard();
    return () => {
      mounted = false;
    };
  }, [
    isSdkLoaded,
    placeholder,
    loginMode,
    serverUrlLibrary,
    config,
    username,
    password
  ]);
  return {
    dashboard,
    ...authState
  };
};

// src/components/DashboardEmbedWithAuth.tsx
var import_clsx2 = require("clsx");
var import_react4 = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var DashboardEmbedWithAuth = ({
  dossierUrl,
  className,
  style,
  config,
  loginMode,
  username,
  password,
  loadingComponent = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "Loading..." }),
  errorComponent = (error) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
    "div",
    {
      style: {
        textAlign: "center",
        color: "#ef4444",
        padding: "16px",
        maxWidth: "448px"
      },
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { fontSize: "18px", fontWeight: 600, marginBottom: "8px" }, children: "Authentication Error" }),
        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: error })
      ]
    }
  )
}) => {
  const { serverUrlLibrary } = getInfoFromUrl(dossierUrl);
  const divRef = (0, import_react4.useRef)(null);
  const { isAuthenticating, error } = useCreateDashboardWithAuth({
    serverUrlLibrary,
    placeholder: divRef.current,
    config: {
      url: dossierUrl,
      enableResponsive: true,
      enableCustomAuthentication: true,
      containerHeight: "600px",
      containerWidth: "100%",
      ...config
    },
    loginMode,
    username,
    password
  });
  if (isAuthenticating) {
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: loadingComponent });
  }
  if (error) {
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: typeof errorComponent === "function" ? errorComponent(error) : errorComponent });
  }
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    "div",
    {
      ref: divRef,
      className: (0, import_clsx2.clsx)(className),
      style: { width: "100%", height: "600px", ...style }
    }
  );
};

// src/hooks/useCreateLibraryPage.ts
var import_react5 = require("react");
var useCreateLibraryPage = ({
  serverUrlLibrary,
  config
}) => {
  const libraryPageRef = (0, import_react5.useRef)(null);
  const [libraryPage, setLibraryPage] = (0, import_react5.useState)(null);
  const [libraryPageState, setLibraryPageState] = (0, import_react5.useState)({
    isLoading: false,
    error: null
  });
  const { isSdkLoaded } = useLoadMstrSDK({ serverUrlLibrary });
  const prevConfigRef = (0, import_react5.useRef)(config);
  (0, import_react5.useEffect)(() => {
    if (!isSdkLoaded)
      return;
    if (!libraryPage && !libraryPageState.isLoading) {
      createLibraryPage();
    }
  }, [isSdkLoaded]);
  (0, import_react5.useEffect)(() => {
    const configChanged = JSON.stringify(config) !== JSON.stringify(prevConfigRef.current);
    if (libraryPage && configChanged) {
      createLibraryPage();
    }
    prevConfigRef.current = config;
  }, [config]);
  const createLibraryPage = async () => {
    setLibraryPageState((prev) => ({
      ...prev,
      isLoading: true,
      error: null
    }));
    try {
      const embeddingContext = await window.microstrategy.embeddingContexts.embedLibraryPage({
        placeholder: libraryPageRef.current,
        serverUrl: serverUrlLibrary,
        errorHandler: (error) => {
          console.error("Library page error:", error);
          setLibraryPageState((prev) => ({
            ...prev,
            error: error.message || "Failed to load library page"
          }));
        },
        sessionErrorHandler: (error) => {
          console.error("Session error:", error);
          setLibraryPageState((prev) => ({
            ...prev,
            error: "Session expired. Please refresh the page."
          }));
        },
        ...config
      });
      setLibraryPage(embeddingContext);
    } catch (error) {
      setLibraryPageState((prev) => ({
        ...prev,
        error: error instanceof Error ? error.message : "Failed to create library page"
      }));
    } finally {
      setLibraryPageState((prev) => ({ ...prev, isLoading: false }));
    }
  };
  return {
    libraryPage,
    libraryPageRef,
    isSdkLoaded,
    isLoading: libraryPageState.isLoading,
    error: libraryPageState.error
  };
};

// src/components/LibraryPageEmbed.tsx
var import_clsx3 = require("clsx");
var import_jsx_runtime3 = require("react/jsx-runtime");
var LibraryPageEmbed = ({
  serverUrlLibrary,
  config,
  className,
  style
}) => {
  const { libraryPageRef } = useCreateLibraryPage({
    serverUrlLibrary,
    config
  });
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: libraryPageRef, className: (0, import_clsx3.clsx)(className), style });
};

// src/hooks/useCreateLibraryPageWithAuth.ts
var import_react6 = require("react");
var useCreateLibraryPageWithAuth = ({
  serverUrlLibrary,
  placeholder,
  config,
  loginMode,
  username,
  password
}) => {
  const [libraryPage, setLibraryPage] = (0, import_react6.useState)(null);
  const [authState, setAuthState] = (0, import_react6.useState)({
    isAuthenticated: false,
    error: null
  });
  const { isSdkLoaded } = useLoadMstrSDK({ serverUrlLibrary });
  (0, import_react6.useEffect)(() => {
    if (!isSdkLoaded || !placeholder)
      return;
    let mounted = true;
    const initializeLibraryPage = async () => {
      if (!mounted)
        return;
      setAuthState((prev) => ({
        ...prev,
        error: null
      }));
      try {
        switch (loginMode) {
          case "standard":
          case "ldap": {
            if (!username || !password) {
              throw new Error(
                "Username and password are required for standard/LDAP authentication"
              );
            }
            await fetch(`${serverUrlLibrary}/api/auth/login`, {
              method: "POST",
              credentials: "include",
              mode: "cors",
              headers: { "content-type": "application/json" },
              body: JSON.stringify({ loginMode: 1, username, password })
            });
            break;
          }
          case "guest": {
            await fetch(`${serverUrlLibrary}/api/auth/login`, {
              method: "POST",
              credentials: "include",
              mode: "cors",
              headers: { "content-type": "application/json" },
              body: JSON.stringify({ loginMode: 8 })
            });
            break;
          }
          case "saml":
            await window.microstrategy.auth.samlLogin(serverUrlLibrary);
            break;
          case "oidc":
            await window.microstrategy.auth.oidcLogin(serverUrlLibrary);
            break;
        }
        const page = await window.microstrategy.embeddingContexts.embedLibraryPage({
          ...config,
          placeholder,
          serverUrl: serverUrlLibrary,
          enableCustomAuthentication: true,
          customAuthenticationType: window.microstrategy.dossier.CustomAuthenticationType.AUTH_TOKEN,
          getLoginToken: async () => {
            const response = await fetch(
              `${serverUrlLibrary}/api/auth/token`,
              {
                method: "GET",
                credentials: "include",
                mode: "cors",
                headers: { "content-type": "application/json" }
              }
            );
            return response.ok ? response.headers.get("x-mstr-authtoken") : null;
          }
        });
        if (mounted) {
          setLibraryPage(page);
          setAuthState((prev) => ({ ...prev, isAuthenticated: true }));
        }
      } catch (error) {
        if (mounted) {
          console.error("Library page auth error:", error);
          setAuthState((prev) => ({
            ...prev,
            error: error instanceof Error ? error.message : "Failed to initialize library page",
            isAuthenticated: false
          }));
        }
      } finally {
        if (mounted) {
          setAuthState((prev) => ({ ...prev }));
        }
      }
    };
    initializeLibraryPage();
    return () => {
      mounted = false;
    };
  }, [
    isSdkLoaded,
    placeholder,
    loginMode,
    serverUrlLibrary,
    config,
    username,
    password
  ]);
  return {
    libraryPage,
    ...authState
  };
};

// src/components/LibraryPageEmbedWithAuth.tsx
var import_clsx4 = require("clsx");
var import_react7 = require("react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var LibraryPageEmbedWithAuth = ({
  serverUrlLibrary,
  config,
  loginMode,
  username,
  password,
  className,
  style,
  loadingComponent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: "Loading..." }),
  errorComponent = (error) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: error })
}) => {
  const containerRef = (0, import_react7.useRef)(null);
  const { libraryPage, isAuthenticated, error } = useCreateLibraryPageWithAuth({
    serverUrlLibrary,
    placeholder: containerRef.current,
    config,
    loginMode,
    username,
    password
  });
  if (error) {
    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: errorComponent(error) });
  }
  if (!isAuthenticated || !libraryPage) {
    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: loadingComponent });
  }
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    "div",
    {
      ref: containerRef,
      className: (0, import_clsx4.clsx)(className),
      style: { width: "100%", height: "600px", ...style }
    }
  );
};

// src/hooks/useCreateBotConsumptionPage.ts
var import_react8 = require("react");
var useCreateBotConsumptionPage = ({
  serverUrlLibrary,
  projectId,
  objectId,
  config
}) => {
  const botConsumptionPageRef = (0, import_react8.useRef)(null);
  const [botConsumptionPage, setBotConsumptionPage] = (0, import_react8.useState)(null);
  const [isBotConsumptionPageError, setIsBotConsumptionPageError] = (0, import_react8.useState)(false);
  const { isSdkLoaded, isSdkError } = useLoadMstrSDK({ serverUrlLibrary });
  (0, import_react8.useEffect)(() => {
    if (!isSdkLoaded)
      return;
    async function createBotConsumptionPage() {
      try {
        const botConsumptionPage2 = await window.microstrategy.embeddingContexts.embedBotConsumptionPage({
          ...config,
          placeholder: botConsumptionPageRef.current,
          serverUrl: serverUrlLibrary,
          projectId,
          objectId
        });
        setBotConsumptionPage(botConsumptionPage2);
      } catch (error) {
        console.error(error);
        setIsBotConsumptionPageError(true);
      }
    }
    createBotConsumptionPage();
  }, [isSdkLoaded]);
  return {
    botConsumptionPage,
    botConsumptionPageRef,
    isBotConsumptionPageError,
    isSdkError,
    isSdkLoaded
  };
};

// src/components/BotConsumptionPage.tsx
var import_clsx5 = require("clsx");
var import_jsx_runtime5 = require("react/jsx-runtime");
var BotConsumptionPage = ({
  serverUrlLibrary,
  projectId,
  objectId,
  config,
  className,
  style
}) => {
  const { botConsumptionPageRef } = useCreateBotConsumptionPage({
    serverUrlLibrary,
    projectId,
    objectId,
    config
  });
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    "div",
    {
      ref: botConsumptionPageRef,
      className: (0, import_clsx5.clsx)(className),
      style
    }
  );
};

// src/hooks/useCreateBotConsumptionPageWithAuth.ts
var import_react9 = require("react");
var useCreateBotConsumptionPageWithAuth = ({
  serverUrlLibrary,
  placeholder,
  projectId,
  objectId,
  config,
  loginMode,
  username,
  password
}) => {
  const [botConsumptionPage, setBotConsumptionPage] = (0, import_react9.useState)(null);
  const [authState, setAuthState] = (0, import_react9.useState)({
    isAuthenticated: false,
    isAuthenticating: false,
    error: null
  });
  const { isSdkLoaded } = useLoadMstrSDK({ serverUrlLibrary });
  (0, import_react9.useEffect)(() => {
    if (!isSdkLoaded || !placeholder)
      return;
    let mounted = true;
    const initializeBotConsumptionPage = async () => {
      if (!mounted)
        return;
      setAuthState((prev) => ({
        ...prev,
        isAuthenticating: true,
        error: null
      }));
      try {
        switch (loginMode) {
          case "standard":
          case "ldap": {
            if (!username || !password) {
              throw new Error(
                "Username and password are required for standard/LDAP authentication"
              );
            }
            await fetch(`${serverUrlLibrary}/api/auth/login`, {
              method: "POST",
              credentials: "include",
              mode: "cors",
              headers: { "content-type": "application/json" },
              body: JSON.stringify({ loginMode: 1, username, password })
            });
            break;
          }
          case "guest": {
            await fetch(`${serverUrlLibrary}/api/auth/login`, {
              method: "POST",
              credentials: "include",
              mode: "cors",
              headers: { "content-type": "application/json" },
              body: JSON.stringify({ loginMode: 8 })
            });
            break;
          }
          case "saml":
            await window.microstrategy.auth.samlLogin(serverUrlLibrary);
            break;
          case "oidc":
            await window.microstrategy.auth.oidcLogin(serverUrlLibrary);
            break;
        }
        const botPage = await window.microstrategy.embeddingContexts.embedBotConsumptionPage({
          ...config,
          placeholder,
          serverUrl: serverUrlLibrary,
          projectId,
          objectId,
          enableCustomAuthentication: true,
          customAuthenticationType: window.microstrategy.dossier.CustomAuthenticationType.AUTH_TOKEN,
          getLoginToken: async () => {
            const response = await fetch(
              `${serverUrlLibrary}/api/auth/token`,
              {
                method: "GET",
                credentials: "include",
                mode: "cors",
                headers: { "content-type": "application/json" }
              }
            );
            return response.ok ? response.headers.get("x-mstr-authtoken") : null;
          }
        });
        if (mounted) {
          setBotConsumptionPage(botPage);
          setAuthState((prev) => ({ ...prev, isAuthenticated: true }));
        }
      } catch (error) {
        if (mounted) {
          console.error("Bot consumption page auth error:", error);
          setAuthState((prev) => ({
            ...prev,
            error: error instanceof Error ? error.message : "Failed to initialize bot consumption page",
            isAuthenticated: false
          }));
        }
      } finally {
        if (mounted) {
          setAuthState((prev) => ({ ...prev, isAuthenticating: false }));
        }
      }
    };
    initializeBotConsumptionPage();
    return () => {
      mounted = false;
    };
  }, [
    isSdkLoaded,
    placeholder,
    loginMode,
    serverUrlLibrary,
    projectId,
    objectId,
    config,
    username,
    password
  ]);
  return {
    botConsumptionPage,
    ...authState
  };
};

// src/components/BotConsumptionPageWithAuth.tsx
var import_clsx6 = require("clsx");
var import_react10 = require("react");
var import_jsx_runtime6 = require("react/jsx-runtime");
var BotConsumptionPageWithAuth = ({
  serverUrlLibrary,
  projectId,
  objectId,
  config,
  loginMode,
  username,
  password,
  className,
  style,
  loadingComponent = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: "Loading..." }),
  errorComponent = (error) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: error })
}) => {
  const containerRef = (0, import_react10.useRef)(null);
  const { isAuthenticated, isAuthenticating, error } = useCreateBotConsumptionPageWithAuth({
    serverUrlLibrary,
    placeholder: containerRef.current,
    projectId,
    objectId,
    config,
    loginMode,
    username,
    password
  });
  if (isAuthenticating) {
    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: loadingComponent });
  }
  if (error) {
    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: errorComponent(error) });
  }
  if (!isAuthenticated) {
    return null;
  }
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
    "div",
    {
      ref: containerRef,
      className: (0, import_clsx6.clsx)(className),
      style: { width: "100%", height: "600px", ...style }
    }
  );
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  BotConsumptionPage,
  BotConsumptionPageWithAuth,
  DashboardEmbed,
  DashboardEmbedWithAuth,
  EVENT_TYPE,
  LibraryPageEmbed,
  LibraryPageEmbedWithAuth,
  getAuthToken,
  getInfoFromUrl,
  getServerUrl,
  useCreateBotConsumptionPage,
  useCreateBotConsumptionPageWithAuth,
  useCreateDashboard,
  useCreateDashboardWithAuth,
  useCreateLibraryPage,
  useCreateLibraryPageWithAuth,
  useLoadMstrSDK
});