fogbender-react/dist/index.js

Fogbender library for React—embedded team messaging on your website

// src/index.tsx
import React4 from "react";
import { createNewFogbender as createNewFogbender2 } from "fogbender";

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

// src/FogbenderIsConfigured.tsx
import React2 from "react";
var FogbenderIsConfigured = ({ children }) => {
  const isConfigured = useIsConfigured();
  if (isConfigured) {
    return /* @__PURE__ */ React2.createElement(React2.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] = React2.useState(initialValue);
  const fogbender = useFogbender();
  React2.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
import React3 from "react";
var noopCleanup = () => {
  return new Promise((resolve) => resolve(() => {
  }));
};
function useRenderComponent(componentRenderer) {
  React3.useEffect(() => {
    const promise = componentRenderer();
    return () => {
      promise.then((cleanup) => cleanup());
    };
  }, [componentRenderer]);
}

// src/index.tsx
var FogbenderSimpleWidget = ({ clientUrl, env, token }) => {
  const [fogbender, setFogbender] = React4.useState(void 0);
  React4.useEffect(() => {
    const fb = createNewFogbender2();
    fb.setClientUrl(clientUrl);
    fb.setEnv(env);
    fb.setToken(addVersion(token));
    setFogbender(fb);
  }, []);
  if (!fogbender) {
    return null;
  }
  return /* @__PURE__ */ React4.createElement(FogbenderProvider, { fogbender }, /* @__PURE__ */ React4.createElement(FogbenderWidget, null));
};
var FogbenderWidget = () => {
  const divRef = React4.useRef(null);
  useRenderIframe(divRef, false);
  return /* @__PURE__ */ React4.createElement("div", { ref: divRef });
};
var FogbenderHeadlessWidget = () => {
  const divRef = React4.useRef(null);
  useRenderIframe(divRef, true);
  return /* @__PURE__ */ React4.createElement("div", { ref: divRef });
};
var useRenderIframe = (divRef, headless) => {
  const fogbender = useFogbender();
  useRenderComponent(
    React4.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(
    React4.useCallback(() => {
      return fogbender.createFloatingWidget({ verbose, openInNewTab, closeable, defaultOpen });
    }, [fogbender, verbose, openInNewTab, closeable])
  );
};
var FogbenderUnreadBadge = React4.memo(() => {
  const divRef = React4.useRef(null);
  useRenderUnreadBadge(divRef);
  return /* @__PURE__ */ React4.createElement("div", { ref: divRef });
});
var useRenderUnreadBadge = (divRef) => {
  const fogbender = useFogbender();
  useRenderComponent(
    React4.useCallback(() => {
      if (divRef.current) {
        return fogbender.renderUnreadBadge({ el: divRef.current });
      } else {
        return noopCleanup();
      }
    }, [fogbender])
  );
};
var FogbenderConfig = ({ clientUrl, env, token, mode = "light" }) => {
  const fogbender = useFogbender();
  React4.useEffect(() => {
    fogbender.setClientUrl(clientUrl);
    return () => {
      fogbender.setClientUrl(void 0);
    };
  }, [clientUrl]);
  React4.useEffect(() => {
    fogbender.setEnv(env);
    return () => {
      fogbender.setEnv(void 0);
    };
  }, [clientUrl]);
  React4.useEffect(() => {
    fogbender.setToken(addVersion(token));
    return () => {
      fogbender.setToken(void 0);
    };
  }, [token]);
  React4.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 = React4.useMemo(createNewFogbender2, []);
  return /* @__PURE__ */ React4.createElement(FogbenderProvider, { fogbender }, /* @__PURE__ */ React4.createElement(FogbenderConfig, { clientUrl, token }), /* @__PURE__ */ React4.createElement(FogbenderIsConfigured, null, /* @__PURE__ */ React4.createElement(
    FogbenderFloatingWidget,
    {
      key: "" + verbose + ":" + openInNewTab + ":" + closeable,
      verbose,
      openInNewTab,
      closeable
    }
  )));
};
var FogbenderRoomyWidget = FogbenderWidget;
var FogbenderSimpleRoomyWidget = FogbenderSimpleWidget;
var FogbenderFloatyWidget = FogbenderFloatingWidget;
var FogbenderSimpleFloatyWidget = FogbenderSimpleFloatie;
export {
  FogbenderConfig,
  FogbenderFloatingWidget,
  FogbenderFloatyWidget,
  FogbenderHeadlessWidget,
  FogbenderIsConfigured,
  FogbenderProvider,
  FogbenderRoomyWidget,
  FogbenderSimpleFloatie,
  FogbenderSimpleFloatyWidget,
  FogbenderSimpleRoomyWidget,
  FogbenderSimpleWidget,
  FogbenderUnreadBadge,
  FogbenderWidget,
  createNewFogbender2 as createNewFogbender,
  useFogbender
};
//# sourceMappingURL=index.js.map