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

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

@@ -1,9 +1,9 @@
 <!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
 <!-- [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px'}" -->
 <!-- isImage >{{isImage(message) }}    message.metadata.width {{message?.metadata?.width }}  -->
-<div id="bubble-message" [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? message?.metadata?.width + 'px' : null }"
-   class="messages primary-color"
-  [class.emoticon]="message?.emoticon">
+<div id="bubble-message"
+  [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? message?.metadata?.width + 'px' : null }"
+  class="messages primary-color" [class.emoticon]="message?.emoticon">
 
 
   <div>
@@ -18,19 +18,13 @@
 
     <!-- [width]="getMetadataSize(message.metadata).width" 
     [height]="getMetadataSize(message.metadata).height" -->
-    <chat-image *ngIf="isImage(message)" 
-      [metadata]="message.metadata"
-     
-      [width]="message.metadata.width" 
-      [height]="message.metadata.height"
-      (onImageRendered)="onImageRenderedFN($event)">
+    <chat-image *ngIf="isImage(message)" [metadata]="message.metadata" [width]="message.metadata.width"
+      [height]="message.metadata.height" (onImageRendered)="onImageRenderedFN($event)">
     </chat-image>
 
     <!-- [width]="getMetadataSize(message.metadata).width"  -->
     <!-- [height]="getMetadataSize(message.metadata).height"> -->
-    <chat-frame *ngIf="isFrame(message)" 
-      [metadata]="message.metadata"
-      [width]="message.metadata.width" 
+    <chat-frame *ngIf="isFrame(message)" [metadata]="message.metadata" [width]="message.metadata.width"
       [height]="message.metadata.height">
     </chat-frame>
 
@@ -40,36 +34,26 @@
       [height]="message.metadata.height">
     </chat-frame> -->
 
-    <!-- message type:: text -->
-    <!-- <div *ngIf="message.type == 'text'">  -->
-      
-    <div *ngIf="message?.text" [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left"
-      content-type="template" (click)="handleTooltipEvents($event)">
-      <ng-template #timeTooltipLeft>
-        <!-- <span>{{message.timestamp | amTimeAgo}}</span> -->
-        <!-- <span> {{browserLang === 'it' ? (message.timestamp| amDateFormat:'DD MMM') : (message.timestamp |
-        amDateFormat:'MMM DD')}} </span> amCalendar -->
 
+    <!-- [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left" content-type="template" (click)="handleTooltipEvents($event)" -->
+    <div *ngIf="message?.text">
+      <span class="message-date"> {{message.timestamp | date:'HH:mm' }} </span>
+      <!-- <ng-template #timeTooltipLeft>
         <span> {{message.timestamp | amCalendar }} </span>
-      </ng-template>
+      </ng-template> -->
 
-      <chat-text 
-        [text]="message?.text" 
-        [color]="textColor" 
-        [message]="message"
+      <chat-text [text]="message?.text" [color]="textColor" [message]="message"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">
       </chat-text>
-      <!-- <p #messageEl class="message_innerhtml marked" [innerHTML]="printMessage(message, messageEl, this) | marked"></p> -->
-      <!-- <div *ngIf="isPopupUrl(message.text); then contentPopup else contentNewTab">here
-            is ignored</div>
-        <ng-template #contentPopup>
-            <p style="text-decoration: underline; padding:8px; cursor: pointer;"
-                (click)="popupUrl(g.windowContext, message.text,'windowName')">{{strip_tags(message.text)}}</p>
-        </ng-template>
-        <ng-template #contentNewTab>
-            <p #messageEl [innerHTML]="printMessage(message, messageEl, this) | linky"></p>
-        </ng-template> -->
+
+      <ng-container *ngIf="areVisibleCAR && support_mode === true">
+        <ion-button shape="round" size="small" class="btn-add-msg-as-canned-response" ion-button fill="clear"
+          (click)="presentCreateCannedResponseModal()" tooltip="{{addAsCannedResponseTooltipText}}"
+          [options]="tooltipOptions" placement="bottom">
+          <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
+        </ion-button>
+      </ng-container>
     </div>
   </div>
 

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

@@ -47,5 +47,15 @@
     }
     
 }
+// > .button-native
+.btn-add-msg-as-canned-response  {
+    // padding-left: 5px ;
+    // padding-right: 5px ;
+    border-radius: 50%;
+    --padding-end: 7px ;
+    --padding-start: 7px ;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%)
+
+}
 
 

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

