@chat21/chat21-web-widget 5.1.0-rc9 → 5.1.0

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

@@ -221,6 +221,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'CLOSE',
       'MAXIMIZE',
       'MINIMIZE',
+      'CENTER',
       'CLOSE_CHAT',
       'RESTART',
       'LOGOUT',
@@ -363,14 +364,21 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     // this.logger.debug('[CONV-COMP] ------ 5: updateConversationbage ------ ');
     // this.updateConversationBadge();
 
-    this.logger.debug('[CONV-COMP] ------ 6: getConversationDetail ------ ', this.conversationId);
-    this.getConversationDetail((isConversationArchived) => {
-      this.logger.debug('[CONV-COMP] ------ 6: updateConversationbage ------ ');
-      this.updateConversationBadge();
-      return;
-    }) //check if conv is archived or not
+    
+    // this.getConversationDetail((isConversationArchived) => {
+    //   this.logger.debug('[CONV-COMP] ------ 6: updateConversationbage ------ ');
+    //   this.updateConversationBadge();
+    //   return;
+    // }) //check if conv is archived or not
     // this.checkListMessages();
 
+    this.logger.debug('[CONV-COMP] ------ 5: getConversationDetail ------ ', this.conversationId);
+    await this.getConversationDetail();
+    
+    
+    this.logger.debug('[CONV-COMP] ------ 6: updateConversationBadge ------ ');
+    this.updateConversationBadge();
+
     if(this.g.customAttributes){
       this.updateUserInfo(this.g.customAttributes)
     }
@@ -384,7 +392,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
    * @param callback
    * @returns isConversationArchived (status conversation archived: boolean) 
    */
-  getConversationDetail(callback:(isConversationArchived: boolean)=>void){
+  getConversationDetail_old(callback:(isConversationArchived: boolean)=>void){
     // if(!this.isConversationArchived){ 
     //get conversation from 'conversations' firebase node
     this.logger.debug('[CONV-COMP] getConversationDetail: isConversationArchived???', this.isConversationArchived, this.conversationWith)
@@ -414,39 +422,60 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
         })
       }
     });
