@botonic/react 0.55.1 → 0.57.0-rslib-esm.0

package/lib/esm/webchat/input-panel/use-typing-session.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-typing-session.js","sourceRoot":"","sources":["../../../../src/webchat/input-panel/use-typing-session.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"webchat/input-panel/use-typing-session.js","sources":["../../../../src/webchat/input-panel/use-typing-session.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react'\n\nimport { Typing } from '../../index-types'\nimport type { TypingChatEvent } from './typing-network-sender'\n\n/** Local UI inactivity before the textarea stops emitting typing events. */\nexport const TYPING_IDLE_MS = 10 * 1000\n\ntype SendTypingEvent = (event: TypingChatEvent) => Promise<boolean>\n\n/**\n * UI-layer typing session for the textarea.\n *\n * Decides *when* the user is typing and requests typing_on / typing_off.\n * Deduplication and network debouncing live in TypingNetworkSender instead.\n */\nexport function useTypingSession(sendChatEvent: SendTypingEvent) {\n  const isTyping = useRef(false)\n  // Bumps on each start/stop so stale async stopTyping() calls can be ignored.\n  const startOrStopTypingCount = useRef(0)\n  const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  // Shares one in-flight typing_on while delivery is still pending.\n  const pendingTypingOn = useRef<Promise<boolean> | null>(null)\n\n  const stopTyping = useCallback(async () => {\n    const countWhenStopWasRequested = ++startOrStopTypingCount.current\n\n    if (idleTimer.current) {\n      clearTimeout(idleTimer.current)\n      idleTimer.current = null\n    }\n\n    // Wait for typing_on to settle before deciding whether to send typing_off.\n    if (pendingTypingOn.current) {\n      await pendingTypingOn.current\n    }\n\n    // Let same-turn input events (e.g. Enter then type next message) bump the counter first.\n    await Promise.resolve()\n\n    if (countWhenStopWasRequested !== startOrStopTypingCount.current) {\n      return\n    }\n\n    if (!isTyping.current) {\n      return\n    }\n\n    isTyping.current = false\n    await sendChatEvent(Typing.Off)\n  }, [sendChatEvent])\n\n  const startTyping = useCallback(async () => {\n    if (isTyping.current) {\n      return true\n    }\n\n    if (pendingTypingOn.current) {\n      return pendingTypingOn.current\n    }\n\n    pendingTypingOn.current = (async () => {\n      try {\n        const accepted = await sendChatEvent(Typing.On)\n\n        // Only mark active after the network layer confirms delivery.\n        if (accepted) {\n          isTyping.current = true\n        }\n\n        return accepted\n      } finally {\n        pendingTypingOn.current = null\n      }\n    })()\n\n    return pendingTypingOn.current\n  }, [sendChatEvent])\n\n  const onTextChange = useCallback(\n    async (value: string) => {\n      if (value === '') {\n        await stopTyping()\n        return\n      }\n\n      const countWhenUserTyped = ++startOrStopTypingCount.current\n      await startTyping()\n\n      if (countWhenUserTyped !== startOrStopTypingCount.current) {\n        return\n      }\n\n      if (!isTyping.current) {\n        return\n      }\n\n      // Reset the idle timer on every keystroke.\n      if (idleTimer.current) {\n        clearTimeout(idleTimer.current)\n      }\n\n      idleTimer.current = setTimeout(() => {\n        stopTyping().catch(() => {})\n      }, TYPING_IDLE_MS)\n    },\n    [startTyping, stopTyping]\n  )\n\n  const stopTypingRef = useRef(stopTyping)\n  stopTypingRef.current = stopTyping\n\n  useEffect(() => {\n    return () => {\n      if (idleTimer.current) {\n        clearTimeout(idleTimer.current)\n      }\n\n      stopTypingRef.current().catch(() => {})\n    }\n  }, [])\n\n  return { stopTyping, onTextChange }\n}\n"],"names":["useCallback","useEffect","useRef","Typing","TYPING_IDLE_MS","useTypingSession","sendChatEvent","isTyping","startOrStopTypingCount","idleTimer","pendingTypingOn","stopTyping","countWhenStopWasRequested","clearTimeout","Promise","startTyping","accepted","onTextChange","value","countWhenUserTyped","setTimeout","stopTypingRef"],"mappings":";;;;;AAAsD;AAEZ;AAG1C,0EAA0E,GACnE,MAAMI,cAAcA,GAAG,KAAK,KAAI;AAIvC;;;;;CAKC,GACM,SAASC,gBAAgBA,CAACC,aAA8B;IAC7D,MAAMC,WAAWL,MAAMA,CAAC;IACxB,6EAA6E;IAC7E,MAAMM,yBAAyBN,MAAMA,CAAC;IACtC,MAAMO,YAAYP,MAAMA,CAAuC;IAC/D,kEAAkE;IAClE,MAAMQ,kBAAkBR,MAAMA,CAA0B;IAExD,MAAMS,aAAaX,WAAWA,CAAC;QAC7B,MAAMY,4BAA4B,EAAEJ,uBAAuB,OAAO;QAElE,IAAIC,UAAU,OAAO,EAAE;YACrBI,aAAaJ,UAAU,OAAO;YAC9BA,UAAU,OAAO,GAAG;QACtB;QAEA,2EAA2E;QAC3E,IAAIC,gBAAgB,OAAO,EAAE;YAC3B,MAAMA,gBAAgB,OAAO;QAC/B;QAEA,yFAAyF;QACzF,MAAMI,QAAQ,OAAO;QAErB,IAAIF,8BAA8BJ,uBAAuB,OAAO,EAAE;YAChE;QACF;QAEA,IAAI,CAACD,SAAS,OAAO,EAAE;YACrB;QACF;QAEAA,SAAS,OAAO,GAAG;QACnB,MAAMD,cAAcH,UAAU;IAChC,GAAG;QAACG;KAAc;IAElB,MAAMS,cAAcf,WAAWA,CAAC;QAC9B,IAAIO,SAAS,OAAO,EAAE;YACpB,OAAO;QACT;QAEA,IAAIG,gBAAgB,OAAO,EAAE;YAC3B,OAAOA,gBAAgB,OAAO;QAChC;QAEAA,gBAAgB,OAAO,GAAI;YACzB,IAAI;gBACF,MAAMM,WAAW,MAAMV,cAAcH,SAAS;gBAE9C,8DAA8D;gBAC9D,IAAIa,UAAU;oBACZT,SAAS,OAAO,GAAG;gBACrB;gBAEA,OAAOS;YACT,SAAU;gBACRN,gBAAgB,OAAO,GAAG;YAC5B;QACF;QAEA,OAAOA,gBAAgB,OAAO;IAChC,GAAG;QAACJ;KAAc;IAElB,MAAMW,eAAejB,WAAWA,CAC9B,OAAOkB;QACL,IAAIA,UAAU,IAAI;YAChB,MAAMP;YACN;QACF;QAEA,MAAMQ,qBAAqB,EAAEX,uBAAuB,OAAO;QAC3D,MAAMO;QAEN,IAAII,uBAAuBX,uBAAuB,OAAO,EAAE;YACzD;QACF;QAEA,IAAI,CAACD,SAAS,OAAO,EAAE;YACrB;QACF;QAEA,2CAA2C;QAC3C,IAAIE,UAAU,OAAO,EAAE;YACrBI,aAAaJ,UAAU,OAAO;QAChC;QAEAA,UAAU,OAAO,GAAGW,WAAW;YAC7BT,aAAa,KAAK,CAAC,KAAO;QAC5B,GAAGP,cAAcA;IACnB,GACA;QAACW;QAAaJ;KAAW;IAG3B,MAAMU,gBAAgBnB,MAAMA,CAACS;IAC7BU,cAAc,OAAO,GAAGV;IAExBV,SAASA,CAAC;QACR,OAAO;YACL,IAAIQ,UAAU,OAAO,EAAE;gBACrBI,aAAaJ,UAAU,OAAO;YAChC;YAEAY,cAAc,OAAO,GAAG,KAAK,CAAC,KAAO;QACvC;IACF,GAAG,EAAE;IAEL,OAAO;QAAEV;QAAYM;IAAa;AACpC"}

