FLXAGNTUI-202: Participant name map

src/components/MessageBubble.tsx

@@ -39,12 +39,14 @@ export const MessageBubble = ({
 }) => {
     const [read, setRead] = useState(false);
     const [isMouseDown, setIsMouseDown] = useState(false);
-    const { conversationsClient, participants, users, fileAttachmentConfig } = useSelector((state: AppState) => ({
-        conversationsClient: state.chat.conversationsClient,
-        participants: state.chat.participants,
-        users: state.chat.users,
-        fileAttachmentConfig: state.config.fileAttachment
-    }));
+    const { conversationsClient, participants, fileAttachmentConfig, participantNames } = useSelector(
+        (state: AppState) => ({
+            conversationsClient: state.chat.conversationsClient,
+            participants: state.chat.participants,
+            fileAttachmentConfig: state.config.fileAttachment,
+            participantNames: state.chat.participantNames
+        })
+    );
     const messageRef = useRef<HTMLDivElement>(null);
 
     const belongsToCurrentUser = message.author === conversationsClient?.user.identity;
@@ -54,7 +56,7 @@ export const MessageBubble = ({
             const getOtherParticipants = participants.filter((p) => p.identity !== conversationsClient?.user.identity);
             setRead(
                 Boolean(getOtherParticipants.length) &&
-                    getOtherParticipants.every((p) => p.lastReadMessageIndex === message.index)
+                getOtherParticipants.every((p) => p.lastReadMessageIndex === message.index)
             );
         } else {
             setRead(false);
@@ -109,7 +111,8 @@ export const MessageBubble = ({
         }
     };
 
-    const author = users?.find((u) => u.identity === message.author)?.friendlyName || message.author;
+    // const author = users?.find((u) => u.identity === message.author)?.friendlyName || message.author;
+    const name = participantNames ? participantNames[message.participantSid] : "";
 
     return (
         <Box
@@ -131,13 +134,11 @@ export const MessageBubble = ({
                 )}
                 <Box {...getInnerContainerStyles(belongsToCurrentUser)}>
                     <Flex hAlignContent="between" width="100%" vAlignContent="center" marginBottom="space20">
-                        <Text {...authorStyles} as="p" aria-hidden style={{ textOverflow: "ellipsis" }} title={author}>
-                            {author}
+                        <Text {...authorStyles} as="p" aria-hidden style={{ textOverflow: "ellipsis" }} title={name}>
+                            {name}
                         </Text>
                         <ScreenReaderOnly as="p">
-                            {belongsToCurrentUser
-                                ? "You sent at"
-                                : `${users?.find((u) => u.identity === message.author)?.friendlyName} sent at`}
+                            {belongsToCurrentUser ? "You sent at" : `${name} sent at`}
                         </ScreenReaderOnly>
                         <Text {...timeStampStyles} as="p">
                             {`${doubleDigit(message.dateCreated.getHours())}:${doubleDigit(

src/sessionDataHandler.ts

@@ -8,6 +8,7 @@ const CUSTOMER_DEFAULT_NAME = "Customer";
 
 type SessionDataStorage = ProcessedTokenResponse & {
     loginTimestamp: string | null;
+    participantNameMap?: Record<string, string>;
 };
 
 type InitWebchatAPIPayload = {

src/store/actions/actionTypes.ts

@@ -17,6 +17,7 @@ export const ACTION_DETACH_FILES = "ACTION_DETACH_FILES";
 export const ACTION_UPDATE_CONVERSATION_STATE = "ACTION_UPDATE_CONVERSATION_STATE";
 export const ACTION_UPDATE_SESSION_DATA = "ACTION_UPDATE_SESSION_DATA";
 export const ACTION_UPDATE_PRE_ENGAGEMENT_DATA = "ACTION_UPDATE_PRE_ENGAGEMENT_DATA";
+export const ACTION_UPDATE_PARTICIPANT_NAME = "ACTION_UPDATE_PARTICIPANT_NAME";
 
 // Notification reducer actions
 export const ACTION_ADD_NOTIFICATION = "ACTION_ADD_NOTIFICATION";

src/store/actions/initActions.ts

@@ -12,6 +12,7 @@ import { addNotification, changeEngagementPhase } from "./genericActions";
 import { MESSAGES_LOAD_COUNT } from "../../constants";
 import { parseRegionForConversations } from "../../utils/regionUtil";
 import { sessionDataHandler } from "../../sessionDataHandler";
+import { createParticipantNameMap } from "../../utils/participantNameMap";
 
 export function initConfig(config: ConfigState) {
     return {
@@ -33,6 +34,7 @@ export function initSession({ token, conversationSid }: InitSessionPayload) {
         let participants;
         let users;
         let messages;
+        let participantNameMap;
 
         try {
             conversationsClient = await Client.create(token, {
@@ -49,6 +51,13 @@ export function initSession({ token, conversationSid }: InitSessionPayload) {
             participants = await conversation.getParticipants();
             users = await Promise.all(participants.map(async (p) => p.getUser()));
             messages = (await conversation.getMessages(MESSAGES_LOAD_COUNT)).items;
+
+            /*
+             * TODO:  If we have an existing participantNameMap for this conversationSid,
+             *  in localStorage, use it and update it with the new participants.
+             */
+            participantNameMap = createParticipantNameMap(participants, users);
+
         } catch (e) {
             logger.error("Something went wrong when initializing session", e);
             throw e;
@@ -65,7 +74,8 @@ export function initSession({ token, conversationSid }: InitSessionPayload) {
                 participants,
                 messages,
                 conversationState: conversation.state?.current,
-                currentPhase: EngagementPhase.MessagingCanvas
+                currentPhase: EngagementPhase.MessagingCanvas,
+                participantNames: participantNameMap
             }
         });
 

src/store/actions/listeners/participantsListener.ts

@@ -1,7 +1,12 @@
 import { Conversation, Participant } from "@twilio/conversations";
 import { Dispatch } from "redux";
 
-import { ACTION_ADD_PARTICIPANT, ACTION_REMOVE_PARTICIPANT, ACTION_UPDATE_PARTICIPANT } from "../actionTypes";
+import {
+    ACTION_ADD_PARTICIPANT,
+    ACTION_REMOVE_PARTICIPANT,
+    ACTION_UPDATE_PARTICIPANT,
+    ACTION_UPDATE_PARTICIPANT_NAME
+} from "../actionTypes";
 
 export const initParticipantsListener = (conversation: Conversation, dispatch: Dispatch) => {
     conversation.addListener("participantJoined", async (participant: Participant) => {
@@ -10,6 +15,14 @@ export const initParticipantsListener = (conversation: Conversation, dispatch: D
             type: ACTION_ADD_PARTICIPANT,
             payload: { participant, user }
         });
+
+        // set the name to empty string if we do not have a user
+        const name = user ? user.friendlyName : "";
+
+        dispatch({
+            type: ACTION_UPDATE_PARTICIPANT_NAME,
+            payload: { participantSid: participant.sid, name }
+        });
     });
 
     conversation.addListener("participantLeft", (participant: Participant) => {

src/store/chat.reducer.ts

@@ -13,7 +13,8 @@ import {
     ACTION_START_SESSION,
     ACTION_UPDATE_CONVERSATION_STATE,
     ACTION_UPDATE_MESSAGE,
-    ACTION_UPDATE_PARTICIPANT
+    ACTION_UPDATE_PARTICIPANT,
+    ACTION_UPDATE_PARTICIPANT_NAME
 } from "./actions/actionTypes";
 
 const initialState: ChatState = {};
@@ -40,7 +41,8 @@ export const ChatReducer: Reducer = (state: ChatState = initialState, action: An
                 conversationState: action.payload.conversationState,
                 users: action.payload.users,
                 participants: action.payload.participants,
-                messages: action.payload.messages
+                messages: action.payload.messages,
+                participantNames: action.payload.participantNames
             };
         }
         case ACTION_ADD_MULTIPLE_MESSAGES: {
@@ -124,6 +126,15 @@ export const ChatReducer: Reducer = (state: ChatState = initialState, action: An
                 conversationState: action.payload.conversationState
             };
         }
+        case ACTION_UPDATE_PARTICIPANT_NAME: {
+            return {
+                ...state,
+                participantNames: {
+                    ...state.participantNames,
+                    [action.payload.participantSid]: action.payload.name
+                }
+            };
+        }
 
         default:
             return state;

src/store/definitions.ts

@@ -18,6 +18,7 @@ export type ChatState = {
     messages?: Message[];
     attachedFiles?: File[];
     conversationState?: string;
+    participantNames?: { [key: string]: string };
 };
 
 export type PreEngagementData = { name: string; email: string; query: string };

src/utils/participantNameMap.ts

@@ -0,0 +1,13 @@
+/* eslint-disable import/no-unused-modules */
+import { Participant, User } from "@twilio/conversations";
+
+// return a map of participant sid to participant name
+export const createParticipantNameMap = (participants: Participant[], users: User[]) => {
+    return participants.reduce((acc: { [key: string]: string }, p) => {
+        const user = users.find((u) => u.identity === p.identity);
+        if (user) {
+            acc[p.sid] = user.friendlyName;
+        }
+        return acc;
+    }, {});
+};