@botonic/react 0.24.0-alpha.3 → 0.24.0-alpha.5

package/lib/esm/webchat/hooks/use-webchat.js

@@ -0,0 +1,177 @@
+import { useReducer } from 'react';
+import { COLORS, WEBCHAT } from '../../constants';
+import { WebchatAction } from '../actions';
+import { webchatReducer } from '../webchat-reducer';
+export const webchatInitialState = {
+    width: WEBCHAT.DEFAULTS.WIDTH,
+    height: WEBCHAT.DEFAULTS.HEIGHT,
+    messagesJSON: [],
+    messagesComponents: [],
+    replies: [],
+    latestInput: {},
+    typing: false,
+    webview: null,
+    webviewParams: null,
+    session: { user: undefined },
+    lastRoutePath: null,
+    handoff: false,
+    theme: {
+        headerTitle: WEBCHAT.DEFAULTS.TITLE,
+        brandColor: COLORS.BOTONIC_BLUE,
+        brandImage: WEBCHAT.DEFAULTS.LOGO,
+        triggerButtonImage: undefined,
+        textPlaceholder: WEBCHAT.DEFAULTS.PLACEHOLDER,
+        style: {
+            fontFamily: WEBCHAT.DEFAULTS.FONT_FAMILY,
+        },
+    },
+    themeUpdates: {},
+    error: {},
+    online: true,
+    devSettings: { keepSessionOnReload: false },
+    isWebchatOpen: false,
+    isEmojiPickerOpen: false,
+    isPersistentMenuOpen: false,
+    isCoverComponentOpen: false,
+    isCustomComponentRendered: false,
+    lastMessageUpdate: undefined,
+    currentAttachment: undefined,
+    jwt: undefined,
+    numUnreadMessages: 0,
+    isLastMessageVisible: true,
+};
+export function useWebchat() {
+    const [webchatState, webchatDispatch] = useReducer(webchatReducer, webchatInitialState);
+    const addMessage = (message) => webchatDispatch({ type: WebchatAction.ADD_MESSAGE, payload: message });
+    const addMessageComponent = (message) => webchatDispatch({
+        type: WebchatAction.ADD_MESSAGE_COMPONENT,
+        payload: message,
+    });
+    const updateMessage = (message) => webchatDispatch({ type: WebchatAction.UPDATE_MESSAGE, payload: message });
+    const updateReplies = replies => webchatDispatch({ type: WebchatAction.UPDATE_REPLIES, payload: replies });
+    const updateLatestInput = (input) => webchatDispatch({ type: WebchatAction.UPDATE_LATEST_INPUT, payload: input });
+    const updateTyping = (typing) => webchatDispatch({ type: WebchatAction.UPDATE_TYPING, payload: typing });
+    const updateWebview = (webview, params) => webchatDispatch({
+        type: WebchatAction.UPDATE_WEBVIEW,
+        payload: { webview, webviewParams: params },
+    });
+    const updateSession = (session) => {
+        webchatDispatch({
+            type: WebchatAction.UPDATE_SESSION,
+            payload: session,
+        });
+    };
+    const updateLastRoutePath = (path) => webchatDispatch({
+        type: WebchatAction.UPDATE_LAST_ROUTE_PATH,
+        payload: path,
+    });
+    const updateHandoff = (handoff) => webchatDispatch({
+        type: WebchatAction.UPDATE_HANDOFF,
+        payload: handoff,
+    });
+    const updateTheme = (theme, themeUpdates) => {
+        const payload = themeUpdates !== undefined ? { theme, themeUpdates } : { theme };
+        webchatDispatch({
+            type: WebchatAction.UPDATE_THEME,
+            payload,
+        });
+    };
+    const updateDevSettings = (settings) => webchatDispatch({
+        type: WebchatAction.UPDATE_DEV_SETTINGS,
+        payload: settings,
+    });
+    const toggleWebchat = (toggle) => {
+        webchatDispatch({
+            type: WebchatAction.TOGGLE_WEBCHAT,
+            payload: toggle,
+        });
+    };
+    const toggleEmojiPicker = (toggle) => webchatDispatch({
+        type: WebchatAction.TOGGLE_EMOJI_PICKER,
+        payload: toggle,
+    });
+    const togglePersistentMenu = (toggle) => webchatDispatch({
+        type: WebchatAction.TOGGLE_PERSISTENT_MENU,
+        payload: toggle,
+    });
+    const toggleCoverComponent = (toggle) => webchatDispatch({
+        type: WebchatAction.TOGGLE_COVER_COMPONENT,
+        payload: toggle,
+    });
+    const doRenderCustomComponent = (toggle) => webchatDispatch({
+        type: WebchatAction.DO_RENDER_CUSTOM_COMPONENT,
+        payload: toggle,
+    });
+    const setError = (error) => webchatDispatch({
+        type: WebchatAction.SET_ERROR,
+        payload: error,
+    });
+    const setOnline = (online) => webchatDispatch({
+        type: WebchatAction.SET_ONLINE,
+        payload: online,
+    });
+    const clearMessages = () => {
+        webchatDispatch({
+            type: WebchatAction.CLEAR_MESSAGES,
+        });
+    };
+    const updateLastMessageDate = (date) => {
+        webchatDispatch({
+            type: WebchatAction.UPDATE_LAST_MESSAGE_DATE,
+            payload: date,
+        });
+    };
+    const setCurrentAttachment = (attachment) => {
+        webchatDispatch({
+            type: WebchatAction.SET_CURRENT_ATTACHMENT,
+            payload: attachment,
+        });
+    };
+    const updateJwt = (jwt) => {
+        webchatDispatch({
+            type: WebchatAction.UPDATE_JWT,
+            payload: jwt,
+        });
+    };
+    const resetUnreadMessages = () => {
+        webchatDispatch({
+            type: WebchatAction.RESET_UNREAD_MESSAGES,
+        });
+    };
+    const setLastMessageVisible = (isLastMessageVisible) => {
+        webchatDispatch({
+            type: WebchatAction.SET_LAST_MESSAGE_VISIBLE,
+            payload: isLastMessageVisible,
+        });
+    };
+    return {
+        addMessage,
+        addMessageComponent,
+        clearMessages,
+        doRenderCustomComponent,
+        resetUnreadMessages,
+        setCurrentAttachment,
+        setError,
+        setLastMessageVisible,
+        setOnline,
+        toggleCoverComponent,
+        toggleEmojiPicker,
+        togglePersistentMenu,
+        toggleWebchat,
+        updateDevSettings,
+        updateHandoff,
+        updateJwt,
+        updateLastMessageDate,
+        updateLastRoutePath,
+        updateLatestInput,
+        updateMessage,
+        updateReplies,
+        updateSession,
+        updateTheme,
+        updateTyping,
+        updateWebview,
+        webchatDispatch,
+        webchatState,
+    };
+}
+//# sourceMappingURL=use-webchat.js.map

