feat: edited flag for message

Author: szuperaz

package-lock.json

@@ -117,7 +117,7 @@
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "4.7.4",
+    "@stream-io/stream-chat-css": "4.8.0",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",
@@ -126,7 +126,7 @@
     "ngx-popperjs": "^12.2.2",
     "pretty-bytes": "^5.6.0",
     "rxjs": "^7.1.0",
-    "stream-chat": "^8.15.0",
+    "stream-chat": "^8.20.0",
     "ts-node": "^10.2.1",
     "tslib": "^2.3.0",
     "uuidv4": "^6.2.12",

package.json

@@ -12,7 +12,7 @@
     "@angular/common": "^12.2.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
     "@angular/core": "^12.2.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
     "@ngx-translate/core": "^13.0.0 || ^14.0.0 || ^15.0.0",
-    "stream-chat": "^8.15.0"
+    "stream-chat": "^8.20.0"
   },
   "dependencies": {
     "angular-mentions": "^1.4.0",

projects/stream-chat-angular/package.json

@@ -117,5 +117,6 @@ export const en = {
     'This message did not meet our content guidelines':
       'This message did not meet our content guidelines',
     'Send Anyway': 'Send Anyway',
+    Edited: 'Edited',
   },
 };

projects/stream-chat-angular/src/assets/i18n/en.ts

@@ -131,4 +131,14 @@ describe('getGroupStyles', () => {
       )
     ).toBe('top');
   });
+
+  it('should end group if the message id edited', () => {
+    messages[1].message_text_updated_at = new Date().toISOString();
+
+    expect(getGroupStyles(messages[1], messages[0], messages[2])).toBe(
+      'bottom'
+    );
+
+    expect(getGroupStyles(messages[2], messages[1], messages[3])).toBe('top');
+  });
 });

projects/stream-chat-angular/src/lib/message-list/group-styles.spec.ts

@@ -25,6 +25,7 @@ export const getGroupStyles = (
     previousMessage.type === 'error' ||
     previousMessage.deleted_at ||
     previousMessage.id === lastReadMessageId ||
+    previousMessage.message_text_updated_at ||
     (message.reaction_counts &&
       Object.keys(message.reaction_counts).length > 0);
 
@@ -37,6 +38,7 @@ export const getGroupStyles = (
     nextMessage.type === 'error' ||
     nextMessage.deleted_at ||
     message.id === lastReadMessageId ||
+    message.message_text_updated_at ||
     (nextMessage.reaction_counts &&
       Object.keys(nextMessage.reaction_counts).length > 0);
 

projects/stream-chat-angular/src/lib/message-list/group-styles.ts

@@ -175,6 +175,15 @@
             class="str-chat__message-text"
             tabindex="0"
             *ngIf="message?.text || (message?.quoted_message && hasAttachment)"
+            [class.str-chat__message-text--pointer-cursor]="
+              (message?.status === 'failed' &&
+                message?.errorStatusCode !== 403) ||
+              (this.message?.type === 'error' &&
+                this.message?.moderation_details) ||
+              message?.message_text_updated_at
+            "
+            (click)="messageClicked()"
+            (keyup.enter)="messageClicked()"
           >
             <div
               data-testid="inner-message"
@@ -184,8 +193,6 @@
               [class.str-chat__message-light-text-inner--has-attachment]="
                 hasAttachment
               "
-              (click)="unsentMessageClicked()"
-              (keyup.enter)="unsentMessageClicked()"
             >
               <ng-container *ngTemplateOutlet="quotedMessage"></ng-container>
               <ng-container *ngIf="hasAttachment && message?.quoted_message">
@@ -459,9 +466,36 @@
       >
         {{ message?.user?.name ? message?.user?.name : message?.user?.id }}
       </span>
-      <span data-testid="date" class="str-chat__message-simple-timestamp">
+      <span
+        data-testid="date"
+        class="str-chat__message-simple-timestamp str-chat__message-simple-time"
+      >
         {{ parsedDate }}
       </span>
+      <ng-container *ngIf="message?.message_text_updated_at">
+        <span
+          data-testid="edited-flag"
+          class="str-chat__mesage-simple-edited"
+          translate
+          >streamChat.Edited</span
+        >
+        <div
+          data-testid="edited-timestamp"
+          class="str-chat__message-edited-timestamp"
+          [ngClass]="{
+            'str-chat__message-edited-timestamp--open': isEditedFlagOpened,
+            'str-chat__message-edited-timestamp--collapsed': !isEditedFlagOpened
+          }"
+        >
+          <span translate>streamChat.Edited</span>
+          <time
+            dateTime="{{ message?.message_text_updated_at }}"
+            title="{{ message?.message_text_updated_at }}"
+          >
+            {{ pasedEditedDate }}
+          </time>
+        </div>
+      </ng-container>
     </div>
   </ng-container>
 </ng-template>

projects/stream-chat-angular/src/lib/message/message.component.html

@@ -1347,4 +1347,37 @@ describe('MessageComponent', () => {
       ' <a href="https://getstream.io/" class="my-special-class">https://getstream.io/</a>'
     );
   });