package/lib/esm/webchat/message-list/index.js

@@ -1,49 +1,70 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebchatMessageList = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const constants_1 = require("../../constants");
-const index_types_1 = require("../../index-types");
-const context_1 = require("../../webchat/context");
-const constants_2 = require("../constants");
-const typing_indicator_1 = tslib_1.__importDefault(require("../typing-indicator"));
-const intro_message_1 = require("./intro-message");
-const scroll_button_1 = require("./scroll-button");
-const styles_1 = require("./styles");
-const unread_messages_banner_1 = require("./unread-messages-banner");
-const use_notifications_1 = require("./use-notifications");
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import react, { useContext, useEffect, useRef, useState } from "react";
+import { ROLES } from "../../constants.js";
+import { SENDERS } from "../../index-types.js";
+import { WebchatContext } from "../context/index.js";
+import { BotonicContainerId } from "../constants.js";
+import typing_indicator from "../typing-indicator/index.js";
+import { IntroMessage } from "./intro-message.js";
+import { ScrollButton } from "./scroll-button.js";
+import { MessageContainer, ScrollableMessageList } from "./styles.js";
+import { UnreadMessagesBanner } from "./unread-messages-banner.js";
+import { useNotifications } from "./use-notifications.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 const SCROLL_TIMEOUT = 200;
 const scrollOptionsEnd = {
-    block: 'end',
+    block: 'end'
 };
 const scrollOptionsCenter = {
-    block: 'center',
+    block: 'center'
 };
