@cognigy/webchat 3.47.0 → 3.48.0

package/OSS_LICENSES.txt

@@ -1,4 +1,4 @@
-Created on 13-07-2026 at 07:51:23
+Created on 27-07-2026 at 12:11:28
 
 {
   "@babel/code-frame@7.29.0": {
@@ -157,7 +157,7 @@ Created on 13-07-2026 at 07:51:23
     "licenseFile": "node_modules/@cognigy/chat-components/node_modules/@braintree/sanitize-url/LICENSE",
     "copyright": "Copyright (c) 2017 Braintree"
   },
-  "@cognigy/chat-components@0.77.0": {
+  "@cognigy/chat-components@0.78.0": {
     "licenses": "MIT*",
     "repository": "https://github.com/Cognigy/chat-components",
     "licenseFile": "node_modules/@cognigy/chat-components/LICENSE",
@@ -170,7 +170,7 @@ Created on 13-07-2026 at 07:51:23
     "licenseFile": "node_modules/@cognigy/socket-client/LICENSE",
     "copyright": "Copyright (c) 2019 Cognigy GmbH"
   },
-  "@cognigy/webchat@3.47.0": {
+  "@cognigy/webchat@3.48.0": {
     "licenses": "MIT*",
     "repository": "https://github.com/Cognigy/Webchat",
     "publisher": "Cognigy GmbH",

package/dist/webchat.esm.js

@@ -1,7 +1,7 @@
 /*!
- * webchat.esm.js v3.47.0
- * https://github.com/Cognigy/Webchat/tree/v3.47.0
- * https://github.com/Cognigy/Webchat/tree/v3.47.0/OSS_LICENSES.txt
+ * webchat.esm.js v3.48.0
+ * https://github.com/Cognigy/Webchat/tree/v3.48.0
+ * https://github.com/Cognigy/Webchat/tree/v3.48.0/OSS_LICENSES.txt
  */
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE_react_dom_7dac9eee__ from "react-dom";
@@ -45281,6 +45281,7 @@ function setHasAcceptedTermsInStorage(browserStorage, userId) {
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   IH: () => (/* binding */ stripHtmlToInertText),
 /* harmony export */   p9: () => (/* binding */ sanitizeHTML)
 /* harmony export */ });
 /* unused harmony exports allowedHtmlTags, allowedHtmlAttributes */
@@ -45302,6 +45303,15 @@ const sanitizeHTML = text => {
   } : config;
   return dompurify__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .A.sanitize(text, configToUse).toString();
 };
+const stripHtmlToInertText = text => {
+  // 1. strip tags: parse as HTML and keep only the text content
+  const stripped = new DOMParser().parseFromString(text, "text/html").body.textContent || "";
+  // 2. re-escape so <, >, & render as literal characters and can never
+  //    be reinterpreted as markup downstream (robust to nested encoding)
+  const escaper = document.createElement("div");
+  escaper.textContent = stripped;
+  return escaper.innerHTML;
+};
 
 /***/ },
 
@@ -46709,7 +46719,7 @@ const createMessageMiddleware = client => store => next => action => {
           text = (0,_helper_sanitize__WEBPACK_IMPORTED_MODULE_3__/* .sanitizeHTML */ .p9)(text || "");
         }
         if (store.getState().config.settings.widgetSettings.disableHtmlInput) {
-          text = new DOMParser().parseFromString(text || "", "text/html").body.textContent || "";
+          text = (0,_helper_sanitize__WEBPACK_IMPORTED_MODULE_3__/* .stripHtmlToInertText */ .IH)(text || "");
         }
 
         // data is either a non-empty object or null
@@ -57654,19 +57664,19 @@ article ._wrapper_zhv80_1 ._list_zhv80_8 ._listItemRoot_zhv80_8 {
 ._mainButtonWrapper_zhv80_144 {
 	padding: 16px;
 }
-._slideItem_1prat_1 {
+._slideItem_ldua9_1 {
 	position: relative;
 	width: 206px;
 	/* height: 150px; */
 	overflow: hidden;
 }
 
-._slideItem_1prat_1 ._top_1prat_8 {
+._slideItem_ldua9_1 ._top_ldua9_8 {
 	position: relative;
 	border-radius: var(--cc-bubble-border-radius);
 }
 
-._slideItem_1prat_1 ._bottom_1prat_13 {
+._slideItem_ldua9_1 ._bottom_ldua9_13 {
 	border-bottom-left-radius: var(--cc-bubble-border-radius);
 	border-bottom-right-radius: var(--cc-bubble-border-radius);
 	border: 1px solid var(--cc-black-80);
@@ -57677,7 +57687,7 @@ article ._wrapper_zhv80_1 ._list_zhv80_8 ._listItemRoot_zhv80_8 {
 	padding: 8px;
 }
 
-._slideItem_1prat_1 ._top_1prat_8 img {
+._slideItem_ldua9_1 ._top_ldua9_8 img {
 	aspect-ratio: 206/150;
 	object-fit: cover;
 	object-position: left;
@@ -57687,7 +57697,7 @@ article ._wrapper_zhv80_1 ._list_zhv80_8 ._listItemRoot_zhv80_8 {
 	outline: none;
 }
 
-._slideItem_1prat_1 ._brokenImage_1prat_34 {
+._slideItem_ldua9_1 ._brokenImage_ldua9_34 {
 	aspect-ratio: 206/150;
 	width: 100%;
 	display: block;
@@ -57696,14 +57706,18 @@ article ._wrapper_zhv80_1 ._list_zhv80_8 ._listItemRoot_zhv80_8 {
 	background-color: var(--cc-black-80);
 }
 
-._slideItem_1prat_1 ._hasExtraInfo_1prat_43,
-._slideItem_1prat_1 ._hasExtraInfo_1prat_43 img,
-._slideItem_1prat_1 ._brokenImage_1prat_34 {
+._slideItem_ldua9_1 ._hasExtraInfo_ldua9_43,
+._slideItem_ldua9_1 ._hasExtraInfo_ldua9_43 img,
+._slideItem_ldua9_1 ._brokenImage_ldua9_34 {
 	border-bottom-left-radius: 0px;
 	border-bottom-right-radius: 0px;
 }
 
-._slideItem_1prat_1 ._top_1prat_8 h4 {
+/*
+** Default (legacy) layout: the title overlays the bottom of the image.
+** Used when \`galleryCardTitleBelowImage\` is not enabled.
+*/
+._slideItem_ldua9_1 ._top_ldua9_8 h4 {
 	position: absolute;
 	margin: 0px;
 	margin-inline-start: 8px;
@@ -57711,12 +57725,17 @@ article ._wrapper_zhv80_1 ._list_zhv80_8 ._listItemRoot_zhv80_8 {
 	color: var(--cc-white);
 }
 
-._slideItem_1prat_1 ._bottom_1prat_13 p {
+/*
+** Opt-in layout (galleryCardTitleBelowImage): the title moves into the content
+** block beneath the image, so it shares the subtitle's flush margins/padding.
+*/
+._slideItem_ldua9_1 ._bottom_ldua9_13 p,
+._slideItem_ldua9_1 ._bottom_ldua9_13 h4 {
 	padding: 0px;
 	margin: 0px;
 }
 
-._slideItem_1prat_1 ._bottom_1prat_13 ._buttonListItem_1prat_63 {
+._slideItem_ldua9_1 ._bottom_ldua9_13 ._buttonListItem_ldua9_72 {
 	width: 100%;
 }
 
@@ -57726,7 +57745,7 @@ article ._wrapper_zhv80_1 ._list_zhv80_8 ._listItemRoot_zhv80_8 {
 ** The idea is to integrate with modules CSS in order to increase the specificity
 ** and avoid conflicts on consumer apps
 */
-article .swiper._wrapper_1prat_73 {
+article .swiper._wrapper_ldua9_82 {
 	margin-left: -20px;
 	margin-right: -20px;
 	padding-left: 20px;
@@ -57740,7 +57759,7 @@ article .swiper._wrapper_1prat_73 {
 	z-index: 1;
 	display: block;
 }
-article .swiper._wrapper_1prat_73 .swiper-wrapper {
+article .swiper._wrapper_ldua9_82 .swiper-wrapper {
 	position: relative;
 	width: 100%;
 	/* height: 100%; */
@@ -57750,15 +57769,15 @@ article .swiper._wrapper_1prat_73 .swiper-wrapper {
 	transition-timing-function: initial;
 	box-sizing: content-box;
 }
-article .swiper._wrapper_1prat_73 .swiper-android .swiper-slide,
-article .swiper._wrapper_1prat_73 .swiper-ios .swiper-slide,
-article .swiper._wrapper_1prat_73 .swiper-wrapper {
+article .swiper._wrapper_ldua9_82 .swiper-android .swiper-slide,
+article .swiper._wrapper_ldua9_82 .swiper-ios .swiper-slide,
+article .swiper._wrapper_ldua9_82 .swiper-wrapper {
 	transform: translate3d(0px, 0, 0);
 }
-article .swiper._wrapper_1prat_73 .swiper-horizontal {
+article .swiper._wrapper_ldua9_82 .swiper-horizontal {
 	touch-action: pan-y;
 }
-article .swiper._wrapper_1prat_73 .swiper-slide {
+article .swiper._wrapper_ldua9_82 .swiper-slide {
 	flex-shrink: 0;
 	width: 100%;
 	height: 100%;
@@ -57766,15 +57785,15 @@ article .swiper._wrapper_1prat_73 .swiper-slide {
 	transition-property: transform;
 	display: block;
 }
-article .swiper._wrapper_1prat_73 .swiper-slide-invisible-blank {
+article .swiper._wrapper_ldua9_82 .swiper-slide-invisible-blank {
 	visibility: hidden;
 }
 
 /*
 ** SWIPER PAGINATION
 */
-article .swiper._wrapper_1prat_73 .gallery-button-prev,
-article .swiper._wrapper_1prat_73 .gallery-button-next {
+article .swiper._wrapper_ldua9_82 .gallery-button-prev,
+article .swiper._wrapper_ldua9_82 .gallery-button-next {
 	position: absolute;
 	top: calc(150px / 2 - 8px);
 	z-index: 10;
@@ -57787,51 +57806,51 @@ article .swiper._wrapper_1prat_73 .gallery-button-next {
 	display: flex;
 	align-items: center;
 }
-article .swiper._wrapper_1prat_73 .gallery-button-prev {
+article .swiper._wrapper_ldua9_82 .gallery-button-prev {
 	left: 20px;
 }
-article .swiper._wrapper_1prat_73 .gallery-button-next {
+article .swiper._wrapper_ldua9_82 .gallery-button-next {
 	right: 20px;
 	transform: rotate(180deg);
 }
-article .swiper._wrapper_1prat_73 .gallery-button-prev:dir(rtl) {
+article .swiper._wrapper_ldua9_82 .gallery-button-prev:dir(rtl) {
 	left: unset;
 	right: 20px;
 	transform: rotate(180deg);
 }
-article .swiper._wrapper_1prat_73 .gallery-button-next:dir(rtl) {
+article .swiper._wrapper_ldua9_82 .gallery-button-next:dir(rtl) {
 	right: unset;
 	left: 20px;
 	transform: rotate(0deg);
 }
-article .swiper._wrapper_1prat_73 .swiper-button-disabled {
+article .swiper._wrapper_ldua9_82 .swiper-button-disabled {
 	opacity: 0;
 }
 
 /*
 ** SWIPER NAVIGATION
 */
-article .swiper._wrapper_1prat_73 .swiper-pagination {
+article .swiper._wrapper_ldua9_82 .swiper-pagination {
 	position: absolute;
 	text-align: center;
 	transition: 300ms opacity;
 	transform: translate3d(0, 0, 0);
 	z-index: 10;
 }
-article .swiper._wrapper_1prat_73 .swiper-pagination.swiper-pagination-hidden {
+article .swiper._wrapper_ldua9_82 .swiper-pagination.swiper-pagination-hidden {
 	opacity: 0;
 }
-article .swiper._wrapper_1prat_73 .swiper-pagination-disabled > .swiper-pagination,
-article .swiper._wrapper_1prat_73 .swiper-pagination.swiper-pagination-disabled {
+article .swiper._wrapper_ldua9_82 .swiper-pagination-disabled > .swiper-pagination,
+article .swiper._wrapper_ldua9_82 .swiper-pagination.swiper-pagination-disabled {
 	display: none !important;
 }
-article .swiper._wrapper_1prat_73 .swiper-horizontal > .swiper-pagination-bullets,
-article .swiper._wrapper_1prat_73 .swiper-pagination-bullets.swiper-pagination-horizontal {
+article .swiper._wrapper_ldua9_82 .swiper-horizontal > .swiper-pagination-bullets,
+article .swiper._wrapper_ldua9_82 .swiper-pagination-bullets.swiper-pagination-horizontal {
 	bottom: 4px;
 	left: 0;
 	width: 100%;
 }
-article .swiper._wrapper_1prat_73 .swiper-pagination-bullet {
+article .swiper._wrapper_ldua9_82 .swiper-pagination-bullet {
 	width: 6px;
 	height: 6px;
 	display: inline-block;
@@ -57839,16 +57858,16 @@ article .swiper._wrapper_1prat_73 .swiper-pagination-bullet {
 	background: var(--cc-black-50);
 	opacity: 1;
 }
-article .swiper._wrapper_1prat_73 .swiper-pagination-bullet:focus {
+article .swiper._wrapper_ldua9_82 .swiper-pagination-bullet:focus {
 	background-color: var(--cc-primary-color-focus);
 	box-shadow: 0 0 0 4px var(--cc-primary-color-opacity-10);
 	outline: none;
 }
-article .swiper._wrapper_1prat_73 .swiper-pagination-bullet:focus-visible {
+article .swiper._wrapper_ldua9_82 .swiper-pagination-bullet:focus-visible {
 	outline: 2px solid var(--cc-primary-color-focus);
 	outline-offset: 2px;
 }
-article .swiper._wrapper_1prat_73 button.swiper-pagination-bullet {
+article .swiper._wrapper_ldua9_82 button.swiper-pagination-bullet {
 	border: none;
 	margin: 0;
 	padding: 0;
@@ -57856,21 +57875,21 @@ article .swiper._wrapper_1prat_73 button.swiper-pagination-bullet {
 	-webkit-appearance: none;
 	appearance: none;
 }
-article .swiper._wrapper_1prat_73 .swiper-pagination-clickable .swiper-pagination-bullet {
+article .swiper._wrapper_ldua9_82 .swiper-pagination-clickable .swiper-pagination-bullet {
 	cursor: pointer;
 }
-article .swiper._wrapper_1prat_73 .swiper-pagination-bullet:only-child {
+article .swiper._wrapper_ldua9_82 .swiper-pagination-bullet:only-child {
 	display: none !important;
 }
-article .swiper._wrapper_1prat_73 .swiper-pagination-bullet-active {
+article .swiper._wrapper_ldua9_82 .swiper-pagination-bullet-active {
 	opacity: 1;
 	background-color: black;
 }
 article
-	.swiper._wrapper_1prat_73
+	.swiper._wrapper_ldua9_82
 	.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
 article
-	.swiper._wrapper_1prat_73
+	.swiper._wrapper_ldua9_82
 	.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
 	margin: 0 4px;
 }
@@ -86006,7 +86025,10 @@ const ActionButton = props2 => {
   const __html = config2?.settings?.layout?.disableHtmlContentSanitization ? buttonLabel : sanitizeHTMLWithConfig(buttonLabel, customAllowedHtmlTags);
   const isPhoneNumber = button2.payload && (buttonType === "phone_number" || buttonType === "user_phone_number");
   const isWebURL = "type" in button2 && button2.type === "web_url";
+  const sanitizedButtonUrl = isWebURL ? distExports.sanitizeUrl(button2.url) : void 0;
+  const webUrlHref = config2?.settings?.layout?.disableUrlButtonSanitization ? button2.url : sanitizedButtonUrl === "about:blank" ? "about:blank" : button2.url;
   const isWebURLButtonTargetBlank = isWebURL && button2.target !== "_self";
+  const opensInNewTab = config2?.settings?.layout?.disableUrlButtonSanitization ? isWebURL && button2.target === "_blank" : isWebURLButtonTargetBlank;
   const opensInNewTabLabel = config2?.settings?.customTranslations?.ariaLabels?.opensInNewTab || "Opens in new tab";
   const positionText = total > 1 ? interpolateString(config2?.settings?.customTranslations?.ariaLabels?.actionButtonPositionText ?? "{position} of {total}", {
     position: position2.toString(),
@@ -86025,7 +86047,7 @@ const ActionButton = props2 => {
      as PhoneNumberAnchor: children come in via the {...props} spread. */
   isWebURL ? /* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("a", {
     ...props22,
-    href: button2.url,
+    href: webUrlHref,
     target: button2.target
   }) : null);
   const Button2 = props22 => /* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
@@ -86045,15 +86067,19 @@ const ActionButton = props2 => {
       return;
     }
     if (isWebURL) {
-      const url = config2?.settings?.layout?.disableUrlButtonSanitization ? button2.url : distExports.sanitizeUrl(button2.url);
+      if (config2?.settings?.layout?.disableUrlButtonSanitization) {
+        if (disabled2) event.preventDefault();
+        return;
+      }
+      event.preventDefault();
+      if (disabled2) return;
+      const url = sanitizedButtonUrl;
       if (url === "about:blank") return;
       window.open(url, isWebURLButtonTargetBlank ? "_blank" : "_self");
+      return;
     }
     if (disabled2) return;
     event.preventDefault();
-    if (isWebURL) {
-      return;
-    }
     if (buttonType === "openXApp") {
       openXAppOverlay?.(button2.payload);
       return;
@@ -86100,7 +86126,7 @@ const ActionButton = props2 => {
         __html
       },
       className: !!buttonImage2 && classes$e.buttonLabelWithImage
-    }), renderIcon(), isWebURL && isWebURLButtonTargetBlank && /* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
+    }), renderIcon(), opensInNewTab && /* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
       className: mainClasses.srOnly,
       children: `, ${opensInNewTabLabel}`
     })]
@@ -93288,13 +93314,13 @@ const List = () => {
     })]
   });
 };
-const slideItem = "_slideItem_1prat_1";
-const top = "_top_1prat_8";
-const bottom = "_bottom_1prat_13";
-const brokenImage = "_brokenImage_1prat_34";
-const hasExtraInfo = "_hasExtraInfo_1prat_43";
-const buttonListItem = "_buttonListItem_1prat_63";
-const wrapper$1 = "_wrapper_1prat_73";
+const slideItem = "_slideItem_ldua9_1";
+const top = "_top_ldua9_8";
+const bottom = "_bottom_ldua9_13";
+const brokenImage = "_brokenImage_ldua9_34";
+const hasExtraInfo = "_hasExtraInfo_ldua9_43";
+const buttonListItem = "_buttonListItem_ldua9_72";
+const wrapper$1 = "_wrapper_ldua9_82";
 const classes$8 = {
   slideItem,
   top,
@@ -99089,12 +99115,15 @@ const GalleryItem = props2 => {
     "data-message-id": dataMessageId
   } = useMessageContext();
   const hasExtraInfo2 = subtitle || buttons2 && buttons2?.length > 0;
+  const titleBelowImage = !!config2?.settings?.layout?.galleryCardTitleBelowImage;
   const [isImageBroken, setImageBroken] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);
   const {
     processHTML
   } = useSanitize();
-  const titleHtml = processHTML(title);
-  const subtitleHtml = processHTML(subtitle);
+  const titleHtml = processHTML(title || "");
+  const subtitleHtml = processHTML(subtitle || "");
+  const hasTitle = !!titleHtml;
+  const showContentBlock = titleBelowImage && hasTitle || hasExtraInfo2;
   const titleId = useRandomId("webchatCarouselTemplateTitle");
   const subtitleId = useRandomId("webchatCarouselTemplateSubtitle");
   const shouldBeDisabled = messageParams?.isConversationEnded;
@@ -99111,19 +99140,20 @@ const GalleryItem = props2 => {
       handleClick();
     }
   };
+  const titleElement = /* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Typography, {
+    variant: "body-semibold",
+    component: "h4",
+    dangerouslySetInnerHTML: {
+      __html: titleHtml
+    },
+    className: "webchat-carousel-template-title",
+    id: titleId
+  });
   return /* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     className: classnames$1("webchat-carousel-template-frame", classes$8.slideItem),
     children: [/* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-      className: classnames$1(classes$8.top, hasExtraInfo2 && classes$8.hasExtraInfo),
-      children: [/* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Typography, {
-        variant: "body-semibold",
-        component: "h4",
-        dangerouslySetInnerHTML: {
-          __html: titleHtml
-        },
-        className: "webchat-carousel-template-title",
-        id: titleId
-      }), isImageBroken ? /* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
+      className: classnames$1(classes$8.top, showContentBlock && classes$8.hasExtraInfo),
+      children: [!titleBelowImage && hasTitle && titleElement, isImageBroken ? /* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
         className: classes$8.brokenImage
       }) : /* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", {
         src: image_url,
@@ -99131,16 +99161,16 @@ const GalleryItem = props2 => {
         className: classes$8.slideImage,
         onError: () => setImageBroken(true)
       })]
-    }), hasExtraInfo2 && /* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
+    }), showContentBlock && /* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
       className: classnames$1("webchat-carousel-template-content", classes$8.bottom),
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       role: default_action?.url ? "link" : void 0,
       id: contentId,
       "aria-describedby": default_action?.url && subtitle ? subtitleId : void 0,
-      "aria-labelledby": default_action?.url && title ? titleId : void 0,
+      "aria-labelledby": default_action?.url && hasTitle ? titleId : void 0,
       "aria-label": default_action?.url ? `${titleHtml}. ${opensInNewTab}` : void 0,
-      children: [subtitle && /* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Typography, {
+      children: [titleBelowImage && hasTitle && titleElement, subtitle && /* @__PURE__ */(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Typography, {
         variant: "body-regular",
         dangerouslySetInnerHTML: {
           __html: subtitleHtml
@@ -99155,7 +99185,7 @@ const GalleryItem = props2 => {
         action: shouldBeDisabled ? void 0 : action,
         config: config2,
         onEmitAnalytics,
-        templateTextId: title ? titleId : void 0
+        templateTextId: hasTitle ? titleId : void 0
       })]
     })]
   });