package/lib/esm/webchat/hooks/use-webchat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-webchat.js","sourceRoot":"src/","sources":["webchat/hooks/use-webchat.ts"],"names":[],"mappings":"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"}

package/lib/esm/webchat/index-types.d.ts

@@ -0,0 +1,62 @@
+import type { Input as CoreInput, Session as CoreSession } from '@botonic/core';
+import { RefObject } from 'react';
+import { Webview } from '../components/index-types';
+export interface WebchatStateTheme {
+    headerTitle: string;
+    brandColor: string;
+    brandImage: string;
+    triggerButtonImage: undefined;
+    textPlaceholder: string;
+    style: {
+        fontFamily: string;
+    };
+}
+export interface ErrorMessage {
+    message?: string;
+}
+export interface DevSettings {
+    keepSessionOnReload?: boolean;
+    showSessionView?: boolean;
+}
+export interface WebchatState {
+    width: number;
+    height: number;
+    messagesJSON: any[];
+    messagesComponents: any[];
+    replies: any[];
+    latestInput: Partial<CoreInput>;
+    typing: boolean;
+    webview: Webview | null;
+    webviewParams: null;
+    session: Partial<CoreSession>;
+    lastRoutePath: string | null;
+    handoff: boolean;
+    theme: WebchatStateTheme;
+    themeUpdates: Partial<WebchatStateTheme>;
+    error: ErrorMessage;
+    online: boolean;
+    devSettings: DevSettings;
+    isWebchatOpen: boolean;
+    isEmojiPickerOpen: boolean;
+    isPersistentMenuOpen: boolean;
+    isCoverComponentOpen: boolean;
+    isCustomComponentRendered: boolean;
+    lastMessageUpdate?: string;
+    currentAttachment?: File;
+    jwt?: string;
+    numUnreadMessages: number;
+    isLastMessageVisible: boolean;
+}
+export interface WebchatProps {
+    ref: RefObject<any>;
+    onConnectionRegained?: () => Promise<void>;
+}
+export interface WebchatDevProps extends WebchatProps {
+    initialDevSettings?: {
+        keepSessionOnReload?: boolean;
+        showSessionView?: boolean;
+    };
+}
+export interface CoverComponentProps {
+    closeComponent: () => void;
+}

