diff --git a/.eslintrc.js b/.eslintrc.js index 0f62479..051130e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -15,8 +15,8 @@ module.exports = { extends: [ 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin - 'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier - 'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array. + 'prettier', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier + 'plugin:prettier/recommended', ], rules: { 'react/no-children-prop': 'off', diff --git a/.prettierrc b/.prettierrc index f0b1d50..a839ef7 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,6 @@ "semi": true, "singleQuote": true, "trailingComma": "es5", - "useTabs": false + "useTabs": false, + "arrowParens": "avoid" } diff --git a/docs/dist/main.c91415e8f22ebceb86a6.css b/docs/dist/main.a64367dc5d5068bdfc33.css similarity index 100% rename from docs/dist/main.c91415e8f22ebceb86a6.css rename to docs/dist/main.a64367dc5d5068bdfc33.css diff --git a/docs/dist/main.c91415e8f22ebceb86a6.js b/docs/dist/main.a64367dc5d5068bdfc33.js similarity index 77% rename from docs/dist/main.c91415e8f22ebceb86a6.js rename to docs/dist/main.a64367dc5d5068bdfc33.js index eb9c0c9..6e8c4e5 100644 --- a/docs/dist/main.c91415e8f22ebceb86a6.js +++ b/docs/dist/main.a64367dc5d5068bdfc33.js @@ -1,4 +1,4 @@ -(()=>{var n={710:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Ae});var j=n(294),r=n(184),I=n.n(r),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; +(()=>{var n={710:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Ae});var j=n(294),r=n(184),N=n.n(r),A={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"},L="react-bell-chat__chat-bubble__wrapper",B="react-bell-chat__chat-bubble__is-send",D="react-bell-chat__chat-bubble",U="react-bell-chat__chat-bubble--user",z="react-bell-chat__chat-bubble--recipient",F="react-bell-chat__chat-bubble__text",W="react-bell-chat__chat-bubble__text--user",H="react-bell-chat__chat-bubble__text--recipient",V="react-bell-chat__chat-bubble__created-on",G="react-bell-chat__chat-bubble__created-on--user",$="react-bell-chat__chat-bubble__created-on--recipient",Q="react-bell-chat__chat-bubble__last-seen-by__container",K={formatTime:function(e){return null==e?void 0:e.toLocaleTimeString([],{hour:"numeric",minute:"numeric",hour12:!0})}},q=function(){return(q=Object.assign||function(e){for(var t,n=1,r=arguments.length;nl[0]&&t[1]{var n; /*! Copyright (c) 2018 Jed Watson. Licensed under the MIT License (MIT), see diff --git a/docs/index.html b/docs/index.html index 4027ee3..e823474 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 bf4b247..a55a862 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 ne(e){var t=s[e];if(void 0!==t)return t.exports;t=s[e]={exports:{}};return r[e](t,t.exports,ne),t.exports}ne.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return ne.d(t,{a:t}),t},ne.d=(e,t)=>{for(var r in t)ne.o(t,r)&&!ne.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},ne.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),ne.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var ae={};return(()=>{"use strict";ne.r(ae),ne.d(ae,{Avatar:()=>s,BubbleGroup:()=>O,ChatBubble:()=>t,ChatFeed:()=>re,ChatMessagesContainer:()=>R,ChatScrollArea:()=>f,DateRow:()=>H,IsTyping:()=>h,LastSeenAvatar:()=>S,LoadingMessages:()=>U,SystemChatBubble:()=>J,defaultAvatarClasses:()=>o,defaultAvatarStyles:()=>a,defaultBubbleGroupClasses:()=>B,defaultBubbleGroupStyles:()=>w,defaultChatBubbleClasses:()=>j,defaultChatBubbleConfig:()=>N,defaultChatBubbleStyles:()=>E,defaultChatFeedClasses:()=>Q,defaultChatFeedStyles:()=>K,defaultChatMessagesContainerClasses:()=>A,defaultChatMessagesContainerStyles:()=>x,defaultChatScrollAreaClasses:()=>b,defaultChatScrollAreaStyles:()=>d,defaultDateRowClasses:()=>M,defaultDateRowStyles:()=>L,defaultIsTypingClasses:()=>n,defaultIsTypingStyles:()=>i,defaultLastSeenAvatarClasses:()=>v,defaultLastSeenAvatarStyles:()=>y,defaultLoadingMessagesClasses:()=>F,defaultLoadingMessagesStyle:()=>W,defaultSystemChatBubbleClasses:()=>z,defaultSystemChatBubbleStyles:()=>V});var I=ne(297),e=ne(184),G=ne.n(e),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]{"use strict";e.exports=t}},s={};function ne(e){var t=s[e];if(void 0!==t)return t.exports;t=s[e]={exports:{}};return r[e](t,t.exports,ne),t.exports}ne.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return ne.d(t,{a:t}),t},ne.d=(e,t)=>{for(var r in t)ne.o(t,r)&&!ne.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},ne.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),ne.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var ae={};return(()=>{"use strict";ne.r(ae),ne.d(ae,{Avatar:()=>s,BubbleGroup:()=>O,ChatBubble:()=>t,ChatFeed:()=>re,ChatMessagesContainer:()=>R,ChatScrollArea:()=>f,DateRow:()=>H,IsTyping:()=>h,LastSeenAvatar:()=>S,LoadingMessages:()=>U,SystemChatBubble:()=>J,defaultAvatarClasses:()=>o,defaultAvatarStyles:()=>a,defaultBubbleGroupClasses:()=>B,defaultBubbleGroupStyles:()=>w,defaultChatBubbleClasses:()=>N,defaultChatBubbleConfig:()=>P,defaultChatBubbleStyles:()=>j,defaultChatFeedClasses:()=>Q,defaultChatFeedStyles:()=>K,defaultChatMessagesContainerClasses:()=>A,defaultChatMessagesContainerStyles:()=>x,defaultChatScrollAreaClasses:()=>b,defaultChatScrollAreaStyles:()=>d,defaultDateRowClasses:()=>M,defaultDateRowStyles:()=>L,defaultIsTypingClasses:()=>n,defaultIsTypingStyles:()=>i,defaultLastSeenAvatarClasses:()=>v,defaultLastSeenAvatarStyles:()=>y,defaultLoadingMessagesClasses:()=>F,defaultLoadingMessagesStyle:()=>W,defaultSystemChatBubbleClasses:()=>z,defaultSystemChatBubbleStyles:()=>V});var G=ne(297),e=ne(184),E=ne.n(e),j={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"},N={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"},P={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,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 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';\r\nimport { Author } from '../Author';\r\nimport classnames from 'classnames';\r\nimport { AvatarStyles, defaultAvatarStyles } from './styles';\r\nimport { AvatarClasses, defaultAvatarClasses } from './classes';\r\nimport { typedMemo } from '../utils/typedMemo';\r\n\r\nexport * from './classes';\r\nexport * from './styles';\r\n\r\nexport interface AvatarProps {\r\n author: Author;\r\n styles?: AvatarStyles;\r\n classes?: AvatarClasses;\r\n}\r\n\r\nfunction Avatar(props: AvatarProps) {\r\n const { author, classes, styles } = props;\r\n const style = {\r\n ...defaultAvatarStyles.container,\r\n ...styles?.container,\r\n ...(author?.bgImageUrl\r\n ? ({\r\n backgroundImage: `url(${author?.bgImageUrl})`,\r\n backgroundSize: 'cover',\r\n } as React.CSSProperties)\r\n : {}),\r\n };\r\n return (\r\n author && (\r\n \r\n \r\n {author.bgImageUrl\r\n ? null\r\n : author.avatarName\r\n ? author.avatarName\r\n : author.name\r\n .split(' ')\r\n .map((part) => part[0])\r\n .join('')\r\n .toUpperCase()\r\n .substr(0, 3)}\r\n \r\n \r\n )\r\n );\r\n}\r\nconst Memoized = typedMemo(Avatar);\r\nexport { Memoized as Avatar };\r\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';\r\nimport {\r\n ChatBubbleProps,\r\n ChatBubbleStyles,\r\n MessageRenderProps,\r\n} from '../ChatBubble';\r\nimport { Message } from '../';\r\nimport { Author } from '../Author';\r\nimport { AvatarProps, AvatarClasses } from '../Avatar';\r\nimport {\r\n LastSeenAvatarProps,\r\n LastSeenAvatarStyles,\r\n LastSeenAvatarClasses,\r\n} from '../LastSeenAvatar';\r\nimport { AvatarStyles } from './../Avatar';\r\nimport classnames from 'classnames';\r\nimport { ChatBubbleClasses } from './../ChatBubble';\r\nimport { BubbleGroupClasses, defaultBubbleGroupClasses } from './classes';\r\nimport { BubbleGroupStyles, defaultBubbleGroupStyles } from './styles';\r\nimport { ComponentType } from '../utils/componentType';\r\nimport { typedMemo } from '../utils/typedMemo';\r\n\r\nexport * from './styles';\r\nexport * from './classes';\r\n\r\nexport interface BubbleGroupProps {\r\n yourAuthorId?: number;\r\n messages: Message[];\r\n author: Author;\r\n authors?: Author[];\r\n showRecipientAvatar?: boolean;\r\n bubblesCentered?: boolean;\r\n\r\n classes?: BubbleGroupClasses;\r\n chatBubbleClasses?: ChatBubbleClasses;\r\n avatarClasses?: AvatarClasses;\r\n lastSeenAvatarClasses?: LastSeenAvatarClasses;\r\n\r\n styles?: BubbleGroupStyles;\r\n chatBubbleStyles?: ChatBubbleStyles;\r\n avatarStyles?: AvatarStyles;\r\n lastSeenAvatarStyles?: LastSeenAvatarStyles;\r\n\r\n CustomAvatar?: ComponentType>;\r\n CustomMessageRender?: ComponentType>;\r\n CustomLastSeenAvatar?: ComponentType>;\r\n CustomChatBubble?: ComponentType>;\r\n CustomSystemChatBubble?: ComponentType>;\r\n\r\n showRecipientLastSeenMessage?: boolean;\r\n}\r\n\r\nfunction BubbleGroup(props: BubbleGroupProps) {\r\n const {\r\n messages,\r\n author,\r\n\r\n CustomAvatar,\r\n\r\n styles,\r\n\r\n bubblesCentered,\r\n\r\n chatBubbleStyles,\r\n lastSeenAvatarStyles,\r\n avatarStyles,\r\n\r\n classes,\r\n chatBubbleClasses,\r\n lastSeenAvatarClasses,\r\n avatarClasses,\r\n\r\n showRecipientAvatar,\r\n CustomChatBubble,\r\n CustomSystemChatBubble,\r\n showRecipientLastSeenMessage,\r\n CustomLastSeenAvatar,\r\n CustomMessageRender,\r\n } = props;\r\n\r\n const messageNodes = messages.map((message, i) => {\r\n const _props: ChatBubbleProps = {\r\n yourAuthorId: props.yourAuthorId,\r\n author,\r\n message,\r\n bubblesCentered,\r\n\r\n styles: chatBubbleStyles,\r\n lastSeenAvatarStyles,\r\n\r\n classes: chatBubbleClasses,\r\n lastSeenAvatarClasses,\r\n\r\n isFirstInGroup: i === 0,\r\n isLastInGroup: i === messages.length - 1 && messages.length > 1,\r\n isCenterInGroup: i < messages.length - 1 && messages.length > 1,\r\n lastSeenByAuthors:\r\n props.authors &&\r\n props.authors.filter(\r\n (a) =>\r\n a.lastSeenMessageId !== undefined &&\r\n a.lastSeenMessageId === message.id\r\n ),\r\n showRecipientLastSeenMessage,\r\n CustomLastSeenAvatar,\r\n CustomMessageRender,\r\n };\r\n return message.authorId !== undefined ? (\r\n \r\n ) : (\r\n \r\n );\r\n });\r\n\r\n const youAreAuthor = author && props.yourAuthorId === author.id;\r\n return (\r\n \r\n {!youAreAuthor && showRecipientAvatar && author && CustomAvatar && (\r\n \r\n )}\r\n {messageNodes}\r\n \r\n );\r\n}\r\n\r\nconst Memoized = typedMemo(BubbleGroup);\r\nexport { Memoized as BubbleGroup };\r\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 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 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","inner","argType","push","Array","isArray","apply","toString","Object","prototype","key","call","join","default","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","n","getter","__esModule","d","definition","o","defineProperty","enumerable","get","obj","prop","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) 2018 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)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString === Object.prototype.toString) {\n\t\t\t\t\tfor (var key in arg) {\n\t\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tclasses.push(arg.toString());\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 isSend,\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';\r\nimport { Author } from '../Author';\r\nimport classnames from 'classnames';\r\nimport { AvatarStyles, defaultAvatarStyles } from './styles';\r\nimport { AvatarClasses, defaultAvatarClasses } from './classes';\r\nimport { typedMemo } from '../utils/typedMemo';\r\n\r\nexport * from './classes';\r\nexport * from './styles';\r\n\r\nexport interface AvatarProps {\r\n author: Author;\r\n styles?: AvatarStyles;\r\n classes?: AvatarClasses;\r\n}\r\n\r\nfunction Avatar(props: AvatarProps) {\r\n const { author, classes, styles } = props;\r\n const style = {\r\n ...defaultAvatarStyles.container,\r\n ...styles?.container,\r\n ...(author?.bgImageUrl\r\n ? ({\r\n backgroundImage: `url(${author?.bgImageUrl})`,\r\n backgroundSize: 'cover',\r\n } as React.CSSProperties)\r\n : {}),\r\n };\r\n return (\r\n author && (\r\n \r\n \r\n {author.bgImageUrl\r\n ? null\r\n : author.avatarName\r\n ? author.avatarName\r\n : author.name\r\n .split(' ')\r\n .map((part) => part[0])\r\n .join('')\r\n .toUpperCase()\r\n .substr(0, 3)}\r\n \r\n \r\n )\r\n );\r\n}\r\nconst Memoized = typedMemo(Avatar);\r\nexport { Memoized as Avatar };\r\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 const { 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';\r\nimport {\r\n ChatBubbleProps,\r\n ChatBubbleStyles,\r\n MessageRenderProps,\r\n} from '../ChatBubble';\r\nimport { Message } from '../';\r\nimport { Author } from '../Author';\r\nimport { AvatarProps, AvatarClasses } from '../Avatar';\r\nimport {\r\n LastSeenAvatarProps,\r\n LastSeenAvatarStyles,\r\n LastSeenAvatarClasses,\r\n} from '../LastSeenAvatar';\r\nimport { AvatarStyles } from './../Avatar';\r\nimport classnames from 'classnames';\r\nimport { ChatBubbleClasses } from './../ChatBubble';\r\nimport { BubbleGroupClasses, defaultBubbleGroupClasses } from './classes';\r\nimport { BubbleGroupStyles, defaultBubbleGroupStyles } from './styles';\r\nimport { ComponentType } from '../utils/componentType';\r\nimport { typedMemo } from '../utils/typedMemo';\r\n\r\nexport * from './styles';\r\nexport * from './classes';\r\n\r\nexport interface BubbleGroupProps {\r\n yourAuthorId?: number;\r\n messages: Message[];\r\n author: Author;\r\n authors?: Author[];\r\n showRecipientAvatar?: boolean;\r\n bubblesCentered?: boolean;\r\n\r\n classes?: BubbleGroupClasses;\r\n chatBubbleClasses?: ChatBubbleClasses;\r\n avatarClasses?: AvatarClasses;\r\n lastSeenAvatarClasses?: LastSeenAvatarClasses;\r\n\r\n styles?: BubbleGroupStyles;\r\n chatBubbleStyles?: ChatBubbleStyles;\r\n avatarStyles?: AvatarStyles;\r\n lastSeenAvatarStyles?: LastSeenAvatarStyles;\r\n\r\n CustomAvatar?: ComponentType>;\r\n CustomMessageRender?: ComponentType>;\r\n CustomLastSeenAvatar?: ComponentType>;\r\n CustomChatBubble?: ComponentType>;\r\n CustomSystemChatBubble?: ComponentType>;\r\n\r\n showRecipientLastSeenMessage?: boolean;\r\n}\r\n\r\nfunction BubbleGroup(props: BubbleGroupProps) {\r\n const {\r\n messages,\r\n author,\r\n\r\n CustomAvatar,\r\n\r\n styles,\r\n\r\n bubblesCentered,\r\n\r\n chatBubbleStyles,\r\n lastSeenAvatarStyles,\r\n avatarStyles,\r\n\r\n classes,\r\n chatBubbleClasses,\r\n lastSeenAvatarClasses,\r\n avatarClasses,\r\n\r\n showRecipientAvatar,\r\n CustomChatBubble,\r\n CustomSystemChatBubble,\r\n showRecipientLastSeenMessage,\r\n CustomLastSeenAvatar,\r\n CustomMessageRender,\r\n } = props;\r\n\r\n const messageNodes = messages.map((message, i) => {\r\n const _props: ChatBubbleProps = {\r\n yourAuthorId: props.yourAuthorId,\r\n author,\r\n message,\r\n bubblesCentered,\r\n\r\n styles: chatBubbleStyles,\r\n lastSeenAvatarStyles,\r\n\r\n classes: chatBubbleClasses,\r\n lastSeenAvatarClasses,\r\n\r\n isFirstInGroup: i === 0,\r\n isLastInGroup: i === messages.length - 1 && messages.length > 1,\r\n isCenterInGroup: i < messages.length - 1 && messages.length > 1,\r\n lastSeenByAuthors:\r\n props.authors &&\r\n props.authors.filter(\r\n (a) =>\r\n a.lastSeenMessageId !== undefined &&\r\n a.lastSeenMessageId === message.id\r\n ),\r\n showRecipientLastSeenMessage,\r\n CustomLastSeenAvatar,\r\n CustomMessageRender,\r\n };\r\n return message.authorId !== undefined ? (\r\n \r\n ) : (\r\n \r\n );\r\n });\r\n\r\n const youAreAuthor = author && props.yourAuthorId === author.id;\r\n return (\r\n \r\n {!youAreAuthor && showRecipientAvatar && author && CustomAvatar && (\r\n \r\n )}\r\n {messageNodes}\r\n \r\n );\r\n}\r\n\r\nconst Memoized = typedMemo(BubbleGroup);\r\nexport { Memoized as BubbleGroup };\r\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 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 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 } = this.props;\n const { 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 bd0b9fb..6e9da7a 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 ne(e){var t=s[e];if(void 0!==t)return t.exports;t=s[e]={exports:{}};return r[e](t,t.exports,ne),t.exports}ne.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return ne.d(t,{a:t}),t},ne.d=(e,t)=>{for(var r in t)ne.o(t,r)&&!ne.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},ne.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),ne.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var ae={};return(()=>{"use strict";ne.r(ae),ne.d(ae,{Avatar:()=>s,BubbleGroup:()=>O,ChatBubble:()=>t,ChatFeed:()=>re,ChatMessagesContainer:()=>R,ChatScrollArea:()=>f,DateRow:()=>H,IsTyping:()=>h,LastSeenAvatar:()=>S,LoadingMessages:()=>U,SystemChatBubble:()=>J,defaultAvatarClasses:()=>o,defaultAvatarStyles:()=>a,defaultBubbleGroupClasses:()=>B,defaultBubbleGroupStyles:()=>w,defaultChatBubbleClasses:()=>j,defaultChatBubbleConfig:()=>N,defaultChatBubbleStyles:()=>E,defaultChatFeedClasses:()=>Q,defaultChatFeedStyles:()=>K,defaultChatMessagesContainerClasses:()=>A,defaultChatMessagesContainerStyles:()=>x,defaultChatScrollAreaClasses:()=>b,defaultChatScrollAreaStyles:()=>d,defaultDateRowClasses:()=>M,defaultDateRowStyles:()=>L,defaultIsTypingClasses:()=>n,defaultIsTypingStyles:()=>i,defaultLastSeenAvatarClasses:()=>v,defaultLastSeenAvatarStyles:()=>y,defaultLoadingMessagesClasses:()=>F,defaultLoadingMessagesStyle:()=>W,defaultSystemChatBubbleClasses:()=>z,defaultSystemChatBubbleStyles:()=>V});var I=ne(297),e=ne(184),G=ne.n(e),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]{"use strict";e.exports=t}},s={};function ne(e){var t=s[e];if(void 0!==t)return t.exports;t=s[e]={exports:{}};return r[e](t,t.exports,ne),t.exports}ne.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return ne.d(t,{a:t}),t},ne.d=(e,t)=>{for(var r in t)ne.o(t,r)&&!ne.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},ne.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),ne.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var ae={};return(()=>{"use strict";ne.r(ae),ne.d(ae,{Avatar:()=>s,BubbleGroup:()=>O,ChatBubble:()=>t,ChatFeed:()=>re,ChatMessagesContainer:()=>R,ChatScrollArea:()=>f,DateRow:()=>H,IsTyping:()=>h,LastSeenAvatar:()=>S,LoadingMessages:()=>U,SystemChatBubble:()=>J,defaultAvatarClasses:()=>o,defaultAvatarStyles:()=>a,defaultBubbleGroupClasses:()=>B,defaultBubbleGroupStyles:()=>w,defaultChatBubbleClasses:()=>N,defaultChatBubbleConfig:()=>P,defaultChatBubbleStyles:()=>j,defaultChatFeedClasses:()=>Q,defaultChatFeedStyles:()=>K,defaultChatMessagesContainerClasses:()=>A,defaultChatMessagesContainerStyles:()=>x,defaultChatScrollAreaClasses:()=>b,defaultChatScrollAreaStyles:()=>d,defaultDateRowClasses:()=>M,defaultDateRowStyles:()=>L,defaultIsTypingClasses:()=>n,defaultIsTypingStyles:()=>i,defaultLastSeenAvatarClasses:()=>v,defaultLastSeenAvatarStyles:()=>y,defaultLoadingMessagesClasses:()=>F,defaultLoadingMessagesStyle:()=>W,defaultSystemChatBubbleClasses:()=>z,defaultSystemChatBubbleStyles:()=>V});var G=ne(297),e=ne(184),E=ne.n(e),j={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"},N={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"},P={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,r=1,s=arguments.length;ro[0]&&t[1] { })); } else { handleIsTyping(1); - let _firstAuthorTimer = window.setInterval(() => handleIsTyping(1), 4000); + const _firstAuthorTimer = window.setInterval( + () => handleIsTyping(1), + 4000 + ); handleIsTyping(2); - let _secondAuthorTimer = window.setInterval( + const _secondAuthorTimer = window.setInterval( () => handleIsTyping(2), 5200 ); diff --git a/src/lib/ChatBubble/index.tsx b/src/lib/ChatBubble/index.tsx index 1b2e9e2..8311140 100644 --- a/src/lib/ChatBubble/index.tsx +++ b/src/lib/ChatBubble/index.tsx @@ -87,6 +87,7 @@ export function ChatBubble(props: ChatBubbleProps) { userCreatedOn, recipientCreatedOn, isSendIconColor, + isSend, loadingSpinnerColor, lastSeenByContainer, } = styles ?? {}; @@ -231,6 +232,7 @@ export function ChatBubble(props: ChatBubbleProps) { if ( (this.props.messages.length !== prevProps.messages.length || this.props.authors?.some?.( - (a) => + a => a.isTyping !== - prevProps.authors?.find?.((_a) => a.id === _a.id)?.isTyping + prevProps.authors?.find?.(_a => a.id === _a.id)?.isTyping )) && snapshot && snapshot.wasScrolledToBottom @@ -273,11 +273,11 @@ export class ChatFeed // First group by days const groups = groupBy( messages, - (item) => item.createdOn && item.createdOn.toDateString() + item => item.createdOn && item.createdOn.toDateString() ); let messageNodes: React.ReactNode[] = []; let jsxKey = 0; - Object.keys(groups).forEach((key) => { + Object.keys(groups).forEach(key => { let group = []; const messagesGroup = groups[key]; if ( @@ -305,7 +305,7 @@ export class ChatFeed const messageGroup = group; const author = this.props.authors && - this.props.authors.filter((a) => a.id === message.authorId)[0]; + this.props.authors.filter(a => a.id === message.authorId)[0]; group = []; jsxKey++; return ( @@ -350,7 +350,8 @@ export class ChatFeed } render() { - let { styles, classes, isTypingStyles, isTypingClasses } = this.props; + let { styles, classes } = this.props; + const { isTypingStyles, isTypingClasses } = this.props; if (!styles) { styles = {}; } @@ -368,7 +369,7 @@ export class ChatFeed const typingAuthors = this.props.authors && this.props.authors.filter( - (a) => a.isTyping && a.id !== this.props.yourAuthorId + a => a.isTyping && a.id !== this.props.yourAuthorId ); return ( @@ -427,7 +428,7 @@ export class ChatFeed private async onLoadOldMessages() { if (!this.state.isLoadingMessages && this.props.hasOldMessages) { - await new Promise((resolve) => { + await new Promise(resolve => { this.setState( { isLoadingMessages: true, @@ -438,7 +439,7 @@ export class ChatFeed if (this.props.onLoadOldMessages) { await this.props.onLoadOldMessages(); } - await new Promise((resolve) => { + await new Promise(resolve => { this.setState( { isLoadingMessages: false, diff --git a/src/lib/LastSeenAvatar/index.tsx b/src/lib/LastSeenAvatar/index.tsx index bba698f..0efbe45 100644 --- a/src/lib/LastSeenAvatar/index.tsx +++ b/src/lib/LastSeenAvatar/index.tsx @@ -16,7 +16,7 @@ export interface LastSeenAvatarProps { } function LastSeenAvatar(props: LastSeenAvatarProps) { - let { styles, classes, index, mouseOver, author } = props; + const { styles, classes, index, mouseOver, author } = props; const style = React.useMemo( () => ({