@chat21/chat21-ionic 3.0.61-rc11 → 3.0.61-rc15

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # chat21-ionic ver 3.0
 
+### 3.0.61-rc15
+- Increase the size of the emoji and remove the background color when it is sent or received without text
+- Adds the ability to open sidebar menu items in a new tab by combining left mouse button + CMD keyboard key
+
+### 3.0.61-rc14
+- Fixes the bug: the page to which the sidebar Settings menu item redirects is not correct for team members with agent role
+- Fixes the bug: right clicking on the sidebar menu items doesn't show the context menu
+
+### 3.0.61-rc12
+- Improves the alignment of left sidebar menu item icons
+- Adds the ability to add a message as a canned response
+- Hides the "Open canned responses" button if the "supportMode" environment variable is set to false
+- Fixes the bug: "Settings" menu item in the left sidebar redirects to the "Canned responses" page instead of the "Widget" page
+- Adds the ability to add a new canned response
+- Fixes the bug: "Resolve conversation" from conversation detail header doesn't work on mobile
+- Adds the ability to insert emoji in the message text
+- Fixes the bug: on iOS mobile devices in the conversation detail the requester's avatar is not vertically aligned
+- Fixes the bug: on mobile devices in  the "info profile" modal window the version number is not visible because it is on a white background
+- Fixes the bug: in the "Create canned response" modal window the "Add personalisation" menu does not always work
+- Adds the chat version number to the teammate details drawer
+- Makes the right sidebar "Settings" menu item visible to teammates with agent role
+
 ### 3.0.61-rc11
 - Fixed the bug: the "Resolve" button is displayed in the header of the details of the archived conversations
 - Fixed the bug: in the header of the conversation detail the "Resolve" button remains active even after resolving the conversation

package/angular.json

@@ -44,6 +44,7 @@
               "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",
+              "node_modules/@ctrl/ngx-emoji-mart/picker.css",
               {
                 "input": "src/theme/variables.scss"
               },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.61-rc11",
