Merge pull request #263 from Wolox/issue-212-profile-avatar-user

Profile avatar

Author: Martín Callegari

README.md

@@ -150,6 +150,7 @@ export default App;
 |**subtitle**|string|NO|'This is your chat subtitle'|Subtitle of the widget|
 |**senderPlaceHolder**|string|NO|'Type a message...'|The placeholder of the message input|
 |**profileAvatar**|string|NO| |The profile image that will be set on the responses|
+|**profileClientAvatar**|string|NO| |The profile image that will be set on the client messages|
 |**titleAvatar**|string|NO| |The picture image that will be shown next to the chat title|
 |**showCloseButton**|boolean|NO|false|Show or hide the close button in full screen mode|
 |**fullScreenMode**|boolean|NO|false|Allow the use of full screen in full desktop mode|

src/components/Widget/components/Conversation/components/Messages/components/Message/styles.scss

@@ -6,6 +6,10 @@
   display: flex;
   white-space: pre-wrap;
   word-wrap: break-word;
+
+  &-client {
+    flex-direction: row-reverse;
+  }
 }
 
 .rcw-timestamp {
@@ -57,4 +61,8 @@
   height: 40px;
   border-radius: 100%;
   margin-right: 10px;
+
+  &-client {
+    margin: 0 0 0 10px;
+  }
 }

src/components/Widget/components/Conversation/components/Messages/index.tsx

@@ -5,16 +5,18 @@ import format from 'date-fns/format';
 import { scrollToBottom } from '../../../../../../utils/messages';
 import { MessageTypes, Link, CustomCompMessage, GlobalState } from '../../../../../../store/types';
 import { setBadgeCount, markAllMessagesRead } from '../../../../../../store/actions';
+import { MESSAGE_SENDER } from '../../../../../../constants';
 
 import Loader from './components/Loader';
 import './styles.scss';
 
 type Props = {
   showTimeStamp: boolean,
   profileAvatar?: string;
+  profileClientAvatar?: string;
 }
 
