@botonic/react 0.56.0-alpha.0 → 0.57.0-rslib-esm.1

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

@@ -0,0 +1,176 @@
+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'
+};
+const scrollOptionsCenter = {
+    block: 'center'
+};
+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(()=>{
+            lastMessageRef.current?.scrollIntoView(scrollOptionsEnd);
+        }, SCROLL_TIMEOUT);
+    };
+    const scrollToBanner = ()=>{
+        setTimeout(()=>{
+            unreadMessagesBannerRef.current?.scrollIntoView(scrollOptionsCenter);
+        }, SCROLL_TIMEOUT);
+    };
+    const handleScrollToBottom = ()=>{
+        resetUnreadMessages();
+        if (webchatState.typing) {
+            scrollToTyping();
+            return;
+        }
+        scrollToLastMessage();
+    };
+    const showUnreadMessagesBanner = (messageComponentId)=>{
+        return !webchatState.isInputFocused && firstUnreadMessageId && messageComponentId === firstUnreadMessageId && webchatState.numUnreadMessages > 0;
+    };
+    useEffect(()=>{
+        const firstUnreadMessage = webchatState.messagesComponents.find((message)=>message.props.isUnread);
+        setFirstUnreadMessageId(firstUnreadMessage?.props?.id);
+    }, [
+        webchatState.messagesComponents
+    ]);
+    useEffect(()=>{
+        if (webchatState.messagesComponents.length > 0 && lastMessageRef.current) {
+            const observer = new IntersectionObserver((entries)=>{
+                entries.forEach((entry)=>{
+                    setLastMessageVisible(entry.isIntersecting);
+                });
+            });
+            observer.observe(lastMessageRef.current);
+        }
+    }, [
+        webchatState.messagesComponents
+    ]);
+    useEffect(()=>{
+        if (!notificationsEnabled) {
+            if (webchatState.typing) {
+                scrollToTyping();
+                return;
+            }
+            scrollToLastMessage();
+        }
+    }, [
+        webchatState.typing,
+        webchatState.messagesComponents
+    ]);
+    useEffect(()=>{
+        if (webchatState.isWebchatOpen && notificationsEnabled) {
+            if (unreadMessagesBannerRef.current) {
+                scrollToBanner();
+                return;
+            }
+            if (webchatState.typing) {
+                scrollToTyping();
+                return;
+            }
+            scrollToLastMessage();
+        }
+    }, [
+        firstUnreadMessageId,
+        webchatState.isWebchatOpen,
+        webchatState.typing,
+        webchatState.messagesComponents
+    ]);
+    const showScrollButton = webchatState.numUnreadMessages > 0 && !webchatState.isLastMessageVisible;
+    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 === 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 !== 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
+            })
+        ]
+    });
+};
+
+export { WebchatMessageList };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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/webchat/message-list/intro-message.d.ts

@@ -0,0 +1 @@
+export declare const IntroMessage: () => import("react").JSX.Element | null;

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

@@ -0,0 +1,49 @@
+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;
+};
+
+export { IntroMessage };
+
+//# sourceMappingURL=intro-message.js.map

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

@@ -0,0 +1 @@
+{"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/webchat/message-list/scroll-button.js

@@ -0,0 +1,37 @@
+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
+    });
+};
+
+export { ScrollButton };
+
+//# sourceMappingURL=scroll-button.js.map

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

