@chat21/chat21-ionic 3.4.13-rc5 → 3.4.14-rc1

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.4.13-rc5",
+    "version": "3.4.14-rc1",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.ts

@@ -1242,9 +1242,9 @@ export class AppComponent implements OnInit {
   }
 
   goToDashboardLogin(){
-    let DASHBOARD_URL = this.appConfigProvider.getConfig().dashboardUrl + '#/login'
-    const myWindow = window.open(DASHBOARD_URL, '_self');
-    myWindow.focus();
+    // let DASHBOARD_URL = this.appConfigProvider.getConfig().dashboardUrl + '#/login'
+    // const myWindow = window.open(DASHBOARD_URL, '_self');
+    // myWindow.focus();
   }
 
 

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

@@ -55,7 +55,7 @@
 <div *ngIf="!isMobile" class="manage_conversation_info_container" [ngClass]="{'close': !openInfoConversation, 'mobile': isMobile}">
   <ion-button fill="clear" *ngIf="openInfoConversation" (click)="onOpenCloseInfoConversationFN()"
   tooltip="{{translationMap?.get('LABEL_CLOSE_GROUP')}}" placement="bottom">
-    <ion-icon name="arrow-forward-outline"></ion-icon>
+    <ion-icon name="chevron-forward-outline"></ion-icon>
     <!-- {{translationMap.get('LABEL_CLOSE_GROUP')}} -->
     <!-- <ng-template #closeGroupTooltip>
       <span> {{ translationMap?.get('LABEL_CLOSE_GROUP')}} </span>
@@ -63,7 +63,7 @@
   </ion-button>
   <ion-button fill="clear" *ngIf="!openInfoConversation" (click)="onOpenCloseInfoConversationFN()"
   tooltip="{{ translationMap?.get('LABEL_OPEN_INFO_CONVERSATION')}}" placement="bottom">
-    <ion-icon name="arrow-back-outline"></ion-icon>
+    <ion-icon name="chevron-back-outline"></ion-icon>
     <!-- <ng-template #openGroupTooltip>
       <span> {{ translationMap?.get('LABEL_OPEN_INFO_CONVERSATION')}} </span>
     </ng-template> -->

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

@@ -107,31 +107,33 @@
         right: 0px;
     }
     &:not(.mobile):not(.close){
-        right: calc(320px + var(--padding-conversation-detail));
-        top: calc(60px + var(--padding-conversation-detail));
-    }
-    &::before{
-        content: "";
-        width: 102px;
-        height: 34px;
-        background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMTAyIDM0IiB3aWR0aD0iMTAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMiAwaC0xMDJsLjA3MTQwOC40MTk3NTNjMTEuMzE5MTkyLS4wMTU1NTggMjIuMjg4MTkyIDMuOTIwMzM3IDMxLjAxMjA5MiAxMS4xMjc2NDdsNy40ODk0IDYuNTAyIDEuNjUwOCAxLjQyMjkgNi42OTU1IDUuNzhjNi41Mzc0IDUuNjQwNSAxNC44ODU3IDguNzQ1MSAyMy41MjI3IDguNzQ3N2gzMS41NTQxeiIKICAgICAgICAgIGZpbGw9IiNlMmU4ZWYiLz4KPC9zdmc+);
-        position: relative;
-        left: 50px;
-        z-index: -1;
+        right: calc(325px + var(--padding-conversation-detail));
+        top: calc(62px + var(--padding-conversation-detail));
     }
 
+
     ion-button {
         text-transform: unset;
         color: var(--basic-blue);
+        --padding-start: 0px;
+        --padding-end: 0px;
+        height: auto;
+        border-radius: 50%;
+        background-color: #f5f8fa;
+        --color: var(--icon-color);
+        border: 1px solid transparent;
+        box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
+
         &:hover {
             --background-hover: transparent;
             text-decoration: underline;
             text-decoration-color: var(--basic-blue);
+            border: 1px solid var(--icon-color);
         }
     }
 
     ion-icon{
-        margin: 5px;
+        margin: 2px;
         color: var(--icon-color)
     }
 }

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

@@ -10,8 +10,7 @@
     position: relative; 
     display: inline-flex;
     width: 100%;
-    padding: 0px 12px;
-    margin: 6px 0px;
+    padding: 8px;
 }
 
 audio {

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.html

@@ -58,6 +58,13 @@
 
           </div>
         </div>
+        <!-- COPILOT-OPTION -->
+        <div *ngIf="isCopilotEnabled" class="copilot-container" id="copilot" tooltip="{{translationsMap?.get('COPILOT.SOLVE_WITH_AI')}}" placement="top">
+          <ion-button id="copilot" fill="clear" (click)="onOpenSection('copilot')">
+            <ion-icon class="channel-icon" src="assets/images/icons/copilot.svg"></ion-icon>
+            {{translationsMap?.get('COPILOT.SOLVE_WITH_AI')}}
+          </ion-button>
+        </div>
         
         <!-- <div>
           <ion-button class="live" ion-button color="danger">

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.scss

@@ -130,6 +130,41 @@ ion-header {
             margin-right: 20px;
         }
     }
