@chat21/chat21-ionic 3.0.61 → 3.0.63

package/src/app/components/sidebar-user-details/sidebar-user-details.component.scss

@@ -143,6 +143,10 @@ button.user-details-btn-close {
     font-family: "Poppins";
     font-weight: 500;
     line-height: 24px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 260px;
 }
 
 .user-details-email {
@@ -156,11 +160,15 @@ button.user-details-btn-close {
 .user-details-email > h3 {
     font-size: 14px;
     text-align: center;
-    margin-top: 5px;
+    margin-top: 1px;
     font-family: "Poppins";
     font-weight: 400;
-    line-height: 1px;
+    line-height: 19px;
     white-space: nowrap;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 260px;
 }
 
 .user-details-role {
@@ -169,6 +177,7 @@ button.user-details-btn-close {
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     left: 50%;
+    text-align: center;
 }
 
 .user-details-role > h3 {
@@ -179,10 +188,21 @@ button.user-details-btn-close {
     color: #a9afbb;
     font-weight: 500;
     font-family: "Roboto", sans-serif !important;
+    margin-bottom: 8px !important;
+}
+
+.user-details-view-profile {
+    font-size: 14px;
+    color: #00d5ff;
+    cursor: pointer;
+}
+
+.user-details-view-profile:hover {
+   text-decoration: underline;
 }
 
 .availability-section {
-    top: 300px;
+    top: 320px;
     text-align: center;
     background-color: #2d323e;
     padding: 9px;
@@ -196,7 +216,7 @@ button.user-details-btn-close {
 }
 
 .first-divider {
-    margin-top: 355px;
+    margin-top: 365px;
     border: 0;
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     margin-bottom: 20px;
@@ -246,6 +266,37 @@ button.user-details-btn-close {
     line-height: 21px;
 }
 
+.user-details-plan-icon {
+    display: block;
+    float: left;
+    font-size: 20px;
+    margin-right: 6px;
+}
+
+
+
+.user-details-help-center-icon {
+    color: #a9afbb;
+    font-size: 20px;
+    vertical-align: middle;
+    margin-right: 3px;
+}
+
+.user-details-help-center {
+    margin-top: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #a9afbb;
+    -webkit-font-smoothing: antialiased;
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+.user-details-help-center:hover { 
+    color: #fff;
+    text-decoration: underline;
+}
+
 .user-details-footer-section {
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
@@ -255,12 +306,13 @@ button.user-details-btn-close {
     text-align: center;
 
     padding-bottom: 15px;
-    padding-top: 200px;
+    padding-top: 186px;
     font-size: 16px;
     font-weight: 400;
+    z-index: 1;
     // bottom: 50px;
-    bottom: 55px;
-    // top:355px
+    // bottom: 55px;
+    
 }
 
 .logout-btn-wpr {
@@ -282,7 +334,7 @@ button.user-details-btn-close {
 
 .user-details-footer-chat-version {
     position: absolute;
-    bottom: 11px;
+    // bottom: 11px;
     text-align: center;
     margin: auto;
     transform: translateX(-50%);
@@ -290,6 +342,8 @@ button.user-details-btn-close {
     margin: auto;
     font-size: 12px;
     font-weight: 400;
+    padding-top: 300px;
+    padding-bottom: 6px;
 }
 
 :host ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {

package/src/app/components/sidebar-user-details/sidebar-user-details.component.ts

@@ -32,6 +32,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   IS_AVAILABLE: boolean;
   USER_ROLE: boolean;
   USER_ROLE_LABEL: string;
+  EditProfileLabel: string;
   IS_BUSY_msg: string;
   IS_AVAILABLE_msg: string;
   IS_UNAVAILABLE_msg: string;
@@ -59,6 +60,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   version: string
   test: Date = new Date();
   company_name: string = 'Tiledesk'
+  DASHBOARD_URL: string;
   constructor(
     private translate: TranslateService,
     public tiledeskAuthService: TiledeskAuthService,
@@ -69,9 +71,11 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     public appConfigProvider: AppConfigProvider,
     public events: EventsService,
     private eRef: ElementRef,
+
   ) { }
 
   ngOnInit() {
+    this.DASHBOARD_URL = this.appConfigProvider.getConfig().dashboardUrl + '#/project/';
     this.version = PACKAGE.version;
     this.getCurrentChatLangAndTranslateLabels();
     this.subcribeToAuthStateChanged();
@@ -86,14 +90,20 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
       this.logger.log('[SIDEBAR-USER-DETAILS] BSAuthStateChanged ', state)
 
       if (state === 'online') {
-        const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-        this.logger.log('[SIDEBAR-USER-DETAILS] currentUser ', currentUser)
-        if (currentUser) {
-          this.user = currentUser;
-          this.createUserAvatar(this.user)
-          this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(currentUser.uid)
-          this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL ', this.photo_profile_URL);
-          this.checkIfExistPhotoProfile(this.photo_profile_URL)
+
+        const storedCurrentUser = this.appStorageService.getItem('currentUser')
+        if (storedCurrentUser && storedCurrentUser !== 'undefined') {
+          const currentUser = JSON.parse(storedCurrentUser);
+          this.logger.log('[SIDEBAR-USER-DETAILS] - subcribeToAuthStateChanged - currentUser ', currentUser)
+          if (currentUser) {
+            this.user = currentUser;
+            this.createUserAvatar(this.user)
+            this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(currentUser.uid)
+            this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL ', this.photo_profile_URL);
+            this.checkIfExistPhotoProfile(this.photo_profile_URL)
+          }
+        } else {
+          this.logger.error('[SIDEBAR-USER-DETAILS] currentUser not found in storage ')
         }
       }
     })
@@ -176,48 +186,56 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
 
   getCurrentChatLangAndTranslateLabels() {
     this.browserLang = this.translate.getBrowserLang();
-    const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-    this.logger.log('[SIDEBAR-USER-DETAILS] - ngOnInit - currentUser ', currentUser)
-    this.logger.log('[SIDEBAR-USER-DETAILS] - ngOnInit - browserLang ', this.browserLang)
-    let currentUserId = ''
-    if (currentUser) {
-      currentUserId = currentUser.uid
-      this.logger.log('[SIDEBAR-USER-DETAILS] - ngOnInit - currentUserId ', currentUserId)
-    }
+    const storedCurrentUser = this.appStorageService.getItem('currentUser')
+
+    if (storedCurrentUser && storedCurrentUser !== 'undefined') {
+      const currentUser = JSON.parse(storedCurrentUser);
+      this.logger.log('[SIDEBAR-USER-DETAILS] - ngOnInit - currentUser ', currentUser)
+      this.logger.log('[SIDEBAR-USER-DETAILS] - ngOnInit - browserLang ', this.browserLang)
+      let currentUserId = ''
+      if (currentUser) {
+        currentUserId = currentUser.uid
+        this.logger.log('[SIDEBAR-USER-DETAILS] - ngOnInit - currentUserId ', currentUserId)
+      }
 
-    const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
-    this.logger.log('[SIDEBAR-USER-DETAILS] stored_preferred_lang: ', stored_preferred_lang);
+      const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
+      this.logger.log('[SIDEBAR-USER-DETAILS] stored_preferred_lang: ', stored_preferred_lang);
 
 
-    this.chat_lang = ''
-    if (this.browserLang && !stored_preferred_lang) {
-      this.chat_lang = this.browserLang
-      // this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
+      this.chat_lang = ''
+      if (this.browserLang && !stored_preferred_lang) {
+        this.chat_lang = this.browserLang
+        // this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
 
-      this.logger.log('[SIDEBAR-USER-DETAILS] flag_url: ', this.flag_url);
-      this.logger.log('[SIDEBAR-USER-DETAILS] chat_lang: ', this.chat_lang);
-    } else if (this.browserLang && stored_preferred_lang) {
-      this.chat_lang = stored_preferred_lang
-      // this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
-      this.logger.log('[SIDEBAR-USER-DETAILS] flag_url: ', this.flag_url);
-      this.logger.log('[SIDEBAR-USER-DETAILS] chat_lang: ', this.chat_lang);
-    }
+        this.logger.log('[SIDEBAR-USER-DETAILS] flag_url: ', this.flag_url);
+        this.logger.log('[SIDEBAR-USER-DETAILS] chat_lang: ', this.chat_lang);
+      } else if (this.browserLang && stored_preferred_lang) {
+        this.chat_lang = stored_preferred_lang
+        // this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
+        this.logger.log('[SIDEBAR-USER-DETAILS] flag_url: ', this.flag_url);
+        this.logger.log('[SIDEBAR-USER-DETAILS] chat_lang: ', this.chat_lang);
+      }
 
 
-    if (tranlatedLanguage.includes(this.chat_lang)) {
-      this.logger.log('[SIDEBAR-USER-DETAILS] tranlatedLanguage includes', this.chat_lang, ': ', tranlatedLanguage.includes(this.chat_lang))
-      this.translate.use(this.chat_lang);
-      this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
+      if (tranlatedLanguage.includes(this.chat_lang)) {
+        this.logger.log('[SIDEBAR-USER-DETAILS] tranlatedLanguage includes', this.chat_lang, ': ', tranlatedLanguage.includes(this.chat_lang))
+        this.translate.use(this.chat_lang);
+        this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
+      } else {
+        this.logger.log('[SIDEBAR-USER-DETAILS] tranlatedLanguage includes', this.chat_lang, ': ', tranlatedLanguage.includes(this.chat_lang))
+        this.translate.use('en');
+        this.flag_url = "assets/images/language_flag/en.png"
+        this.chat_lang = 'en'
+      }
+
     } else {
-      this.logger.log('[SIDEBAR-USER-DETAILS] tranlatedLanguage includes', this.chat_lang, ': ', tranlatedLanguage.includes(this.chat_lang))
-      this.translate.use('en');
-      this.flag_url = "assets/images/language_flag/en.png"
-      this.chat_lang = 'en'
+      this.logger.error('[SIDEBAR-USER-DETAILS] - ngOnInit - currentUser not found in storage')
     }
     this.translateLabels()
   }
 
   translateLabels() {
+    this.getEditProfileTranslation();
     this.getAvailableTranslation();
     this.getUnavailableTranslation();
     this.getIsBusyTranslation();
@@ -256,19 +274,24 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     }
   }
 
+  getEditProfileTranslation() {
+    this.translate.get('EditProfile')
+      .subscribe((text: string) => {
+        this.EditProfileLabel = text
+      });
+  }
+
+
+
   getAvailableTranslation() {
     this.translate.get('Available')
       .subscribe((text: string) => {
-
-        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.IS_AVAILABLE_msg = text
       });
   }
   getUnavailableTranslation() {
     this.translate.get('Unavailable')
       .subscribe((text: string) => {
-
-        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.IS_UNAVAILABLE_msg = text
       });
   }
@@ -276,8 +299,6 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getIsBusyTranslation() {
     this.translate.get('Busy')
       .subscribe((text: string) => {
-
-        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.IS_BUSY_msg = text
       });
   }
@@ -285,8 +306,6 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getLogoutTranslation() {
     this.translate.get('LABEL_LOGOUT')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
-        // console.log('[SIDEBAR-USER-DETAILS] - GET Logout label ', text)
         this.LOGOUT_msg = text
       });
   }
@@ -294,8 +313,6 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getSubscriptionPaymentProblemTranslation() {
     this.translate.get('SubscriptionPaymentProblem')
       .subscribe((text: string) => {
-
-        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.SUBSCRIPTION_PAYMENT_PROBLEM_msg = text
       });
   }
@@ -303,8 +320,6 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getThePlanHasExpiredTranslation() {
     this.translate.get('ThePlanHasExpired')
       .subscribe((text: string) => {
-
-        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.THE_PLAN_HAS_EXPIRED_msg = text
       });
   }
@@ -318,20 +333,15 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
         // console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT ', projectObjct)
 
         this.projectID = projectObjct['id_project']['_id']
-        // console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > PROJECT ID ', this.projectID);
-
+    
         this.prjct_name = projectObjct['id_project']['name']
-        // console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > PROJECT NAME ', this.prjct_name);
 
         this.plan_type = projectObjct['id_project']['profile']['type'];
-        // console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > PLAN TYPE ', this.plan_type);
-
+   
         const trial_expired = projectObjct['id_project']['trialExpired']
-        // console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > TRIAL EXPIRED ', trial_expired);
-
+    
         const profile_name = projectObjct['id_project']['profile']['name'];
-        // console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > PROFILE NAME ', profile_name);
-
+     
         this.plan_name = projectObjct['id_project']['profile']['name'];
         this.plan_subscription_is_active = projectObjct['id_project']['isActiveSubscription'];
 
@@ -347,9 +357,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
         } else if (this.plan_type === 'payment' && profile_name === 'enterprise') {
           this.getEnterprisePlanTranslation();
         }
-
       }
-
     } catch (err) {
       this.logger.error('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT ERR ', err)
     }
@@ -364,48 +372,33 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
 
 
   getProPlanTrialTranslation() {
-    // this.profile_name_translated = this.PRO_PLAN_TRIAL_msg;
     this.translate.get('ProPlanTrial')
       .subscribe((text: string) => {
-
-        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.profile_name_translated = text
       });
   }
 
   getFreePlanTranslation() {
-    // this.profile_name_translated = this.FREE_PLAN_msg;
     this.translate.get('FreePlan')
       .subscribe((text: string) => {
-
-        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.profile_name_translated = text
       });
   }
 
   getProPlanTranslation() {
-    // this.profile_name_translated = this.PAYD_PLAN_NAME_PRO_msg;
     this.translate.get('PaydPlanNamePro')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
-        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.profile_name_translated = text
       });
   }
 
   getEnterprisePlanTranslation() {
-    // this.profile_name_translated = this.PAYD_PLAN_NAME_ENTERPRISE_msg;
     this.translate.get('PaydPlanNameEnterprise')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
-        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.profile_name_translated = text
       });
   }
 
- 
-
-
   listenTocurrentProjectUserUserAvailability$() {
     this.wsService.currentProjectUserAvailability$
       .pipe(skip(1))
@@ -416,7 +409,6 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
           this.IS_AVAILABLE = projectUser['user_available']
           this.IS_BUSY = projectUser['isBusy']
           this.USER_ROLE = projectUser['role']
-          // console.log('[SIDEBAR-USER-DETAILS] -translateUserRole  1', this.USER_ROLE)
           this.translateUserRole(this.USER_ROLE)
         }
 
@@ -430,58 +422,27 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   }
 
   translateUserRole(role) {
-    // console.log('[SIDEBAR-USER-DETAILS] -translateUserRole ', role)
     this.translate.get(role)
       .subscribe((text: string) => {
-
-        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.USER_ROLE_LABEL = text
       });
-
-
   }
 
 
-  ngOnChanges() {
-    // console.log('[SIDEBAR-USER-DETAILS] HAS_CLICKED_OPEN_USER_DETAIL', this.HAS_CLICKED_OPEN_USER_DETAIL)
-    // var element = document.getElementById('user-details');
-    // // console.log('[SIDEBAR-USER-DETAILS] element', element)
-    // if (this.HAS_CLICKED_OPEN_USER_DETAIL === true) {
-    //   element.classList.add("active");
-    // }
-  }
-
+  ngOnChanges() {  }
 
 
-  // closeUserDetailSidePanel() {
-  //   var element = document.getElementById('user-details');
-  //   element.classList.remove("active");
-  //   this.logger.log('[SIDEBAR-USER-DETAILS] element', element);
-  //   this.HAS_CLICKED_OPEN_USER_DETAIL === true
-  //   // this.onCloseUserDetailsSidebar.emit(false);
-  // }
 
 
 
   changeAvailabilityStateInUserDetailsSidebar(available) {
     this.logger.log('[SIDEBAR-USER-DETAILS] - changeAvailabilityState projectid', this.projectID, ' available 1: ', available);
 
-    //   available = !available
-    //   console.log('[SIDEBAR-USER-DETAILS] - changeAvailabilityState projectid', this.projectID, ' available 2 : ', available);
-
     this.wsService.updateCurrentUserAvailability(this.tiledeskToken, this.projectID, available)
       .subscribe((projectUser: any) => {
 
         this.logger.log('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED ', projectUser)
 
-        // NOTIFY TO THE USER SERVICE WHEN THE AVAILABLE / UNAVAILABLE BUTTON IS CLICKED
-        // this.usersService.availability_btn_clicked(true)
-
-        // if (this.project['id_project']._id === projectUser.id_project) {
-        //   this.project['ws_projct_user_available'] = projectUser.user_available;
-        //   // this.project['ws_projct_user_isBusy'] = projectUser['isBusy']
-        // }
-
       }, (error) => {
         this.logger.error('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED - ERROR  ', error);
 
@@ -491,10 +452,19 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
       });
   }
 
+  goToUserProfile() {
+    let url = this.DASHBOARD_URL + this.projectID + '/user-profile'
+    const myWindow = window.open(url, '_self');
+    myWindow.focus();
+  }
+
+  goToHelpCenter() {
+    const url = "https://gethelp.tiledesk.com/"
+    window.open(url, '_blank');
+  }
+
   public onLogout() {
-    // this.authService.logout();
     this.closeUserDetailSidePanel()
-    // pubblico evento
     this.events.publish('profileInfoButtonClick:logout', true);
   }
 

package/src/app/pages/authentication/login/login.page.ts

@@ -16,6 +16,7 @@ import { isInArray } from 'src/chat21-core/utils/utils';
 // Logger
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 
 @Component({
   selector: 'app-login',
@@ -39,7 +40,8 @@ export class LoginPage implements OnInit {
     private translateService: CustomTranslateService,
     private events: EventsService,
     private loginComponent: LoginComponent,
-    public toastController: ToastController
+    public toastController: ToastController,
+    public appStorageService: AppStorageService
   ) { }
 
   ngOnInit() {
@@ -123,6 +125,8 @@ export class LoginPage implements OnInit {
     this.tiledeskAuthService.signInWithEmailAndPassword(auth.email, auth.password)
       .then(tiledeskToken => {
         this.messagingAuthService.createCustomToken(tiledeskToken) 
+        // Here edit stored current user
+        // this.updateStoredCurrentUser()
       })
       .catch(error => {
         this.showSpinnerInLoginBtn = false;
@@ -151,6 +155,21 @@ export class LoginPage implements OnInit {
     // this.authService.signInWithEmailAndPassword(auth.email, auth.password);
   }
 
+  updateStoredCurrentUser() {
+    const storedCurrentUser = this.appStorageService.getItem('currentUser')
+    const storedDshbrdUser = localStorage.getItem('user')
+    
+    if (storedCurrentUser && storedCurrentUser !== 'undefined') {
+      const currentUser = JSON.parse(storedCurrentUser);
+      // console.log('[LOGIN PAGE] updateStoredCurrentUser - currentUser' , currentUser)
+    }
+
+    if  (storedDshbrdUser && storedDshbrdUser !== 'undefined') {
+      const dshbrdUser = JSON.parse(localStorage.getItem('user'));
+      // console.log('[LOGIN PAGE] updateStoredCurrentUser - dshbrdUser' , dshbrdUser)
+   }
+  }
+
   async presentToast(errormsg: string) {
     const toast = await this.toastController.create({
       message: errormsg,

package/src/app/pages/conversation-detail/conversation-detail.page.html

@@ -32,16 +32,22 @@
 
 <ng-template #showConversation>
 
-  <app-header-conversation-detail [isMobile]="isMobile" [idLoggedUser]="loggedUser.uid"
-    [conversationAvatar]="conversationAvatar" [translationMap]="translationMap"
-    (eventOpenCloseInfoConversation)="returnOpenCloseInfoConversation($event)"
-    [isOpenInfoConversation]="isOpenInfoConversation" [conv_type]="conv_type">
+  <app-header-conversation-detail 
+    [isMobile]="isMobile" 
+    [idLoggedUser]="loggedUser.uid"
+    [conversationUid]="conversationWith"
+    [conversationAvatar]="conversationAvatar" 
+    [translationMap]="translationMap"
+    [isOpenInfoConversation]="isOpenInfoConversation" 
+    [conv_type]="conv_type"
+    (eventOpenCloseInfoConversation)="returnOpenCloseInfoConversation($event)">
   </app-header-conversation-detail>
 
   <ion-content id="conv-details">
     <ion-grid class="grid_content">
       <ion-row class="row_content">
-        <ion-col id="chatArea" [class.mobile]="isMobile" [class.open]="openInfoConversation">
+        <ion-col id="chatArea" [class.mobile]="isMobile" [class.open]="openInfoConversation"
+        [ngClass]="{'chat-area-apps-sidebar-wide': appsidebarIsWide === true}">
 
 
           <ion-row class="row_chat_area" [style.height]="'calc(100% - '+heightMessageTextArea+'px)'">
@@ -113,12 +119,16 @@
 
 
                 <ion-conversation-detail *ngIf="isHovering === false" #conversationContentDetail
-                  [channelType]="channelType" [messages]="messages" [senderId]="loggedUser.uid"
-                  [baseLocation]="window?.location?.origin" [stylesMap]="styleMap"
+                  [channelType]="channelType" 
+                  [messages]="messages" 
+                  [senderId]="loggedUser.uid"
+                  [baseLocation]="window?.location?.origin" 
+                  [stylesMap]="styleMap"
                   (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
                   (onAfterMessageRender)="returnOnAfterMessageRender($event)"
                   (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)"
-                  (onScrollContent)="returnOnScrollContent($event)" (onMenuOptionShow)="returnOnMenuOption($event)"
+                  (onScrollContent)="returnOnScrollContent($event)" 
+                  (onMenuOptionShow)="returnOnMenuOption($event)"
                   (onImageRendered)="onImageRenderedFN($event)"
                   (onAddUploadingBubble)="addUploadingBubbleEvent($event)">
                 </ion-conversation-detail>
@@ -163,25 +173,36 @@
             <!-- (eventReplaceMessageWithCanned)="replaceTagInMessage($event)" -->
             <!-- [tagsCannedFilter]="tagsCannedFilter" -->
             <!-- openInfoConversation   {{openInfoConversation}} - isMobile {{isMobile}} -->
-            <app-message-text-area
-              *ngIf="(openInfoConversation === false && isMobile === true) || (openInfoConversation === true && isMobile === false) || (openInfoConversation === false && isMobile === false)"
-              [tagsCannedCount]="tagsCannedCount" [areVisibleCAR]="areVisibleCAR" [support_mode]="support_mode"
-              [loggedUser]="loggedUser" [conversationWith]="conversationWith" [tagsCannedFilter]="tagsCannedFilter"
+            <app-message-text-area *ngIf="(openInfoConversation === false && isMobile === true) || (openInfoConversation === true && isMobile === false) || (openInfoConversation === false && isMobile === false)"
+              [tagsCannedCount]="tagsCannedCount" 
+              [areVisibleCAR]="areVisibleCAR" 
+              [support_mode]="support_mode"
+              [loggedUser]="loggedUser" 
+              [conversationWith]="conversationWith" 
+              [tagsCannedFilter]="tagsCannedFilter"
+              [translationMap]="translationMap"
+              [fileUploadAccept]="appConfigProvider.getConfig().fileUploadAccept"
+              [isOpenInfoConversation]="isOpenInfoConversation" 
+              [dropEvent]="dropEvent"
+              [disableTextarea]="disableTextarea"
               (eventChangeTextArea)="returnChangeTextArea($event)"
               (hasClickedOpenCannedResponses)="hasClickedOpenCannedResponses($event)"
-              (eventSendMessage)="returnSendMessage($event)" [translationMap]="translationMap"
-              [fileUploadAccept]="appConfigProvider.getConfig().fileUploadAccept"
-              [isOpenInfoConversation]="isOpenInfoConversation" [dropEvent]="dropEvent"
-              (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)" [disableTextarea]="disableTextarea">
+              (eventSendMessage)="returnSendMessage($event)" 
+              (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)">
             </app-message-text-area>
             <!-- [events]="eventsReplaceTexareaText.asObservable()" -->
           </ion-row>
 
         </ion-col>
 
-        <ion-col id="chat21-info-conversation" [class.mobile]="isMobile" [class.open]="openInfoConversation">
-          <app-info-content [openInfoConversation]="openInfoConversation" [translationMap]="translationMap"
-            [loggedUser]="loggedUser" [tenant]="tenant" [groupDetail]="groupDetail">
+        <ion-col id="chat21-info-conversation" [class.mobile]="isMobile" [class.open]="openInfoConversation"
+        [ngClass]="{'info-convs-apps-sidebar-wide': appsidebarIsWide === true}">
+          <app-info-content 
+            [openInfoConversation]="openInfoConversation" 
+            [translationMap]="translationMap"
+            [loggedUser]="loggedUser" 
+            [tenant]="tenant" 
+            [groupDetail]="groupDetail">
           </app-info-content>
         </ion-col>