@chat21/chat21-ionic 3.0.70-rc.2 → 3.0.71

package/CHANGELOG.md

@@ -1,7 +1,18 @@
 # chat21-ionic ver 3.0
 
+### 3.0.71 in PROD
+
+### 3.0.71-rc.1
+- changed: native downloadURL on new file uploaded
+- added: update lead info in conversation-detail and conversation-header when agent updates 
+- added: private message UI when agent receive a private message from other agents
+- removed: scroll-bar from conversation-list page
+
+### 3.0.70 in PROD
+
 ### 3.0.70-rc.2
 - added: cache control max-age
+- added: tooltip on info message in conversation-detail page
 
 ### 3.0.70-rc.1
 - changed: README and LICENSE files

package/README.md

@@ -4,10 +4,20 @@
 > 
 > ***Use [Docker Compose Tiledesk installation](https://github.com/Tiledesk/tiledesk-deployment/blob/master/docker-compose/README.md) guide***
 
-Chat21 is the core of the open source live chat platform [Tiledesk.com](http://www.tiledesk.com).
+# Introduction
 
-## Community? Questions? Support?
-If you need help or just want to hang out, come, say hi on our [<img width="15" alt="Tiledesk discord" src="https://seeklogo.com/images/D/discord-color-logo-E5E6DFEF80-seeklogo.com.png"> Discord](https://discord.gg/WQPfqShJ) server.
+Chat21 is the core of the open source live chat platform [Tiledesk.com](http://www.tiledesk.com). Tiledesk is an Open Source Live Chat platform with integrated Chatbots written in NodeJs and Express. Build your own customer support with a multi-channel platform for Web, Android and iOS.
+
+Designed to be open source since the beginning, we actively worked on it to create a totally new, first class customer service platform based on instant messaging.
+
+What is Tiledesk today? It became the open source “conversational app development” platform that everyone needs 😌
+
+You can use Tiledesk to increase sales for your website or for post-sales customer service. Every conversation can be automated using our first class native chatbot technology. You can also connect your own applications using our APIs or Webhooks. Moreover you can deploy entire visual applications inside a conversation. And your applications can converse with your chatbots or your end-users! We know this is cool 😎
+
+Tiledesk is multichannel in a totally new way. You can write your chatbot scripts with images, buttons and other cool elements that your channels support. But you will configureyour chatbot replies only once. They will run on every channel, auto-adapting the responses to the target channel whatever it is, Whatsapp, Facebook Messenger, Telegram etc.
+
+# Community? Questions? Support?
+If you need help or just want to hang out, come, say hi on our [<img width="15" alt="Tiledesk discord" src="https://seeklogo.com/images/D/discord-color-logo-E5E6DFEF80-seeklogo.com.png"> Discord](https://discord.gg/nERZEZ7SmG) server.
 
 # Features #
 With Chat21-ionic you can:
@@ -188,4 +198,4 @@ To auto login pass the JWT token as a query parameter of your Chat url as in the
 
 "http://localhost:8100/#/conversation-detail?jwt=<JWT_TOKEN>"
 
-```
+```

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.70-rc.2",
+    "version": "3.0.71",
     "license": "AGPL-3.0",
     "homepage": "https://tiledesk.com/",
     "repository": {

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

@@ -119,7 +119,7 @@
       <!--backgroundColor non viene ancora usato -->
 
       <chat-bubble-message class="messages msg_receive" id="message_msg_receive" 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)"
         [message]="message" 
         [textColor]="'black'"

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

@@ -152,6 +152,11 @@ ion-item {
         width: auto;
         border-top-left-radius: 8px;
         border-bottom-left-radius: 0px;
+
+        &.privateMsg{
+            background-color: var(--bubble-privateMsg);
+            color: var(--bubble-privateMsgColor)
+        }
     }
 
     .emoticon {

package/src/app/chatlib/conversation-detail/message/info-message/info-message.component.html

@@ -1,5 +1,20 @@
-<span class="base_info" [innerHTML]="message?.text | htmlEntiesEncode | marked" [tooltip]="timeTooltipLeft"  placement="left" content-type="template">
-<!-- <span class="base_info" [innerHTML]="message_text | marked"></span> -->
-<ng-template #timeTooltipLeft>
-    <span>{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})</span>
-</ng-template> 
+<div class="info-container">
+    <!-- <div class="spinner">
+        <div class="bounce3"></div>
+        <div class="bounce2"></div>
+        <div class="bounce1"></div>
+    </div> -->
+      
+    <div>
+        <span class="base_info" [innerHTML]="message?.text | marked" [options]="tooltipOptions" [tooltip]="timeTooltipLeft"  placement="left" content-type="template"></span>
+        <ng-template #timeTooltipLeft>
+            <span>{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})</span>
+        </ng-template> 
+    </div>
+    
+    <!-- <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+    </div> -->
+</div>

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

@@ -1,3 +1,9 @@
+.info-container{
+    display: flex;
+    align-content: center;
+    justify-content: center;
+}
+
 .base_info {
     border-radius: 14px;
     border: 1px solid #C9E4F6;
@@ -8,8 +14,39 @@
     background: #C9E4F6;
     font-size: 0.70em;
     color: var(--basic-gray);
-    margin-left: 32px;
-    margin-right: 32px;
+    margin-left: 5px; //32px;
+    margin-right: 5px; //32px;
  
 }
 
+.spinner {
+    // margin: 15px 10px; //remove it if activate avatar image 
+    width: 45px;
+    // text-align: center;
+    min-height: 100%;
+    margin: auto 0px;
+}
+
+.spinner > div {
+    width: 10px;
+    height: 10px;
+    background-color: #333;
+
+    border-radius: 100%;
+    display: inline-block;
+    margin: 0px 2px;
+}
+
+.spinner .bounce1 {
+    background-color: #C9E4F6;
+}
+
+.spinner .bounce2 {
+    background-color: #C9E4F6;
+    opacity: 0.6
+}
+
+.spinner .bounce3 {
+    background-color: #C9E4F6;
+    opacity: 0.4
+}

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

@@ -16,6 +16,17 @@ export class InfoMessageComponent implements OnInit, OnChanges {
 
   public message_text: string
   private logger: LoggerService = LoggerInstance.getInstance()
+
+  tooltipOptions = {
+    'show-delay': 500,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 200
+  };
+  
   constructor() { }
 
   ngOnInit() {

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -157,11 +157,11 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     } else {
       this.IS_SUPPORT_GROUP_CONVERSATION = false
     }
-    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges supportMode ', this.supportMode)
-    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges disableTextarea ', this.disableTextarea)
-    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
-    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges tagsCannedFilter ", this.tagsCannedFilter);
-    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges areVisibleCAR; ", this.areVisibleCAR);
+    // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges supportMode ', this.supportMode)
+    // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges disableTextarea ', this.disableTextarea)
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges tagsCannedFilter ", this.tagsCannedFilter);
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges areVisibleCAR; ", this.areVisibleCAR);
 
 
     this.logger.log('[CONVS-DETAIL] - returnChangeTextArea ngOnChanges in [MSG-TEXT-AREA]  this.tagsCannedFilter.length ', this.tagsCannedFilter.length)

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

@@ -137,8 +137,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
 
   @HostListener('document:click', ['$event'])
   clickout(event) {
-    this.logger.log('[SIDEBAR-USER-DETAILSS-CHAT] clickout event.target)', event.target)
-    this.logger.log('[SIDEBAR-USER-DETAILSS-CHAT] clickout event.target)', event.target.id)
+    // this.logger.log('[SIDEBAR-USER-DETAILSS-CHAT] clickout event.target)', event.target)
     const clicked_element_id = event.target.id
     if (this.eRef.nativeElement.contains(event.target)) {
       // this.logger.log('[SIDEBAR-USER-DETAILS] clicked inside')

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

@@ -971,6 +971,20 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.subscriptions.push(subscribe)
     }
 
+    subscriptionKey = 'messageInfo'
+    subscription = this.subscriptions.find((item) => item.key === subscriptionKey)
+    if (!subscription) {
+      subscription = this.conversationHandlerService.messageInfo.subscribe((msg: any) => {
+        this.logger.log('[CONVS-DETAIL] subscribe to messageInfo - messageId ', msg)
+        if (msg) {
+          that.updateLeadInfo(msg)
+          // this.setHeaderContent()
+        }
+      })
+      const subscribe = { key: subscriptionKey, value: subscription }
+      this.subscriptions.push(subscribe)
+    }
+
     // subscriptionKey = 'onGroupChange';
     // subscription = this.subscriptions.find(item => item.key === subscriptionKey);
     // if (!subscription) {
@@ -1009,6 +1023,25 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     })
   }
 
+  updateLeadInfo(msg){
+    if (msg.attributes && msg.attributes['updateUserFullname']) {
+      const userFullname = msg.attributes['updateUserFullname'];
+      this.logger.debug('[CONVS-DETAIL] newMessageAdded --> updateUserFullname', userFullname)
+      this.conversationWithFullname = userFullname //update info for next sendMessage object
+      //updates conversation header info
+      this.conversationAvatar = setConversationAvatar(
+        this.conversationWith,
+        this.conversationWithFullname,
+        this.conversationAvatar.channel_type
+      )
+      
+    }
+    if (msg.attributes && msg.attributes['updateUserEmail']) {
+      const userEmail = msg.attributes['updateUserEmail'];
+      this.logger.debug('[CONVS-DETAIL] newMessageAdded --> userEmail', userEmail)
+    }
+  }
+
   // ----------------------------------------------------------------
   // @ Unsubscribe all subscribed events (called in ionViewWillLeave)
   // ----------------------------------------------------------------

package/src/app/pages/conversations-list/conversations-list.page.html

@@ -15,8 +15,8 @@
     (onBackButton)=onBackButtonFN($event)>
   </app-option-header>
 </ion-header>
-
-<ion-content id="convs-list" #ioncontentconvlist class="list-avatar-page" appScrollbarTheme>
+<!-- appScrollbarTheme -->
+<ion-content id="convs-list" #ioncontentconvlist class="list-avatar-page" >
   <!-- class="ps" style="position: relative; max-width: 600px; max-height: 100%;" [perfectScrollbar]="config" -->
   <div id="scrollbar2">
     <ion-list>

package/src/app/pages/conversations-list/conversations-list.page.scss

@@ -6,6 +6,30 @@ ion-header {
   border-bottom-width: thin;
 }
 
+ion-content {
+  // overwrite inline styles
+  --offset-bottom: auto!important;
+  --overflow: hidden;
+  overflow: scroll;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 8px;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f9f9f9;
+  }
+  &::-webkit-scrollbar-thumb {
+       background-color: #b9b9b9;
+        border-radius: 0px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+      background-color: #727272;
+  }
+}
+
 ion-list {
   display: block;
   margin-block-start: 1em;

package/src/app/pages/loader-preview/loader-preview.page.html

@@ -27,8 +27,13 @@
     <ion-item>
       <ion-label color="primary" position="floating" floating> {{'AddACaption' | translate}}...</ion-label>
       <!-- <ion-input clearInput></ion-input> -->
-      <ion-textarea #messageTextArea #imageCaptionTexarea rows="1" autosize="false" auto-grow="true" [(ngModel)]="messageString"
-        (ionInput)="onChangeTextArea($event);" (keyup.enter)="pressedOnKeyboard($event, messageString);">
+      <ion-textarea #messageTextArea #imageCaptionTexarea 
+        rows="1"
+        autosize="false" 
+        auto-grow="true" 
+        [(ngModel)]="messageString"
+        (ionInput)="onChangeTextArea($event);"
+        (keyup.enter)="onKeyUp($event, messageString);">
       </ion-textarea>
     </ion-item>
 

package/src/app/pages/loader-preview/loader-preview.page.ts

@@ -333,8 +333,9 @@ export class LoaderPreviewPage implements OnInit, AfterViewInit {
     }
   }
 
-  pressedOnKeyboard(e: any, text: string) {
-    this.logger.log('[LOADER-PREVIEW-PAGE] pressedOnKeyboard - event:: ', e)
+
+  onKeyUp(event: any, text: string) {
+    this.logger.log('[LOADER-PREVIEW-PAGE] onKeyUp - event:: ', event)
     // const message = e.target.textContent.trim();
     // if (e.inputType === 'insertLineBreak' && message === '') {
     //   this.messageString = '';

package/src/chat-config-mqtt.json

@@ -11,7 +11,7 @@
         "messagingSenderId": "269505353043",
         "appId": "1:269505353043:web:b82af070572669e3707da6",
         "chat21ApiUrl": "https://us-central1-chat21-pre-01.cloudfunctions.net",
-        "tenant":"tilechat"
+        "tenant": "tilechat"
     },
     "chat21Config": {
         "appId": "tilechat",

package/src/chat21-core/providers/abstract/conversation-handler.service.ts

@@ -15,7 +15,9 @@ export abstract class ConversationHandlerService {
   abstract messageAdded: BehaviorSubject<MessageModel> = new BehaviorSubject<MessageModel>(null);
   abstract messageChanged: BehaviorSubject<MessageModel> = new BehaviorSubject<MessageModel>(null);
   abstract messageRemoved: BehaviorSubject<string> = new BehaviorSubject<string>(null);
-
+  abstract messageWait: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+  abstract messageInfo: BehaviorSubject<MessageModel> = new BehaviorSubject<MessageModel>(null);
+  
   // params
   abstract attributes: any;
   abstract messages: Array<MessageModel> = [];

package/src/chat21-core/providers/firebase/firebase-conversation-handler.ts

@@ -36,6 +36,7 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
     messageChanged: BehaviorSubject<MessageModel> = new BehaviorSubject<MessageModel>(null);;
     messageRemoved: BehaviorSubject<string> = new BehaviorSubject<string>(null);
     messageWait: BehaviorSubject<any> = new BehaviorSubject<string>(null);
+    messageInfo: BehaviorSubject<MessageModel> = new BehaviorSubject<MessageModel>(null);
 
     // public variables
     public attributes: any;
@@ -245,6 +246,9 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
         if (this.skipMessage && messageType(MESSAGE_TYPE_INFO, msg)) {
             return;
         }
+        if(!this.skipMessage && messageType(MESSAGE_TYPE_INFO, msg)) {
+            this.messageInfo.next(msg)
+        }
         this.addRepalceMessageInArray(childSnapshot.key, msg);
         this.messageAdded.next(msg);
     }

package/src/chat21-core/providers/mqtt/mqtt-conversation-handler.ts

@@ -34,7 +34,8 @@ export class MQTTConversationHandler extends ConversationHandlerService {
     messageChanged: BehaviorSubject<MessageModel> = new BehaviorSubject<MessageModel>(null);;
     messageRemoved: BehaviorSubject<string> = new BehaviorSubject<string>(null);
     messageWait: BehaviorSubject<any> = new BehaviorSubject<string>(null);
-
+    messageInfo: BehaviorSubject<MessageModel> = new BehaviorSubject<MessageModel>(null);
+    
     // public variables
     public attributes: any;
     public messages: MessageModel[];
@@ -230,9 +231,12 @@ export class MQTTConversationHandler extends ConversationHandlerService {
     private addedMessage(messageSnapshot: any) {
         const msg = this.messageGenerate(messageSnapshot);
         msg.uid = msg.message_id;
-        if(this.skipInfoMessage && messageType(MESSAGE_TYPE_INFO, msg) ){
+        if(this.skipInfoMessage && messageType(MESSAGE_TYPE_INFO, msg)){
             return;
         }
+        if(!this.skipInfoMessage && messageType(MESSAGE_TYPE_INFO, msg)){
+            this.messageInfo.next(msg)
+        }
         // imposto il giorno del messaggio per visualizzare o nascondere l'header data
         msg.headerDate = null;
         const headerDate = setHeaderDate(this.translationMap, msg.timestamp);

package/src/chat21-core/providers/native/native-upload-service.ts

@@ -63,8 +63,10 @@ export class NativeUploadService extends UploadService {
             const url = this.URL_TILEDESK_FILE + '/users'
             return new Promise((resolve, reject) => {
                 that.http.post(url, formData, requestOptions).subscribe(data => {
-                    const downloadURL = this.URL_TILEDESK_FILE + '?path=' + encodeURI(data['filename']);
-                    resolve(downloadURL)
+                    let downloadURL = this.URL_TILEDESK_FILE + '/download' + '?path=' + encodeURI(data['filename']);
+                    if(upload.file.type.includes('pdf')){
+                        downloadURL = this.URL_TILEDESK_FILE + '?path=' + encodeURI(data['filename']);
+                    }
                     // that.BSStateUpload.next({upload: upload});
                 }, (error) => {
                     this.logger.error('[NATIVE UPLOAD] - ERROR upload new file ', error)

package/src/chat21-core/utils/utils-message.ts

@@ -72,13 +72,13 @@ export function messageType(msgType: string, message: any) {
     return false;
   }
   if (msgType === MESSAGE_TYPE_INFO) {
-    return this.isInfo(message);
+    return isInfo(message);
   }
   if (msgType === MESSAGE_TYPE_MINE) {
-    return this.isMine(message);
+    return isMine(message);
   }
   if (msgType === MESSAGE_TYPE_OTHERS) {
-    if (this.isInfo(message) === false && this.isMine(message) === false) {
+    if (isInfo(message) === false && isMine(message) === false) {
       return true;
     }
     return false;