@botonic/react 0.31.1-alpha.0 → 0.31.1

package/lib/esm/webchat/hooks/use-webchat-dimensions.d.ts

@@ -0,0 +1,4 @@
+export declare const useWebchatDimensions: () => {
+    calculateResizedPercentualWebchatHeight: () => number;
+    calculateResizedPxChatAreaHeight: () => number;
+};

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

@@ -0,0 +1,36 @@
+import { useCallback, useContext } from 'react';
+import { WebchatContext } from '../../webchat/context';
+export const useWebchatDimensions = () => {
+    const { webchatContainerRef, headerRef, inputPanelRef, webchatState: { isWebchatOpen }, } = useContext(WebchatContext);
+    const calculateResizedPercentualWebchatHeight = useCallback(() => {
+        const webchatElement = webchatContainerRef.current;
+        if (!isWebchatOpen || !webchatElement)
+            return 0;
+        const webchatHeight = webchatElement.clientHeight || 0;
+        const keyboardOffset = (window.visualViewport && window.visualViewport.height) ||
+            window.innerHeight;
+        let newWebchatPercentualHeight = keyboardOffset / webchatHeight;
+        newWebchatPercentualHeight =
+            Math.round(newWebchatPercentualHeight * 100 * 100) / 100; // Two decimal places
+        return newWebchatPercentualHeight;
+    }, [isWebchatOpen]);
+    const calculateResizedPxChatAreaHeight = useCallback(() => {
+        const webchatElement = webchatContainerRef.current;
+        const headerElement = headerRef.current;
+        const inputPanelElement = inputPanelRef.current;
+        if (!isWebchatOpen || !webchatElement)
+            return 0;
+        const headerElementHeight = headerElement ? headerElement.clientHeight : 0;
+        const inputPanelElementHeight = inputPanelElement
+            ? inputPanelElement.clientHeight
+            : 0;
+        return (webchatElement.clientHeight -
+            headerElementHeight -
+            inputPanelElementHeight);
+    }, [isWebchatOpen]);
+    return {
+        calculateResizedPercentualWebchatHeight,
+        calculateResizedPxChatAreaHeight,
+    };
+};
+//# sourceMappingURL=use-webchat-dimensions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-webchat-dimensions.js","sourceRoot":"","sources":["../../../../src/webchat/hooks/use-webchat-dimensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEtD,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,EACJ,mBAAmB,EACnB,SAAS,EACT,aAAa,EACb,YAAY,EAAE,EAAE,aAAa,EAAE,GAChC,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAE9B,MAAM,uCAAuC,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/D,MAAM,cAAc,GAAG,mBAAmB,CAAC,OAAO,CAAA;QAClD,IAAI,CAAC,aAAa,IAAI,CAAC,cAAc;YAAE,OAAO,CAAC,CAAA;QAC/C,MAAM,aAAa,GAAG,cAAc,CAAC,YAAY,IAAI,CAAC,CAAA;QACtD,MAAM,cAAc,GAClB,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC;YACvD,MAAM,CAAC,WAAW,CAAA;QACpB,IAAI,0BAA0B,GAAG,cAAc,GAAG,aAAa,CAAA;QAC/D,0BAA0B;YACxB,IAAI,CAAC,KAAK,CAAC,0BAA0B,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA,CAAC,qBAAqB;QAChF,OAAO,0BAA0B,CAAA;IACnC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,MAAM,gCAAgC,GAAG,WAAW,CAAC,GAAG,EAAE;QACxD,MAAM,cAAc,GAAG,mBAAmB,CAAC,OAAO,CAAA;QAClD,MAAM,aAAa,GAAG,SAAS,CAAC,OAAO,CAAA;QACvC,MAAM,iBAAiB,GAAG,aAAa,CAAC,OAAO,CAAA;QAE/C,IAAI,CAAC,aAAa,IAAI,CAAC,cAAc;YAAE,OAAO,CAAC,CAAA;QAE/C,MAAM,mBAAmB,GAAG,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAA;QAC1E,MAAM,uBAAuB,GAAG,iBAAiB;YAC/C,CAAC,CAAC,iBAAiB,CAAC,YAAY;YAChC,CAAC,CAAC,CAAC,CAAA;QAEL,OAAO,CACL,cAAc,CAAC,YAAY;YAC3B,mBAAmB;YACnB,uBAAuB,CACxB,CAAA;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,OAAO;QACL,uCAAuC;QACvC,gCAAgC;KACjC,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/webchat/hooks/use-webchat-resizer.d.ts

