@chat21/chat21-ionic 3.0.81-rc.1 → 3.0.81-rc.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # chat21-ionic ver 3.0
 
+### 3.0.81-rc.3
+- bug-fixed: if window width is less then 991px, move 'Close detail' icon to right
+- changed: removed segment from index.html and loaded dynamically only if in not production
+
+### 3.0.81-rc.2
+- changed: canned loader
+- bug-fixed: if search for a string that not correspond with an existing canned, was shown loader ever
+
 ### 3.0.81-rc.1
 - added: remove bubble-message background if is image or iframe and no text is in message
 - added: new sound if unassigned request arrive

package/angular.json

@@ -24,6 +24,7 @@
               "src/chat-config-mqtt.json",
               "src/chat-config-pre-test.json",
               "src/chat-config-mqtt-localhost.json",
+              "src/chat-config-native-mqtt.json",
               "src/firebase-messaging-sw.js",
               "src/manifest.json",
               {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.81-rc.1",
+    "version": "3.0.81-rc.3",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.scss

@@ -1,3 +1,5 @@
+@import '../variables.scss';
+
 .split-pane-md.split-pane-visible > .split-pane-side {
     min-width: 360px; //312px;
     display: block; // Safari bug fix

package/src/app/app.component.ts

@@ -39,7 +39,7 @@ import { LoginPage } from './pages/authentication/login/login.page';
 import { ConversationListPage } from './pages/conversations-list/conversations-list.page';
 
 // utils
-import { checkPlatformIsMobile, isGroup, getParameterByName, searchIndexInArrayForUid, compareValues } from '../chat21-core/utils/utils';
+import { checkPlatformIsMobile, isGroup, getParameterByName, searchIndexInArrayForUid, compareValues, stripTags } from '../chat21-core/utils/utils';
 import { STORAGE_PREFIX, PLATFORM_MOBILE, PLATFORM_DESKTOP, CHAT_ENGINE_FIREBASE, AUTH_STATE_OFFLINE, AUTH_STATE_ONLINE } from '../chat21-core/utils/constants';
 import { environment } from '../environments/environment';
 import { UserModel } from '../chat21-core/models/user';
@@ -340,6 +340,7 @@ export class AppComponent implements OnInit {
 
 
     this.initializeApp('oninit');
+    this.initSegment()
     this.listenToPostMsgs();
   }
 
@@ -1343,6 +1344,20 @@ export class AppComponent implements OnInit {
     }
   }
 
+  private initSegment(){
+    if(!isDevMode()){
+      var head  = document.getElementsByTagName('head')[0];
+      var script  = document.createElement('script');
+      script.type="text/javascript";
+      script.text =`!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="qaTU0wG6VH6xPAhOzD2kneI70Txg1fTB";;analytics.SNIPPET_VERSION="4.15.3";
+                    analytics.load("qaTU0wG6VH6xPAhOzD2kneI70Txg1fTB");
+                    analytics.page();
+                    }}();`
+      console.log('initttttt segmentttt', script)
+      head.appendChild(script);
+    } 
+  }
+
   private segmentSignIn(){
     let user = this.tiledeskAuthService.getCurrentUser()
     try {

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

@@ -47,7 +47,8 @@
     background: linear-gradient(to right, rgba(226, 232, 239, 0) 128px, rgb(226, 232, 239) 128px);
     
     &.close{
-        right: 0px;
+        right: var(--padding-conversation-detail);
+        border-top-right-radius: var(--border-radius-content);
         &:not(.mobile){
             top: calc(60px + var(--padding-conversation-detail));
         }
@@ -166,7 +167,7 @@ ion-item {
         background-color: var(--bubble-blue);
         color: var(--col-msg-sent);
         margin: 0px 0px 0px 0px;
-        max-width: calc(100% - 70px);
+        max-width: calc(100% - 85px);
         min-width: 14px;
         border-top-right-radius: 8px;
         border-bottom-right-radius: 0px;
@@ -235,7 +236,7 @@ ion-item {
         background-color: var(--bck-msg-received);
         color: var(--col-msg-received);
         // max-width: 260px;
-        max-width: calc(100% - 70px);
+        max-width: calc(100% - 85px);
         min-width: 14px;
         margin: 0 0px 0px 10px;
         height: fit-content;
@@ -273,8 +274,8 @@ ion-item {
 
 .btn-add-msg {
     border-radius: 50%;
-    --padding-end: 7px;
-    --padding-start: 7px;
+    --padding-end: 5px;
+    --padding-start: 5px;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
     display: none;
     align-self: center;

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

@@ -28,6 +28,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
   @Input() isMobile: boolean;
+  @Input() openInfoConversation: boolean;
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   @Output() onAddUploadingBubble = new EventEmitter<boolean>();
   @Output() onOpenCloseInfoConversation = new EventEmitter<boolean>();
@@ -37,7 +38,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   public fileType: any
   public browserLang: string;
   public addAsCannedResponseTooltipText: string;
-  public openInfoConversation: boolean = true;
+  // public openInfoConversation: boolean = true;
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;

package/src/app/components/canned-response/canned-response.component.html

@@ -18,15 +18,16 @@
      <label class="add-canned-response-label" >{{translationMap?.get('AddNewCannedResponse')}}</label> 
     </ion-item>
   </div>
-  <!--  -->
-  <div  class="loader" *ngIf="tagsCannedFilter.length === 0">
+  <!-- LOADER -->
+  <div class="loader" *ngIf="tagsCannedFilter.length === 0">
     <div class="box">
-      <div class="container">
+      <!-- <div class="container">
         <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
         <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
         <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
         <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
-      </div>
+      </div> -->
+      <div class="spinner" [ngStyle]="{'border-top-color': stylesMap?.get('themeColor')}"></div>
       <div class="label">{{translationMap.get('LABEL_LOADING')}}</div>
     </div>
   </div>

package/src/app/components/canned-response/canned-response.component.scss

@@ -204,6 +204,22 @@ ion-item {
             animation: grow 500ms linear 0s infinite reverse;
             }
         }
+
+    }
+
+    .spinner {
+        margin: auto;
+        border: 8px solid #EAF0F6;
+        border-radius: 50%;
+        border-top: 8px solid var(--basic-blue);
+        width: 50px;
+        height: 50px;
+        animation: spinner 1s linear infinite;
+    }
+    
+    @keyframes spinner {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
     }
 
     .label{

package/src/app/components/canned-response/canned-response.component.ts

@@ -163,7 +163,7 @@ export class CannedResponseComponent implements OnInit {
       canned.text = this.replacePlaceholderInCanned(canned.text);
       canned.disabled = true
     });
-    if (this.tagsCannedCount === 0) {
+    if (this.tagsCannedFilter && this.tagsCannedFilter.length === 0) {
       // const button = this.renderer.createElement('button');
       // const buttonText = this.renderer.createText('Click me');
       // this.renderer.appendChild(button, buttonText);

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

@@ -137,6 +137,7 @@
                   [supportMode]= "supportMode"
                   [isMobile]="isMobile"
                   [isTypings]="isTypings"
+                  [openInfoConversation]="openInfoConversation"
                   [idUserTypingNow]="idUserTypingNow"
                   [nameUserTypingNow]="nameUserTypingNow" 
                   [translationMap]="translationsContentMap"

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

@@ -720,14 +720,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.logger.log('[CONVS-DETAIL] - initConversationHandler (else) - this.messages: ', this.messages)
       this.logger.log('[CONVS-DETAIL] - initConversationHandler (else) - this.showMessageWelcome: ', this.showMessageWelcome)
     }
-    this.logger.log('[CONVS-DETAIL] - initConversationHandler (else) - message ', this.messages, ' showIonContent', this.showIonContent)
   }
 
   initGroupsHandler() {
-    if (
-      this.conversationWith.startsWith('support-group') ||
-      this.conversationWith.startsWith('group-')
-    ) {
+    if (this.conversationWith.startsWith('support-group') || this.conversationWith.startsWith('group-')) {
       this.groupService.initialize(this.tenant, this.loggedUser.uid)
       this.logger.log('[CONVS-DETAIL] - initGroupsHandler - tenant', this.tenant, ' loggedUser UID', this.loggedUser.uid)
     }
@@ -949,37 +945,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     let subscription: any
     let subscriptionKey: string
 
-    // subscriptionKey = 'BSConversationsChanged'
-    // subscription = this.subscriptions.find((item) => item.key === subscriptionKey)
-    // if (!subscription) {
-    //   subscription = this.conversationsHandlerService.conversationChanged.subscribe((data: ConversationModel) => {
-    //     this.logger.log('[CONVS-DETAIL] subscribe BSConversationsChanged data ', data, ' this.loggedUser.uid:', this.loggedUser.uid)
-
-    //     if (data && data.sender !== this.loggedUser.uid) {
-    //       this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange data sender ', data.sender)
-    //       this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange this.loggedUser.uid ', this.loggedUser.uid)
-    //       this.logger.log('[CONVS-DETAIL] subscribe to BSConversationsChange is_new ', data.is_new)
-    //       this.logger.log('[CONVS-DETAIL] subscribe to  BSConversationsChange showButtonToBottom ', this.showButtonToBottom)
-    //       // UPDATE THE CONVERSATION TO 'READ' IF IT IS ME WHO WRITES THE LAST MESSAGE OF THE CONVERSATION
-    //       // AND IF THE POSITION OF THE SCROLL IS AT THE END
-    //       if (!this.showButtonToBottom && data.is_new) {
-    //         // ARE AT THE END
-    //         this.updateConversationBadge()
-    //       }
-    //       if(data.uid === this.conversationWith){
-    //         this.conversationAvatar = setConversationAvatar(
-    //           data.conversation_with,
-    //           data.conversation_with_fullname,
-    //           data.channel_type,
-    //         )
-    //       }
-
-    //     }
-    //   })
-    //   const subscribe = { key: subscriptionKey, value: subscription }
-    //   this.subscriptions.push(subscribe)
-    // }
-
     subscriptionKey = 'messageAdded'
     subscription = this.subscriptions.find((item) => item.key === subscriptionKey)
     if (!subscription) {

package/src/chat-config-native-mqtt.json

@@ -27,5 +27,9 @@
     "baseImageUrl": "https://console.native.tiledesk.com/api/",
     "dashboardUrl": "https://console.native.tiledesk.com/dashboard/",
     "testsiteBaseUrl":"https://console.native.tiledesk.com/widget/assets/twp/index.html",
-    "authPersistence": "LOCAL"
+    "authPersistence": "LOCAL",
+    "supportMode": true,
+    "archivedButton": true,
+    "writeToButton": true,
+    "wsUrl":"wss://console.native.tiledesk.com/mqws/ws"
 }

package/src/index.html

@@ -33,15 +33,6 @@
   <!-- <script src="https://unpkg.com/mqtt@4.1.0/dist/mqtt.min.js"></script> -->
   <!-- <script src="./assets/js/watchToConnectionAtStartUp.js"></script> -->
 
-
-  <!-- segment analytics -->
-  <script>
-    !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="qaTU0wG6VH6xPAhOzD2kneI70Txg1fTB";;analytics.SNIPPET_VERSION="4.15.3";
-    analytics.load("qaTU0wG6VH6xPAhOzD2kneI70Txg1fTB");
-    analytics.page();
-    }}();
-  </script>
-
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />