@botonic/react 0.23.3 → 0.24.0-alpha.0

package/src/webchat/message-list/styles.ts

@@ -0,0 +1,47 @@
+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;
+
+  color: #6d6a78;
+  font-size: 14px;
+  font-weight: 400;
+  width: 100%;
+
+  img {
+    width: 10px;
+  }
+`

package/src/webchat/message-list/unread-messages-banner.tsx

@@ -0,0 +1,62 @@
+import React, { useContext, useEffect, useRef } 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'
+
+interface UnreadMessagesBannerProps {
+  numUnreadMessages: number
+}
+
+export const UnreadMessagesBanner = ({
+  numUnreadMessages,
+}: UnreadMessagesBannerProps): JSX.Element => {
+  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'
+  )
+
+  const unreadMessagesBannerRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (webchatState.isWebchatOpen && unreadMessagesBannerRef.current) {
+      unreadMessagesBannerRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      })
+    }
+  }, [webchatState.isWebchatOpen, unreadMessagesBannerRef])
+
+  return (
+    notificationsEnabled && (
+      <div ref={unreadMessagesBannerRef}>
+        {CustomUnreadMessagesBanner ? (
+          <CustomUnreadMessagesBanner />
+        ) : (
+          <ContainerUnreadMessagesBanner>
+            <img src={resolveImage(ArrowDown)} />
+            {numUnreadMessages} {text}
+          </ContainerUnreadMessagesBanner>
+        )}
+      </div>
+    )
+  )
+}

package/src/webchat/messages-reducer.ts

@@ -19,12 +19,20 @@ export const messagesReducer = (
         ...state,
         messagesJSON: [],
         messagesComponents: [],
+        numUnreadMessages: 0,
       }
     case WebchatAction.UPDATE_LAST_MESSAGE_DATE:
       return {
         ...state,
         lastMessageUpdate: action.payload,
       }
+    case WebchatAction.RESET_UNREAD_MESSAGES:
+      return resetUnreadMessages(state)
+    case WebchatAction.SET_LAST_MESSAGE_VISIBLE:
+      return {
+        ...state,
+        isLastMessageVisible: action.payload,
+      }
     default:
       throw new Error()
   }
@@ -36,15 +44,38 @@ function addMessageComponent(
 ) {
   const messageComponent = action.payload
   const isUnreadMessage =
-    !state.isWebchatOpen && messageComponent.props?.ack !== 1
-  const unreadMessages = isUnreadMessage
-    ? state.unreadMessages + 1
-    : state.unreadMessages
+    messageComponent.props?.isUnread &&
+    messageComponent.props?.sent_by !== 'user'
+
+  const numUnreadMessages = isUnreadMessage
+    ? state.numUnreadMessages + 1
+    : state.numUnreadMessages
 
   return {
     ...state,
     messagesComponents: [...(state.messagesComponents || []), messageComponent],
-    unreadMessages,
+    numUnreadMessages,
+  }
+}
+
+function resetUnreadMessages(state: WebchatState) {
+  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 {
+    ...state,
+    messagesComponents,
+    messagesJSON,
+    numUnreadMessages: 0,
   }
 }
 
@@ -71,6 +102,11 @@ function updateMessageReducer(
         ],
       }
     }
+
+    const numUnreadMessages = state.messagesComponents.filter(
+      messageComponent => messageComponent.props.isUnread
+    ).length
+
     return {
       ...state,
       messagesJSON: [
@@ -79,6 +115,7 @@ function updateMessageReducer(
         ...state.messagesJSON.slice(msgIndex + 1),
       ],
       ...updatedMessageComponents,
+      numUnreadMessages,
     }
   }
 

package/src/webchat/trigger-button/index.tsx

@@ -32,11 +32,16 @@ export const TriggerButton = (): JSX.Element => {
     WEBCHAT.CUSTOM_PROPERTIES.triggerButtonStyle
   )
 
-  const notificationsEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.triggerButtonNotificationsEnabled,
+  const notificationsTriggerButtonEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsTriggerButtonEnabled,
     false
   )
 
+  const notificationsEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled,
+    notificationsTriggerButtonEnabled
+  )
+
   const CustomTriggerButton = getThemeProperty(
     WEBCHAT.CUSTOM_PROPERTIES.customTrigger,
     undefined
@@ -49,9 +54,9 @@ export const TriggerButton = (): JSX.Element => {
 
   return (
     <div onClick={handleClick}>
-      {webchatState.unreadMessages !== 0 && notificationsEnabled && (
+      {webchatState.numUnreadMessages !== 0 && notificationsEnabled && (
         <UnreadMessagesCounter className='trigger-notifications'>
-          {webchatState.unreadMessages}
+          {webchatState.numUnreadMessages}
         </UnreadMessagesCounter>
       )}
       {CustomTriggerButton ? (

package/src/webchat/webchat-reducer.ts

@@ -26,7 +26,6 @@ export function webchatReducer(
       return {
         ...state,
         isWebchatOpen,
-        unreadMessages: isWebchatOpen ? 0 : state.unreadMessages,
       }
     }
     case WebchatAction.TOGGLE_EMOJI_PICKER:

package/src/webchat/webchat.jsx

@@ -15,14 +15,9 @@ import { v4 as uuidv4 } from 'uuid'
 import { Audio, Document, Image, Text, Video } from '../components'
 import { Handoff } from '../components/handoff'
 import { normalizeWebchatSettings } from '../components/webchat-settings'
-import {
-  COLORS,
-  MAX_ALLOWED_SIZE_MB,
-  ROLES,
-  SENDERS,
-  WEBCHAT,
-} from '../constants'
+import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT } from '../constants'
 import { RequestContext, WebchatContext } from '../contexts'
+import { SENDERS } from '../index-types'
 import {
   getFullMimeWhitelist,
   getMediaType,
@@ -52,7 +47,6 @@ import {
   PersistentMenu,
 } from './components/persistent-menu'
 import { SendButton } from './components/send-button'
-import { TypingIndicator } from './components/typing-indicator'
 import { DeviceAdapter } from './devices/device-adapter'
 import { StyledWebchatHeader } from './header'
 import {
@@ -143,30 +137,32 @@ const DarkBackgroundMenu = styled.div`
 // eslint-disable-next-line complexity, react/display-name
 export const Webchat = forwardRef((props, ref) => {
   const {
-    webchatState,
     addMessage,
     addMessageComponent,
-    updateMessage,
-    updateReplies,
-    updateLatestInput,
-    updateTyping,
-    updateWebview,
-    updateSession,
-    updateLastRoutePath,
-    updateHandoff,
-    updateTheme,
-    updateDevSettings,
-    toggleWebchat,
-    toggleEmojiPicker,
-    togglePersistentMenu,
-    toggleCoverComponent,
+    clearMessages,
     doRenderCustomComponent,
+    openWebviewT,
+    resetUnreadMessages,
+    setCurrentAttachment,
     setError,
+    setLastMessageVisible,
     setOnline,
-    clearMessages,
-    openWebviewT,
+    toggleCoverComponent,
+    toggleEmojiPicker,
+    togglePersistentMenu,
+    toggleWebchat,
+    updateDevSettings,
+    updateHandoff,
     updateLastMessageDate,
-    setCurrentAttachment,
+    updateLastRoutePath,
+    updateLatestInput,
+    updateMessage,
+    updateReplies,
+    updateSession,
+    updateTheme,
+    updateTyping,
+    updateWebview,
+    webchatState,
     // eslint-disable-next-line react-hooks/rules-of-hooks
   } = props.webchatHooks || useWebchat()
   const firstUpdate = useRef(true)
@@ -224,13 +220,16 @@ export const Webchat = forwardRef((props, ref) => {
   }, [webchatState.currentAttachment])
 
   const sendUserInput = async input => {
-    props.onUserInput &&
+    if (props.onUserInput) {
+      resetUnreadMessages()
+      scrollToBottom({ host })
       props.onUserInput({
         user: webchatState.session.user,
         input: input,
         session: webchatState.session,
         lastRoutePath: webchatState.lastRoutePath,
       })
+    }
   }
 
   const sendChatEvent = async chatEvent => {
@@ -290,14 +289,14 @@ export const Webchat = forwardRef((props, ref) => {
     updateSession(session)
     if (shouldKeepSessionOnReload({ initialDevSettings, devSettings })) {
       if (messages) {
-        messages.forEach(m => {
-          addMessage(m)
-          const newComponent = msgToBotonic(
-            { ...m, delay: 0, typing: 0 },
+        messages.forEach(message => {
+          addMessage(message)
+          const newMessageComponent = msgToBotonic(
+            { ...message, delay: 0, typing: 0 },
             (props.theme.message && props.theme.message.customTypes) ||
               props.theme.customMessageTypes
           )
-          if (newComponent) addMessageComponent(newComponent)
+          if (newMessageComponent) addMessageComponent(newMessageComponent)
         })
       }
       if (initialSession) updateSession(merge(initialSession, session))
@@ -314,12 +313,13 @@ export const Webchat = forwardRef((props, ref) => {
   useEffect(() => {
     if (!webchatState.isWebchatOpen) return
     deviceAdapter.init(host)
-    scrollToBottom({ behavior: 'auto', host })
+    // scrollToBottom({ behavior: 'auto', host })
   }, [webchatState.isWebchatOpen])
 
   useEffect(() => {
-    if (onStateChange && typeof onStateChange === 'function')
+    if (onStateChange && typeof onStateChange === 'function') {
       onStateChange(webchatState)
+    }
     saveWebchatState(webchatState)
   }, [
     webchatState.messagesJSON,
@@ -410,7 +410,7 @@ export const Webchat = forwardRef((props, ref) => {
         addMessageComponent(
           <Text
             id={input.id}
-            from={SENDERS.user}
+            sentBy={SENDERS.user}
             blob={false}
             style={{
               backgroundColor: COLORS.SCORPION_GRAY,
@@ -484,7 +484,7 @@ export const Webchat = forwardRef((props, ref) => {
     let messageComponent = null
     if (isText(input)) {
       messageComponent = (
-        <Text id={input.id} payload={input.payload} from={SENDERS.user}>
+        <Text id={input.id} payload={input.payload} sentBy={SENDERS.user}>
           {input.data}
         </Text>
       )
@@ -492,7 +492,7 @@ export const Webchat = forwardRef((props, ref) => {
       const temporaryDisplayUrl = URL.createObjectURL(input.data)
       const mediaProps = {
         id: input.id,
-        from: SENDERS.user,
+        sentBy: SENDERS.user,
         src: temporaryDisplayUrl,
       }
       if (isImage(input)) {
@@ -532,8 +532,21 @@ export const Webchat = forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({
     addBotResponse: ({ response, session, lastRoutePath }) => {
       updateTyping(false)
-      if (Array.isArray(response)) response.map(r => addMessageComponent(r))
-      else if (response) addMessageComponent(response)
+
+      const isUnread =
+        !webchatState.isLastMessageVisible || webchatState.numUnreadMessages > 0
+
+      if (Array.isArray(response)) {
+        response.forEach(r => {
+          addMessageComponent({ ...r, props: { ...r.props, isUnread } })
+        })
+      } else if (response) {
+        addMessageComponent({
+          ...response,
+          props: { ...response.props, isUnread },
+        })
+      }
+
       if (session) {
         updateSession(merge(session, { user: webchatState.session.user }))
         const action = session._botonic_action || ''
@@ -541,7 +554,9 @@ export const Webchat = forwardRef((props, ref) => {
         if (handoff && isDev) addMessageComponent(<Handoff />)
         updateHandoff(handoff)
       }
+
       if (lastRoutePath) updateLastRoutePath(lastRoutePath)
+
       updateLastMessageDate(currentDateString())
     },
     setTyping: typing => updateTyping(typing),
@@ -685,7 +700,9 @@ export const Webchat = forwardRef((props, ref) => {
       firstUpdate.current = false
       return
     }
+
     if (webchatState.isWebchatOpen && props.onOpen) props.onOpen()
+
     if (!webchatState.isWebchatOpen && props.onClose && !firstUpdate.current) {
       props.onClose()
       toggleEmojiPicker(false)
@@ -693,11 +710,6 @@ export const Webchat = forwardRef((props, ref) => {
     }
   }, [webchatState.isWebchatOpen])
 
-  const webchatMessageList = () => (
-    <WebchatMessageList style={{ flex: 1 }}>
-      {webchatState.typing && <TypingIndicator />}
-    </WebchatMessageList>
-  )
   const webchatReplies = () => <WebchatReplies replies={webchatState.replies} />
 
   const isUserInputEnabled = () => {
@@ -737,8 +749,14 @@ export const Webchat = forwardRef((props, ref) => {
             <Textarea
               inputRef={textArea}
               name='text'
-              onFocus={() => deviceAdapter.onFocus(host)}
-              onBlur={() => deviceAdapter.onBlur()}
+              onFocus={() => {
+                scrollToBottom({ host })
+                resetUnreadMessages()
+                deviceAdapter.onFocus(host)
+              }}
+              onBlur={() => {
+                deviceAdapter.onBlur()
+              }}
               maxRows={4}
               wrap='soft'
               maxLength='1000'
@@ -746,7 +764,7 @@ export const Webchat = forwardRef((props, ref) => {
                 WEBCHAT.CUSTOM_PROPERTIES.textPlaceholder,
                 WEBCHAT.DEFAULTS.PLACEHOLDER
               )}
-              autoFocus={true}
+              // autoFocus={true}
               onKeyDown={e => onKeyDown(e)}
               onKeyUp={onKeyUp}
               style={{
@@ -810,7 +828,7 @@ export const Webchat = forwardRef((props, ref) => {
   useEffect(() => {
     // Prod mode
     saveWebchatState(webchatState)
-    scrollToBottom({ host })
+    // scrollToBottom({ host })
   }, [webchatState.themeUpdates])
 
   // Only needed for dev/serve mode
@@ -849,6 +867,8 @@ export const Webchat = forwardRef((props, ref) => {
         getThemeProperty,
         openWebview,
         resolveCase,
+        resetUnreadMessages,
+        setLastMessageVisible,
         sendAttachment,
         sendInput,
         sendPayload,
@@ -886,7 +906,9 @@ export const Webchat = forwardRef((props, ref) => {
               <ErrorMessage>{webchatState.error.message}</ErrorMessage>
             </ErrorMessageContainer>
           )}
-          {webchatMessageList()}
+
+          <WebchatMessageList style={{ flex: 1 }} host={host} />
+
           {webchatState.replies &&
             Object.keys(webchatState.replies).length > 0 &&
             webchatReplies()}

package/src/webchat-app.jsx

@@ -4,7 +4,8 @@ import merge from 'lodash.merge'
 import React, { createRef } from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 
-import { SENDERS, WEBCHAT } from './constants'
+import { WEBCHAT } from './constants'
+import { SENDERS } from './index-types'
 import { msgToBotonic } from './msg-to-botonic'
 import { isShadowDOMSupported, onDOMLoaded } from './util/dom'
 import { Webchat } from './webchat/webchat'
@@ -110,7 +111,11 @@ export class WebchatApp {
 
   async onUserInput({ user, input }) {
     this.onMessage &&
-      this.onMessage(this, { from: SENDERS.user, message: input })
+      this.onMessage(this, {
+        sentBy: SENDERS.user,
+        message: input,
+        isUnread: false,
+      })
     return this.hubtypeService.postMessage(user, input)
   }
 
@@ -145,15 +150,15 @@ export class WebchatApp {
     if (event.action === 'connectionChange') {
       this.onConnectionChange && this.onConnectionChange(this, event.online)
       this.webchatRef.current.setOnline(event.online)
-    } else if (event.action === 'update_message_info')
+    } else if (event.action === 'update_message_info') {
       this.updateMessageInfo(event.message.id, event.message)
-    else if (event.message.type === 'update_webchat_settings')
+    } else if (event.message?.type === 'update_webchat_settings') {
       this.updateWebchatSettings(event.message.data)
-    else if (event.message.type === 'sender_action')
+    } else if (event.message?.type === 'sender_action') {
       this.setTyping(event.message.data === 'typing_on')
-    else {
+    } else {
       this.onMessage &&
-        this.onMessage(this, { from: SENDERS.bot, message: event.message })
+        this.onMessage(this, { sentBy: SENDERS.bot, message: event.message })
       this.addBotMessage(event.message)
     }
   }
@@ -163,12 +168,18 @@ export class WebchatApp {
   }
 
   addBotMessage(message) {
+    message.ack = 0
+    message.isUnread = true
+    message.sentBy = message.sent_by?.split('message_sent_by_')[1]
+    delete message.sent_by
+    const response = msgToBotonic(
+      message,
+      (this.theme.message && this.theme.message.customTypes) ||
+        this.theme.customMessageTypes
+    )
+
     this.webchatRef.current.addBotResponse({
-      response: msgToBotonic(
-        message,
-        (this.theme.message && this.theme.message.customTypes) ||
-          this.theme.customMessageTypes
-      ),
+      response,
     })
   }
 
@@ -181,11 +192,11 @@ export class WebchatApp {
   }
 
   addUserText(text) {
-    this.webchatRef.current.addUserMessage({ type: INPUT.TEXT, data: text })
+    this.addUserMessage({ type: INPUT.TEXT, data: text })
   }
 
   addUserPayload(payload) {
-    this.webchatRef.current.addUserMessage({ type: INPUT.POSTBACK, payload })
+    this.addUserMessage({ type: INPUT.POSTBACK, payload })
   }
 
   setTyping(typing) {

package/lib/cjs/webchat/message-list.d.ts

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

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

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebchatMessageList = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const Fade_1 = tslib_1.__importDefault(require("react-reveal/Fade"));
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const contexts_1 = require("../contexts");
-const environment_1 = require("../util/environment");
-const react_2 = require("../util/react");
-const styled_scrollbar_1 = require("./components/styled-scrollbar");
-const StyledMessages = styled_components_1.default.div `
-  display: flex;
-  overflow-x: hidden;
-  flex-direction: column;
-  flex: none;
-  white-space: pre;
-  word-wrap: break-word;
-`;
-const DefaultIntroImage = styled_components_1.default.img `
-  max-height: 50%;
-  width: 100%;
-`;
-const WebchatMessageList = props => {
-    const { webchatState, getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
-    const animationsEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableAnimations, true);
-    const CustomIntro = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customIntro);
-    const introImage = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.introImage);
-    const introStyle = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.introStyle);
-    const scrollbarOptions = Object.assign({ enable: true, autoHide: true }, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.scrollbar));
-    const DefaultIntro = introImage && ((0, jsx_runtime_1.jsx)(DefaultIntroImage, { style: Object.assign({}, introStyle), src: (0, environment_1.resolveImage)(introImage) }));
-    return ((0, jsx_runtime_1.jsxs)(styled_scrollbar_1.StyledScrollbar, Object.assign({ role: constants_1.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', style: Object.assign({}, props.style) }, { children: [(CustomIntro || DefaultIntro) && ((0, jsx_runtime_1.jsx)(react_2.ConditionalWrapper, Object.assign({ condition: animationsEnabled, wrapper: children => (0, jsx_runtime_1.jsx)(Fade_1.default, { children: children }) }, { children: CustomIntro ? (0, jsx_runtime_1.jsx)(CustomIntro, {}) : DefaultIntro }))), webchatState.messagesComponents.map((e, i) => ((0, jsx_runtime_1.jsx)(StyledMessages, Object.assign({ role: constants_1.ROLES.MESSAGE }, { children: e }), i))), props.children] })));
-};
-exports.WebchatMessageList = WebchatMessageList;
-//# sourceMappingURL=message-list.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"message-list.js","sourceRoot":"src/","sources":["webchat/message-list.jsx"],"names":[],"mappings":";;;;;AAAA,uDAAyC;AACzC,qEAAoC;AACpC,kFAAsC;AAEtC,4CAA6C;AAC7C,0CAA4C;AAC5C,qDAAkD;AAClD,yCAAkD;AAClD,oEAA+D;AAE/D,MAAM,cAAc,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;CAOhC,CAAA;AAED,MAAM,iBAAiB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAA;AAEM,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE;IACxC,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAA;IACrE,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,mBAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,IAAI,CACL,CAAA;IACD,MAAM,WAAW,GAAG,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAC3E,MAAM,UAAU,GAAG,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAA;IACzE,MAAM,UAAU,GAAG,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAA;IAEzE,MAAM,gBAAgB,iBACjB,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAChC,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,SAAS,CAAC,CACzD,CAAA;IAED,MAAM,YAAY,GAAG,UAAU,IAAI,CACjC,uBAAC,iBAAiB,IAChB,KAAK,oBACA,UAAU,GAEf,GAAG,EAAE,IAAA,0BAAY,EAAC,UAAU,CAAC,GAC7B,CACH,CAAA;IAED,OAAO,CACL,wBAAC,kCAAe,kBACd,IAAI,EAAE,iBAAK,CAAC,YAAY;QACxB,gGAAgG;QAChG,EAAE,EAAC,4BAA4B,EAC/B,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,EACnC,mBAAmB,EAAC,MAAM,EAC1B,KAAK,oBACA,KAAK,CAAC,KAAK,kBAGf,CAAC,WAAW,IAAI,YAAY,CAAC,IAAI,CAChC,uBAAC,0BAAkB,kBACjB,SAAS,EAAE,iBAAiB,EAC5B,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC,uBAAC,cAAI,cAAE,QAAQ,GAAQ,gBAE3C,WAAW,CAAC,CAAC,CAAC,uBAAC,WAAW,KAAG,CAAC,CAAC,CAAC,YAAY,IAC1B,CACtB,EACA,YAAY,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC7C,uBAAC,cAAc,kBAAC,IAAI,EAAE,iBAAK,CAAC,OAAO,gBAChC,CAAC,KADsC,CAAC,CAE1B,CAClB,CAAC,EACD,KAAK,CAAC,QAAQ,KACC,CACnB,CAAA;AACH,CAAC,CAAA;AApDY,QAAA,kBAAkB,sBAoD9B"}

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

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

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

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useContext } from 'react';
-import Fade from 'react-reveal/Fade';
-import styled from 'styled-components';
-import { ROLES, WEBCHAT } from '../constants';
-import { WebchatContext } from '../contexts';
-import { resolveImage } from '../util/environment';
-import { ConditionalWrapper } from '../util/react';
-import { StyledScrollbar } from './components/styled-scrollbar';
-const StyledMessages = styled.div `
-  display: flex;
-  overflow-x: hidden;
-  flex-direction: column;
-  flex: none;
-  white-space: pre;
-  word-wrap: break-word;
-`;
-const DefaultIntroImage = styled.img `
-  max-height: 50%;
-  width: 100%;
-`;
-export const WebchatMessageList = props => {
-    const { webchatState, 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 scrollbarOptions = Object.assign({ enable: true, autoHide: true }, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollbar));
-    const DefaultIntro = introImage && (_jsx(DefaultIntroImage, { style: Object.assign({}, introStyle), src: resolveImage(introImage) }));
-    return (_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', style: Object.assign({}, props.style) }, { children: [(CustomIntro || DefaultIntro) && (_jsx(ConditionalWrapper, Object.assign({ condition: animationsEnabled, wrapper: children => _jsx(Fade, { children: children }) }, { children: CustomIntro ? _jsx(CustomIntro, {}) : DefaultIntro }))), webchatState.messagesComponents.map((e, i) => (_jsx(StyledMessages, Object.assign({ role: ROLES.MESSAGE }, { children: e }), i))), props.children] })));
-};
-//# sourceMappingURL=message-list.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"message-list.js","sourceRoot":"src/","sources":["webchat/message-list.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,IAAI,MAAM,mBAAmB,CAAA;AACpC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAE/D,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOhC,CAAA;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE;IACxC,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IACrE,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,gBAAgB,iBACjB,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAChC,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,SAAS,CAAC,CACzD,CAAA;IAED,MAAM,YAAY,GAAG,UAAU,IAAI,CACjC,KAAC,iBAAiB,IAChB,KAAK,oBACA,UAAU,GAEf,GAAG,EAAE,YAAY,CAAC,UAAU,CAAC,GAC7B,CACH,CAAA;IAED,OAAO,CACL,MAAC,eAAe,kBACd,IAAI,EAAE,KAAK,CAAC,YAAY;QACxB,gGAAgG;QAChG,EAAE,EAAC,4BAA4B,EAC/B,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,EACnC,mBAAmB,EAAC,MAAM,EAC1B,KAAK,oBACA,KAAK,CAAC,KAAK,kBAGf,CAAC,WAAW,IAAI,YAAY,CAAC,IAAI,CAChC,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,EACA,YAAY,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC7C,KAAC,cAAc,kBAAC,IAAI,EAAE,KAAK,CAAC,OAAO,gBAChC,CAAC,KADsC,CAAC,CAE1B,CAClB,CAAC,EACD,KAAK,CAAC,QAAQ,KACC,CACnB,CAAA;AACH,CAAC,CAAA"}