@chat21/chat21-ionic 3.0.60-rc8 → 3.0.61-rc11

package/README.md

@@ -61,6 +61,8 @@ In progress git
         fileUploadAccept:"*/*",
         logLevel":"<YOUR-PREFERRED-LOG-LEVEL>",
         supportMode: false,
+        teammatesButton: false,
+        archivedButton: false,
         firebaseConfig: {
             tenant:"tilechat",
             apiKey: '123ABC..',

package/angular.json

@@ -41,6 +41,9 @@
               "src/chat-config-dev.json"
             ],
             "styles": [
+              "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
+              "node_modules/@ng-select/ng-select/themes/default.theme.css",
               {
                 "input": "src/theme/variables.scss"
               },

package/config.xml

@@ -100,19 +100,19 @@
         <splash height="828" src="resources/ios/splash/Default-Landscape-1792h~iphone.png" width="1792" />
     </platform>
     <engine name="android" spec="^6.2.3" />
-    <engine name="browser" spec="5.0.4" />
+    <engine name="browser" spec="^5.0.4" />
     <engine name="ios" spec="6.1.1" />
     <plugin name="cordova-android-support-gradle-release" spec="^3.0.1">
         <variable name="ANDROID_SUPPORT_VERSION" value="27.+" />
     </plugin>
     <plugin name="cordova-plugin-chooser" spec="^1.3.2" />
-    <plugin name="cordova-plugin-device" spec="^2.0.2" />
+    <plugin name="cordova-plugin-device" spec="^2.0.3" />
     <plugin name="cordova-plugin-ionic-keyboard" spec="^2.2.0" />
     <plugin name="cordova-plugin-ionic-webview" spec="^4.2.1">
         <variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
     </plugin>
     <plugin name="cordova-plugin-network-information" spec="^2.0.2" />
-    <plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
-    <plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
-    <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
+    <plugin name="cordova-plugin-splashscreen" spec="^5.0.4" />
+    <plugin name="cordova-plugin-statusbar" spec="^2.4.3" />
+    <plugin name="cordova-plugin-whitelist" spec="^1.3.5" />
 </widget>

package/deploy_pre.sh

@@ -24,15 +24,15 @@ sed -i -e "s/$URL_VER/g" src/utils/constants.ts
 
 # ng build --prod --base-href /$NEW_BUILD/
 #ionic cordova build browser --prod
-#ionic cordova build browser --prod --release
-# ionic cordova build --env=pre browser --prod  #--verbose
 
 ionic cordova platform add browser --save
+#ionic cordova build browser --prod --release
+# ionic cordova build --env=pre browser --prod  #--verbose
 ionic cordova build -c=pre  browser --prod
 cp -p src/firebase-messaging-sw.js platforms/browser/www/
 cp -p src/manifest.json platforms/browser/www/
 cp -p src/chat-config.json platforms/browser/www/
-cp config.xml platforms/browser/www/
+
  
 ######### chat-ionic5 - the good one - publish in pre
 cd platforms/browser/www
@@ -47,18 +47,18 @@ echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat
 echo available on https://support-pre.tiledesk.com/chat-ionic5/$version/index.html
 echo available on https://support-pre.tiledesk.com/chat-ionic5/index.html
 
-######### chat-ionic5-test - publish in pre with the projects right panel 
+######### chat-ionic5-panel - publish in pre with the projects right panel 
 # cd platforms/browser/www
-# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-test/$version/
-# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-test/
+# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-panel/$version/
+# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-panel/
 # cd ../../../
 
 # aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
 
-# echo new version deployed on s3://tiledesk-dashboard-pre/chat-ionic5-test/$version/
-# echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5-test/$version/index.html
-# echo available on https://support-pre.tiledesk.com/chat-ionic5-test/$version/index.html
-# echo available on https://support-pre.tiledesk.com/chat-ionic5-test/index.html
+# echo new version deployed on s3://tiledesk-dashboard-pre/chat-ionic5-panel/$version/
+# echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5-panel/$version/index.html
+# echo available on https://support-pre.tiledesk.com/chat-ionic5-panel/$version/index.html
+# echo available on https://support-pre.tiledesk.com/chat-ionic5-panel/index.html
 
 
 ####### chat ionic MQTT in pre da aggiungere in deploy_pre.sh

package/deploy_prod.sh

@@ -25,9 +25,13 @@ cp -p config.xml platforms/browser/www/
 
 ###### CHAT in prod
 cd platforms/browser/www
-aws s3 sync . s3://tiledesk-console/v2/chat/
+aws s3 sync . s3://tiledesk-dashboard/v2/chat/
 aws s3 sync . s3://tiledesk-console/v2/chat/$version/
 cd ../../../
+# aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
+
+# echo new version deployed on s3://tiledesk-dashboard/chat/$NEW_BUILD/
+echo new version deployed on s3://tiledesk-console/v2/chat/$version/
 echo new version deployed on s3://tiledesk-console/v2/chat/
 echo available on https://console.tiledesk.com/v2/chat/$version/index.html
 echo available on https://console.tiledesk.com/v2/chat/index.html

package/env.sample

@@ -3,7 +3,7 @@ DASHBOARD_URL=https://YOUR_DASHBOARD_URL
 WS_URL=wss://YOUR_TILEDESK_SERVER_URL?token=
 WS_URL_RELATIVE=********
 SERVER_BASE_URL=http://localhost:3000/
-FEATURES_TOKEN=CAR:F
+FEATURES_TOKEN=CAR:F-PAY:F-ANA:F-ACT:F-APP:F
 CHAT21_ENGINE=mqtt
 UPLOAD_ENGINE=native
 PUSH_ENGINE=none
@@ -11,6 +11,8 @@ FILE_UPLOAD_ACCEPT=*/*
 TENANT=tilechat
 LOG_LEVEL=INFO
 SUPPORT_MODE=false
+WRITE_TO_BUTTON=false,
+ARCHIVED_BUTTON=false,
 
 # For MQTT Chat Engine
 MQTT_APPID=tilechat

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.60-rc8",
+    "version": "3.0.61-rc11",
     "author": "Tiledesk SRL",
-    "homepage": "https://ionicframework.com/",
+    "homepage": "https://tiledesk.com/",
     "scripts": {
         "ng": "ng",
         "start": "ng serve",
@@ -13,10 +13,13 @@
     },
     "private": false,
     "dependencies": {
+        "@angular/animations": "^8.2.14",
+        "@angular/cdk": "^8.2.3",
         "@angular/common": "~8.2.14",
         "@angular/core": "~8.2.14",
         "@angular/forms": "~8.2.14",
         "@angular/http": "^7.2.16",
+        "@angular/material": "^8.2.3",
         "@angular/platform-browser": "~8.2.14",
         "@angular/platform-browser-dynamic": "~8.2.14",
         "@angular/router": "~8.2.14",
@@ -30,22 +33,23 @@
         "@ionic/angular": "^5.0.7",
         "@ionic/storage": "^2.2.0",
         "@mdi/font": "^5.1.45",
+        "@ng-select/ng-select": "^3.7.3",
         "@ngx-translate/core": "^12.1.2",
         "@ngx-translate/http-loader": "^4.0.0",
         "angular2-moment": "^1.9.0",
         "autolinker": "^3.14.2",
         "cordova-android": "^6.2.3",
         "cordova-android-support-gradle-release": "^3.0.1",
-        "cordova-browser": "5.0.4",
+        "cordova-browser": "^5.0.4",
         "cordova-ios": "6.1.1",
         "cordova-plugin-chooser": "^1.3.2",
-        "cordova-plugin-device": "^2.0.2",
+        "cordova-plugin-device": "^2.0.3",
         "cordova-plugin-ionic-keyboard": "^2.2.0",
         "cordova-plugin-ionic-webview": "^4.2.1",
         "cordova-plugin-network-information": "^2.0.2",
-        "cordova-plugin-splashscreen": "^5.0.2",
-        "cordova-plugin-statusbar": "^2.4.2",
-        "cordova-plugin-whitelist": "^1.3.3",
+        "cordova-plugin-splashscreen": "^5.0.4",
+        "cordova-plugin-statusbar": "^2.4.3",
+        "cordova-plugin-whitelist": "^1.3.5",
         "cordova-res": "^0.15.1",
         "core-js": "^2.5.4",
         "firebase": "^8.6.7",
@@ -59,6 +63,7 @@
         "ngx-logger": "^4.2.1",
         "ngx-perfect-scrollbar": "^9.0.0",
         "perfect-scrollbar": "^1.5.0",
+        "roboto-fontface": "^0.10.0",
         "rxjs": "~6.5.1",
         "tslib": "^1.9.0",
         "zone.js": "~0.9.1"

package/src/app/app-routing.module.ts

@@ -48,9 +48,19 @@ const routes: Routes = [
   {
     path: 'unassigned-conversations',
     loadChildren: () => import('./pages/unassigned-conversations/unassigned-conversations.module').then( m => m.UnassignedConversationsPageModule)
+  },
+  {
+    path: 'create-ticket',
+    loadChildren: () => import('./pages/create-ticket/create-ticket.module').then( m => m.CreateTicketPageModule)
+  },
+  {
+    path: 'create-requester',
+    loadChildren: () => import('./pages/create-requester/create-requester.module').then( m => m.CreateRequesterPageModule)
   }
 
 
+
+
   // {
   //   path: 'conversation-detail/:IDConv',
   //   loadChildren: () => import('./pages/conversation-detail/conversation-detail.module').then( m => m.ConversationDetailPageModule)

package/src/app/app.component.html

@@ -1,17 +1,27 @@
 <ion-app>
   <div>
-    <!-- (click)="hideAlert()" -->
+
     <app-image-viewer></app-image-viewer>
-    <ion-split-pane when="md" contentId="main">
 
-      <ion-nav #sidebarNav [root]="sidebarPage"></ion-nav>
+    <div class="sidebar" [ngClass]="{'hide-sidebar': IS_ONLINE === false || IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}">
+      <app-sidebar></app-sidebar>
+    </div>
+    
+    <div class="user-details-sidebar" [ngClass]="{'hide-sidebar': IS_ONLINE === false || IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}">
+      <app-sidebar-user-details> </app-sidebar-user-details>
+    </div>
+ 
+    <ion-split-pane when="md" contentId="main">
+      <!-- 'sidebar-visible': IS_ONLINE === true && SUPPORT_MODE === true, -->
+      <ion-nav #sidebarNav [root]="sidebarPage" [ngClass]="{'sidebar-hidden': IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}"></ion-nav>
       <!--  our side menu  -->
       <!-- <ion-router-outlet id="sidebar" name='sidebar' animated="false" #masterNav> -->
       <!-- <app-conversations-list></app-conversations-list> -->
       <!-- <app-details></app-details> -->
       <!-- </ion-router-outlet> -->
       <!-- the main content -->
-      <ion-router-outlet id="main" #detailNav animated="false">
+      <!--  -->
+      <ion-router-outlet id="main" #detailNav animated="false" [ngClass]="{'router-outlet-margin-left': platformIs === 'mobile' &&  SUPPORT_MODE === true && IS_ON_MOBILE_DEVICE === false}">
       </ion-router-outlet>
     </ion-split-pane>
   </div>

package/src/app/app.component.scss

@@ -1,6 +1,23 @@
-.split-pane-md.split-pane-visible > .split-pane-side { 
+.split-pane-md.split-pane-visible > .split-pane-side {
     min-width: 312px;
     display: block; // Safari bug fix
+    margin-left: 60px;
+}
+
+.sidebar-visible {
+    margin-left: 60px;
+}
+
+.sidebar-hidden {
+    margin-left: 0px !important;
+}
+
+.hide-sidebar {
+    display: none;
+}
+
+.router-outlet-margin-left {
+    left: 60px
 }
 
 // @media (min-width: 768px) {

package/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
+import { tranlatedLanguage, URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
 import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 
@@ -58,6 +58,7 @@ import * as PACKAGE from 'package.json';
 import { filter } from 'rxjs/operators'
 import { WebSocketJs } from './services/websocket/websocket-js';
 import { Location } from '@angular/common'
+
 // import { filter } from 'rxjs/operators';
 
 @Component({
@@ -77,7 +78,7 @@ export class AppComponent implements OnInit {
   public sidebarPage: any;
   public notificationsEnabled: boolean;
   public zone: NgZone;
-  private platformIs: string;
+  public platformIs: string;
   private doitResize: any;
   private timeModalLogin: any;
   public tenant: string;
@@ -98,7 +99,9 @@ export class AppComponent implements OnInit {
   public missingConnectionToast: any
   public executedInitializeAppByWatchConnection: boolean = false;
   private version: string;
-
+  IS_ONLINE: boolean;
+  IS_ON_MOBILE_DEVICE: boolean;
+  SUPPORT_MODE: boolean;
   // private isOnline: boolean = false;
 
   wsService: WebSocketJs;
@@ -145,11 +148,20 @@ export class AppComponent implements OnInit {
 
     this.saveInStorageNumberOfOpenedChatTab();
     this.listenChatAlreadyOpenWithoutParamsInMobileMode()
-
+    this.isOnMobileDevice()
     // this.listenToUrlChanges();
     // this.getPageState();
   }
 
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false;
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true;
+    }
+    // this.logger.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE;
+  }
+
 
 
   listenChatAlreadyOpenWithoutParamsInMobileMode() {
@@ -256,7 +268,7 @@ export class AppComponent implements OnInit {
 
 
   saveInStorageNumberOfOpenedChatTab() {
-    this.logger.log('Calling saveInStorageChatOpenedTab!');
+    // this.logger.log('Calling saveInStorageChatOpenedTab!');
 
     // https://jsfiddle.net/jjjs5wd3/3/å
     if (+localStorage.tabCount > 0) {
@@ -286,6 +298,13 @@ export class AppComponent implements OnInit {
    */
   ngOnInit() {
     const appconfig = this.appConfigProvider.getConfig();
+    // console.log('[APP-COMP] appconfig', appconfig)
+    if (appconfig && appconfig.supportMode) {
+      this.SUPPORT_MODE = appconfig.supportMode
+      // console.log('[APP-COMP] appconfig > SUPPORT_MODE', this.SUPPORT_MODE)
+    } else {
+      this.SUPPORT_MODE = false;
+    }
     this.persistence = appconfig.authPersistence;
     this.appStorageService.initialize(environment.storage_prefix, this.persistence, '')
     // this.logger.log('[APP-COMP] HELLO ngOnInit !!!!!!!')
@@ -416,9 +435,9 @@ export class AppComponent implements OnInit {
     // this.logger.log('[APP-COMP] - X - initializeApp !!! CALLED-BY: ', calledby);
     // console.log('[APP-COMP] appconfig platform is cordova: ', this.platform.is('cordova'))
 
-    // if (!this.platform.is('cordova')) {
-    this.splashScreen.show();
-    // }
+    if (!this.platform.is('cordova')) {
+      this.splashScreen.show();
+    }
     this.tabTitle = document.title;
 
     this.getRouteParamsAndSetLoggerConfig();
@@ -445,9 +464,9 @@ export class AppComponent implements OnInit {
 
       // this.setLanguage();
 
-      // if (this.splashScreen) {
-      this.splashScreen.hide();
-      // }
+      if (this.splashScreen) {
+        this.splashScreen.hide();
+      }
       this.statusBar.styleDefault();
       this.navService.init(this.sidebarNav, this.detailNav);
       // this.persistence = appconfig.authPersistence;
@@ -530,8 +549,8 @@ export class AppComponent implements OnInit {
       currentUserId = currentUser.uid;
       this.logger.log('[APP-COMP] - setLanguage current_user uid: ', currentUserId);
     }
-    this.translate.setDefaultLang('en');
-    this.translate.use('en');
+    // this.translate.setDefaultLang('en');
+    //   this.translate.use('en');
 
     const browserLang = this.translate.getBrowserLang();
     this.logger.log('[APP-COMP] browserLang: ', browserLang);
@@ -544,8 +563,19 @@ export class AppComponent implements OnInit {
     } else if (browserLang && stored_preferred_lang) {
       chat_lang = stored_preferred_lang
     }
-
-    this.translate.use(chat_lang);
+  
+    this.logger.log('[APP-COMP] - chat_lang', chat_lang)
+  
+    if (tranlatedLanguage.includes(chat_lang)) {
+      this.logger.log('[APP-COMP] tranlatedLanguage includes',chat_lang , ': ', tranlatedLanguage.includes(chat_lang)) 
+      this.translate.setDefaultLang(chat_lang)
+      this.translate.use(chat_lang);
+    }
+    else {
+      this.logger.log('[APP-COMP] tranlatedLanguage includes',chat_lang , ': ', tranlatedLanguage.includes(chat_lang)) 
+      this.translate.setDefaultLang('en');
+      this.translate.use('en');
+    }
 
     // this.logger.debug('[APP-COMP] navigator.language: ', navigator.language);
     // let language;
@@ -647,7 +677,7 @@ export class AppComponent implements OnInit {
       })
     } else {
       this.logger.warn('[APP-COMP] >>> I AM NOT LOGGED IN <<<')
-
+      this.IS_ONLINE = false;
       // clearTimeout(this.timeModalLogin);
       // this.timeModalLogin = setTimeout(() => {
       if (!this.hadBeenCalledOpenModal) {
@@ -830,10 +860,14 @@ export class AppComponent implements OnInit {
           // const user = this.tiledeskAuthService.getCurrentUser();
           // if (this.isOnline === false) {
           // if (AUTH_STATE_ONLINE) {
+          this.IS_ONLINE = true;
+          // console.log('[APP-COMP] IS_ONLINE', this.IS_ONLINE)
           this.goOnLine();
           // }
         } else if (state === AUTH_STATE_OFFLINE) {
           // this.checkTokenAndGoOffline() //se c'è un tiledeskToken salvato, allora aspetta, altrimenti vai offline
+          this.IS_ONLINE = false;
+          // console.log('[APP-COMP] IS_ONLINE', this.IS_ONLINE)
           this.goOffLine()
         }
       }, error => {
@@ -871,12 +905,12 @@ export class AppComponent implements OnInit {
   }
 
   /**
- * goOnLine:
- * 1 - nascondo splashscreen
- * 2 - recupero il tiledeskToken e lo salvo in chat manager
- * 3 - carico in d
- * @param user
- */
+  * goOnLine:
+  * 1 - nascondo splashscreen
+  * 2 - recupero il tiledeskToken e lo salvo in chat manager
+  * 3 - carico in d
+  * @param user
+  */
   goOnLine = () => {
     this.logger.log('[APP-COMP]- GO-ONLINE ');
     // this.isOnline = true;

package/src/app/app.module.ts

@@ -82,6 +82,8 @@ import { ConversationListPageModule } from './pages/conversations-list/conversat
 import { ConversationDetailPageModule } from './pages/conversation-detail/conversation-detail.module';
 import { LoginPageModule } from './pages/authentication/login/login.module';
 import { LoaderPreviewPageModule } from './pages/loader-preview/loader-preview.module';
+import { CreateTicketPageModule } from './pages/create-ticket/create-ticket.module';
+import { CreateRequesterPageModule } from './pages/create-requester/create-requester.module';
 
 // UTILS
 import { ScrollbarThemeModule } from './utils/scrollbar-theme.directive';
@@ -96,6 +98,7 @@ import { Network } from '@ionic-native/network/ngx';
 import { ConnectionService } from 'ng-connection-service';
 import { WebSocketJs } from './services/websocket/websocket-js';
 import { UnassignedConversationsPageModule } from './pages/unassigned-conversations/unassigned-conversations.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 // FACTORIES
 export function createTranslateLoader(http: HttpClient) {
@@ -251,6 +254,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
     IonicModule.forRoot(),
@@ -279,7 +283,9 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     SharedModule,
     ConversationInfoModule,
     NgxLinkifyjsModule.forRoot(),
-    LoaderPreviewPageModule
+    LoaderPreviewPageModule,
+    CreateTicketPageModule,
+    CreateRequesterPageModule
   ],
   bootstrap: [AppComponent],
 

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -118,12 +118,17 @@
   <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
 
   <ion-buttons slot="end">
-    <ion-button *ngIf="!conversation.archived"
+    <ion-button *ngIf="!conversation.archived" [tooltip]="archiveTooltip"  [options]="tooltip_options" placement="bottom"  content-type="template"
       [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
       id="{{ 'close_conversation_button' + conversation.uid }}" class="close-conversation-button" ion-button clear
       item-end (click)="closeConversation(conversation);$event.stopPropagation();" padding>
       <ion-icon slot="icon-only" style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}"
         color="close-conversation" name="archive-outline" item-end></ion-icon>
+
+        <ng-template #archiveTooltip>
+          <span *ngIf="conversation?.recipient.startsWith('support-group')"> {{ resolve_btn_tooltip}} </span>
+          <span *ngIf="!conversation?.recipient.startsWith('support-group')"> {{ archive_btn_tooltip }} </span>
+        </ng-template>
     </ion-button>
     <!-- <ion-button *ngIf="conversation.archived" class="close-conversation-button" ion-button clear item-end disabled padding>
       <!- - <ion-icon  style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}" color="close-conversation" name="archive-outline" item-end></ion-icon> - ->
@@ -142,7 +147,7 @@
       {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD YYYY') : (conversation.timestamp| amDateFormat:'DD MMM YYYY') }}
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
     </span>
-    <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i>
+    <!-- <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i> -->
   </div>
 
   <!-- && !conversation?.archived -->