feat: create message-text component

Author: szuperaz

package-lock.json

@@ -112,7 +112,7 @@
     "@ctrl/ngx-emoji-mart": "^8.2.0",
     "@floating-ui/dom": "^1.6.3",
     "@ngx-translate/core": "^14.0.0",
-    "@stream-io/stream-chat-css": "5.3.0",
+    "@stream-io/stream-chat-css": "5.6.1",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "1.4.0",
     "dayjs": "^1.11.10",

package.json

@@ -26,6 +26,7 @@ import {
   MessageContext,
   MessageReactionsContext,
   MessageReactionsSelectorContext,
+  MessageTextContext,
   ModalContext,
   NotificationContext,
   ReadStatusContext,
@@ -358,6 +359,12 @@ export class CustomTemplatesService<
   customMessageMetadataInsideBubbleTemplate$ = new BehaviorSubject<
     TemplateRef<CustomMetadataContext> | undefined
   >(undefined);
+  /**
+   * Template to display the text content inside the [message component](/chat/docs/sdk/angular/components/MessageComponent/). The default component is [stream-message-text](/chat/docs/sdk/angular/components/MessageTextComponent/)
+   */
+  messageTextTemplate$ = new BehaviorSubject<
+    TemplateRef<MessageTextContext> | undefined
+  >(undefined);
 
   constructor() {}
 }

projects/stream-chat-angular/src/lib/custom-templates.service.ts

@@ -91,15 +91,28 @@
               [attachments]="quotedMessageAttachments"
               [messageId]="quotedMessage.id"
             ></stream-attachment-list>
-            <div
-              class="str-chat__quoted-message-text"
-              data-testid="quoted-message-text"
-              [innerHTML]="
-                quotedMessage.translation ||
-                quotedMessage.html ||
-                quotedMessage.text
-              "
-            ></div>
+            <div class="str-chat__quoted-message-text">
+              <ng-container
+                *ngTemplateOutlet="
+                  (customTemplatesService.messageTextTemplate$ | async) ||
+                    defaultText;
+                  context: getQuotedMessageTextContext()
+                "
+              ></ng-container>
+              <ng-template
+                #defaultText
+                let-message="message"
+                let-isQuoted="isQuoted"
+                let-shouldTranslate="shouldTranslate"
+              >
+                <stream-message-text
+                  [message]="message"
+                  [isQuoted]="isQuoted"
+                  [shouldTranslate]="shouldTranslate"
+                  data-testid="quoted-message-text"
+                ></stream-message-text>
+              </ng-template>
+            </div>
           </div>
         </div>
         <ng-template

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

@@ -38,6 +38,7 @@ import { StreamAvatarModule } from '../stream-avatar.module';
 import { VoiceRecorderService } from './voice-recorder.service';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { MessageInputConfigService } from './message-input-config.service';
+import { MessageTextComponent } from '../message-text/message-text.component';
 
 describe('MessageInputComponent', () => {
   let nativeElement: HTMLElement;
@@ -131,6 +132,7 @@ describe('MessageInputComponent', () => {
         AutocompleteTextareaComponent,
         AttachmentListComponent,
         AttachmentPreviewListComponent,
+        MessageTextComponent,
       ],
       providers: [
         {
@@ -783,10 +785,15 @@ describe('MessageInputComponent', () => {
     expect(avatar.location).toBe('quoted-message-sender');
     expect(avatar.user).toBe(message.user!);
     expect(attachments.attachments).toEqual([{ id: '1' }]);
-    expect(
-      nativeElement.querySelector('[data-testid="quoted-message-text"]')
-        ?.innerHTML
-    ).toContain(message.text);
+
+    const textComponent = fixture.debugElement
+      .query(By.css(quotedMessageContainerSelector))
+      .query(By.directive(MessageTextComponent))
+      .componentInstance as MessageTextComponent;
+
+    expect(textComponent.message).toBe(message);
+    expect(textComponent.isQuoted).toBe(true);
+    expect(textComponent.shouldTranslate).toBe(true);
 
     mockMessageToQuote$.next(undefined);
     fixture.detectChanges();

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

@@ -34,6 +34,7 @@ import {
   CustomAttachmentUploadContext,
   DefaultStreamChatGenerics,
   EmojiPickerContext,
+  MessageTextContext,
   StreamMessage,
 } from '../types';
 import { MessageInputConfigService } from './message-input-config.service';
@@ -163,7 +164,7 @@ export class MessageInputComponent
     private componentFactoryResolver: ComponentFactoryResolver,
     private cdRef: ChangeDetectorRef,
     private emojiInputService: EmojiInputService,
-    private customTemplatesService: CustomTemplatesService,
+    readonly customTemplatesService: CustomTemplatesService,
     private messageActionsService: MessageActionsService,
     public readonly voiceRecorderService: VoiceRecorderService,
     @Optional() public audioRecorder?: AudioRecorderService
@@ -494,6 +495,14 @@ export class MessageInputComponent
     };
   }
 
+  getQuotedMessageTextContext(): MessageTextContext {
+    return {
+      message: this.quotedMessage,
+      isQuoted: true,
+      shouldTranslate: true,
+    };
+  }
+
   async startVoiceRecording() {
     await this.audioRecorder?.start();
     if (this.audioRecorder?.isRecording) {

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

@@ -0,0 +1,35 @@
+<p
+  [class.str-chat__quoted-message-text-value]="isQuoted"
+  [class.str-chat__message-text-value]="!isQuoted"
+  *ngIf="message?.text"
+  data-testid="text"
+>
+  <ng-container *ngIf="messageTextParts; else defaultContent">
+    <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->
+    <ng-container *ngFor="let part of messageTextParts">
+      <span
+        *ngIf="part.type === 'text'; else mention"
+        [innerHTML]="part.content"
+      ></span>
+      <ng-template #mention>
+        <ng-template #defaultMention let-content="content">
+          <span class="str-chat__message-mention">{{ content }}</span>
+        </ng-template>
+        <ng-container
+          *ngTemplateOutlet="
+            (customTemplatesService.mentionTemplate$ | async) || defaultMention;
+            context: getMentionContext(part)
+          "
+        ></ng-container>
+      </ng-template>
+    </ng-container>
+  </ng-container>
+  <ng-template #defaultContent>
+    <ng-container *ngIf="displayAs === 'text'; else asHTML">
+      {{ messageText || "" }}
+    </ng-container>
+    <ng-template #asHTML
+      ><span data-testid="html-content" [innerHTML]="messageText"></span
+    ></ng-template>
+  </ng-template>
+</p>