fogbender-react/dist/index.cjs

Fogbender library for React—embedded team messaging on your website

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.tsx
var index_exports = {};
__export(index_exports, {
  FogbenderConfig: () => FogbenderConfig,
  FogbenderFloatingWidget: () => FogbenderFloatingWidget,
  FogbenderFloatyWidget: () => FogbenderFloatyWidget,
  FogbenderHeadlessWidget: () => FogbenderHeadlessWidget,
  FogbenderIsConfigured: () => FogbenderIsConfigured,
  FogbenderProvider: () => FogbenderProvider,
  FogbenderRoomyWidget: () => FogbenderRoomyWidget,
  FogbenderSimpleFloatie: () => FogbenderSimpleFloatie,
  FogbenderSimpleFloatyWidget: () => FogbenderSimpleFloatyWidget,
  FogbenderSimpleRoomyWidget: () => FogbenderSimpleRoomyWidget,
  FogbenderSimpleWidget: () => FogbenderSimpleWidget,
  FogbenderUnreadBadge: () => FogbenderUnreadBadge,
  FogbenderWidget: () => FogbenderWidget,
  createNewFogbender: () => import_fogbender2.createNewFogbender,
  useFogbender: () => useFogbender
});
module.exports = __toCommonJS(index_exports);
var import_react4 = __toESM(require("react"), 1);
var import_fogbender2 = require("fogbender");

// src/FogbenderProvider.tsx
var import_fogbender = require("fogbender");
var import_react = __toESM(require("react"), 1);
var context = import_react.default.createContext(void 0);
context.displayName = "FogbenderProvider";
var useFogbender = () => {
  const fogbender = import_react.default.useContext(context);
  if (!fogbender) {
    throw new Error("No fogbender set, use FogbenderProvider to set one");
  }
  return fogbender;
};
var FogbenderProvider = ({ fogbender, children }) => {
  const defaultFogbender = import_react.default.useRef();
  const value = fogbender || defaultFogbender.current || (defaultFogbender.current = (0, import_fogbender.createNewFogbender)());
  return /* @__PURE__ */ import_react.default.createElement(context.Provider, { value }, children);
};

// src/FogbenderIsConfigured.tsx
var import_react2 = __toESM(require("react"), 1);
var FogbenderIsConfigured = ({ children }) => {
  const isConfigured = useIsConfigured();
  if (isConfigured) {
    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, children);
  } else {
    return null;
  }
};
function useIsConfigured() {
  const fogbender = useFogbender();
  return useFromSnapshot(async () => {
    return fogbender.isClientConfigured();
  }, false);
}
function useFromSnapshot(snapshotGen, initialValue) {
  const [value, setValue] = import_react2.default.useState(initialValue);
  const fogbender = useFogbender();
  import_react2.default.useEffect(() => {
    const unsub = [];
    const run = async () => {
      const snapshot = await snapshotGen();
      unsub.push(snapshot.subscribe(setValue));
    };
    run();
    return () => {
      unsub.forEach((u) => u());
    };
  }, [fogbender]);
  return value;
}

// src/utils.tsx
var import_react3 = __toESM(require("react"), 1);
var noopCleanup = () => {
  return new Promise((resolve) => resolve(() => {
  }));
};
function useRenderComponent(componentRenderer) {
  import_react3.default.useEffect(() => {
    const promise = componentRenderer();
    return () => {
      promise.then((cleanup) => cleanup());
    };
  }, [componentRenderer]);
}