+
+  it(`shouldn't display edited flag if message wasn't edited`, () => {
+    expect(
+      nativeElement.querySelector('[data-testid="edited-flag"]')
+    ).toBeNull();
+  });
+
+  it(`should display edited flag if message was edited, edited info should be collapsed`, () => {
+    component.message!.message_text_updated_at = new Date().toISOString();
+    component.ngOnChanges({ message: {} as SimpleChange });
+    fixture.detectChanges();
+
+    expect(
+      nativeElement.querySelector('[data-testid="edited-flag"]')
+    ).not.toBeNull();
+
+    expect(
+      nativeElement.querySelector('[data-testid="edited-timestamp"]')
+    ).not.toBeNull();
+  });
+
+  it(`should display edited flag if message was edited, display timestamp if clicked`, () => {
+    component.message!.message_text_updated_at = new Date().toISOString();
+    component.ngOnChanges({ message: {} as SimpleChange });
+    fixture.detectChanges();
+    queryMessageInner()?.click();
+    fixture.detectChanges();
+    const timestamp = nativeElement.querySelector(
+      '[data-testid="edited-timestamp"]'
+    );
+
+    expect(timestamp?.innerHTML).toContain(component.pasedEditedDate);
+  });
 });

projects/stream-chat-angular/src/lib/message/message.component.spec.ts

@@ -91,6 +91,7 @@ export class MessageComponent
   canReceiveReadEvents: boolean | undefined;
   canReactToMessage: boolean | undefined;
   isActionBoxOpen = false;
+  isEditedFlagOpened = false;
   isReactionSelectorOpen = false;
   visibleMessageActionsCount = 0;
   messageTextParts: MessagePart[] | undefined = [];
@@ -110,6 +111,7 @@ export class MessageComponent
   isReadByMultipleUsers = false;
   isMessageDeliveredAndRead = false;
   parsedDate = '';
+  pasedEditedDate = '';
   areOptionsVisible = false;
   hasAttachment = false;
   hasReactions = false;
@@ -194,6 +196,13 @@ export class MessageComponent
           this.message.created_at &&
           this.dateParser.parseDateTime(this.message.created_at)) ||
         '';
+      this.pasedEditedDate =
+        (this.message &&
+          this.message.message_text_updated_at &&
+          this.dateParser.parseDateTime(
+            new Date(this.message.message_text_updated_at)
+          )) ||
+        '';
       this.hasAttachment =
         !!this.message?.attachments && !!this.message.attachments.length;
       this.hasReactions =
@@ -314,7 +323,7 @@ export class MessageComponent
     };
   }
 
-  unsentMessageClicked() {
+  messageClicked() {
     if (
       this.message?.status === 'failed' &&
       this.message?.errorStatusCode !== 403
@@ -325,6 +334,8 @@ export class MessageComponent
       this.message?.moderation_details
     ) {
       this.openMessageBouncePrompt();
+    } else {
+      this.isEditedFlagOpened = !this.isEditedFlagOpened;
     }
   }