-const WebchatMessageList = () => {
-    const { webchatState, resetUnreadMessages, setLastMessageVisible, scrollableMessagesListRef, } = (0, react_1.useContext)(context_1.WebchatContext);
-    const { notificationsEnabled } = (0, use_notifications_1.useNotifications)();
-    const [firstUnreadMessageId, setFirstUnreadMessageId] = (0, react_1.useState)();
-    const lastMessageRef = (0, react_1.useRef)(null);
-    const typingRef = (0, react_1.useRef)(null);
-    const unreadMessagesBannerRef = (0, react_1.useRef)(null);
-    const scrollToTyping = () => {
-        setTimeout(() => {
+const WebchatMessageList = ()=>{
+    const { webchatState, resetUnreadMessages, setLastMessageVisible, scrollableMessagesListRef } = useContext(WebchatContext);
+    const { notificationsEnabled } = useNotifications();
+    const [firstUnreadMessageId, setFirstUnreadMessageId] = useState();
+    const lastMessageRef = useRef(null);
+    const typingRef = useRef(null);
+    const unreadMessagesBannerRef = useRef(null);
+    const scrollToTyping = ()=>{
+        setTimeout(()=>{
             typingRef.current?.scrollIntoView(scrollOptionsEnd);
         }, SCROLL_TIMEOUT);
     };
-    const scrollToLastMessage = () => {
-        setTimeout(() => {
+    const scrollToLastMessage = ()=>{
+        setTimeout(()=>{
             lastMessageRef.current?.scrollIntoView(scrollOptionsEnd);
         }, SCROLL_TIMEOUT);
     };
-    const scrollToBanner = () => {
-        setTimeout(() => {
+    const scrollToBanner = ()=>{
+        setTimeout(()=>{
             unreadMessagesBannerRef.current?.scrollIntoView(scrollOptionsCenter);
         }, SCROLL_TIMEOUT);
     };
-    const handleScrollToBottom = () => {
+    const handleScrollToBottom = ()=>{
         resetUnreadMessages();
         if (webchatState.typing) {
             scrollToTyping();
@@ -51,27 +72,28 @@ const WebchatMessageList = () => {
         }
         scrollToLastMessage();
     };
-    const showUnreadMessagesBanner = (messageComponentId) => {
-        return (!webchatState.isInputFocused &&
-            firstUnreadMessageId &&
-            messageComponentId === firstUnreadMessageId &&
-            webchatState.numUnreadMessages > 0);
+    const showUnreadMessagesBanner = (messageComponentId)=>{
+        return !webchatState.isInputFocused && firstUnreadMessageId && messageComponentId === firstUnreadMessageId && webchatState.numUnreadMessages > 0;
     };
-    (0, react_1.useEffect)(() => {
-        const firstUnreadMessage = webchatState.messagesComponents.find(message => message.props.isUnread);
+    useEffect(()=>{
+        const firstUnreadMessage = webchatState.messagesComponents.find((message)=>message.props.isUnread);
         setFirstUnreadMessageId(firstUnreadMessage?.props?.id);
-    }, [webchatState.messagesComponents]);
-    (0, react_1.useEffect)(() => {
+    }, [
+        webchatState.messagesComponents
+    ]);
+    useEffect(()=>{
         if (webchatState.messagesComponents.length > 0 && lastMessageRef.current) {
-            const observer = new IntersectionObserver(entries => {
-                entries.forEach(entry => {
+            const observer = new IntersectionObserver((entries)=>{
+                entries.forEach((entry)=>{
                     setLastMessageVisible(entry.isIntersecting);
                 });
             });
             observer.observe(lastMessageRef.current);
         }
-    }, [webchatState.messagesComponents]);
-    (0, react_1.useEffect)(() => {
+    }, [
+        webchatState.messagesComponents
+    ]);
+    useEffect(()=>{
         if (!notificationsEnabled) {
             if (webchatState.typing) {
                 scrollToTyping();
@@ -79,8 +101,11 @@ const WebchatMessageList = () => {
             }
             scrollToLastMessage();
         }
-    }, [webchatState.typing, webchatState.messagesComponents]);
-    (0, react_1.useEffect)(() => {
+    }, [
+        webchatState.typing,
+        webchatState.messagesComponents
+    ]);
+    useEffect(()=>{
         if (webchatState.isWebchatOpen && notificationsEnabled) {
             if (unreadMessagesBannerRef.current) {
                 scrollToBanner();
@@ -96,21 +121,56 @@ const WebchatMessageList = () => {
         firstUnreadMessageId,
         webchatState.isWebchatOpen,
         webchatState.typing,
-        webchatState.messagesComponents,
+        webchatState.messagesComponents
     ]);
     const showScrollButton = webchatState.numUnreadMessages > 0 && !webchatState.isLastMessageVisible;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.ScrollableMessageList, { id: constants_2.BotonicContainerId.ScrollableMessagesList, ref: scrollableMessagesListRef, role: constants_1.ROLES.MESSAGE_LIST, children: [(0, jsx_runtime_1.jsx)(intro_message_1.IntroMessage, {}), webchatState.messagesComponents.map((messageComponent, index) => {
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(ScrollableMessageList, {
+                id: BotonicContainerId.ScrollableMessagesList,
+                ref: scrollableMessagesListRef,
+                role: ROLES.MESSAGE_LIST,
+                children: [
+                    /*#__PURE__*/ jsx(IntroMessage, {}),
+                    webchatState.messagesComponents.map((messageComponent, index)=>{
                         const messageId = messageComponent.props.id;
-                        const sentBySystem = messageComponent.props?.sentBy === index_types_1.SENDERS.system;
+                        const sentBySystem = messageComponent.props?.sentBy === SENDERS.system;
                         // Check if system message is followed by a regular message (user/bot)
                         const nextMessage = webchatState.messagesComponents[index + 1];
-                        const isSystemMessageFollowedByMessage = sentBySystem &&
-                            nextMessage &&
-                            nextMessage.props?.sentBy !== index_types_1.SENDERS.system;
-                        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MessageContainer, { role: sentBySystem ? constants_1.ROLES.SYSTEM_MESSAGE : constants_1.ROLES.MESSAGE, "$isLastSystemMessage": isSystemMessageFollowedByMessage, children: [showUnreadMessagesBanner(messageId) && ((0, jsx_runtime_1.jsx)(unread_messages_banner_1.UnreadMessagesBanner, { unreadMessagesBannerRef: unreadMessagesBannerRef })), messageComponent] }), index === webchatState.messagesComponents.length - 1 && ((0, jsx_runtime_1.jsx)("div", { ref: lastMessageRef, style: {
-                                        content: '',
-                                    } }))] }, messageId));
-                    }), webchatState.typing && (0, jsx_runtime_1.jsx)(typing_indicator_1.default, { ref: typingRef })] }), showScrollButton && (0, jsx_runtime_1.jsx)(scroll_button_1.ScrollButton, { handleClick: handleScrollToBottom })] }));
+                        const isSystemMessageFollowedByMessage = sentBySystem && nextMessage && nextMessage.props?.sentBy !== SENDERS.system;
+                        return /*#__PURE__*/ jsxs(react.Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsxs(MessageContainer, {
+                                    role: sentBySystem ? ROLES.SYSTEM_MESSAGE : ROLES.MESSAGE,
+                                    $isLastSystemMessage: isSystemMessageFollowedByMessage,
+                                    children: [
+                                        showUnreadMessagesBanner(messageId) && /*#__PURE__*/ jsx(UnreadMessagesBanner, {
+                                            unreadMessagesBannerRef: unreadMessagesBannerRef
+                                        }),
+                                        messageComponent
+                                    ]
+                                }),
+                                index === webchatState.messagesComponents.length - 1 && /*#__PURE__*/ jsx("div", {
+                                    ref: lastMessageRef,
+                                    style: {
+                                        content: ''
+                                    }
+                                })
+                            ]
+                        }, messageId);
+                    }),
+                    webchatState.typing && /*#__PURE__*/ jsx(typing_indicator, {
+                        ref: typingRef
+                    })
+                ]
+            }),
+            showScrollButton && /*#__PURE__*/ jsx(ScrollButton, {
+                handleClick: handleScrollToBottom
+            })
+        ]
+    });
 };
-exports.WebchatMessageList = WebchatMessageList;
+
+export { WebchatMessageList };
+
 //# sourceMappingURL=index.js.map

package/lib/esm/webchat/message-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"webchat/message-list/index.js","sources":["../../../../src/webchat/message-list/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef, useState } from 'react'\n\nimport { ROLES } from '../../constants'\nimport { SENDERS } from '../../index-types'\nimport { WebchatContext } from '../../webchat/context'\nimport { BotonicContainerId } from '../constants'\nimport TypingIndicator from '../typing-indicator'\nimport { IntroMessage } from './intro-message'\nimport { ScrollButton } from './scroll-button'\nimport { MessageContainer, ScrollableMessageList } from './styles'\nimport { UnreadMessagesBanner } from './unread-messages-banner'\nimport { useNotifications } from './use-notifications'\n\nconst SCROLL_TIMEOUT = 200\nconst scrollOptionsEnd: ScrollIntoViewOptions = {\n  block: 'end',\n}\nconst scrollOptionsCenter: ScrollIntoViewOptions = {\n  block: 'center',\n}\n\nexport const WebchatMessageList = () => {\n  const {\n    webchatState,\n    resetUnreadMessages,\n    setLastMessageVisible,\n    scrollableMessagesListRef,\n  } = useContext(WebchatContext)\n\n  const { notificationsEnabled } = useNotifications()\n\n  const [firstUnreadMessageId, setFirstUnreadMessageId] = useState<string>()\n\n  const lastMessageRef = useRef<HTMLDivElement>(null)\n  const typingRef = useRef<HTMLDivElement>(null)\n  const unreadMessagesBannerRef = useRef<HTMLDivElement>(null)\n\n  const scrollToTyping = () => {\n    setTimeout(() => {\n      typingRef.current?.scrollIntoView(scrollOptionsEnd)\n    }, SCROLL_TIMEOUT)\n  }\n\n  const scrollToLastMessage = () => {\n    setTimeout(() => {\n      lastMessageRef.current?.scrollIntoView(scrollOptionsEnd)\n    }, SCROLL_TIMEOUT)\n  }\n\n  const scrollToBanner = () => {\n    setTimeout(() => {\n      unreadMessagesBannerRef.current?.scrollIntoView(scrollOptionsCenter)\n    }, SCROLL_TIMEOUT)\n  }\n\n  const handleScrollToBottom = () => {\n    resetUnreadMessages()\n    if (webchatState.typing) {\n      scrollToTyping()\n      return\n    }\n\n    scrollToLastMessage()\n  }\n\n  const showUnreadMessagesBanner = (messageComponentId: string) => {\n    return (\n      !webchatState.isInputFocused &&\n      firstUnreadMessageId &&\n      messageComponentId === firstUnreadMessageId &&\n      webchatState.numUnreadMessages > 0\n    )\n  }\n\n  useEffect(() => {\n    const firstUnreadMessage = webchatState.messagesComponents.find(\n      message => message.props.isUnread\n    )\n    setFirstUnreadMessageId(firstUnreadMessage?.props?.id)\n  }, [webchatState.messagesComponents])\n\n  useEffect(() => {\n    if (webchatState.messagesComponents.length > 0 && lastMessageRef.current) {\n      const observer = new IntersectionObserver(entries => {\n        entries.forEach(entry => {\n          setLastMessageVisible(entry.isIntersecting)\n        })\n      })\n      observer.observe(lastMessageRef.current)\n    }\n  }, [webchatState.messagesComponents])\n\n  useEffect(() => {\n    if (!notificationsEnabled) {\n      if (webchatState.typing) {\n        scrollToTyping()\n        return\n      }\n\n      scrollToLastMessage()\n    }\n  }, [webchatState.typing, webchatState.messagesComponents])\n\n  useEffect(() => {\n    if (webchatState.isWebchatOpen && notificationsEnabled) {\n      if (unreadMessagesBannerRef.current) {\n        scrollToBanner()\n        return\n      }\n\n      if (webchatState.typing) {\n        scrollToTyping()\n        return\n      }\n\n      scrollToLastMessage()\n    }\n  }, [\n    firstUnreadMessageId,\n    webchatState.isWebchatOpen,\n    webchatState.typing,\n    webchatState.messagesComponents,\n  ])\n\n  const showScrollButton =\n    webchatState.numUnreadMessages > 0 && !webchatState.isLastMessageVisible\n\n  return (\n    <>\n      <ScrollableMessageList\n        id={BotonicContainerId.ScrollableMessagesList}\n        ref={scrollableMessagesListRef}\n        role={ROLES.MESSAGE_LIST}\n      >\n        <IntroMessage />\n        {webchatState.messagesComponents.map((messageComponent, index) => {\n          const messageId = messageComponent.props.id\n          const sentBySystem = messageComponent.props?.sentBy === SENDERS.system\n\n          // Check if system message is followed by a regular message (user/bot)\n          const nextMessage = webchatState.messagesComponents[index + 1]\n          const isSystemMessageFollowedByMessage =\n            sentBySystem &&\n            nextMessage &&\n            nextMessage.props?.sentBy !== SENDERS.system\n\n          return (\n            <React.Fragment key={messageId}>\n              <MessageContainer\n                role={sentBySystem ? ROLES.SYSTEM_MESSAGE : ROLES.MESSAGE}\n                $isLastSystemMessage={isSystemMessageFollowedByMessage}\n              >\n                {showUnreadMessagesBanner(messageId) && (\n                  <UnreadMessagesBanner\n                    unreadMessagesBannerRef={unreadMessagesBannerRef}\n                  />\n                )}\n                {messageComponent}\n              </MessageContainer>\n              {index === webchatState.messagesComponents.length - 1 && (\n                <div\n                  ref={lastMessageRef}\n                  style={{\n                    content: '',\n                  }}\n                ></div>\n              )}\n            </React.Fragment>\n          )\n        })}\n        {webchatState.typing && <TypingIndicator ref={typingRef} />}\n      </ScrollableMessageList>\n      {showScrollButton && <ScrollButton handleClick={handleScrollToBottom} />}\n    </>\n  )\n}\n"],"names":["React","useContext","useEffect","useRef","useState","ROLES","SENDERS","WebchatContext","BotonicContainerId","TypingIndicator","IntroMessage","ScrollButton","MessageContainer","ScrollableMessageList","UnreadMessagesBanner","useNotifications","SCROLL_TIMEOUT","scrollOptionsEnd","scrollOptionsCenter","WebchatMessageList","webchatState","resetUnreadMessages","setLastMessageVisible","scrollableMessagesListRef","notificationsEnabled","firstUnreadMessageId","setFirstUnreadMessageId","lastMessageRef","typingRef","unreadMessagesBannerRef","scrollToTyping","setTimeout","scrollToLastMessage","scrollToBanner","handleScrollToBottom","showUnreadMessagesBanner","messageComponentId","firstUnreadMessage","message","observer","IntersectionObserver","entries","entry","showScrollButton","messageComponent","index","messageId","sentBySystem","nextMessage","isSystemMessageFollowedByMessage"],"mappings":"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"}

package/lib/esm/webchat/message-list/intro-message.js

@@ -1,24 +1,49 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IntroMessage = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const constants_1 = require("../../constants");
-const styles_1 = require("../../shared/styles");
-const environment_1 = require("../../util/environment");
-const react_2 = require("../../util/react");
-const context_1 = require("../../webchat/context");
-const styles_2 = require("./styles");
-const IntroMessage = () => {
-    const { getThemeProperty } = (0, react_1.useContext)(context_1.WebchatContext);
-    const animationsEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableAnimations);
-    const CustomIntro = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customIntro);
-    const introImage = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.introImage);
-    const introStyle = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.introStyle);
-    const DefaultIntro = introImage && ((0, jsx_runtime_1.jsx)(styles_2.DefaultIntroImage, { style: {
-            ...introStyle,
-        }, src: (0, environment_1.resolveImage)(introImage) }));
-    return CustomIntro || DefaultIntro ? ((0, jsx_runtime_1.jsx)(react_2.ConditionalWrapper, { condition: animationsEnabled, wrapper: children => (0, jsx_runtime_1.jsx)(styles_1.Fade, { children: children }), children: CustomIntro ? (0, jsx_runtime_1.jsx)(CustomIntro, {}) : DefaultIntro })) : null;
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { WEBCHAT } from "../../constants.js";
+import { Fade } from "../../shared/styles.js";
+import { resolveImage } from "../../util/environment.js";
+import { ConditionalWrapper } from "../../util/react.js";
+import { WebchatContext } from "../context/index.js";
+import { DefaultIntroImage } from "./styles.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const IntroMessage = ()=>{
+    const { getThemeProperty } = useContext(WebchatContext);
+    const animationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableAnimations);
+    const CustomIntro = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customIntro);
+    const introImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introImage);
+    const introStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introStyle);
+    const DefaultIntro = introImage && /*#__PURE__*/ jsx(DefaultIntroImage, {
+        style: {
+            ...introStyle
+        },
+        src: resolveImage(introImage)
+    });
+    return CustomIntro || DefaultIntro ? /*#__PURE__*/ jsx(ConditionalWrapper, {
+        condition: animationsEnabled,
+        wrapper: (children)=>/*#__PURE__*/ jsx(Fade, {
+                children: children
+            }),
+        children: CustomIntro ? /*#__PURE__*/ jsx(CustomIntro, {}) : DefaultIntro
+    }) : null;
 };
