@chat21/chat21-ionic 3.0.78-rc.4 → 3.0.78

package/src/app/components/project-item/project-item.component.html

@@ -1,107 +1,158 @@
 <div class="main-content main-content-project-for-panel">
-
-    <!-- <div class="pinned-project">Pinned project </div> margin-left:4px -->
-    <div *ngIf="project?.id_project?.status !== 0" class="flex-container-project-for-panel project-row">
-      <div class="flex-child-left" [tooltip]="conversationsInQueueOnProjectName" [options]="tooltipOptions" placement="top"
-        content-type="template" (click)="openUnservedConvs()">
-        <div class="unassigned-notifications-icon-wpr">
-          <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon">
-            <g class="style-scope yt-icon">
-              <path
-                d="M10,20h4c0,1.1-0.9,2-2,2S10,21.1,10,20z M20,17.35V19H4v-1.65l2-1.88v-5.15c0-2.92,1.56-5.22,4-5.98V3.96 c0-1.42,1.49-2.5,2.99-1.76C13.64,2.52,14,3.23,14,3.96l0,0.39c2.44,0.75,4,3.06,4,5.98v5.15L20,17.35z M19,17.77l-2-1.88v-5.47 c0-2.47-1.19-4.36-3.13-5.1c-1.26-0.53-2.64-0.5-3.84,0.03C8.15,6.11,7,7.99,7,10.42v5.47l-2,1.88V18h14V17.77z"
-                class="style-scope yt-icon"></path>
-            </g>
-          </svg>
-        </div>
-        <div class="unassigned-notifications-badge" *ngIf="unservedRequestCount > 0">
-          <!-- || currentUserRequestCount > 0  -->
-          <!-- <span *ngIf="unservedRequestCount > 0 "> -->
-          <!-- + currentUserRequestCount -->
-          <span class="notification-count">{{ unservedRequestCount }}</span>
-        </div>
-      </div>
-
-
-      <div class="flex-child-right">
-        <div class="project-name-project-for-panel" [tooltip]="conversationsInQueueOnProjectName"
-          [options]="tooltipOptions" placement="top" content-type="template" (click)="openUnservedConvs()">
-          <div class="project---name"> <a>{{ project?.id_project?.name }}</a> </div>
-        </div>
-        
-        <!-- <div class="availabily-and-busy-wpr">
-          <div class="availabily---wpr" tooltip="{{avaialble_status_for_tooltip}}" [options]="tooltipOptions">
-            <div class="onoffswitch"
-              (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
-              <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
-                id="switchavailableunavailablestatus" tabindex="0" [checked]="project?.ws_projct_user_available">
-              <label class="onoffswitch-label" for="switchavailableunavailablestatus"></label>
+  <div class="container-fluid container-project-for-panel">
+
+    <div class="left-sidebar">
+
+      <!-- <loading-spinner *ngIf="showSpinner"></loading-spinner> -->
+      <!-- *ngIf="!showSpinner" -->
+      <div class="left-sidebar-project" style="margin-right: -10px;">
+
+        <div class="small-projects-sidebar">
+          <!-- <div class="pinned-project">Pinned project </div> margin-left:4px -->
+          <div *ngIf="project?.id_project?.status !== 0" class="flex-container-project-for-panel project-row">
+            <div class="flex-child-left" [tooltip]="conversationsInQueue" [options]="tooltipOptions" placement="top"
+              content-type="template" (click)="openUnservedConvs()">
+              <div class="unassigned-notifications-icon-wpr">
+                <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false"
+                  class="style-scope yt-icon"
+                  style="pointer-events: none; width: 37px; height:auto; fill: rgb(107,107,107);margin-top: 9px;">
+                  <g class="style-scope yt-icon">
+                    <path
+                      d="M10,20h4c0,1.1-0.9,2-2,2S10,21.1,10,20z M20,17.35V19H4v-1.65l2-1.88v-5.15c0-2.92,1.56-5.22,4-5.98V3.96 c0-1.42,1.49-2.5,2.99-1.76C13.64,2.52,14,3.23,14,3.96l0,0.39c2.44,0.75,4,3.06,4,5.98v5.15L20,17.35z M19,17.77l-2-1.88v-5.47 c0-2.47-1.19-4.36-3.13-5.1c-1.26-0.53-2.64-0.5-3.84,0.03C8.15,6.11,7,7.99,7,10.42v5.47l-2,1.88V18h14V17.77z"
+                      class="style-scope yt-icon"></path>
+                  </g>
+                </svg>
+              </div>
+              <div class="unassigned-notifications-badge" *ngIf="unservedRequestCount > 0">
+                <!-- || currentUserRequestCount > 0  -->
+                <!-- <span *ngIf="unservedRequestCount > 0 "> -->
+                <!-- + currentUserRequestCount -->
+                <span class="notification-count">{{ unservedRequestCount }}</span>
+              </div>
             </div>
-          </div>
 
+            <ng-template #conversationsInQueue>
+              <span *ngIf="unservedRequestCount > 1">
+                {{ unservedRequestCount }}
+                {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}
+              </span>
+              <span *ngIf="unservedRequestCount === 1">
+                {{ unservedRequestCount }}
+                {{translationMap?.get('CONVERSATION_IN_QUEUE') }}
+              </span>
+              <span *ngIf="unservedRequestCount === 0">
+                {{translationMap?.get('NO_CONVERSATION_IN_QUEUE') }}
+
+              </span>
+            </ng-template>
+
+
+            <div class="flex-child-right">
+              <div class="project-name-project-for-panel" [ngClass]="{'project-name-project-for-panel-on-desktop': IS_ON_MOBILE_DEVICE === false}" [tooltip]="conversationsInQueueOnProjectName"
+                [options]="tooltipOptions" placement="top" content-type="template" (click)="openUnservedConvs()">
+                <div class="project---name"> {{ project?.id_project?.name }} </div>
+              </div>
+              <ng-template #conversationsInQueueOnProjectName>
+                <span *ngIf="unservedRequestCount > 1">
+                  {{ unservedRequestCount }}
+                  {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}
+                </span>
+                <span *ngIf="unservedRequestCount === 1">
+                  {{ unservedRequestCount }}
+                  {{translationMap?.get('CONVERSATION_IN_QUEUE') }}
+                </span>
+                <span *ngIf="unservedRequestCount === 0">
+                  {{translationMap?.get('NO_CONVERSATION_IN_QUEUE') }}
+                </span>
+              </ng-template>
+
+              <!-- <div class="availabily-and-busy-wpr">
+                <div class="availabily---wpr" tooltip="{{avaialble_status_for_tooltip}}" [options]="tooltipOptions">
+                  <div class="onoffswitch"
+                    (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
+                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
+                      id="switchavailableunavailablestatus" tabindex="0" [checked]="project?.ws_projct_user_available">
+                    <label class="onoffswitch-label" for="switchavailableunavailablestatus"></label>
+                  </div>
+                </div>
+
+
+                <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
+                <span *ngIf="project?.ws_projct_user_available === true" class="availibility-status-text"
+                  [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
+                  {{translationMap?.get('LABEL_AVAILABLE') }}
+                </span>
+                <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
+                <span *ngIf="project?.ws_projct_user_available === false" class="availibility-status-text"
+                  [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
+                  {{translationMap?.get('LABEL_NOT_AVAILABLE')}}
+                </span>
+
+                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="{{translationMap?.get('LABEL_BUSY')}}"
+                [options]="tooltipOptions" placement="top" >
+                  <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="16px"
+                    viewBox="0 0 24 24" width="16px" fill="#FEB92C">
+                    <g><path d="M0,0h24v24H0V0z" fill="none" /></g>
+                    <g><path d="M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M15.29,16.71L11,12.41V7h2v4.59 l3.71,3.71L15.29,16.71z" /></g>
+                  </svg>
+                </div>
+              </div>
+            </div> -->
+
+            <div *ngIf="IS_ON_MOBILE_DEVICE === true" class="flex-child-view-all-convs">
+              <div class="view-all-convs-icon-wpr" style="cursor: pointer;" [tooltip]="viewAllConvs"
+                [options]="tooltipOptions" placement="top" content-type="template">
+
+                <ion-button ion-button fill="clear" class="open-unserved-convs-btn"
+                  (click)="openUnservedConvsAndGoToProjectList()">
+
+                  <span class="push-icon-and-list-wpr">
+                    <!--   <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
+                      style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;">
+                      <style type="text/css">
+                        .st0 {
+                          fill: #3880ff;
+                        }
+                      </style>
+                      <path class="st0"
+                        d="M22.8,15v-2c-1.7,0-3-1.3-3-3V5h1c0.5,0,1-0.5,1-1s-0.5-1-1-1h-10c-0.5,0-1,0.5-1,1s0.5,1,1,1h1v5
+                 c0,1.7-1.3,3-3,3v2h6v5c0.6,0,1.4,0,2,0v-5H22.8z M12.8,13c0.7-0.9,1-1.9,1-3V5h4v5c0,1.1,0.4,2.2,1,3H12.8z" />
+                      <rect x="1.2" y="13" class="st0" width="6.3" height="2" />
+                      <rect x="1.2" y="18" class="st0" width="12.1" height="2" />
+                      <rect x="1.2" y="7.6" class="st0" width="9.2" height="2" />
+                    </svg> -->
+
+                    <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
+                      style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 16px;">
+                      <style type="text/css">
+                        .st0 {
+                          fill: #165CEE;
+                        }
+                      </style>
+                      <path class="st0" d="M20.6,16.3v-2.4c-2.1,0-3.7-1.6-3.7-3.7V4h1.2c0.6,0,1.2-0.6,1.2-1.2s-0.6-1.2-1.2-1.2H5.9
+	c-0.6,0-1.2,0.6-1.2,1.2S5.3,4,5.9,4h1.2v6.1c0,2.1-1.6,3.7-3.7,3.7v2.4h7.3v6.1c0.7,0,1.7,0,2.4,0v-6.1H20.6z M8.3,13.8
+	c0.9-1.1,1.2-2.3,1.2-3.7V4h4.9v6.1c0,1.3,0.5,2.7,1.2,3.7H8.3z" />
+                    </svg>
+                  </span>
+
+
+
+                </ion-button>
+              </div>
+              <ng-template #viewAllConvs>
+                <span>
+                  {{translationMap?.get('CHANGE_PINNED_PROJECT') }}</span>
+              </ng-template>
+            </div>
 
-          <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
-          <span *ngIf="project?.ws_projct_user_available === true" class="availibility-status-text"
-            [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
-            {{translationMap?.get('LABEL_AVAILABLE') }}
-          </span>
-          <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
-          <span *ngIf="project?.ws_projct_user_available === false" class="availibility-status-text"
-            [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
-            {{translationMap?.get('LABEL_NOT_AVAILABLE')}}
-          </span>
-
-          <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="{{translationMap?.get('LABEL_BUSY')}}"
-          [options]="tooltipOptions" placement="top" >
-            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="16px"
-              viewBox="0 0 24 24" width="16px" fill="#FEB92C">
-              <g><path d="M0,0h24v24H0V0z" fill="none" /></g>
-              <g><path d="M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M15.29,16.71L11,12.41V7h2v4.59 l3.71,3.71L15.29,16.71z" /></g>
-            </svg>
           </div>
         </div>
-      </div> -->
-
-      <!-- <div *ngIf="IS_ON_MOBILE_DEVICE === true" class="flex-child-view-all-convs">
-        <div class="view-all-convs-icon-wpr" style="cursor: pointer;" [tooltip]="viewAllConvs"
-          [options]="tooltipOptions" placement="top" content-type="template">
 
-          <ion-button ion-button fill="clear" class="open-unserved-convs-btn"
-            (click)="openUnservedConvsAndGoToProjectList()">
-
-            <span class="push-icon-and-list-wpr">
-              <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
-                style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 16px;">
-                <style type="text/css">
-                  .st0 {
-                    fill: #165CEE;
-                  }
-                </style>
-                <path class="st0" d="M20.6,16.3v-2.4c-2.1,0-3.7-1.6-3.7-3.7V4h1.2c0.6,0,1.2-0.6,1.2-1.2s-0.6-1.2-1.2-1.2H5.9
-c-0.6,0-1.2,0.6-1.2,1.2S5.3,4,5.9,4h1.2v6.1c0,2.1-1.6,3.7-3.7,3.7v2.4h7.3v6.1c0.7,0,1.7,0,2.4,0v-6.1H20.6z M8.3,13.8
-c0.9-1.1,1.2-2.3,1.2-3.7V4h4.9v6.1c0,1.3,0.5,2.7,1.2,3.7H8.3z" />
-              </svg>
-            </span>
-
-
-
-          </ion-button>
-        </div>
-        <ng-template #viewAllConvs>
-          <span>
-            {{translationMap?.get('CHANGE_PINNED_PROJECT') }}</span>
-        </ng-template>
-      </div> -->
+        <!-- </div> -->
 
+      </div>
     </div>
-
-
-</div>
-
-
-<ng-template #conversationsInQueueOnProjectName>
-  <span>
-    ({{ unservedRequestCount }})
-    {{translationMap?.get('UnassignedConversations') }}
-  </span>
-</ng-template>
+  </div>
+</div>

package/src/app/components/project-item/project-item.component.scss

@@ -4,10 +4,13 @@
     padding-top: 0px;
     margin-top: 0px !important;
     padding-bottom: 0px !important;
+    // background: #fff;
     padding-left: 0px;
     width: 100%;
-    // min-height: 64px;
-    // height: 64px;
+    // min-height: 70px;
+    // height: 70px;
+    min-height: 64px;
+    height: 64px;
     position: relative;
     // top: -5px; //nk x AS
 }
@@ -212,10 +215,14 @@
     }
 }
 
+.container-project-for-panel {
+    padding: 0px !important;
+    width: 296px;
+}
+
 .flex-container-project-for-panel {
     display: flex;
-    // width: 100%;
-    // height: 64px;
+    width: 100%;
     justify-content: center;
     align-items: center;
     // position: relative;
@@ -224,18 +231,17 @@
     -o-transition: all 0.2s ease-in;
     -webkit-transition: all 0.2s ease-in;
     transition: all 0.2s ease-in;
-    margin: 6px;
-    // background-color: rgba(24, 119, 242, 0.1);
-    border-radius: 5px;
+    height: 64px;
 }
 
-.flex-container-project-for-panel:hover {
-    background-color:  rgba(24, 119, 242, 0.2);
+.flex-container:hover {
+    background-color: rgba(200, 200, 200, 0.2);
 }
 
 .flex-child-right {
     flex: 1;
-    // padding: 18px 0px;
+    padding: 18px 0px;
+    // height: 100%;
 }
 
 
@@ -243,7 +249,7 @@
     // flex: 0 0 20%;
     width: 60px;
     text-align: center;
-    // padding: 18px 0px;
+    padding: 18px 0px;
     height: 100%;
 }
 // border: 2px solid yellow;
@@ -309,15 +315,16 @@
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     font-family: Helvetica, Helvetica, Arial, sans-serif;
-    font-size: 16px; //14px;
+    font-size: 14px;
     position: relative;
+    top: -1px;
     cursor: pointer;
-    a {
-        color: #779bbb
-    }
 }
 
 
+.project-name-project-for-panel-on-desktop {
+    width: 217px
+}
 
 // .project-name-project-for-panel:hover span {
 //     color: rgba(0, 0, 0, 0.35);
@@ -330,8 +337,7 @@
     
 }
 .project---name:hover {
-    color: rgb(100, 131, 158);
-    // font-weight: 600;
+    color: rgba(0, 0, 0, 0.35);
 }
 
 .view-all-convs-icon:hover {
@@ -446,21 +452,13 @@
     // top: 3px;
 
     position: relative;
-    // top: -8px;
+    top: -8px;
     background: transparent;
     border-radius: 50%;
-    width: 40px; //50px;
+    width: 50px;
     left: 10px;
-    height: 40px; //50px;
+    height: 50px;
     cursor: pointer;
-
-    svg {
-        pointer-events: none;
-        width: 30px;
-        height: auto;
-        fill: #779bbb; //rgb(107,107,107);
-        margin-top: 7px;
-    }
 }
 .unassigned-notifications-icon-wpr:hover {
     background-color: rgba(0, 0, 0, 0.05);
@@ -469,28 +467,23 @@
 .unassigned-notifications-badge {
     position: absolute;
     // top: 12px;
-    top: 6px;//14px;
+    top: 14px;
     border-radius: 50%;
     background: #e41e3f;
     // width: 24px;
     // height: 24px;
-    width: 20px; //22px;
-    height: 20px; //22px;
+    width: 22px;
+    height: 22px;
     color: #fff;
    
-    left: 40px; //33px;
+    left: 34px;
     border: 1px solid #fff;
-
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    align-items: center;
 }
 .notification-count {
-    font-size: 10px; //12px;
+    font-size: 12px;
     font-weight: 500;
     position: relative;
-    // top: -1px;
+    top: -1px;
     text-align: center;
 }
 

package/src/app/components/project-item/project-item.component.ts

@@ -132,10 +132,9 @@ export class ProjectItemComponent implements OnInit {
       'LABEL_NOT_AVAILABLE',
       'LABEL_BUSY',
       'VIEW_ALL_CONVERSATIONS',
-      'UnassignedConversations',
-      // 'CONVERSATIONS_IN_QUEUE',
-      // 'CONVERSATION_IN_QUEUE',
-      // 'NO_CONVERSATION_IN_QUEUE',
+      'CONVERSATIONS_IN_QUEUE',
+      'CONVERSATION_IN_QUEUE',
+      'NO_CONVERSATION_IN_QUEUE',
       'PINNED_PROJECT',
       'CHANGE_PINNED_PROJECT',
       "CHANGE_TO_YOUR_STATUS_TO_AVAILABLE",
@@ -312,7 +311,6 @@ export class ProjectItemComponent implements OnInit {
           }
         });
         //not sound if unservedRequest is already chached and web-sk is closed and restart again
-        // this.logger.log('updateUnservedRequestCount::: count , unservedRequestCount ', count , this.unservedRequestCount)
         if(count > this.unservedRequestCount ){  
           this.events.publish('unservedRequest:count', count)
         }

package/src/app/components/utils/user-presence/user-presence.component.html

@@ -1,2 +1,2 @@
 <div class="status-icon" [class.online]="online" [style.border-color]="borderColor"></div>
-<!-- <div class="online-point" [style.color]="fontColor">{{status}}</div> -->
+<div class="online-point" [style.color]="fontColor">{{status}}</div>

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

@@ -37,8 +37,10 @@
     [idLoggedUser]="loggedUser.uid"
     [conversationUid]="conversationWith"
     [conversationAvatar]="conversationAvatar" 
-    [translationsMap]="translationsHeaderMap"
-    [conv_type]="conv_type">
+    [translationMap]="translationMap"
+    [isOpenInfoConversation]="isOpenInfoConversation" 
+    [conv_type]="conv_type"
+    (eventOpenCloseInfoConversation)="returnOpenCloseInfoConversation($event)">
   </app-header-conversation-detail>
 
   <ion-content id="conv-details">
@@ -96,15 +98,10 @@
             </ng-template>
 
             <ng-template #content_messages>
-              <ion-content #ionContentChatArea appScrollbarTheme class="ionContentChatArea" 
-                (drop)="drop($event)"
-                (dragover)="allowDrop($event)" 
-                (dragleave)="drag($event)" 
-                [scrollEvents]="true"
-                (ionScrollStart)="logScrollStart($event)" 
-                (ionScroll)="logScrolling($event)"
-                (ionScrollEnd)="logScrollEnd($event)" 
-                [class.active]="showIonContent">
+              <ion-content #ionContentChatArea appScrollbarTheme class="ionContentChatArea" (drop)="drop($event)"
+                (dragover)="allowDrop($event)" (dragleave)="drag($event)" [scrollEvents]="true"
+                (ionScrollStart)="logScrollStart($event)" (ionScroll)="logScrolling($event)"
+                (ionScrollEnd)="logScrollEnd($event)" [class.active]="showIonContent">
 
                 <!-- ----------------------------------------------------------- -->
                 <!-- DROPZONE -->
@@ -128,12 +125,7 @@
                   [senderId]="loggedUser.uid"
                   [baseLocation]="window?.location?.origin"
                   [areVisibleCAR]="areVisibleCAR" 
-                  [supportMode]= "supportMode"
-                  [isMobile]="isMobile"
-                  [isTypings]="isTypings"
-                  [idUserTypingNow]="idUserTypingNow"
-                  [nameUserTypingNow]="nameUserTypingNow" 
-                  [translationMap]="translationsContentMap"
+                  [supportMode]= "supportMode" 
                   [stylesMap]="styleMap"
                   (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                   (onAfterMessageRender)="onAfterMessageRenderFN($event)"
@@ -141,8 +133,7 @@
                   (onScrollContent)="returnOnScrollContent($event)" 
                   (onMenuOptionShow)="returnOnMenuOption($event)"
                   (onElementRendered)="onElementRenderedFN($event)"
-                  (onAddUploadingBubble)="addUploadingBubbleEvent($event)"
-                  (onOpenCloseInfoConversation)="onOpenCloseInfoConversation($event)">
+                  (onAddUploadingBubble)="addUploadingBubbleEvent($event)">
                 </ion-conversation-detail>
 
               </ion-content>
@@ -164,8 +155,7 @@
               [conversationWith]="conversationWith"
               [conversationWithFullname]="conversationWithFullname"
               [currentString]="messageStr"
-              [stylesMap]="styleMap"
-              [translationMap]="translationsMap"
+              [translationMap]="translationMap"
               (onLoadedCannedResponses)="onLoadedCannedResponses($event)"
               (onClickCanned)="replaceTagInMessage($event)"
               (onClickAddCannedResponse)="presentCreateCannedResponseModal()">
@@ -221,9 +211,9 @@
               [loggedUser]="loggedUser" 
               [conversationWith]="conversationWith" 
               [tagsCannedFilter]="tagsCannedFilter"
-              [translationMap]="translationsMap"
+              [translationMap]="translationMap"
               [fileUploadAccept]="appConfigProvider.getConfig().fileUploadAccept"
-              [isOpenInfoConversation]="openInfoConversation" 
+              [isOpenInfoConversation]="isOpenInfoConversation" 
               [dropEvent]="dropEvent"
               [disableTextarea]="disableTextarea"
               (eventChangeTextArea)="returnChangeTextArea($event)"
@@ -240,7 +230,7 @@
         [ngClass]="{'info-convs-apps-sidebar-wide': appsidebarIsWide === true}">
           <app-info-content 
             [openInfoConversation]="openInfoConversation" 
-            [translationMap]="translationsMap"
+            [translationMap]="translationMap"
             [loggedUser]="loggedUser" 
             [tenant]="tenant" 
             [groupDetail]="groupDetail">

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

@@ -25,6 +25,8 @@
     font-size: 24px;
 }
 
+
+
 #canned > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > span {
     color: #1877f2;
 }
@@ -324,7 +326,7 @@ ion-content {
         position: absolute;
         bottom: 0;
         width: calc(100% - 0px);
-        // border-top: 1px solid #e2e2e2;
+        border-top: 1px solid #e2e2e2;
     }
 
     #chatArea {