example: collapsible message text

Author: szuperaz

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

@@ -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.ts

@@ -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.module.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/message-text/message-text.component.html

@@ -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.scss

@@ -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.ts

@@ -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;
+}