save

src/app/pages/chat/group-messages/group-messages.page.html

@@ -45,11 +45,22 @@
           <ion-label>{{msg.u.name}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
         </div>
-        <div>
+        <div class="message">
           <ion-label>{{msg.msg}}</ion-label>
-          <div *ngIf="msg.attachments">
+          <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments">
-              <img src="{{file.image_url}}" alt="image" >
+              <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+              <div *ngIf="file.thumb_url">
+                <div class="file d-flex">
+                  <ion-thumbnail slot="start">
+                    <img src="{{file.thumb_url}}" alt="image">
+                  </ion-thumbnail>
+                  <ion-label class="file-details">
+                    <h3 (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">{{file.title}}</h3>
+                    <p *ngIf="file.text">{{file.text}}</p>
+                  </ion-label>
+                </div>
+              </div>
             </div>
           </div>
           {{last ? scrollToBottom() : ''}}

src/app/pages/chat/group-messages/group-messages.page.scss

@@ -167,6 +167,28 @@
         text-align: right;
         float: right;
       }
+      .message{
+        .message-attachments{
+          .file{
+            align-items: center;
+
+            .file-details{
+              width: 100%;
+
+              .file-title{
+                color: #000;
+                text-decoration: underline;
+                white-space: nowrap;
+                overflow: hidden !important;
+                text-overflow: ellipsis !important;
+              }
+              .file-title:hover{
+                color: #0782c9;
+              }
+            }
+          }
+        }
+      }
    }
    .online{
     color:#99e47b !important;

src/app/pages/chat/group-messages/group-messages.page.ts

@@ -316,6 +316,10 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     };
   }
 
+  viewDocument(url:string){
+    this.fileService.viewDocumentByUrl(url);
+  }
+
   async openChatOptions(ev?: any) {
     console.log(this.members);