@chat21/chat21-web-widget 5.0.53 → 5.0.55

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.55 in PROD
+- added: preflight property to /message API body
+
+### 5.0.54 in PROD
+
+### 5.0.53-rc.8
+- bug-fixed: if tiledeskAuth get 401 error do logOut
+
+### 5.0.53-rc.7
+- bug-fixed: start message was shown twice
+- bug-fixed: is showAvailableAgents is false and no conversations exist, 'new conversation' button not displayed 
+
+### 5.0.53-rc.6
+- changed: removed wait object from Rule model
+- bug-fixed: splitted message lose original parent message attributes
+- bug-fixed: preChat form element UI padding
+
+### 5.0.53-rc.5
+- changed: minor improvements for last-message component UI
+- changed: last-message UI for long text message and long attachment buttons
+- removed: automatic open widget after 3s on index.html
+- bug-fixed: on click over callout not opens widget correctly if singleConversation is active                                                                     
+
+### 5.0.53-rc.4
+- added: proactive rules from /widget/botsRules
+- added: imHere method for presence service
+- added: limit parameter to message-attachment component
+- added: send message on attachment button clicked on last-message component
+- added: events service
+- added: /requests/messages tiledesk api
+- added: convertConversationToMessage utils function in last-message component
+- changed: last-message UI
+- upgraded: chat21client.js to v0.1.12.4
+- changed: pipe files moved from /directives folder to /pipe folder
+- changed: moved isSender function from service to utils-message
+- bug-fixed: location.href and document.title is wrong (about:srcdoc)
+- bug-fixed: wait 2s before publish ImHere event to MQTT presence
+
 ### 5.0.53 in PROD
 
 ### 5.0.53-rc.3
@@ -10,7 +48,6 @@
 - removed: jquery plugin
 - removed: relativeLinkResolution from forRoot in RooterModule
 
-
 ### 5.0.53-rc.2
 - added: angular 15 engine
 - added: custom tooltip directive
@@ -26,7 +63,6 @@
 - removed: document.write() injection
 - removed: unused html test file
 
-
 ### 5.0.52 in PROD
 
 ### 5.0.52-rc.4

package/deploy_amazon_prod.sh

@@ -5,10 +5,19 @@ echo "version $version"
 # --build-optimizer=false if localstorage is disabled (webview) appears https://github.com/firebase/angularfire/issues/970
 ng build --configuration="prod" --aot=true --base-href --output-hashing none --build-optimizer=true --vendor-chunk=true
 
+#### FIREBASE #####
+# cd dist
+# # aws s3 sync . s3://tiledesk-widget/v5/latest/
+# aws s3 sync . s3://tiledesk-widget/v5/$version/ --cache-control max-age=300
+# aws s3 sync . s3://tiledesk-widget/v5/ --cache-control max-age=300
+# cd ..
+
+
+# #### MQTT #####
 cd dist
 # aws s3 sync . s3://tiledesk-widget/v5/latest/
-aws s3 sync . s3://tiledesk-widget/v5/$version/ --cache-control max-age=300
-aws s3 sync . s3://tiledesk-widget/v5/ --cache-control max-age=300
+aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control max-age=300
+aws s3 sync . s3://tiledesk-widget/v6/ --cache-control max-age=300
 cd ..
 
 aws  cloudfront create-invalidation --distribution-id E3EJDWEHY08CZZ --paths "/*"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.53",
+  "version": "5.0.55",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.component.html

@@ -115,7 +115,7 @@
   *******************************************
   tabindex -> 20 -->
   <chat-eyeeye-catcher-card *ngIf="g.senderId"
-    (onOpenChat)="onOpenChatEyeEyeCatcherCard()"
+    (onOpenChat)="onOpenCloseWidget($event)"
     (onCloseEyeCatcherCard)="onCloseEyeCatcherCard($event)">
   </chat-eyeeye-catcher-card> 
 

package/src/app/app.component.ts

@@ -148,7 +148,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     that.disposeWidget();
                     return;
                 }
-
+ 
                 if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
                     that.manageTabNotification();
                 }
