@vamlabs/vam-chatbot 0.1.57 → 0.1.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/web-component.js +1 -1
- package/package.json +1 -1
package/dist/web-component.js
CHANGED
|
@@ -37,7 +37,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
37
37
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
38
38
|
|
|
39
39
|
"use strict";
|
|
40
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/react-dom/client.js\");\n/* harmony import */ var _Chatbot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Chatbot */ \"./Chatbot.jsx\");\n/* harmony import */ var bootstrap_icons_font_bootstrap_icons_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! bootstrap-icons/font/bootstrap-icons.css */ \"./node_modules/bootstrap-icons/font/bootstrap-icons.css\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\nlet globalSheets = null;\n\n// function to add the global style sheets to the context of the shadow root element\nfunction getGlobalStyleSheets() {\n if (globalSheets === null) {\n globalSheets = Array.from(document.styleSheets).map(x => {\n let id = x?.ownerNode?.id;\n const sheet = new CSSStyleSheet();\n if (id === \"chatbot-styles\") {\n const css = Array.from(x.cssRules).map(rule => {\n return rule.cssText;\n }).join(\" \");\n sheet.replaceSync(css);\n }\n return sheet;\n });\n }\n return globalSheets;\n}\nfunction addGlobalStylesToShadowRoot(shadowRoot) {\n shadowRoot.adoptedStyleSheets.push(...getGlobalStyleSheets());\n}\n\n// Function to fetch Bootstrap CSS\nasync function fetchBootstrapCSS() {\n const bootstrapResponse = await fetch(\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css\");\n const bootstrapCSS = await bootstrapResponse.text();\n return [bootstrapCSS];\n}\nclass WebComponent extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({\n mode: \"open\"\n });\n this.root = null; // Store the root instance\n this.
|
|
40
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/react-dom/client.js\");\n/* harmony import */ var _Chatbot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Chatbot */ \"./Chatbot.jsx\");\n/* harmony import */ var bootstrap_icons_font_bootstrap_icons_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! bootstrap-icons/font/bootstrap-icons.css */ \"./node_modules/bootstrap-icons/font/bootstrap-icons.css\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\nlet globalSheets = null;\n\n// function to add the global style sheets to the context of the shadow root element\nfunction getGlobalStyleSheets() {\n if (globalSheets === null) {\n globalSheets = Array.from(document.styleSheets).map(x => {\n let id = x?.ownerNode?.id;\n const sheet = new CSSStyleSheet();\n if (id === \"chatbot-styles\") {\n const css = Array.from(x.cssRules).map(rule => {\n return rule.cssText;\n }).join(\" \");\n sheet.replaceSync(css);\n }\n return sheet;\n });\n }\n return globalSheets;\n}\nfunction addGlobalStylesToShadowRoot(shadowRoot) {\n shadowRoot.adoptedStyleSheets.push(...getGlobalStyleSheets());\n}\n\n// Function to fetch Bootstrap CSS\nasync function fetchBootstrapCSS() {\n const bootstrapResponse = await fetch(\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css\");\n const bootstrapCSS = await bootstrapResponse.text();\n return [bootstrapCSS];\n}\nclass WebComponent extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({\n mode: \"open\"\n });\n this.root = null; // Store the root instance\n this.loadStylesAndRender();\n addGlobalStylesToShadowRoot(this.shadowRoot);\n }\n async loadStylesAndRender() {\n const [bootstrapCSS] = await fetchBootstrapCSS();\n\n // TODO: here the styles are applied to :root inside the shadow dom, but there is not root there.\n // We need to apply the variables on the :host/topmost class level rather than :root.\n const modifiedBootstrapCSS = bootstrapCSS.replace(/:root/g, \":host\");\n\n // Create a style element for Bootstrap styles\n const bootstrapStyleElement = document.createElement(\"style\");\n bootstrapStyleElement.textContent = modifiedBootstrapCSS;\n this.shadowRoot.appendChild(bootstrapStyleElement);\n\n // Render the React component\n this.render();\n }\n addGtmScript() {\n const gtmId = this.getAttribute(\"gtm-id\");\n if (!gtmId) {\n console.error(\"Chatbot GTM ID missing!\");\n return;\n }\n const head = document.createElement(\"head\");\n const script = document.createElement(\"script\");\n script.textContent = `\n (function (w, d, s, l, i) {\n w[l] = w[l] || [];\n w[l].push({ \"gtm.start\": new Date().getTime(), event: \"gtm.js\" });\n var f = d.getElementsByTagName(s)[0],\n j = d.createElement(s),\n dl = l != \"dataLayer\" ? \"&l=\" + l : \"\";\n j.async = true;\n j.src = \"https://www.googletagmanager.com/gtm.js?id=\" + i + dl;\n f.parentNode.insertBefore(j, f);\n })(window, document, \"script\", \"dataLayer\", \"${gtmId}\");\n `;\n\n // Append the script to the head\n head.appendChild(script);\n\n // Append the head to the document\n this.shadowRoot.appendChild(head);\n }\n\n // Function to push data to GTM data layer\n pushToDataLayer(data) {\n if (window.dataLayer) {\n window.dataLayer.push(data);\n } else {\n console.error(\"GTM data layer not available\");\n }\n }\n\n // Example method to send data to GTM\n sendDataToGTM(dataLayerObject) {\n const customData = {\n ...dataLayerObject,\n event: \"bot_click\",\n clientId: this.getAttribute(\"client-id\")\n };\n this.pushToDataLayer(customData);\n }\n connectedCallback() {\n if (!this.root) {\n this.root = react_dom_client__WEBPACK_IMPORTED_MODULE_1__.createRoot(this.shadowRoot);\n }\n this.addGtmScript();\n this.render();\n }\n disconnectedCallback() {\n if (this.root) {\n this.root.unmount();\n }\n }\n static get observedAttributes() {\n return [\"client-id\", \"gtm-id\"];\n }\n attributeChangedCallback(name, oldValue, newValue) {\n if (oldValue !== newValue) {\n this.render();\n }\n }\n render() {\n const clientId = this.getAttribute(\"client-id\");\n if (this.root) {\n this.root.render(/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Chatbot__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n clientId: clientId,\n onTrackEvent: dataLayerObject => this.sendDataToGTM(dataLayerObject)\n }));\n }\n }\n}\ncustomElements.define(\"vam-chatbot\", WebComponent);\n\n//# sourceURL=webpack://VamChatbot/./WebComponent.js?");
|
|
41
41
|
|
|
42
42
|
/***/ }),
|
|
43
43
|
|