@@ -0,0 +1,4 @@
+export declare const useWebchatResizer: () => {
+    handleKeyboardShown: () => void;
+    handleKeyboardHidden: () => void;
+};

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

@@ -0,0 +1,30 @@
+import { useContext } from 'react';
+import { WebchatContext } from '../../webchat/context';
+import { useWebchatDimensions } from './use-webchat-dimensions';
+export const useWebchatResizer = () => {
+    const { webchatContainerRef, chatAreaRef, inputPanelRef, headerRef } = useContext(WebchatContext);
+    const { calculateResizedPercentualWebchatHeight, calculateResizedPxChatAreaHeight, } = useWebchatDimensions();
+    const handleKeyboardShown = () => {
+        if (webchatContainerRef.current &&
+            chatAreaRef.current &&
+            headerRef.current &&
+            inputPanelRef.current) {
+            webchatContainerRef.current.style.height = `${calculateResizedPercentualWebchatHeight()}%`;
+            chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`;
+        }
+    };
+    const handleKeyboardHidden = () => {
+        if (webchatContainerRef.current &&
+            chatAreaRef.current &&
+            inputPanelRef.current &&
+            headerRef.current) {
+            webchatContainerRef.current.style.height = '100%';
+            chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`;
+        }
+    };
+    return {
+        handleKeyboardShown,
+        handleKeyboardHidden,
+    };
+};
+//# sourceMappingURL=use-webchat-resizer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-webchat-resizer.js","sourceRoot":"","sources":["../../../../src/webchat/hooks/use-webchat-resizer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAA;AAE/D,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,GAClE,UAAU,CAAC,cAAc,CAAC,CAAA;IAE5B,MAAM,EACJ,uCAAuC,EACvC,gCAAgC,GACjC,GAAG,oBAAoB,EAAE,CAAA;IAE1B,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IACE,mBAAmB,CAAC,OAAO;YAC3B,WAAW,CAAC,OAAO;YACnB,SAAS,CAAC,OAAO;YACjB,aAAa,CAAC,OAAO,EACrB;YACA,mBAAmB,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,uCAAuC,EAAE,GAAG,CAAA;YAC1F,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,gCAAgC,EAAE,IAAI,CAAA;SAC7E;IACH,CAAC,CAAA;IAED,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IACE,mBAAmB,CAAC,OAAO;YAC3B,WAAW,CAAC,OAAO;YACnB,aAAa,CAAC,OAAO;YACrB,SAAS,CAAC,OAAO,EACjB;YACA,mBAAmB,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;YACjD,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,gCAAgC,EAAE,IAAI,CAAA;SAC7E;IACH,CAAC,CAAA;IAED,OAAO;QACL,mBAAmB;QACnB,oBAAoB;KACrB,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,18 @@
+import { WebchatArgs } from '../index-types';
+export interface WebchatStateTheme {
+    headerTitle: string;
+    brandColor: string;
+    brandImage: string;
+    triggerButtonImage: undefined;
+    textPlaceholder: string;
+    style: {
+        fontFamily: string;
+        borderRadius?: string;
+    };
+}
+export interface WebchatDevProps extends WebchatArgs {
+    initialDevSettings?: {
+        keepSessionOnReload?: boolean;
+        showSessionView?: boolean;
+    };
+}

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":"","sources":["../../../src/webchat/index-types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,5 @@
+export { WebchatContext } from './context';
+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,11 @@
+// @ts-nocheck
+export { WebchatContext } from './context';
+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":"","sources":["../../../src/webchat/index.ts"],"names":[],"mappings":"AAAA,cAAc;AACd,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAC1C,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/input-panel/attachment.d.ts

