@chat21/chat21-ionic 3.0.90-rc.1 → 3.0.90-rc.2

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # chat21-ionic ver 3.0
 
+### 3.0.90-rc.2
+- added: info and copy icon on received messages
+- added: flash icon to distinguish chat offline message sent also by email
+
 ### 3.0.90-rc.1
 - added: autofocus on first input
 - added: tiledesk logo on sidebar

package/package.json

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

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

@@ -110,8 +110,12 @@
       
       <div class="bubble-container">
 
-        <div class="email-logo" *ngIf="message?.attributes?.channel && message?.attributes?.channel === TYPE_MSG_EMAIL">
+        <div class="email-logo" *ngIf="message?.attributes?.channel && message?.attributes?.channel.includes(TYPE_MSG_EMAIL)">
           <ion-icon name="mail"></ion-icon>
+          <ion-icon name="flash" 
+            *ngIf="message?.attributes?.channel.includes('offline_')"
+            [ngStyle]="{'color': stylesMap.get('bubbleSentBackground')}">
+          </ion-icon>
         </div>
 
         <!--backgroundColor non viene ancora usato -->
@@ -174,18 +178,10 @@
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
           (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
           (onElementRendered)="onElementRenderedFN($event)"
-          (click)="onBubbleMessageClick($event, message, i)">
+          (onCopy)="onClickCopyMesage($event)"
+          (onInfo)="onClickInfoMesage($event, i)">
         </chat-bubble-message>
 
-        <div class="options-container">
-          <div class="copy-logo" (click)="onClickCopyMesage($event, message)" *ngIf="message.text.trim() !== ''">
-            <ion-icon name="copy-outline"></ion-icon>
-          </div>
-          <!-- <div class="menu-logo" (click)="onClickBubbleMenu($event, message)">
-            <ion-icon name="caret-down"></ion-icon>
-          </div> -->
-        </div>
-
       </div>
 
       <ng-container *ngIf="areVisibleCAR && supportMode">

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

@@ -211,6 +211,14 @@ ion-item {
         height: 16px;
         border-radius: 3px;
         color: rgb(135, 150, 175);
+
+        ion-icon[name="flash"]{
+            position: absolute;
+            top: -5px;
+            left: -4px;
+            color: var(--bubble-blue);
+            font-size: small;
+        }
     }
 
 }
@@ -321,27 +329,6 @@ ion-item {
         }
     }
 
-    .copy-logo{
-        // background-color: var(--list-bkg-color);
-        // box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
-        // position: relative;
-        // display: flex;
-        // -webkit-box-align: center;
-        // align-items: center;
-        // -webkit-box-pack: center;
-        // justify-content: center;
-        // top: 0px;
-        // right: 50px;
-        // z-index: 2;
-        width: 20px;
-        border-radius: 3px;
-        color: rgb(135, 150, 175);
-    
-        &:hover{
-            cursor: pointer;
-        }
-    }
-
 }
 
 .sourcePage-container{

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

@@ -156,13 +156,13 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     this.presentPopover(event, message)
   }
 
-  onClickCopyMesage(event, message: MessageModel){
+  onClickCopyMesage(message: MessageModel){
     this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onClickCopyMesage');
     navigator.clipboard.writeText(message.text)
     this.presentToast()
   }
 
-  onBubbleMessageClick(event: any, message: MessageModel, index: number){
+  onClickInfoMesage(message: MessageModel, index: number){
     if(message && message.attributes && message.attributes.sourcePage){
       this.showSourceInfo = !this.showSourceInfo
       this.showSourceInfoIndex = index

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

@@ -2,10 +2,18 @@
 <!-- [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px'}" -->
 <!-- isImage >{{isImage(message) }}    message.metadata.width {{message?.metadata?.width }}  -->
 <!-- 'width': (isImage(message) || isFrame(message))? sizeImage?.width : null -->
-<div id="bubble-message" [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px' }"  class="messages primary-color">
+<div id="bubble-message"  [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px' }" class="messages primary-color">
 
+  <div class="options-container" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)">
+    <div class="info-logo" (click)="onClickInfoMessage($event, message)" *ngIf="message?.attributes && message?.attributes?.sourcePage">
+      <ion-icon name="information-circle-outline"></ion-icon>
+    </div>
+    <div class="copy-logo" (click)="onClickCopyMesage($event, message)" *ngIf="message.text.trim() !== '' && (!isImage(message) || !isFrame(message))">
+      <ion-icon name="copy-outline"></ion-icon>
+    </div>
+  </div>
 
-  <div>
+  <div >
 
     <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender" 
       [style.color]="convertColorToRGBA(fontColor, 65)"
@@ -47,7 +55,7 @@
 
 
     <!-- [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left" content-type="template" (click)="handleTooltipEvents($event)" -->
-    <div *ngIf="message?.text">
+    <div *ngIf="message?.text" style="display: flex; margin: 0px 0px 0px 0px;"> 
 
       <chat-text *ngIf="message?.type !=='html'"
         [text]="message?.text" 

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

@@ -5,12 +5,56 @@
     border-radius: 8px;
     padding: 0;
     word-wrap: break-word;
+    position: relative;
     // padding: 14px;
     // 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;
 
+    &:hover{
+        .options-container > .copy-logo{
+            // display: flex;
+            visibility: visible;
+        }
+    }
+
+    .options-container{
+        display: flex;
+        position: absolute;
+        top: 0px;
+        right: -40px;
+        height: 16px;
+        // margin: 5px;
+        z-index: 2;
+
+        .copy-logo,
+        .info-logo{
+            // display: none;
+            display: flex;
+            visibility: hidden;
+            -webkit-box-align: center;
+            align-items: center;
+            -webkit-box-pack: center;
+            /* width: 20px; */
+            height: 16px;
+            border-radius: 3px;
+            color: rgb(135, 150, 175);
+            text-align: left;
+            justify-content: center;
+            font-size: initial;
+            
+            &:hover{
+                cursor: pointer;
+            }
+        }
+
+        .info-logo{
+            display: flex;
+            visibility: visible;
+        }
+    }
+
     .message_sender_fullname{
         font-size: 12px;
         font-weight: 600;

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

@@ -25,6 +25,9 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
+  @Output() onCopy = new EventEmitter<MessageModel>();
+  @Output() onInfo = new EventEmitter<MessageModel>();
+  
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
@@ -178,6 +181,15 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     }, showDelay);
   }
 
+
+  onClickCopyMesage(event, message){
+    this.onCopy.emit(message)
+  }
+
+  onClickInfoMessage(event, message){
+    this.onInfo.emit(message)
+  }
+
   // ========= begin:: event emitter function ============//
 
   // returnOpenAttachment(event: String) {

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

@@ -1022,7 +1022,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         this.sendEmail(msg).subscribe(status => {
           if(status){
             //SEND MESSAGE ALSO AS EMAIL
-            attributes['channel']= TYPE_MSG_EMAIL
+            attributes['channel']= 'offline_'+TYPE_MSG_EMAIL
           }
 
           this.conversationHandlerService.sendMessage(