Add messageEdited and messagedDeleted events to ChatAdapter. Update the unread message badge when a message is deleted.

packages/communication-react/review/beta/communication-react.api.md

@@ -2554,9 +2554,6 @@ export const DEFAULT_COMPOSITE_ICONS: {
     SurveyStarIconFilled: React_2.JSX.Element;
 };
 
-// @public (undocumented)
-export type DeletedChatMessage = Omit<ChatMessage_2, 'message' | 'metadata'>;
-
 // @beta
 export interface DeviceCheckOptions {
     camera: 'required' | 'optional' | 'doNotPrompt';
@@ -3139,16 +3136,10 @@ export interface MessageCommon {
 export type MessageContentType = 'text' | 'html' | 'richtext/html' | 'unknown';
 
 // @public
-export type MessageDeletedListener = (event: {
-    message: DeletedChatMessage;
-    deletedOn: Date;
-}) => void;
+export type MessageDeletedListener = MessageReceivedListener;
 
 // @public
-export type MessageEditedListener = (event: {
-    message: ChatMessage_2;
-    editedOn: Date;
-}) => void;
+export type MessageEditedListener = MessageReceivedListener;
 
 // @public
 export type MessageProps = {

packages/communication-react/review/stable/communication-react.api.md

@@ -2082,9 +2082,6 @@ export const DEFAULT_COMPOSITE_ICONS: {
     ContextMenuSpeakerIcon: React_2.JSX.Element;
 };
 
-// @public (undocumented)
-export type DeletedChatMessage = Omit<ChatMessage_2, 'message' | 'metadata'>;
-
 // @public
 export type DeviceManagerState = {
     isSpeakerSelectionAvailable: boolean;
@@ -2476,16 +2473,10 @@ export interface MessageCommon {
 export type MessageContentType = 'text' | 'html' | 'richtext/html' | 'unknown';
 
 // @public
-export type MessageDeletedListener = (event: {
-    message: DeletedChatMessage;
-    deletedOn: Date;
-}) => void;
+export type MessageDeletedListener = MessageReceivedListener;
 
 // @public
-export type MessageEditedListener = (event: {
-    message: ChatMessage_2;
-    editedOn: Date;
-}) => void;
+export type MessageEditedListener = MessageReceivedListener;
 
 // @public
 export type MessageProps = {

packages/react-composites/review/beta/react-composites.api.md

@@ -1514,9 +1514,6 @@ export const DEFAULT_COMPOSITE_ICONS: {
     SurveyStarIconFilled: React_2.JSX.Element;
 };
 
-// @public (undocumented)
-export type DeletedChatMessage = Omit<ChatMessage, 'message' | 'metadata'>;
-
 // @beta
 export interface DeviceCheckOptions {
     camera: 'required' | 'optional' | 'doNotPrompt';
@@ -1676,16 +1673,10 @@ export type MediaDiagnosticChangedEvent = MediaDiagnosticChangedEventArgs & {
 };
 
 // @public
-export type MessageDeletedListener = (event: {
-    message: DeletedChatMessage;
-    deletedOn: Date;
-}) => void;
+export type MessageDeletedListener = MessageReceivedListener;
 
 // @public
-export type MessageEditedListener = (event: {
-    message: ChatMessage;
-    editedOn: Date;
-}) => void;
+export type MessageEditedListener = MessageReceivedListener;
 
 // @public
 export type MessageReadListener = (event: {

packages/react-composites/review/stable/react-composites.api.md

@@ -1251,9 +1251,6 @@ export const DEFAULT_COMPOSITE_ICONS: {
     ContextMenuSpeakerIcon: React_2.JSX.Element;
 };
 
-// @public (undocumented)
-export type DeletedChatMessage = Omit<ChatMessage, 'message' | 'metadata'>;
-
 // @public
 export type DiagnosticChangedEventListner = (event: MediaDiagnosticChangedEvent | NetworkDiagnosticChangedEvent) => void;
 
@@ -1346,16 +1343,10 @@ export type MediaDiagnosticChangedEvent = MediaDiagnosticChangedEventArgs & {
 };
 
 // @public
-export type MessageDeletedListener = (event: {
-    message: DeletedChatMessage;
-    deletedOn: Date;
-}) => void;
+export type MessageDeletedListener = MessageReceivedListener;
 
 // @public
-export type MessageEditedListener = (event: {
-    message: ChatMessage;
-    editedOn: Date;
-}) => void;
+export type MessageEditedListener = MessageReceivedListener;
 
 // @public
 export type MessageReadListener = (event: {

packages/react-composites/src/composites/CallWithChatComposite/ChatButton/useUnreadMessagesTracker.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { useEffect, useState } from 'react';
-import { ChatAdapter, DeletedChatMessage } from '../../ChatComposite/adapter/ChatAdapter';
+import { ChatAdapter } from '../../ChatComposite/adapter/ChatAdapter';
 import { ChatMessage } from '@azure/communication-chat';
 
 /**
@@ -32,7 +32,7 @@ export const useUnreadMessagesTracker = (chatAdapter: ChatAdapter, isChatPaneVis
     };
 
     // Decrement unread messages when a message is deleted and the chat pane is closed
-    const decrementUnreadChatMessagesCount = (event: { message: DeletedChatMessage }): void => {
+    const decrementUnreadChatMessagesCount = (event: { message: ChatMessage }): void => {
       if (!isChatPaneVisible) {
         setUnreadChatMessages((prevUnreadChatMessages) => {
           const newUnreadChatMessages = new Set(prevUnreadChatMessages);

packages/react-composites/src/composites/ChatComposite/adapter/AzureCommunicationChatAdapter.ts

@@ -24,7 +24,6 @@ import EventEmitter from 'events';
 import {
   ChatAdapter,
   ChatAdapterState,
-  DeletedChatMessage,
   MessageDeletedListener,
   MessageEditedListener,
   MessageReadListener,
@@ -409,8 +408,8 @@ export class AzureCommunicationChatAdapter implements ChatAdapter {
       return;
     }
 
-    const message = convertEventToDeletedChatMessage(event);
-    this.emitter.emit('messageDeleted', { message, deletedOn: event.deletedOn });
+    const message = convertEventToChatMessage(event);
+    this.emitter.emit('messageDeleted', { message });
   }
 
   private messageReadListener({ chatMessageId, recipient }: ReadReceiptReceivedEvent): void {
@@ -496,29 +495,33 @@ export class AzureCommunicationChatAdapter implements ChatAdapter {
   }
 }
 
-const convertEventToChatMessage = (event: ChatMessageReceivedEvent): ChatMessage => {
+const convertEventToChatMessage = (
+  event: ChatMessageReceivedEvent | ChatMessageEditedEvent | ChatMessageDeletedEvent
+): ChatMessage => {
   return {
     id: event.id,
     version: event.version,
-    content: { message: event.message },
+    content: isChatMessageDeletedEvent(event) ? undefined : { message: event.message },
     type: convertEventType(event.type),
     sender: event.sender,
     senderDisplayName: event.senderDisplayName,
     sequenceId: '',
-    createdOn: new Date(event.createdOn)
+    createdOn: new Date(event.createdOn),
+    editedOn: isChatMessageEditedEvent(event) ? event.editedOn : undefined,
+    deletedOn: isChatMessageDeletedEvent(event) ? event.deletedOn : undefined
   };
 };
 
-const convertEventToDeletedChatMessage = (event: ChatMessageDeletedEvent): DeletedChatMessage => {
-  return {
-    id: event.id,
-    version: event.version,
-    type: convertEventType(event.type),
-    sender: event.sender,
-    senderDisplayName: event.senderDisplayName,
-    sequenceId: '',
-    createdOn: new Date(event.createdOn)
-  };
+const isChatMessageEditedEvent = (
+  event: ChatMessageReceivedEvent | ChatMessageEditedEvent | ChatMessageDeletedEvent
+): event is ChatMessageEditedEvent => {
+  return event['editedOn'] !== undefined;
+};
+
+const isChatMessageDeletedEvent = (
+  event: ChatMessageReceivedEvent | ChatMessageEditedEvent | ChatMessageDeletedEvent
+): event is ChatMessageDeletedEvent => {
+  return event['deletedOn'] !== undefined;
 };
 
 // only text/html message type will be received from event

packages/react-composites/src/composites/ChatComposite/adapter/ChatAdapter.ts

@@ -225,19 +225,14 @@ export type MessageSentListener = MessageReceivedListener;
  *
  * @public
  */
-export type MessageEditedListener = (event: { message: ChatMessage; editedOn: Date }) => void;
-
-/**
- * @public
- */
-export type DeletedChatMessage = Omit<ChatMessage, 'message' | 'metadata'>;
+export type MessageEditedListener = MessageReceivedListener;
 
 /**
  * Callback for {@link ChatAdapterSubscribers} 'messageDeleted' event.
  *
  * @public
  */
-export type MessageDeletedListener = (event: { message: DeletedChatMessage; deletedOn: Date }) => void;
+export type MessageDeletedListener = MessageReceivedListener;
 
 /**
  * Callback for {@link ChatAdapterSubscribers} 'messageRead' event.

packages/react-composites/src/composites/ChatComposite/index.ts

@@ -19,7 +19,6 @@ export type {
   ChatCompositeClientState,
   ChatAdapterState,
   ChatAdapterUiState,
-  DeletedChatMessage,
   MessageReadListener,
   MessageReceivedListener,
   MessageSentListener,