-exports.IntroMessage = IntroMessage;
+
+export { IntroMessage };
+
 //# sourceMappingURL=intro-message.js.map

package/lib/esm/webchat/message-list/intro-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"intro-message.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/intro-message.tsx"],"names":[],"mappings":";;;;AAAA,iCAAkC;AAElC,+CAAyC;AACzC,gDAA0C;AAC1C,wDAAqD;AACrD,4CAAqD;AACrD,mDAAsD;AACtD,qCAA4C;AAErC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAc,CAAC,CAAA;IAEvD,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,mBAAO,CAAC,iBAAiB,CAAC,gBAAgB,CAC3C,CAAA;IACD,MAAM,WAAW,GAAG,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAC3E,MAAM,UAAU,GAAG,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAA;IACzE,MAAM,UAAU,GAAG,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAA;IAEzE,MAAM,YAAY,GAAG,UAAU,IAAI,CACjC,uBAAC,0BAAiB,IAChB,KAAK,EAAE;YACL,GAAG,UAAU;SACd,EACD,GAAG,EAAE,IAAA,0BAAY,EAAC,UAAU,CAAC,GAC7B,CACH,CAAA;IAED,OAAO,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CACnC,uBAAC,0BAAkB,IACjB,SAAS,EAAE,iBAAiB,EAC5B,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC,uBAAC,aAAI,cAAE,QAAQ,GAAQ,YAE3C,WAAW,CAAC,CAAC,CAAC,uBAAC,WAAW,KAAG,CAAC,CAAC,CAAC,YAAY,GAC1B,CACtB,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AA3BY,QAAA,YAAY,gBA2BxB"}
+{"version":3,"file":"webchat/message-list/intro-message.js","sources":["../../../../src/webchat/message-list/intro-message.tsx"],"sourcesContent":["import { useContext } from 'react'\n\nimport { WEBCHAT } from '../../constants'\nimport { Fade } from '../../shared/styles'\nimport { resolveImage } from '../../util/environment'\nimport { ConditionalWrapper } from '../../util/react'\nimport { WebchatContext } from '../../webchat/context'\nimport { DefaultIntroImage } from './styles'\n\nexport const IntroMessage = () => {\n  const { getThemeProperty } = useContext(WebchatContext)\n\n  const animationsEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations\n  )\n  const CustomIntro = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customIntro)\n  const introImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introImage)\n  const introStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introStyle)\n\n  const DefaultIntro = introImage && (\n    <DefaultIntroImage\n      style={{\n        ...introStyle,\n      }}\n      src={resolveImage(introImage)}\n    />\n  )\n\n  return CustomIntro || DefaultIntro ? (\n    <ConditionalWrapper\n      condition={animationsEnabled}\n      wrapper={children => <Fade>{children}</Fade>}\n    >\n      {CustomIntro ? <CustomIntro /> : DefaultIntro}\n    </ConditionalWrapper>\n  ) : null\n}\n"],"names":["useContext","WEBCHAT","Fade","resolveImage","ConditionalWrapper","WebchatContext","DefaultIntroImage","IntroMessage","getThemeProperty","animationsEnabled","CustomIntro","introImage","introStyle","DefaultIntro","children"],"mappings":";;;;;;;;;;;;;;;;;;AAAkC;AAEO;AACC;AACW;AACA;AACC;AACV;AAErC,MAAMO,YAAYA,GAAG;IAC1B,MAAM,EAAEC,gBAAgB,EAAE,GAAGR,UAAUA,CAACK,cAAcA;IAEtD,MAAMI,oBAAoBD,iBACxBP,0CAA0C;IAE5C,MAAMS,cAAcF,iBAAiBP,qCAAqC;IAC1E,MAAMU,aAAaH,iBAAiBP,oCAAoC;IACxE,MAAMW,aAAaJ,iBAAiBP,oCAAoC;IAExE,MAAMY,eAAeF,4BACnB,IAACL,iBAAiBA;QAChB,OAAO;YACL,GAAGM,UAAU;QACf;QACA,KAAKT,YAAYA,CAACQ;;IAItB,OAAOD,eAAeG,6BACpB,IAACT,kBAAkBA;QACjB,WAAWK;QACX,SAASK,CAAAA,yBAAY,IAACZ,IAAIA;0BAAEY;;kBAE3BJ,4BAAc,IAACA,mBAAiBG;SAEjC;AACN,EAAC"}