@@ -0,0 +1,7 @@
+interface AttachmentProps {
+    accept: string;
+    enableAttachments?: boolean;
+    onChange: (event: any) => void;
+}
+export declare const Attachment: ({ accept, enableAttachments, onChange, }: AttachmentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/esm/webchat/input-panel/attachment.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useRef } from 'react';
+import AttachmentIcon from '../../assets/attachment-icon.svg';
+import { ROLES, WEBCHAT } from '../../constants';
+import { WebchatContext } from '../../webchat/context';
+import { Icon } from '../components/common';
+import { ConditionalAnimation } from '../components/conditional-animation';
+export const Attachment = ({ accept, enableAttachments, onChange, }) => {
+    const { getThemeProperty } = useContext(WebchatContext);
+    const fileInputRef = useRef(null);
+    const CustomAttachments = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customAttachments, undefined);
+    const isAttachmentsEnabled = () => {
+        var _a;
+        const hasCustomAttachments = !!CustomAttachments;
+        return ((_a = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableAttachments, enableAttachments)) !== null && _a !== void 0 ? _a : hasCustomAttachments);
+    };
+    const attachmentsEnabled = isAttachmentsEnabled();
+    const handleOnChange = event => {
+        onChange(event);
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+    return (_jsx(_Fragment, { children: attachmentsEnabled ? (_jsx(ConditionalAnimation, { children: _jsxs("div", Object.assign({ role: ROLES.ATTACHMENT_ICON }, { children: [_jsx("label", Object.assign({ htmlFor: 'attachment', style: { marginTop: 4 } }, { children: CustomAttachments ? (_jsx(CustomAttachments, {})) : (_jsx(Icon, { src: AttachmentIcon })) })), _jsx("input", { ref: fileInputRef, type: 'file', name: 'file', id: 'attachment', style: { display: 'none' }, onChange: handleOnChange, accept: accept })] })) })) : null }));
+};
+//# sourceMappingURL=attachment.js.map

package/lib/esm/webchat/input-panel/attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment.js","sourceRoot":"","sources":["../../../../src/webchat/input-panel/attachment.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,cAAc,MAAM,kCAAkC,CAAA;AAC7D,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAQ1E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,iBAAiB,EACjB,QAAQ,GACQ,EAAE,EAAE;IACpB,MAAM,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAEvD,MAAM,YAAY,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAA;IAE1D,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,OAAO,CAAC,iBAAiB,CAAC,iBAAiB,EAC3C,SAAS,CACV,CAAA;IAED,MAAM,oBAAoB,GAAG,GAAG,EAAE;;QAChC,MAAM,oBAAoB,GAAG,CAAC,CAAC,iBAAiB,CAAA;QAChD,OAAO,CACL,MAAA,gBAAgB,CACd,OAAO,CAAC,iBAAiB,CAAC,iBAAiB,EAC3C,iBAAiB,CAClB,mCAAI,oBAAoB,CAC1B,CAAA;IACH,CAAC,CAAA;IACD,MAAM,kBAAkB,GAAG,oBAAoB,EAAE,CAAA;IAEjD,MAAM,cAAc,GAAG,KAAK,CAAC,EAAE;QAC7B,QAAQ,CAAC,KAAK,CAAC,CAAA;QACf,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;SAChC;IACH,CAAC,CAAA;IAED,OAAO,CACL,4BACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,KAAC,oBAAoB,cACnB,6BAAK,IAAI,EAAE,KAAK,CAAC,eAAe,iBAC9B,8BAAO,OAAO,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,gBAChD,iBAAiB,CAAC,CAAC,CAAC,CACnB,KAAC,iBAAiB,KAAG,CACtB,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,cAAc,GAAI,CAC9B,IACK,EACR,gBACE,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,YAAY,EACf,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,QAAQ,EAAE,cAAc,EACxB,MAAM,EAAE,MAAM,GACd,KACE,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/webchat/input-panel/emoji-picker.d.ts

