Merge pull request #681 from GetStream/message-text-component

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

@@ -262,3 +262,16 @@
   <div>Latest message text: {{ latestMessageText }}</div>
   <div>Latest message id: {{ latestMessage?.id }}</div>
 </ng-template>
+
+<ng-template
+  #messageText
+  let-message="message"
+  let-shouldTranslate="shouldTranslate"
+  let-isQuoted="isQuoted"
+>
+  <app-message-text
+    [message]="message"
+    [shouldTranslate]="shouldTranslate"
+    [isQuoted]="isQuoted"
+  ></app-message-text>
+</ng-template>

projects/customizations-example/src/app/app.component.html

@@ -36,6 +36,7 @@ import {
   MessageActionsService,
   ChannelPreviewInfoContext,
   MessageReactionsSelectorComponent,
+  MessageTextContext,
 } from 'stream-chat-angular';
 import { environment } from '../environments/environment';
 
@@ -95,6 +96,8 @@ export class AppComponent implements AfterViewInit {
   private emptyMainMessageListTemplate!: TemplateRef<void>;
   @ViewChild('emptyThreadMessageList')
   private emptyThreadMessageListTemplate!: TemplateRef<void>;
+  @ViewChild('messageText')
+  messageTextTemplate!: TemplateRef<MessageTextContext>;
 
   constructor(
     private chatService: ChatClientService,
@@ -189,6 +192,9 @@ export class AppComponent implements AfterViewInit {
     this.customTemplatesService.emptyThreadMessageListPlaceholder$.next(
       this.emptyThreadMessageListTemplate
     );
+    this.customTemplatesService.messageTextTemplate$.next(
+      this.messageTextTemplate
+    );
   }
 
   inviteClicked(channel: Channel) {

projects/customizations-example/src/app/app.component.ts

@@ -12,6 +12,7 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { MessageActionComponent } from './message-action/message-action.component';
 import { ThreadHeaderComponent } from './thread-header/thread-header.component';
 import { IconComponent } from './icon/icon.component';
+import { MessageTextComponent } from './message-text/message-text.component';
 
 @NgModule({
   declarations: [
@@ -20,6 +21,7 @@ import { IconComponent } from './icon/icon.component';
     MessageActionComponent,
     ThreadHeaderComponent,
     IconComponent,
+    MessageTextComponent,
   ],
   imports: [
     BrowserModule,

projects/customizations-example/src/app/app.module.ts

@@ -0,0 +1,24 @@
+<ng-container *ngIf="isQuoted; else regularMessageText">
+  <!-- Quoted message are clamped by default, so need there -->
+  <stream-message-text
+    [message]="message"
+    [shouldTranslate]="shouldTranslate"
+    [isQuoted]="isQuoted"
+  ></stream-message-text>
+</ng-container>
+<ng-template #regularMessageText>
+  <div class="message-text" [class.message-text-expanded]="isExpanded" #text>
+    <stream-message-text
+      [message]="message"
+      [shouldTranslate]="shouldTranslate"
+      [isQuoted]="isQuoted"
+    ></stream-message-text>
+  </div>
+  <!-- 5px diff is due to Firefox issue -->
+  <button
+    [class.visible]="text.scrollHeight - text.clientHeight > 5 || isExpanded"
+    (click)="isExpanded = !isExpanded"
+  >
+    {{ "Show" + (isExpanded ? " less" : " more") }}
+  </button>
+</ng-template>

projects/customizations-example/src/app/message-text/message-text.component.html

@@ -0,0 +1,19 @@
+.message-text {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  line-clamp: 5;
+  -webkit-box-orient: vertical;
+}
+
+.message-text.message-text-expanded {
+  display: block;
+}
+
+button {
+  display: none;
+
+  &.visible {
+    display: block;
+  }
+}

projects/customizations-example/src/app/message-text/message-text.component.scss

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { MessageResponseBase } from 'stream-chat';
+import { DefaultStreamChatGenerics, StreamMessage } from 'stream-chat-angular';
+
+@Component({
+  selector: 'app-message-text',
+  templateUrl: './message-text.component.html',
+  styleUrls: ['./message-text.component.scss'],
+})
+export class MessageTextComponent {
+  @Input() message:
+    | StreamMessage<DefaultStreamChatGenerics>
+    | undefined
+    | MessageResponseBase<DefaultStreamChatGenerics>;
+  @Input() isQuoted: boolean = false;
+  @Input() shouldTranslate: boolean = false;
+  isExpanded = false;
+}

projects/customizations-example/src/app/message-text/message-text.component.ts

@@ -26,6 +26,7 @@ import {
   MessageContext,
   MessageReactionsContext,
   MessageReactionsSelectorContext,
+  MessageTextContext,
   ModalContext,
   NotificationContext,
   ReadStatusContext,
@@ -43,7 +44,7 @@ import {
  *
  * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
  *
- * You can find the type definitions of the context that is provided for each template [on GitHub](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angu)
+ * You can find the type definitions of the context that is provided for each template [on GitHub](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)
  */
 @Injectable({
   providedIn: 'root',
@@ -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