TypingIndicator empty display name fix (#168)

* Fix typing indicator selector

* Change files

* not defaulting displayName to 'unknown'

* ignoring typing users with no display name

* fixed changelogs

* fixed logic

change/@azure-acs-chat-selector-0cfdb2c9-74c4-4664-a358-7e189204bfd0.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fixed empty display names in typingIndicatorSelector",
+  "packageName": "@azure/acs-chat-selector",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-ui-111c6b39-d853-4e56-a463-f39762a34a6c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Ignoring typing users with no display name in TypingIndicator component",
+  "packageName": "@azure/communication-ui",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/acs-chat-selector/src/typingIndicatorSelector.test.ts

@@ -40,6 +40,7 @@ describe('typingIndicatorSelector tests', () => {
     ];
     const participants = new Map();
     participants.set('1', { id: '1', displayName: 'User1' });
+    participants.set('2', { id: '2', displayName: 'User2' });
     const userId = '1';
     const result = typingIndicatorSelector.resultFunc(orderedTypingIndicators, participants, userId);
     expect(result.typingUsers.length).toEqual(1);

packages/acs-chat-selector/src/typingIndicatorSelector.ts

@@ -33,18 +33,19 @@ const filterTypingIndicators = (typingIndicators: TypingIndicator[], userId: str
 };
 
 const convertSdkTypingIndicatorsToWebUiChatParticipants = (
-  typingIndicators: TypingIndicator[]
+  typingIndicators: TypingIndicator[],
+  participants: Map<string, ChatParticipant>
 ): WebUiChatParticipant[] => {
   return typingIndicators.map((typingIndicator) => ({
     userId: typingIndicator.sender.user.communicationUserId,
-    displayName: typingIndicator.sender.displayName
+    displayName: participants.get(typingIndicator.sender.user.communicationUserId)?.displayName
   }));
 };
 
 export const typingIndicatorSelector = reselect.createSelector(
   [getTypingIndicators, getParticipants, getUserId],
   (typingIndicators: TypingIndicator[], participants: Map<string, ChatParticipant>, userId: string) => {
-    // if there are participant size is at threshold return no typing users
+    // if the participant size reaches the threshold then return no typing users
     if (participants.size >= PARTICIPANTS_THRESHOLD) {
       return { typingUsers: [] };
     }
@@ -53,7 +54,8 @@ export const typingIndicatorSelector = reselect.createSelector(
     const filteredTypingIndicators = filterTypingIndicators(typingIndicators, userId);
 
     const typingUsers: WebUiChatParticipant[] = convertSdkTypingIndicatorsToWebUiChatParticipants(
-      filteredTypingIndicators
+      filteredTypingIndicators,
+      participants
     );
 
     return { typingUsers };

packages/communication-ui/src/components/TypingIndicator.tsx

@@ -38,7 +38,6 @@ export interface TypingIndicatorProps {
 }
 
 const MAXIMUM_LENGTH_OF_TYPING_USERS = 35;
-const UNKNOWN_DISPLAYNAME = 'unknown';
 
 const getDefaultComponents = (
   typingUsers: WebUiChatParticipant[],
@@ -51,14 +50,14 @@ const getDefaultComponents = (
   let totalCharacterCount = 0;
 
   for (const typingUser of typingUsers) {
-    const displayName = typingUser?.displayName ?? UNKNOWN_DISPLAYNAME;
-    countOfUsersMentioned += 1;
     // The typing users above will be separated by ', '. We account for that additional length and with this length in
     // mind we generate the final string.
-    const additionalCharCount = 2 * (countOfUsersMentioned - 1) + displayName.length;
+    const additionalCharCount =
+      2 * (countOfUsersMentioned - 1) + (typingUser.displayName ? typingUser.displayName.length : 0);
     if (totalCharacterCount + additionalCharCount <= MAXIMUM_LENGTH_OF_TYPING_USERS || countOfUsersMentioned === 1) {
-      typingUsersMentioned.push({ ...typingUser, displayName: displayName });
+      typingUsersMentioned.push(typingUser);
       totalCharacterCount += additionalCharCount;
+      countOfUsersMentioned += 1;
     } else {
       break;
     }
@@ -79,7 +78,7 @@ const getDefaultComponents = (
   if (countOfUsersNotMentioned > 0) {
     displayComponents.push(
       <span className={mergeStyles(typingIndicatorVerbStyle, styles?.typingString)}>
-        ` and ${countOfUsersNotMentioned} other${countOfUsersNotMentioned === 1 ? '' : 's'}`
+        {` and ${countOfUsersNotMentioned} other${countOfUsersNotMentioned === 1 ? '' : 's'}`}
       </span>
     );
   }
@@ -97,11 +96,15 @@ const defaultTypingString = (typingUsers: WebUiChatParticipant[]): string => {
 export const TypingIndicator = (props: TypingIndicatorProps): JSX.Element => {
   const { typingUsers, typingString, onRenderUsers, styles } = props;
 
+  const typingUsersToRender = onRenderUsers
+    ? typingUsers
+    : typingUsers.filter((typingUser) => typingUser.displayName !== undefined);
+
   return (
     <Stack horizontal className={mergeStyles(typingIndicatorContainerStyle, styles?.root)}>
-      {onRenderUsers ? onRenderUsers(typingUsers) : getDefaultComponents(typingUsers, styles)}
+      {onRenderUsers ? onRenderUsers(typingUsersToRender) : getDefaultComponents(typingUsersToRender, styles)}
       <span className={mergeStyles(typingIndicatorVerbStyle, styles?.typingString)}>
-        {typingString ?? defaultTypingString(typingUsers)}
+        {typingString ?? defaultTypingString(typingUsersToRender)}
       </span>
     </Stack>
   );