package/lib/esm/webchat/message-list/scroll-button.js

@@ -1,18 +1,37 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollButton = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-/** biome-ignore-all lint/a11y/useAltText: This is a SVG icon */
-const arrow_scroll_down_svg_1 = tslib_1.__importDefault(require("../../assets/arrow-scroll-down.svg"));
-const environment_1 = require("../../util/environment");
-const styles_1 = require("./styles");
-const use_debounce_1 = require("./use-debounce");
-const use_notifications_1 = require("./use-notifications");
-const ScrollButton = ({ handleClick, }) => {
-    const { CustomScrollButton, scrollButtonEnabled } = (0, use_notifications_1.useNotifications)();
-    const show = (0, use_debounce_1.useDebounce)();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scrollButtonEnabled && show ? (CustomScrollButton ? ((0, jsx_runtime_1.jsx)(CustomScrollButton, { handleScrollToBottom: handleClick })) : ((0, jsx_runtime_1.jsx)(styles_1.ContainerScrollButton, { onClick: handleClick, children: (0, jsx_runtime_1.jsx)("img", { src: (0, environment_1.resolveImage)(arrow_scroll_down_svg_1.default) }) }))) : null }));
+import { Fragment, jsx } from "react/jsx-runtime";
+import arrow_scroll_down from "../../assets/arrow-scroll-down.svg";
+import { resolveImage } from "../../util/environment.js";
+import { ContainerScrollButton } from "./styles.js";
+import { useDebounce } from "./use-debounce.js";
+import { useNotifications } from "./use-notifications.js";
+
+
+
+
+
+
+
+
+/** biome-ignore-all lint/a11y/useAltText: This is a SVG icon */ 
+
+
+
+
+const ScrollButton = ({ handleClick })=>{
+    const { CustomScrollButton, scrollButtonEnabled } = useNotifications();
+    const show = useDebounce();
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: scrollButtonEnabled && show ? CustomScrollButton ? /*#__PURE__*/ jsx(CustomScrollButton, {
+            handleScrollToBottom: handleClick
+        }) : /*#__PURE__*/ jsx(ContainerScrollButton, {
+            onClick: handleClick,
+            children: /*#__PURE__*/ jsx("img", {
+                src: resolveImage(arrow_scroll_down)
+            })
+        }) : null
+    });
 };