@@ -0,0 +1,6 @@
+interface EmojiPickerProps {
+    enableEmojiPicker?: boolean;
+    onClick: () => void;
+}
+export declare const EmojiPicker: ({ enableEmojiPicker, onClick, }: EmojiPickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/esm/webchat/input-panel/emoji-picker.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from 'react';
+import LogoEmoji from '../../assets/emojiButton.svg';
+import { ROLES, WEBCHAT } from '../../constants';
+import { WebchatContext } from '../../webchat/context';
+import { Icon } from '../components/common';
+import { ConditionalAnimation } from '../components/conditional-animation';
+export const EmojiPicker = ({ enableEmojiPicker, onClick, }) => {
+    const { getThemeProperty } = useContext(WebchatContext);
+    const CustomEmojiPicker = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customEmojiPicker, undefined);
+    const isEmojiPickerEnabled = () => {
+        var _a;
+        const hasCustomEmojiPicker = !!CustomEmojiPicker;
+        return ((_a = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableEmojiPicker, enableEmojiPicker)) !== null && _a !== void 0 ? _a : hasCustomEmojiPicker);
+    };
+    const emojiPickerEnabled = isEmojiPickerEnabled();
+    const handleClick = (event) => {
+        onClick();
+        event.stopPropagation();
+    };
+    return (_jsx(_Fragment, { children: emojiPickerEnabled ? (_jsx(ConditionalAnimation, { children: _jsx("div", Object.assign({ role: ROLES.EMOJI_PICKER_ICON, onClick: handleClick }, { children: CustomEmojiPicker ? (_jsx(CustomEmojiPicker, {})) : (_jsx(Icon, { src: LogoEmoji })) })) })) : null }));
+};
+//# sourceMappingURL=emoji-picker.js.map

