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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # chat21-ionic ver 3.0
 
+### 3.0.78-rc.2
+- changed: project item UI and tooltip msg
+- changed: conversation UI in conversations list component
+- changed: conversation detail header component
+- added: open/close info-conversation moved from conversation-header to conversation detail component
+- bug-fixed: canned responses opens in incorrect mode
+
 ### 3.0.78-rc.1
 - changed: conversation-list page width increased
 - changed: background changed in info-message component

package/package.json

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

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

@@ -52,8 +52,19 @@
 <!-- ----------------------------------------------------------- -->
 <!--  nk - no tag ionic -->
 <!-- ----------------------------------------------------------- -->
+<div class="manage_conversation_info_container" [ngClass]="{'close': !openInfoConversation, 'mobile': isMobile}">
+  <ion-button fill="clear" *ngIf="openInfoConversation" (click)="onOpenCloseInfoConversationFN()">
+    <ion-icon name="arrow-forward-outline"></ion-icon>
+    {{translationMap.get('LABEL_CLOSE_GROUP')}}
+  </ion-button>
+  <ion-button fill="clear" *ngIf="!openInfoConversation" (click)="onOpenCloseInfoConversationFN()">
+    <ion-icon name="arrow-back-outline"></ion-icon>
+    {{translationMap.get('LABEL_OPEN_INFO_CONVERSATION')}}
+  </ion-button>
+</div>
 
 <div class="conversation-wpr" style="height: 100%;">
+  
   <div *ngFor="let message of messages; let i = index; let first = first; trackBy: trackByFn">
 
     <ng-container *ngIf="first || (messages[i - 1].timestamp | date:'d') !== (message.timestamp | date:'d')">

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

@@ -33,6 +33,51 @@
     }
 }
 
+.manage_conversation_info_container{
+    height: 34px;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    position: fixed;
+    transition: transform 300ms ease-in-out 0s;
+    transform: translate(0px);
+    right: 300px;
+    top: 60px;
+    z-index:10;
+    background: linear-gradient(to right, rgba(226, 232, 239, 0) 128px, rgb(226, 232, 239) 128px);
+    
+    &.close{
+        right: 0px;
+    }
+
+    &.mobile{
+        right: 0px;
+    }
+    &::before{
+        content: "";
+        width: 102px;
+        height: 34px;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMTAyIDM0IiB3aWR0aD0iMTAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMiAwaC0xMDJsLjA3MTQwOC40MTk3NTNjMTEuMzE5MTkyLS4wMTU1NTggMjIuMjg4MTkyIDMuOTIwMzM3IDMxLjAxMjA5MiAxMS4xMjc2NDdsNy40ODk0IDYuNTAyIDEuNjUwOCAxLjQyMjkgNi42OTU1IDUuNzhjNi41Mzc0IDUuNjQwNSAxNC44ODU3IDguNzQ1MSAyMy41MjI3IDguNzQ3N2gzMS41NTQxeiIKICAgICAgICAgIGZpbGw9IiNlMmU4ZWYiLz4KPC9zdmc+);
+        position: relative;
+        left: 50px;
+        z-index: -1;
+    }
+
+    ion-button {
+        text-transform: unset;
+        &:hover {
+            --background-hover: transparent;
+            text-decoration: underline;
+            text-decoration-color: var(--ion-color-primary);
+        }
+    }
+
+    ion-icon{
+        margin: 5px;
+    }
+}
+
+
 ion-item {
     --padding-end: 0px;
     --inner-padding-end: 0px;

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

@@ -1,5 +1,5 @@
 import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
-import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter, SimpleChange, SimpleChanges } from '@angular/core';
 
 
 import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
@@ -24,14 +24,17 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   @Input() channelType: string;
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
+  @Input() isMobile: boolean;
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   @Output() onAddUploadingBubble = new EventEmitter<boolean>();
-
+  @Output() onOpenCloseInfoConversation = new EventEmitter<boolean>();
+  
   public public_Key: any
   public uploadProgress: number = 100
   public fileType: any
   public browserLang: string;
   public addAsCannedResponseTooltipText: string;
