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

package/src/components/message/index.jsx

@@ -41,7 +41,6 @@ export const Message = props => {
 
   const isSentByUser = sentBy === SENDERS.user
   const isSentByBot = sentBy === SENDERS.bot
-  const isSentByAgent = sentBy === SENDERS.agent
   const markdown = props.markdown
   const { webchatState, addMessage, updateReplies, getThemeProperty } =
     useContext(WebchatContext)
@@ -219,11 +218,7 @@ export const Message = props => {
               ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.messageStyle),
             }}
           >
-            <MessageImage
-              imagestyle={imagestyle}
-              isSentByAgent={isSentByAgent}
-              isSentByUser={isSentByUser}
-            />
+            <MessageImage imagestyle={imagestyle} sentBy={sentBy} />
             <BlobContainer
               className={className}
               bgcolor={getBgColor()}
@@ -262,7 +257,6 @@ export const Message = props => {
           </MessageContainer>
           {timestampsEnabled && (
             <MessageTimestamp
-              isSentByUser={isSentByUser}
               sentBy={sentBy}
               style={timestampStyle}
               timestamp={messageJSON.timestamp}

package/src/components/message/message-image.tsx

@@ -2,22 +2,25 @@ import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
 import { WebchatContext } from '../../contexts'
+import { SENDERS } from '../../index-types'
 import { resolveImage } from '../../util/environment'
 import { BotMessageImageContainer } from './styles'
 
 interface MessageImageProps {
   imagestyle: Record<string, unknown>
-  isSentByUser: boolean
-  isSentByAgent: boolean
+  sentBy: SENDERS
 }
 
-export const MessageImage = ({
-  imagestyle,
-  isSentByUser,
-  isSentByAgent,
-}: MessageImageProps) => {
+export const MessageImage = ({ imagestyle, sentBy }: MessageImageProps) => {
   const { getThemeProperty } = useContext(WebchatContext)
 
+  const isSentByAgent = sentBy === SENDERS.agent
+  const isSentByUser = sentBy === SENDERS.user
+
+  const timestampsWithImage = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsWithImage
+  )
+
   const BotMessageImage = getThemeProperty(
     WEBCHAT.CUSTOM_PROPERTIES.botMessageImage,
     getThemeProperty(
@@ -32,6 +35,7 @@ export const MessageImage = ({
   )
 
   return (
+    !timestampsWithImage &&
     !isSentByUser &&
     BotMessageImage && (
       <BotMessageImageContainer

package/src/components/message/styles.ts

@@ -58,16 +58,24 @@ export const BlobTick = styled.div`
 export const TimestampContainer = styled.div`
   display: flex;
   position: relative;
-  align-items: flex-start;
+  justify-content: ${props => (props.isSentByUser ? 'flex-end' : 'flex-start')};
+  align-items: center;
+  gap: 10px;
+
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0px 15px 4px 15px;
+  padding-top: ${props => (props.isSentByUser ? '0px' : '4px')};
+
+  img {
+    max-width: 20px;
+  }
 `
 
 export const TimestampText = styled.div`
-  @import url('https://fonts.googleapis.com/css?family=Lato');
-  font-family: Lato;
+  /* @import url('https://fonts.googleapis.com/css?family=Lato');
+  font-family: Lato; */
   font-size: 10px;
   color: ${COLORS.SOLID_BLACK};
-  width: 100%;
   text-align: ${props => (props.isSentByUser ? 'right' : 'left')};
-  padding: ${props => (props.isSentByUser ? '0px 15px' : '0px 50px')};
-  margin-bottom: 5px;
 `

package/src/components/message/timestamps.tsx

@@ -0,0 +1,100 @@
+import React, { useContext } from 'react'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+import { SENDERS } from '../../index-types'
+import { resolveImage } from '../../util'
+import { TimestampContainer, TimestampText } from './styles'
+
+export const resolveMessageTimestamps = (
+  getThemeProperty,
+  timestampEnabled
+) => {
+  const timestampsFormat = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsFormat
+  )
+  const timestampStyle = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsStyle
+  )
+  const timestampsEnabled = Boolean(
+    timestampEnabled !== undefined
+      ? timestampEnabled
+      : getThemeProperty(
+          WEBCHAT.CUSTOM_PROPERTIES.enableMessageTimestamps,
+          Boolean(timestampStyle) || Boolean(timestampsFormat) || false
+        )
+  )
+
+  const defaultTimestampFormat = {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+  }
+
+  const getFormattedTimestamp = timestampsFormat
+    ? timestampsFormat()
+    : // @ts-ignore
+      new Date().toLocaleString(undefined, defaultTimestampFormat)
+
+  return {
+    timestampsEnabled,
+    getFormattedTimestamp,
+    timestampStyle,
+  }
+}
+
+interface MessageTimestampProps {
+  timestamp: string
+  style: Record<string, unknown>
+  sentBy: SENDERS
+}
+
+export const MessageTimestamp = ({
+  timestamp,
+  style,
+  sentBy,
+}: MessageTimestampProps) => {
+  const { getThemeProperty } = useContext(WebchatContext)
+
+  const isSentByUser = sentBy === SENDERS.user
+  const isSentByAgent = sentBy === SENDERS.agent
+
+  const BotMessageImage = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.botMessageImage,
+    undefined
+  )
+
+  const AgentMessageImage = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.agentMessageImage,
+    BotMessageImage
+  )
+
+  const timestampsWithImage = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsWithImage
+  )
+
+  return (
+    <TimestampContainer
+      className={`botonic-timestamp-container ${sentBy}`}
+      isSentByUser={isSentByUser}
+    >
+      {timestampsWithImage && BotMessageImage && !isSentByUser && (
+        <img
+          src={resolveImage(
+            isSentByAgent ? AgentMessageImage : BotMessageImage
+          )}
+        />
+      )}
+      <TimestampText
+        isSentByUser={isSentByUser}
+        style={{
+          ...style,
+        }}
+      >
+        {timestamp}
+      </TimestampText>
+    </TimestampContainer>
+  )
+}

package/src/constants.js

@@ -100,6 +100,7 @@ export const WEBCHAT = {
     enableMessageTimestamps: 'message.timestamps.enable',
     messageTimestampsFormat: 'message.timestamps.format',
     messageTimestampsStyle: 'message.timestamps.style',
+    messageTimestampsWithImage: 'message.timestamps.withImage',
     // Intro
     customIntro: 'intro.custom',
     introImage: 'intro.image',

package/src/index-types.ts

@@ -20,7 +20,7 @@ import {
   WebchatSettingsProps,
   Webview,
 } from './components/index-types'
-import { WebchatState } from './webchat'
+import { WebchatState } from './webchat/index-types'
 import { WebchatApp } from './webchat-app'
 
 /**

package/src/webchat/components/styled-scrollbar.jsx

@@ -8,7 +8,7 @@ import { COLORS } from '../../constants'
 
 export const StyledScrollbar = styled(SimpleBar)`
   ${props =>
-    props.isMessagesContainer &&
+    props.ismessagescontainer === 'true' &&
     css`
       display: flex;
       flex-direction: column;

package/src/webchat/devices/device-adapter.js

@@ -21,10 +21,6 @@ export class DeviceAdapter {
   }
 
   onFocus(host) {
-    if (this.currentDevice !== DEVICES.MOBILE.IPHONE) {
-      // scrollToBottom({ host, timeout: 800 })
-      return
-    }
     setTimeout(() => {
       // Place onFocus logic to be run the last on the queue of asynchronous events to give enough time to init method to be called. Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#zero_delays
       this.webchatResizer.onFocus(() =>

package/src/webchat/message-list/index.tsx

@@ -95,7 +95,7 @@ export const WebchatMessageList = props => {
         id='botonic-scrollable-content'
         scrollbar={scrollbarOptions}
         autoHide={scrollbarOptions.autoHide}
-        isMessagesContainer={true}
+        ismessagescontainer={true.toString()}
         style={{
           ...props.style,
         }}

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useEffect } from 'react'
 
 import ArrowDown from '../../assets/arrow-down.svg'
 import { WEBCHAT } from '../../constants'
@@ -35,6 +35,15 @@ export const UnreadMessagesBanner = ({
     'unread messages'
   )
 
+  useEffect(() => {
+    if (webchatState.isWebchatOpen && unreadMessagesBannerRef.current) {
+      unreadMessagesBannerRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      })
+    }
+  }, [webchatState.isWebchatOpen, unreadMessagesBannerRef])
+
   return (
     notificationsEnabled && (
       <div ref={unreadMessagesBannerRef}>

package/src/webchat/replies.jsx

@@ -49,11 +49,9 @@ export const WebchatReplies = props => {
       autoHide={scrollbarOptions.autoHide}
     >
       <RepliesContainer
+        className='replies-container'
         justify={justifyContent}
         wrap={flexWrap}
-        style={{
-          ...props.style,
-        }}
       >
         {webchatState.replies.map((r, i) => (
           <ReplyContainer key={i}>{r}</ReplyContainer>

package/src/webchat/webchat.jsx

@@ -714,8 +714,6 @@ export const Webchat = forwardRef((props, ref) => {
     }
   }, [webchatState.isWebchatOpen])
 
-  const webchatReplies = () => <WebchatReplies replies={webchatState.replies} />
-
   const isUserInputEnabled = () => {
     const isUserInputEnabled = getThemeProperty(
       WEBCHAT.CUSTOM_PROPERTIES.enableUserInput,
@@ -911,8 +909,10 @@ export const Webchat = forwardRef((props, ref) => {
           <WebchatMessageList style={{ flex: 1 }} host={host} />
 
           {webchatState.replies &&
-            Object.keys(webchatState.replies).length > 0 &&
-            webchatReplies()}
+            Object.keys(webchatState.replies).length > 0 && (
+              <WebchatReplies replies={webchatState.replies} />
+            )}
+
           {webchatState.isPersistentMenuOpen && (
             <DarkenBackground component={persistentMenu()} />
           )}

package/src/components/message/timestamps.jsx

@@ -1,62 +0,0 @@
-import React from 'react'
-
-import { WEBCHAT } from '../../constants'
-import { TimestampContainer, TimestampText } from './styles'
-
-export const resolveMessageTimestamps = (
-  getThemeFn,
-  messageTimestampEnabled
-) => {
-  const timestampsFormat = getThemeFn(
-    WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsFormat
-  )
-  const timestampStyle = getThemeFn(
-    WEBCHAT.CUSTOM_PROPERTIES.messageTimestampsStyle
-  )
-  const timestampsEnabled = Boolean(
-    messageTimestampEnabled !== undefined
-      ? messageTimestampEnabled
-      : getThemeFn(
-          WEBCHAT.CUSTOM_PROPERTIES.enableMessageTimestamps,
-          Boolean(timestampStyle) || Boolean(timestampsFormat) || false
-        )
-  )
-
-  const defaultTimestampFormat = {
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric',
-  }
-
-  const getFormattedTimestamp = timestampsFormat
-    ? timestampsFormat()
-    : new Date().toLocaleString(undefined, defaultTimestampFormat)
-
-  return {
-    timestampsEnabled,
-    getFormattedTimestamp,
-    timestampStyle,
-  }
-}
-
-export const MessageTimestamp = ({
-  timestamp,
-  style,
-  isSentByUser,
-  sentBy,
-}) => {
-  return (
-    <TimestampContainer className={`botonic-timestamp-${sentBy}`}>
-      <TimestampText
-        isSentByUser={isSentByUser}
-        style={{
-          ...style,
-        }}
-      >
-        {timestamp}
-      </TimestampText>
-    </TimestampContainer>
-  )
-}