package/lib/esm/webchat/input-panel/emoji-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-picker.js","sourceRoot":"","sources":["../../../../src/webchat/input-panel/emoji-picker.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,SAAS,MAAM,8BAA8B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAO1E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,iBAAiB,EACjB,OAAO,GACU,EAAE,EAAE;IACrB,MAAM,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAEvD,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,OAAO,CAAC,iBAAiB,CAAC,iBAAiB,EAC3C,SAAS,CACV,CAAA;IAED,MAAM,oBAAoB,GAAG,GAAG,EAAE;;QAChC,MAAM,oBAAoB,GAAG,CAAC,CAAC,iBAAiB,CAAA;QAChD,OAAO,CACL,MAAA,gBAAgB,CACd,OAAO,CAAC,iBAAiB,CAAC,iBAAiB,EAC3C,iBAAiB,CAClB,mCAAI,oBAAoB,CAC1B,CAAA;IACH,CAAC,CAAA;IACD,MAAM,kBAAkB,GAAG,oBAAoB,EAAE,CAAA;IAEjD,MAAM,WAAW,GAAG,CAAC,KAAU,EAAE,EAAE;QACjC,OAAO,EAAE,CAAA;QACT,KAAK,CAAC,eAAe,EAAE,CAAA;IACzB,CAAC,CAAA;IAED,OAAO,CACL,4BACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,KAAC,oBAAoB,cACnB,4BAAK,IAAI,EAAE,KAAK,CAAC,iBAAiB,EAAE,OAAO,EAAE,WAAW,gBACrD,iBAAiB,CAAC,CAAC,CAAC,CACnB,KAAC,iBAAiB,KAAG,CACtB,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,SAAS,GAAI,CACzB,IACG,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/webchat/input-panel/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface InputPanelProps {
+    persistentMenu: any;
+    enableEmojiPicker?: boolean;
+    enableAttachments?: boolean;
+    handleAttachment: (event: any) => void;
+    textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>;
+    host: HTMLElement;
+    onUserInput?: (event: any) => Promise<void>;
+}
+export declare const InputPanel: ({ persistentMenu, enableEmojiPicker, enableAttachments, handleAttachment, textareaRef, host, onUserInput, }: InputPanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/esm/webchat/input-panel/index.js

@@ -0,0 +1,55 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { INPUT } from '@botonic/core';
+import { useContext } from 'react';
+import { v7 as uuidv7 } from 'uuid';
+import { WEBCHAT } from '../../constants';
+import { getFullMimeWhitelist } from '../../message-utils';
+import { WebchatContext } from '../../webchat/context';
+import { BotonicContainerId } from '../constants';
+import { Attachment } from './attachment';
+import { EmojiPicker } from './emoji-picker';
+import { OpenedEmojiPicker } from './opened-emoji-picker';
+import { PersistentMenu } from './persistent-menu';
+import { SendButton } from './send-button';
+import { UserInputContainer } from './styles';
+import { Textarea } from './textarea';
+export const InputPanel = ({ persistentMenu, enableEmojiPicker, enableAttachments, handleAttachment, textareaRef, host, onUserInput, }) => {
+    const { getThemeProperty, sendText, togglePersistentMenu, toggleEmojiPicker, webchatState, inputPanelRef, } = useContext(WebchatContext);
+    const handleSelectedEmoji = event => {
+        if (!textareaRef.current)
+            return;
+        textareaRef.current.value += event.emoji;
+        textareaRef.current.focus();
+    };
+    const handleEmojiClick = () => {
+        toggleEmojiPicker(!webchatState.isEmojiPickerOpen);
+    };
+    const handleMenu = () => {
+        togglePersistentMenu(!webchatState.isPersistentMenuOpen);
+    };
+    const sendTextAreaText = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (!textareaRef.current)
+            return;
+        yield sendText((_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.value);
+        textareaRef.current.value = '';
+    });
+    const sendChatEvent = (chatEvent) => __awaiter(void 0, void 0, void 0, function* () {
+        const chatEventInput = {
+            id: uuidv7(),
+            type: INPUT.CHAT_EVENT,
+            data: chatEvent,
+        };
+        if (onUserInput) {
+            onUserInput({
+                user: webchatState.session.user,
+                input: chatEventInput,
+                session: webchatState.session,
+                lastRoutePath: webchatState.lastRoutePath,
+            });
+        }
+    });
+    return (_jsxs(UserInputContainer, Object.assign({ id: BotonicContainerId.InputPanel, ref: inputPanelRef, style: Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputStyle)), className: 'user-input-container' }, { children: [webchatState.isEmojiPickerOpen && (_jsx(OpenedEmojiPicker, { onEmojiClick: handleSelectedEmoji, onClick: handleEmojiClick })), _jsx(PersistentMenu, { onClick: handleMenu, persistentMenu: persistentMenu }), _jsx(Textarea, { host: host, persistentMenu: persistentMenu, textareaRef: textareaRef, sendChatEvent: sendChatEvent, sendTextAreaText: sendTextAreaText }), _jsx(EmojiPicker, { enableEmojiPicker: enableEmojiPicker, onClick: handleEmojiClick }), _jsx(Attachment, { enableAttachments: enableAttachments, onChange: handleAttachment, accept: getFullMimeWhitelist().join(',') }), _jsx(SendButton, { onClick: sendTextAreaText })] })));
+};
+//# sourceMappingURL=index.js.map

package/lib/esm/webchat/input-panel/index.js.map

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

package/lib/esm/webchat/input-panel/opened-emoji-picker.d.ts