// src/index.tsx
var FogbenderSimpleWidget = ({ clientUrl, env, token }) => {
  const [fogbender, setFogbender] = import_react4.default.useState(void 0);
  import_react4.default.useEffect(() => {
    const fb = (0, import_fogbender2.createNewFogbender)();
    fb.setClientUrl(clientUrl);
    fb.setEnv(env);
    fb.setToken(addVersion(token));
    setFogbender(fb);
  }, []);
  if (!fogbender) {
    return null;
  }
  return /* @__PURE__ */ import_react4.default.createElement(FogbenderProvider, { fogbender }, /* @__PURE__ */ import_react4.default.createElement(FogbenderWidget, null));
};
var FogbenderWidget = () => {
  const divRef = import_react4.default.useRef(null);
  useRenderIframe(divRef, false);
  return /* @__PURE__ */ import_react4.default.createElement("div", { ref: divRef });
};
var FogbenderHeadlessWidget = () => {
  const divRef = import_react4.default.useRef(null);
  useRenderIframe(divRef, true);
  return /* @__PURE__ */ import_react4.default.createElement("div", { ref: divRef });
};
var useRenderIframe = (divRef, headless) => {
  const fogbender = useFogbender();
  useRenderComponent(
    import_react4.default.useCallback(() => {
      if (divRef.current) {
        return fogbender.renderIframe({ headless, rootEl: divRef.current });
      } else {
        return noopCleanup();
      }
    }, [fogbender, headless])
  );
};
var FogbenderFloatingWidget = (props) => {
  useCreateFloatingWidget(props);
  return null;
};
var useCreateFloatingWidget = ({
  verbose,
  openInNewTab,
  closeable,
  defaultOpen
}) => {
  const fogbender = useFogbender();
  useRenderComponent(
    import_react4.default.useCallback(() => {
      return fogbender.createFloatingWidget({ verbose, openInNewTab, closeable, defaultOpen });
    }, [fogbender, verbose, openInNewTab, closeable])
  );
};
var FogbenderUnreadBadge = import_react4.default.memo(() => {
  const divRef = import_react4.default.useRef(null);
  useRenderUnreadBadge(divRef);
  return /* @__PURE__ */ import_react4.default.createElement("div", { ref: divRef });
});
var useRenderUnreadBadge = (divRef) => {
  const fogbender = useFogbender();
  useRenderComponent(
    import_react4.default.useCallback(() => {
      if (divRef.current) {
        return fogbender.renderUnreadBadge({ el: divRef.current });
      } else {
        return noopCleanup();
      }
    }, [fogbender])
  );
};
var FogbenderConfig = ({ clientUrl, env, token, mode = "light" }) => {
  const fogbender = useFogbender();
  import_react4.default.useEffect(() => {
    fogbender.setClientUrl(clientUrl);
    return () => {
      fogbender.setClientUrl(void 0);
    };
  }, [clientUrl]);
  import_react4.default.useEffect(() => {
    fogbender.setEnv(env);
    return () => {
      fogbender.setEnv(void 0);
    };
  }, [clientUrl]);
  import_react4.default.useEffect(() => {
    fogbender.setToken(addVersion(token));
    return () => {
      fogbender.setToken(void 0);
    };
  }, [token]);
  import_react4.default.useEffect(() => {
    fogbender.setMode(mode);
  }, [mode]);
  return null;
};
function addVersion(token) {
  if (token) {
    token.versions = token.versions || {};
    token.versions["fogbender-react"] = "0.6.2";
  }
  return token;
}
var FogbenderSimpleFloatie = ({
  token,
  clientUrl,
  openInNewTab,
  verbose,
  closeable
}) => {
  const fogbender = import_react4.default.useMemo(import_fogbender2.createNewFogbender, []);
  return /* @__PURE__ */ import_react4.default.createElement(FogbenderProvider, { fogbender }, /* @__PURE__ */ import_react4.default.createElement(FogbenderConfig, { clientUrl, token }), /* @__PURE__ */ import_react4.default.createElement(FogbenderIsConfigured, null, /* @__PURE__ */ import_react4.default.createElement(
    FogbenderFloatingWidget,
    {
      key: "" + verbose + ":" + openInNewTab + ":" + closeable,
      verbose,
      openInNewTab,
      closeable
    }
  )));
};
var FogbenderRoomyWidget = FogbenderWidget;
var FogbenderSimpleRoomyWidget = FogbenderSimpleWidget;
var FogbenderFloatyWidget = FogbenderFloatingWidget;
var FogbenderSimpleFloatyWidget = FogbenderSimpleFloatie;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  FogbenderConfig,
  FogbenderFloatingWidget,
  FogbenderFloatyWidget,
  FogbenderHeadlessWidget,
  FogbenderIsConfigured,
  FogbenderProvider,
  FogbenderRoomyWidget,
  FogbenderSimpleFloatie,
  FogbenderSimpleFloatyWidget,
  FogbenderSimpleRoomyWidget,
  FogbenderSimpleWidget,
  FogbenderUnreadBadge,
  FogbenderWidget,
  createNewFogbender,
  useFogbender
});
//# sourceMappingURL=index.cjs.map