-exports.ScrollButton = ScrollButton;
+
+export { ScrollButton };
+
 //# sourceMappingURL=scroll-button.js.map

package/lib/esm/webchat/message-list/scroll-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-button.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/scroll-button.tsx"],"names":[],"mappings":";;;;;AAAA,gEAAgE;AAChE,uGAAgE;AAChE,wDAAqD;AACrD,qCAAgD;AAChD,iDAA4C;AAC5C,2DAAsD;AAM/C,MAAM,YAAY,GAAG,CAAC,EAC3B,WAAW,GACO,EAAe,EAAE;IACnC,MAAM,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,GAAG,IAAA,oCAAgB,GAAE,CAAA;IAEtE,MAAM,IAAI,GAAG,IAAA,0BAAW,GAAE,CAAA;IAE1B,OAAO,CACL,2DACG,mBAAmB,IAAI,IAAI,CAAC,CAAC,CAAC,CAC7B,kBAAkB,CAAC,CAAC,CAAC,CACnB,uBAAC,kBAAkB,IAAC,oBAAoB,EAAE,WAAW,GAAI,CAC1D,CAAC,CAAC,CAAC,CACF,uBAAC,8BAAqB,IAAC,OAAO,EAAE,WAAW,YACzC,gCAAK,GAAG,EAAE,IAAA,0BAAY,EAAC,+BAAe,CAAC,GAAI,GACrB,CACzB,CACF,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA;AApBY,QAAA,YAAY,gBAoBxB"}
+{"version":3,"file":"webchat/message-list/scroll-button.js","sources":["../../../../src/webchat/message-list/scroll-button.tsx"],"sourcesContent":["/** biome-ignore-all lint/a11y/useAltText: This is a SVG icon */\nimport ArrowScrollDown from '../../assets/arrow-scroll-down.svg'\nimport { resolveImage } from '../../util/environment'\nimport { ContainerScrollButton } from './styles'\nimport { useDebounce } from './use-debounce'\nimport { useNotifications } from './use-notifications'\n\ninterface ScrollButtonProps {\n  handleClick: () => void\n}\n\nexport const ScrollButton = ({\n  handleClick,\n}: ScrollButtonProps): JSX.Element => {\n  const { CustomScrollButton, scrollButtonEnabled } = useNotifications()\n\n  const show = useDebounce()\n\n  return (\n    <>\n      {scrollButtonEnabled && show ? (\n        CustomScrollButton ? (\n          <CustomScrollButton handleScrollToBottom={handleClick} />\n        ) : (\n          <ContainerScrollButton onClick={handleClick}>\n            <img src={resolveImage(ArrowScrollDown)} />\n          </ContainerScrollButton>\n        )\n      ) : null}\n    </>\n  )\n}\n"],"names":["ArrowScrollDown","resolveImage","ContainerScrollButton","useDebounce","useNotifications","ScrollButton","handleClick","CustomScrollButton","scrollButtonEnabled","show"],"mappings":";;;;;;;;;;;;;;AAAA,8DAA8D,GACE;AACX;AACL;AACJ;AACU;AAM/C,MAAMK,YAAYA,GAAG,CAAC,EAC3BC,WAAW,EACO;IAClB,MAAM,EAAEC,kBAAkB,EAAEC,mBAAmB,EAAE,GAAGJ,gBAAgBA;IAEpE,MAAMK,OAAON,WAAWA;IAExB,qBACE;kBACGK,uBAAuBC,OACtBF,mCACE,IAACA;YAAmB,sBAAsBD;2BAE1C,IAACJ,qBAAqBA;YAAC,SAASI;sBAC9B,kBAAC;gBAAI,KAAKL,YAAYA,CAACD,iBAAeA;;aAGxC;;AAGV,EAAC"}