@@ -0,0 +1,6 @@
+interface OpenedEmojiPickerProps {
+    onClick: () => void;
+    onEmojiClick: (event: any) => void;
+}
+export declare const OpenedEmojiPicker: ({ onClick, onEmojiClick, }: OpenedEmojiPickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/esm/webchat/input-panel/opened-emoji-picker.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Picker from 'emoji-picker-react';
+import { ROLES } from '../../constants';
+import { useComponentVisible } from '../hooks';
+import { OpenedEmojiPickerContainer } from './styles';
+export const OpenedEmojiPicker = ({ onClick, onEmojiClick, }) => {
+    const { ref, isComponentVisible } = useComponentVisible(true, onClick);
+    return (_jsx("div", Object.assign({ ref: ref }, { children: isComponentVisible && (_jsx(OpenedEmojiPickerContainer, Object.assign({ role: ROLES.EMOJI_PICKER }, { children: _jsx(Picker, { width: '100%', height: '19rem', previewConfig: { showPreview: false }, lazyLoadEmojis: true, onEmojiClick: onEmojiClick, autoFocusSearch: false }) }))) })));
+};
+//# sourceMappingURL=opened-emoji-picker.js.map

package/lib/esm/webchat/input-panel/opened-emoji-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"opened-emoji-picker.js","sourceRoot":"","sources":["../../../../src/webchat/input-panel/opened-emoji-picker.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAGvC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAA;AAOrD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,OAAO,EACP,YAAY,GACW,EAAE,EAAE;IAC3B,MAAM,EAAE,GAAG,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;IACtE,OAAO,CACL,4BAAK,GAAG,EAAE,GAAgC,gBACvC,kBAAkB,IAAI,CACrB,KAAC,0BAA0B,kBAAC,IAAI,EAAE,KAAK,CAAC,YAAY,gBAClD,KAAC,MAAM,IACL,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,OAAO,EACd,aAAa,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EACrC,cAAc,EAAE,IAAI,EACpB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,KAAK,GACtB,IACyB,CAC9B,IACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/webchat/input-panel/persistent-menu.d.ts

@@ -0,0 +1,6 @@
+interface PersistentMenuProps {
+    persistentMenu: any;
+    onClick: () => void;
+}
+export declare const PersistentMenu: ({ onClick, persistentMenu, }: PersistentMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/esm/webchat/input-panel/persistent-menu.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from 'react';
+import LogoMenu from '../../assets/menuButton.svg';
+import { ROLES, WEBCHAT } from '../../constants';
+import { WebchatContext } from '../../webchat/context';
+import { Icon } from '../components/common';
+import { ConditionalAnimation } from '../components/conditional-animation';
+export const PersistentMenu = ({ onClick, persistentMenu, }) => {
+    const { getThemeProperty } = useContext(WebchatContext);
+    const persistentMenuOptions = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, persistentMenu);
+    const CustomMenuButton = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customMenuButton, undefined);
+    return (_jsx(_Fragment, { children: persistentMenuOptions ? (_jsx(ConditionalAnimation, { children: _jsx("div", Object.assign({ role: ROLES.PERSISTENT_MENU_ICON, onClick: onClick }, { children: CustomMenuButton ? _jsx(CustomMenuButton, {}) : _jsx(Icon, { src: LogoMenu }) })) })) : null }));
+};
+//# sourceMappingURL=persistent-menu.js.map

package/lib/esm/webchat/input-panel/persistent-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"persistent-menu.js","sourceRoot":"","sources":["../../../../src/webchat/input-panel/persistent-menu.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,QAAQ,MAAM,6BAA6B,CAAA;AAClD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAO1E,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,cAAc,GACM,EAAE,EAAE;IACxB,MAAM,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAEvD,MAAM,qBAAqB,GAAG,gBAAgB,CAC5C,OAAO,CAAC,iBAAiB,CAAC,cAAc,EACxC,cAAc,CACf,CAAA;IAED,MAAM,gBAAgB,GAAG,gBAAgB,CACvC,OAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,SAAS,CACV,CAAA;IAED,OAAO,CACL,4BACG,qBAAqB,CAAC,CAAC,CAAC,CACvB,KAAC,oBAAoB,cACnB,4BAAK,IAAI,EAAE,KAAK,CAAC,oBAAoB,EAAE,OAAO,EAAE,OAAO,gBACpD,gBAAgB,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,GAAG,EAAE,QAAQ,GAAI,IAC9D,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/webchat/input-panel/send-button.d.ts

@@ -0,0 +1,5 @@
+interface SendButtonProps {
+    onClick: () => Promise<void>;
+}
+export declare const SendButton: ({ onClick }: SendButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/esm/webchat/input-panel/send-button.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from 'react';
+import SendButtonIcon from '../../assets/send-button.svg';
+import { ROLES, WEBCHAT } from '../../constants';
+import { WebchatContext } from '../../webchat/context';
+import { Icon } from '../components/common';
+import { ConditionalAnimation } from '../components/conditional-animation';
+export const SendButton = ({ onClick }) => {
+    const { getThemeProperty } = useContext(WebchatContext);
+    const sendButtonEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableSendButton, true);
+    const CustomSendButton = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customSendButton, undefined);
+    return (_jsx(_Fragment, { children: sendButtonEnabled || CustomSendButton ? (_jsx(ConditionalAnimation, { children: _jsx("div", Object.assign({ onClick: onClick, role: ROLES.SEND_BUTTON_ICON }, { children: CustomSendButton ? (_jsx(CustomSendButton, {})) : (_jsx(Icon, { src: SendButtonIcon })) })) })) : null }));
+};
+//# sourceMappingURL=send-button.js.map

package/lib/esm/webchat/input-panel/send-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"send-button.js","sourceRoot":"","sources":["../../../../src/webchat/input-panel/send-button.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,cAAc,MAAM,8BAA8B,CAAA;AACzD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAM1E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAmB,EAAE,EAAE;IACzD,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;IAED,MAAM,gBAAgB,GAAG,gBAAgB,CACvC,OAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,SAAS,CACV,CAAA;IAED,OAAO,CACL,4BACG,iBAAiB,IAAI,gBAAgB,CAAC,CAAC,CAAC,CACvC,KAAC,oBAAoB,cACnB,4BAAK,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,gBAAgB,gBAChD,gBAAgB,CAAC,CAAC,CAAC,CAClB,KAAC,gBAAgB,KAAG,CACrB,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,cAAc,GAAI,CAC9B,IACG,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/webchat/input-panel/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const UserInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextAreaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OpenedEmojiPickerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/esm/webchat/input-panel/styles.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { COLORS } from '../../constants';
+export const UserInputContainer = styled.div `
+  min-height: 52px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 16px;
+  padding: 0px 16px;
+  z-index: 1;
+  border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_5};
+`;
+export const TextAreaContainer = styled.div `
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  padding: 5px 0px;
+`;
+export const OpenedEmojiPickerContainer = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  right: 3px;
+  top: -324px;
+`;
+//# sourceMappingURL=styles.js.map

package/lib/esm/webchat/input-panel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/input-panel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;0BASlB,MAAM,CAAC,qBAAqB;CACrD,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK1C,CAAA;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMnD,CAAA"}

package/lib/esm/webchat/input-panel/textarea.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PersistentMenuOptionsTheme } from '../theme/types';
+interface TextareaProps {
+    host: HTMLElement;
+    persistentMenu: PersistentMenuOptionsTheme;
+    textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>;
+    sendChatEvent: (event: string) => Promise<void>;
+    sendTextAreaText: () => Promise<void>;
+}
+export declare const Textarea: ({ host, persistentMenu, textareaRef, sendChatEvent, sendTextAreaText, }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/esm/webchat/input-panel/textarea.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { WEBCHAT } from '../../constants';
+import { Typing } from '../../index-types';
+import { WebchatContext } from '../../webchat/context';
+import { useDeviceAdapter } from '../hooks';
+import { TextAreaContainer } from './styles';
+export const Textarea = ({ host, persistentMenu, textareaRef, sendChatEvent, sendTextAreaText, }) => {
+    const { getThemeProperty, webchatState, setIsInputFocused } = useContext(WebchatContext);
+    useDeviceAdapter(host, webchatState.isWebchatOpen);
+    let isTyping = false;
+    let typingTimeout;
+    const persistentMenuOptions = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, persistentMenu);
+    const onKeyDown = event => {
+        if (event.keyCode === 13 && event.shiftKey === false) {
+            event.preventDefault();
+            sendTextAreaText();
+            stopTyping();
+        }
+    };
+    const onKeyUp = () => {
+        if (!textareaRef.current)
+            return;
+        if (textareaRef.current.value === '') {
+            stopTyping();
+            return;
+        }
+        if (!isTyping) {
+            startTyping();
+        }
+        clearTimeoutWithReset(true);
+    };
+    const clearTimeoutWithReset = (reset) => {
+        const waitTime = 20 * 1000;
+        if (typingTimeout)
+            clearTimeout(typingTimeout);
+        if (reset)
+            typingTimeout = setTimeout(stopTyping, waitTime);
+    };
+    const startTyping = () => {
+        isTyping = true;
+        sendChatEvent(Typing.On);
+    };
+    const stopTyping = () => {
+        clearTimeoutWithReset(false);
+        isTyping = false;
+        sendChatEvent(Typing.Off);
+    };
+    const handleFocus = () => {
+        setIsInputFocused(true);
+    };
+    const handleBlur = () => {
+        setIsInputFocused(false);
+    };
+    return (_jsx(TextAreaContainer, { children: _jsx(TextareaAutosize, { ref: (ref) => (textareaRef.current = ref), onFocus: handleFocus, onBlur: handleBlur, name: 'text', maxRows: 4, wrap: 'soft', maxLength: 1000, placeholder: getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.textPlaceholder, WEBCHAT.DEFAULTS.PLACEHOLDER), autoFocus: false, onKeyDown: e => onKeyDown(e), onKeyUp: onKeyUp, style: Object.assign({ display: 'flex', fontSize: 16, width: '100%', border: 'none', resize: 'none', overflow: 'auto', outline: 'none', flex: '1 1 auto', padding: 10, paddingLeft: persistentMenuOptions ? 0 : 10, fontFamily: 'inherit' }, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputBoxStyle)) }) }));
+};
+//# sourceMappingURL=textarea.js.map

package/lib/esm/webchat/input-panel/textarea.js.map

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

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

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

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { ROLES } from '../../constants';
+import { WebchatContext } from '../../webchat/context';
+import { BotonicContainerId } from '../constants';
+import TypingIndicator from '../typing-indicator';
+import { IntroMessage } from './intro-message';
+import { ScrollButton } from './scroll-button';
+import { ContainerMessage, ScrollableMessageList } from './styles';
+import { UnreadMessagesBanner } from './unread-messages-banner';
+import { useNotifications } from './use-notifications';
+const SCROLL_TIMEOUT = 200;
+const scrollOptionsEnd = {
+    block: 'end',
+};
+const scrollOptionsCenter = {
+    block: 'center',
+};
+export 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(() => {
+            var _a;
+            (_a = typingRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView(scrollOptionsEnd);
+        }, SCROLL_TIMEOUT);
+    };
+    const scrollToLastMessage = () => {
+        setTimeout(() => {
+            var _a;
+            (_a = lastMessageRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView(scrollOptionsEnd);
+        }, SCROLL_TIMEOUT);
+    };
+    const scrollToBanner = () => {
+        setTimeout(() => {
+            var _a;
+            (_a = unreadMessagesBannerRef.current) === null || _a === void 0 ? void 0 : _a.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(() => {
+        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 (!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 (_jsxs(_Fragment, { children: [_jsxs(ScrollableMessageList, Object.assign({ id: BotonicContainerId.ScrollableMessagesList, ref: scrollableMessagesListRef, role: ROLES.MESSAGE_LIST }, { children: [_jsx(IntroMessage, {}), webchatState.messagesComponents.map((messageComponent, index) => {
+                        return (_jsxs(React.Fragment, { children: [_jsxs(ContainerMessage, Object.assign({ role: ROLES.MESSAGE }, { children: [showUnreadMessagesBanner(messageComponent.props.id) && (_jsx(UnreadMessagesBanner, { unreadMessagesBannerRef: unreadMessagesBannerRef })), messageComponent] })), index === webchatState.messagesComponents.length - 1 && (_jsx("div", { ref: lastMessageRef, style: {
+                                        content: '',
+                                    } }))] }, messageComponent.props.id));
+                    }), webchatState.typing && _jsx(TypingIndicator, { ref: typingRef })] })), 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":"","sources":["../../../../src/webchat/message-list/index.tsx"],"names":[],"mappings":"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"}