diff --git a/docs/dist/main.05dcaa69e81e15c18081.css b/docs/dist/main.9ebb5b258af19df4b9db.css similarity index 100% rename from docs/dist/main.05dcaa69e81e15c18081.css rename to docs/dist/main.9ebb5b258af19df4b9db.css diff --git a/docs/dist/main.05dcaa69e81e15c18081.js b/docs/dist/main.9ebb5b258af19df4b9db.js similarity index 76% rename from docs/dist/main.05dcaa69e81e15c18081.js rename to docs/dist/main.9ebb5b258af19df4b9db.js index 35a4e2a..143e66d 100644 --- a/docs/dist/main.05dcaa69e81e15c18081.js +++ b/docs/dist/main.9ebb5b258af19df4b9db.js @@ -1,4 +1,4 @@ -(()=>{var n={710:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Le});var j=n(294),u=n(184),I=n.n(u),N={chatBubbleWrapper:{position:"relative",marginBottom:2,display:"flex"},chatBubble:{position:"relative",borderTopRightRadius:7,borderTopLeftRadius:7,borderBottomRightRadius:7,borderBottomLeftRadius:7,marginRight:"auto",marginLeft:"auto",maxWidth:"80%",paddingTop:8,paddingBottom:14,paddingLeft:14,paddingRight:14},userChatBubbleOrientationNormal:{marginRight:0},recipientChatBubbleOrientationNormal:{marginLeft:0},recipientChatBubble:{},text:{fontSize:16,fontWeight:300,margin:0,marginRight:30},userFirstChatBubbleInGroup:{borderTopRightRadius:0},recipientFirstChatBubbleInGroup:{borderTopLeftRadius:0},userLastChatBubbleInGroup:{borderTopRightRadius:0},recipientLastChatBubbleInGroup:{borderTopLeftRadius:0},userCenterChatBubbleInGroup:{borderTopRightRadius:0,borderBottomRightRadius:0},recipientCenterChatBubbleInGroup:{borderBottomLeftRadius:0,borderTopLeftRadius:0},createdOn:{position:"absolute",right:14,bottom:2,fontSize:9,opacity:.5},isSend:{position:"absolute",right:2,bottom:1,fontSize:9,opacity:.5},lastSeenByContainer:{position:"absolute",right:-30,top:0,width:20,height:"100%"},loadingSpinnerColor:"currentColor",isSendIconColor:"currentColor"},A="react-bell-chat__chat-bubble__wrapper",L="react-bell-chat__chat-bubble__is-send",B="react-bell-chat__chat-bubble",D="react-bell-chat__chat-bubble--user",U="react-bell-chat__chat-bubble--recipient",z="react-bell-chat__chat-bubble__text",F="react-bell-chat__chat-bubble__text--user",W="react-bell-chat__chat-bubble__text--recipient",H="react-bell-chat__chat-bubble__created-on",V="react-bell-chat__chat-bubble__created-on--user",G="react-bell-chat__chat-bubble__created-on--recipient",$="react-bell-chat__chat-bubble__last-seen-by__container",Q={formatTime:function(e){return null==e?void 0:e.toLocaleTimeString([],{hour:"numeric",minute:"numeric",hour12:!0})}},K=function(){return(K=Object.assign||function(e){for(var t,n=1,r=arguments.length;nl[0]&&t[1]{var n; +(()=>{var n={710:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Le});var j=n(294),u=n(184),I=n.n(u),N={chatBubbleWrapper:{position:"relative",marginBottom:2,display:"flex"},chatBubble:{position:"relative",borderTopRightRadius:7,borderTopLeftRadius:7,borderBottomRightRadius:7,borderBottomLeftRadius:7,marginRight:"auto",marginLeft:"auto",maxWidth:"80%",paddingTop:8,paddingBottom:14,paddingLeft:14,paddingRight:14},userChatBubbleOrientationNormal:{marginRight:0},recipientChatBubbleOrientationNormal:{marginLeft:0},recipientChatBubble:{},text:{fontSize:16,fontWeight:300,margin:0,marginRight:30,overflowWrap:"break-word",wordWrap:"break-word",hyphens:"auto"},userFirstChatBubbleInGroup:{borderTopRightRadius:0},recipientFirstChatBubbleInGroup:{borderTopLeftRadius:0},userLastChatBubbleInGroup:{borderTopRightRadius:0},recipientLastChatBubbleInGroup:{borderTopLeftRadius:0},userCenterChatBubbleInGroup:{borderTopRightRadius:0,borderBottomRightRadius:0},recipientCenterChatBubbleInGroup:{borderBottomLeftRadius:0,borderTopLeftRadius:0},createdOn:{position:"absolute",right:14,bottom:2,fontSize:9,opacity:.5},isSend:{position:"absolute",right:2,bottom:1,fontSize:9,opacity:.5},lastSeenByContainer:{position:"absolute",right:-30,top:0,width:20,height:"100%"},loadingSpinnerColor:"currentColor",isSendIconColor:"currentColor"},A="react-bell-chat__chat-bubble__wrapper",L="react-bell-chat__chat-bubble__is-send",B="react-bell-chat__chat-bubble",D="react-bell-chat__chat-bubble--user",U="react-bell-chat__chat-bubble--recipient",z="react-bell-chat__chat-bubble__text",F="react-bell-chat__chat-bubble__text--user",W="react-bell-chat__chat-bubble__text--recipient",H="react-bell-chat__chat-bubble__created-on",V="react-bell-chat__chat-bubble__created-on--user",G="react-bell-chat__chat-bubble__created-on--recipient",$="react-bell-chat__chat-bubble__last-seen-by__container",Q={formatTime:function(e){return null==e?void 0:e.toLocaleTimeString([],{hour:"numeric",minute:"numeric",hour12:!0})}},K=function(){return(K=Object.assign||function(e){for(var t,n=1,r=arguments.length;nl[0]&&t[1]{var n; /*! Copyright (c) 2017 Jed Watson. Licensed under the MIT License (MIT), see diff --git a/docs/index.html b/docs/index.html index 54bb1d9..f57d9aa 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -GuestBell chat
\ No newline at end of file +GuestBell chat
\ No newline at end of file diff --git a/lib/index.js b/lib/index.js index 35ee9c8..0e4f804 100644 --- a/lib/index.js +++ b/lib/index.js @@ -4,5 +4,5 @@ Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ -!function(){"use strict";var o={}.hasOwnProperty;function l(){for(var e=[],t=0;t{"use strict";e.exports=t}},s={};function ae(e){var t=s[e];if(void 0!==t)return t.exports;t=s[e]={exports:{}};return r[e](t,t.exports,ae),t.exports}ae.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return ae.d(t,{a:t}),t},ae.d=(e,t)=>{for(var r in t)ae.o(t,r)&&!ae.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},ae.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),ae.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var oe={};return(()=>{"use strict";ae.r(oe),ae.d(oe,{Avatar:()=>r,BubbleGroup:()=>A,ChatBubble:()=>e,ChatFeed:()=>se,ChatMessagesContainer:()=>M,ChatScrollArea:()=>m,DateRow:()=>W,IsTyping:()=>h,LastSeenAvatar:()=>B,LoadingMessages:()=>z,SystemChatBubble:()=>K,defaultAvatarClasses:()=>o,defaultAvatarStyles:()=>a,defaultBubbleGroupClasses:()=>w,defaultBubbleGroupStyles:()=>_,defaultChatBubbleClasses:()=>j,defaultChatBubbleConfig:()=>N,defaultChatBubbleStyles:()=>E,defaultChatFeedClasses:()=>X,defaultChatFeedStyles:()=>Q,defaultChatMessagesContainerClasses:()=>x,defaultChatMessagesContainerStyles:()=>T,defaultChatScrollAreaClasses:()=>b,defaultChatScrollAreaStyles:()=>d,defaultDateRowClasses:()=>L,defaultDateRowStyles:()=>k,defaultIsTypingClasses:()=>n,defaultIsTypingStyles:()=>u,defaultLastSeenAvatarClasses:()=>y,defaultLastSeenAvatarStyles:()=>C,defaultLoadingMessagesClasses:()=>D,defaultLoadingMessagesStyle:()=>F,defaultSystemChatBubbleClasses:()=>V,defaultSystemChatBubbleStyles:()=>Y});var I=ae(297),i=ae(184),G=ae.n(i),E={chatBubbleWrapper:{position:"relative",marginBottom:2,display:"flex"},chatBubble:{position:"relative",borderTopRightRadius:7,borderTopLeftRadius:7,borderBottomRightRadius:7,borderBottomLeftRadius:7,marginRight:"auto",marginLeft:"auto",maxWidth:"80%",paddingTop:8,paddingBottom:14,paddingLeft:14,paddingRight:14},userChatBubbleOrientationNormal:{marginRight:0},recipientChatBubbleOrientationNormal:{marginLeft:0},recipientChatBubble:{},text:{fontSize:16,fontWeight:300,margin:0,marginRight:30},userFirstChatBubbleInGroup:{borderTopRightRadius:0},recipientFirstChatBubbleInGroup:{borderTopLeftRadius:0},userLastChatBubbleInGroup:{borderTopRightRadius:0},recipientLastChatBubbleInGroup:{borderTopLeftRadius:0},userCenterChatBubbleInGroup:{borderTopRightRadius:0,borderBottomRightRadius:0},recipientCenterChatBubbleInGroup:{borderBottomLeftRadius:0,borderTopLeftRadius:0},createdOn:{position:"absolute",right:14,bottom:2,fontSize:9,opacity:.5},isSend:{position:"absolute",right:2,bottom:1,fontSize:9,opacity:.5},lastSeenByContainer:{position:"absolute",right:-30,top:0,width:20,height:"100%"},loadingSpinnerColor:"currentColor",isSendIconColor:"currentColor"},j={chatBubbleWrapper:"react-bell-chat__chat-bubble__wrapper",isSend:"react-bell-chat__chat-bubble__is-send",chatBubble:"react-bell-chat__chat-bubble",userChatBubble:"react-bell-chat__chat-bubble--user",recipientChatBubble:"react-bell-chat__chat-bubble--recipient",text:"react-bell-chat__chat-bubble__text",userText:"react-bell-chat__chat-bubble__text--user",recipientText:"react-bell-chat__chat-bubble__text--recipient",createdOn:"react-bell-chat__chat-bubble__created-on",userCreatedOn:"react-bell-chat__chat-bubble__created-on--user",recipientCreatedOn:"react-bell-chat__chat-bubble__created-on--recipient",lastSeenByContainer:"react-bell-chat__chat-bubble__last-seen-by__container"},N={formatTime:function(e){return null==e?void 0:e.toLocaleTimeString([],{hour:"numeric",minute:"numeric",hour12:!0})}},P=function(){return(P=Object.assign||function(e){for(var t,r=1,s=arguments.length;ro[0]&&t[1]{"use strict";e.exports=t}},s={};function ae(e){var t=s[e];if(void 0!==t)return t.exports;t=s[e]={exports:{}};return r[e](t,t.exports,ae),t.exports}ae.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return ae.d(t,{a:t}),t},ae.d=(e,t)=>{for(var r in t)ae.o(t,r)&&!ae.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},ae.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),ae.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var oe={};return(()=>{"use strict";ae.r(oe),ae.d(oe,{Avatar:()=>r,BubbleGroup:()=>A,ChatBubble:()=>e,ChatFeed:()=>se,ChatMessagesContainer:()=>M,ChatScrollArea:()=>m,DateRow:()=>W,IsTyping:()=>h,LastSeenAvatar:()=>B,LoadingMessages:()=>z,SystemChatBubble:()=>K,defaultAvatarClasses:()=>o,defaultAvatarStyles:()=>a,defaultBubbleGroupClasses:()=>w,defaultBubbleGroupStyles:()=>_,defaultChatBubbleClasses:()=>j,defaultChatBubbleConfig:()=>N,defaultChatBubbleStyles:()=>E,defaultChatFeedClasses:()=>X,defaultChatFeedStyles:()=>Q,defaultChatMessagesContainerClasses:()=>x,defaultChatMessagesContainerStyles:()=>T,defaultChatScrollAreaClasses:()=>b,defaultChatScrollAreaStyles:()=>d,defaultDateRowClasses:()=>L,defaultDateRowStyles:()=>k,defaultIsTypingClasses:()=>n,defaultIsTypingStyles:()=>u,defaultLastSeenAvatarClasses:()=>y,defaultLastSeenAvatarStyles:()=>C,defaultLoadingMessagesClasses:()=>D,defaultLoadingMessagesStyle:()=>F,defaultSystemChatBubbleClasses:()=>V,defaultSystemChatBubbleStyles:()=>Y});var I=ae(297),i=ae(184),G=ae.n(i),E={chatBubbleWrapper:{position:"relative",marginBottom:2,display:"flex"},chatBubble:{position:"relative",borderTopRightRadius:7,borderTopLeftRadius:7,borderBottomRightRadius:7,borderBottomLeftRadius:7,marginRight:"auto",marginLeft:"auto",maxWidth:"80%",paddingTop:8,paddingBottom:14,paddingLeft:14,paddingRight:14},userChatBubbleOrientationNormal:{marginRight:0},recipientChatBubbleOrientationNormal:{marginLeft:0},recipientChatBubble:{},text:{fontSize:16,fontWeight:300,margin:0,marginRight:30,overflowWrap:"break-word",wordWrap:"break-word",hyphens:"auto"},userFirstChatBubbleInGroup:{borderTopRightRadius:0},recipientFirstChatBubbleInGroup:{borderTopLeftRadius:0},userLastChatBubbleInGroup:{borderTopRightRadius:0},recipientLastChatBubbleInGroup:{borderTopLeftRadius:0},userCenterChatBubbleInGroup:{borderTopRightRadius:0,borderBottomRightRadius:0},recipientCenterChatBubbleInGroup:{borderBottomLeftRadius:0,borderTopLeftRadius:0},createdOn:{position:"absolute",right:14,bottom:2,fontSize:9,opacity:.5},isSend:{position:"absolute",right:2,bottom:1,fontSize:9,opacity:.5},lastSeenByContainer:{position:"absolute",right:-30,top:0,width:20,height:"100%"},loadingSpinnerColor:"currentColor",isSendIconColor:"currentColor"},j={chatBubbleWrapper:"react-bell-chat__chat-bubble__wrapper",isSend:"react-bell-chat__chat-bubble__is-send",chatBubble:"react-bell-chat__chat-bubble",userChatBubble:"react-bell-chat__chat-bubble--user",recipientChatBubble:"react-bell-chat__chat-bubble--recipient",text:"react-bell-chat__chat-bubble__text",userText:"react-bell-chat__chat-bubble__text--user",recipientText:"react-bell-chat__chat-bubble__text--recipient",createdOn:"react-bell-chat__chat-bubble__created-on",userCreatedOn:"react-bell-chat__chat-bubble__created-on--user",recipientCreatedOn:"react-bell-chat__chat-bubble__created-on--recipient",lastSeenByContainer:"react-bell-chat__chat-bubble__last-seen-by__container"},N={formatTime:function(e){return null==e?void 0:e.toLocaleTimeString([],{hour:"numeric",minute:"numeric",hour12:!0})}},P=function(){return(P=Object.assign||function(e){for(var t,r=1,s=arguments.length;ro[0]&&t[1] {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import * as React from 'react';\n\nexport interface ChatBubbleStyles {\n chatBubbleWrapper?: React.CSSProperties;\n chatBubble?: React.CSSProperties;\n systemChatBubbleContainer?: React.CSSProperties;\n systemChatBubbleText?: React.CSSProperties;\n userChatBubbleOrientationNormal?: React.CSSProperties;\n recipientChatBubbleOrientationNormal?: React.CSSProperties;\n text?: React.CSSProperties;\n userText?: React.CSSProperties;\n recipientText?: React.CSSProperties;\n userChatBubble?: React.CSSProperties;\n recipientChatBubble?: React.CSSProperties;\n firstChatBubbleInGroup?: React.CSSProperties;\n userFirstChatBubbleInGroup?: React.CSSProperties;\n recipientFirstChatBubbleInGroup?: React.CSSProperties;\n lastChatBubbleInGroup?: React.CSSProperties;\n userLastChatBubbleInGroup?: React.CSSProperties;\n recipientLastChatBubbleInGroup?: React.CSSProperties;\n centerChatBubbleInGroup?: React.CSSProperties;\n userCenterChatBubbleInGroup?: React.CSSProperties;\n recipientCenterChatBubbleInGroup?: React.CSSProperties;\n createdOn?: React.CSSProperties;\n recipientCreatedOn?: React.CSSProperties;\n userCreatedOn?: React.CSSProperties;\n isSend?: React.CSSProperties;\n\n lastSeenByContainer?: React.CSSProperties;\n loadingSpinnerColor?: string;\n isSendIconColor?: string;\n}\n\nconst styles: ChatBubbleStyles = {\n chatBubbleWrapper: {\n position: 'relative',\n marginBottom: 2,\n display: 'flex',\n } as React.CSSProperties,\n chatBubble: {\n position: 'relative',\n borderTopRightRadius: 7,\n borderTopLeftRadius: 7,\n borderBottomRightRadius: 7,\n borderBottomLeftRadius: 7,\n marginRight: 'auto',\n marginLeft: 'auto',\n maxWidth: '80%',\n paddingTop: 8,\n paddingBottom: 14,\n paddingLeft: 14,\n paddingRight: 14,\n } as React.CSSProperties,\n userChatBubbleOrientationNormal: {\n marginRight: 0,\n } as React.CSSProperties,\n recipientChatBubbleOrientationNormal: {\n marginLeft: 0,\n } as React.CSSProperties,\n recipientChatBubble: {} as React.CSSProperties,\n text: {\n fontSize: 16,\n fontWeight: 300,\n margin: 0,\n marginRight: 30,\n } as React.CSSProperties,\n userFirstChatBubbleInGroup: {\n borderTopRightRadius: 0,\n } as React.CSSProperties,\n recipientFirstChatBubbleInGroup: {\n borderTopLeftRadius: 0,\n } as React.CSSProperties,\n userLastChatBubbleInGroup: {\n borderTopRightRadius: 0,\n } as React.CSSProperties,\n recipientLastChatBubbleInGroup: {\n borderTopLeftRadius: 0,\n } as React.CSSProperties,\n userCenterChatBubbleInGroup: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n } as React.CSSProperties,\n recipientCenterChatBubbleInGroup: {\n borderBottomLeftRadius: 0,\n borderTopLeftRadius: 0,\n } as React.CSSProperties,\n createdOn: {\n position: 'absolute',\n right: 14,\n bottom: 2,\n fontSize: 9,\n opacity: 0.5,\n } as React.CSSProperties,\n isSend: {\n position: 'absolute',\n right: 2,\n bottom: 1,\n fontSize: 9,\n opacity: 0.5,\n } as React.CSSProperties,\n lastSeenByContainer: {\n position: 'absolute',\n right: -30,\n top: 0,\n width: 20,\n height: '100%',\n } as React.CSSProperties,\n loadingSpinnerColor: 'currentColor',\n isSendIconColor: 'currentColor',\n};\n\nexport { styles as defaultChatBubbleStyles };\n","export interface ChatBubbleClasses {\r\n chatBubbleWrapper?: string;\r\n chatBubble?: string;\r\n systemChatBubbleContainer?: string;\r\n systemChatBubbleText?: string;\r\n userChatBubbleOrientationNormal?: string;\r\n recipientChatBubbleOrientationNormal?: string;\r\n text?: string;\r\n userText?: string;\r\n recipientText?: string;\r\n userChatBubble?: string;\r\n recipientChatBubble?: string;\r\n firstChatBubbleInGroup?: string;\r\n userFirstChatBubbleInGroup?: string;\r\n recipientFirstChatBubbleInGroup?: string;\r\n lastChatBubbleInGroup?: string;\r\n userLastChatBubbleInGroup?: string;\r\n recipientLastChatBubbleInGroup?: string;\r\n centerChatBubbleInGroup?: string;\r\n userCenterChatBubbleInGroup?: string;\r\n recipientCenterChatBubbleInGroup?: string;\r\n createdOn?: string;\r\n recipientCreatedOn?: string;\r\n userCreatedOn?: string;\r\n isSend?: string;\r\n\r\n lastSeenByContainer?: string;\r\n}\r\n\r\nconst classes: ChatBubbleClasses = {\r\n chatBubbleWrapper: 'react-bell-chat__chat-bubble__wrapper',\r\n\r\n isSend: 'react-bell-chat__chat-bubble__is-send',\r\n\r\n chatBubble: 'react-bell-chat__chat-bubble',\r\n userChatBubble: 'react-bell-chat__chat-bubble--user',\r\n recipientChatBubble: 'react-bell-chat__chat-bubble--recipient',\r\n\r\n text: 'react-bell-chat__chat-bubble__text',\r\n userText: 'react-bell-chat__chat-bubble__text--user',\r\n recipientText: 'react-bell-chat__chat-bubble__text--recipient',\r\n\r\n createdOn: 'react-bell-chat__chat-bubble__created-on',\r\n userCreatedOn: 'react-bell-chat__chat-bubble__created-on--user',\r\n recipientCreatedOn: 'react-bell-chat__chat-bubble__created-on--recipient',\r\n\r\n lastSeenByContainer: 'react-bell-chat__chat-bubble__last-seen-by__container',\r\n};\r\n\r\nexport { classes as defaultChatBubbleClasses };\r\n","export interface ChatBubbleConfig {\r\n formatTime?: (date: Date) => string;\r\n}\r\n\r\nconst config: ChatBubbleConfig = {\r\n formatTime: (date) =>\r\n date?.toLocaleTimeString([], {\r\n hour: 'numeric',\r\n minute: 'numeric',\r\n hour12: true,\r\n }),\r\n};\r\n\r\nexport { config as defaultChatBubbleConfig };\r\n","import * as React from 'react';\nimport { Message } from '../Message';\nimport { Author } from '../Author';\nimport {\n LastSeenAvatarProps,\n LastSeenAvatarStyles,\n LastSeenAvatarClasses,\n} from './../LastSeenAvatar';\nimport classnames from 'classnames';\nimport { ChatBubbleStyles, defaultChatBubbleStyles } from './styles';\nimport { ChatBubbleClasses, defaultChatBubbleClasses } from './classes';\nimport { ComponentType } from '../utils/componentType';\nimport { ChatBubbleConfig, defaultChatBubbleConfig } from './config';\n\nexport * from './styles';\nexport * from './classes';\nexport * from './config';\n\nexport interface MessageRenderProps {\n message: Message;\n style?: React.CSSProperties;\n className?: string;\n}\n\nexport interface ChatBubbleProps {\n message: Message;\n author?: Author;\n\n config?: ChatBubbleConfig;\n\n styles?: ChatBubbleStyles;\n lastSeenAvatarStyles?: LastSeenAvatarStyles;\n\n classes?: ChatBubbleClasses;\n lastSeenAvatarClasses?: LastSeenAvatarClasses;\n\n bubblesCentered?: boolean;\n yourAuthorId: number;\n isFirstInGroup?: boolean;\n isLastInGroup?: boolean;\n isCenterInGroup?: boolean;\n lastSeenByAuthors?: Author[];\n showRecipientLastSeenMessage?: boolean;\n CustomLastSeenAvatar?: ComponentType>;\n CustomMessageRender?: ComponentType>;\n}\n\nexport function ChatBubble(props: ChatBubbleProps) {\n if (!props.message) {\n return null;\n }\n\n const {\n lastSeenAvatarStyles,\n yourAuthorId,\n lastSeenAvatarClasses,\n styles,\n classes,\n config,\n } = props;\n\n const finalConfig = {\n ...defaultChatBubbleConfig,\n ...config,\n };\n\n const {\n userChatBubble,\n chatBubble,\n text,\n userText,\n recipientText,\n recipientChatBubble,\n firstChatBubbleInGroup,\n userFirstChatBubbleInGroup,\n recipientFirstChatBubbleInGroup,\n centerChatBubbleInGroup,\n userCenterChatBubbleInGroup,\n recipientCenterChatBubbleInGroup,\n lastChatBubbleInGroup,\n userLastChatBubbleInGroup,\n recipientLastChatBubbleInGroup,\n userChatBubbleOrientationNormal,\n recipientChatBubbleOrientationNormal,\n chatBubbleWrapper,\n createdOn,\n userCreatedOn,\n recipientCreatedOn,\n isSendIconColor,\n loadingSpinnerColor,\n lastSeenByContainer,\n } = styles ?? {};\n const youAreAuthor = props.message.authorId === yourAuthorId;\n\n // message.id 0 is reserved for blue\n const finalChatBubbleStyles: React.CSSProperties = {\n ...defaultChatBubbleStyles.chatBubble,\n ...chatBubble,\n ...(youAreAuthor\n ? defaultChatBubbleStyles.userChatBubble\n : defaultChatBubbleStyles.recipientChatBubble),\n ...(youAreAuthor ? userChatBubble : recipientChatBubble),\n ...(youAreAuthor\n ? defaultChatBubbleStyles.userChatBubbleOrientationNormal\n : defaultChatBubbleStyles.recipientChatBubbleOrientationNormal),\n ...(youAreAuthor\n ? userChatBubbleOrientationNormal\n : recipientChatBubbleOrientationNormal),\n ...(props.isFirstInGroup && defaultChatBubbleStyles.firstChatBubbleInGroup),\n ...(props.isFirstInGroup &&\n (youAreAuthor\n ? defaultChatBubbleStyles.userFirstChatBubbleInGroup\n : defaultChatBubbleStyles.recipientFirstChatBubbleInGroup)),\n ...(props.isCenterInGroup &&\n defaultChatBubbleStyles.centerChatBubbleInGroup),\n ...(props.isCenterInGroup &&\n (youAreAuthor\n ? defaultChatBubbleStyles.userCenterChatBubbleInGroup\n : defaultChatBubbleStyles.recipientCenterChatBubbleInGroup)),\n ...(props.isLastInGroup && defaultChatBubbleStyles.lastChatBubbleInGroup),\n ...(props.isLastInGroup &&\n (youAreAuthor\n ? defaultChatBubbleStyles.userLastChatBubbleInGroup\n : defaultChatBubbleStyles.recipientLastChatBubbleInGroup)),\n ...(props.isFirstInGroup && firstChatBubbleInGroup),\n ...(props.isFirstInGroup &&\n (youAreAuthor\n ? userFirstChatBubbleInGroup\n : recipientFirstChatBubbleInGroup)),\n ...(props.isCenterInGroup && centerChatBubbleInGroup),\n ...(props.isCenterInGroup &&\n (youAreAuthor\n ? userCenterChatBubbleInGroup\n : recipientCenterChatBubbleInGroup)),\n ...(props.isLastInGroup && lastChatBubbleInGroup),\n ...(props.isLastInGroup &&\n (youAreAuthor\n ? userLastChatBubbleInGroup\n : recipientLastChatBubbleInGroup)),\n };\n\n const messageStyle = {\n ...defaultChatBubbleStyles.text,\n ...text,\n ...(youAreAuthor ? userText : recipientText),\n };\n const messageClassName = classnames(\n defaultChatBubbleClasses.text,\n classes?.text,\n youAreAuthor\n ? defaultChatBubbleClasses.userText\n : defaultChatBubbleClasses.recipientText,\n youAreAuthor ? classes?.userText : classes?.recipientText\n );\n\n const [\n isMouseOverLastSeenContainer,\n setIsMouseOverLastSeenContainer,\n ] = React.useState(false);\n\n const onMouseEnterLastSeenContainer = React.useCallback(\n () => setIsMouseOverLastSeenContainer(true),\n []\n );\n const onMouseLeaveLastSeenContainer = React.useCallback(\n () => setIsMouseOverLastSeenContainer(false),\n []\n );\n\n return (\n \n \n {props.CustomMessageRender ? (\n \n ) : (\n \n {props.message.message}\n \n )}\n {props.message.createdOn && (\n \n {finalConfig.formatTime(props.message.createdOn)}\n \n )}\n {props.message.isSend !== undefined && youAreAuthor && (\n \n {props.message.isSend ? (\n \n \n \n ) : (\n \n \n \n \n \n )}\n \n )}\n \n {props.showRecipientLastSeenMessage &&\n props.lastSeenByAuthors &&\n props.lastSeenByAuthors.length > 0 &&\n props.CustomLastSeenAvatar && (\n a.name)\n .join(', ')\n .replace(/,(?!.*,)/gim, ' and')\n }*/\n >\n {props.lastSeenByAuthors.map((a, i) => (\n \n ))}\n \n )}\n \n );\n}\n","export interface AvatarStyles {\r\n container?: React.CSSProperties;\r\n text?: React.CSSProperties;\r\n}\r\n\r\nconst styles = {\r\n container: {\r\n position: 'absolute',\r\n left: -50,\r\n top: 0,\r\n width: 40,\r\n height: 40,\r\n lineHeight: '40px',\r\n fontWeight: 400,\r\n borderTopLeftRadius: 20,\r\n borderBottomLeftRadius: 20,\r\n borderBottomRightRadius: 20,\r\n textAlign: 'center',\r\n borderTopRightRadius: 5,\r\n } as React.CSSProperties,\r\n text: {\r\n pointerEvents: 'none',\r\n } as React.CSSProperties,\r\n};\r\n\r\nexport { styles as defaultAvatarStyles };\r\n","export interface AvatarClasses {\r\n container?: string;\r\n text?: string;\r\n}\r\n\r\nconst classes: AvatarClasses = {\r\n container: 'react-bell-chat__avatar',\r\n text: 'react-bell-chat__avatar__text',\r\n};\r\n\r\nexport { classes as defaultAvatarClasses };\r\n","import * as React from 'react';\r\n\r\nexport const typedMemo: (c: T) => T = React.memo;\r\n","import * as React from 'react';\nimport { Author } from '../Author';\nimport classnames from 'classnames';\nimport { AvatarStyles, defaultAvatarStyles } from './styles';\nimport { AvatarClasses, defaultAvatarClasses } from './classes';\nimport { typedMemo } from '../utils/typedMemo';\n\nexport * from './classes';\nexport * from './styles';\n\nexport interface AvatarProps {\n author: Author;\n styles?: AvatarStyles;\n classes?: AvatarClasses;\n}\n\nfunction Avatar(props: AvatarProps) {\n const { author, classes, styles } = props;\n const style = {\n ...defaultAvatarStyles.container,\n ...styles?.container,\n ...(author?.bgImageUrl\n ? ({\n backgroundImage: `url(${author?.bgImageUrl})`,\n backgroundSize: 'cover',\n } as React.CSSProperties)\n : {}),\n };\n return (\n author && (\n \n \n {author.bgImageUrl\n ? null\n : author.avatarName\n ? author.avatarName\n : author.name\n .split(' ')\n .map((part) => part[0])\n .join('')\n .toUpperCase()\n .substr(0, 3)}\n \n \n )\n );\n}\nconst Memoized = typedMemo(Avatar);\nexport { Memoized as Avatar };\n","export interface IsTypingClasses {\r\n container?: string;\r\n}\r\n\r\nconst classes: IsTypingClasses = {\r\n container: 'react-bell-chat__is-typing__container',\r\n};\r\n\r\nexport { classes as defaultIsTypingClasses };\r\n","export interface IsTypingStyles {\r\n container?: React.CSSProperties;\r\n}\r\n\r\nconst styles: IsTypingStyles = {\r\n container: {\r\n position: 'absolute',\r\n bottom: 2,\r\n left: 0,\r\n right: 0,\r\n color: 'rgb(204, 204, 204)',\r\n textAlign: 'center',\r\n } as React.CSSProperties,\r\n};\r\n\r\nexport { styles as defaultIsTypingStyles };\r\n","import * as React from 'react';\nimport { Author } from '../Author';\nimport classnames from 'classnames';\nimport { IsTypingClasses, defaultIsTypingClasses } from './classes';\nimport { IsTypingStyles, defaultIsTypingStyles } from './styles';\nimport { typedMemo } from '../utils/typedMemo';\nexport * from './classes';\nexport * from './styles';\n\nexport interface IsTypingProps {\n typingAuthors: Author[];\n styles?: IsTypingStyles;\n classes?: IsTypingClasses;\n}\n\nfunction IsTyping(props: IsTypingProps) {\n let { styles, classes } = props;\n\n const style = React.useMemo(\n () => ({ ...defaultIsTypingStyles.container, ...styles?.container }),\n [styles?.container]\n );\n\n return (\n props.typingAuthors &&\n props.typingAuthors.length > 0 && (\n \n {props.typingAuthors\n .map((a) => a.name)\n .join(', ')\n .replace(/,(?!.*,)/gim, ' and') +\n (props.typingAuthors.length === 1 ? ' is ' : ' are ') +\n 'typing'}\n \n )\n );\n}\n\nconst Memoized = typedMemo(IsTyping);\n\nexport { Memoized as IsTyping };\n","import * as React from 'react';\nimport classnames from 'classnames';\nimport { ChatScrollAreaStyles, defaultChatScrollAreaStyles } from './styles';\nimport { ChatScrollAreaClasses, defaultChatScrollAreaClasses } from './classes';\nexport * from './classes';\nexport * from './styles';\n\nexport interface ChatScrollAreaProps {\n maxHeight?: string | number;\n minHeight?: string | number;\n children?: JSX.Element | JSX.Element[];\n styles?: ChatScrollAreaStyles;\n apiRef?: (api: ChatScrollAreaApi) => void;\n loadOldMessagesThreshold: number;\n onLoadOldMessages: () => Promise;\n\n classes?: ChatScrollAreaClasses;\n}\n\nexport interface ChatScrollAreaApi {\n scrollToBottom: (behavior?: ScrollBehavior) => void;\n scrollTo: (top: number) => void;\n scrollTop: () => number;\n scrollHeight: () => number;\n clientHeight: () => number;\n scrolledToBottom: () => boolean;\n scrolledToLoadThreshold: () => boolean; // Check if we are scrolled to threshold where we need to load messages\n}\n\nexport class ChatScrollArea extends React.PureComponent {\n scrollContainer: HTMLDivElement;\n constructor(props: ChatScrollAreaProps) {\n super(props);\n this.containerRef = this.containerRef.bind(this);\n this.onScroll = this.onScroll.bind(this);\n }\n\n public render() {\n const { styles, classes } = this.props;\n return (\n \n {this.props.children}\n \n );\n }\n\n private onScroll() {\n this.scrollContainer &&\n this.scrollContainer.scrollTop <= this.props.loadOldMessagesThreshold &&\n this.props.onLoadOldMessages();\n }\n\n private containerRef(scrollContainer: HTMLDivElement) {\n this.scrollContainer = scrollContainer;\n this.props.apiRef &&\n this.props.apiRef({\n scrollToBottom: (behavior = 'auto') =>\n scrollContainer &&\n (scrollContainer.scrollTo\n ? scrollContainer.scrollTo({\n top: scrollContainer.scrollHeight,\n behavior,\n })\n : (scrollContainer.scrollTop = scrollContainer.scrollHeight)),\n scrollTo: (top) =>\n scrollContainer &&\n (scrollContainer.scrollTo\n ? scrollContainer.scrollTo({\n top: top,\n })\n : (scrollContainer.scrollTop = top)),\n scrolledToBottom: () =>\n this.scrollContainer.clientHeight + this.scrollContainer.scrollTop ===\n this.scrollContainer.scrollHeight,\n scrolledToLoadThreshold: () =>\n this.scrollContainer &&\n this.scrollContainer.scrollTop <= this.props.loadOldMessagesThreshold,\n scrollTop: () => this.scrollContainer && this.scrollContainer.scrollTop,\n scrollHeight: () =>\n this.scrollContainer && this.scrollContainer.scrollHeight,\n clientHeight: () =>\n this.scrollContainer && this.scrollContainer.clientHeight,\n });\n }\n}\n","export interface ChatScrollAreaStyles {\r\n container?: React.CSSProperties;\r\n}\r\n\r\nconst styles: ChatScrollAreaStyles = {\r\n container: {\r\n overflow: 'auto',\r\n padding: '0 10px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: '100%',\r\n // flexDirection: 'column-reverse'\r\n },\r\n};\r\n\r\nexport { styles as defaultChatScrollAreaStyles };\r\n","export interface ChatScrollAreaClasses {\r\n container?: string;\r\n}\r\n\r\nconst classes: ChatScrollAreaClasses = {\r\n container: 'react-bell-chat__chat-scroll-area',\r\n};\r\n\r\nexport { classes as defaultChatScrollAreaClasses };\r\n","export interface LastSeenAvatarClasses {\r\n container?: string;\r\n text?: string;\r\n}\r\n\r\nconst classes: LastSeenAvatarClasses = {\r\n container: 'react-bell-chat__last-seen-avatar',\r\n text: 'react-bell-chat__last-seen-avatar__text',\r\n};\r\n\r\nexport { classes as defaultLastSeenAvatarClasses };\r\n","export interface LastSeenAvatarStyles {\r\n container?: React.CSSProperties;\r\n containerMouseOver?: React.CSSProperties;\r\n text?: React.CSSProperties;\r\n}\r\n\r\nconst styles = {\r\n container: {\r\n width: 24,\r\n height: 24,\r\n lineHeight: '24px',\r\n fontWeight: 400,\r\n fontSize: 10,\r\n borderTopLeftRadius: 12,\r\n borderTopRightRadius: 12,\r\n borderBottomLeftRadius: 12,\r\n borderBottomRightRadius: 12,\r\n textAlign: 'center',\r\n transition: '0.3s all ease-in-out',\r\n display: 'block',\r\n position: 'relative',\r\n } as React.CSSProperties,\r\n text: {\r\n pointerEvents: 'none',\r\n } as React.CSSProperties,\r\n};\r\n\r\nexport { styles as defaultLastSeenAvatarStyles };\r\n","import * as React from 'react';\nimport { Author } from '../Author';\nimport classnames from 'classnames';\nimport { LastSeenAvatarClasses, defaultLastSeenAvatarClasses } from './classes';\nimport { LastSeenAvatarStyles, defaultLastSeenAvatarStyles } from './styles';\nimport { typedMemo } from '../utils/typedMemo';\nexport * from './classes';\nexport * from './styles';\n\nexport interface LastSeenAvatarProps {\n author: Author;\n index?: number;\n mouseOver?: boolean;\n styles?: LastSeenAvatarStyles;\n classes?: LastSeenAvatarClasses;\n}\n\nfunction LastSeenAvatar(props: LastSeenAvatarProps) {\n let { styles, classes, index, mouseOver, author } = props;\n\n const style = React.useMemo(\n () => ({\n ...defaultLastSeenAvatarStyles.container,\n ...styles?.container,\n ...(author?.bgImageUrl\n ? ({\n backgroundImage: `url(${author?.bgImageUrl})`,\n backgroundSize: 'cover',\n } as React.CSSProperties)\n : {}),\n ...(index > 0 && !mouseOver ? { marginTop: -12 } : { marginTop: -4 }),\n }),\n [styles?.container, index, mouseOver, author?.bgImageUrl]\n );\n\n const textStyle = React.useMemo(\n () => ({\n ...defaultLastSeenAvatarStyles.text,\n ...styles?.text,\n }),\n [styles?.text]\n );\n\n return (\n author && (\n \n \n {author.bgImageUrl\n ? null\n : author.lastSeenAvatarName\n ? author.lastSeenAvatarName\n : author.name[0].toUpperCase()}\n \n \n )\n );\n}\n\nconst Memoized = typedMemo(LastSeenAvatar);\n\nexport { Memoized as LastSeenAvatar };\n","export interface BubbleGroupClasses {\r\n chatBubbleWrapper?: string;\r\n}\r\n\r\nconst classes: BubbleGroupClasses = {\r\n chatBubbleWrapper: 'react-bell-chat__bubble-group',\r\n};\r\n\r\nexport { classes as defaultBubbleGroupClasses };\r\n","import * as React from 'react';\n\nexport interface BubbleGroupStyles {\n bubbleGroupWrapper?: React.CSSProperties;\n}\n\nconst styles: BubbleGroupStyles = {\n bubbleGroupWrapper: {\n marginTop: 10,\n marginBottom: 10,\n position: 'relative',\n },\n};\n\nexport { styles as defaultBubbleGroupStyles };\n","import * as React from 'react';\nimport {\n ChatBubbleProps,\n ChatBubbleStyles,\n MessageRenderProps,\n} from '../ChatBubble';\nimport { Message } from '../';\nimport { Author } from '../Author';\nimport { AvatarProps, AvatarClasses } from '../Avatar';\nimport {\n LastSeenAvatarProps,\n LastSeenAvatarStyles,\n LastSeenAvatarClasses,\n} from '../LastSeenAvatar';\nimport { AvatarStyles } from './../Avatar';\nimport classnames from 'classnames';\nimport { ChatBubbleClasses } from './../ChatBubble';\nimport { BubbleGroupClasses, defaultBubbleGroupClasses } from './classes';\nimport { BubbleGroupStyles, defaultBubbleGroupStyles } from './styles';\nimport { ComponentType } from '../utils/componentType';\nimport { typedMemo } from '../utils/typedMemo';\n\nexport * from './styles';\nexport * from './classes';\n\nexport interface BubbleGroupProps {\n yourAuthorId?: number;\n messages: Message[];\n author: Author;\n authors?: Author[];\n showRecipientAvatar?: boolean;\n bubblesCentered?: boolean;\n\n classes?: BubbleGroupClasses;\n chatBubbleClasses?: ChatBubbleClasses;\n avatarClasses?: AvatarClasses;\n lastSeenAvatarClasses?: LastSeenAvatarClasses;\n\n styles?: BubbleGroupStyles;\n chatBubbleStyles?: ChatBubbleStyles;\n avatarStyles?: AvatarStyles;\n lastSeenAvatarStyles?: LastSeenAvatarStyles;\n\n CustomAvatar?: ComponentType>;\n CustomMessageRender?: ComponentType>;\n CustomLastSeenAvatar?: ComponentType>;\n CustomChatBubble?: ComponentType>;\n CustomSystemChatBubble?: ComponentType>;\n\n showRecipientLastSeenMessage?: boolean;\n}\n\nfunction BubbleGroup(props: BubbleGroupProps) {\n const {\n messages,\n author,\n\n CustomAvatar,\n\n styles,\n\n bubblesCentered,\n\n chatBubbleStyles,\n lastSeenAvatarStyles,\n avatarStyles,\n\n classes,\n chatBubbleClasses,\n lastSeenAvatarClasses,\n avatarClasses,\n\n showRecipientAvatar,\n CustomChatBubble,\n CustomSystemChatBubble,\n showRecipientLastSeenMessage,\n CustomLastSeenAvatar,\n CustomMessageRender,\n } = props;\n\n const messageNodes = messages.map((message, i) => {\n const _props: ChatBubbleProps = {\n yourAuthorId: props.yourAuthorId,\n author,\n message,\n bubblesCentered,\n\n styles: chatBubbleStyles,\n lastSeenAvatarStyles,\n\n classes: chatBubbleClasses,\n lastSeenAvatarClasses,\n\n isFirstInGroup: i === 0,\n isLastInGroup: i === messages.length - 1 && messages.length > 1,\n isCenterInGroup: i < messages.length - 1 && messages.length > 1,\n lastSeenByAuthors:\n props.authors &&\n props.authors.filter(\n (a) =>\n a.lastSeenMessageId !== undefined &&\n a.lastSeenMessageId === message.id\n ),\n showRecipientLastSeenMessage,\n CustomLastSeenAvatar,\n CustomMessageRender,\n };\n return message.authorId !== undefined ? (\n \n ) : (\n \n );\n });\n\n const youAreAuthor = author && props.yourAuthorId === author.id;\n return (\n \n {!youAreAuthor && showRecipientAvatar && author && CustomAvatar && (\n \n )}\n {messageNodes}\n \n );\n}\n\nconst Memoized = typedMemo(BubbleGroup);\nexport { Memoized as BubbleGroup };\n","export interface ChatMessagesContainerClasses {\r\n root?: string;\r\n showRecipientAvatar?: string;\r\n showRecipientLastSeenMessage?: string;\r\n showIsTyping?: string;\r\n}\r\n\r\nconst classes: ChatMessagesContainerClasses = {\r\n root: 'react-bell-chat__chat-messages',\r\n showRecipientAvatar: 'react-bell-chat__chat-messages--showRecipientAvatar',\r\n showRecipientLastSeenMessage:\r\n 'react-bell-chat__chat-messages--showRecipientLastSeenMessage',\r\n showIsTyping: 'react-bell-chat__chat-messages--showIsTyping',\r\n};\r\n\r\nexport { classes as defaultChatMessagesContainerClasses };\r\n","export interface ChatMessagesContainerStyles {\r\n root?: React.CSSProperties;\r\n showRecipientAvatar?: React.CSSProperties;\r\n showRecipientLastSeenMessage?: React.CSSProperties;\r\n showIsTyping?: React.CSSProperties;\r\n}\r\n\r\nconst styles: ChatMessagesContainerStyles = {\r\n root: {\r\n paddingBottom: 10,\r\n paddingTop: 10,\r\n flex: 1,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'flex-end',\r\n },\r\n showRecipientAvatar: {\r\n paddingLeft: 50,\r\n },\r\n showIsTyping: {\r\n paddingBottom: 24,\r\n position: 'relative',\r\n },\r\n showRecipientLastSeenMessage: {\r\n paddingRight: 30,\r\n },\r\n};\r\n\r\nexport { styles as defaultChatMessagesContainerStyles };\r\n","import * as React from 'react';\r\nimport * as classNames from 'classnames';\r\nimport { ChatMessagesContainerClasses, defaultChatMessagesContainerClasses } from './classes';\r\nimport { ChatMessagesContainerStyles, defaultChatMessagesContainerStyles } from './styles';\r\nexport * from './classes';\r\nexport * from './styles';\r\n\r\nexport interface ChatMessagesContainerProps\r\n extends React.PropsWithChildren<{\r\n showRecipientLastSeenMessage: boolean;\r\n showRecipientAvatar: boolean;\r\n showIsTyping: boolean;\r\n classes?: ChatMessagesContainerClasses;\r\n styles?: ChatMessagesContainerStyles;\r\n }> {}\r\n\r\nexport const ChatMessagesContainer: React.FC = (\r\n props\r\n) => {\r\n const {\r\n children,\r\n classes,\r\n styles,\r\n showIsTyping,\r\n showRecipientAvatar,\r\n showRecipientLastSeenMessage,\r\n } = props;\r\n const style = React.useMemo(\r\n () => ({\r\n ...defaultChatMessagesContainerStyles?.root,\r\n ...styles?.root,\r\n ...(showRecipientAvatar && defaultChatMessagesContainerStyles?.showRecipientAvatar),\r\n ...(showRecipientAvatar && styles?.showRecipientAvatar),\r\n ...(showIsTyping && defaultChatMessagesContainerStyles?.showIsTyping),\r\n ...(showIsTyping && styles?.showIsTyping),\r\n ...(showRecipientLastSeenMessage &&\r\n defaultChatMessagesContainerStyles?.showRecipientLastSeenMessage),\r\n ...(showRecipientLastSeenMessage && styles?.showRecipientLastSeenMessage),\r\n }),\r\n [\r\n showIsTyping,\r\n showRecipientAvatar,\r\n showRecipientLastSeenMessage,\r\n styles?.root,\r\n styles?.showRecipientAvatar,\r\n styles?.showIsTyping,\r\n styles?.showRecipientLastSeenMessage,\r\n ]\r\n );\r\n const className = classNames(defaultChatMessagesContainerClasses.root, classes?.root, {\r\n [defaultChatMessagesContainerClasses?.showRecipientAvatar]: showRecipientAvatar,\r\n [classes?.showRecipientAvatar]: showRecipientAvatar,\r\n [defaultChatMessagesContainerClasses?.showIsTyping]: showIsTyping,\r\n [classes?.showIsTyping]: showIsTyping,\r\n [defaultChatMessagesContainerClasses?.showRecipientLastSeenMessage]: showRecipientLastSeenMessage,\r\n [classes?.showRecipientLastSeenMessage]: showRecipientLastSeenMessage,\r\n });\r\n\r\n return (\r\n
\r\n {children}\r\n
\r\n );\r\n};\r\n","export interface DateRowClasses {\r\n container?: string;\r\n}\r\n\r\nconst classes: DateRowClasses = {\r\n container: 'react-bell-chat__date-row',\r\n};\r\n\r\nexport { classes as defaultDateRowClasses };\r\n","export interface DateRowStyles {\r\n container?: React.CSSProperties;\r\n}\r\n\r\nconst styles: DateRowStyles = {\r\n container: {\r\n textAlign: 'center',\r\n fontSize: 12,\r\n color: 'rgba(0, 0, 0, 0.55)',\r\n },\r\n};\r\n\r\nexport { styles as defaultDateRowStyles };\r\n","import * as React from 'react';\nimport classnames from 'classnames';\nimport { DateRowClasses, defaultDateRowClasses } from './classes';\nimport { DateRowStyles, defaultDateRowStyles } from './styles';\nexport * from './classes';\nexport * from './styles';\n\nexport interface DateRowProps {\n date: Date;\n styles?: DateRowStyles;\n classes?: DateRowClasses;\n}\n\nconst DateRow: React.FC = (props) => {\n let { styles, classes } = props;\n const style = React.useMemo(\n () => ({\n ...defaultDateRowStyles.container,\n ...styles?.container,\n }),\n [styles?.container]\n );\n return (\n props.date && (\n \n {props.date.toLocaleDateString()}\n \n )\n );\n};\n\nconst Memoized = React.memo(DateRow);\n\nexport { Memoized as DateRow };\n","export interface LoadingMessagesStyle {\r\n container?: React.CSSProperties;\r\n spinnerColor?: string;\r\n}\r\n\r\nconst styles: LoadingMessagesStyle = {\r\n container: {\r\n display: 'flex',\r\n marginBottom: 10,\r\n },\r\n spinnerColor: 'currentColor',\r\n};\r\n\r\nexport { styles as defaultLoadingMessagesStyle };\r\n","export interface LoadingMessagesClasses {\r\n container?: string;\r\n}\r\n\r\nconst classes: LoadingMessagesClasses = {\r\n container: 'react-bell-chat__loading-messages',\r\n};\r\n\r\nexport { classes as defaultLoadingMessagesClasses };\r\n","import * as React from 'react';\nimport classnames from 'classnames';\nimport { LoadingMessagesStyle, defaultLoadingMessagesStyle } from './styles';\nimport {\n LoadingMessagesClasses,\n defaultLoadingMessagesClasses,\n} from './classes';\nexport * from './classes';\nexport * from './styles';\n\nexport interface LoadingMessagesProps {\n styles?: LoadingMessagesStyle;\n classes?: LoadingMessagesClasses;\n className?: string;\n isVisible: boolean;\n}\n\nconst LoadingMessages: React.FC = (props) => {\n const { styles, classes } = props;\n\n const style = React.useMemo(\n () => ({\n ...defaultLoadingMessagesStyle.container,\n ...styles?.container,\n }),\n [styles?.container]\n );\n\n const svgStyle = React.useMemo(\n () => ({\n background: 'none',\n margin: 'auto',\n fill: styles?.spinnerColor ?? defaultLoadingMessagesStyle.spinnerColor,\n opacity: props.isVisible ? 1 : 0,\n transition: '0.3s all ease-in-out',\n }),\n [styles?.spinnerColor, props.isVisible]\n );\n return (\n \n \n \n \n \n \n \n );\n};\n\nconst Memoized = React.memo(LoadingMessages);\n\nexport { Memoized as LoadingMessages };\n","import * as classNames from 'classnames';\r\nimport {\r\n ChatBubbleClasses,\r\n defaultChatBubbleClasses,\r\n} from '../ChatBubble/classes';\r\n\r\nconst classes: ChatBubbleClasses = {\r\n chatBubbleWrapper: classNames(\r\n defaultChatBubbleClasses.chatBubbleWrapper,\r\n 'react-bell-chat__chat-bubble--system'\r\n ),\r\n createdOn: 'react-bell-chat__chat-bubble--system__created-on',\r\n};\r\n\r\nexport { classes as defaultSystemChatBubbleClasses };\r\n","import { ChatBubbleStyles } from '../ChatBubble/styles';\r\n\r\nconst styles: ChatBubbleStyles = {\r\n systemChatBubbleContainer: {\r\n textAlign: 'center',\r\n fontSize: 12,\r\n color: 'rgba(0, 0, 0, 0.55)',\r\n } as React.CSSProperties,\r\n};\r\n\r\nexport { styles as defaultSystemChatBubbleStyles };\r\n","import * as React from 'react';\nimport { ChatBubbleProps, defaultChatBubbleConfig } from '../ChatBubble';\nimport classnames from 'classnames';\nimport { defaultSystemChatBubbleClasses } from './classes';\nimport { defaultSystemChatBubbleStyles } from './styles';\nexport * from './classes';\nexport * from './styles';\n\nexport interface SystemChatBubbleProps extends ChatBubbleProps {}\n\nfunction SystemChatBubble(props: SystemChatBubbleProps) {\n const { styles, classes, message, config } = props;\n\n const finalConfig = {\n ...defaultChatBubbleConfig,\n ...config,\n };\n\n const time = finalConfig.formatTime(message.createdOn);\n\n const style = React.useMemo(\n () => ({\n ...defaultSystemChatBubbleStyles.systemChatBubbleContainer,\n ...styles?.systemChatBubbleContainer,\n }),\n [styles?.systemChatBubbleContainer]\n );\n const textStyle = React.useMemo(\n () => ({\n ...defaultSystemChatBubbleStyles.systemChatBubbleText,\n ...styles?.systemChatBubbleText,\n }),\n [styles?.systemChatBubbleText]\n );\n return (\n message && (\n \n {time && (\n \n {time}:{' '}\n \n )}\n {props.message.message}\n \n )\n );\n}\n\nconst Memoized = React.memo(SystemChatBubble);\n\nexport { Memoized as SystemChatBubble };\n","import * as React from 'react';\n\nexport interface ChatFeedStyles {\n chatPanel?: React.CSSProperties;\n showRecipientAvatarChatMessages?: React.CSSProperties;\n showRecipientLastSeenMessageChatMessages?: React.CSSProperties;\n showIsTypingChatMessages?: React.CSSProperties;\n}\n\nconst styles: ChatFeedStyles = {\n chatPanel: {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n overflow: 'hidden',\n position: 'relative',\n },\n};\n\nexport { styles as defaultChatFeedStyles };\n","export interface ChatFeedClasses {\r\n chatPanel?: string;\r\n}\r\n\r\nconst classes: ChatFeedClasses = {\r\n chatPanel: 'react-bell-chat__chat-panel',\r\n};\r\n\r\nexport { classes as defaultChatFeedClasses };\r\n","// Copyright 2017 Brandon Mowat\n// Written, developed, and designed by Brandon Mowat for the purpose of helping\n// other developers make chat interfaces.\n\nimport * as React from 'react';\nimport {\n BubbleGroup as DefaultBubbleGroup,\n BubbleGroupClasses,\n BubbleGroupProps,\n BubbleGroupStyles,\n} from '../BubbleGroup';\nimport {\n ChatBubble as DefaultChatBubble,\n ChatBubbleProps,\n MessageRenderProps,\n} from '../ChatBubble';\nimport { Message } from '../Message';\nimport { Author } from '../Author';\nimport { ChatBubbleStyles, ChatBubbleClasses } from '../ChatBubble';\nimport {\n Avatar as DefaultAvatar,\n AvatarProps,\n AvatarStyles,\n AvatarClasses,\n} from '../Avatar';\nimport {\n IsTyping as DefaultIsTyping,\n IsTypingStyles,\n IsTypingClasses,\n IsTypingProps,\n} from '../IsTyping';\nimport {\n ChatScrollArea as DefaultChatScrollArea,\n ChatScrollAreaProps,\n ChatScrollAreaApi,\n ChatScrollAreaStyles,\n ChatScrollAreaClasses,\n} from '../ChatScrollArea';\nimport {\n ChatMessagesContainer as DefaultChatMessagesContainer,\n ChatMessagesContainerProps,\n ChatMessagesContainerClasses,\n ChatMessagesContainerStyles,\n} from '../ChatMessagesContainer';\nimport {\n LastSeenAvatar as DefaultLastSeenAvatar,\n LastSeenAvatarProps,\n LastSeenAvatarStyles,\n LastSeenAvatarClasses,\n} from '../LastSeenAvatar';\nimport { groupBy } from '../utils/utils';\nimport {\n DateRow as DefaultDateRow,\n DateRowProps,\n DateRowStyles,\n DateRowClasses,\n} from '../DateRow';\nimport {\n LoadingMessages as DefaultLoadingMessages,\n LoadingMessagesProps,\n LoadingMessagesStyle,\n LoadingMessagesClasses,\n} from '../LoadingMessages';\nimport { SystemChatBubble as DefaultSystemChatBubble } from '../SystemChatBubble';\nimport classnames from 'classnames';\nimport { ChatFeedStyles, defaultChatFeedStyles } from './styles';\nimport { ChatFeedClasses, defaultChatFeedClasses } from './classes';\nimport { ComponentType } from '../utils/componentType';\n\nexport * from './classes';\nexport * from './styles';\n\n// Model for ChatFeed props.\n\nexport interface ChatFeedProps {\n // Structural props\n className?: string;\n\n // Functional props\n messages: Message[];\n authors: Author[];\n yourAuthorId: number;\n hasOldMessages?: boolean;\n loadOldMessagesThreshold?: number;\n\n // Visual props\n bubblesCentered?: boolean;\n maxHeight?: string | number;\n minHeight?: string | number;\n\n // Switches\n showDateRow?: boolean;\n showRecipientAvatar?: boolean;\n showRecipientLastSeenMessage?: boolean;\n showIsTyping?: boolean;\n showLoadingMessages?: boolean;\n\n // Custom components\n CustomLoadingMessages?: ComponentType;\n CustomChatBubble?: ComponentType>;\n CustomBubbleGroup?: ComponentType>;\n CustomSystemChatBubble?: ComponentType>;\n CustomAvatar?: ComponentType>;\n CustomScrollArea?: ComponentType;\n CustomChatMessagesContainer?: ComponentType;\n CustomIsTyping?: ComponentType>;\n CustomLastSeenAvatar?: ComponentType>;\n CustomMessageRender?: ComponentType>;\n CustomDateRow?: ComponentType;\n\n // Callbacks\n onLoadOldMessages?: () => Promise;\n\n // Styles\n style?: React.CSSProperties;\n styles?: ChatFeedStyles;\n bubbleGroupStyles?: BubbleGroupStyles;\n chatBubbleStyles?: ChatBubbleStyles;\n chatScrollAreaStyles?: ChatScrollAreaStyles;\n chatMessagesContainerStyles?: ChatMessagesContainerStyles;\n avatarStyles?: AvatarStyles;\n lastSeenAvatarStyles?: LastSeenAvatarStyles;\n dateRowStyles?: DateRowStyles;\n loadingMessagesStyle?: LoadingMessagesStyle;\n isTypingStyles?: IsTypingStyles;\n chatFeedStyles?: ChatFeedStyles;\n\n // Classes\n classes?: ChatFeedClasses;\n chatBubbleClasses?: ChatBubbleClasses;\n bubbleGroupClasses?: BubbleGroupClasses;\n chatScrollAreaClasses?: ChatScrollAreaClasses;\n chatMessagesContainerClasses?: ChatMessagesContainerClasses;\n avatarClasses?: AvatarClasses;\n lastSeenAvatarClasses?: LastSeenAvatarClasses;\n dateRowClasses?: DateRowClasses;\n loadingMessagesClasses?: LoadingMessagesClasses;\n isTypingClasses?: IsTypingClasses;\n chatFeedClasses?: ChatFeedStyles;\n}\n\nexport interface ChatFeedState {\n isLoadingMessages: boolean;\n}\n\nexport interface ChatFeedApi {\n onMessageSend: () => void;\n scrollApi: ChatScrollAreaApi;\n}\nfunction DefaultMessageRenderFunc(props: MessageRenderProps) {\n return (\n props.message && (\n \n {props.message.message}\n \n )\n );\n}\n\nexport interface ChatFeedSnapshot {\n wasScrolledToBottom: boolean;\n scrollHeight: number;\n clientHeight: number;\n}\n\n// React component to render a complete chat feed\nexport class ChatFeed\n extends React.PureComponent, ChatFeedState>\n implements ChatFeedApi {\n public static defaultProps: ChatFeedProps = {\n messages: [],\n authors: [],\n CustomChatBubble: DefaultChatBubble,\n CustomBubbleGroup: DefaultBubbleGroup,\n CustomMessageRender: DefaultMessageRenderFunc,\n CustomAvatar: DefaultAvatar,\n CustomScrollArea: DefaultChatScrollArea,\n CustomIsTyping: DefaultIsTyping,\n CustomChatMessagesContainer: DefaultChatMessagesContainer,\n CustomLastSeenAvatar: DefaultLastSeenAvatar,\n CustomDateRow: DefaultDateRow,\n CustomLoadingMessages: DefaultLoadingMessages,\n yourAuthorId: 0,\n loadOldMessagesThreshold: 50,\n CustomSystemChatBubble: DefaultSystemChatBubble,\n };\n\n public scrollApi: ChatScrollAreaApi;\n\n constructor(props: ChatFeedProps) {\n super(props);\n this.renderMessages = this.renderMessages.bind(this);\n this.onLoadOldMessages = this.onLoadOldMessages.bind(this);\n this.apiRef = this.apiRef.bind(this);\n this.state = {\n isLoadingMessages: false,\n };\n }\n\n public onMessageSend() {\n this.scrollApi && this.scrollApi.scrollToBottom();\n }\n\n componentDidMount() {\n this.scrollApi && this.scrollApi.scrollToBottom();\n }\n\n getSnapshotBeforeUpdate(\n prevProps: ChatFeedProps,\n prevState: ChatFeedState\n ) {\n const wasScrolledToBottom =\n this.scrollApi && this.scrollApi.scrolledToBottom();\n const scrollHeight = this.scrollApi && this.scrollApi.scrollHeight();\n const clientHeight = this.scrollApi && this.scrollApi.clientHeight();\n\n return {\n wasScrolledToBottom,\n scrollHeight,\n clientHeight,\n };\n }\n\n componentDidUpdate(\n prevProps: ChatFeedProps,\n prevState: ChatFeedState,\n snapshot: ChatFeedSnapshot\n ) {\n if (\n (this.props.messages.length !== prevProps.messages.length ||\n this.props.authors?.some?.(\n (a) =>\n a.isTyping !==\n prevProps.authors?.find?.((_a) => a.id === _a.id)?.isTyping\n )) &&\n snapshot &&\n snapshot.wasScrolledToBottom\n ) {\n this.scrollApi.scrollToBottom();\n } else if (\n this.props.messages.length !== prevProps.messages.length &&\n snapshot &&\n prevState.isLoadingMessages\n ) {\n const scrollHeight = this.scrollApi && this.scrollApi.scrollHeight();\n this.scrollApi.scrollTo(scrollHeight - snapshot.scrollHeight);\n }\n }\n\n /**\n * Determines what type of message/messages to render.\n */\n renderMessages(messages: Message[]) {\n let { styles } = this.props;\n if (!styles) {\n styles = {};\n }\n const {\n chatBubbleStyles,\n chatBubbleClasses,\n dateRowStyles,\n dateRowClasses,\n avatarStyles,\n avatarClasses,\n lastSeenAvatarStyles,\n lastSeenAvatarClasses,\n bubbleGroupStyles,\n bubbleGroupClasses,\n CustomChatBubble,\n showRecipientAvatar,\n } = this.props;\n\n // First group by days\n const groups = groupBy(\n messages,\n (item) => item.createdOn && item.createdOn.toDateString()\n );\n let messageNodes: React.ReactNode[] = [];\n let jsxKey = 0;\n Object.keys(groups).forEach((key) => {\n let group = [];\n const messagesGroup = groups[key];\n if (\n messagesGroup[0] &&\n messagesGroup[0].createdOn &&\n this.props.showDateRow\n ) {\n messageNodes.push(\n \n );\n }\n messageNodes = messageNodes.concat(\n messagesGroup.map((message, index) => {\n group.push(message);\n // Find diff in message type or no more messages\n if (\n !messagesGroup[index + 1] ||\n messagesGroup[index + 1].authorId !== message.authorId\n ) {\n const messageGroup = group;\n const author =\n this.props.authors &&\n this.props.authors.filter((a) => a.id === message.authorId)[0];\n group = [];\n jsxKey++;\n return (\n \n );\n }\n return null;\n })\n );\n });\n return messageNodes;\n }\n\n apiRef(e: ChatScrollAreaApi) {\n if (!this.scrollApi) {\n e.scrollToBottom();\n }\n this.scrollApi = e;\n }\n\n render() {\n let { styles, classes, isTypingStyles, isTypingClasses } = this.props;\n if (!styles) {\n styles = {};\n }\n if (!classes) {\n classes = {};\n }\n const {\n loadingMessagesStyle,\n chatFeedStyles,\n chatScrollAreaStyles,\n loadingMessagesClasses,\n chatScrollAreaClasses,\n } = this.props;\n\n const typingAuthors =\n this.props.authors &&\n this.props.authors.filter(\n (a) => a.isTyping && a.id !== this.props.yourAuthorId\n );\n\n return (\n \n \n \n \n {this.renderMessages(this.props.messages)}\n {this.props.showIsTyping && (\n \n )}\n \n \n \n );\n }\n\n private async onLoadOldMessages() {\n if (!this.state.isLoadingMessages && this.props.hasOldMessages) {\n await new Promise((resolve) => {\n this.setState(\n {\n isLoadingMessages: true,\n },\n () => resolve()\n );\n });\n if (this.props.onLoadOldMessages) {\n await this.props.onLoadOldMessages();\n }\n await new Promise((resolve) => {\n this.setState(\n {\n isLoadingMessages: false,\n },\n () => {\n if (this.scrollApi.scrolledToLoadThreshold()) {\n this.scrollApi.scrollTo(this.props.loadOldMessagesThreshold + 1);\n }\n resolve();\n }\n );\n });\n }\n }\n}\n","const groupBy = (\n array: Array,\n groupingKeyFn: (item: T) => string\n): { [key: string]: Array } => {\n if (typeof groupingKeyFn !== 'function') {\n throw new Error('groupBy take a function as only parameter');\n }\n return array.reduce((result, item) => {\n const key = groupingKeyFn(item);\n if (!result[key]) {\n result[key] = [];\n }\n result[key].push(item);\n return result;\n }, {});\n};\nexport { groupBy };\n"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["..\\react-bell-chat\\webpack/universalModuleDefinition","..\\react-bell-chat\\./node_modules/classnames/index.js","..\\react-bell-chat\\external \"react\"","..\\react-bell-chat\\webpack/bootstrap","..\\react-bell-chat\\webpack/runtime/compat get default export","..\\react-bell-chat\\webpack/runtime/define property getters","..\\react-bell-chat\\webpack/runtime/hasOwnProperty shorthand","..\\react-bell-chat\\webpack/runtime/make namespace object","..\\react-bell-chat\\./src/lib/ChatBubble/styles.ts","..\\react-bell-chat\\./src/lib/ChatBubble/classes.ts","..\\react-bell-chat\\./src/lib/ChatBubble/config.ts","..\\react-bell-chat\\./src/lib/ChatBubble/index.tsx","..\\react-bell-chat\\./src/lib/Avatar/styles.ts","..\\react-bell-chat\\./src/lib/Avatar/classes.ts","..\\react-bell-chat\\./src/lib/utils/typedMemo.ts","..\\react-bell-chat\\./src/lib/Avatar/index.tsx","..\\react-bell-chat\\./src/lib/IsTyping/classes.ts","..\\react-bell-chat\\./src/lib/IsTyping/styles.ts","..\\react-bell-chat\\./src/lib/IsTyping/index.tsx","..\\react-bell-chat\\./src/lib/ChatScrollArea/index.tsx","..\\react-bell-chat\\./src/lib/ChatScrollArea/styles.ts","..\\react-bell-chat\\./src/lib/ChatScrollArea/classes.ts","..\\react-bell-chat\\./src/lib/LastSeenAvatar/classes.ts","..\\react-bell-chat\\./src/lib/LastSeenAvatar/styles.ts","..\\react-bell-chat\\./src/lib/LastSeenAvatar/index.tsx","..\\react-bell-chat\\./src/lib/BubbleGroup/classes.ts","..\\react-bell-chat\\./src/lib/BubbleGroup/styles.ts","..\\react-bell-chat\\./src/lib/BubbleGroup/index.tsx","..\\react-bell-chat\\./src/lib/ChatMessagesContainer/classes.ts","..\\react-bell-chat\\./src/lib/ChatMessagesContainer/styles.ts","..\\react-bell-chat\\./src/lib/ChatMessagesContainer/index.tsx","..\\react-bell-chat\\./src/lib/DateRow/classes.ts","..\\react-bell-chat\\./src/lib/DateRow/styles.ts","..\\react-bell-chat\\./src/lib/DateRow/index.tsx","..\\react-bell-chat\\./src/lib/LoadingMessages/styles.ts","..\\react-bell-chat\\./src/lib/LoadingMessages/classes.ts","..\\react-bell-chat\\./src/lib/LoadingMessages/index.tsx","..\\react-bell-chat\\./src/lib/SystemChatBubble/classes.ts","..\\react-bell-chat\\./src/lib/SystemChatBubble/styles.ts","..\\react-bell-chat\\./src/lib/SystemChatBubble/index.tsx","..\\react-bell-chat\\./src/lib/ChatFeed/styles.ts","..\\react-bell-chat\\./src/lib/ChatFeed/classes.ts","..\\react-bell-chat\\./src/lib/ChatFeed/index.tsx","..\\react-bell-chat\\./src/lib/utils/utils.ts"],"names":["root","factory","exports","module","require","define","amd","i","a","self","__WEBPACK_EXTERNAL_MODULE__297__","hasOwn","hasOwnProperty","classNames","classes","arguments","length","arg","argType","push","Array","isArray","inner","apply","key","call","join","default","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","n","getter","__esModule","d","definition","o","Object","defineProperty","enumerable","get","obj","prop","prototype","r","Symbol","toStringTag","value","chatBubbleWrapper","position","marginBottom","display","chatBubble","borderTopRightRadius","borderTopLeftRadius","borderBottomRightRadius","borderBottomLeftRadius","marginRight","marginLeft","maxWidth","paddingTop","paddingBottom","paddingLeft","paddingRight","userChatBubbleOrientationNormal","recipientChatBubbleOrientationNormal","recipientChatBubble","text","fontSize","fontWeight","margin","overflowWrap","wordWrap","hyphens","userFirstChatBubbleInGroup","recipientFirstChatBubbleInGroup","userLastChatBubbleInGroup","recipientLastChatBubbleInGroup","userCenterChatBubbleInGroup","recipientCenterChatBubbleInGroup","createdOn","right","bottom","opacity","isSend","lastSeenByContainer","top","width","height","loadingSpinnerColor","isSendIconColor","userChatBubble","userText","recipientText","userCreatedOn","recipientCreatedOn","formatTime","date","toLocaleTimeString","hour","minute","hour12","ChatBubble","props","message","lastSeenAvatarStyles","yourAuthorId","lastSeenAvatarClasses","styles","config","finalConfig","firstChatBubbleInGroup","centerChatBubbleInGroup","lastChatBubbleInGroup","youAreAuthor","authorId","finalChatBubbleStyles","isFirstInGroup","isCenterInGroup","isLastInGroup","messageStyle","messageClassName","isMouseOverLastSeenContainer","setIsMouseOverLastSeenContainer","onMouseEnterLastSeenContainer","onMouseLeaveLastSeenContainer","style","className","CustomMessageRender","title","toLocaleString","xmlns","viewBox","preserveAspectRatio","background","fill","stroke","transform","attributeName","type","calcMode","values","keyTimes","dur","begin","repeatCount","showRecipientLastSeenMessage","lastSeenByAuthors","CustomLastSeenAvatar","onMouseEnter","onMouseLeave","map","author","index","mouseOver","container","left","lineHeight","textAlign","pointerEvents","typedMemo","Memoized","bgImageUrl","backgroundImage","backgroundSize","name","avatarName","split","part","toUpperCase","substr","color","typingAuthors","replace","overflow","padding","flexDirection","render","this","ref","containerRef","maxHeight","minHeight","onScroll","children","scrollContainer","scrollTop","loadOldMessagesThreshold","onLoadOldMessages","apiRef","scrollToBottom","behavior","scrollTo","scrollHeight","scrolledToBottom","clientHeight","scrolledToLoadThreshold","bind","transition","marginTop","textStyle","lastSeenAvatarName","bubbleGroupWrapper","messages","CustomAvatar","bubblesCentered","chatBubbleStyles","avatarStyles","chatBubbleClasses","avatarClasses","showRecipientAvatar","CustomChatBubble","CustomSystemChatBubble","messageNodes","_props","authors","filter","lastSeenMessageId","id","showIsTyping","flex","justifyContent","ChatMessagesContainer","toLocaleDateString","weekday","year","month","day","spinnerColor","svgStyle","isVisible","systemChatBubbleContainer","time","systemChatBubbleText","chatPanel","flexGrow","DefaultMessageRenderFunc","onMessageSend","scrollApi","componentDidMount","getSnapshotBeforeUpdate","prevProps","prevState","wasScrolledToBottom","componentDidUpdate","snapshot","some","isTyping","find","_a","isLoadingMessages","renderMessages","dateRowStyles","dateRowClasses","bubbleGroupStyles","bubbleGroupClasses","groups","array","groupingKeyFn","Error","reduce","result","item","groupBy","toDateString","jsxKey","keys","forEach","group","messagesGroup","showDateRow","CustomDateRow","concat","messageGroup","CustomBubbleGroup","e","isTypingStyles","isTypingClasses","loadingMessagesStyle","chatFeedStyles","chatScrollAreaStyles","loadingMessagesClasses","chatScrollAreaClasses","CustomScrollArea","CustomChatMessagesContainer","chatMessagesContainerClasses","chatMessagesContainerStyles","CustomLoadingMessages","showLoadingMessages","state","CustomIsTyping","hasOldMessages","Promise","resolve","setState","defaultProps"],"mappings":"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","file":"index.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse {\n\t\tvar a = typeof exports === 'object' ? factory(require(\"react\")) : factory(root[\"react\"]);\n\t\tfor(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];\n\t}\n})(self, function(__WEBPACK_EXTERNAL_MODULE__297__) {\nreturn ","/*!\n Copyright (c) 2017 Jed Watson.\n Licensed under the MIT License (MIT), see\n http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg) && arg.length) {\n\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\tif (inner) {\n\t\t\t\t\tclasses.push(inner);\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","module.exports = __WEBPACK_EXTERNAL_MODULE__297__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import * as React from 'react';\n\nexport interface ChatBubbleStyles {\n chatBubbleWrapper?: React.CSSProperties;\n chatBubble?: React.CSSProperties;\n systemChatBubbleContainer?: React.CSSProperties;\n systemChatBubbleText?: React.CSSProperties;\n userChatBubbleOrientationNormal?: React.CSSProperties;\n recipientChatBubbleOrientationNormal?: React.CSSProperties;\n text?: React.CSSProperties;\n userText?: React.CSSProperties;\n recipientText?: React.CSSProperties;\n userChatBubble?: React.CSSProperties;\n recipientChatBubble?: React.CSSProperties;\n firstChatBubbleInGroup?: React.CSSProperties;\n userFirstChatBubbleInGroup?: React.CSSProperties;\n recipientFirstChatBubbleInGroup?: React.CSSProperties;\n lastChatBubbleInGroup?: React.CSSProperties;\n userLastChatBubbleInGroup?: React.CSSProperties;\n recipientLastChatBubbleInGroup?: React.CSSProperties;\n centerChatBubbleInGroup?: React.CSSProperties;\n userCenterChatBubbleInGroup?: React.CSSProperties;\n recipientCenterChatBubbleInGroup?: React.CSSProperties;\n createdOn?: React.CSSProperties;\n recipientCreatedOn?: React.CSSProperties;\n userCreatedOn?: React.CSSProperties;\n isSend?: React.CSSProperties;\n\n lastSeenByContainer?: React.CSSProperties;\n loadingSpinnerColor?: string;\n isSendIconColor?: string;\n}\n\nconst styles: ChatBubbleStyles = {\n chatBubbleWrapper: {\n position: 'relative',\n marginBottom: 2,\n display: 'flex',\n } as React.CSSProperties,\n chatBubble: {\n position: 'relative',\n borderTopRightRadius: 7,\n borderTopLeftRadius: 7,\n borderBottomRightRadius: 7,\n borderBottomLeftRadius: 7,\n marginRight: 'auto',\n marginLeft: 'auto',\n maxWidth: '80%',\n paddingTop: 8,\n paddingBottom: 14,\n paddingLeft: 14,\n paddingRight: 14,\n } as React.CSSProperties,\n userChatBubbleOrientationNormal: {\n marginRight: 0,\n } as React.CSSProperties,\n recipientChatBubbleOrientationNormal: {\n marginLeft: 0,\n } as React.CSSProperties,\n recipientChatBubble: {} as React.CSSProperties,\n text: {\n fontSize: 16,\n fontWeight: 300,\n margin: 0,\n marginRight: 30,\n overflowWrap: 'break-word',\n wordWrap: 'break-word',\n hyphens: 'auto',\n } as React.CSSProperties,\n userFirstChatBubbleInGroup: {\n borderTopRightRadius: 0,\n } as React.CSSProperties,\n recipientFirstChatBubbleInGroup: {\n borderTopLeftRadius: 0,\n } as React.CSSProperties,\n userLastChatBubbleInGroup: {\n borderTopRightRadius: 0,\n } as React.CSSProperties,\n recipientLastChatBubbleInGroup: {\n borderTopLeftRadius: 0,\n } as React.CSSProperties,\n userCenterChatBubbleInGroup: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n } as React.CSSProperties,\n recipientCenterChatBubbleInGroup: {\n borderBottomLeftRadius: 0,\n borderTopLeftRadius: 0,\n } as React.CSSProperties,\n createdOn: {\n position: 'absolute',\n right: 14,\n bottom: 2,\n fontSize: 9,\n opacity: 0.5,\n } as React.CSSProperties,\n isSend: {\n position: 'absolute',\n right: 2,\n bottom: 1,\n fontSize: 9,\n opacity: 0.5,\n } as React.CSSProperties,\n lastSeenByContainer: {\n position: 'absolute',\n right: -30,\n top: 0,\n width: 20,\n height: '100%',\n } as React.CSSProperties,\n loadingSpinnerColor: 'currentColor',\n isSendIconColor: 'currentColor',\n};\n\nexport { styles as defaultChatBubbleStyles };\n","export interface ChatBubbleClasses {\r\n chatBubbleWrapper?: string;\r\n chatBubble?: string;\r\n systemChatBubbleContainer?: string;\r\n systemChatBubbleText?: string;\r\n userChatBubbleOrientationNormal?: string;\r\n recipientChatBubbleOrientationNormal?: string;\r\n text?: string;\r\n userText?: string;\r\n recipientText?: string;\r\n userChatBubble?: string;\r\n recipientChatBubble?: string;\r\n firstChatBubbleInGroup?: string;\r\n userFirstChatBubbleInGroup?: string;\r\n recipientFirstChatBubbleInGroup?: string;\r\n lastChatBubbleInGroup?: string;\r\n userLastChatBubbleInGroup?: string;\r\n recipientLastChatBubbleInGroup?: string;\r\n centerChatBubbleInGroup?: string;\r\n userCenterChatBubbleInGroup?: string;\r\n recipientCenterChatBubbleInGroup?: string;\r\n createdOn?: string;\r\n recipientCreatedOn?: string;\r\n userCreatedOn?: string;\r\n isSend?: string;\r\n\r\n lastSeenByContainer?: string;\r\n}\r\n\r\nconst classes: ChatBubbleClasses = {\r\n chatBubbleWrapper: 'react-bell-chat__chat-bubble__wrapper',\r\n\r\n isSend: 'react-bell-chat__chat-bubble__is-send',\r\n\r\n chatBubble: 'react-bell-chat__chat-bubble',\r\n userChatBubble: 'react-bell-chat__chat-bubble--user',\r\n recipientChatBubble: 'react-bell-chat__chat-bubble--recipient',\r\n\r\n text: 'react-bell-chat__chat-bubble__text',\r\n userText: 'react-bell-chat__chat-bubble__text--user',\r\n recipientText: 'react-bell-chat__chat-bubble__text--recipient',\r\n\r\n createdOn: 'react-bell-chat__chat-bubble__created-on',\r\n userCreatedOn: 'react-bell-chat__chat-bubble__created-on--user',\r\n recipientCreatedOn: 'react-bell-chat__chat-bubble__created-on--recipient',\r\n\r\n lastSeenByContainer: 'react-bell-chat__chat-bubble__last-seen-by__container',\r\n};\r\n\r\nexport { classes as defaultChatBubbleClasses };\r\n","export interface ChatBubbleConfig {\r\n formatTime?: (date: Date) => string;\r\n}\r\n\r\nconst config: ChatBubbleConfig = {\r\n formatTime: (date) =>\r\n date?.toLocaleTimeString([], {\r\n hour: 'numeric',\r\n minute: 'numeric',\r\n hour12: true,\r\n }),\r\n};\r\n\r\nexport { config as defaultChatBubbleConfig };\r\n","import * as React from 'react';\nimport { Message } from '../Message';\nimport { Author } from '../Author';\nimport {\n LastSeenAvatarProps,\n LastSeenAvatarStyles,\n LastSeenAvatarClasses,\n} from './../LastSeenAvatar';\nimport classnames from 'classnames';\nimport { ChatBubbleStyles, defaultChatBubbleStyles } from './styles';\nimport { ChatBubbleClasses, defaultChatBubbleClasses } from './classes';\nimport { ComponentType } from '../utils/componentType';\nimport { ChatBubbleConfig, defaultChatBubbleConfig } from './config';\n\nexport * from './styles';\nexport * from './classes';\nexport * from './config';\n\nexport interface MessageRenderProps {\n message: Message;\n style?: React.CSSProperties;\n className?: string;\n}\n\nexport interface ChatBubbleProps {\n message: Message;\n author?: Author;\n\n config?: ChatBubbleConfig;\n\n styles?: ChatBubbleStyles;\n lastSeenAvatarStyles?: LastSeenAvatarStyles;\n\n classes?: ChatBubbleClasses;\n lastSeenAvatarClasses?: LastSeenAvatarClasses;\n\n bubblesCentered?: boolean;\n yourAuthorId: number;\n isFirstInGroup?: boolean;\n isLastInGroup?: boolean;\n isCenterInGroup?: boolean;\n lastSeenByAuthors?: Author[];\n showRecipientLastSeenMessage?: boolean;\n CustomLastSeenAvatar?: ComponentType>;\n CustomMessageRender?: ComponentType>;\n}\n\nexport function ChatBubble(props: ChatBubbleProps) {\n if (!props.message) {\n return null;\n }\n\n const {\n lastSeenAvatarStyles,\n yourAuthorId,\n lastSeenAvatarClasses,\n styles,\n classes,\n config,\n } = props;\n\n const finalConfig = {\n ...defaultChatBubbleConfig,\n ...config,\n };\n\n const {\n userChatBubble,\n chatBubble,\n text,\n userText,\n recipientText,\n recipientChatBubble,\n firstChatBubbleInGroup,\n userFirstChatBubbleInGroup,\n recipientFirstChatBubbleInGroup,\n centerChatBubbleInGroup,\n userCenterChatBubbleInGroup,\n recipientCenterChatBubbleInGroup,\n lastChatBubbleInGroup,\n userLastChatBubbleInGroup,\n recipientLastChatBubbleInGroup,\n userChatBubbleOrientationNormal,\n recipientChatBubbleOrientationNormal,\n chatBubbleWrapper,\n createdOn,\n userCreatedOn,\n recipientCreatedOn,\n isSendIconColor,\n loadingSpinnerColor,\n lastSeenByContainer,\n } = styles ?? {};\n const youAreAuthor = props.message.authorId === yourAuthorId;\n\n // message.id 0 is reserved for blue\n const finalChatBubbleStyles: React.CSSProperties = {\n ...defaultChatBubbleStyles.chatBubble,\n ...chatBubble,\n ...(youAreAuthor\n ? defaultChatBubbleStyles.userChatBubble\n : defaultChatBubbleStyles.recipientChatBubble),\n ...(youAreAuthor ? userChatBubble : recipientChatBubble),\n ...(youAreAuthor\n ? defaultChatBubbleStyles.userChatBubbleOrientationNormal\n : defaultChatBubbleStyles.recipientChatBubbleOrientationNormal),\n ...(youAreAuthor\n ? userChatBubbleOrientationNormal\n : recipientChatBubbleOrientationNormal),\n ...(props.isFirstInGroup && defaultChatBubbleStyles.firstChatBubbleInGroup),\n ...(props.isFirstInGroup &&\n (youAreAuthor\n ? defaultChatBubbleStyles.userFirstChatBubbleInGroup\n : defaultChatBubbleStyles.recipientFirstChatBubbleInGroup)),\n ...(props.isCenterInGroup &&\n defaultChatBubbleStyles.centerChatBubbleInGroup),\n ...(props.isCenterInGroup &&\n (youAreAuthor\n ? defaultChatBubbleStyles.userCenterChatBubbleInGroup\n : defaultChatBubbleStyles.recipientCenterChatBubbleInGroup)),\n ...(props.isLastInGroup && defaultChatBubbleStyles.lastChatBubbleInGroup),\n ...(props.isLastInGroup &&\n (youAreAuthor\n ? defaultChatBubbleStyles.userLastChatBubbleInGroup\n : defaultChatBubbleStyles.recipientLastChatBubbleInGroup)),\n ...(props.isFirstInGroup && firstChatBubbleInGroup),\n ...(props.isFirstInGroup &&\n (youAreAuthor\n ? userFirstChatBubbleInGroup\n : recipientFirstChatBubbleInGroup)),\n ...(props.isCenterInGroup && centerChatBubbleInGroup),\n ...(props.isCenterInGroup &&\n (youAreAuthor\n ? userCenterChatBubbleInGroup\n : recipientCenterChatBubbleInGroup)),\n ...(props.isLastInGroup && lastChatBubbleInGroup),\n ...(props.isLastInGroup &&\n (youAreAuthor\n ? userLastChatBubbleInGroup\n : recipientLastChatBubbleInGroup)),\n };\n\n const messageStyle = {\n ...defaultChatBubbleStyles.text,\n ...text,\n ...(youAreAuthor ? userText : recipientText),\n };\n const messageClassName = classnames(\n defaultChatBubbleClasses.text,\n classes?.text,\n youAreAuthor\n ? defaultChatBubbleClasses.userText\n : defaultChatBubbleClasses.recipientText,\n youAreAuthor ? classes?.userText : classes?.recipientText\n );\n\n const [\n isMouseOverLastSeenContainer,\n setIsMouseOverLastSeenContainer,\n ] = React.useState(false);\n\n const onMouseEnterLastSeenContainer = React.useCallback(\n () => setIsMouseOverLastSeenContainer(true),\n []\n );\n const onMouseLeaveLastSeenContainer = React.useCallback(\n () => setIsMouseOverLastSeenContainer(false),\n []\n );\n\n return (\n \n \n {props.CustomMessageRender ? (\n \n ) : (\n \n {props.message.message}\n \n )}\n {props.message.createdOn && (\n \n {finalConfig.formatTime(props.message.createdOn)}\n \n )}\n {props.message.isSend !== undefined && youAreAuthor && (\n \n {props.message.isSend ? (\n \n \n \n ) : (\n \n \n \n \n \n )}\n \n )}\n \n {props.showRecipientLastSeenMessage &&\n props.lastSeenByAuthors &&\n props.lastSeenByAuthors.length > 0 &&\n props.CustomLastSeenAvatar && (\n a.name)\n .join(', ')\n .replace(/,(?!.*,)/gim, ' and')\n }*/\n >\n {props.lastSeenByAuthors.map((a, i) => (\n \n ))}\n \n )}\n \n );\n}\n","export interface AvatarStyles {\r\n container?: React.CSSProperties;\r\n text?: React.CSSProperties;\r\n}\r\n\r\nconst styles = {\r\n container: {\r\n position: 'absolute',\r\n left: -50,\r\n top: 0,\r\n width: 40,\r\n height: 40,\r\n lineHeight: '40px',\r\n fontWeight: 400,\r\n borderTopLeftRadius: 20,\r\n borderBottomLeftRadius: 20,\r\n borderBottomRightRadius: 20,\r\n textAlign: 'center',\r\n borderTopRightRadius: 5,\r\n } as React.CSSProperties,\r\n text: {\r\n pointerEvents: 'none',\r\n } as React.CSSProperties,\r\n};\r\n\r\nexport { styles as defaultAvatarStyles };\r\n","export interface AvatarClasses {\r\n container?: string;\r\n text?: string;\r\n}\r\n\r\nconst classes: AvatarClasses = {\r\n container: 'react-bell-chat__avatar',\r\n text: 'react-bell-chat__avatar__text',\r\n};\r\n\r\nexport { classes as defaultAvatarClasses };\r\n","import * as React from 'react';\r\n\r\nexport const typedMemo: (c: T) => T = React.memo;\r\n","import * as React from 'react';\nimport { Author } from '../Author';\nimport classnames from 'classnames';\nimport { AvatarStyles, defaultAvatarStyles } from './styles';\nimport { AvatarClasses, defaultAvatarClasses } from './classes';\nimport { typedMemo } from '../utils/typedMemo';\n\nexport * from './classes';\nexport * from './styles';\n\nexport interface AvatarProps {\n author: Author;\n styles?: AvatarStyles;\n classes?: AvatarClasses;\n}\n\nfunction Avatar(props: AvatarProps) {\n const { author, classes, styles } = props;\n const style = {\n ...defaultAvatarStyles.container,\n ...styles?.container,\n ...(author?.bgImageUrl\n ? ({\n backgroundImage: `url(${author?.bgImageUrl})`,\n backgroundSize: 'cover',\n } as React.CSSProperties)\n : {}),\n };\n return (\n author && (\n \n \n {author.bgImageUrl\n ? null\n : author.avatarName\n ? author.avatarName\n : author.name\n .split(' ')\n .map((part) => part[0])\n .join('')\n .toUpperCase()\n .substr(0, 3)}\n \n \n )\n );\n}\nconst Memoized = typedMemo(Avatar);\nexport { Memoized as Avatar };\n","export interface IsTypingClasses {\r\n container?: string;\r\n}\r\n\r\nconst classes: IsTypingClasses = {\r\n container: 'react-bell-chat__is-typing__container',\r\n};\r\n\r\nexport { classes as defaultIsTypingClasses };\r\n","export interface IsTypingStyles {\r\n container?: React.CSSProperties;\r\n}\r\n\r\nconst styles: IsTypingStyles = {\r\n container: {\r\n position: 'absolute',\r\n bottom: 2,\r\n left: 0,\r\n right: 0,\r\n color: 'rgb(204, 204, 204)',\r\n textAlign: 'center',\r\n } as React.CSSProperties,\r\n};\r\n\r\nexport { styles as defaultIsTypingStyles };\r\n","import * as React from 'react';\nimport { Author } from '../Author';\nimport classnames from 'classnames';\nimport { IsTypingClasses, defaultIsTypingClasses } from './classes';\nimport { IsTypingStyles, defaultIsTypingStyles } from './styles';\nimport { typedMemo } from '../utils/typedMemo';\nexport * from './classes';\nexport * from './styles';\n\nexport interface IsTypingProps {\n typingAuthors: Author[];\n styles?: IsTypingStyles;\n classes?: IsTypingClasses;\n}\n\nfunction IsTyping(props: IsTypingProps) {\n let { styles, classes } = props;\n\n const style = React.useMemo(\n () => ({ ...defaultIsTypingStyles.container, ...styles?.container }),\n [styles?.container]\n );\n\n return (\n props.typingAuthors &&\n props.typingAuthors.length > 0 && (\n \n {props.typingAuthors\n .map((a) => a.name)\n .join(', ')\n .replace(/,(?!.*,)/gim, ' and') +\n (props.typingAuthors.length === 1 ? ' is ' : ' are ') +\n 'typing'}\n \n )\n );\n}\n\nconst Memoized = typedMemo(IsTyping);\n\nexport { Memoized as IsTyping };\n","import * as React from 'react';\nimport classnames from 'classnames';\nimport { ChatScrollAreaStyles, defaultChatScrollAreaStyles } from './styles';\nimport { ChatScrollAreaClasses, defaultChatScrollAreaClasses } from './classes';\nexport * from './classes';\nexport * from './styles';\n\nexport interface ChatScrollAreaProps {\n maxHeight?: string | number;\n minHeight?: string | number;\n children?: JSX.Element | JSX.Element[];\n styles?: ChatScrollAreaStyles;\n apiRef?: (api: ChatScrollAreaApi) => void;\n loadOldMessagesThreshold: number;\n onLoadOldMessages: () => Promise;\n\n classes?: ChatScrollAreaClasses;\n}\n\nexport interface ChatScrollAreaApi {\n scrollToBottom: (behavior?: ScrollBehavior) => void;\n scrollTo: (top: number) => void;\n scrollTop: () => number;\n scrollHeight: () => number;\n clientHeight: () => number;\n scrolledToBottom: () => boolean;\n scrolledToLoadThreshold: () => boolean; // Check if we are scrolled to threshold where we need to load messages\n}\n\nexport class ChatScrollArea extends React.PureComponent {\n scrollContainer: HTMLDivElement;\n constructor(props: ChatScrollAreaProps) {\n super(props);\n this.containerRef = this.containerRef.bind(this);\n this.onScroll = this.onScroll.bind(this);\n }\n\n public render() {\n const { styles, classes } = this.props;\n return (\n \n {this.props.children}\n \n );\n }\n\n private onScroll() {\n this.scrollContainer &&\n this.scrollContainer.scrollTop <= this.props.loadOldMessagesThreshold &&\n this.props.onLoadOldMessages();\n }\n\n private containerRef(scrollContainer: HTMLDivElement) {\n this.scrollContainer = scrollContainer;\n this.props.apiRef &&\n this.props.apiRef({\n scrollToBottom: (behavior = 'auto') =>\n scrollContainer &&\n (scrollContainer.scrollTo\n ? scrollContainer.scrollTo({\n top: scrollContainer.scrollHeight,\n behavior,\n })\n : (scrollContainer.scrollTop = scrollContainer.scrollHeight)),\n scrollTo: (top) =>\n scrollContainer &&\n (scrollContainer.scrollTo\n ? scrollContainer.scrollTo({\n top: top,\n })\n : (scrollContainer.scrollTop = top)),\n scrolledToBottom: () =>\n this.scrollContainer.clientHeight + this.scrollContainer.scrollTop ===\n this.scrollContainer.scrollHeight,\n scrolledToLoadThreshold: () =>\n this.scrollContainer &&\n this.scrollContainer.scrollTop <= this.props.loadOldMessagesThreshold,\n scrollTop: () => this.scrollContainer && this.scrollContainer.scrollTop,\n scrollHeight: () =>\n this.scrollContainer && this.scrollContainer.scrollHeight,\n clientHeight: () =>\n this.scrollContainer && this.scrollContainer.clientHeight,\n });\n }\n}\n","export interface ChatScrollAreaStyles {\r\n container?: React.CSSProperties;\r\n}\r\n\r\nconst styles: ChatScrollAreaStyles = {\r\n container: {\r\n overflow: 'auto',\r\n padding: '0 10px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: '100%',\r\n // flexDirection: 'column-reverse'\r\n },\r\n};\r\n\r\nexport { styles as defaultChatScrollAreaStyles };\r\n","export interface ChatScrollAreaClasses {\r\n container?: string;\r\n}\r\n\r\nconst classes: ChatScrollAreaClasses = {\r\n container: 'react-bell-chat__chat-scroll-area',\r\n};\r\n\r\nexport { classes as defaultChatScrollAreaClasses };\r\n","export interface LastSeenAvatarClasses {\r\n container?: string;\r\n text?: string;\r\n}\r\n\r\nconst classes: LastSeenAvatarClasses = {\r\n container: 'react-bell-chat__last-seen-avatar',\r\n text: 'react-bell-chat__last-seen-avatar__text',\r\n};\r\n\r\nexport { classes as defaultLastSeenAvatarClasses };\r\n","export interface LastSeenAvatarStyles {\r\n container?: React.CSSProperties;\r\n containerMouseOver?: React.CSSProperties;\r\n text?: React.CSSProperties;\r\n}\r\n\r\nconst styles = {\r\n container: {\r\n width: 24,\r\n height: 24,\r\n lineHeight: '24px',\r\n fontWeight: 400,\r\n fontSize: 10,\r\n borderTopLeftRadius: 12,\r\n borderTopRightRadius: 12,\r\n borderBottomLeftRadius: 12,\r\n borderBottomRightRadius: 12,\r\n textAlign: 'center',\r\n transition: '0.3s all ease-in-out',\r\n display: 'block',\r\n position: 'relative',\r\n } as React.CSSProperties,\r\n text: {\r\n pointerEvents: 'none',\r\n } as React.CSSProperties,\r\n};\r\n\r\nexport { styles as defaultLastSeenAvatarStyles };\r\n","import * as React from 'react';\nimport { Author } from '../Author';\nimport classnames from 'classnames';\nimport { LastSeenAvatarClasses, defaultLastSeenAvatarClasses } from './classes';\nimport { LastSeenAvatarStyles, defaultLastSeenAvatarStyles } from './styles';\nimport { typedMemo } from '../utils/typedMemo';\nexport * from './classes';\nexport * from './styles';\n\nexport interface LastSeenAvatarProps {\n author: Author;\n index?: number;\n mouseOver?: boolean;\n styles?: LastSeenAvatarStyles;\n classes?: LastSeenAvatarClasses;\n}\n\nfunction LastSeenAvatar(props: LastSeenAvatarProps) {\n let { styles, classes, index, mouseOver, author } = props;\n\n const style = React.useMemo(\n () => ({\n ...defaultLastSeenAvatarStyles.container,\n ...styles?.container,\n ...(author?.bgImageUrl\n ? ({\n backgroundImage: `url(${author?.bgImageUrl})`,\n backgroundSize: 'cover',\n } as React.CSSProperties)\n : {}),\n ...(index > 0 && !mouseOver ? { marginTop: -12 } : { marginTop: -4 }),\n }),\n [styles?.container, index, mouseOver, author?.bgImageUrl]\n );\n\n const textStyle = React.useMemo(\n () => ({\n ...defaultLastSeenAvatarStyles.text,\n ...styles?.text,\n }),\n [styles?.text]\n );\n\n return (\n author && (\n \n \n {author.bgImageUrl\n ? null\n : author.lastSeenAvatarName\n ? author.lastSeenAvatarName\n : author.name[0].toUpperCase()}\n \n \n )\n );\n}\n\nconst Memoized = typedMemo(LastSeenAvatar);\n\nexport { Memoized as LastSeenAvatar };\n","export interface BubbleGroupClasses {\r\n chatBubbleWrapper?: string;\r\n}\r\n\r\nconst classes: BubbleGroupClasses = {\r\n chatBubbleWrapper: 'react-bell-chat__bubble-group',\r\n};\r\n\r\nexport { classes as defaultBubbleGroupClasses };\r\n","import * as React from 'react';\n\nexport interface BubbleGroupStyles {\n bubbleGroupWrapper?: React.CSSProperties;\n}\n\nconst styles: BubbleGroupStyles = {\n bubbleGroupWrapper: {\n marginTop: 10,\n marginBottom: 10,\n position: 'relative',\n },\n};\n\nexport { styles as defaultBubbleGroupStyles };\n","import * as React from 'react';\nimport {\n ChatBubbleProps,\n ChatBubbleStyles,\n MessageRenderProps,\n} from '../ChatBubble';\nimport { Message } from '../';\nimport { Author } from '../Author';\nimport { AvatarProps, AvatarClasses } from '../Avatar';\nimport {\n LastSeenAvatarProps,\n LastSeenAvatarStyles,\n LastSeenAvatarClasses,\n} from '../LastSeenAvatar';\nimport { AvatarStyles } from './../Avatar';\nimport classnames from 'classnames';\nimport { ChatBubbleClasses } from './../ChatBubble';\nimport { BubbleGroupClasses, defaultBubbleGroupClasses } from './classes';\nimport { BubbleGroupStyles, defaultBubbleGroupStyles } from './styles';\nimport { ComponentType } from '../utils/componentType';\nimport { typedMemo } from '../utils/typedMemo';\n\nexport * from './styles';\nexport * from './classes';\n\nexport interface BubbleGroupProps {\n yourAuthorId?: number;\n messages: Message[];\n author: Author;\n authors?: Author[];\n showRecipientAvatar?: boolean;\n bubblesCentered?: boolean;\n\n classes?: BubbleGroupClasses;\n chatBubbleClasses?: ChatBubbleClasses;\n avatarClasses?: AvatarClasses;\n lastSeenAvatarClasses?: LastSeenAvatarClasses;\n\n styles?: BubbleGroupStyles;\n chatBubbleStyles?: ChatBubbleStyles;\n avatarStyles?: AvatarStyles;\n lastSeenAvatarStyles?: LastSeenAvatarStyles;\n\n CustomAvatar?: ComponentType>;\n CustomMessageRender?: ComponentType>;\n CustomLastSeenAvatar?: ComponentType>;\n CustomChatBubble?: ComponentType>;\n CustomSystemChatBubble?: ComponentType>;\n\n showRecipientLastSeenMessage?: boolean;\n}\n\nfunction BubbleGroup(props: BubbleGroupProps) {\n const {\n messages,\n author,\n\n CustomAvatar,\n\n styles,\n\n bubblesCentered,\n\n chatBubbleStyles,\n lastSeenAvatarStyles,\n avatarStyles,\n\n classes,\n chatBubbleClasses,\n lastSeenAvatarClasses,\n avatarClasses,\n\n showRecipientAvatar,\n CustomChatBubble,\n CustomSystemChatBubble,\n showRecipientLastSeenMessage,\n CustomLastSeenAvatar,\n CustomMessageRender,\n } = props;\n\n const messageNodes = messages.map((message, i) => {\n const _props: ChatBubbleProps = {\n yourAuthorId: props.yourAuthorId,\n author,\n message,\n bubblesCentered,\n\n styles: chatBubbleStyles,\n lastSeenAvatarStyles,\n\n classes: chatBubbleClasses,\n lastSeenAvatarClasses,\n\n isFirstInGroup: i === 0,\n isLastInGroup: i === messages.length - 1 && messages.length > 1,\n isCenterInGroup: i < messages.length - 1 && messages.length > 1,\n lastSeenByAuthors:\n props.authors &&\n props.authors.filter(\n (a) =>\n a.lastSeenMessageId !== undefined &&\n a.lastSeenMessageId === message.id\n ),\n showRecipientLastSeenMessage,\n CustomLastSeenAvatar,\n CustomMessageRender,\n };\n return message.authorId !== undefined ? (\n \n ) : (\n \n );\n });\n\n const youAreAuthor = author && props.yourAuthorId === author.id;\n return (\n \n {!youAreAuthor && showRecipientAvatar && author && CustomAvatar && (\n \n )}\n {messageNodes}\n \n );\n}\n\nconst Memoized = typedMemo(BubbleGroup);\nexport { Memoized as BubbleGroup };\n","export interface ChatMessagesContainerClasses {\r\n root?: string;\r\n showRecipientAvatar?: string;\r\n showRecipientLastSeenMessage?: string;\r\n showIsTyping?: string;\r\n}\r\n\r\nconst classes: ChatMessagesContainerClasses = {\r\n root: 'react-bell-chat__chat-messages',\r\n showRecipientAvatar: 'react-bell-chat__chat-messages--showRecipientAvatar',\r\n showRecipientLastSeenMessage:\r\n 'react-bell-chat__chat-messages--showRecipientLastSeenMessage',\r\n showIsTyping: 'react-bell-chat__chat-messages--showIsTyping',\r\n};\r\n\r\nexport { classes as defaultChatMessagesContainerClasses };\r\n","export interface ChatMessagesContainerStyles {\r\n root?: React.CSSProperties;\r\n showRecipientAvatar?: React.CSSProperties;\r\n showRecipientLastSeenMessage?: React.CSSProperties;\r\n showIsTyping?: React.CSSProperties;\r\n}\r\n\r\nconst styles: ChatMessagesContainerStyles = {\r\n root: {\r\n paddingBottom: 10,\r\n paddingTop: 10,\r\n flex: 1,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'flex-end',\r\n },\r\n showRecipientAvatar: {\r\n paddingLeft: 50,\r\n },\r\n showIsTyping: {\r\n paddingBottom: 24,\r\n position: 'relative',\r\n },\r\n showRecipientLastSeenMessage: {\r\n paddingRight: 30,\r\n },\r\n};\r\n\r\nexport { styles as defaultChatMessagesContainerStyles };\r\n","import * as React from 'react';\r\nimport * as classNames from 'classnames';\r\nimport { ChatMessagesContainerClasses, defaultChatMessagesContainerClasses } from './classes';\r\nimport { ChatMessagesContainerStyles, defaultChatMessagesContainerStyles } from './styles';\r\nexport * from './classes';\r\nexport * from './styles';\r\n\r\nexport interface ChatMessagesContainerProps\r\n extends React.PropsWithChildren<{\r\n showRecipientLastSeenMessage: boolean;\r\n showRecipientAvatar: boolean;\r\n showIsTyping: boolean;\r\n classes?: ChatMessagesContainerClasses;\r\n styles?: ChatMessagesContainerStyles;\r\n }> {}\r\n\r\nexport const ChatMessagesContainer: React.FC = (\r\n props\r\n) => {\r\n const {\r\n children,\r\n classes,\r\n styles,\r\n showIsTyping,\r\n showRecipientAvatar,\r\n showRecipientLastSeenMessage,\r\n } = props;\r\n const style = React.useMemo(\r\n () => ({\r\n ...defaultChatMessagesContainerStyles?.root,\r\n ...styles?.root,\r\n ...(showRecipientAvatar && defaultChatMessagesContainerStyles?.showRecipientAvatar),\r\n ...(showRecipientAvatar && styles?.showRecipientAvatar),\r\n ...(showIsTyping && defaultChatMessagesContainerStyles?.showIsTyping),\r\n ...(showIsTyping && styles?.showIsTyping),\r\n ...(showRecipientLastSeenMessage &&\r\n defaultChatMessagesContainerStyles?.showRecipientLastSeenMessage),\r\n ...(showRecipientLastSeenMessage && styles?.showRecipientLastSeenMessage),\r\n }),\r\n [\r\n showIsTyping,\r\n showRecipientAvatar,\r\n showRecipientLastSeenMessage,\r\n styles?.root,\r\n styles?.showRecipientAvatar,\r\n styles?.showIsTyping,\r\n styles?.showRecipientLastSeenMessage,\r\n ]\r\n );\r\n const className = classNames(defaultChatMessagesContainerClasses.root, classes?.root, {\r\n [defaultChatMessagesContainerClasses?.showRecipientAvatar]: showRecipientAvatar,\r\n [classes?.showRecipientAvatar]: showRecipientAvatar,\r\n [defaultChatMessagesContainerClasses?.showIsTyping]: showIsTyping,\r\n [classes?.showIsTyping]: showIsTyping,\r\n [defaultChatMessagesContainerClasses?.showRecipientLastSeenMessage]: showRecipientLastSeenMessage,\r\n [classes?.showRecipientLastSeenMessage]: showRecipientLastSeenMessage,\r\n });\r\n\r\n return (\r\n
\r\n {children}\r\n
\r\n );\r\n};\r\n","export interface DateRowClasses {\r\n container?: string;\r\n}\r\n\r\nconst classes: DateRowClasses = {\r\n container: 'react-bell-chat__date-row',\r\n};\r\n\r\nexport { classes as defaultDateRowClasses };\r\n","export interface DateRowStyles {\r\n container?: React.CSSProperties;\r\n}\r\n\r\nconst styles: DateRowStyles = {\r\n container: {\r\n textAlign: 'center',\r\n fontSize: 12,\r\n color: 'rgba(0, 0, 0, 0.55)',\r\n },\r\n};\r\n\r\nexport { styles as defaultDateRowStyles };\r\n","import * as React from 'react';\nimport classnames from 'classnames';\nimport { DateRowClasses, defaultDateRowClasses } from './classes';\nimport { DateRowStyles, defaultDateRowStyles } from './styles';\nexport * from './classes';\nexport * from './styles';\n\nexport interface DateRowProps {\n date: Date;\n styles?: DateRowStyles;\n classes?: DateRowClasses;\n}\n\nconst DateRow: React.FC = (props) => {\n let { styles, classes } = props;\n const style = React.useMemo(\n () => ({\n ...defaultDateRowStyles.container,\n ...styles?.container,\n }),\n [styles?.container]\n );\n return (\n props.date && (\n \n {props.date.toLocaleDateString()}\n \n )\n );\n};\n\nconst Memoized = React.memo(DateRow);\n\nexport { Memoized as DateRow };\n","export interface LoadingMessagesStyle {\r\n container?: React.CSSProperties;\r\n spinnerColor?: string;\r\n}\r\n\r\nconst styles: LoadingMessagesStyle = {\r\n container: {\r\n display: 'flex',\r\n marginBottom: 10,\r\n },\r\n spinnerColor: 'currentColor',\r\n};\r\n\r\nexport { styles as defaultLoadingMessagesStyle };\r\n","export interface LoadingMessagesClasses {\r\n container?: string;\r\n}\r\n\r\nconst classes: LoadingMessagesClasses = {\r\n container: 'react-bell-chat__loading-messages',\r\n};\r\n\r\nexport { classes as defaultLoadingMessagesClasses };\r\n","import * as React from 'react';\nimport classnames from 'classnames';\nimport { LoadingMessagesStyle, defaultLoadingMessagesStyle } from './styles';\nimport {\n LoadingMessagesClasses,\n defaultLoadingMessagesClasses,\n} from './classes';\nexport * from './classes';\nexport * from './styles';\n\nexport interface LoadingMessagesProps {\n styles?: LoadingMessagesStyle;\n classes?: LoadingMessagesClasses;\n className?: string;\n isVisible: boolean;\n}\n\nconst LoadingMessages: React.FC = (props) => {\n const { styles, classes } = props;\n\n const style = React.useMemo(\n () => ({\n ...defaultLoadingMessagesStyle.container,\n ...styles?.container,\n }),\n [styles?.container]\n );\n\n const svgStyle = React.useMemo(\n () => ({\n background: 'none',\n margin: 'auto',\n fill: styles?.spinnerColor ?? defaultLoadingMessagesStyle.spinnerColor,\n opacity: props.isVisible ? 1 : 0,\n transition: '0.3s all ease-in-out',\n }),\n [styles?.spinnerColor, props.isVisible]\n );\n return (\n \n \n \n \n \n \n \n );\n};\n\nconst Memoized = React.memo(LoadingMessages);\n\nexport { Memoized as LoadingMessages };\n","import * as classNames from 'classnames';\r\nimport {\r\n ChatBubbleClasses,\r\n defaultChatBubbleClasses,\r\n} from '../ChatBubble/classes';\r\n\r\nconst classes: ChatBubbleClasses = {\r\n chatBubbleWrapper: classNames(\r\n defaultChatBubbleClasses.chatBubbleWrapper,\r\n 'react-bell-chat__chat-bubble--system'\r\n ),\r\n createdOn: 'react-bell-chat__chat-bubble--system__created-on',\r\n};\r\n\r\nexport { classes as defaultSystemChatBubbleClasses };\r\n","import { ChatBubbleStyles } from '../ChatBubble/styles';\r\n\r\nconst styles: ChatBubbleStyles = {\r\n systemChatBubbleContainer: {\r\n textAlign: 'center',\r\n fontSize: 12,\r\n color: 'rgba(0, 0, 0, 0.55)',\r\n } as React.CSSProperties,\r\n};\r\n\r\nexport { styles as defaultSystemChatBubbleStyles };\r\n","import * as React from 'react';\nimport { ChatBubbleProps, defaultChatBubbleConfig } from '../ChatBubble';\nimport classnames from 'classnames';\nimport { defaultSystemChatBubbleClasses } from './classes';\nimport { defaultSystemChatBubbleStyles } from './styles';\nexport * from './classes';\nexport * from './styles';\n\nexport interface SystemChatBubbleProps extends ChatBubbleProps {}\n\nfunction SystemChatBubble(props: SystemChatBubbleProps) {\n const { styles, classes, message, config } = props;\n\n const finalConfig = {\n ...defaultChatBubbleConfig,\n ...config,\n };\n\n const time = finalConfig.formatTime(message.createdOn);\n\n const style = React.useMemo(\n () => ({\n ...defaultSystemChatBubbleStyles.systemChatBubbleContainer,\n ...styles?.systemChatBubbleContainer,\n }),\n [styles?.systemChatBubbleContainer]\n );\n const textStyle = React.useMemo(\n () => ({\n ...defaultSystemChatBubbleStyles.systemChatBubbleText,\n ...styles?.systemChatBubbleText,\n }),\n [styles?.systemChatBubbleText]\n );\n return (\n message && (\n \n {time && (\n \n {time}:{' '}\n \n )}\n {props.message.message}\n \n )\n );\n}\n\nconst Memoized = React.memo(SystemChatBubble);\n\nexport { Memoized as SystemChatBubble };\n","import * as React from 'react';\n\nexport interface ChatFeedStyles {\n chatPanel?: React.CSSProperties;\n showRecipientAvatarChatMessages?: React.CSSProperties;\n showRecipientLastSeenMessageChatMessages?: React.CSSProperties;\n showIsTypingChatMessages?: React.CSSProperties;\n}\n\nconst styles: ChatFeedStyles = {\n chatPanel: {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n overflow: 'hidden',\n position: 'relative',\n },\n};\n\nexport { styles as defaultChatFeedStyles };\n","export interface ChatFeedClasses {\r\n chatPanel?: string;\r\n}\r\n\r\nconst classes: ChatFeedClasses = {\r\n chatPanel: 'react-bell-chat__chat-panel',\r\n};\r\n\r\nexport { classes as defaultChatFeedClasses };\r\n","// Copyright 2017 Brandon Mowat\n// Written, developed, and designed by Brandon Mowat for the purpose of helping\n// other developers make chat interfaces.\n\nimport * as React from 'react';\nimport {\n BubbleGroup as DefaultBubbleGroup,\n BubbleGroupClasses,\n BubbleGroupProps,\n BubbleGroupStyles,\n} from '../BubbleGroup';\nimport {\n ChatBubble as DefaultChatBubble,\n ChatBubbleProps,\n MessageRenderProps,\n} from '../ChatBubble';\nimport { Message } from '../Message';\nimport { Author } from '../Author';\nimport { ChatBubbleStyles, ChatBubbleClasses } from '../ChatBubble';\nimport {\n Avatar as DefaultAvatar,\n AvatarProps,\n AvatarStyles,\n AvatarClasses,\n} from '../Avatar';\nimport {\n IsTyping as DefaultIsTyping,\n IsTypingStyles,\n IsTypingClasses,\n IsTypingProps,\n} from '../IsTyping';\nimport {\n ChatScrollArea as DefaultChatScrollArea,\n ChatScrollAreaProps,\n ChatScrollAreaApi,\n ChatScrollAreaStyles,\n ChatScrollAreaClasses,\n} from '../ChatScrollArea';\nimport {\n ChatMessagesContainer as DefaultChatMessagesContainer,\n ChatMessagesContainerProps,\n ChatMessagesContainerClasses,\n ChatMessagesContainerStyles,\n} from '../ChatMessagesContainer';\nimport {\n LastSeenAvatar as DefaultLastSeenAvatar,\n LastSeenAvatarProps,\n LastSeenAvatarStyles,\n LastSeenAvatarClasses,\n} from '../LastSeenAvatar';\nimport { groupBy } from '../utils/utils';\nimport {\n DateRow as DefaultDateRow,\n DateRowProps,\n DateRowStyles,\n DateRowClasses,\n} from '../DateRow';\nimport {\n LoadingMessages as DefaultLoadingMessages,\n LoadingMessagesProps,\n LoadingMessagesStyle,\n LoadingMessagesClasses,\n} from '../LoadingMessages';\nimport { SystemChatBubble as DefaultSystemChatBubble } from '../SystemChatBubble';\nimport classnames from 'classnames';\nimport { ChatFeedStyles, defaultChatFeedStyles } from './styles';\nimport { ChatFeedClasses, defaultChatFeedClasses } from './classes';\nimport { ComponentType } from '../utils/componentType';\n\nexport * from './classes';\nexport * from './styles';\n\n// Model for ChatFeed props.\n\nexport interface ChatFeedProps {\n // Structural props\n className?: string;\n\n // Functional props\n messages: Message[];\n authors: Author[];\n yourAuthorId: number;\n hasOldMessages?: boolean;\n loadOldMessagesThreshold?: number;\n\n // Visual props\n bubblesCentered?: boolean;\n maxHeight?: string | number;\n minHeight?: string | number;\n\n // Switches\n showDateRow?: boolean;\n showRecipientAvatar?: boolean;\n showRecipientLastSeenMessage?: boolean;\n showIsTyping?: boolean;\n showLoadingMessages?: boolean;\n\n // Custom components\n CustomLoadingMessages?: ComponentType;\n CustomChatBubble?: ComponentType>;\n CustomBubbleGroup?: ComponentType>;\n CustomSystemChatBubble?: ComponentType>;\n CustomAvatar?: ComponentType>;\n CustomScrollArea?: ComponentType;\n CustomChatMessagesContainer?: ComponentType;\n CustomIsTyping?: ComponentType>;\n CustomLastSeenAvatar?: ComponentType>;\n CustomMessageRender?: ComponentType>;\n CustomDateRow?: ComponentType;\n\n // Callbacks\n onLoadOldMessages?: () => Promise;\n\n // Styles\n style?: React.CSSProperties;\n styles?: ChatFeedStyles;\n bubbleGroupStyles?: BubbleGroupStyles;\n chatBubbleStyles?: ChatBubbleStyles;\n chatScrollAreaStyles?: ChatScrollAreaStyles;\n chatMessagesContainerStyles?: ChatMessagesContainerStyles;\n avatarStyles?: AvatarStyles;\n lastSeenAvatarStyles?: LastSeenAvatarStyles;\n dateRowStyles?: DateRowStyles;\n loadingMessagesStyle?: LoadingMessagesStyle;\n isTypingStyles?: IsTypingStyles;\n chatFeedStyles?: ChatFeedStyles;\n\n // Classes\n classes?: ChatFeedClasses;\n chatBubbleClasses?: ChatBubbleClasses;\n bubbleGroupClasses?: BubbleGroupClasses;\n chatScrollAreaClasses?: ChatScrollAreaClasses;\n chatMessagesContainerClasses?: ChatMessagesContainerClasses;\n avatarClasses?: AvatarClasses;\n lastSeenAvatarClasses?: LastSeenAvatarClasses;\n dateRowClasses?: DateRowClasses;\n loadingMessagesClasses?: LoadingMessagesClasses;\n isTypingClasses?: IsTypingClasses;\n chatFeedClasses?: ChatFeedStyles;\n}\n\nexport interface ChatFeedState {\n isLoadingMessages: boolean;\n}\n\nexport interface ChatFeedApi {\n onMessageSend: () => void;\n scrollApi: ChatScrollAreaApi;\n}\nfunction DefaultMessageRenderFunc(props: MessageRenderProps) {\n return (\n props.message && (\n \n {props.message.message}\n \n )\n );\n}\n\nexport interface ChatFeedSnapshot {\n wasScrolledToBottom: boolean;\n scrollHeight: number;\n clientHeight: number;\n}\n\n// React component to render a complete chat feed\nexport class ChatFeed\n extends React.PureComponent, ChatFeedState>\n implements ChatFeedApi {\n public static defaultProps: ChatFeedProps = {\n messages: [],\n authors: [],\n CustomChatBubble: DefaultChatBubble,\n CustomBubbleGroup: DefaultBubbleGroup,\n CustomMessageRender: DefaultMessageRenderFunc,\n CustomAvatar: DefaultAvatar,\n CustomScrollArea: DefaultChatScrollArea,\n CustomIsTyping: DefaultIsTyping,\n CustomChatMessagesContainer: DefaultChatMessagesContainer,\n CustomLastSeenAvatar: DefaultLastSeenAvatar,\n CustomDateRow: DefaultDateRow,\n CustomLoadingMessages: DefaultLoadingMessages,\n yourAuthorId: 0,\n loadOldMessagesThreshold: 50,\n CustomSystemChatBubble: DefaultSystemChatBubble,\n };\n\n public scrollApi: ChatScrollAreaApi;\n\n constructor(props: ChatFeedProps) {\n super(props);\n this.renderMessages = this.renderMessages.bind(this);\n this.onLoadOldMessages = this.onLoadOldMessages.bind(this);\n this.apiRef = this.apiRef.bind(this);\n this.state = {\n isLoadingMessages: false,\n };\n }\n\n public onMessageSend() {\n this.scrollApi && this.scrollApi.scrollToBottom();\n }\n\n componentDidMount() {\n this.scrollApi && this.scrollApi.scrollToBottom();\n }\n\n getSnapshotBeforeUpdate(\n prevProps: ChatFeedProps,\n prevState: ChatFeedState\n ) {\n const wasScrolledToBottom =\n this.scrollApi && this.scrollApi.scrolledToBottom();\n const scrollHeight = this.scrollApi && this.scrollApi.scrollHeight();\n const clientHeight = this.scrollApi && this.scrollApi.clientHeight();\n\n return {\n wasScrolledToBottom,\n scrollHeight,\n clientHeight,\n };\n }\n\n componentDidUpdate(\n prevProps: ChatFeedProps,\n prevState: ChatFeedState,\n snapshot: ChatFeedSnapshot\n ) {\n if (\n (this.props.messages.length !== prevProps.messages.length ||\n this.props.authors?.some?.(\n (a) =>\n a.isTyping !==\n prevProps.authors?.find?.((_a) => a.id === _a.id)?.isTyping\n )) &&\n snapshot &&\n snapshot.wasScrolledToBottom\n ) {\n this.scrollApi.scrollToBottom();\n } else if (\n this.props.messages.length !== prevProps.messages.length &&\n snapshot &&\n prevState.isLoadingMessages\n ) {\n const scrollHeight = this.scrollApi && this.scrollApi.scrollHeight();\n this.scrollApi.scrollTo(scrollHeight - snapshot.scrollHeight);\n }\n }\n\n /**\n * Determines what type of message/messages to render.\n */\n renderMessages(messages: Message[]) {\n let { styles } = this.props;\n if (!styles) {\n styles = {};\n }\n const {\n chatBubbleStyles,\n chatBubbleClasses,\n dateRowStyles,\n dateRowClasses,\n avatarStyles,\n avatarClasses,\n lastSeenAvatarStyles,\n lastSeenAvatarClasses,\n bubbleGroupStyles,\n bubbleGroupClasses,\n CustomChatBubble,\n showRecipientAvatar,\n } = this.props;\n\n // First group by days\n const groups = groupBy(\n messages,\n (item) => item.createdOn && item.createdOn.toDateString()\n );\n let messageNodes: React.ReactNode[] = [];\n let jsxKey = 0;\n Object.keys(groups).forEach((key) => {\n let group = [];\n const messagesGroup = groups[key];\n if (\n messagesGroup[0] &&\n messagesGroup[0].createdOn &&\n this.props.showDateRow\n ) {\n messageNodes.push(\n \n );\n }\n messageNodes = messageNodes.concat(\n messagesGroup.map((message, index) => {\n group.push(message);\n // Find diff in message type or no more messages\n if (\n !messagesGroup[index + 1] ||\n messagesGroup[index + 1].authorId !== message.authorId\n ) {\n const messageGroup = group;\n const author =\n this.props.authors &&\n this.props.authors.filter((a) => a.id === message.authorId)[0];\n group = [];\n jsxKey++;\n return (\n \n );\n }\n return null;\n })\n );\n });\n return messageNodes;\n }\n\n apiRef(e: ChatScrollAreaApi) {\n if (!this.scrollApi) {\n e.scrollToBottom();\n }\n this.scrollApi = e;\n }\n\n render() {\n let { styles, classes, isTypingStyles, isTypingClasses } = this.props;\n if (!styles) {\n styles = {};\n }\n if (!classes) {\n classes = {};\n }\n const {\n loadingMessagesStyle,\n chatFeedStyles,\n chatScrollAreaStyles,\n loadingMessagesClasses,\n chatScrollAreaClasses,\n } = this.props;\n\n const typingAuthors =\n this.props.authors &&\n this.props.authors.filter(\n (a) => a.isTyping && a.id !== this.props.yourAuthorId\n );\n\n return (\n \n \n \n \n {this.renderMessages(this.props.messages)}\n {this.props.showIsTyping && (\n \n )}\n \n \n \n );\n }\n\n private async onLoadOldMessages() {\n if (!this.state.isLoadingMessages && this.props.hasOldMessages) {\n await new Promise((resolve) => {\n this.setState(\n {\n isLoadingMessages: true,\n },\n () => resolve()\n );\n });\n if (this.props.onLoadOldMessages) {\n await this.props.onLoadOldMessages();\n }\n await new Promise((resolve) => {\n this.setState(\n {\n isLoadingMessages: false,\n },\n () => {\n if (this.scrollApi.scrolledToLoadThreshold()) {\n this.scrollApi.scrollTo(this.props.loadOldMessagesThreshold + 1);\n }\n resolve();\n }\n );\n });\n }\n }\n}\n","const groupBy = (\n array: Array,\n groupingKeyFn: (item: T) => string\n): { [key: string]: Array } => {\n if (typeof groupingKeyFn !== 'function') {\n throw new Error('groupBy take a function as only parameter');\n }\n return array.reduce((result, item) => {\n const key = groupingKeyFn(item);\n if (!result[key]) {\n result[key] = [];\n }\n result[key].push(item);\n return result;\n }, {});\n};\nexport { groupBy };\n"],"sourceRoot":""} \ No newline at end of file diff --git a/lib/index.min.js b/lib/index.min.js index c6696d6..7283864 100644 --- a/lib/index.min.js +++ b/lib/index.min.js @@ -4,5 +4,5 @@ Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ -!function(){"use strict";var o={}.hasOwnProperty;function l(){for(var e=[],t=0;t{"use strict";e.exports=t}},s={};function ae(e){var t=s[e];if(void 0!==t)return t.exports;t=s[e]={exports:{}};return r[e](t,t.exports,ae),t.exports}ae.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return ae.d(t,{a:t}),t},ae.d=(e,t)=>{for(var r in t)ae.o(t,r)&&!ae.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},ae.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),ae.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var oe={};return(()=>{"use strict";ae.r(oe),ae.d(oe,{Avatar:()=>r,BubbleGroup:()=>A,ChatBubble:()=>e,ChatFeed:()=>se,ChatMessagesContainer:()=>M,ChatScrollArea:()=>m,DateRow:()=>W,IsTyping:()=>h,LastSeenAvatar:()=>B,LoadingMessages:()=>z,SystemChatBubble:()=>K,defaultAvatarClasses:()=>o,defaultAvatarStyles:()=>a,defaultBubbleGroupClasses:()=>w,defaultBubbleGroupStyles:()=>_,defaultChatBubbleClasses:()=>j,defaultChatBubbleConfig:()=>N,defaultChatBubbleStyles:()=>E,defaultChatFeedClasses:()=>X,defaultChatFeedStyles:()=>Q,defaultChatMessagesContainerClasses:()=>x,defaultChatMessagesContainerStyles:()=>T,defaultChatScrollAreaClasses:()=>b,defaultChatScrollAreaStyles:()=>d,defaultDateRowClasses:()=>L,defaultDateRowStyles:()=>k,defaultIsTypingClasses:()=>n,defaultIsTypingStyles:()=>u,defaultLastSeenAvatarClasses:()=>y,defaultLastSeenAvatarStyles:()=>C,defaultLoadingMessagesClasses:()=>D,defaultLoadingMessagesStyle:()=>F,defaultSystemChatBubbleClasses:()=>V,defaultSystemChatBubbleStyles:()=>Y});var I=ae(297),i=ae(184),G=ae.n(i),E={chatBubbleWrapper:{position:"relative",marginBottom:2,display:"flex"},chatBubble:{position:"relative",borderTopRightRadius:7,borderTopLeftRadius:7,borderBottomRightRadius:7,borderBottomLeftRadius:7,marginRight:"auto",marginLeft:"auto",maxWidth:"80%",paddingTop:8,paddingBottom:14,paddingLeft:14,paddingRight:14},userChatBubbleOrientationNormal:{marginRight:0},recipientChatBubbleOrientationNormal:{marginLeft:0},recipientChatBubble:{},text:{fontSize:16,fontWeight:300,margin:0,marginRight:30},userFirstChatBubbleInGroup:{borderTopRightRadius:0},recipientFirstChatBubbleInGroup:{borderTopLeftRadius:0},userLastChatBubbleInGroup:{borderTopRightRadius:0},recipientLastChatBubbleInGroup:{borderTopLeftRadius:0},userCenterChatBubbleInGroup:{borderTopRightRadius:0,borderBottomRightRadius:0},recipientCenterChatBubbleInGroup:{borderBottomLeftRadius:0,borderTopLeftRadius:0},createdOn:{position:"absolute",right:14,bottom:2,fontSize:9,opacity:.5},isSend:{position:"absolute",right:2,bottom:1,fontSize:9,opacity:.5},lastSeenByContainer:{position:"absolute",right:-30,top:0,width:20,height:"100%"},loadingSpinnerColor:"currentColor",isSendIconColor:"currentColor"},j={chatBubbleWrapper:"react-bell-chat__chat-bubble__wrapper",isSend:"react-bell-chat__chat-bubble__is-send",chatBubble:"react-bell-chat__chat-bubble",userChatBubble:"react-bell-chat__chat-bubble--user",recipientChatBubble:"react-bell-chat__chat-bubble--recipient",text:"react-bell-chat__chat-bubble__text",userText:"react-bell-chat__chat-bubble__text--user",recipientText:"react-bell-chat__chat-bubble__text--recipient",createdOn:"react-bell-chat__chat-bubble__created-on",userCreatedOn:"react-bell-chat__chat-bubble__created-on--user",recipientCreatedOn:"react-bell-chat__chat-bubble__created-on--recipient",lastSeenByContainer:"react-bell-chat__chat-bubble__last-seen-by__container"},N={formatTime:function(e){return null==e?void 0:e.toLocaleTimeString([],{hour:"numeric",minute:"numeric",hour12:!0})}},P=function(){return(P=Object.assign||function(e){for(var t,r=1,s=arguments.length;ro[0]&&t[1]{"use strict";e.exports=t}},s={};function ae(e){var t=s[e];if(void 0!==t)return t.exports;t=s[e]={exports:{}};return r[e](t,t.exports,ae),t.exports}ae.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return ae.d(t,{a:t}),t},ae.d=(e,t)=>{for(var r in t)ae.o(t,r)&&!ae.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},ae.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),ae.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var oe={};return(()=>{"use strict";ae.r(oe),ae.d(oe,{Avatar:()=>r,BubbleGroup:()=>A,ChatBubble:()=>e,ChatFeed:()=>se,ChatMessagesContainer:()=>M,ChatScrollArea:()=>m,DateRow:()=>W,IsTyping:()=>h,LastSeenAvatar:()=>B,LoadingMessages:()=>z,SystemChatBubble:()=>K,defaultAvatarClasses:()=>o,defaultAvatarStyles:()=>a,defaultBubbleGroupClasses:()=>w,defaultBubbleGroupStyles:()=>_,defaultChatBubbleClasses:()=>j,defaultChatBubbleConfig:()=>N,defaultChatBubbleStyles:()=>E,defaultChatFeedClasses:()=>X,defaultChatFeedStyles:()=>Q,defaultChatMessagesContainerClasses:()=>x,defaultChatMessagesContainerStyles:()=>T,defaultChatScrollAreaClasses:()=>b,defaultChatScrollAreaStyles:()=>d,defaultDateRowClasses:()=>L,defaultDateRowStyles:()=>k,defaultIsTypingClasses:()=>n,defaultIsTypingStyles:()=>u,defaultLastSeenAvatarClasses:()=>y,defaultLastSeenAvatarStyles:()=>C,defaultLoadingMessagesClasses:()=>D,defaultLoadingMessagesStyle:()=>F,defaultSystemChatBubbleClasses:()=>V,defaultSystemChatBubbleStyles:()=>Y});var I=ae(297),i=ae(184),G=ae.n(i),E={chatBubbleWrapper:{position:"relative",marginBottom:2,display:"flex"},chatBubble:{position:"relative",borderTopRightRadius:7,borderTopLeftRadius:7,borderBottomRightRadius:7,borderBottomLeftRadius:7,marginRight:"auto",marginLeft:"auto",maxWidth:"80%",paddingTop:8,paddingBottom:14,paddingLeft:14,paddingRight:14},userChatBubbleOrientationNormal:{marginRight:0},recipientChatBubbleOrientationNormal:{marginLeft:0},recipientChatBubble:{},text:{fontSize:16,fontWeight:300,margin:0,marginRight:30,overflowWrap:"break-word",wordWrap:"break-word",hyphens:"auto"},userFirstChatBubbleInGroup:{borderTopRightRadius:0},recipientFirstChatBubbleInGroup:{borderTopLeftRadius:0},userLastChatBubbleInGroup:{borderTopRightRadius:0},recipientLastChatBubbleInGroup:{borderTopLeftRadius:0},userCenterChatBubbleInGroup:{borderTopRightRadius:0,borderBottomRightRadius:0},recipientCenterChatBubbleInGroup:{borderBottomLeftRadius:0,borderTopLeftRadius:0},createdOn:{position:"absolute",right:14,bottom:2,fontSize:9,opacity:.5},isSend:{position:"absolute",right:2,bottom:1,fontSize:9,opacity:.5},lastSeenByContainer:{position:"absolute",right:-30,top:0,width:20,height:"100%"},loadingSpinnerColor:"currentColor",isSendIconColor:"currentColor"},j={chatBubbleWrapper:"react-bell-chat__chat-bubble__wrapper",isSend:"react-bell-chat__chat-bubble__is-send",chatBubble:"react-bell-chat__chat-bubble",userChatBubble:"react-bell-chat__chat-bubble--user",recipientChatBubble:"react-bell-chat__chat-bubble--recipient",text:"react-bell-chat__chat-bubble__text",userText:"react-bell-chat__chat-bubble__text--user",recipientText:"react-bell-chat__chat-bubble__text--recipient",createdOn:"react-bell-chat__chat-bubble__created-on",userCreatedOn:"react-bell-chat__chat-bubble__created-on--user",recipientCreatedOn:"react-bell-chat__chat-bubble__created-on--recipient",lastSeenByContainer:"react-bell-chat__chat-bubble__last-seen-by__container"},N={formatTime:function(e){return null==e?void 0:e.toLocaleTimeString([],{hour:"numeric",minute:"numeric",hour12:!0})}},P=function(){return(P=Object.assign||function(e){for(var t,r=1,s=arguments.length;ro[0]&&t[1] { -/******/ __webpack_require__.h = () => ("b5d363816ccac9bfc08c") -/******/ })(); -/******/ -/******/ } -); -//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9yZWFjdC1iZWxsLWNoYXQvd2VicGFjay9ydW50aW1lL2dldEZ1bGxIYXNoIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztVQUFBLHNEIiwiZmlsZSI6IjU4NWY1N2ItaW5kZXgtd3BzLWhtci5qcyIsInNvdXJjZXNDb250ZW50IjpbIl9fd2VicGFja19yZXF1aXJlX18uaCA9ICgpID0+IChcImI1ZDM2MzgxNmNjYWM5YmZjMDhjXCIpIl0sInNvdXJjZVJvb3QiOiIifQ== \ No newline at end of file diff --git a/src/demo/wwwroot/index-585f57b-wps-hmr.json b/src/demo/wwwroot/index-585f57b-wps-hmr.json deleted file mode 100644 index bd746d7..0000000 --- a/src/demo/wwwroot/index-585f57b-wps-hmr.json +++ /dev/null @@ -1 +0,0 @@ -{"c":["index"],"r":[],"m":[]} \ No newline at end of file diff --git a/src/demo/wwwroot/index.html b/src/demo/wwwroot/index.html index 93e80fb..ffeb536 100644 --- a/src/demo/wwwroot/index.html +++ b/src/demo/wwwroot/index.html @@ -43,7 +43,7 @@ href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" /> - + diff --git a/src/lib/ChatBubble/styles.ts b/src/lib/ChatBubble/styles.ts index c1f01d6..a03d1e7 100644 --- a/src/lib/ChatBubble/styles.ts +++ b/src/lib/ChatBubble/styles.ts @@ -63,6 +63,9 @@ const styles: ChatBubbleStyles = { fontWeight: 300, margin: 0, marginRight: 30, + overflowWrap: 'break-word', + wordWrap: 'break-word', + hyphens: 'auto', } as React.CSSProperties, userFirstChatBubbleInGroup: { borderTopRightRadius: 0,