package/lib/esm/webchat/index-types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index-types.js.map

package/lib/esm/webchat/index-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-types.js","sourceRoot":"src/","sources":["webchat/index-types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,4 @@
+export { Webchat } from './webchat';
+export { WebchatDev } from './webchat-dev';
+export declare function getBotonicApp(): any;
+export * from './index-types';

package/lib/esm/webchat/index.js

@@ -0,0 +1,10 @@
+// @ts-nocheck
+export { Webchat } from './webchat';
+export { WebchatDev } from './webchat-dev';
+export function getBotonicApp() {
+    // Botonic is exported from your bot
+    // eslint-disable-next-line no-undef
+    return Botonic;
+}
+export * from './index-types';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"src/","sources":["webchat/index.ts"],"names":[],"mappings":"AAAA,cAAc;AACd,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,MAAM,UAAU,aAAa;IAC3B,oCAAoC;IACpC,oCAAoC;IACpC,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,cAAc,eAAe,CAAA"}

package/lib/esm/webchat/message-list/index.d.ts

@@ -0,0 +1 @@
+export declare const WebchatMessageList: (props: any) => JSX.Element;

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

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useEffect, useRef, useState } from 'react';
+import { ROLES, WEBCHAT } from '../../constants';
+import { WebchatContext } from '../../contexts';
+import { scrollToBottom } from '../../util';
+import { StyledScrollbar } from '../components/styled-scrollbar';
+import { TypingIndicator } from '../components/typing-indicator';
+import { IntroMessage } from './intro-message';
+import { ScrollButton } from './scroll-button';
+import { ContainerMessage } from './styles';
+import { UnreadMessagesBanner } from './unread-messages-banner';
+export const WebchatMessageList = props => {
+    const { webchatState, getThemeProperty, resetUnreadMessages, setLastMessageVisible, } = useContext(WebchatContext);
+    const scrollbarOptions = Object.assign({ enable: true, autoHide: true }, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollbar));
+    const [firstUnreadMessageId, setFirstUnreadMessageId] = useState();
+    const lastMessageRef = useRef(null);
+    const handleScrollToBottom = () => {
+        resetUnreadMessages();
+        scrollToBottom({ host: props.host });
+    };
+    const showUnreadMessagesBanner = (messageComponentId) => firstUnreadMessageId &&
+        messageComponentId === firstUnreadMessageId &&
+        webchatState.numUnreadMessages > 0;
+    const unreadMessagesBannerRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        const firstUnreadMessage = webchatState.messagesComponents.find(message => message.props.isUnread);
+        setFirstUnreadMessageId((_a = firstUnreadMessage === null || firstUnreadMessage === void 0 ? void 0 : firstUnreadMessage.props) === null || _a === void 0 ? void 0 : _a.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 (webchatState.isLastMessageVisible && webchatState.typing) {
+            scrollToBottom({ host: props.host });
+        }
+        if (webchatState.isLastMessageVisible) {
+            scrollToBottom({ host: props.host });
+        }
+    }, [webchatState.typing, webchatState.isLastMessageVisible]);
+    useEffect(() => {
+        if (firstUnreadMessageId) {
+            if (unreadMessagesBannerRef.current) {
+                unreadMessagesBannerRef.current.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center',
+                });
+                return;
+            }
+        }
+        else if (lastMessageRef.current) {
+            lastMessageRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'end',
+            });
+            return;
+        }
+    }, [firstUnreadMessageId]);
+    const showScrollButton = webchatState.numUnreadMessages > 0 && !webchatState.isLastMessageVisible;
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledScrollbar, Object.assign({ role: ROLES.MESSAGE_LIST, 
+                // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-scrollable`
+                id: 'botonic-scrollable-content', scrollbar: scrollbarOptions, autoHide: scrollbarOptions.autoHide, ismessagescontainer: true.toString(), style: Object.assign({}, props.style) }, { children: [_jsx(IntroMessage, {}), webchatState.messagesComponents.map((messageComponent, index) => {
+                        return (_jsxs(ContainerMessage, Object.assign({ role: ROLES.MESSAGE }, { children: [showUnreadMessagesBanner(messageComponent.props.id) && (_jsx(UnreadMessagesBanner, { unreadMessagesBannerRef: unreadMessagesBannerRef })), index === webchatState.messagesComponents.length - 1 && (_jsx("div", { ref: lastMessageRef, style: { content: '' } })), messageComponent] }), index));
+                    }), webchatState.typing && _jsx(TypingIndicator, {})] })), showScrollButton && _jsx(ScrollButton, { handleClick: handleScrollToBottom })] }));
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"src/","sources":["webchat/message-list/index.tsx"],"names":[],"mappings":"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"}

