Add storage to web chat

2026-04-19 04:57:52 +00:00 · 2021-12-16 16:36:39 +01:00
parent 796143d7c4
commit e1b4ce8113
9 changed files with 513 additions and 157 deletions
@@ -37,7 +37,7 @@
    </ion-refresher-content>
  </ion-refresher>
  <div class="messages" #scrollMe>
-    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; let last = last">
+    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last">
      <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'>
        <div class="message-item-options d-flex justify-content-end">
          <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
@@ -53,9 +53,10 @@
          <ion-label>{{msg.msg}}</ion-label>
          <div *ngIf="msg.attachments" class="message-attachments">
            <div *ngFor="let file of msg.attachments">
+            
              <div (click)="openPreview(msg)">
                <!-- <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)"> -->
-                <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+                <img src="{{msg.image_url}}" alt="image">
              </div>
                <div>
                  <div class="file">
@@ -1,4 +1,4 @@
-import { AfterViewChecked, AfterViewInit, Component, ElementRef,ChangeDetectorRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AfterViewChecked, AfterViewInit, Component, ElementRef, ChangeDetectorRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { AnimationController, GestureController, IonSlides, ModalController, PopoverController } from '@ionic/angular';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
@@ -13,12 +13,16 @@ import { ChatMessageStore } from 'src/app/store/chat/chat-message.service';
 import { ChatUserStorage } from 'src/app/store/chat/chat-user.service';
 import { TimeService } from 'src/app/services/functions/time.service';
 import { FileService } from 'src/app/services/functions/file.service';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpEventType, HttpHeaders } from '@angular/common/http';
 import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
 import { ThemeService } from 'src/app/services/theme.service'
 import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
 import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
+import { SqliteService } from 'src/app/services/sqlite.service';
+import { StorageService } from 'src/app/services/storage.service';
+import { Directory, Filesystem } from '@capacitor/filesystem';