package/lib/esm/webchat/message-list/styles.js

@@ -1,22 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollableMessageList = exports.ContainerUnreadMessagesBanner = exports.ContainerScrollButton = exports.DefaultIntroImage = exports.MessageContainer = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.MessageContainer = styled_components_1.default.div `
+import styled_components from "styled-components";
+
+
+
+const MessageContainer = styled_components.div`
   display: flex;
   overflow-x: hidden;
   flex-direction: column;
   flex: none;
   white-space: pre;
   word-wrap: break-word;
-  margin-bottom: ${({ $isLastSystemMessage }) => $isLastSystemMessage ? '8px' : '0'};
+  margin-bottom: ${({ $isLastSystemMessage })=>$isLastSystemMessage ? '8px' : '0'};
 `;
-exports.DefaultIntroImage = styled_components_1.default.img `
+const DefaultIntroImage = styled_components.img`
   max-height: 50%;
   width: 100%;
 `;
-exports.ContainerScrollButton = styled_components_1.default.div `
+const ContainerScrollButton = styled_components.div`
   position: sticky;
   left: 85%;
   bottom: 15px;
@@ -31,7 +30,7 @@ exports.ContainerScrollButton = styled_components_1.default.div `
   height: 37px;
   border-radius: 50%;
 `;
-exports.ContainerUnreadMessagesBanner = styled_components_1.default.div `
+const ContainerUnreadMessagesBanner = styled_components.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -48,7 +47,7 @@ exports.ContainerUnreadMessagesBanner = styled_components_1.default.div `
     width: 10px;
   }
 `;
-exports.ScrollableMessageList = styled_components_1.default.div `
+const ScrollableMessageList = styled_components.div`
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -58,4 +57,7 @@ exports.ScrollableMessageList = styled_components_1.default.div `
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
 `;
+
+export { ContainerScrollButton, ContainerUnreadMessagesBanner, DefaultIntroImage, MessageContainer, ScrollableMessageList };
+
 //# sourceMappingURL=styles.js.map

package/lib/esm/webchat/message-list/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/styles.ts"],"names":[],"mappings":";;;;AAAA,kFAAsC;AAMzB,QAAA,gBAAgB,GAAG,2BAAM,CAAC,GAAG,CAAuB;;;;;;;mBAO9C,CAAC,EAAE,oBAAoB,EAAE,EAAE,EAAE,CAC5C,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;CACrC,CAAA;AAEY,QAAA,iBAAiB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;CAG1C,CAAA;AAEY,QAAA,qBAAqB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;CAc9C,CAAA;AAEY,QAAA,6BAA6B,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBtD,CAAA;AAEY,QAAA,qBAAqB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS9C,CAAA"}
+{"version":3,"file":"webchat/message-list/styles.js","sources":["../../../../src/webchat/message-list/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\ninterface MessageContainerProps {\n  $isLastSystemMessage?: boolean\n}\n\nexport const MessageContainer = styled.div<MessageContainerProps>`\n  display: flex;\n  overflow-x: hidden;\n  flex-direction: column;\n  flex: none;\n  white-space: pre;\n  word-wrap: break-word;\n  margin-bottom: ${({ $isLastSystemMessage }) =>\n    $isLastSystemMessage ? '8px' : '0'};\n`\n\nexport const DefaultIntroImage = styled.img`\n  max-height: 50%;\n  width: 100%;\n`\n\nexport const ContainerScrollButton = styled.div`\n  position: sticky;\n  left: 85%;\n  bottom: 15px;\n\n  background-color: #6d6a78;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 37px;\n  height: 37px;\n  border-radius: 50%;\n`\n\nexport const ContainerUnreadMessagesBanner = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n\n  border-top: 1px solid #e8e8ea;\n  padding: 8px;\n  color: #6d6a78;\n  font-size: 14px;\n  font-weight: 400;\n  width: 100%;\n\n  img {\n    width: 10px;\n  }\n`\n\nexport const ScrollableMessageList = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  overscroll-behavior: contain; // https://css-tricks.com/almanac/properties/o/overscroll-behavior/\n  scroll-behavior: smooth;\n  -webkit-overflow-scrolling: touch;\n`\n"],"names":["styled","MessageContainer","$isLastSystemMessage","DefaultIntroImage","ContainerScrollButton","ContainerUnreadMessagesBanner","ScrollableMessageList"],"mappings":";;;AAAsC;AAM/B,MAAMC,gBAAgBA,GAAGD,qBAAiC,CAAC;;;;;;;iBAOjD,EAAE,CAAC,EAAEE,oBAAoB,EAAE,GACxCA,uBAAuB,QAAQ,IAAI;AACvC,CAAC;AAEM,MAAMC,iBAAiBA,GAAGH,qBAAU,CAAC;;;AAG5C,CAAC;AAEM,MAAMI,qBAAqBA,GAAGJ,qBAAU,CAAC;;;;;;;;;;;;;;AAchD,CAAC;AAEM,MAAMK,6BAA6BA,GAAGL,qBAAU,CAAC;;;;;;;;;;;;;;;;AAgBxD,CAAC;AAEM,MAAMM,qBAAqBA,GAAGN,qBAAU,CAAC;;;;;;;;;AAShD,CAAC"}

package/lib/esm/webchat/message-list/unread-messages-banner.js

