@cognigy/webchat 3.35.0 → 3.36.0

package/OSS_LICENSES.txt

@@ -1,4 +1,4 @@
-Created on 15-12-2025 at 16:57:36
+Created on 05-01-2026 at 10:10:12
 
 {
   "@babel/code-frame@7.27.1": {
@@ -157,7 +157,7 @@ Created on 15-12-2025 at 16:57:36
     "licenseFile": "node_modules/@cognigy/chat-components/node_modules/@braintree/sanitize-url/LICENSE",
     "copyright": "Copyright (c) 2017 Braintree"
   },
-  "@cognigy/chat-components@0.65.0": {
+  "@cognigy/chat-components@0.66.0": {
     "licenses": "MIT*",
     "licenseFile": "node_modules/@cognigy/chat-components/LICENSE",
     "copyright": "Copyright (c) 2024 Cognigy GmbH"
@@ -169,7 +169,7 @@ Created on 15-12-2025 at 16:57:36
     "licenseFile": "node_modules/@cognigy/socket-client/LICENSE",
     "copyright": "Copyright (c) 2019 Cognigy GmbH"
   },
-  "@cognigy/webchat@3.35.0": {
+  "@cognigy/webchat@3.36.0": {
     "licenses": "MIT*",
     "publisher": "Cognigy GmbH",
     "email": "info@cognigy.com",

package/dist/webchat.esm.js

@@ -1,7 +1,7 @@
 /*!
- * webchat.esm.js v3.35.0
- * https://github.com/Cognigy/Webchat/tree/v3.35.0
- * https://github.com/Cognigy/Webchat/tree/v3.35.0/OSS_LICENSES.txt
+ * webchat.esm.js v3.36.0
+ * https://github.com/Cognigy/Webchat/tree/v3.36.0
+ * https://github.com/Cognigy/Webchat/tree/v3.36.0/OSS_LICENSES.txt
  */
 import * as __WEBPACK_EXTERNAL_MODULE_react_dom_7dac9eee__ from "react-dom";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
@@ -30946,7 +30946,7 @@ const colorsMapping = {
   primary: "var(--cc-primary-color)",
   secondary: "var(--cc-secondary-color)"
 };
-const Typography = props2 => {
+const Typography = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((props2, ref) => {
   const {
     variant = "body-regular",
     children,
@@ -30957,11 +30957,13 @@ const Typography = props2 => {
     dangerouslySetInnerHTML,
     id,
     "aria-hidden": ariaHidden,
+    tabIndex,
     ...restProps
   } = props2;
   const Component = component ?? variantsMapping[variant];
   const typographyColor = colorsMapping[color2] ?? color2;
-  return /* @__PURE__ */jsxRuntimeExports.jsx(Component, {
+  const componentProps = {
+    ref,
     className: classnames$1(classes$f[variant], className, color2),
     style: {
       color: typographyColor,
@@ -30971,9 +30973,13 @@ const Typography = props2 => {
     dangerouslySetInnerHTML,
     id,
     "aria-hidden": ariaHidden,
+    tabIndex
+  };
+  return /* @__PURE__ */jsxRuntimeExports.jsx(Component, {
+    ...componentProps,
     children
   });
-};
+});
 const Button = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((props2, ref) => {
   const {
     size,
@@ -35906,6 +35912,12 @@ const classes$9 = {
   listItemButtonWrapper,
   mainButtonWrapper
 };
+const srOnly = "_srOnly_14hnz_1";
+const divider = "_divider_14hnz_13";
+const mainClasses = {
+  srOnly,
+  divider
+};
 const ListItem = props2 => {
   const {
     action,
@@ -35919,7 +35931,9 @@ const ListItem = props2 => {
     isHeaderElement,
     headingLevel,
     id,
-    onSetScreenReaderLabel
+    onSetScreenReaderLabel,
+    dividerBefore,
+    dividerAfter
   } = props2;
   const {
     title,
@@ -36000,7 +36014,9 @@ const ListItem = props2 => {
     },
     "data-testid": isHeaderElement ? "header-image" : "list-item",
     id,
-    children: [/* @__PURE__ */jsxRuntimeExports.jsx("div", {
+    children: [!isHeaderElement && dividerBefore && /* @__PURE__ */jsxRuntimeExports.jsx("div", {
+      className: mainClasses.divider
+    }), /* @__PURE__ */jsxRuntimeExports.jsx("div", {
       className: contentClasses,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
@@ -36041,15 +36057,11 @@ const ListItem = props2 => {
       containerClassName: classes$9.listItemButtonWrapper,
       config: config2,
       onEmitAnalytics
+    }), !isHeaderElement && dividerAfter && /* @__PURE__ */jsxRuntimeExports.jsx("div", {
+      className: mainClasses.divider
     })]
   });
 };
-const srOnly = "_srOnly_14hnz_1";
-const divider = "_divider_14hnz_13";
-const mainClasses = {
-  srOnly,
-  divider
-};
 const List = () => {
   const {
     message: message2,
@@ -36113,19 +36125,17 @@ const List = () => {
     }), /* @__PURE__ */jsxRuntimeExports.jsx("ul", {
       "aria-labelledby": headerElement ? `listHeader-header-${listTemplateId}` : void 0,
       className: classes$9.list,
-      children: regularElements && regularElements.map((element2, index2) => /* @__PURE__ */jsxRuntimeExports.jsxs(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
-        children: [index2 > 0 && /* @__PURE__ */jsxRuntimeExports.jsx("div", {
-          className: mainClasses.divider
-        }), /* @__PURE__ */jsxRuntimeExports.jsx(ListItem, {
+      children: regularElements && regularElements.map((element2, index2) => /* @__PURE__ */jsxRuntimeExports.jsx(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
+        children: /* @__PURE__ */jsxRuntimeExports.jsx(ListItem, {
           element: element2,
           headingLevel: headerElement ? "h5" : "h4",
           id: `${listTemplateId}-${index2}`,
           onSetScreenReaderLabel: text2 => {
             handleListItemLiveRegionLabel(index2 + 1, text2);
-          }
-        }), button2 && index2 === regularElements.length - 1 && /* @__PURE__ */jsxRuntimeExports.jsx("div", {
-          className: mainClasses.divider
-        })]
+          },
+          dividerBefore: index2 > 0,
+          dividerAfter: Boolean(button2 && index2 === regularElements.length - 1)
+        })
       }, index2))
     }), button2 && /* @__PURE__ */jsxRuntimeExports.jsx(PrimaryButton, {
       isActionButton: true,
@@ -61352,7 +61362,7 @@ const TextWithButtons = props2 => {
       dataMessageId,
       action: modifiedAction,
       buttonClassName: classnames$1(classes$5.button, `webchat-${classType}-template-button`),
-      containerClassName: classnames$1(classes$5.buttons, isQuickReplies && "webchat-quick-reply-template-replies-container"),
+      containerClassName: classnames$1(classes$5.buttons, `webchat-${classType}-template-replies-container`),
       containerStyle,
       payload: buttons2,
       showUrlIcon: true,
@@ -88256,34 +88266,11 @@ const PrivacyNotice = props => {
     urlText,
     url
   } = privacyNotice;
-  const privacyNoticeRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-    if (!isHomeScreenEnabled) {
-      if (privacyNoticeRef.current) {
-        privacyNoticeRef.current.focus();
-      }
-      return;
-    }
-    // If the home screen is enabled, delay focusing the privacy notice message
-    // to allow any home screen transition animations to complete before moving focus.
-    const timeoutId = setTimeout(() => {
-      if (privacyNoticeRef.current) {
-        privacyNoticeRef.current.focus();
-      }
-    }, 200);
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [isHomeScreenEnabled]);
   const sanitizedText = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => (0,_webchat_helper_sanitize__WEBPACK_IMPORTED_MODULE_6__/* .sanitizeHTML */ .p9)(text), [text]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(PrivacyNoticeRoot, {
     className: "webchat-privacy-notice-root"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(PrivacyMessage, {
-    className: "webchat-privacy-notice-message",
-    tabIndex: -1,
-    ref: privacyNoticeRef
+    className: "webchat-privacy-notice-message"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_cognigy_chat_components__WEBPACK_IMPORTED_MODULE_2__/* .Typography */ .o5, {
     variant: "body-regular",
     style: {
@@ -91765,8 +91752,6 @@ function factoryLabel(effects, ok, nok, type, markerType, stringType) {
 /* harmony import */ var _PrimaryButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(50335);
 /* harmony import */ var _branding_Branding__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(24018);
 /* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(21013);
-/* harmony import */ var _utils_find_focusable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(41098);
-
 
 
 
@@ -91839,17 +91824,6 @@ const PrevConversationsList = props => {
   // result: the last updated conversation goes on top
   const sortedConversations = (0,_helpers__WEBPACK_IMPORTED_MODULE_5__/* .sortConversationsByFreshness */ .N_)(conversations);
   const sessions = Object.keys(sortedConversations);
-  const conversationsRootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-    if (!conversationsRootRef.current) return;
-    const {
-      firstFocusable
-    } = (0,_utils_find_focusable__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A)(conversationsRootRef.current);
-    // Set timeout to ensure that the focus is set after the animation
-    setTimeout(() => {
-      firstFocusable?.focus();
-    }, 450);
-  }, []);
   const handleStartButtonClick = () => {
     // we initialize a new session
     onSwitchSession();
@@ -91862,8 +91836,7 @@ const PrevConversationsList = props => {
     onSetShowPrevConversations(false);
   }, []);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(ConversationsListRoot, {
-    className: "webchat-prev-conversations-root",
-    ref: conversationsRootRef
+    className: "webchat-prev-conversations-root"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(ConversationsList, {
     className: "webchat-prev-conversations-content"
   }, sessions.length > 0 && sessions.map((session, i) => {
@@ -107483,6 +107456,7 @@ class WebchatUI extends react__WEBPACK_IMPORTED_MODULE_0__["default"].PureCompon
     const isChatOptionsButtonVisible = config.settings.chatOptions.enabled && showChatScreen;
     const hideBackButton = showChatScreen && !isHomeScreenEnabled;
     const showDeleteAllConversationButton = !!((config.settings.privacyNotice.enabled && this.props.hasAcceptedTerms || !config.settings.privacyNotice.enabled) && config.settings.homeScreen.previousConversations.enableDeleteAllConversations && showPrevConversations && Object.keys(this.props.prevConversations).length);
+    const autoFocusScreenTitle = !showChatScreen && !showHomeScreen;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(RegularLayoutRoot, null, !isXAppOverlayOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(react_transition_group__WEBPACK_IMPORTED_MODULE_39__/* ["default"] */ .A, {
       in: !!(!showEnabledHomeScreen || showInformationMessage),
       timeout: 500,
@@ -107511,6 +107485,7 @@ class WebchatUI extends react__WEBPACK_IMPORTED_MODULE_0__["default"].PureCompon
       chatToggleButtonRef: this.chatToggleButtonRef,
       hideBackButton: hideBackButton,
       showChatScreen: showChatScreen,
+      autoFocusScreenTitle: autoFocusScreenTitle,
       deleteIconColor: config.settings.customColors?.deleteAllConversationIconColor
     })), !isSecondaryView && isHomeScreenEnabled && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(react_transition_group__WEBPACK_IMPORTED_MODULE_39__/* ["default"] */ .A, {
       in: !showHomeScreen,
@@ -116679,10 +116654,8 @@ function tokenizeTitleBefore(effects, ok, nok) {
 /* harmony import */ var _RatingWidget__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(87024);
 /* harmony import */ var _PostbackButtons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(99685);
 /* harmony import */ var _ChatOptionsFooter__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(97130);
-/* harmony import */ var _utils_find_focusable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(41098);
-/* harmony import */ var _TTSOption__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(29687);
-/* harmony import */ var _DeleteConversation__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(84995);
-
+/* harmony import */ var _TTSOption__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(29687);
+/* harmony import */ var _DeleteConversation__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(84995);
 
 
 
@@ -116716,6 +116689,10 @@ const Divider = _emotion_styled__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .A
   width: "100%",
   backgroundColor: theme.black80
 }));
+/**
+ * This component renders both the Chat Options screen and the Rating screen.
+ * On the rating screen (opened as a result of a request rating node), only the rating widget is displayed.
+ */
 const ChatOptions = props => {
   const {
     config,
@@ -116736,19 +116713,8 @@ const ChatOptions = props => {
   const {
     chatOptions
   } = settings;
-  const chatOptionsRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   const ratingEnabled = chatOptions.rating.enabled;
   const showRating = ratingEnabled === "always" || ratingEnabled === "once" && !hasGivenRating || showOnlyRating;
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-    if (chatOptionsRef?.current) {
-      const {
-        firstFocusable
-      } = (0,_utils_find_focusable__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)(chatOptionsRef?.current);
-      if (firstFocusable) {
-        firstFocusable.focus();
-      }
-    }
-  }, []);
   const ttsEnabled = (0,react_redux__WEBPACK_IMPORTED_MODULE_2__/* .useSelector */ .d4)(state => state.ui.ttsActive);
   const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_2__/* .useDispatch */ .wA)();
   const handleToggleTTS = () => {
@@ -116756,15 +116722,27 @@ const ChatOptions = props => {
   };
   const showDeleteConversation = !!chatOptions.enableDeleteConversation;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(ChatOptionsRoot, {
-    className: "webchat-chat-options-root",
-    ref: chatOptionsRef
+    className: "webchat-chat-options-root"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(ChatOptionsContainer, {
     className: "webchat-chat-options-container"
-  }, !showOnlyRating && config.settings.chatOptions.quickReplyOptions.enabled && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(react__WEBPACK_IMPORTED_MODULE_0__["default"].Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_PostbackButtons__WEBPACK_IMPORTED_MODULE_5__/* .PostbackButtons */ .h, {
+  }, showOnlyRating ?
+  /*#__PURE__*/
+  // Rating Screen
+  react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_RatingWidget__WEBPACK_IMPORTED_MODULE_4__/* .RatingWidget */ .K, {
+    ratingTitleText: ratingTitleText,
+    ratingCommentText: ratingCommentText,
+    onSendRating: onSendRating,
+    showRatingStatus: showOnlyRating,
+    ratingEventBannerText: ratingEventBannerText,
+    buttonText: ratingSubmitButtonText
+  }) :
+  /*#__PURE__*/
+  // Chat Options Screen
+  react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(react__WEBPACK_IMPORTED_MODULE_0__["default"].Fragment, null, config.settings.chatOptions.quickReplyOptions.enabled && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(react__WEBPACK_IMPORTED_MODULE_0__["default"].Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_PostbackButtons__WEBPACK_IMPORTED_MODULE_5__/* .PostbackButtons */ .h, {
     config: config,
     onSendActionButtonMessage: onSendActionButtonMessage,
     onEmitAnalytics: onEmitAnalytics
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(DividerWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(Divider, null))), config.settings.chatOptions.showTTSToggle && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(react__WEBPACK_IMPORTED_MODULE_0__["default"].Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_TTSOption__WEBPACK_IMPORTED_MODULE_8__/* ["default"] */ .A, {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(DividerWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(Divider, null))), config.settings.chatOptions.showTTSToggle && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(react__WEBPACK_IMPORTED_MODULE_0__["default"].Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_TTSOption__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, {
     onToggle: handleToggleTTS,
     config: config
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(DividerWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(Divider, null))), showRating && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(react__WEBPACK_IMPORTED_MODULE_0__["default"].Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_RatingWidget__WEBPACK_IMPORTED_MODULE_4__/* .RatingWidget */ .K, {
@@ -116774,10 +116752,10 @@ const ChatOptions = props => {
     showRatingStatus: showOnlyRating,
     ratingEventBannerText: ratingEventBannerText,
     buttonText: ratingSubmitButtonText
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(DividerWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(Divider, null))), showDeleteConversation && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_DeleteConversation__WEBPACK_IMPORTED_MODULE_9__/* ["default"] */ .A, {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(DividerWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(Divider, null))), showDeleteConversation && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_DeleteConversation__WEBPACK_IMPORTED_MODULE_8__/* ["default"] */ .A, {
     onDeleteModalStateChange: onDeleteModalStateChange,
     config: config
-  })), chatOptions.footer.enabled && chatOptions.footer.items[0] && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_ChatOptionsFooter__WEBPACK_IMPORTED_MODULE_6__/* .ChatOptionsFooter */ .u, {
+  }))), chatOptions.footer.enabled && chatOptions.footer.items[0] && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_ChatOptionsFooter__WEBPACK_IMPORTED_MODULE_6__/* .ChatOptionsFooter */ .u, {
     settings: config.settings
   }));
 };
@@ -121652,6 +121630,14 @@ const Logo = _emotion_styled__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .A.im
   height: 28,
   marginInline: 8
 }));
+const HeaderText = (0,_emotion_styled__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .A)(_cognigy_chat_components__WEBPACK_IMPORTED_MODULE_9__/* .Typography */ .o5)(({
+  theme
+}) => ({
+  "&:focus-visible": {
+    outline: `2px solid ${(0,_style__WEBPACK_IMPORTED_MODULE_11__/* .getAccessiblePrimaryVariant */ .oe)(theme.primaryColor, theme.backgroundWebchat)}`,
+    outlineOffset: 2
+  }
+}));
 const Header = props => {
   const {
     logoUrl,
@@ -121666,11 +121652,13 @@ const Header = props => {
     isChatOptionsButtonVisible,
     hideBackButton,
     showChatScreen,
+    autoFocusScreenTitle,
     onDeleteAllConversations,
     ...rest
   } = props;
   const ariaLabels = (0,_webchat_helper_useSelector__WEBPACK_IMPORTED_MODULE_13__/* .useSelector */ .d)(state => state.config.settings.customTranslations?.ariaLabels);
   const settings = (0,_webchat_helper_useSelector__WEBPACK_IMPORTED_MODULE_13__/* .useSelector */ .d)(state => state.config.settings);
+  const headerTextRef = react__WEBPACK_IMPORTED_MODULE_0__["default"].useRef(null);
   const handleCloseClick = () => {
     onClose?.();
     // Restore focus to chat toggle button
@@ -121679,6 +121667,15 @@ const Header = props => {
   const handleMenuClick = () => {
     onSetShowChatOptionsScreen?.(true);
   };
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (autoFocusScreenTitle) {
+      const timeoutId = setTimeout(() => {
+        const headerTitle = headerTextRef.current;
+        headerTitle?.focus();
+      }, 200);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [autoFocusScreenTitle]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(react__WEBPACK_IMPORTED_MODULE_0__["default"].Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(HeaderBar, _extends({}, rest, {
     className: "webchat-header-bar"
   }), onGoBack && !hideBackButton && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(BackButtonWrapper, {
@@ -121701,11 +121698,13 @@ const Header = props => {
     title: "Cognigy.AI Logo",
     role: "img",
     className: classnames__WEBPACK_IMPORTED_MODULE_8___default()("webchat-header-cognigy-logo")
-  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_cognigy_chat_components__WEBPACK_IMPORTED_MODULE_9__/* .Typography */ .o5, {
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(HeaderText, {
+    ref: headerTextRef,
     variant: "h2-semibold",
     id: "webchatHeaderTitle",
     className: "webchat-header-title",
-    margin: 0
+    margin: 0,
+    tabIndex: -1
   }, title)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(HeaderIconsWrapper, null, rest.isDeleteAllConversationsButtonVisible && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(HeaderIconButton, {
     "data-header-delete-all-conversations-button": true,
     onClick: onDeleteAllConversations,