@@ -0,0 +1 @@
+{"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/webchat/message-list/styles.js

@@ -0,0 +1,63 @@
+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'};
+`;
+const DefaultIntroImage = styled_components.img`
+  max-height: 50%;
+  width: 100%;
+`;
+const ContainerScrollButton = styled_components.div`
+  position: sticky;
+  left: 85%;
+  bottom: 15px;
+
+  background-color: #6d6a78;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 37px;
+  height: 37px;
+  border-radius: 50%;
+`;
+const ContainerUnreadMessagesBanner = styled_components.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+
+  border-top: 1px solid #e8e8ea;
+  padding: 8px;
+  color: #6d6a78;
+  font-size: 14px;
+  font-weight: 400;
+  width: 100%;
+
+  img {
+    width: 10px;
+  }
+`;
+const ScrollableMessageList = styled_components.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain; // https://css-tricks.com/almanac/properties/o/overscroll-behavior/
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+`;
+
+export { ContainerScrollButton, ContainerUnreadMessagesBanner, DefaultIntroImage, MessageContainer, ScrollableMessageList };
+
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"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/webchat/message-list/unread-messages-banner.js

@@ -0,0 +1,45 @@
+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
+    });
+};
+
+export { UnreadMessagesBanner };
+
+//# sourceMappingURL=unread-messages-banner.js.map

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

@@ -0,0 +1 @@
+{"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"}

package/lib/webchat/message-list/use-debounce.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+
+
+function useDebounce(delay) {
+    const [show, setShow] = useState(false);
+    useEffect(()=>{
+        const timeoutId = setTimeout(()=>{
+            setShow(true);
+        }, delay || 500);
+        return ()=>{
+            clearTimeout(timeoutId);
+        };
+    }, []);
+    return show;
+}
+
+export { useDebounce };
+
+//# sourceMappingURL=use-debounce.js.map

package/lib/webchat/message-list/use-debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/message-list/use-debounce.js","sources":["../../../src/webchat/message-list/use-debounce.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nexport function useDebounce(delay?: number) {\n  const [show, setShow] = useState(false)\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setShow(true)\n    }, delay || 500)\n\n    return () => {\n      clearTimeout(timeoutId)\n    }\n  }, [])\n\n  return show\n}\n"],"names":["useEffect","useState","useDebounce","delay","show","setShow","timeoutId","setTimeout","clearTimeout"],"mappings":";;;AAA2C;AAEpC,SAASE,WAAWA,CAACC,KAAc;IACxC,MAAM,CAACC,MAAMC,QAAQ,GAAGJ,QAAQA,CAAC;IACjCD,SAASA,CAAC;QACR,MAAMM,YAAYC,WAAW;YAC3BF,QAAQ;QACV,GAAGF,SAAS;QAEZ,OAAO;YACLK,aAAaF;QACf;IACF,GAAG,EAAE;IAEL,OAAOF;AACT"}

package/lib/webchat/message-list/use-notifications.js

@@ -0,0 +1,30 @@
+import { useContext } from "react";
+import { WEBCHAT } from "../../constants.js";
+import { WebchatContext } from "../context/index.js";
+
+
+
+
+
+
+
+function useNotifications() {
+    const { getThemeProperty } = useContext(WebchatContext);
+    const CustomUnreadMessagesBanner = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerCustom);
+    const notificationsBannerEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerEnabled);
+    const notificationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled, CustomUnreadMessagesBanner || notificationsBannerEnabled);
+    const bannerText = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerText);
+    const CustomScrollButton = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollButtonCustom);
+    const scrollButtonEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollButtonEnabled, CustomScrollButton);
+    return {
+        notificationsEnabled,
+        bannerText,
+        CustomUnreadMessagesBanner,
+        CustomScrollButton,
+        scrollButtonEnabled
+    };
+}
+
+export { useNotifications };
+
+//# sourceMappingURL=use-notifications.js.map

package/lib/webchat/message-list/use-notifications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/message-list/use-notifications.js","sources":["../../../src/webchat/message-list/use-notifications.ts"],"sourcesContent":["import { useContext } from 'react'\n\nimport { WEBCHAT } from '../../constants'\nimport { WebchatContext } from '../../webchat/context'\n\nexport function useNotifications() {\n  const { getThemeProperty } = useContext(WebchatContext)\n\n  const CustomUnreadMessagesBanner = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerCustom\n  )\n\n  const notificationsBannerEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerEnabled\n  )\n\n  const notificationsEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled,\n    CustomUnreadMessagesBanner || notificationsBannerEnabled\n  )\n\n  const bannerText = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerText\n  )\n\n  const CustomScrollButton = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonCustom\n  )\n\n  const scrollButtonEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonEnabled,\n    CustomScrollButton\n  )\n\n  return {\n    notificationsEnabled,\n    bannerText,\n    CustomUnreadMessagesBanner,\n    CustomScrollButton,\n    scrollButtonEnabled,\n  }\n}\n"],"names":["useContext","WEBCHAT","WebchatContext","useNotifications","getThemeProperty","CustomUnreadMessagesBanner","notificationsBannerEnabled","notificationsEnabled","bannerText","CustomScrollButton","scrollButtonEnabled"],"mappings":";;;;;;;AAAkC;AAEO;AACa;AAE/C,SAASG,gBAAgBA;IAC9B,MAAM,EAAEC,gBAAgB,EAAE,GAAGJ,UAAUA,CAACE,cAAcA;IAEtD,MAAMG,6BAA6BD,iBACjCH,mDAAmD;IAGrD,MAAMK,6BAA6BF,iBACjCH,oDAAoD;IAGtD,MAAMM,uBAAuBH,iBAC3BH,8CAA8C,EAC9CI,8BAA8BC;IAGhC,MAAME,aAAaJ,iBACjBH,iDAAiD;IAGnD,MAAMQ,qBAAqBL,iBACzBH,4CAA4C;IAG9C,MAAMS,sBAAsBN,iBAC1BH,6CAA6C,EAC7CQ;IAGF,OAAO;QACLF;QACAC;QACAH;QACAI;QACAC;IACF;AACF"}

package/lib/webchat/replies/index.d.ts

@@ -0,0 +1 @@
+export declare const WebchatReplies: () => import("react").JSX.Element;

package/lib/webchat/replies/index.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { WEBCHAT } from "../../constants.js";
+import { WebchatContext } from "../context/index.js";
+import { BotonicContainerId } from "../constants.js";
+import { RepliesContainer, ReplyContainer, ScrollableReplies } from "./styles.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+const options = {
+    left: 'flex-start',
+    center: 'center',
+    right: 'flex-end'
+};
+const WebchatReplies = ()=>{
+    const { webchatState, getThemeProperty, repliesRef } = useContext(WebchatContext);
+    let justifyContent = 'center';
+    const flexWrap = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.wrapReplies, 'wrap');
+    if (flexWrap === 'nowrap') {
+        justifyContent = 'flex-start';
+    } else if (getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)) {
+        justifyContent = options[getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)];
+    }
+    return /*#__PURE__*/ jsx(ScrollableReplies, {
+        children: /*#__PURE__*/ jsx(RepliesContainer, {
+            id: BotonicContainerId.RepliesContainer,
+            ref: repliesRef,
+            className: "replies-container",
+            justify: justifyContent,
+            wrap: flexWrap,
+            children: webchatState.replies?.map((reply, i)=>// @ts-expect-error TODO: In this point reply is the the component to render
+                /*#__PURE__*/ jsx(ReplyContainer, {
+                    children: reply
+                }, `reply-${i}`))
+        })
+    });
+};
+
+export { WebchatReplies };
+
+//# sourceMappingURL=index.js.map

package/lib/webchat/replies/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/replies/index.js","sources":["../../../src/webchat/replies/index.tsx"],"sourcesContent":["import { useContext } from 'react'\n\nimport { WEBCHAT } from '../../constants'\nimport { WebchatContext } from '../../webchat/context'\nimport { BotonicContainerId } from '../constants'\nimport { RepliesContainer, ReplyContainer, ScrollableReplies } from './styles'\n\nconst options = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n}\n\nexport const WebchatReplies = () => {\n  const { webchatState, getThemeProperty, repliesRef } =\n    useContext(WebchatContext)\n\n  let justifyContent = 'center'\n  const flexWrap = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.wrapReplies,\n    'wrap'\n  )\n\n  if (flexWrap === 'nowrap') {\n    justifyContent = 'flex-start'\n  } else if (getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)) {\n    justifyContent =\n      options[getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)]\n  }\n\n  return (\n    <ScrollableReplies>\n      <RepliesContainer\n        id={BotonicContainerId.RepliesContainer}\n        ref={repliesRef}\n        className='replies-container'\n        justify={justifyContent}\n        wrap={flexWrap}\n      >\n        {webchatState.replies?.map((reply, i) => (\n          // @ts-expect-error TODO: In this point reply is the the component to render\n          <ReplyContainer key={`reply-${i}`}>{reply}</ReplyContainer>\n        ))}\n      </RepliesContainer>\n    </ScrollableReplies>\n  )\n}\n"],"names":["useContext","WEBCHAT","WebchatContext","BotonicContainerId","RepliesContainer","ReplyContainer","ScrollableReplies","options","WebchatReplies","webchatState","getThemeProperty","repliesRef","justifyContent","flexWrap","reply","i"],"mappings":";;;;;;;;;;;;;;AAAkC;AAEO;AACa;AACL;AAC6B;AAE9E,MAAMO,OAAOA,GAAG;IACd,MAAM;IACN,QAAQ;IACR,OAAO;AACT;AAEO,MAAMC,cAAcA,GAAG;IAC5B,MAAM,EAAEC,YAAY,EAAEC,gBAAgB,EAAEC,UAAU,EAAE,GAClDX,UAAUA,CAACE,cAAcA;IAE3B,IAAIU,iBAAiB;IACrB,MAAMC,WAAWH,iBACfT,qCAAqC,EACrC;IAGF,IAAIY,aAAa,UAAU;QACzBD,iBAAiB;IACnB,OAAO,IAAIF,iBAAiBT,sCAAsC,GAAG;QACnEW,iBACEL,OAAO,CAACG,iBAAiBT,sCAAsC,EAAE;IACrE;IAEA,qBACE,IAACK,iBAAiBA;kBAChB,kBAACF,gBAAgBA;YACf,IAAID,mCAAmC;YACvC,KAAKQ;YACL,WAAU;YACV,SAASC;YACT,MAAMC;sBAELJ,aAAa,OAAO,EAAE,IAAI,CAACK,OAAOC,IACjC,4EAA4E;8BAC5E,IAACV,cAAcA;8BAAqBS;mBAAf,CAAC,MAAM,EAAEC,GAAG;;;AAK3C,EAAC"}

package/lib/webchat/replies/styles.js

@@ -0,0 +1,27 @@
+import styled_components from "styled-components";
+
+
+
+const ScrollableReplies = styled_components.div`
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+`;
+const RepliesContainer = styled_components.div`
+  display: flex;
+  text-align: center;
+  justify-content: ${(props)=>props.justify};
+  flex-wrap: ${(props)=>props.wrap};
+  padding-bottom: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+  overflow-x: auto;
+`;
+const ReplyContainer = styled_components.div`
+  flex: none;
+  display: inline-block;
+  margin: 3px;
+`;
+
+export { RepliesContainer, ReplyContainer, ScrollableReplies };
+
+//# sourceMappingURL=styles.js.map

package/lib/webchat/replies/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/replies/styles.js","sources":["../../../src/webchat/replies/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const ScrollableReplies = styled.div`\n  overscroll-behavior: contain;\n  -webkit-overflow-scrolling: touch;\n`\n\ninterface RepliesContainerProps {\n  justify: string\n  wrap: string\n}\n\nexport const RepliesContainer = styled.div<RepliesContainerProps>`\n  display: flex;\n  text-align: center;\n  justify-content: ${props => props.justify};\n  flex-wrap: ${props => props.wrap};\n  padding-bottom: 10px;\n  margin-left: 5px;\n  margin-right: 5px;\n  overflow-x: auto;\n`\n\nexport const ReplyContainer = styled.div`\n  flex: none;\n  display: inline-block;\n  margin: 3px;\n`\n"],"names":["styled","ScrollableReplies","RepliesContainer","props","ReplyContainer"],"mappings":";;;AAAsC;AAE/B,MAAMC,iBAAiBA,GAAGD,qBAAU,CAAC;;;AAG5C,CAAC;AAOM,MAAME,gBAAgBA,GAAGF,qBAAiC,CAAC;;;mBAG/C,EAAEG,CAAAA,QAASA,MAAM,OAAO,CAAC;aAC/B,EAAEA,CAAAA,QAASA,MAAM,IAAI,CAAC;;;;;AAKnC,CAAC;AAEM,MAAMC,cAAcA,GAAGJ,qBAAU,CAAC;;;;AAIzC,CAAC"}

package/lib/webchat/session-view.d.ts

@@ -0,0 +1 @@
+export function SessionView(props: any): import("react").JSX.Element;