@@ -8,6 +8,8 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { TranslateService } from '@ngx-translate/core';
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import * as moment from 'moment';
+import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page'
+import { ModalController } from '@ionic/angular';
 @Component({
   selector: 'chat-bubble-message',
   templateUrl: './bubble-message.component.html',
@@ -17,13 +19,15 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
 
   @Input() message: MessageModel;
   @Input() textColor: string;
+  @Input() areVisibleCAR: boolean;
+  @Input() support_mode: boolean;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onImageRendered = new EventEmitter<boolean>()
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
-
+  @Input() addAsCannedResponseTooltipText : string;
   public browserLang: string;
 
   tooltipOptions = {
@@ -41,46 +45,14 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   constructor(
     public sanitizer: DomSanitizer,
     private translate: TranslateService,
-    public tiledeskAuthService: TiledeskAuthService
-    
+    public tiledeskAuthService: TiledeskAuthService,
+    public modalController: ModalController,
     ) {
     // console.log('BUBBLE-MSG Hello !!!!')
   }
 
   ngOnInit() {
-
     this.setMomentLocale()
-    // this.browserLang = this.translate.getBrowserLang();
-  
-    // if (this.browserLang) {
-    //   if (this.browserLang === 'it') {
-
-
-    //     moment.locale('it', {
-    //       calendar: {
-    //         lastDay: '[Ieri alle] LT',
-    //         sameDay: '[Oggi alle] LT',
-    //         nextDay: '[Domani alle] LT',
-    //         lastWeek: '[Ultimo] dddd [alle] LT',
-    //         nextWeek: 'dddd [alle] LT',
-    //         sameElse: 'lll'
-    //       }
-    //     });
-
-    //   } else {
-    //     moment.locale('en', {
-    //       calendar: {
-    //         lastDay: '[Yesterday at] LT',
-    //         sameDay: '[Today at] LT',
-    //         nextDay: '[Tomorrow at] LT',
-    //         lastWeek: '[last] dddd [at] LT',
-    //         nextWeek: 'dddd [at] LT',
-    //         sameElse: 'lll'
-    //       }
-    //     });
-    //   }
-    // }
-
   }
 
 
@@ -109,15 +81,18 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
         sameElse: 'LLLL'
       }
     });
+    // this.translate.getTranslation(chat_lang).subscribe((labels: string) => {
+    //   console.log('[BUBBLE-MESSAGE] translations: ', labels);
+    // });
   }
 
   ngOnChanges() {
-    // console.log('BUBBLE-MSG Hello !!!! this.message ',  this.message)
+    this.logger.log('BUBBLE-MSG Hello !!!! this.message ',  this.message)
+    this.logger.log('BUBBLE-MSG ngOnChanges areVisibleCAR', this.areVisibleCAR)
+    this.logger.log('BUBBLE-MSG ngOnChanges support_mode', this.support_mode)
     if (this.message && this.message.metadata && typeof this.message.metadata === 'object') {
       this.getMetadataSize(this.message.metadata)
-      // console.log('BUBBLE-MSG ngOnChanges message > metadata', this.message.metadata)
     }
-
   }
 
 