+
+    .copilot-container{
+        color: var(--icon-color);
+        position: relative;
+        display: flex;
+        align-items: center;
+        border-radius: 4px;
+
+        ion-button{
+            background-color: var(--copilot-background);
+            --color: var(--copilot-color);
+            padding-bottom: 0px;
+            --padding-start: 0px;
+            --ripple-color: transparent;
+            text-transform: unset;
+            padding: var(--button-padding);
+            border-radius: var(--button-border-radius);
+            
+            ion-icon{
+                margin-right: 4px;
+                margin-left: 4px;
+            }
+
+            &#copilot {  
+                &:hover{
+                    ion-icon {
+                        transition: transform 1s ease-in-out;   
+                        transform: rotate(180deg);
+                        color: #ac87eb;
+                    }
+                }              
+                
+            }
+        }
+    }
 }
 
 .avatar-and-typing-wpr{
@@ -170,7 +205,7 @@ ion-header {
     flex-direction: column;
     justify-content: center;
     margin-left: 12px;
-    width: 80%;
+    width: 70%;
 }
 
 .user-presence {

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

@@ -34,14 +34,14 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   @Input() conv_type: string
   @Input() liveInfo: {sourcePage: string, sourceTitle: string}
   @Input() isMobile: boolean
+  @Input() isCopilotEnabled: boolean = false;
   @Input() translationsMap: Map<string, string>
+  @Output() onClickHeaderSection = new EventEmitter();
   @Output() onOpenInfoConversation = new EventEmitter<boolean>();
   conversationWithFullname: string
   openInfoConversation = false
   
   isDirect = false
-  borderColor = '#ffffff'
-  fontColor = '#949494'
   platformName: string
   // conv_closed: boolean = false;
   IS_ON_MOBILE_DEVICE: boolean
@@ -66,7 +66,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   // ----------------------------------------------------
   ngOnInit() {
 
-    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - idLoggedUser', this.idLoggedUser,)
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - idLoggedUser', this.idLoggedUser,this.translationsMap)
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - conversationAvatar', this.conversationAvatar,)
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) -  conv_type', this.conv_type)
     this.IS_ON_MOBILE_DEVICE = isOnMobileDevice()
@@ -125,6 +125,9 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     this.router.navigateByUrl('/conversations-list')
   }
 
+  onOpenSection(section){
+    this.onClickHeaderSection.emit(section)
+  }
   onOpenCloseInfoConversation(){
     this.openInfoConversation = !this.openInfoConversation
     this.onOpenInfoConversation.emit(this.openInfoConversation)

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

@@ -28,16 +28,6 @@
       </div>
     </div>
 
-    <div *ngIf="isCopilotEnabled">
-      <!-- COPILOT-OPTION -->
-      <div class="section-option" id="copilot" tooltip="{{translationMap?.get('COPILOT.ASK_AI')}}" placement="top">
-        <ion-button id="copilot" fill="clear" [class.active]="section ==='copilot'" (click)="onOpenSection('copilot')">
-          <ion-icon class="channel-icon" src="assets/images/icons/copilot.svg"></ion-icon>
-          {{translationMap?.get('COPILOT.ASK_AI')}}
-        </ion-button>
-      </div>
-    </div>
-
   </div>
 
   <ion-row id="message-email" [style.display]="section==='email'? 'flex': 'none'">

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

@@ -417,6 +417,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       translationMap: this.translationMap};
     const modal: HTMLIonModalElement =
       await this.modalController.create({
+        cssClass: 'sendMail-modal-class',
         component: SendEmailModal,
         componentProps: attributes,
         swipeToClose: false,

package/src/app/modals/send-email/send-email.page.scss

@@ -20,7 +20,21 @@ ion-content{
     padding-top: 40px;
     padding-left: 8%;
     padding-right: 8%;
-
+    height: 100%;
+    form{
+        height: 100%;
+    }
+    .field-wrapper-email{
+        height: 75%;
+        ion-textarea{
+            min-height: calc(100% - 70px);
+            max-height: calc(100% - 70px);
+            
+            &::ng-deep textarea {
+                height: 100% !important;
+            }
+        }
+    }
 }
 
 .content-container[isMobile= true]{
@@ -124,7 +138,7 @@ ion-input{
     background-color: #f1f4f7;
     border: 0;
     border-radius: 6px;
-    padding: 34px;
+    padding: 34px 34px 0px 34px;
     font-size: 16px;
     overflow: hidden;
 
@@ -139,8 +153,8 @@ ion-input{
         --padding-bottom: 12px;
         --padding-start:12px;
         --padding-end: 12px;
-        min-height: 184px;
-        max-height: 184px;
+        min-height: 284px;
+        max-height: 284px;
         color: rgb(98, 112, 139);
 
         &::ng-deep textarea {
@@ -157,8 +171,8 @@ ion-label.message-placeholder{
 
 .info-wrapper{
     display: flex;
-    flex-direction: column;
     -webkit-box-align: center;
+    justify-content: center;
     align-items: center;
     margin-top: 20px;
     // padding-bottom: 30px;
@@ -166,9 +180,10 @@ ion-label.message-placeholder{
     text-align: center;
     color: rgb(98, 112, 139);
     font-size: 13px;
+    gap: 5px;
 
     img{
-        max-width: 35%;
+        max-width: 20%;
         max-height: 50px;
     }
 }

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

@@ -46,6 +46,8 @@
     [liveInfo]="liveInfo" 
     [translationsMap]="translationsHeaderMap"
     [conv_type]="conv_type"
+    [isCopilotEnabled]="isCopilotEnabled"
+    (onClickHeaderSection)="onClickHeaderSection($event)"
     (onOpenInfoConversation)="onOpenCloseInfoConversation($event)">
   </app-header-conversation-detail>
 

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

@@ -700,6 +700,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'ARRAY_DAYS',
       'LIVE',
       'Resolve',
+      'COPILOT.SOLVE_WITH_AI'
     ]
 
     const keysContentDetail = [
@@ -1880,6 +1881,11 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     if (event === 'email' || event === 'templates') {
       this.getLeadDetail()
     }
+    
+  }
+
+  onClickHeaderSection(event: string){
+    this.logger.debug('[CONVS-DETAIL] onClickHeaderSection - section ', event)
     if(event === 'copilot'){
       this.SHOW_COPILOT_SUGGESTIONS = !this.SHOW_COPILOT_SUGGESTIONS
       this.SHOW_CANNED_RESPONSES = false
@@ -1887,6 +1893,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
+
   // -------------- START SCROLL/RESIZE  -------------- //
   /** */
   resizeTextArea() {

package/src/assets/i18n/en.json

@@ -307,7 +307,8 @@
   },
   "HELLO":"Hello",
   "COPILOT": {
-    "ASK_AI":"Ask to AI",
+    "ASK_AI":"Ask AI",
+    "SOLVE_WITH_AI":"Solve with AI",
     "NO_SUGGESTIONS_PRESENT":"No suggestions found",
     "INSERT_PROMPT_HERE":"Inster a prompt here",
     "HOW_CAN_I_HELP_YOU":"How can i help you?"

package/src/assets/i18n/it.json

@@ -308,6 +308,7 @@
     "HELLO":"Ciao",
     "COPILOT": {
         "ASK_AI":"Chiedi all'AI",
+        "SOLVE_WITH_AI":"Risolvi con AI",
         "NO_SUGGESTIONS_PRESENT":"Nessun suggerimento trovato",
         "INSERT_PROMPT_HERE":"Inserisci un prompt qui",
         "HOW_CAN_I_HELP_YOU":"Come posso aiutarti?"

package/src/global.scss

@@ -680,7 +680,11 @@ ul.dropdown-menu > li > a {
     .modal-wrapper{
         border-radius: 16px !important;
     }
-
+ 
+    .sendMail-modal-class .modal-wrapper{
+        --height: 90%;
+        --width: 70%;
+    }
     .json-modal-class .modal-wrapper{
         --height: 90%;
         --width: 70%;

package/src/variables.scss

@@ -58,6 +58,11 @@ body {
     --textarea-color: #06132b;
     // ***** Conversation-detail: end ***** //
 
+     // ***** Conversation-detail: HEADER: start ***** //
+     --copilot-background: #dce9ff;
+     --copilot-color: var(--basic-blue);
+     // ***** Conversation-detail: HEADER: end ***** //
+
     // ***** Conversation-detail PRIVATE-MSG: start ***** //
     --bubble-lightyellow: rgb(255, 247, 237);
     --bubble-privateMsg: rgb(254, 214, 168);
@@ -154,4 +159,9 @@ body {
     --tooltip-color: white;
     // ***** Sidebar: end ***** //
 
+    // ***** BUTTONS: start ***** //
+    --button-padding: 4px 10px;
+    --button-border-radius: 9999px;
+    // ***** BUTTONS: end ***** //
+
 }