package/lib/esm/webchat/message-list/intro-message.d.ts

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import Fade from 'react-reveal/Fade';
+import { WEBCHAT } from '../../constants';
+import { WebchatContext } from '../../contexts';
+import { resolveImage } from '../../util/environment';
+import { ConditionalWrapper } from '../../util/react';
+import { DefaultIntroImage } from './styles';
+export const IntroMessage = () => {
+    const { getThemeProperty } = useContext(WebchatContext);
+    const animationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableAnimations, true);
+    const CustomIntro = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customIntro);
+    const introImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introImage);
+    const introStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introStyle);
+    const DefaultIntro = introImage && (_jsx(DefaultIntroImage, { style: Object.assign({}, introStyle), src: resolveImage(introImage) }));
+    return CustomIntro || DefaultIntro ? (_jsx(ConditionalWrapper, Object.assign({ condition: animationsEnabled, wrapper: children => _jsx(Fade, { children: children }) }, { children: CustomIntro ? _jsx(CustomIntro, {}) : DefaultIntro }))) : null;
+};
+//# sourceMappingURL=intro-message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"intro-message.js","sourceRoot":"src/","sources":["webchat/message-list/intro-message.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,IAAI,MAAM,mBAAmB,CAAA;AAEpC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAE5C,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAEvD,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,OAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,IAAI,CACL,CAAA;IACD,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAC3E,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAA;IACzE,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAA;IAEzE,MAAM,YAAY,GAAG,UAAU,IAAI,CACjC,KAAC,iBAAiB,IAChB,KAAK,oBACA,UAAU,GAEf,GAAG,EAAE,YAAY,CAAC,UAAU,CAAC,GAC7B,CACH,CAAA;IAED,OAAO,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CACnC,KAAC,kBAAkB,kBACjB,SAAS,EAAE,iBAAiB,EAC5B,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC,KAAC,IAAI,cAAE,QAAQ,GAAQ,gBAE3C,WAAW,CAAC,CAAC,CAAC,KAAC,WAAW,KAAG,CAAC,CAAC,CAAC,YAAY,IAC1B,CACtB,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

package/lib/esm/webchat/message-list/scroll-button.d.ts