@@ -1,18 +1,45 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UnreadMessagesBanner = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const arrow_down_svg_1 = tslib_1.__importDefault(require("../../assets/arrow-down.svg"));
-const environment_1 = require("../../util/environment");
-const context_1 = require("../../webchat/context");
-const styles_1 = require("./styles");
-const use_notifications_1 = require("./use-notifications");
-const UnreadMessagesBanner = ({ unreadMessagesBannerRef, }) => {
-    const { webchatState } = (0, react_1.useContext)(context_1.WebchatContext);
-    const { notificationsEnabled, CustomUnreadMessagesBanner, bannerText } = (0, use_notifications_1.useNotifications)();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: notificationsEnabled ? ((0, jsx_runtime_1.jsx)("div", { ref: unreadMessagesBannerRef, children: CustomUnreadMessagesBanner ? ((0, jsx_runtime_1.jsx)(CustomUnreadMessagesBanner, {})) : ((0, jsx_runtime_1.jsxs)(styles_1.ContainerUnreadMessagesBanner, { children: [(0, jsx_runtime_1.jsx)("img", { src: (0, environment_1.resolveImage)(arrow_down_svg_1.default) }), webchatState.numUnreadMessages, " ", bannerText] })) })) : null }));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import arrow_down from "../../assets/arrow-down.svg";
+import { resolveImage } from "../../util/environment.js";
+import { WebchatContext } from "../context/index.js";
+import { ContainerUnreadMessagesBanner } from "./styles.js";
+import { useNotifications } from "./use-notifications.js";
+
+
+
+
+
+
+
+
+/** biome-ignore-all lint/a11y/useAltText: we need to use alt text for the unread messages banner */ 
+
+
+
+
+
+
+const UnreadMessagesBanner = ({ unreadMessagesBannerRef })=>{
+    const { webchatState } = useContext(WebchatContext);
+    const { notificationsEnabled, CustomUnreadMessagesBanner, bannerText } = useNotifications();
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: notificationsEnabled ? /*#__PURE__*/ jsx("div", {
+            ref: unreadMessagesBannerRef,
+            children: CustomUnreadMessagesBanner ? /*#__PURE__*/ jsx(CustomUnreadMessagesBanner, {}) : /*#__PURE__*/ jsxs(ContainerUnreadMessagesBanner, {
+                children: [
+                    /*#__PURE__*/ jsx("img", {
+                        src: resolveImage(arrow_down)
+                    }),
+                    webchatState.numUnreadMessages,
+                    " ",
+                    bannerText
+                ]
+            })
+        }) : null
+    });
 };
-exports.UnreadMessagesBanner = UnreadMessagesBanner;
+
+export { UnreadMessagesBanner };
+
 //# sourceMappingURL=unread-messages-banner.js.map

package/lib/esm/webchat/message-list/unread-messages-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"unread-messages-banner.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/unread-messages-banner.tsx"],"names":[],"mappings":";;;;;AAEA,iCAAkC;AAElC,yFAAmD;AACnD,wDAAqD;AACrD,mDAAsD;AACtD,qCAAwD;AACxD,2DAAsD;AAM/C,MAAM,oBAAoB,GAAG,CAAC,EACnC,uBAAuB,GACG,EAAe,EAAE;IAC3C,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAc,CAAC,CAAA;IAEnD,MAAM,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,UAAU,EAAE,GACpE,IAAA,oCAAgB,GAAE,CAAA;IAEpB,OAAO,CACL,2DACG,oBAAoB,CAAC,CAAC,CAAC,CACtB,gCAAK,GAAG,EAAE,uBAAuB,YAC9B,0BAA0B,CAAC,CAAC,CAAC,CAC5B,uBAAC,0BAA0B,KAAG,CAC/B,CAAC,CAAC,CAAC,CACF,wBAAC,sCAA6B,eAC5B,gCAAK,GAAG,EAAE,IAAA,0BAAY,EAAC,wBAAS,CAAC,GAAI,EACpC,YAAY,CAAC,iBAAiB,OAAG,UAAU,IACd,CACjC,GACG,CACP,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA;AAxBY,QAAA,oBAAoB,wBAwBhC"}
+{"version":3,"file":"webchat/message-list/unread-messages-banner.js","sources":["../../../../src/webchat/message-list/unread-messages-banner.tsx"],"sourcesContent":["/** biome-ignore-all lint/a11y/useAltText: we need to use alt text for the unread messages banner */\nimport type React from 'react'\nimport { useContext } from 'react'\n\nimport ArrowDown from '../../assets/arrow-down.svg'\nimport { resolveImage } from '../../util/environment'\nimport { WebchatContext } from '../../webchat/context'\nimport { ContainerUnreadMessagesBanner } from './styles'\nimport { useNotifications } from './use-notifications'\n\ninterface UnreadMessagesBannerProps {\n  unreadMessagesBannerRef: React.RefObject<HTMLDivElement>\n}\n\nexport const UnreadMessagesBanner = ({\n  unreadMessagesBannerRef,\n}: UnreadMessagesBannerProps): JSX.Element => {\n  const { webchatState } = useContext(WebchatContext)\n\n  const { notificationsEnabled, CustomUnreadMessagesBanner, bannerText } =\n    useNotifications()\n\n  return (\n    <>\n      {notificationsEnabled ? (\n        <div ref={unreadMessagesBannerRef}>\n          {CustomUnreadMessagesBanner ? (\n            <CustomUnreadMessagesBanner />\n          ) : (\n            <ContainerUnreadMessagesBanner>\n              <img src={resolveImage(ArrowDown)} />\n              {webchatState.numUnreadMessages} {bannerText}\n            </ContainerUnreadMessagesBanner>\n          )}\n        </div>\n      ) : null}\n    </>\n  )\n}\n"],"names":["useContext","ArrowDown","resolveImage","WebchatContext","ContainerUnreadMessagesBanner","useNotifications","UnreadMessagesBanner","unreadMessagesBannerRef","webchatState","notificationsEnabled","CustomUnreadMessagesBanner","bannerText"],"mappings":";;;;;;;;;;;;;;;AAAA,kGAAkG;AAEhE;AAEiB;AACE;AACC;AACE;AACF;AAM/C,MAAMM,oBAAoBA,GAAG,CAAC,EACnCC,uBAAuB,EACG;IAC1B,MAAM,EAAEC,YAAY,EAAE,GAAGR,UAAUA,CAACG,cAAcA;IAElD,MAAM,EAAEM,oBAAoB,EAAEC,0BAA0B,EAAEC,UAAU,EAAE,GACpEN,gBAAgBA;IAElB,qBACE;kBACGI,qCACC,IAAC;YAAI,KAAKF;sBACPG,2CACC,IAACA,gDAED,KAACN,6BAA6BA;;kCAC5B,IAAC;wBAAI,KAAKF,YAAYA,CAACD,UAASA;;oBAC/BO,aAAa,iBAAiB;oBAAC;oBAAEG;;;aAItC;;AAGV,EAAC"}