Profile avatar - show client avatar param removed from user message function

Author: renzowolox

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

@@ -56,11 +56,13 @@ function Messages({ profileAvatar, profileClientAvatar, showTimeStamp }: Props)
       {messages?.map((message, index) =>
         <div className={`rcw-message ${isClient(message.sender) ? 'rcw-message-client' : ''}`} 
           key={`${index}-${format(message.timestamp, 'hh:mm')}`}>
-          {(profileAvatar || (profileClientAvatar && isClient(message.sender))) &&
-            message.showAvatar &&
-            <img src={isClient(message.sender) ? profileClientAvatar : profileAvatar} className={
-              `rcw-avatar ${isClient(message.sender) ? 'rcw-avatar-client' : ''}`
-            } alt="profile" />
+          {((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/index.tsx

@@ -72,7 +72,7 @@ function Widget({
     }
 
     handleSubmit?.(userInput);
-    dispatch(addUserMessage(userInput, !!profileClientAvatar));
+    dispatch(addUserMessage(userInput));
     handleNewUserMessage(userInput);
   }
 

src/store/actions/index.ts

@@ -15,11 +15,10 @@ export function toggleInputDisabled(): actionsTypes.ToggleInputDisabled {
   };
 }
 
-export function addUserMessage(text: string, showClientAvatar: boolean, id?: string): actionsTypes.AddUserMessage {
+export function addUserMessage(text: string, id?: string): actionsTypes.AddUserMessage {
   return {
     type: actionsTypes.ADD_NEW_USER_MESSAGE,
     text,
-    showClientAvatar,
     id
   };
 }

src/store/actions/types.ts

@@ -29,7 +29,6 @@ export interface ToggleInputDisabled {
 export interface AddUserMessage {
   type: typeof ADD_NEW_USER_MESSAGE;
   text: string;
-  showClientAvatar: boolean;
   id?: string;
 }
 

src/store/dispatcher.ts

@@ -4,8 +4,8 @@ import store from '.';
 import * as actions from './actions';
 import { LinkParams, ImageState } from './types';
 
-export function addUserMessage(text: string, showClientAvatar: boolean, id?: string) {
-  store.dispatch(actions.addUserMessage(text, showClientAvatar, id));
+export function addUserMessage(text: string, id?: string) {
+  store.dispatch(actions.addUserMessage(text, id));
 }
 
 export function addResponseMessage(text: string, id?: string) {

src/store/reducers/messagesReducer.ts

@@ -23,12 +23,7 @@ const initialState = {
 
 const messagesReducer = {
   [ADD_NEW_USER_MESSAGE]: (state: MessagesState, { text, showClientAvatar, id }) =>
-    ({ ...state, messages: [...state.messages, createNewMessage(
-      text,
-      MESSAGE_SENDER.CLIENT,
-      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

@@ -11,7 +11,6 @@ import { MESSAGES_TYPES, MESSAGE_SENDER, MESSAGE_BOX_SCROLL_DURATION } from '../
 export function createNewMessage(
   text: string,
   sender: string,
-  showClientAvatar: boolean,
   id?: string,
 ): MessageI {
   return {
@@ -20,7 +19,7 @@ export function createNewMessage(
     text,
     sender,
     timestamp: new Date(),
-    showAvatar: sender === MESSAGE_SENDER.RESPONSE || showClientAvatar,
+    showAvatar: true,
     customId: id,
     unread: sender === MESSAGE_SENDER.RESPONSE
   };