@@ -0,0 +1,5 @@
+interface ScrollButtonProps {
+    handleClick: () => void;
+}
+export declare const ScrollButton: ({ handleClick, }: ScrollButtonProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from 'react';
+import ArrowScrollDown from '../../assets/arrow-scroll-down.svg';
+import { WEBCHAT } from '../../constants';
+import { WebchatContext } from '../../contexts';
+import { resolveImage } from '../../util/environment';
+import { ContainerScrollButton } from './styles';
+import { useDebounce } from './use-debounce';
+export const ScrollButton = ({ handleClick, }) => {
+    const { getThemeProperty } = useContext(WebchatContext);
+    const show = useDebounce();
+    const CustomScrollButton = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollButtonCustom, undefined);
+    const scrollButtonEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollButtonEnabled, CustomScrollButton);
+    return (scrollButtonEnabled &&
+        show && (_jsx(_Fragment, { children: CustomScrollButton ? (_jsx(CustomScrollButton, { handleScrollToBottom: handleClick })) : (_jsx(ContainerScrollButton, Object.assign({ onClick: handleClick }, { children: _jsx("img", { src: resolveImage(ArrowScrollDown) }) }))) })));
+};
+//# sourceMappingURL=scroll-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-button.js","sourceRoot":"src/","sources":["webchat/message-list/scroll-button.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,eAAe,MAAM,oCAAoC,CAAA;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAM5C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,WAAW,GACO,EAAe,EAAE;IACnC,MAAM,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAEvD,MAAM,IAAI,GAAG,WAAW,EAAE,CAAA;IAE1B,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,OAAO,CAAC,iBAAiB,CAAC,kBAAkB,EAC5C,SAAS,CACV,CAAA;IAED,MAAM,mBAAmB,GAAG,gBAAgB,CAC1C,OAAO,CAAC,iBAAiB,CAAC,mBAAmB,EAC7C,kBAAkB,CACnB,CAAA;IAED,OAAO,CACL,mBAAmB;QACnB,IAAI,IAAI,CACN,4BACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,KAAC,kBAAkB,IAAC,oBAAoB,EAAE,WAAW,GAAI,CAC1D,CAAC,CAAC,CAAC,CACF,KAAC,qBAAqB,kBAAC,OAAO,EAAE,WAAW,gBACzC,cAAK,GAAG,EAAE,YAAY,CAAC,eAAe,CAAC,GAAI,IACrB,CACzB,GACA,CACJ,CACF,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/webchat/message-list/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const ContainerMessage: any;
+export declare const DefaultIntroImage: any;
+export declare const ContainerScrollButton: any;
+export declare const ContainerUnreadMessagesBanner: any;

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

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+export const ContainerMessage = styled.div `
+  display: flex;
+  overflow-x: hidden;
+  flex-direction: column;
+  flex: none;
+  white-space: pre;
+  word-wrap: break-word;
+`;
+export const DefaultIntroImage = styled.img `
+  max-height: 50%;
+  width: 100%;
+`;
+export const ContainerScrollButton = styled.div `
+  position: absolute;
+  right: 10px;
+  bottom: 65px;
+
+  background-color: #6d6a78;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 37px;
+  height: 37px;
+  border-radius: 50%;
+`;
+export const ContainerUnreadMessagesBanner = styled.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;
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"src/","sources":["webchat/message-list/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOzC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG1C,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;CAc9C,CAAA;AAED,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBtD,CAAA"}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface UnreadMessagesBannerProps {
+    unreadMessagesBannerRef: React.RefObject<HTMLDivElement>;
+}
+export declare const UnreadMessagesBanner: ({ unreadMessagesBannerRef, }: UnreadMessagesBannerProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect } from 'react';
+import ArrowDown from '../../assets/arrow-down.svg';
+import { WEBCHAT } from '../../constants';
+import { WebchatContext } from '../../contexts';
+import { resolveImage } from '../../util/environment';
+import { ContainerUnreadMessagesBanner } from './styles';
+export const UnreadMessagesBanner = ({ unreadMessagesBannerRef, }) => {
+    const { getThemeProperty, webchatState } = useContext(WebchatContext);
+    const CustomUnreadMessagesBanner = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerCustom, undefined);
+    const notificationsBannerEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerEnabled, undefined);
+    const notificationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled, CustomUnreadMessagesBanner || notificationsBannerEnabled);
+    const text = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerText, 'unread messages');
+    useEffect(() => {
+        if (webchatState.isWebchatOpen && unreadMessagesBannerRef.current) {
+            unreadMessagesBannerRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            });
+        }
+    }, [webchatState.isWebchatOpen, unreadMessagesBannerRef]);
+    return (notificationsEnabled && (_jsx("div", Object.assign({ ref: unreadMessagesBannerRef }, { children: CustomUnreadMessagesBanner ? (_jsx(CustomUnreadMessagesBanner, {})) : (_jsxs(ContainerUnreadMessagesBanner, { children: [_jsx("img", { src: resolveImage(ArrowDown) }), webchatState.numUnreadMessages, " ", text] })) }))));
+};
+//# sourceMappingURL=unread-messages-banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"unread-messages-banner.js","sourceRoot":"src/","sources":["webchat/message-list/unread-messages-banner.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,SAAS,MAAM,6BAA6B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAA;AAMxD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,uBAAuB,GACG,EAAe,EAAE;IAC3C,MAAM,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAErE,MAAM,0BAA0B,GAAG,gBAAgB,CACjD,OAAO,CAAC,iBAAiB,CAAC,yBAAyB,EACnD,SAAS,CACV,CAAA;IAED,MAAM,0BAA0B,GAAG,gBAAgB,CACjD,OAAO,CAAC,iBAAiB,CAAC,0BAA0B,EACpD,SAAS,CACV,CAAA;IAED,MAAM,oBAAoB,GAAG,gBAAgB,CAC3C,OAAO,CAAC,iBAAiB,CAAC,oBAAoB,EAC9C,0BAA0B,IAAI,0BAA0B,CACzD,CAAA;IAED,MAAM,IAAI,GAAG,gBAAgB,CAC3B,OAAO,CAAC,iBAAiB,CAAC,uBAAuB,EACjD,iBAAiB,CAClB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,aAAa,IAAI,uBAAuB,CAAC,OAAO,EAAE;YACjE,uBAAuB,CAAC,OAAO,CAAC,cAAc,CAAC;gBAC7C,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,QAAQ;aAChB,CAAC,CAAA;SACH;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,uBAAuB,CAAC,CAAC,CAAA;IAEzD,OAAO,CACL,oBAAoB,IAAI,CACtB,4BAAK,GAAG,EAAE,uBAAuB,gBAC9B,0BAA0B,CAAC,CAAC,CAAC,CAC5B,KAAC,0BAA0B,KAAG,CAC/B,CAAC,CAAC,CAAC,CACF,MAAC,6BAA6B,eAC5B,cAAK,GAAG,EAAE,YAAY,CAAC,SAAS,CAAC,GAAI,EACpC,YAAY,CAAC,iBAAiB,OAAG,IAAI,IACR,CACjC,IACG,CACP,CACF,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/webchat/message-list/use-debounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce(delay?: number): boolean;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounce.js","sourceRoot":"src/","sources":["webchat/message-list/use-debounce.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,UAAU,WAAW,CAAC,KAAc;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,OAAO,CAAC,IAAI,CAAC,CAAA;QACf,CAAC,EAAE,KAAK,IAAI,GAAG,CAAC,CAAA;QAEhB,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,SAAS,CAAC,CAAA;QACzB,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,IAAI,CAAA;AACb,CAAC"}