-function Messages({ profileAvatar, showTimeStamp }: Props) {
+function Messages({ profileAvatar, profileClientAvatar, showTimeStamp }: Props) {
   const dispatch = useDispatch();
   const { messages, typing, showChat, badgeCount } = useSelector((state: GlobalState) => ({
     messages: state.messages.messages,
@@ -47,13 +49,20 @@ function Messages({ profileAvatar, showTimeStamp }: Props) {
   //   }
   // }
 
+  const isClient = (sender) => sender === MESSAGE_SENDER.CLIENT;
+
   return (
     <div id="messages" className="rcw-messages-container" ref={messageRef}>
       {messages?.map((message, index) =>
-        <div className="rcw-message" key={`${index}-${format(message.timestamp, 'hh:mm')}`}>
-          {profileAvatar &&
-            message.showAvatar &&
-            <img src={profileAvatar} className="rcw-avatar" alt="profile" />
+        <div className={`rcw-message ${isClient(message.sender) ? 'rcw-message-client' : ''}`} 
+          key={`${index}-${format(message.timestamp, 'hh:mm')}`}>
+          {((profileAvatar && !isClient(message.sender)) || (profileClientAvatar && isClient(message.sender))) &&
+            message.showAvatar && 
+            <img 
+              src={isClient(message.sender) ? profileClientAvatar : profileAvatar} 
+              className={`rcw-avatar ${isClient(message.sender) ? 'rcw-avatar-client' : ''}`} 
+              alt="profile"
+            />
           }
           {getComponentToRender(message)}
         </div>

src/components/Widget/components/Conversation/index.tsx

@@ -26,6 +26,7 @@ type Props = {
   sendMessage: AnyFunction;
   toggleChat: AnyFunction;
   profileAvatar?: string;
+  profileClientAvatar?: string;
   titleAvatar?: string;
   onQuickButtonClicked?: AnyFunction;
   onTextInputChange?: (event: any) => void;
@@ -46,6 +47,7 @@ function Conversation({
   sendMessage,
   toggleChat,
   profileAvatar,
+  profileClientAvatar,
   titleAvatar,
   onQuickButtonClicked,
   onTextInputChange,
@@ -112,7 +114,11 @@ function Conversation({
         showCloseButton={showCloseButton}
         titleAvatar={titleAvatar}
       />
-      <Messages profileAvatar={profileAvatar} showTimeStamp={showTimeStamp} />
+      <Messages
+        profileAvatar={profileAvatar}
+        profileClientAvatar={profileClientAvatar}
+        showTimeStamp={showTimeStamp}
+      />
       <QuickButtons onQuickButtonClicked={onQuickButtonClicked} />
       {emojis && pickerStatus && (<Picker 
         style={{ position: 'absolute', bottom: pickerOffset, left: '0', width: '100%' }}

src/components/Widget/index.tsx

@@ -12,6 +12,7 @@ type Props = {
   subtitle: string;
   senderPlaceHolder: string;
   profileAvatar?: string;
+  profileClientAvatar?: string;
   showCloseButton: boolean;
   fullScreenMode: boolean;
   autofocus: boolean;
@@ -41,6 +42,7 @@ function Widget({
   subtitle,
   senderPlaceHolder,
   profileAvatar,
+  profileClientAvatar,
   showCloseButton,
   fullScreenMode,
   autofocus,
@@ -95,6 +97,7 @@ function Widget({
       subtitle={subtitle}
       senderPlaceHolder={senderPlaceHolder}
       profileAvatar={profileAvatar}
+      profileClientAvatar={profileClientAvatar}
       showCloseButton={showCloseButton}
       fullScreenMode={fullScreenMode}
       autofocus={autofocus}

src/components/Widget/layout.tsx

@@ -21,6 +21,7 @@ type Props = {
   senderPlaceHolder: string;
   onQuickButtonClicked: AnyFunction;
   profileAvatar?: string;
+  profileClientAvatar?: string;
   showCloseButton: boolean;
   fullScreenMode: boolean;
   autofocus: boolean;
@@ -49,6 +50,7 @@ function WidgetLayout({
   senderPlaceHolder,
   onQuickButtonClicked,
   profileAvatar,
+  profileClientAvatar,
   showCloseButton,
   fullScreenMode,
   autofocus,
@@ -132,6 +134,7 @@ function WidgetLayout({
           sendMessage={onSendMessage}
           senderPlaceHolder={senderPlaceHolder}
           profileAvatar={profileAvatar}
+          profileClientAvatar={profileClientAvatar}
           toggleChat={onToggleConversation}
           showCloseButton={showCloseButton}
           disabledInput={dissableInput}

src/index.tsx

@@ -17,6 +17,7 @@ type Props = {
   fullScreenMode?: boolean;
   autofocus?: boolean;
   profileAvatar?: string;
+  profileClientAvatar?: string;
   launcher?: AnyFunction;
   handleTextInputChange?: (event: any) => void;
   chatId?: string;
@@ -44,6 +45,7 @@ function ConnectedWidget({
   fullScreenMode,
   autofocus,
   profileAvatar,
+  profileClientAvatar,
   launcher,
   handleNewUserMessage,
   handleQuickButtonClicked,
@@ -73,6 +75,7 @@ function ConnectedWidget({
         handleQuickButtonClicked={handleQuickButtonClicked}
         senderPlaceHolder={senderPlaceHolder}
         profileAvatar={profileAvatar}
+        profileClientAvatar={profileClientAvatar}
         showCloseButton={showCloseButton}
         fullScreenMode={fullScreenMode}
         autofocus={autofocus}

src/store/reducers/messagesReducer.ts

@@ -22,8 +22,8 @@ const initialState = {
 };
 
 const messagesReducer = {
-  [ADD_NEW_USER_MESSAGE]: (state: MessagesState, { text, id }) =>
-    ({ ...state, messages: [...state.messages, createNewMessage(text, MESSAGE_SENDER.CLIENT, id)] }),
+  [ADD_NEW_USER_MESSAGE]: (state: MessagesState, { text, showClientAvatar, id }) =>
+    ({ ...state, messages: [...state.messages, createNewMessage(text, MESSAGE_SENDER.CLIENT, id)]}),
 
   [ADD_NEW_RESPONSE_MESSAGE]: (state: MessagesState, { text, id }) =>
     ({ ...state, messages: [...state.messages, createNewMessage(text, MESSAGE_SENDER.RESPONSE, id)], badgeCount: state.badgeCount + 1 }),

src/utils/messages.ts

@@ -8,14 +8,18 @@ import QuickButton from '../components/Widget/components/Conversation/components
 
 import { MESSAGES_TYPES, MESSAGE_SENDER, MESSAGE_BOX_SCROLL_DURATION } from '../constants';
 
-export function createNewMessage(text: string, sender: string, id?: string): MessageI {
+export function createNewMessage(
+  text: string,
+  sender: string,
+  id?: string,
+): MessageI {
   return {
     type: MESSAGES_TYPES.TEXT,
     component: Message,
     text,
     sender,
     timestamp: new Date(),
-    showAvatar: sender === MESSAGE_SENDER.RESPONSE,
+    showAvatar: true,
     customId: id,
     unread: sender === MESSAGE_SENDER.RESPONSE
   };