@chat21/chat21-ionic 3.0.6-2.4-rc1 → 3.0.6-2.4-rc2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # chat21-ionic ver 3.0
 
+### 3.0.62.4-rc2
+- Fixed bug: in the modal window showing the image preview before download, the image name is missing
+- Add the ability to display the app sidebar in "wide mode"
+- Displays balloon messages with a light orange background for "internal notes" type message
+- Updates the regex that detects if the message contains only one or more emojis
+
 ### 3.0.62.4-rc1
 - Fixes the bug: when the user profile is updated in the dashboard it is not updated in the chat
 - Fixes the bug: when is sent a message with only emojis, some emojis have the chat balloon background

package/deploy_prod.sh

@@ -25,7 +25,7 @@ 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-console/v2/chat/
 aws s3 sync . s3://tiledesk-console/v2/chat/$version/
 cd ../../../
 # aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
@@ -34,7 +34,7 @@ cd ../../../
 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
+echo available on https://console.tiledesk.com/v2/chat/index.html
 
 
 ###### CHAT-IONIC5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.62.4-rc1",
+    "version": "3.0.62.4-rc2",
     "author": "Tiledesk SRL",
     "homepage": "https://tiledesk.com/",
     "scripts": {

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.html

@@ -79,7 +79,7 @@
 
       <!--backgroundColor non viene ancora usato -->
       <chat-bubble-message class="messages msg_sent" id="message_msg_sent" style="position: relative;" 
-        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" 
+        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
         [class.emoticon]="isEmojii(message?.text)"
         [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
         [message]="message" 

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.scss

@@ -84,7 +84,7 @@ ion-item {
     // padding: 2px 0px 4px 40px;
     padding: 2px 0px 14px 40px; // edited to display the date at the bottom of the "message bubble"
     .msg_sent {
-        background-color: var(--bobble-blue);
+        background-color: var(--bubble-blue);
         color: var(--col-msg-sent);
         margin-right: 4px;
         margin-left: 4px;
@@ -92,6 +92,12 @@ ion-item {
         min-width: 14px;
         border-top-right-radius: 8px;
         border-bottom-right-radius: 0px;
+
+        &.privateMsg{
+            background-color: var(--bubble-privateMsg);
+            color: var(--bubble-privateMsgColor)
+        }
+
     }
     .emoticon {
         background: unset !important;

package/src/app/chatlib/conversation-detail/message/image/image.component.ts

@@ -68,7 +68,7 @@ export class ImageComponent implements OnInit {
     modalImg.src = url
     if (captionText) {
    
-      captionText.innerHTML = fileName ? null : fileName = decodeURIComponent(decodeURIComponent(url).split('/').pop());
+      captionText.innerHTML = fileName ? fileName : decodeURIComponent(decodeURIComponent(url).split('/').pop());
       // console.log('XXXX ', decodeURIComponent(decodeURIComponent(url).split('/').pop()))
     }
 

package/src/app/chatlib/conversation-detail/message/return-receipt/return-receipt.component.scss

@@ -12,7 +12,7 @@
     }
 
     svg {
-        fill:  var(--bobble-blue) 
+        fill:  var(--bubble-blue) 
     }
 
     .c21-ico-schedule {

package/src/app/components/conversation-detail/bubble-my-message/bubble-my-message.component.html

@@ -1,6 +1,6 @@
 <div class="message message-my" [class.first-message]="isFirstMessage" >
  
-  <div class="bobble-message" 
+  <div class="bubble-message" 
     [class.image]="message.type == 'image'" 
     [class.no-text]="!message.text" 
     (mouseover)="showButtonInfo()">

package/src/app/components/conversation-detail/bubble-my-message/bubble-my-message.component.scss

@@ -1,5 +1,5 @@
 .message {
-    .bobble-message {
+    .bubble-message {
         position: relative;
         border-radius: 15px;
         font-size: 15px;
@@ -57,8 +57,8 @@
     }
         
   
-    .bobble-message {
-        background-color: var(--bobble-blue);
+    .bubble-message {
+        background-color: var(--bubble-blue);
         color: white;
         margin-right: 24px;
         float: right;
@@ -67,7 +67,7 @@
     }
     &.first-message {
         margin-top: 10px;
-        .bobble-message {
+        .bubble-message {
             border-top-right-radius: 12px;
             border-bottom-right-radius: 0px;
         }

package/src/app/components/conversation-detail/bubble-others-message/bubble-others-message.component.html

@@ -2,7 +2,7 @@
                           
   <span class="button-info" [ngClass]="message.uid" (click)="presentPopover($event, message)"></span>
   
-  <div class="bobble-message" 
+  <div class="bubble-message" 
     [class.image]="message.type == 'image'"
     [class.no-text]="!message.text"
     (mouseover)="showButtonInfo()">

package/src/app/components/conversation-detail/bubble-others-message/bubble-others-message.component.scss

@@ -1,5 +1,5 @@
 .message {
-    .bobble-message {
+    .bubble-message {
         position: relative;
         border-radius: 15px;
         font-size: 15px;
@@ -50,7 +50,7 @@
         .message-other {
             width: 100%;
             margin-top: 4px;
-            .bobble-message {
+            .bubble-message {
                 background-color: var(--light-gray);
                 color: var(--black);
                 margin-left: 24px;
@@ -72,7 +72,7 @@
             }
             &.first-message {
                 margin-top: 10px;
-                .bobble-message {
+                .bubble-message {
                     border-top-left-radius: 12px;
                     border-bottom-left-radius: 0px;
                 }

package/src/app/components/project-item/project-item.component.ts

@@ -61,9 +61,7 @@ export class ProjectItemComponent implements OnInit {
     this.translations();
     this.listenToPostMsgs();
     this.onInitWindowWidth();
-
-    this.isOnMobileDevice()
-    // console.log('[PROJECT-ITEM] - on INIT')
+    this.isOnMobileDevice();
   }
 
   isOnMobileDevice() {
@@ -71,7 +69,6 @@ export class ProjectItemComponent implements OnInit {
     if (/Android|iPhone/i.test(window.navigator.userAgent)) {
       this.IS_ON_MOBILE_DEVICE = true;
     }
-    // console.log('[PROJECT-ITEM] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
     return this.IS_ON_MOBILE_DEVICE;
   }
 
@@ -107,10 +104,7 @@ export class ProjectItemComponent implements OnInit {
 
   listenToPostMsgs() {
     window.addEventListener("message", (event) => {
-      // console.log("[PROJECT-ITEM] post message event ", event);
-
       if (event && event.data) {
-        // console.log("[PROJECT-ITEM] message event data  ", event.data);
         if (event.data === 'hasChangedProject') {
           this.unservedRequestCount = 0;
           if (this.project) {
@@ -161,11 +155,13 @@ export class ProjectItemComponent implements OnInit {
   getStoredCurrenUser() {
     const storedCurrentUser = this.appStorageService.getItem('currentUser');
     this.logger.log('[PROJECT-ITEM] - STORED CURRENT USER ', storedCurrentUser)
-    if (storedCurrentUser) {
+    if (storedCurrentUser && storedCurrentUser !== 'undefined') {
       const currentUser = JSON.parse(storedCurrentUser)
       this.logger.log('[PROJECT-ITEM] - STORED CURRENT USER OBJCT', currentUser);
       this.currentUserId = currentUser.uid
       this.logger.log('[PROJECT-ITEM] - CURRENT USER ID', this.currentUserId);
+    } else {
+      this.logger.error('[PROJECT-ITEM] - STORED CURRENT USER OBJCT NOT FOUND IN STORAGE');
     }
   }
 
@@ -298,28 +294,19 @@ export class ProjectItemComponent implements OnInit {
   }
 
   updateUnservedRequestCount() {
-    // console.log('[PROJECT-ITEM] updateUnservedRequestCount ')
-    // this.requestsService.requestsList_bs.subscribe((requests) => {
+
     this.wsService.wsRequestsList$
       .subscribe((requests) => {
-        // console.log('[PROJECT-ITEM] requests ', requests)
         if (requests) {
           let count = 0;
           requests.forEach(r => {
-            // this.logger.log('NAVBAR - UPDATE-UNSERVED-REQUEST-COUNT request agents', r.agents)
-            // *bug fix: when the user is an agent also for the unserved we have to consider if he is present in agents
-            // && this.ROLE_IS_AGENT === true
             if (r['status'] === 100) {
               if (this.hasmeInAgents(r['agents']) === true) {
                 count = count + 1;
               }
             }
-            // if (r['status'] === 100 && this.ROLE_IS_AGENT === false) {
-            //   count = count + 1;
-            // }
           });
           this.unservedRequestCount = count;
-          // console.log('[PROJECT-ITEM] UNSERVED REQUEST COUNT - RES ', this.unservedRequestCount)
         }
       }, error => {
         this.logger.error('[PROJECT-ITEM] UNSERVED REQUEST COUNT * error * ', error)
@@ -331,10 +318,7 @@ export class ProjectItemComponent implements OnInit {
   hasmeInAgents(agents) {
     if (agents) {
       for (let j = 0; j < agents.length; j++) {
-        // this.logger.log('[PROJECT-ITEM] hasmeInAgents currentUserId  ', this.currentUserId)
-        // this.logger.log('[PROJECT-ITEM] hasmeInAgents agent  ', agents[j].id_user)
         if (this.currentUserId === agents[j].id_user) {
-          // this.logger.log('[PROJECT-ITEM] hasmeInAgents ')
           return true
         }
       }
@@ -344,7 +328,6 @@ export class ProjectItemComponent implements OnInit {
   }
 
   updateCurrentUserRequestCount() {
-    // this.requestsService.requestsList_bs.subscribe((requests) => {
     this.wsService.wsRequestsList$
       .pipe(
         takeUntil(this.unsubscribe$)
@@ -353,15 +336,9 @@ export class ProjectItemComponent implements OnInit {
         if (requests) {
           let count = 0;
           requests.forEach(r => {
-
-            // const membersArray = Object.keys(r.members);
             const participantsArray = r['participants'] // new used with ws 
-            // this.logger.log('[NAVBAR] »» WIDGET updateCurrentUserRequestCount REQUEST currentUserRequestCount membersArray ', membersArray);
-
-            // const currentUserIsInParticipants = membersArray.includes(this.user._id);
+    
             const currentUserIsInParticipants = participantsArray.includes(this.currentUserId); // new used with ws 
-
-            // this.logger.log('[NAVBAR] »» WIDGET updateCurrentUserRequestCount REQUEST currentUserRequestCount currentUserIsInParticipants ', currentUserIsInParticipants);
             if (currentUserIsInParticipants === true) {
               count = count + 1;
             }
@@ -374,7 +351,6 @@ export class ProjectItemComponent implements OnInit {
       }, () => {
         this.logger.log('[PROJECT-ITEM] CURRENT USER REQUEST COUNT */* COMPLETE */*')
       })
-
   }
 
 

package/src/app/components/sidebar/sidebar.component.ts

@@ -79,22 +79,6 @@ export class SidebarComponent implements OnInit {
     this.listenTocurrentProjectUserUserAvailability$()
     this.getOSCODE();
     this.getCurrentChatLangAndTranslateLabels();
-
-    // this.loggedUser = this.chatManager.getCurrentUser();
-    // if (this.loggedUser) {
-    //   this.itemAvatar = {
-    //     imageurl: this.imageRepoService.getImagePhotoUrl(this.loggedUser.uid),
-    //     avatar: this.loggedUser.avatar,
-    //     color: this.loggedUser.color,
-    //     online: this.loggedUser.online,
-    //     lastConnection: this.loggedUser.lastConnection,
-    //     status: '',
-    //     width: '35px',
-    //     height: '35px'
-    //   };
-    // }
-
-
   }
 
 
@@ -112,7 +96,7 @@ export class SidebarComponent implements OnInit {
       this.logger.log('[SIDEBAR] USER_ROLE ', this.USER_ROLE)
       this.buildURLs(this.USER_ROLE)
     } else {
-      this.logger.log('[SIDEBAR] stored_project ', stored_project)
+      this.logger.error('[SIDEBAR] stored_project not found in storage', stored_project)
     }
   }
 
@@ -139,15 +123,21 @@ export class SidebarComponent implements OnInit {
       this.logger.log('[SIDEBAR] BSAuthStateChanged ', state)
 
       if (state === 'online') {
-        this.currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-        this.logger.log('[SIDEBAR] currentUser ', this.currentUser)
-        if (this.currentUser) {
-          this.createUserAvatar(this.currentUser)
-          this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(this.currentUser.uid)
-          this.logger.log('[SIDEBAR] photo_profile_URL ', this.photo_profile_URL)
-          this.checkIfExistPhotoProfile(this.photo_profile_URL)
+        const storedCurrentUser = this.appStorageService.getItem('currentUser');
+        this.logger.log('[SIDEBAR] storedCurrentUser ', storedCurrentUser)
+
+        if (storedCurrentUser && storedCurrentUser !== 'undefined') {
+          this.currentUser = JSON.parse(storedCurrentUser);
+          this.logger.log('[SIDEBAR] subcribeToAuthStateChanged currentUser ', this.currentUser)
+          if (this.currentUser) {
+            this.createUserAvatar(this.currentUser)
+            this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(this.currentUser.uid)
+            this.logger.log('[SIDEBAR] photo_profile_URL ', this.photo_profile_URL)
+            this.checkIfExistPhotoProfile(this.photo_profile_URL)
+          }
+        } else {
+          this.logger.error('[SIDEBAR] BSAuthStateChanged current user not found in storage')
         }
-
       }
     })
   }
@@ -196,32 +186,41 @@ export class SidebarComponent implements OnInit {
 
   getCurrentChatLangAndTranslateLabels() {
     const browserLang = this.translate.getBrowserLang();
-    const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-    // console.log('[SIDEBAR] - ngOnInit - currentUser ', currentUser)
-    // console.log('[SIDEBAR] - ngOnInit - browserLang ', browserLang)
-    let currentUserId = ''
-    if (currentUser) {
-      currentUserId = currentUser.uid
-      // console.log('[SIDEBAR] - ngOnInit - currentUserId ', currentUserId)
-    }
 
-    const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
-    // console.log('[SIDEBAR] stored_preferred_lang: ', stored_preferred_lang);
+    const storedCurrentUser = this.appStorageService.getItem('currentUser')
+    this.logger.log('[SIDEBAR] - ngOnInit - storedCurrentUser ', storedCurrentUser)
 
-    let chat_lang = '';
-    if (browserLang && !stored_preferred_lang) {
-      chat_lang = browserLang
-      this.logger.log('[SIDEBAR] chat_lang: ', chat_lang);
-    } else if (browserLang && stored_preferred_lang) {
-      chat_lang = stored_preferred_lang
-      this.logger.log('[SIDEBAR] chat_lang: ', chat_lang);
-    }
-    if (tranlatedLanguage.includes(chat_lang)) {
-      this.logger.log('[SIDEBAR] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
-      this.translate.use(chat_lang);
+
+    if (storedCurrentUser && storedCurrentUser !== 'undefined') {
+      const currentUser = JSON.parse(storedCurrentUser);
+      this.logger.log('[SIDEBAR] - ngOnInit - currentUser ', currentUser)
+      this.logger.log('[SIDEBAR] - ngOnInit - browserLang ', browserLang)
+      let currentUserId = ''
+      if (currentUser) {
+        currentUserId = currentUser.uid
+        this.logger.log('[SIDEBAR] - ngOnInit - getCurrentChatLangAndTranslateLabels - currentUserId ', currentUserId)
+      }
+
+      const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
+      this.logger.log('[SIDEBAR] stored_preferred_lang: ', stored_preferred_lang);
+
+      let chat_lang = '';
+      if (browserLang && !stored_preferred_lang) {
+        chat_lang = browserLang
+        this.logger.log('[SIDEBAR] chat_lang: ', chat_lang);
+      } else if (browserLang && stored_preferred_lang) {
+        chat_lang = stored_preferred_lang
+        this.logger.log('[SIDEBAR] chat_lang: ', chat_lang);
+      }
+      if (tranlatedLanguage.includes(chat_lang)) {
+        this.logger.log('[SIDEBAR] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
+        this.translate.use(chat_lang);
+      } else {
+        this.logger.log('[SIDEBAR] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
+        this.translate.use('en');
+      }
     } else {
-      this.logger.log('[SIDEBAR] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
-      this.translate.use('en');
+      this.logger.error('[SIDEBAR] - ngOnInit - currentUser not found in storage ')
     }
     this.translateLabels()
   }
@@ -240,7 +239,6 @@ export class SidebarComponent implements OnInit {
   getConversationsTranslation() {
     this.translate.get('Conversations')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate Conversations', text)
         this.conversations_lbl = text
       });
   }
@@ -248,7 +246,6 @@ export class SidebarComponent implements OnInit {
   getContactsTranslation() {
     this.translate.get('LABEL_CONTACTS')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate Contacts', text)
         this.contacts_lbl = text
       });
   }
@@ -256,7 +253,6 @@ export class SidebarComponent implements OnInit {
   getAppsTranslation() {
     this.translate.get('Apps')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate Apps', text)
         this.apps_lbl = text
       });
   }
@@ -264,7 +260,6 @@ export class SidebarComponent implements OnInit {
   getAnalyticsTranslation() {
     this.translate.get('Analytics')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate Analytics', text)
         this.analytics_lbl = text
       });
   }
@@ -272,7 +267,6 @@ export class SidebarComponent implements OnInit {
   getActivitiesTranslation() {
     this.translate.get('Activities')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate Activities', text)
         this.activities_lbl = text
       });
   }
@@ -280,7 +274,6 @@ export class SidebarComponent implements OnInit {
   getHistoryTranslation() {
     this.translate.get('History')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate History', text)
         this.history_lbl = text
       });
   }
@@ -288,7 +281,6 @@ export class SidebarComponent implements OnInit {
   getSettingsTranslation() {
     this.translate.get('Settings')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate Settings', text)
         this.settings_lbl = text
       });
   }
@@ -385,20 +377,14 @@ export class SidebarComponent implements OnInit {
     this.countClickOnOpenUserDetailSidebar++
     this.logger.log('[SIDEBAR-CHAT] countClickOnOpenUserDetailSidebar', this.countClickOnOpenUserDetailSidebar)
     this.logger.log('[SIDEBAR-CHAT] OPEN UESER DTLS SIDE PANEL')
-    // this.HAS_CLICKED_OPEN_USER_DETAIL = true
-    // console.log('[SIDEBAR-CHAT] OPEN USER DTLS SIDE PANEL ', this.HAS_CLICKED_OPEN_USER_DETAIL)
     const elSidebarUserDtls = <HTMLElement>document.querySelector('#user-details');
     this.logger.log('[SIDEBAR] OPEN USER DTLS SIDE PANEL elSidebarUserDtls ', elSidebarUserDtls)
 
-    // if (elSidebarUserDtls) {
-    //   elSidebarUserDtls.classList.add("active");
-    //   this.events.publish('userdetailsidebar:opened', true);
-    // }
+  
     if (elSidebarUserDtls && this.countClickOnOpenUserDetailSidebar === 1) {
       elSidebarUserDtls.classList.add("active");
     }
     if (elSidebarUserDtls && this.countClickOnOpenUserDetailSidebar > 1) {
-      // console.log('[SIDEBAR] this.countClickOnOpenUserDetailSidebar HERE', this.countClickOnOpenUserDetailSidebar)
       if (elSidebarUserDtls.classList.contains('active')) {
         this.logger.log('[SIDEBAR-CHAT] elSidebarUserDtls contains class ACTIVE', elSidebarUserDtls)
         elSidebarUserDtls.classList.remove("active");
@@ -409,24 +395,6 @@ export class SidebarComponent implements OnInit {
     }
   }
 
-  // onCloseUserDetailsSidebar($event) {
-  // this.logger.log('[SIDEBAR-CHAT] HAS_CLICKED_CLOSE_USER_DETAIL ', $event)
-  // this.HAS_CLICKED_OPEN_USER_DETAIL = $event
-  // const elemNavbar = <HTMLElement>document.querySelector('.navbar-absolute');
-  // this.logger.log('[SIDEBAR] elemNavBar ', elemNavbar)
-  // if (elemNavbar) {
-  //   elemNavbar.classList.remove("navbar-absolute-custom-class")
-  // }
-
-  // const elemNavbarBrand = <HTMLElement>document.querySelector('.navbar-brand');
-  // this.logger.log('[SIDEBAR] elemNavbarBrand ', elemNavbarBrand)
-  // if (elemNavbarBrand) {
-  //   elemNavbarBrand.classList.remove("navbar-brand-z-index-zero")
-  // }
-  // }
-
-
-
   goToHome() {
     let url = this.DASHBOARD_URL + this.project_id + '/home'
     this.dashboard_home_url = url;
@@ -458,14 +426,12 @@ export class SidebarComponent implements OnInit {
     myWindow.focus();
   }
 
-
   goToAnalytics() {
     let url = this.DASHBOARD_URL + this.project_id + '/analytics'
     const myWindow = window.open(url, '_self');
     myWindow.focus();
   }
 
-
   goToActivities() {
     let url = this.DASHBOARD_URL + this.project_id + '/activities'
     const myWindow = window.open(url, '_self');