-    // } else { //get conversation from 'conversations' firebase node
-    //   this.archivedConversationsHandlerService.getConversationDetail(this.conversationId, (conv)=>{
-    //     this.logger.debug('[CONV-COMP] archivedConversationsHandlerService getConversationDetail', this.conversationId, conv, this.isConversationArchived)
-    //     if(conv){
-    //       this.conversation = conv;
-    //       this.isConversationArchived = true;
-    //       callback(this.isConversationArchived) 
-    //     }
-    //     if(!conv){
-    //       this.conversationsHandlerService.getConversationDetail(this.conversationId, (conv)=>{
-    //         this.logger.debug('[CONV-COMP] conversationsHandlerService getConversationDetail', this.conversationId, conv, this.isConversationArchived)
-    //         conv? this.isConversationArchived = false : null  
-    //         this.conversation = conv;
-    //         callback(this.isConversationArchived) 
-    //       })
-    //     }
-    //   })
-    // }
-    
-    // if(!this.isConversationArchived){ //get conversation from 'conversations' firebase node
-    //   this.conversationsHandlerService.getConversationDetail(this.conversationId, (conv)=>{
-    //     this.logger.debug('[CONV-COMP] conversationsHandlerService getConversationDetail', this.conversationId, conv)
-    //     this.conversation = conv;
-    //     callback(this.isConversationArchived)    
-    //   })
-    // }else { //get conversation from 'conversations' firebase node
-    //   this.archivedConversationsHandlerService.getConversationDetail(this.conversationId, (conv)=>{
-    //     this.logger.debug('[CONV-COMP] archivedConversationsHandlerService getConversationDetail', this.conversationId, conv)
-    //     this.conversation = conv;   
-    //     callback(this.isConversationArchived)   
-    //   })
-    // }
-    // this.updateConversationBadge()
+  }
+
+  /**
+   * @description get detail of conversation by uid and then return callback with conversation status
+   * @param callback
+   * @returns isConversationArchived (status conversation archived: boolean) 
+   */
+  async getConversationDetail(): Promise<boolean | null> {
+    this.logger.debug('[CONV-COMP] getConversationDetail: isConversationArchived???', this.isConversationArchived, this.conversationWith);
+  
+    const conv = await new Promise<any>((resolve) => {
+      this.conversationsHandlerService.getConversationDetail(this.conversationWith, resolve);
+    });
+
+    if (conv) {
+      this.logger.debug('[CONV-COMP] getConversationDetail: conversationsHandlerService ', this.conversationWith, conv, this.isConversationArchived);
+      this.conversation = conv;
+      this.isConversationArchived = false;
+      return this.isConversationArchived;
+    }
+  
+    this.logger.debug('[CONV-COMP] getConversationDetail: conv not exist --> search in archived list', this.isConversationArchived, this.conversationWith);
+  
+    const archivedConv = await new Promise<any>((resolve) => {
+      this.archivedConversationsHandlerService.getConversationDetail(this.conversationWith, resolve);
+    });
+  
+    if (archivedConv) {
+      this.logger.debug('[CONV-COMP] getConversationDetail: archivedConversationsHandlerService', this.conversationWith, archivedConv, this.isConversationArchived);
+      this.conversation = archivedConv;
+      this.isConversationArchived = true;
+      return this.isConversationArchived;
+    }
+
+    //FALLBACK TO TILEDESK
+    const requests_list = await this.tiledeskRequestService.getMyRequests().catch(err => {
+      this.logger.error('[CONV-COMP] getConversationDetail: error getting request from Tiledesk', err);
+      this.isConversationArchived=true
+      return { requests: [] }
+    });
+    if (requests_list && requests_list.requests.length > 0) {
+      this.logger.debug('[CONV-COMP] getConversationDetail: request exist on Tiledesk', requests_list);
+      let conversation = requests_list.requests.find((request)=> request.request_id === this.conversationId)
+      if(conversation){
+        this.isConversationArchived = false
+        return this.isConversationArchived
+      }
+      this.logger.debug('[CONV-COMP] getConversationDetail: request NOT EXIST on Tiledesk', requests_list);
+      this.isConversationArchived = true
+      return this.isConversationArchived
+    }
+
+    this.isConversationArchived = true;
+    return null;
   }
 
   /**
@@ -744,6 +773,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       subscribtion = this.conversationHandlerService.messageAdded.pipe(takeUntil(this.unsubscribe$)).subscribe((msg: MessageModel) => {
         this.logger.debug('[CONV-COMP] ***** DETAIL messageAdded *****', msg);
         if (msg) {
+
           that.newMessageAdded(msg);
           this.checkMessagesLegntForTranscriptDownloadMenuOption();
           this.resetTimeout();
@@ -988,6 +1018,12 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   /** CALLED BY: conv-header component */
   onCloseWidgetFN() {
     //this.g.setParameter('activeConversation', null, false);
+    /** remove Min/Max/fullscreen css classes */
+    var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
+    tiledeskDiv.classList.remove('max-size')
+    tiledeskDiv.classList.remove('min-size')
+    tiledeskDiv.classList.remove('top-size')
+
     this.onCloseWidget.emit();
   }
   /** CALLED BY: conv-header component */
@@ -1037,15 +1073,30 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     // this.hideTextAreaContent = true
   }
   /** CALLED BY: conv-header component */