+  public openInfoConversation: boolean = true;
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
@@ -66,6 +69,11 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   ngOnInit() {
     this.listenToUploadFileProgress();
     this.setMomentLocaleAndGetTranslation();
+    
+  }
+
+  ngOnChanges(changes: SimpleChanges){
+    this.isMobile? this.openInfoConversation = false: null;
   }
 
 
@@ -136,6 +144,11 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     this.onElementRendered.emit(event)
   }
 
+  onOpenCloseInfoConversationFN(){
+    this.openInfoConversation = !this.openInfoConversation
+    this.onOpenCloseInfoConversation.emit(this.openInfoConversation)
+  }
+
   /**
    * Track by function for ngFor loops
    *

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -94,9 +94,22 @@
   <div class="conv-container">
     <ion-label>
       <div class="conversation_project truncate">
-        <svg xmlns="http://www.w3.org/2000/svg" data-v-78d18411="" width="15" height="15" fill="none" viewBox="0 0 24 24" class="inbox-icon"><path d="M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z" fill="currentColor"/></svg>
-        <span *ngIf="conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.project_name}}</span>
-        <span *ngIf="!conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.projectId}}</span>
+        <!-- DIRECT CONV -->
+        <div *ngIf="conversation.channel_type === TYPE_DIRECT">
+          <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+          <span  class="truncate">{{translationsMap.get('DIRECT_CHAT')}}</span>
+        </div>
+        <!-- GROUP CONV -->
+        <div *ngIf="!conversation.uid.includes(TYPE_SUPPORT_GROUP) &&  conversation.channel_type !== TYPE_DIRECT">
+          <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
+          <span  class="truncate">{{translationsMap.get('GROUP_CHAT')}}</span>
+        </div>
+        <!-- SUPPORT-GROUP CONV -->
+        <div  *ngIf="conversation.uid.includes(TYPE_SUPPORT_GROUP) > 0 ">
+          <svg xmlns="http://www.w3.org/2000/svg" data-v-78d18411="" width="15" height="15" fill="none" viewBox="0 0 24 24" class="inbox-icon"><path d="M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z" fill="currentColor"/></svg>
+          <span *ngIf="conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.project_name}}</span>
+          <span *ngIf="!conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.projectId}}</span>
+        </div>
       </div>
       <div style="display: flex;">
         <span class="conversation_with truncate" [class.not-read]="conversation.is_new">

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.scss

@@ -19,6 +19,8 @@ ion-item {
     --padding-start: 0;
     --inner-padding-end: 0;
     --background-hover: #000000 !important;
+    border-radius: 16px;
+    margin: 4px 5px;
     .conv-container{
         width: 84%;
         height: 100%;
@@ -89,7 +91,8 @@ ion-item {
             font-size: 10px;
             max-width: 90%;
             svg {
-                color:#779bbb;
+                fill:#779bbb;
+                vertical-align: sub;
             }
             span{
                 padding-left: 5px
@@ -246,7 +249,7 @@ ion-item:hover {
 
 .ion-selected {
     --background: rgba(24, 119, 242, 0.04);
-    border-right: 2px solid #1876f2;
+    border-right: 4px solid #1876f2;
 }
 
 .time-in-archived {

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.ts

@@ -1,3 +1,5 @@
+import { TYPE_GROUP, TYPE_SUPPORT_GROUP } from './../../../../chat21-core/utils/constants';
+import { TYPE_DIRECT } from 'src/chat21-core/utils/constants';
 import { Component, EventEmitter, Input, IterableDiffers, KeyValueDiffers, OnInit, Output, SimpleChange } from '@angular/core';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
@@ -14,6 +16,7 @@ import { AppConfigProvider } from 'src/app/services/app-config';
 import { DomSanitizer } from '@angular/platform-browser'
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import { AlertController } from '@ionic/angular';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 // import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 // import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
@@ -35,6 +38,8 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public currentYear: any;
   public browserLang: string;
 
+  public translationsMap: Map<string, string> = new Map()
+
   public PROJECT_FOR_PANEL: any;
   public archive_btn_tooltip: string;
   public resolve_btn_tooltip: string;
@@ -52,6 +57,10 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     'hideDelayAfterClick': 3000,
     'hide-delay': 100
   };
+
+  TYPE_DIRECT = TYPE_DIRECT;
+  TYPE_GROUP = TYPE_GROUP;
+  TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP;
   /**
    * 
    * @param iterableDiffers 
@@ -63,6 +72,7 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     public kvDiffers: KeyValueDiffers,
     public platform: Platform,
     private translate: TranslateService,
+    private translateService: CustomTranslateService,
     private networkService: NetworkService,
     private appConfigProvider: AppConfigProvider,
     private sanitizer: DomSanitizer,
@@ -73,7 +83,6 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     super(iterableDiffers, kvDiffers)
     this.setMomentLocale();
 
-
     // if (this.browserLang) {
 
     //   moment.locale(this.browserLang)
@@ -123,16 +132,11 @@ export class IonListConversationsComponent extends ListConversationsComponent im
       'ALERT_TITLE',
       'ActionNotAllowed',
       'CLOSE_ALERT_CONFIRM_LABEL',
-      'YouAreNoLongerAmongTheTeammatesManagingThisConversation'
+      'YouAreNoLongerAmongTheTeammatesManagingThisConversation',
+      'GROUP_CHAT',
+      'DIRECT_CHAT'
     ]
-    this.translate.get(['Resolve', 'Archive', 'ALERT_TITLE']).subscribe((translations: string) => {
-        this.resolve_btn_tooltip = translations['Resolve'];
-        this.archive_btn_tooltip = translations['Archive'];
-        this.alert_lbl = translations['ALERT_TITLE']
-        this.actionNotAllowed_lbl = translations['ActionNotAllowed']
-        this.ok_lbl = translations['CLOSE_ALERT_CONFIRM_LABEL']
-        this.youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl = translations['YouAreNoLongerAmongTheTeammatesManagingThisConversation']
-    });
+    this.translationsMap = this.translateService.translateLanguage(translationKeys)
   }
 
   setMomentLocale() {

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

@@ -6,46 +6,73 @@
       </ion-back-button>
     </ion-buttons>
 
-    <ion-title [class.info-open]="openInfoConversation || openInfoMessage">
+    <ion-title>
 
-      <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" >
+      <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" [ngClass]="{'mobile': isMobile}">
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
-        <div *ngIf="conversationAvatar" class="avatar-container" (click)="onOpenCloseInfoConversation()" style="cursor: pointer"
+        <div class="avatar-container" style="cursor: pointer"
           [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
           <app-avatar-profile 
             [itemAvatar]=conversationAvatar>
           </app-avatar-profile>
         </div>
-        <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '63px' : ''  }" -->
-        <div *ngIf="isDirect" class="user-presence" [ngClass]="{ 'user-presence-ios': platformName === 'ios' }">
-          <app-user-presence 
-            [idUser]=conversationAvatar.conversation_with 
-            [translationMap]=translationMap
-            [borderColor]=borderColor 
-            [fontColor]=fontColor>
-          </app-user-presence>
-        </div>
+        <div class="info-container">
+
+          <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
+          <!-- (click)="onOpenCloseInfoConversation()" -->
+          <div class="tile-info-with" 
+            [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
+            <span class="tile-username">{{ conversationAvatar.conversation_with_fullname | truncate:50 }} </span>
+            <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
+          </div>
+ 
+          <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '63px' : ''  }" -->
+          <div *ngIf="isDirect" class="user-presence" [ngClass]="{ 'user-presence-ios': platformName === 'ios' }">
+            <app-user-presence 
+              [idUser]=conversationAvatar.conversation_with 
+              [translationMap]=translationsMap
+              [borderColor]=borderColor 
+              [fontColor]=fontColor>
+            </app-user-presence>
+          </div>
+
+          <div class="subtitle-info">
+            <div class="conversation_project">
+              <!-- DIRECT CONV -->
+              <div *ngIf="isDirect">
+                <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                <span  class="truncate">{{translationsMap.get('DIRECT_CHAT')}}</span>
+              </div>
+              <!-- GROUP CONV -->
+              <div *ngIf="!conversationUid?.includes(TYPE_SUPPORT_GROUP) &&  !isDirect">
+                <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
+                <span  class="truncate">{{translationsMap.get('GROUP_CHAT')}}</span>
+              </div>
+              <!-- SUPPORT-GROUP CONV -->
+              <div  *ngIf="conversationUid?.includes(TYPE_SUPPORT_GROUP)">
+                <svg xmlns="http://www.w3.org/2000/svg" data-v-78d18411="" width="15" height="15" fill="none" viewBox="0 0 24 24" class="inbox-icon"><path d="M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z" fill="currentColor"/></svg>
+                <span *ngIf="conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.project_name}}</span>
+                <span *ngIf="!conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.projectId}}</span>
+              </div>
+            </div>
 
-        <div *ngIf="conversationAvatar" class="user-typing">
-          <app-user-typing 
-            [idConversation]=conversationAvatar.uid 
-            [idCurrentUser]=idLoggedUser 
-            [isDirect]=isDirect
-            [translationMap]=translationMap 
-            [color]=fontColor 
-            [membersConversation]=membersConversation>
-          </app-user-typing>
+            <app-user-typing 
+              [idConversation]=conversationAvatar.uid 
+              [idCurrentUser]=idLoggedUser 
+              [isDirect]=isDirect
+              [translationMap]=translationsMap 
+              [color]=fontColor 
+              [membersConversation]=membersConversation>
+            </app-user-typing>
+
+          </div>
         </div>
+        
 
-      </div>
-      <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
-      <!-- (click)="onOpenCloseInfoConversation()" -->
-      <div *ngIf="conversationAvatar" class="tile-info-with" 
-        [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
-        <span class="tile-username">{{ conversationAvatar.conversation_with_fullname | truncate:50 }} </span>
-        <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
+        
 
       </div>
+      
 
       <!-- <div *ngIf="conversationWithFullname" class="tile-info-with" (click)="onOpenCloseInfoConversation()">        
         <span class="tile-username">{{ conversationWithFullname }} </span>
@@ -61,22 +88,19 @@
       </ion-button> -->
 
       <ion-button *ngIf="conversationUid?.startsWith('support-group') && conv_type !== 'archived'" ion-button fill="clear" color="primary" size="small" 
-      (click)="closeConversation()" [ngClass]="{'resolve-conv-margin-right': !isMobile}" [disabled]="conv_closed === true">
+        (click)="closeConversation()" [disabled]="conv_closed === true">
         <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
         <ion-icon name="archive-outline"></ion-icon>
         <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
         <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Resolve' | translate}} </span>
       </ion-button>
 
-      <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
-        <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
-        <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
-        <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
-
-      </ion-button>
-      <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+      <!-- <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+       <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
+      </ion-button> -->
+      <!-- <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
         <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
-      </ion-button>
+      </ion-button> -->
 
     </ion-buttons>
 

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

@@ -27,7 +27,7 @@ ion-header {
         text-align: left;
         padding-inline: unset;
         margin: 0px 10px;
-        height: 40px;
+        // height: 40px;
         width: 100%;
     }
     ion-avatar {
@@ -73,12 +73,9 @@ ion-header {
         // display: inline-block;
         // vertical-align: middle;
         // margin: -6px 0px 0 6px;
-        position: absolute;
-        margin: auto 0;
-        height: 100%;
-        top: 0;
-        left: 50px;
-        vertical-align: middle;
+        // position: absolute;
+        // margin-left: 12px;
+        
         // cursor: pointer;
     }
     .tile-point {
@@ -92,14 +89,12 @@ ion-header {
     }
     .tile-username {
         display: inline-block;
-        font-size: 15px;
-        color: var(--black);
+        font-size: 18px;
         margin: 0;
         padding: 0;
 
-        color: #3c4858;
-        font-family: "Google Sans",sans-serif!important;
-        font-weight: 600;
+        color: #1f2d3d;
+        font-weight: 400; //600;
         -webkit-font-smoothing: antialiased;
         text-rendering: optimizeLegibility;
         -webkit-text-size-adjust: none;
@@ -133,18 +128,25 @@ ion-header {
     }
 }
 
+.avatar-and-typing-wpr{
+    display: flex;
+    &.mobile{
+        margin-left: 25px;
+    }
+}
+
 .avatar-container {
     background-color: #fff;
     color: #fff;
     text-align: center;
     width: 40px;
     height: 40px;
-    position: absolute;
-    top: 0;
+    // position: absolute;
+    // top: 0;
+    // left: 20px;
     border-radius: 50%;
     padding: 0px;
-    transform: translateX(-50%);
-    left: 20px;
+    // transform: translateX(-50%);
 
     border-color: #fff;
     border-style: solid;
@@ -152,6 +154,14 @@ ion-header {
     line-height: 40px;
     display: inline-block;
 }
+
+.info-container{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 12px;
+}
+
 .user-presence {
     position: absolute;
     bottom: 0;
@@ -159,16 +169,38 @@ ion-header {
     left: 30px;
     width: 100px;
 }
-.user-typing {
-    position: absolute;
-    left: 50px;
-    bottom: -3px;
-    padding: 0;
-    margin: 0;
-    height: 16px;
-    width: 140px;
+.subtitle-info {
+    // position: absolute;
+    // left: 50px;
+    // bottom: -3px;
+    // padding: 0;
+    // margin: 0;
+    display: flex;
+    align-items: center;
+    // height: 16px;
+    // width: 140px;
+    font-size: 12px;
+    .conversation_project{
+        display: inline-flex;
+        align-items: center;
+        line-height: 1.2rem;
+        font-weight: 500;
+        color: #779bbb;
+        font-size: 10px;
+        max-width: 90%;
+        margin-right: 5px;
+        svg {
+            fill:#779bbb;
+            vertical-align: sub;
+        }
+        span{
+            padding-left: 5px
+        }
+    }
 }
 
+
+
 .tile-info-with-ios {
     left: 82px !important;
     top: 10px!important;
@@ -182,7 +214,3 @@ ion-header {
     left: 55px;
     top: 10px;
 }
-
-.resolve-conv-margin-right {
-    margin-right: 52px;
-}

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

@@ -22,7 +22,7 @@ import { ModalController } from '@ionic/angular'
 import { EventsService } from 'src/app/services/events-service'
 import { CreateTicketPage } from 'src/app/pages/create-ticket/create-ticket.page'
 import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service'
-import { TYPE_DIRECT } from 'src/chat21-core/utils/constants'
+import { TYPE_DIRECT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants'
 
 @Component({
   selector: 'app-header-conversation-detail',
@@ -34,14 +34,11 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   @Input() idLoggedUser: string
   @Input() conversationUid: string
   @Input() conv_type: string
-  @Input() isOpenInfoConversation: boolean = true
   @Input() isMobile: boolean
-  @Input() translationMap: Map<string, string>
-  @Output() eventOpenCloseInfoConversation = new EventEmitter<boolean>()
+  @Input() translationsMap: Map<string, string>
   conversationWithFullname: string
   openInfoConversation = true
-  openInfoMessage = true
-
+  
   isDirect = false
   isTyping = false
   borderColor = '#ffffff'
@@ -52,6 +49,8 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   IS_ON_IOS_MOBILE_DEVICE: boolean
   private logger: LoggerService = LoggerInstance.getInstance()
 
+  TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP
+
   constructor(
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
@@ -91,8 +90,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) -  conversationAvatar', this.conversationAvatar)
     if (this.conversationAvatar) {
       this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationAvatar.uid)
-    } 
-    this.openInfoConversation = this.isOpenInfoConversation
+    }
   }
 
   // ----------------------------------------------------
@@ -133,18 +131,6 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     });
   }
 
-
-
-  onOpenCloseInfoConversation() {
-    this.openInfoMessage = false
-    this.openInfoConversation = !this.openInfoConversation
-    this.logger.log(
-      '[CONVS-DETAIL][HEADER] - onOpenCloseInfoConversation - openInfoConversation ',
-      this.openInfoConversation,
-    )
-    this.eventOpenCloseInfoConversation.emit(this.openInfoConversation)
-  }
-
   /** */
   pushPage(event) { }
 

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

@@ -51,7 +51,7 @@
 
 
 
-<ion-title [class.info-open]="openInfoConversation || openInfoMessage">
+<ion-title>
 
   <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" >
     <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->