+    "version": "3.0.61-rc15",
     "author": "Tiledesk SRL",
     "homepage": "https://tiledesk.com/",
     "scripts": {
@@ -23,6 +23,7 @@
         "@angular/platform-browser": "~8.2.14",
         "@angular/platform-browser-dynamic": "~8.2.14",
         "@angular/router": "~8.2.14",
+        "@ctrl/ngx-emoji-mart": "^1.0.6",
         "@ionic-native/chooser": "^5.29.0",
         "@ionic-native/core": "^5.0.7",
         "@ionic-native/globalization": "^5.28.0",

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

@@ -56,11 +56,16 @@ const routes: Routes = [
   {
     path: 'create-requester',
     loadChildren: () => import('./pages/create-requester/create-requester.module').then( m => m.CreateRequesterPageModule)
+  },
+  {
+    path: 'create-canned-response',
+    loadChildren: () => import('./pages/create-canned-response/create-canned-response.module').then( m => m.CreateCannedResponsePageModule)
   }
 
 
 
 
+
   // {
   //   path: 'conversation-detail/:IDConv',
   //   loadChildren: () => import('./pages/conversation-detail/conversation-detail.module').then( m => m.ConversationDetailPageModule)

package/src/app/app.module.ts

@@ -84,7 +84,7 @@ 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';
-
+import { CreateCannedResponsePageModule } from './pages/create-canned-response/create-canned-response.module';
 // UTILS
 import { ScrollbarThemeModule } from './utils/scrollbar-theme.directive';
 import { SharedModule } from 'src/app/shared/shared.module';
@@ -92,6 +92,8 @@ import { ConversationInfoModule } from 'src/app/components/conversation-info/con
 
 
 // Directives
+// import { HtmlEntitiesEncodePipe } from './directives/html-entities-encode.pipe';
+// import { MarkedPipe } from './directives/marked.pipe';
 
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { Network } from '@ionic-native/network/ngx';
@@ -248,7 +250,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
 
 @NgModule({
   declarations: [
-    AppComponent,
+    AppComponent
   ],
   entryComponents: [
   ],
@@ -285,7 +287,8 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     NgxLinkifyjsModule.forRoot(),
     LoaderPreviewPageModule,
     CreateTicketPageModule,
-    CreateRequesterPageModule
+    CreateRequesterPageModule,
+    CreateCannedResponsePageModule
   ],
   bootstrap: [AppComponent],
 

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

@@ -54,12 +54,23 @@
 <!-- ----------------------------------------------------------- -->
 
 <div class="conversation-wpr" style="height: 100%;">
-  <div *ngFor="let message of messages; let i = index">
+  <div *ngFor="let message of messages; let i = index; let first = first; trackBy: trackByFn">
+
+    <ng-container *ngIf="first || (messages[i - 1].timestamp | date:'d') !== (message.timestamp | date:'d')">
+      <div class="long-date-divider-wpr">
+        <div class="long-date-divider-border-b"></div>
+        <div class="long-date-divider">
+          <!-- {{message.timestamp | date: 'longDate' : 'it'}} -->
+          {{message.timestamp | amDateFormat:'LL'}}
+
+        </div>
+        <div class="long-date-divider-border-b"></div>
+      </div>
+    </ng-container>
 
     <div class="align-center" class="ion-text-center" *ngIf="messageType(MESSAGE_TYPE_INFO, message)"
       class="msg_info_container">
-      <chat-info-message class="messages" 
-        [message]="message">
+      <chat-info-message class="messages" [message]="message">
       </chat-info-message>
     </div>
 
@@ -67,13 +78,15 @@
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_MINE, message)" class="msg_container base_sent">
 
       <!--backgroundColor non viene ancora usato -->
-      <chat-bubble-message  [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}"
-        class="messages msg_sent" id="message_msg_sent"
-        [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" [message]="message"
-        [textColor]="'col-msg-sent'" 
-        (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
-        (onImageRendered)="onImageRenderedFN($event)">
+      
+      <chat-bubble-message style="position: relative;"
+        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" class="messages msg_sent"
+        id="message_msg_sent" [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
+        [message]="message" [textColor]="'col-msg-sent'" (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
+        (onAfterMessageRender)="returnOnAfterMessageRender($event)" (onImageRendered)="onImageRenderedFN($event)"
+        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" [areVisibleCAR]="areVisibleCAR"
+        [support_mode]="support_mode"
+        [class.emoticon]="message?.emoticon">
       </chat-bubble-message>
 
       <!-- icon status message -->
@@ -98,32 +111,30 @@
       </chat-avatar-image> -->
 
       <!--backgroundColor non viene ancora usato -->
-      
-      <chat-bubble-message [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" class="messages msg_receive" id="message_msg_receive"
-        [message]="message" 
-        [textColor]="'black'"
+
+      <chat-bubble-message style="position: relative;"
+        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" class="messages msg_receive"
+        id="message_msg_receive" [message]="message" [textColor]="'black'"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
-        (onImageRendered)="onImageRenderedFN($event)">
+        (onAfterMessageRender)="returnOnAfterMessageRender($event)" (onImageRendered)="onImageRenderedFN($event)"
+        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" [areVisibleCAR]="areVisibleCAR"
+        [support_mode]="support_mode"
+        [class.emoticon]="message?.emoticon">
       </chat-bubble-message>
     </div>
 
     <!-- message type:: button &&  -->
-    <div *ngIf="message?.attributes && message?.attributes?.attachment " class="slide-in-left" > 
-      <chat-message-attachment 
-          style="height: 100%; display: block;"
-          [message]="message"
-          [isLastMessage] = "isLastMessage(message?.uid)"
-          [stylesMap]="stylesMap"
-          (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)">
+    <div *ngIf="message?.attributes && message?.attributes?.attachment " class="slide-in-left">
+      <chat-message-attachment style="height: 100%; display: block;" [message]="message"
+        [isLastMessage]="isLastMessage(message?.uid)" [stylesMap]="stylesMap"
+        (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)">
       </chat-message-attachment>
     </div>
   </div>
   <!-- (fileType === 'file' && uploadProgress !== 100)  -->
 
   <!-- uploadProgress -> {{ uploadProgress }} -->
-  <div *ngIf="uploadProgress !== 100" class="msg_container base_sent"
-    style="margin-right: 20px;">
+  <div *ngIf="uploadProgress !== 100" class="msg_container base_sent" style="margin-right: 20px;">
     <div class="messages msg_sent">
       <div class="spinner">
         <div class="bounce1"></div>

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

@@ -2,29 +2,30 @@
     color: lightblue;
 }
 
-:host .base_sent .msg_sent ::ng-deep div > div > div > chat-text > p > p  {
-    margin-top:12px !important;
+:host .base_sent .msg_sent ::ng-deep div > div > div > chat-text > p > p {
+    margin-top: 12px !important;
     // white-space: nowrap;
     // overflow: hidden;
     // text-overflow: ellipsis;
 }
 
-:host .base_sent .msg_sent ::ng-deep > div > div > chat-image > div  {
+:host .base_sent .msg_sent ::ng-deep > div > div > chat-image > div {
     // display: none !important;
     // border-radius: unset !important;
-    img, .loader { 
+    img,
+    .loader {
         border-top-right-radius: 6px !important;
         border-top-left-radius: 16px !important;
         border-bottom-left-radius: 16px !important;
         border-bottom-right-radius: 0px;
     }
-    
 }
 
 :host .base_receive .msg_receive ::ng-deep > div > div > chat-image > div > img {
     // display: none !important;
     // border-radius: unset !important;
-    img, .loader { 
+    img,
+    .loader {
         border-top-left-radius: 6px !important;
         border-top-right-radius: 16px !important;
         border-bottom-right-radius: 16px !important;
@@ -38,9 +39,8 @@ ion-item {
     --min-height: 20px;
     --border-style: none;
 
-    .input-wrapper{
-
-        .align-center{
+    .input-wrapper {
+        .align-center {
             display: block;
         }
     }
@@ -53,12 +53,12 @@ ion-item {
     //opacity: 0px;
 }
 
-.msg_info_container{
+.msg_info_container {
     text-align: center;
     padding: 2px 0px 2px 0px;
 }
 
-.message_sender_fullname{
+.message_sender_fullname {
     font-size: 0.7em;
     margin: 0 0 1px 10px;
     color: var(--gray);
@@ -72,15 +72,15 @@ ion-item {
     // padding: 6px 6px 6px 6px;
     // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     // -webkit-animation: heartbeat 1.5s ease-in-out both;
-    // animation: heartbeat 1.5s ease-in-out both;                    
+    // animation: heartbeat 1.5s ease-in-out both;
 }
-                
+
 /* send message */
 .base_sent {
     align-items: flex-end;
     justify-content: flex-end;
-    padding: 2px 0px 4px 40px;
-
+    // 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);
         color: var(--col-msg-sent);
@@ -89,18 +89,23 @@ ion-item {
         max-width: calc(100% - 70px);
         min-width: 14px;
         border-top-right-radius: 8px;
-        border-bottom-right-radius: 0px; 
-     
+        border-bottom-right-radius: 0px;
+    }
+    .emoticon {
+        background: unset !important;
+        font-size: 4em;
+        padding-bottom: 21px;
+        padding-top: 30px;
     }
-
     .has-metadata {
         max-width: 100% !important;
     }
 }
-    
+
 /** recive message **/
 .base_receive {
-    padding: 0px 0px 6px 0px;
+    // padding: 0px 0px 6px 0px;
+    padding: 0px 0px 15px 0px; // edited to display the date at the bottom of the "message bubble"
     /* avatar */
     .content-avatar {
         position: relative;
@@ -109,7 +114,7 @@ ion-item {
         height: 28px;
         margin-right: 6px;
 
-        .profile_image{
+        .profile_image {
             position: relative;
             width: 25px;
             height: 25px;
@@ -118,7 +123,7 @@ ion-item {
             background-color: #ffffff;
             border: 1px solid #e2e2e2;
         }
-        .profile_image img{
+        .profile_image img {
             max-width: 100%;
             width: 100%;
             height: 100%;
@@ -139,15 +144,19 @@ ion-item {
         width: auto;
         border-top-left-radius: 8px;
         border-bottom-left-radius: 0px;
+    }
+
+    .emoticon {
+        background: unset !important;
+        font-size: 4em;
+    }
 
-    }          
-    
     .has-metadata {
         max-width: 100% !important;
     }
 }
 
-.time{
+.time {
     margin-bottom: 20px;
 }
 
@@ -158,42 +167,143 @@ ion-item {
     min-height: 20px;
     padding: 7px;
     text-align: center;
-  }
-  
-  .spinner > div {
+}
+
+.spinner > div {
     width: 10px;
     height: 10px;
     background-color: rgb(255, 255, 255);
-  
+
     border-radius: 100%;
     display: inline-block;
     -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
     animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-  }
-  
-  .spinner .bounce1 {
+}
+
+.spinner .bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
-  }
-  
-  .spinner .bounce2 {
+}
+
+.spinner .bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
-  }
-  
-  @-webkit-keyframes sk-bouncedelay {
-    0%, 80%, 100% { -webkit-transform: scale(0) }
-    40% { -webkit-transform: scale(1.0) }
-  }
-  
-  @keyframes sk-bouncedelay {
-    0%, 80%, 100% { 
-      -webkit-transform: scale(0);
-      transform: scale(0);
-    } 40% { 
-      -webkit-transform: scale(1.0);
-      transform: scale(1.0);
+}
+
+@-webkit-keyframes sk-bouncedelay {
+    0%,
+    80%,
+    100% {
+        -webkit-transform: scale(0);
+    }
+    40% {
+        -webkit-transform: scale(1);
     }
-  }
+}
 
+@keyframes sk-bouncedelay {
+    0%,
+    80%,
+    100% {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+    }
+    40% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+
+// ---------------------------------------------------------
+// Button add canned on the fly
+// ---------------------------------------------------------
+:host .base_sent .msg_sent ::ng-deep div > div > div > ion-button {
+    display: none;
+    position: absolute;
+    top: -3px;
+    left: -31px;
+}
+
+// :host .base_sent .msg_sent:hover ::ng-deep div > div > div > ion-button {
+:host .base_sent:hover .msg_sent ::ng-deep div > div > div > ion-button {
+    display: block;
+    // position: absolute;
+    // top: -11px;
+    // left: -26px;
+}
+
+:host .base_receive .msg_receive ::ng-deep div > div > ion-button {
+    display: none;
+    position: absolute;
+    top: -3px;
+    right: -31px;
+}
+
+// :host .base_receive .msg_receive:hover ::ng-deep div > div > ion-button {
+:host .base_receive:hover .msg_receive ::ng-deep div > div > ion-button {
+    display: block;
+    // position: absolute;
+    // top: -11px;
+    // left: 91px;
+}
+
+// ---------------------------------------------------------
+// Long date divider
+// ---------------------------------------------------------
+.long-date-divider-wpr {
+    justify-content: center !important;
+    align-items: center !important;
+    display: flex !important;
+    margin-top: 0.75rem !important;
+    margin-bottom: 0.75rem !important;
+}
 
+.long-date-divider-border-b {
+    border-bottom: 1px solid #dee5ee !important;
+    flex: 1 1 auto !important;
+    margin-left: 1.1rem !important;
+    margin-right: 1.1rem !important;
+}
+
+.long-date-divider {
+    flex: 0 0 auto !important;
+    font-size: 0.75rem !important;
+    font-weight: 500 !important;
+    line-height: 1.25rem !important;
+    margin-left: 1rem !important;
+    margin-right: 1rem !important;
+    color: #64748b;
+}
+
+// ---------------------------------------------------------
+// message date
+// ---------------------------------------------------------
+:host .base_sent .msg_sent ::ng-deep div > div > div > .message-date {
+    position: absolute;
+    bottom: -11px;
+    color: #64748b;
+    font-size: 10px;
+    right: 0px;
+}
+
+:host .base_receive .msg_receive ::ng-deep div > div > .message-date {
+    position: absolute;
+    bottom: -11px;
+    color: #64748b;
+    font-size: 10px;
+    left: 0px;
+}
+// ---------------------------------------------------------
+// emoticon
+// ---------------------------------------------------------
+
+:host .base_sent .msg_sent ::ng-deep div > div > div > .chat-text-emoticon > p > p {
+    margin-bottom: 6px !important;
+    margin-right: -7px !important;
+}
+
+:host .base_receive .msg_receive ::ng-deep div > div > div > .chat-text-emoticon > p > p {
+    margin-bottom: 41px !important;
+    margin-left: -8px !important;
+    margin-top: 49px !important;
+}