-  onWidgetHeightChange(mode){
-    var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
+  onWidgetSizeChange(mode: 'min' | 'max' | 'top'){
+    var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv');
+    this.g.size = mode 
+    const parent = tiledeskDiv.parentElement as HTMLElement | null;
     if(mode==='max'){
-      tiledeskDiv.style.maxHeight = 'unset'
-    }else if(mode==='min'){
-      tiledeskDiv.style.maxHeight = '620px'
+        tiledeskDiv.classList.add('max-size')
+        tiledeskDiv.classList.remove('min-size')
+        tiledeskDiv.classList.remove('top-size')
+        if(parent) parent.classList.remove('overlay--popup');
+    } else if(mode==='min'){
+        tiledeskDiv.classList.add('min-size')
+        tiledeskDiv.classList.remove('max-size')
+        tiledeskDiv.classList.remove('top-size')
+        if(parent) parent.classList.remove('overlay--popup');
+    } else if(mode=== 'top'){
+        tiledeskDiv.classList.add('top-size')
+        tiledeskDiv.classList.remove('max-size')
+        tiledeskDiv.classList.remove('min-size')
+        if(parent) parent.classList.add('overlay--popup');
     }
     this.isMenuShow = false;
   }
+
+
   /** CALLED BY: conv-header component */
   onSignOutFN(event){
     this.onSignOut.emit(true)
@@ -1079,10 +1130,13 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
         this.onRestartChat()
         break;
       case HEADER_MENU_OPTION.MAXIMIZE:
-        this.onWidgetHeightChange('max')
+        this.onWidgetSizeChange('max')
         break;
       case HEADER_MENU_OPTION.MINIMIZE:
-        this.onWidgetHeightChange('min')
+        this.onWidgetSizeChange('min')
+        break;
+      case HEADER_MENU_OPTION.TOP:
+        this.onWidgetSizeChange('top')
         break;
     }
   }
@@ -1210,19 +1264,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.logger.debug('[CONV-COMP] floating onNewConversationButtonClicked')
     this.onNewConversationButtonClicked.emit()
   }
-  /** CALLED BY: conv-footer floating-button component */
-  onBackButton(event: boolean){
-    this.hideTextAreaContent = event;
-    try{
-      const tiledeskDiv = document.getElementById('chat21-footer')
-      tiledeskDiv.classList.remove('maximize-width')
-      // tiledeskDiv.style.width = '376px'
-      // tiledeskDiv.style.maxHeight = '620px'
-    }catch(e){
-      this.logger.error('[CONV-COMP] onBackButton > Error :' + e);
-    }
-
-  }
   // =========== END: event emitter function ====== //
 
 