+const IMAGE_DIR = 'stored-images';
@Component({
  selector: 'app-messages',
  templateUrl: './messages.page.html',
@@ -33,24 +37,25 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
  loggedUser: any;

  message = '';
-  messages:any;
-  dm:any;
-  userPresence='';
-  dmUsers:any;
+  messages: any;
+  dm: any;
+  userPresence = '';
+  dmUsers: any;
  checktimeOut: boolean;
-  members:any;
+  members: any;
+  downloadProgess = 0;

-  @Input() roomId:string;
-  @Input() showMessages:string;
+  @Input() roomId: string;
+  @Input() showMessages: string;

-  @Output() openNewEventPage:EventEmitter<any> = new EventEmitter<any>();
-  @Output() getDirectMessages:EventEmitter<any> = new EventEmitter<any>();
+  @Output() openNewEventPage: EventEmitter<any> = new EventEmitter<any>();
+  @Output() getDirectMessages: EventEmitter<any> = new EventEmitter<any>();


  chatMessageStore = ChatMessageStore
  chatUserStorage = ChatUserStorage

-  scrollingOnce:boolean = true;
+  scrollingOnce: boolean = true;
  private scrollChangeCallback: () => void;
  currentPosition: any;
  startPosition: number;
@@ -58,6 +63,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
  scrollToBottomBtn = false;
  longPressActive = false;
  frameUrl: any;
+  downloadFile: any;

  constructor(
    public popoverController: PopoverController,
@@ -72,13 +78,15 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    private timeService: TimeService,
    private fileService: FileService,
    private gestureController: GestureController,
-    private http:HttpClient,
+    private http: HttpClient,
    public ThemeService: ThemeService,
-    private changeDetectorRef: ChangeDetectorRef
+    private changeDetectorRef: ChangeDetectorRef,
+    private sqliteservice: SqliteService,
+    private storageservice: StorageService
  ) {
    this.loggedUser = authService.ValidatedUserChat['data'];

-   /*  this.dm = this.navParams.get('dm'); */
+    /*  this.dm = this.navParams.get('dm'); */
  }
  ngOnChanges(changes: SimpleChanges): void {
    this.load();
@@ -91,7 +99,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    this.scrollToBottom();

    /* setInterval(()=>{ */
-      this.load();
+    this.load();
    /* }, 9000); */
    console.log(this.roomId);
    console.log("Chat route", this.route.url)
@@ -99,11 +107,11 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    this.setStatus('online');
  }

-  onPressingMessage(){
+  onPressingMessage() {
    const gesture = this.gestureController.create({
      el: this.messageContainer.nativeElement,
      gestureName: 'long-press',
-      onStart: ev =>{
+      onStart: ev => {
        this.longPressActive = true;
        console.log('Pressing');
      },
@@ -114,7 +122,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    });
  }

-  setStatus(status:string){
+  setStatus(status: string) {
    let body = {
      message: '',
      status: status,
@@ -124,36 +132,36 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    })
  }

-  notImplemented(){
+  notImplemented() {
    this.alertService.presentAlert('Funcionalidade em desenvolvimento');
  }

-  load = ()=>{
+  load = () => {
    this.checktimeOut = true;
    this.serverLongPull();
    this.getChatMembers();
  }


-  doRefresh(ev:any){
+  doRefresh(ev: any) {
    this.load();
    ev.target.complete();
  }

  scrollToBottom(): void {
    try {
-      if(this.scrollingOnce){
+      if (this.scrollingOnce) {
        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
        //this.scrollingOnce = false;
      }
-    } catch(err) { }
+    } catch (err) { }
  }

  scrollToBottomClicked(): void {
    try {
      this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
      //this.scrollingOnce = false;
-    } catch(err) { }
+    } catch (err) { }
  }

  ngAfterViewInit() {
@@ -161,7 +169,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    window.addEventListener('scroll', this.scrollChangeCallback, true);
  }

-   onContentScrolled(e) {
+  onContentScrolled(e) {
    this.startPosition = e.srcElement.scrollTop;
    let scroll = e.srcElement.scrollTop;
    let windowHeight = e.srcElement.scrollHeight;
@@ -173,10 +181,10 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
      //alert('UP');
      this.scrollingOnce = false;
    }
-    if((containerHeight - 100) > scroll){
+    if ((containerHeight - 100) > scroll) {
      this.scrollToBottomBtn = true;
    }
-    else{
+    else {
      this.scrollToBottomBtn = false;
    }
    this.currentPosition = scroll;
@@ -188,7 +196,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    window.removeEventListener('scroll', this.scrollChangeCallback, true);
  }

-  openBookMeetingComponent(){
+  openBookMeetingComponent() {
    let data = {
      roomId: this.roomId,
      members: this.members
@@ -196,7 +204,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    this.openNewEventPage.emit(data);
  }

-  showDateDuration(start:any){
+  showDateDuration(start: any) {
    return this.timeService.showDateDuration(start);
  }

@@ -211,13 +219,13 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
      }
    }

-    this.chatService.sendMessage(body).subscribe(res=> {
+    this.chatService.sendMessage(body).subscribe(res => {
      this.scrollingOnce = true;
    });
    this.message = "";
  }

-  deleteMessage(msgId:string){
+  deleteMessage(msgId: string) {
    let body = {
      "roomId": this.roomId,
      "msgId": msgId,
@@ -229,13 +237,58 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    }); */
  }

-  loadMessages(){
+
+  getMessageDB() {
+    this.storageservice.get('chatmsg').then((msg) => {
+      let msgArray =[];
+      msgArray = msg;
+      msgArray.filter(data => data._id != this.roomId);
+      this.messages = msgArray.reverse();
+      console.log("MSG CHAT WEB", this.messages)
+    })
+
+  }
+
+  transformData(res) {
+    let mgsArray = [];
+    res.forEach(async element => {
+
+      let chatmsg = {
+        _id: element._id,
+        attachments: element.attachments,
+        channels: element.channels,
+        file: element.file,
+        mentions: element.mentions,
+        msg: element.msg,
+        rid: element.rid,
+        ts: element.ts,
+        u: element.u,
+        _updatedAt: element._updatedAt,
+        /* image_url: {
+          name: element.file.guid,
+          path: `${IMAGE_DIR}/${element.file.guid}`,
+          data: `data:image/jpeg;base64,${readFile.data}`,
+        }, */
+      }
+
+      mgsArray.push(chatmsg)
+      
+    });
+
+    this.storageservice.store('chatmsg',mgsArray);
+    
+  }
+
+  loadMessages() {
    //this.showLoader = true;
    const roomId = this.roomId
    this.chatService.getRoomMessages(this.roomId).subscribe(res => {
      console.log(res);
-      this.messages = res['messages'].reverse();
-      this.chatMessageStore.add(roomId, this.messages)
+      this.transformData(res['messages']);
+      this.getMessageDB();
+      //this.getFileFromLakeFS();
+      /* this.messages = res['messages'].reverse();
+      this.chatMessageStore.add(roomId, this.messages) */

      console.log(this.messages);
      //this.serverLongPull(res)
@@ -246,30 +299,95 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    })
  }

-  async viewDocument(msg:any, url?:string){
-    if(msg.file.type == "application/img"){
-      let response:any = await this.fileService.getFile(msg.file.guid).toPromise();
-      console.log(response);
+  async viewDocument(msg: any, url?: string) {
+    console.log('FILE TYPE',msg.file.type)
+    this.downloadFile = "";
+    if (msg.file.type == "application/img") {
+      this.fileService.downloadFile(msg.file.guid).subscribe(async (event) => {
+      console.log('FILE TYPE 22',msg.file.guid)
+      var name = msg.file.guid;
+      
+      if (event.type === HttpEventType.DownloadProgress) {
+        //this.downloadProgess = Math.round((100 * event.loaded) / event.total);
+        console.log('FILE TYPE 33',msg.file.type)
+      } else if (event.type === HttpEventType.Response) {
+        this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
+        console.log('FILE TYPE 44',this.downloadFile)
+        
+        console.log('TRY ARRAY BUFFER NAME', name);
+        console.log('TRY ARRAY BUFFER', this.downloadFile);
+
+        await Filesystem.writeFile({
+          path: `${IMAGE_DIR}/${name}`,
+          data: this.downloadFile,
+          directory: Directory.Data
+        }).then((foo) => {
+          console.log('SAVED FILE WEB', foo )
+        }).catch((error) =>{
+          console.log('SAVED FILE WEB error ', error )
+        });
+
+        const readFile = await Filesystem.readdir({
+          path: `${IMAGE_DIR}/${name}`,
+          directory: Directory.Data,
+        }).then((foo) => {
+          console.log('GET FILE WEB', foo )
+        });
+
+        this.storageservice.get('chatmsg').then((msg) => {
+          let msgArray =[];
+          msgArray = msg;
+          msgArray.filter(data => data._id != this.roomId);
+          this.messages = msgArray.reverse();
+          console.log("MSG CHAT WEB", this.messages)
+
+          let newmgsArray = [];
+          msgArray.forEach(async element => {
+            console.log('GET FILE TRANSFORM',element.file.guid )
+            if(element.file.guid == msg.file.guid) {
+              let chatmsg = {
+                _id: element._id,
+                attachments: element.attachments,
+                channels: element.channels,
+                file: element.file,
+                mentions: element.mentions,
+                msg: element.msg,
+                rid: element.rid,
+                ts: element.ts,
+                u: element.u,
+                _updatedAt: element._updatedAt,
+                image_url: this.downloadFile
+              }
+              newmgsArray.push(chatmsg)
+            }
+          });
+      
+          this.storageservice.store('chatmsg',newmgsArray);
+        })
+      }
+
+      this.getMessageDB();
+    });

      //this.openPreview(msg);

    }
-    else if(msg.file.type == "application/webtrix") {
-       this.openViewDocumentModal(msg.file);
-     }
-     else{
-       let fullUrl;
-       fullUrl = "https://www.tabularium.pt" + url;
-       //fullUrl = "http://www.africau.edu/images/default/sample.pdf";
+    else if (msg.file.type == "application/webtrix") {
+      this.openViewDocumentModal(msg.file);
+    }
+    else {
+      let fullUrl;
+      fullUrl = "https://www.tabularium.pt" + url;
+      //fullUrl = "http://www.africau.edu/images/default/sample.pdf";

-       this.frameUrl = fullUrl;
-       //this.fileService.viewDocumentByUrl(fullUrl);
-       this.chatService.getDocumentDetails(fullUrl);
-     }
+      this.frameUrl = fullUrl;
+      //this.fileService.viewDocumentByUrl(fullUrl);
+      this.chatService.getDocumentDetails(fullUrl);
+    }
  }


-  async openViewDocumentModal(file:any){
+  async openViewDocumentModal(file: any) {
    let task = {
      serialNumber: '',
      taskStartDate: '',
@@ -285,17 +403,17 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    }

    let doc = {
-        "Id": "",
-        "ParentId": "",
-        "Source": 1,
-        "ApplicationId": file.ApplicationId,
-        "CreateDate": "",
-        "Data": null,
-        "Description":"",
-        "Link": null,
-        "SourceId": file.DocId,
-        "SourceName": file.Assunto,
-        "Stakeholders": "",
+      "Id": "",
+      "ParentId": "",
+      "Source": 1,
+      "ApplicationId": file.ApplicationId,
+      "CreateDate": "",
+      "Data": null,
+      "Description": "",
+      "Link": null,
+      "SourceId": file.DocId,
+      "SourceName": file.Assunto,
+      "Stakeholders": "",
    }

    const modal = await this.modalController.create({
@@ -322,7 +440,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    console.log(this.roomId);

    //this.showLoader = true;
-    this.chatService.getMembers(this.roomId).subscribe(res=> {
+    this.chatService.getMembers(this.roomId).subscribe(res => {
      this.members = res['members'];
      this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
      console.log(res);
@@ -344,7 +462,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    return await popover.present();
  }

-  async addContacts(){
+  async addContacts() {
    const modal = await this.modalController.create({
      component: ContactsPage,
      componentProps: {},
@@ -357,12 +475,12 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    modal.onDidDismiss();
  }

-  openSendMessageOptions(ev?:any){
-    if(window.innerWidth < 701){
+  openSendMessageOptions(ev?: any) {
+    if (window.innerWidth < 701) {
      console.log('mobile');
      this.openChatOptions(ev);
    }
-    else{
+    else {
      console.log('desktop');
      this._openChatOptions();
    }
@@ -431,23 +549,23 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy



-  takePicture(){
+  takePicture() {
    const roomId = this.roomId
    this.fileService.addCameraPictureToChat(roomId);
  }
-  addImage(){
+  addImage() {
    const roomId = this.roomId;
    this.fileService.addPictureToChat(roomId);
    //this.fileService.loadPicture();
    //this.fileService.addPictureToChat(roomId);
  }
-  addFile(){
+  addFile() {
    this.fileService.addDocumentToChat(this.roomId);
  }
-  addFileWebtrix(){
+  addFileWebtrix() {
    this.fileService.addDocGestaoDocumentalToChat(this.roomId);
  }
-  bookMeeting(){
+  bookMeeting() {
    let data = {
      roomId: this.roomId,
      members: this.members
@@ -493,9 +611,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
      }
    });
    await modal.present();
-    modal.onDidDismiss().then((res)=>{
+    modal.onDidDismiss().then((res) => {
      console.log(res['data']);
-      if(res['data'] == 'meeting'){
+      if (res['data'] == 'meeting') {
        //this.closeAllDesktopComponents.emit();
        let data = {
          roomId: this.roomId,
@@ -503,19 +621,19 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
        }
        this.openNewEventPage.emit(data);
      }
-      else if(res['data'] == 'take-picture'){
+      else if (res['data'] == 'take-picture') {
        this.fileService.addCameraPictureToChat(this.roomId);
        //this.loadPicture();
      }
-      else if(res['data'] == 'add-picture'){
+      else if (res['data'] == 'add-picture') {
        this.fileService.addPictureToChat(this.roomId);
        //this.loadPicture();
      }
-      else if(res['data'] == 'add-document'){
+      else if (res['data'] == 'add-document') {
        this.fileService.addDocumentToChat(this.roomId);
        //this.loadDocument();
      }
-      else if(res['data'] == 'documentoGestaoDocumental'){
+      else if (res['data'] == 'documentoGestaoDocumental') {

        this.fileService.addDocGestaoDocumentalToChat(this.roomId);
        this.showLoader = false;
@@ -534,82 +652,82 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
      //console.log(res['success']);


-     if (res['success'] == true) {
-      // Show Error
-      //showMessage(response.statusText);
-      this.loadMessages()
-      this.messages = res['messages'].reverse();
-      this.chatMessageStore.add(roomId, this.messages)
+      if (res['success'] == true) {
+        // Show Error
+        //showMessage(response.statusText);
+        this.loadMessages()
+        this.messages = res['messages'].reverse();
+        this.chatMessageStore.add(roomId, this.messages)

-      //console.log(this.messages);
-      // Reconnect in one second
-      if(this.route.url != "/home/chat"){
-        console.log("Timer message stop")
-      }
-      else{
-        if(document.querySelector('app-messages')){
-          await new Promise(resolve => setTimeout(resolve, 5000));
-          await this.serverLongPull();
-          this.getDirectMessages.emit();
-          console.log('Timer message running')
+        //console.log(this.messages);
+        // Reconnect in one second
+        if (this.route.url != "/home/chat") {
+          console.log("Timer message stop")
        }
-      }
-    } /* else {
+        else {
+          if (document.querySelector('app-messages')) {
+            await new Promise(resolve => setTimeout(resolve, 5000));
+            await this.serverLongPull();
+            this.getDirectMessages.emit();
+            console.log('Timer message running')
+          }
+        }
+      } /* else {
      // Got message
      //let message = await response.text();
      //this.loadMessages()
      await this.serverLongPull();
    } */
-  }, (error)=>{
-    console.log(error);
-    this.serverLongPull();
+    }, (error) => {
+      console.log(error);
+      this.serverLongPull();

-  });
-  }sliderOpts = {
+    });
+  } sliderOpts = {
    zoom: false,
    slidesPerView: 1.5,
    spaceBetween: 20,
    centeredSlides: true
  };
  zoomActive = false;
-zoomScale = 1;
+  zoomScale = 1;

-sliderZoomOpts = {
-  allowSlidePrev: false,
-  allowSlideNext: false,
-  zoom: {
-    maxRatio: 5
-  },
-  on: {
-    zoomChange: (scale, imageEl, slideEl) => {
-      this.zoomActive = true;
-      this.zoomScale = scale/5;
-      this.changeDetectorRef.detectChanges();
+  sliderZoomOpts = {
+    allowSlidePrev: false,
+    allowSlideNext: false,
+    zoom: {
+      maxRatio: 5
+    },
+    on: {
+      zoomChange: (scale, imageEl, slideEl) => {
+        this.zoomActive = true;
+        this.zoomScale = scale / 5;
+        this.changeDetectorRef.detectChanges();
+      }
    }
  }
-}

-async touchEnd(zoomslides: IonSlides, card) {
-  // Zoom back to normal
-  const slider = await zoomslides.getSwiper();
-  const zoom = slider.zoom;
-  zoom.out();
+  async touchEnd(zoomslides: IonSlides, card) {
+    // Zoom back to normal
+    const slider = await zoomslides.getSwiper();
+    const zoom = slider.zoom;
+    zoom.out();

-  // Card back to normal
-  card.el.style['z-index'] = 9;
+    // Card back to normal
+    card.el.style['z-index'] = 9;

-  this.zoomActive = false;
-  this.changeDetectorRef.detectChanges();
-}
+    this.zoomActive = false;
+    this.changeDetectorRef.detectChanges();
+  }

-touchStart(card) {
-  // Make card appear above backdrop
-  card.el.style['z-index'] = 11;
-}
+  touchStart(card) {
+    // Make card appear above backdrop
+    card.el.style['z-index'] = 11;
+  }

  async openPreview(msg) {
    const modal = await this.modalController.create({
-      component:  ViewMediaPage,
+      component: ViewMediaPage,
      cssClass: 'modal modal-desktop',
      componentProps: {
        image: msg.attachments[0].image_url,
@@ -28,13 +28,12 @@
    </div>
    <div *ngIf="task && p.userRole(['PR'])" class="d-flex width-100">
      <div class="flex-grow-1">
-        <button (click)="openExpedientActionsModal('0', fulltask)" class="btn-cancel" shape="round" >Efetuar Despacho</button>
        <button (click)="openExpedientActionsModal('0', fulltask)" class="btn-cancel" shape="round" >Efetuar Despacho</button>
        <button (click)="distartExpedientModal('descartar')" class="btn-cancel" shape="round" >Descartar</button>
        <div class="solid"></div>
        <button (click)="openExpedientActionsModal('1',fulltask)" class="btn-cancel" shape="round" >Solicitar Parecer</button>
        <button (click)="openBookMeetingModal()" class="btn-cancel" shape="round" >Marcar Reunião</button>
-        <button (click)="sendExpedienteToPending()" *ngIf="task.Status != 'Pending'" class="btn-cancel" shape="round" >Enviar para Pendentes11</button>
+        <button (click)="sendExpedienteToPending()" *ngIf="task.Status != 'Pending'" class="btn-cancel" shape="round" >Enviar para Pendentes</button>
        <div hidden class="solid"></div>
        <button hidden class="btn-cancel" shape="round" >Delegar</button>
        <button (click)="openNewGroupPage()" class="btn-cancel" shape="round" >Iniciar Conversa</button>