@@ -184,11 +159,11 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
         const domRepresentation = document.getElementsByClassName('chat-tooltip');
         if (domRepresentation) {
           const item = domRepresentation[0] as HTMLInputElement;
-          if (!item.classList.contains('tooltip-show')) {
+          if (item && !item.classList.contains('tooltip-show')) {
             item.classList.add('tooltip-show');
           }
           setTimeout(function () {
-            if (item.classList.contains('tooltip-show')) {
+            if (item && item.classList.contains('tooltip-show')) {
               item.classList.remove('tooltip-show');
             }
           }, that.tooltipOptions['hideDelayAfterClick']);
@@ -224,6 +199,26 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     this.onImageRendered.emit(event)
   }
 
+  async presentCreateCannedResponseModal(): Promise<any> {
+    this.logger.log('[BUBBLE-MESSAGE] PRESENT CREATE CANNED RESPONSE MODAL ')
+    const attributes = {
+       message: this.message,
+    }
+    const modal: HTMLIonModalElement = await this.modalController.create({
+      component: CreateCannedResponsePage,
+      componentProps: attributes,
+      swipeToClose: false,
+      backdropDismiss: false,
+    })
+    modal.onDidDismiss().then((dataReturned: any) => {
+      // 
+      this.logger.log('[BUBBLE-MESSAGE] ', dataReturned.data)
+    })
+
+    return await modal.present()
+  }
+
+
   // printMessage(message, messageEl, component) {
   //   const messageOBJ = { message: message, sanitizer: this.sanitizer, messageEl: messageEl, component: component}
   //   this.onBeforeMessageRender.emit(messageOBJ)

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

@@ -150,6 +150,7 @@ ion-header {
 
 .tile-info-with-ios {
     left: 82px !important;
+    top: 10px!important;
 }
 
 .user-presence-ios {
@@ -158,6 +159,7 @@ ion-header {
 
 .avatar-container-ios {
     left: 55px;
+    top: 10px;
 }
 
 .resolve-conv-margin-right {

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

@@ -51,7 +51,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   conversation_with_fullname: string
   platformName: string
   conv_closed: boolean = false;
-
+  IS_ON_IOS_MOBILE_DEVICE: boolean
   private logger: LoggerService = LoggerInstance.getInstance()
 
   /**
@@ -88,30 +88,35 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   // @ Lifehooks
   // ----------------------------------------------------
   ngOnInit() {
-   
-    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - idLoggedUser', this.idLoggedUser, )
-    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - conversationAvatar', this.conversationAvatar, )
-    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) -  conv_type', this.conv_type, )
+
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - idLoggedUser', this.idLoggedUser,)
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - conversationAvatar', this.conversationAvatar,)
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) -  conv_type', this.conv_type,)
     this.conversation_with_fullname = this.conversationAvatar.conversation_with_fullname
     this.listenToConversationHasBeenClosed()
-    this.initialize()
+    this.initialize();
+    // this.isOniOSMobileDevice()
+  }
+
+  isOniOSMobileDevice() {
+    this.IS_ON_IOS_MOBILE_DEVICE = false;
+    if (/iPad|iPhone|iPod/i.test(window.navigator.userAgent)) {
+      this.IS_ON_IOS_MOBILE_DEVICE = true;
+
+    }
+    // console.log('[CONVS-DETAIL][HEADER] IS_ON_IOS_MOBILE_DEVICE ', this.IS_ON_IOS_MOBILE_DEVICE)
+    return this.IS_ON_IOS_MOBILE_DEVICE;
   }
 
   ngOnChanges() {
-    this.logger.log(
-      '[CONVS-DETAIL][HEADER] - (ngOnChanges) -  conversationAvatar',
-      this.conversationAvatar,
-    )
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) -  conversationAvatar', this.conversationAvatar)
     if (this.conversationAvatar) {
       this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(
         this.conversationAvatar.uid,
       )
     } else {
       const channelType = setChannelType(this.idConv)
-      this.logger.log(
-        '[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED channelType ',
-        channelType,
-      )
+      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED channelType ', channelType)
       this.conversationAvatar = setConversationAvatar(
         this.idConv,
         this.fullNameConv,
@@ -122,10 +127,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
           this.conversationAvatar.uid,
         )
       }
-      this.logger.log(
-        '[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED conversationAvatar',
-        this.conversationAvatar,
-      )
+      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED conversationAvatar', this.conversationAvatar)
     }
 
     this.logger.log(
@@ -162,20 +164,21 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   }
 
   closeConversation() {
-    this.events.publish('hasclosedconversation', this.idConv)
+    this.logger.log('[CONVS-DETAIL][HEADER] click on RESOLVE this.events', this.events) 
+    this.events.publish('conversation:closed', this.idConv)
   }
 
   listenToConversationHasBeenClosed() {
     this.events.subscribe('conversationhasbeenclosed', (convId) => {
       // console.log('[CONVS-DETAIL][HEADER] conversationhasbeenclosed  convId', convId)
-        if (convId === this.idConv) {
-          this.logger.log('[CONVS-DETAIL][HEADER] the conversation was closed',)
-          this.conv_closed = true;
-        }
+      if (convId === this.idConv) {
+        this.logger.log('[CONVS-DETAIL][HEADER] the conversation was closed',)
+        this.conv_closed = true;
+      }
     });
   }
 
-  
+
 
   onOpenCloseInfoConversation() {
     this.openInfoMessage = false
@@ -188,7 +191,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   }
 
   /** */
-  pushPage(event) {}
+  pushPage(event) { }
 
   goBackToConversationList() {
     this.router.navigateByUrl('/conversations-list')

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

@@ -38,36 +38,73 @@
 
     <ion-col col-auto>
 
-      <div class="start-buttons" style="position: absolute;display: flex;"> 
-      
-        <ng-container *ngIf="areVisibleCAR">
-        <div class="canned-responses-btn-wpr" style="margin-left: -5px;" tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions"   placement="top">
-          <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()" [disabled]="!IS_SUPPORT_GROUP_CONVERSATION || disableTextarea">
-            <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon>
-          </ion-button>
-        </div>
-        <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount === 0" tooltip="{{translationMap?.get('NO_CANNED_RESPONSES')}}" [options]="tooltipOptions"   placement="top" class="no-canned-responses-btn-badge">
-          <ion-icon name="alert-sharp" style="vertical-align: middle;"></ion-icon>
-        </div>
-        <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount > 0" tooltip="{{translationMap?.get('YES_CANNED_RESPONSES')}}" [options]="tooltipOptions"   placement="top" class="canned-responses-btn-badge">
-          <ion-icon name="information-sharp" style="vertical-align: middle;"></ion-icon>
-        </div>
-      </ng-container>
+      <div class="start-buttons" style="position: absolute;display: flex; top: 2px;">
+
+        <ng-container *ngIf="areVisibleCAR && support_mode === true">
+          <div class="canned-responses-btn-wpr" style="margin-left: -5px;"
+            tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top">
+            <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()"
+              [disabled]="!IS_SUPPORT_GROUP_CONVERSATION || disableTextarea">
+              <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon>
+            </ion-button>
+          </div>
+          <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount === 0"
+            tooltip="{{translationMap?.get('NO_CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top"
+            class="no-canned-responses-btn-badge">
+            <ion-icon name="alert-sharp" style="vertical-align: middle;"></ion-icon>
+          </div>
+          <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount > 0"
+            tooltip="{{translationMap?.get('YES_CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top"
+            class="canned-responses-btn-badge">
+            <ion-icon name="information-sharp" style="vertical-align: middle;"></ion-icon>
+          </div>
+        </ng-container>
 
- 
-        <div class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" [options]="tooltipOptions"  placement="top">
+
+        <div class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" [options]="tooltipOptions"
+          placement="top">
           <ion-button ion-button fill="clear" class="upload-image-btn" [disabled]="disableTextarea">
             <ion-icon slot="icon-only" lazy="true" name="attach-outline"
               style="font-size: 30px;transform: rotate(42deg);"></ion-icon>
             <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input"
               [accept]="fileUploadAccept">
-             
+
           </ion-button>
-         
+
+        </div>
+
+        <!-- <ion-icon (click)="showEmojiPicker = !showEmojiPicker" color="secondary" name="happy" style="zoom:2;"></ion-icon> -->
+        <!-- --------------------------------------------- -->
+        <!-- Emoji Picker Button  tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top" -->
+        <!-- --------------------------------------------- -->
+        <div class="emoji-picker-btn-wpr">
+          <ion-button ion-button fill="clear" class="emoji-picker-btn" (click)="showEmojiPicker = !showEmojiPicker"
+            [disabled]="disableTextarea">
+            <!-- <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon> -->
+            <ion-icon slot="icon-only" lazy="true" name="happy-outline" style="font-size: 24px;"></ion-icon>
+          </ion-button>
+
+          <!-- <div class="emojiContainer" [style.height]="showEmojiPicker?'300px':'0px'"> -->
+          <!--Show/Hide emoji picker. Don't use *ngIf because the component will be created again and again and cause performance issue-->
+          <!-- <emoji-picker (onEmojiSelect)="addEmoji($event)"></emoji-picker> -->
+          <!-- { position: 'absolute', bottom: '20px', right: '20px' }" -->
+          <!-- --------------------------------------------------------------------- -->
+          <!-- https://www.npmjs.com/package/@ctrl/ngx-emoji-mart/v/1.0.6 -->
+          <!-- --------------------------------------------------------------------- -->
+          <!-- [style]="{ position: 'absolute', bottom: '53px', right: '-246px' }" -->
+          <emoji-mart [showPreview]="false" [perLine]="emojiPerLine" [style.visibility]="showEmojiPicker?'visible':'hidden'"
+            (emojiSelect)="addEmoji($event)"  [ngClass]="{'emoji-mart-desktop': !IS_ON_MOBILE_DEVICE, 'emoji-mart-mobile': IS_ON_MOBILE_DEVICE }">
+          </emoji-mart>
+          <!-- </div> -->
+
         </div>
       </div>
 
-      <div class="text-message" [ngClass]="{'text-message-no-cr': areVisibleCAR === false}">
+
+
+
+
+      <div class="text-message" [ngClass]="{'text-message-no-cr': areVisibleCAR === false || support_mode === false}">
         <ion-textarea id="ion-textarea" #messageTextArea #message_text_area #textArea rows="1"
           [placeholder]="TEXAREA_PLACEHOLDER" autosize="false" auto-grow="true" autofocus="true" [value]=""
           [(ngModel)]="messageString" (ionChange)="ionChange($event);" [disabled]="disableTextarea"

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

@@ -44,8 +44,12 @@
         position: relative;
         // margin: 0 35px;
         // width: calc(100% - 70px);
-        margin: 0 70px;
-        width: calc(100% - 100px);
+        // ----- new after adding canned open /close canned responses
+        // margin: 0 70px;
+        // width: calc(100% - 100px);
+        // ----- new after adding emoji picker
+        margin: 0 108px;
+        width: calc(100% - 140px);
         ion-textarea {
             // border-radius: 4px;
             border-radius: 20px; // NK edited
@@ -68,8 +72,8 @@
         }
     }
     .text-message-no-cr {
-         margin: 0 35px !important;
-        width: calc(100% - 70px) !important;
+        margin: 0 72px !important;
+        width: calc(100% - 101px) !important;
     }
 }
 
@@ -106,7 +110,6 @@
     height: 33px !important;
 }
 
-
 .canned-responses-btn {
     --padding-bottom: 0px;
     --padding-top: 0px;
@@ -115,7 +118,17 @@
     --padding-start: 2px;
     height: 33px !important;
     width: 33px;
-} 
+}
+
+.emoji-picker-btn {
+    --padding-bottom: 0px;
+    --padding-top: 0px;
+    --border-radius: 50%;
+    --padding-end: 2px;
+    --padding-start: 2px;
+    height: 33px !important;
+    width: 33px;
+}
 
 .no-canned-responses-btn-badge {
     position: absolute;
@@ -129,7 +142,7 @@
     cursor: pointer;
 }
 .no-canned-responses-btn-badge:hover {
-    background-color: rgba(0, 0, 0, 0.05);;
+    background-color: rgba(0, 0, 0, 0.05);
 }
 
 .canned-responses-btn-badge {
@@ -145,10 +158,9 @@
 }
 
 .canned-responses-btn-badge:hover {
-    background-color: rgba(0, 0, 0, 0.05);;
+    background-color: rgba(0, 0, 0, 0.05);
 }
 
-
 .upload-image-btn .button-native {
     border-radius: 50%;
 }
@@ -163,6 +175,17 @@
     pointer-events: none;
 }
 
+.emoji-mart-desktop {
+    position: absolute;
+    bottom: 53px;
+    right: -246px;
+}
+.emoji-mart-mobile {
+    position: absolute;
+    bottom: 50px;
+    right: -123px;
+    width: 230px;
+}
 //   input[placeholder] { text-overflow: ellipsis; }
 // ::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
 // input:-moz-placeholder { text-overflow: ellipsis; }