@@ -1272,7 +1313,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   private onIncreaseWith(){
     try{
       const tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
-      tiledeskDiv.classList.add('increaseSize')
+      tiledeskDiv.classList.add('max-size')
       const chat21conversations = document.getElementById('chat21-conversations')
       chat21conversations.style.borderRadius = '16px'
       // tiledeskDiv.style.width = '696px'
@@ -1285,8 +1326,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   private restoreDefaultWidgetSize(){
     try{
       const tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
-      tiledeskDiv.classList.remove('increaseSize')
-      tiledeskDiv.classList.remove('decreaseSize')
+      tiledeskDiv.classList.remove('max-size')
+      tiledeskDiv.classList.remove('min-size')
       // tiledeskDiv.style.width = '376px'
       // tiledeskDiv.style.maxHeight = '620px'
     }catch(e){
@@ -1373,9 +1414,9 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.logger.log('[CONV-COMP] ----> FILE - (dragleave) drag ev ', event)
     if (event.dataTransfer && event.dataTransfer.files) {
       const files = event.dataTransfer.files;
-      const canUploadFile = checkAcceptedFile(files[0].type, this.appConfigService.getConfig().fileUploadAccept)
+      const canUploadFile = checkAcceptedFile(files[0].type, this.g.fileUploadAccept)
       if(!canUploadFile){
-        this.logger.error('[IMAGE-UPLOAD] detectFiles: can not upload current file type--> NOT ALLOWED', this.appConfigService.getConfig().fileUploadAccept)
+        this.logger.error('[IMAGE-UPLOAD] detectFiles: can not upload current file type--> NOT ALLOWED', this.g.fileUploadAccept)
         return;
       }
     }

package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.html

@@ -1,7 +1,9 @@
 <div class="audio-recorder">
   <button *ngIf="audioUrl" (click)="deleteRecording()">
     <span class="v-align-center">
-      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+        <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/>
+      </svg>
       <!-- <i class="material-icons">delete_outline</i> -->
     </span>
   </button>
@@ -9,7 +11,6 @@
   <chat-audio  class="test" *ngIf="audioBlob && audioUrl"
     [audioBlob] = "audioBlob"
     [color]="'var(--chat-footer-color)'"
-    [fontSize]="stylesMap.get('fontSize')"
     [stylesMap]="stylesMap">
   </chat-audio>
     

package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.scss

@@ -1,19 +1,10 @@
-
-@font-face {
-    font-family: 'Material Icons';
-    src: url('https://fonts.googleapis.com/icon?family=Material+Icons');
-  }
-  
-  .material-icons.mic_none::before {
-    content: 'mic_none';
-  }
-
 .audio-recorder {
     text-align: center;
     margin: 0px;
     display: inline-flex;
     align-items: center;
-    justify-content: center;
+    // justify-content: center;
+    justify-content: space-between;
     height: 100%;
     width: 100%;
     float: left;
@@ -22,8 +13,8 @@
 
 ::ng-deep chat-audio.test {
   display: flex;
-  width: 80%;
-  margin: 8px 0;
+  width: 90%;
+  // margin: 8px 0;
   pointer-events: auto;
   border-radius: var(--chat-footer-border-radius);
   background-color: var(--chat-footer-background-color);
@@ -52,10 +43,9 @@ button {
     background-color: transparent;
     color: var(--icon-fill-color);
     fill: var(--icon-fill-color);
-    height: var(--chat-footer-height);
+    // height: var(--chat-footer-height);
 
     display: flex;
-    align-self: flex-end;
     // margin: 0 8px;
     width: 34px;
     text-align: center;
@@ -74,6 +64,8 @@ button {
     display: inline-flex;
     justify-content: center;
     align-items: center;
+    padding: 0px;
+    z-index: 0;
   }
   
   .mic-button svg {

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.html

@@ -34,8 +34,6 @@
                               [ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
                               [message]="message"
                               [fontColor]="stylesMap.get('bubbleSentTextColor')"
-                              [fontSize]="stylesMap.get('fontSize')"
-                              [fontFamily]="stylesMap.get('fontFamily')"
                               [stylesMap]="stylesMap"
                               (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                               (onAfterMessageRender)="onAfterMessageRenderFN($event)"
@@ -65,13 +63,11 @@
                               [ngClass]="{'slide-in-left': false}"
                               [class.no-background]="(isImage(message) || isFrame(message) || isCarousel(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"  
                               [class.emoticon]="isEmojii(message?.text)"
-                              [style.margin-left]="isSameSender(message?.sender, i)? '50px': null"
+                              [style.margin-left]="isSameSender(message?.sender, i)? 'calc(var(--avatar-width) + 10px)': null"
                               [ngStyle]="{'background': stylesMap.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
                               [isSameSender]="isSameSender(message?.sender, i)"
                               [message]="message"
                               [fontColor]="stylesMap.get('bubbleReceivedTextColor')"
-                              [fontSize]="stylesMap.get('fontSize')"
-                              [fontFamily]="stylesMap.get('fontFamily')"
                               [stylesMap]="stylesMap"
                               (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                               (onAfterMessageRender)="onAfterMessageRenderFN($event)"

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 
 #scroll-me {
     scroll-behavior: smooth;
@@ -36,26 +34,6 @@
     // box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.4);
     position: fixed;
     .c21-body-container {
-        .c21-body-header {
-            .chat21-header-modal-select {
-                font-family: 'Google Sans', sans-serif !important;
-                padding: 0px;
-                background-color: #b9b9b921;
-                margin: 8px;
-                line-height: 1.2em;
-                color: #616161;
-                font-size: 15px;
-                text-align: center;
-                word-wrap: break-word;
-                border-radius: 8px;
-            }
-            .chat21-header-modal-select-more-of-one-dept {
-                position: relative;
-                height: auto;
-                padding: 10px;
-                margin: 30px 0 0 0;
-            }
-        } // end .chat21-sheet-header
     
         .c21-body-content  {
             /* no conflict
@@ -133,7 +111,8 @@
                 .attachment_container {
                     display: flex;
                     align-content: center;
-                    justify-content: flex-end;
+                    // justify-content: flex-end;
+                    justify-content: flex-start;
                 }
                 .carousel_container{
                     margin: 0px 20px; 
@@ -284,21 +263,57 @@
     }// end c21-body-container
 }// end c21-body
 
-        
-
-// ============= END CSS c21-body ================= //
-
+/* LOADING */
+/*http://tobiasahlin.com/spinkit/*/
+#chat21-spinner {
+    display: none;
+    width: 70px;
+    min-height: 20px;
+    margin: 20px auto 0;
+    text-align: center;
+}
+#chat21-spinner.active {
+    display: block;
+}
+#chat21-spinner > div {
+    width: 12px;
+    height: 12px;
+    background-color: var(--blue);
+    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;
+}
+#chat21-spinner .chat21-bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+}
+#chat21-spinner .chat21-bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+}
+#chat21-spinner span {
+    display: block;
+    margin: 0.5em 0 0 0;
+    color: var(--black);
+    /* text-transform: uppercase; */
+    -webkit-animation: pulse 2000ms linear infinite;
+    -moz-animation: pulse 2000ms linear infinite;
+    animation: pulse 2000ms linear infinite;
+    text-align: center;
+}
 @-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);
+    -webkit-transform: scale(0);
+    transform: scale(0);
     } 40% { 
-        -webkit-transform: scale(1.0);
-        transform: scale(1.0);
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
     }
-}
+}
+
+// ============= END CSS c21-body ================= //

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.html

@@ -27,8 +27,8 @@
         <!-- ICON ATTACHMENT -->
         <label *ngIf="showAttachmentFooterButton" tabindex="1502" aria-label="allegati" for="chat21-file" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-start-upload-doc">
             <span class="v-align-center">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" >
-                    <path d="M18.4,13.2l-2.6,4.5c-1.5,2.6-4.9,3.6-7.6,2c-2.6-1.5-3.6-4.9-2-7.6l3.9-6.7c1.1-1.9,3.6-2.6,5.5-1.5 c1.9,1.1,2.6,3.6,1.5,5.5l-3.3,5.7c-0.7,1.3-2.3,1.7-3.6,1c-1.3-0.7-1.7-2.3-1-3.6l2-3.4c0.2-0.3,0.6-0.5,1-0.3s0.5,0.6,0.3,1 l-2,3.4c-0.3,0.5-0.2,1.1,0.3,1.5c0.4,0.4,1.1,0.4,1.5,0c0.1-0.1,0.2-0.2,0.2-0.3l3.3-5.7c0.7-1.2,0.3-2.8-1-3.5 c-1.2-0.7-2.8-0.3-3.5,1l-3.9,6.7C6.4,14.9,7,17.4,9,18.5c1.9,1.1,4.4,0.5,5.6-1.5l2.6-4.5c0.2-0.3,0.6-0.5,1-0.3 C18.5,12.5,18.6,12.9,18.4,13.2L18.4,13.2z"/>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M9.9,22.7c0,0-.1,0-.2,0-1.9.3-3.7-.2-5.2-1.4-3-2.3-3.6-6.4-1.4-9.5L9.5,2.5c.4-.5,1.1-.6,1.6-.3.5.4.6,1.1.3,1.6l-6.5,9.4c-1.4,2-1,4.8.9,6.3,1,.8,2.2,1.1,3.5.9,1.3-.2,2.4-.9,3.1-1.9l6-8.7c.9-1.2.6-3-.6-3.9-.6-.5-1.4-.6-2.1-.5-.8.1-1.4.5-1.9,1.1l-5.8,8.2c-.3.5-.2,1.1.2,1.5.2.2.5.3.8.2.3,0,.6-.2.7-.4l4.7-6.2c.4-.5,1.1-.6,1.6-.2.5.4.6,1.1.2,1.6l-4.7,6.2c-.5.7-1.4,1.2-2.3,1.3-.9.1-1.8-.2-2.5-.7-1.4-1.1-1.6-3.1-.6-4.6l5.8-8.2c.8-1.1,2-1.9,3.4-2.1,1.4-.2,2.7.1,3.8,1,2.2,1.7,2.7,4.8,1.1,7.1l-6,8.7c-1.1,1.5-2.6,2.5-4.4,2.8h0Z"/>
                 </svg>
             </span>
              <input
@@ -47,11 +47,16 @@
         <!-- ICON EMOJII -->
         <label *ngIf="showEmojiFooterButton" tabindex="1504" aria-label="emojii" for="chat21-emojii" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-emoticon-picker" (click)="onEmojiiPickerClicked()">
             <span class="v-align-center">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-                    <path d="M0,0H20.57V20.57H0V0Z" fill="none"/>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+                    <path stroke-width=".4px" stroke="currentColor" d="M12,20.8c-5.1,0-9.3-4.2-9.3-9.3S6.9,2.2,12,2.2s9.3,4.2,9.3,9.3-4.2,9.3-9.3,9.3ZM12,3.6c-4.4,0-7.9,3.6-7.9,7.9s3.6,7.9,7.9,7.9,7.9-3.6,7.9-7.9-3.6-7.9-7.9-7.9Z"/>
+                    <path stroke-width=".4px" stroke="currentColor" d="M12,17.2c-2.7,0-4.3-1.9-4.6-2.3-.2-.3-.2-.7.1-1s.7-.2,1,.1c.1.2,1.4,1.8,3.5,1.8s2.2,0,3.5-1.8c.2-.3.7-.4,1-.1s.4.7.1,1c-1.7,2.2-4.1,2.3-4.6,2.3Z"/>
+                    <path d="M8.7,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
+                    <path d="M15.5,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
+
+                    <!-- <path d="M0,0H20.57V20.57H0V0Z" fill="none"/>
                     <circle cx="15.02" cy="9.86" r="1.29"/>
                     <circle cx="9.02" cy="9.86" r="1.29"/>
-                    <path d="M12.02,15.43c-1.27,0-2.36-.69-2.96-1.71h-1.43c.69,1.76,2.39,3,4.39,3s3.7-1.24,4.39-3h-1.43c-.6,1.02-1.69,1.71-2.96,1.71Zm0-12C7.28,3.43,3.45,7.27,3.45,12s3.83,8.57,8.56,8.57,8.58-3.84,8.58-8.57S16.75,3.43,12.01,3.43Zm0,15.43c-3.79,0-6.86-3.07-6.86-6.86s3.07-6.86,6.86-6.86,6.86,3.07,6.86,6.86-3.07,6.86-6.86,6.86Z"/>
+                    <path d="M12.02,15.43c-1.27,0-2.36-.69-2.96-1.71h-1.43c.69,1.76,2.39,3,4.39,3s3.7-1.24,4.39-3h-1.43c-.6,1.02-1.69,1.71-2.96,1.71Zm0-12C7.28,3.43,3.45,7.27,3.45,12s3.83,8.57,8.56,8.57,8.58-3.84,8.58-8.57S16.75,3.43,12.01,3.43Zm0,15.43c-3.79,0-6.86-3.07-6.86-6.86s3.07-6.86,6.86-6.86,6.86,3.07,6.86,6.86-3.07,6.86-6.86,6.86Z"/> -->
                 </svg>
             </span>
         </label>
@@ -85,8 +90,8 @@
     <!-- ICON SEND -->
     <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.disabled]="showAlertEmoji || showAlertUrl" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
         <span class="v-align-center">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
-                <path d="M1.8,18.9V1.7L22,10.3L1.8,18.9z M3.9,15.6l12.6-5.4L3.9,4.9v3.7l6.4,1.6l-6.4,1.6V15.6z M3.9,15.6V4.9v7V15.6z"/>
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" fill="currentColor">
+                <path d="M1.8,20.6V3.4l20.2,8.6L1.8,20.6ZM3.9,17.3l12.6-5.4L3.9,6.6v3.7l6.4,1.6-6.4,1.6v3.8ZM3.9,17.3V6.6v10.7Z"/>
             </svg>
         </span>
     </div>
@@ -107,7 +112,7 @@
 <!-- EMOJII PICKER-->
 <div [style.visibility]="isEmojiiPickerShow?'visible':'hidden'"  class="emoji-container"  id="emoji-mart-container" #emoji_mart_container>
     <!-- <ng-container #emojii_container></ng-container> -->
-    <emoji-mart id="emoji-mart"
+        <emoji-mart id="emoji-mart"
         *ngIf="showEmojiPicker"
         class="emoji-mart"
         [showPreview]="emojiiOptions?.showPreview"

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
 .textarea-container{
     // padding: 8px 34px;
@@ -7,9 +6,8 @@
     display: flex;
     // width: 100%;
     align-items: center;
-    gap: 8px;
     justify-content: space-between;
-    margin: 0px 8px;
+    gap: 8px;
 
     //if attachment icon OR emoji icon is not in DOM -> increment textarea width
     &:has(:not(#chat21-start-upload-doc), :not(#chat21-emoticon-picker)) .visible-text-area {
@@ -24,15 +22,15 @@
 
 .icons-container{
     display: flex;
-    align-self: flex-end;
+    // align-self: flex-end;
     // margin-left: 8px;
     // margin-right: 8px;
-    gap: 8px;
+    gap: 4px;
 }
 
 .visible-text-area {
     width: 70%;
-    margin: 8px 0px;
+    // margin: 12px 0px;
     pointer-events: auto;
     border-radius: var(--chat-footer-border-radius);
     background-color: var(--chat-footer-background-color);
@@ -45,9 +43,10 @@
 }
 
 .chat21-textarea-button {
-    fill: var(--icon-fill-color);
+    // fill: var(--icon-fill-color);
+    color: var(--icon-fill-color);
     pointer-events: auto;
-    height: var(--chat-footer-height);
+    // height: var(--chat-footer-height);
     bottom: 22px;
     opacity: 0.3;
     cursor: initial;
@@ -207,7 +206,7 @@ textarea:active{
 
 #chat21-button-send {
     display: flex;
-    align-self: flex-end;
+    // align-self: flex-end;
     // margin: 0 8px;
     width: 34px;
     text-align: center;
@@ -219,7 +218,7 @@ textarea:active{
     width: 34px;
     text-align: center;
     justify-content: center;
-    height: var(--chat-footer-height);
+    // height: var(--chat-footer-height);
     &.active{
         width: 100%;
     }
@@ -288,7 +287,7 @@ textarea:active{
 
 #hiddenFooter{
     position: absolute;
-    bottom: 100%;
+    bottom: 6px;
     width: 100%;
     height: var(--chat-footer-logo-height);
     display: flex;
@@ -323,7 +322,7 @@ textarea:active{
             font-weight: 500;
             line-height: 22px;
 
-            font-family: Mulish, sans-serif;
+            font-family: var(--font-family-powered-by);
             letter-spacing: 0.24px;
             -webkit-font-smoothing: antialiased;
             padding: 4px 12px;
@@ -373,7 +372,7 @@ textarea:active{
         font-size: 1.2em;
         font-weight: 500;
         line-height: 22px;
-        font-family: Mulish, sans-serif;
+        font-family: var(--font-family);
         letter-spacing: 0.24px;
         -webkit-font-smoothing: antialiased;
         padding: 4px 12px;
@@ -393,20 +392,20 @@ textarea:active{
 
 
 .emoji-container {
-    height: 312px;
+    height: 319px;
     position: absolute;
     overflow: hidden;
-    width: 89%;
+    width: 338px;
     bottom: 100%;
     z-index: 10;
     left: 10px;
-    box-shadow: 0px -15px 20px -13px rgba(0, 0, 0 , 0.38);
-    -webkit-box-shadow: 0px -15px 20px -13px rgba(0, 0, 0 , 0.38);
+    box-shadow: 0 -4px 14px -13px rgba(0, 0, 0 , 0.38);
+    -webkit-box-shadow: 0 -4px 14px -13px rgba(0, 0, 0 , 0.38);
 }
 .emoji-mart {
     position: absolute;
     // bottom: 40px;
     // left: 10px;
     border: none;
-    margin: -2px -2px 0px;
+    // margin: -2px -2px 0px;
 }