package/lib/esm/webchat/messages-reducer.d.ts

@@ -0,0 +1,6 @@
+import { WebchatAction } from './actions';
+import { WebchatState } from './index-types';
+export declare const messagesReducer: (state: WebchatState, action: {
+    type: WebchatAction;
+    payload?: any;
+}) => WebchatState;

package/lib/esm/webchat/messages-reducer.js

@@ -0,0 +1,82 @@
+import { WebchatAction } from './actions';
+export const messagesReducer = (state, action) => {
+    switch (action.type) {
+        case WebchatAction.ADD_MESSAGE:
+            return addMessageReducer(state, action);
+        case WebchatAction.ADD_MESSAGE_COMPONENT:
+            return addMessageComponent(state, action);
+        case WebchatAction.UPDATE_MESSAGE:
+            return updateMessageReducer(state, action);
+        case WebchatAction.UPDATE_REPLIES:
+            return Object.assign(Object.assign({}, state), { replies: action.payload });
+        case WebchatAction.CLEAR_MESSAGES:
+            return Object.assign(Object.assign({}, state), { messagesJSON: [], messagesComponents: [], numUnreadMessages: 0 });
+        case WebchatAction.UPDATE_LAST_MESSAGE_DATE:
+            return Object.assign(Object.assign({}, state), { lastMessageUpdate: action.payload });
+        case WebchatAction.RESET_UNREAD_MESSAGES:
+            return resetUnreadMessages(state);
+        case WebchatAction.SET_LAST_MESSAGE_VISIBLE:
+            return Object.assign(Object.assign({}, state), { isLastMessageVisible: action.payload });
+        default:
+            throw new Error();
+    }
+};
+function addMessageComponent(state, action) {
+    var _a, _b;
+    const messageComponent = action.payload;
+    const isUnreadMessage = ((_a = messageComponent.props) === null || _a === void 0 ? void 0 : _a.isUnread) &&
+        ((_b = messageComponent.props) === null || _b === void 0 ? void 0 : _b.sent_by) !== 'user';
+    const numUnreadMessages = isUnreadMessage
+        ? state.numUnreadMessages + 1
+        : state.numUnreadMessages;
+    return Object.assign(Object.assign({}, state), { messagesComponents: [...(state.messagesComponents || []), messageComponent], numUnreadMessages });
+}
+function resetUnreadMessages(state) {
+    const messagesComponents = state.messagesComponents.map(messageComponent => {
+        if (messageComponent.props.isUnread) {
+            messageComponent.props.isUnread = false;
+        }
+        return messageComponent;
+    });
+    const messagesJSON = state.messagesJSON.map(messageJSON => {
+        if (messageJSON.isUnread) {
+            messageJSON.isUnread = false;
+        }
+        return messageJSON;
+    });
+    return Object.assign(Object.assign({}, state), { messagesComponents,
+        messagesJSON, numUnreadMessages: 0 });
+}
+function updateMessageReducer(state, action) {
+    const msgIndex = state.messagesJSON.map(m => m.id).indexOf(action.payload.id);
+    if (msgIndex > -1) {
+        const msgComponent = state.messagesComponents[msgIndex];
+        let updatedMessageComponents = {};
+        if (msgComponent) {
+            const updatedMsgComponent = Object.assign(Object.assign({}, msgComponent), {
+                props: Object.assign(Object.assign({}, msgComponent.props), { ack: action.payload.ack }),
+            });
+            updatedMessageComponents = {
+                messagesComponents: [
+                    ...state.messagesComponents.slice(0, msgIndex),
+                    Object.assign({}, updatedMsgComponent),
+                    ...state.messagesComponents.slice(msgIndex + 1),
+                ],
+            };
+        }
+        const numUnreadMessages = state.messagesComponents.filter(messageComponent => messageComponent.props.isUnread).length;
+        return Object.assign(Object.assign(Object.assign(Object.assign({}, state), { messagesJSON: [
+                ...state.messagesJSON.slice(0, msgIndex),
+                Object.assign({}, action.payload),
+                ...state.messagesJSON.slice(msgIndex + 1),
+            ] }), updatedMessageComponents), { numUnreadMessages });
+    }
+    return state;
+}
+function addMessageReducer(state, action) {
+    if (state.messagesJSON &&
+        state.messagesJSON.find(m => m.id === action.payload.id))
+        return state;
+    return Object.assign(Object.assign({}, state), { messagesJSON: [...(state.messagesJSON || []), action.payload] });
+}
+//# sourceMappingURL=messages-reducer.js.map

package/lib/esm/webchat/messages-reducer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages-reducer.js","sourceRoot":"src/","sources":["webchat/messages-reducer.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+export function WebchatReplies(props: any): JSX.Element;