@@ -167,9 +167,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 } else {
                     // if(conversation.is_new && isJustRecived(this.g.startedAt.getTime(), conversation.timestamp)){
                     //widget closed
-                    that.lastConversation = conversation;
-                    that.g.isOpenNewMessage = true;
-                    that.logger.debug('[APP-COMP] lastconversationnn', that.lastConversation)
+                    if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
+                        that.lastConversation = conversation;
+                        that.g.isOpenNewMessage = true;
+                        that.logger.debug('[APP-COMP] lastconversationnn', that.lastConversation)
+                    }
+                    
 
                     let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
                     that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
@@ -398,6 +401,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     that.showWidget();
                 }
 
+                if(this.g.botsRules){
+                    const rules = new Rules(that.tiledeskRequestsService, that.appStorageService,that.g)
+                    rules.initRules(that.g.windowContext, that.g.tiledeskToken, user, that.generateNewUidConversation(), that.g.botsRules)
+                }
+
+
             } else if (state && state === AUTH_STATE_OFFLINE) {
                 /** non sono loggato */
                 that.logger.info('[APP-COMP] OFFLINE - NO CURRENT USER AUTENTICATE: ');
@@ -783,11 +792,11 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         if (CLIENT_BROWSER) {
             attributes['client'] = CLIENT_BROWSER;
         }
-        if (location.href) {
-            attributes['sourcePage'] = location.href;
+        if (this.g.windowContext.window.location) {
+            attributes['sourcePage'] = this.g.windowContext.window.location.href;
         }
-        if(document.title){
-            attributes['sourceTitle'] = document.title;
+        if(this.g.windowContext.window.document){
+            attributes['sourceTitle'] = this.g.windowContext.window.document.title;
         }
         if (projectid) {
             attributes['projectId'] = projectid;
@@ -1493,6 +1502,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             // this.g.windowContext.window.document.title = this.tabTitle
         } else {
             // TAB IS ACTIVE --> restore title and DO NOT SOUND
+            this.presenceService.imHere()
             clearInterval(this.setIntervalTime)
             this.setIntervalTime = null;
             this.isTabVisible = true;

package/src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { EventsService } from './providers/events.service';
 
 // ************** COMPONENTS ************** //
 import { AppComponent } from './app.component';
@@ -61,9 +62,9 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { INGXLoggerMetadata, LoggerModule, NGXLogger, NgxLoggerLevel, NGXLoggerServerService, TOKEN_LOGGER_SERVER_SERVICE } from "ngx-logger";
 
 //DIRECTIVES
-import { HtmlEntitiesEncodePipe } from './directives/html-entities-encode.pipe';
-import { MarkedPipe } from './directives/marked.pipe';
-import { SafeHtmlPipe } from './directives/safe-html.pipe';
+import { HtmlEntitiesEncodePipe } from './pipe/html-entities-encode.pipe';
+import { MarkedPipe } from './pipe/marked.pipe';
+import { SafeHtmlPipe } from './pipe/safe-html.pipe';
 
 //LOGGER SERVICES
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
@@ -193,7 +194,7 @@ export function conversationHandlerFactory(chat21Service: Chat21Service, appConf
   }
 }
 
-export function typingFactory(appConfig: AppConfigService) {
+export function typingFactory(chat21Service: Chat21Service, appConfig: AppConfigService) {
   const config = appConfig.getConfig()
   if (config.chatEngine === CHAT_ENGINE_MQTT) {
     return new MQTTTypingService();
@@ -202,10 +203,10 @@ export function typingFactory(appConfig: AppConfigService) {
   }
 }
 
-export function presenceFactory(appConfig: AppConfigService) {
+export function presenceFactory(chat21Service: Chat21Service, appConfig: AppConfigService) {
   const config = appConfig.getConfig()
   if (config.chatEngine === CHAT_ENGINE_MQTT) {
-    return new MQTTPresenceService();
+    return new MQTTPresenceService(chat21Service);
   } else {
     return new FirebasePresenceService();
   }
@@ -319,6 +320,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     Rules,
     GlobalSettingsService,
     SettingsSaverService,
+    EventsService,
     StarRatingWidgetService,
     {
       provide: APP_INITIALIZER,
@@ -363,12 +365,12 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     {
       provide: PresenceService,
       useFactory: presenceFactory,
-      deps: [AppConfigService]
+      deps: [Chat21Service, AppConfigService]
     },
     {
       provide: TypingService,
       useFactory: typingFactory,
-      deps: [AppConfigService]
+      deps: [Chat21Service, AppConfigService]
     },
     {
       provide: UploadService,

package/src/app/component/conversation-detail/conversation/conversation.component.ts

@@ -1,3 +1,4 @@
+import { EventsService } from './../../../providers/events.service';
 import { ChatManager } from 'src/chat21-core/providers/chat-manager';
 
 import { ConversationFooterComponent } from './../conversation-footer/conversation-footer.component';
@@ -182,7 +183,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     public typingService: TypingService,
     private tiledeskRequestService: TiledeskRequestsService,
     private changeDetectorRef: ChangeDetectorRef,
-    private elementRef: ElementRef
+    private elementRef: ElementRef,
+    private events: EventsService
   ) { }
 
   onResize(event){
@@ -828,6 +830,18 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       this.subscriptions.push(subscribe);
     }
 
+    subscribtionKey = 'lastMessage:attachmentButtonClicked';
+    this.events.subscribe('lastMessage:attachmentButtonClicked', (event: any) => {
+        this.logger.debug('[CONV-COMP] ***** lastMessage:attachmentButtonClicked *****', event);
+        if (event) {
+          const conversationUid = event.message.conversation_with; //support-group-...
+          if(this.conversationId === conversationUid){
+            this.onAttachmentButtonClicked(event)
+          }
+        }
+    });
+
+
   }
 
   checkMessagesLegntForTranscriptDownloadMenuOption(){

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.spec.ts

@@ -2,8 +2,8 @@ import { MomentModule } from 'ngx-moment';
 import { async, ComponentFixture, TestBed, waitForAsync, inject } from '@angular/core/testing';
 
 import { ConversationContentComponent } from './conversation-content.component';
-import { MarkedPipe } from '../../../directives/marked.pipe';
-import { HtmlEntitiesEncodePipe } from '../../../directives/html-entities-encode.pipe';
+import { MarkedPipe } from '../../../pipe/marked.pipe';
+import { HtmlEntitiesEncodePipe } from '../../../pipe/html-entities-encode.pipe';
 import { UploadService } from '../../../../chat21-core/providers/abstract/upload.service';
 import { CustomLogger } from '../../../../chat21-core/providers/logger/customLogger';
 import { LoggerInstance } from '../../../../chat21-core/providers/logger/loggerInstance';

package/src/app/component/form/inputs/form-text/form-text.component.scss

@@ -86,6 +86,8 @@ input[type='text'].errors{
   position: relative;
   padding-bottom: 0px; //7px;
   margin: 35px 0px 0px; //27px 0 0;
+  display: flex;
+  width: 100%;
 }
 .form-group label.control-label {
   font-size: 11px;
@@ -107,7 +109,7 @@ input {
   border-radius: $chat-footer-border-radius;
   font-weight: 400;
   height: 48px;
-  padding: 16px;
+  padding: 0px 16px;
   font-size: 14px;
   line-height: 1.42857143;
   display: block;

package/src/app/component/form/inputs/form-textarea/form-textarea.component.scss

@@ -103,7 +103,7 @@ textarea {
     border-radius: $chat-footer-border-radius;
     font-weight: 400;
     // height: 36px;
-    padding: 16px;
+    padding: 0px 16px;
     font-size: 14px;
     line-height: 1.42857143;
     display: block;

package/src/app/component/home-conversations/home-conversations.component.html

@@ -35,8 +35,8 @@
   <div class="c21-body">
     
     
-
-    <div *ngIf="(!listConversations || listConversations.length == 0) && g.showAvailableAgents === true && availableAgents && availableAgents.length > 1" style="margin: 20px 30px;"> 
+    <!--CASE: no conversations EXIST - >1 agents is available -->
+    <div *ngIf="(!listConversations || listConversations.length == 0) && availableAgents && availableAgents.length > 1 && g.showAvailableAgents === true" style="margin: 20px 30px;"> 
       <div *ngFor="let agent of availableAgents" class="c21-pallozzo">
           <div class="c21-ball" [ngStyle] = "{ 'background-color':setColorFromString(agent.firstname) }" >
             <span class="c21-ball-label">{{avatarPlaceholder(agent.firstname)}}</span>
@@ -45,6 +45,7 @@
       </div>
     </div>
 
+    <!--CASE: no conversations EXIST - 1 agents is available -->
     <div class="flex-container" *ngIf="(!listConversations || listConversations.length == 0) && availableAgents && availableAgents.length === 1 && g.showAvailableAgents === true">
       <div *ngFor="let agent of availableAgents" class="c21-pallozzo flex-inline-agent ">
         <div class="c21-ball" [ngStyle] = "{ 'background-color':setColorFromString(agent.firstname) }" >
@@ -65,7 +66,8 @@
       </button>
     </div>
 
-    <div *ngIf="(availableAgents && availableAgents.length > 1 ) || (listConversations && listConversations.length > 0  || (availableAgents && availableAgents.length === 0 ) )">
+    <!--CASE: conversations EXIST OR >1 agents is available OR showAvailableAgents=FALSE -->
+    <div *ngIf="(availableAgents && availableAgents.length > 1 ) || (listConversations && listConversations.length > 0  || (availableAgents && availableAgents.length === 0 ) || g.showAvailableAgents === false )">
       <chat-list-conversations *ngIf="(listConversations && listConversations.length > 0)"
         [listConversations]="listConversations"
         [limit]="3"

package/src/app/component/last-message/last-message.component.html

@@ -1,83 +1,94 @@
-<div *ngIf="conversation && g.isOpenNewMessage" id="messagePreview">
+<div *ngIf="conversation && g.isOpenNewMessage" id="messagePreview" > 
   <!-- message recipient:: -->
-  <div role="messaggio" id="new_message">
 
-    <div class="headerPreviewMessage">
+  <div class="headerPreviewMessage">
 
-        <div class="boxButtons">
-          
-          <div role="button" tabindex="0" class="buttonMore" (click)="openConversationByID(conversation)">
-            <span>View more</span>
-          </div>
+    <div class="boxButtons">
+      
+      <div role="button" tabindex="0" class="buttonMore" (click)="openConversationByID(conversation)">
+        <span>View more</span>
+      </div>
 
-          <div aria-label="Dismiss" role="button" tabindex="0" class="buttonClose" (click)="closeMessagePreview()">
-            <span>
-              <svg aria-labelledby="altIconTitle" height="20px" role="img" viewBox="0 0 24 24" width="20px" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(255, 255, 255);">
-                <path d="M0 0h24v24H0V0z" fill="none"></path>
-                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
-              </svg>
-            </span>
-          </div>
-
-        </div>
+      <div aria-label="Dismiss" role="button" tabindex="0" class="buttonClose" (click)="closeMessagePreview()">
+        <span>
+          <svg aria-labelledby="altIconTitle" height="20px" role="img" viewBox="0 0 24 24" width="20px" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(255, 255, 255);">
+            <path d="M0 0h24v24H0V0z" fill="none"></path>
+            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
+          </svg>
+        </span>
+      </div>
 
     </div>
+
+</div>
+
+
+<div>
+    <!-- <div role="messaggio" class="c21-text message_sender_fullname">{{conversation.sender_fullname}}</div> -->
+    <!-- <img *ngIf="conversation.type == 'image' && conversation.metadata" class="message-content message-content-image"
+        [src]="conversation.metadata.src" [width]="getSizeImg(conversation).width"
+        [height]="getSizeImg(conversation).height" /> -->
+      
     
-    <div class="previewNewMessagge" (click)="openConversationByID(conversation)">
-        <div role="messaggio" class="c21-text message_sender_fullname">{{conversation.sender_fullname}}</div>
-        <!-- <img *ngIf="conversation.type == 'image' && conversation.metadata" class="message-content message-content-image"
-            [src]="conversation.metadata.src" [width]="getSizeImg(conversation).width"
-            [height]="getSizeImg(conversation).height" /> -->
-          
-        <!-- <div *ngIf="isImage(conversation)" class="c21-img">
-          <chat-image *ngIf="isImage(conversation)"
-            [metadata]="conversation?.metadata"
-            [width]="getMetadataSize(conversation?.metadata).width"
-            [height]="getMetadataSize(conversation?.metadata).height">
-          </chat-image>
-        </div> -->
-
-
-        <div *ngIf="conversation.type == 'text'" class="c21-box-text">
-            <div *ngIf="isPopupUrl(conversation.last_message_text); then contentPopup else contentNewTab">here
-                is ignored</div>
-            <ng-template #contentPopup>
-                <p class="c21-link"
-                    (click)="popupUrl(g.windowContext, conversation.last_message_text,'windowName')">{{strip_tags(conversation.last_message_text)}}
-                </p>
-            </ng-template>
-            <ng-template #contentNewTab>
-                <p class="c21-text overflow4Lines" [innerHTML]="conversation.last_message_text | htmlEntitiesEncode  | marked"></p>
-            </ng-template>
-
-            <!-- NOT AVAILABLE WITH FIREBASE DUE TO INCOMPATIBILITY WITH conversation OBJECT-->
-            <!-- <div *ngIf="conversation.attributes && conversation.attributes.attachment " class="slide-in-left" > 
-              <chat-message-attachment 
-                  style="height: 100%; display: block;"
-                  [message]="conversation"
-                  [isLastMessage] = "true"
-                  [stylesMap]="stylesMap"
-                  (onAttachmentButtonClicked)="onAttachmentButtonClicked($event)">
-              </chat-message-attachment>
-            </div>   -->
-        </div>
-
-        <div class="c21-time c21-text">
-            <time *ngIf="conversation.timestamp !== '{.sv: timestamp}'" >{{conversation.timestamp  | amTimeAgo}} </time>
-        </div>
-
-        <div class="c21-icon-avatar">
-            <div class="c21-avatar-image profile_image">
-              <chat-avatar-image class="slide-in-left"  
-                [senderID]="conversation.sender"
-                [senderFullname]="conversation.sender_fullname"
-                [baseLocation]="baseLocation">
-               </chat-avatar-image>
-              <!-- <img src="{{conversation.image}}" onError="this.src = 'https://s3.eu-west-1.amazonaws.com/tiledesk-widget/dev/2.0.4-beta.7/assets/images/avatar_bot_tiledesk.svg'" /> -->
-            </div> 
-        </div>
+    <div class="previewNewMessagge msg_container" (click)="openConversationByID(conversation)">
+
+      <!-- <div *ngIf="isImage(conversation)">
+        <chat-image 
+          [metadata]="fileSelected"
+          [width]="fileSelected?.width"
+          [height]="fileSelected?.height">
+        </chat-image>
+      </div>
+
+      <div *ngIf="conversation.type == 'text'" class="c21-box-text">
+        <chat-text
+          [text]="conversation?.last_message_text"
+          [fontSize]="stylesMap?.get('fontSize')"
+          [fontFamily]="stylesMap?.get('fontFamily')">
+        </chat-text>
+      </div> -->
+
+      <chat-bubble-message class="messages no-background"
+        [class.emoticon]="isEmojii(message?.text)"
+        [ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
+        [message]="message"
+        [fontColor]="stylesMap.get('bubbleReceivedTextColor')"
+        [fontSize]="stylesMap.get('fontSize')"
+        [fontFamily]="stylesMap.get('fontFamily')"
+        [stylesMap]="stylesMap">
+      </chat-bubble-message>
+
+      <div class="c21-icon-avatar">
+        <div class="c21-avatar-image profile_image">
+          <chat-avatar-image class="slide-in-left"  
+            [senderID]="message?.sender"
+            [senderFullname]="message?.sender_fullname"
+            [baseLocation]="baseLocation">
+          </chat-avatar-image>
+        </div> 
+      </div>
+
+    </div>
+
+    <div *ngIf="message.attributes && message.attributes.attachment " class="conversations-buttons">
+      <chat-message-attachment 
+        style="height: 100%; display: block;"
+        [message]="message"
+        [isLastMessage] = "true"
+        [limit]="3"
+        [stylesMap]="stylesMap"
+        (onAttachmentButtonClicked)="onAttachmentButtonClicked($event)">
+      </chat-message-attachment>
     </div>
 
-  </div>
+
+    
+
+    <!-- <div class="c21-time c21-text">
+        <time *ngIf="conversation.timestamp !== '{.sv: timestamp}'" >{{conversation.timestamp  | amTimeAgo}} </time>
+    </div> -->
+
+    
+</div>
 
 </div>