@chat21/chat21-ionic 3.0.64-rc1 → 3.0.65-rc2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # chat21-ionic ver 3.0
 
+
+### 3.0.65-rc2 - LATEST
+- changed: behaviour of is_new of a conversation (not update 'is_new' conversation property if conv is the selected one or if sender is me)
+
+### 3.0.65-rc1 - LATEST
+- added: improves chat performance by caching conversations
+- added: Displays balloon messages with a light orange background for "internal notes" type message
+- added: the html component
+- bug-fixed: if archive conversation and do a refresh, url not change from active to archived
+- bug-fixed: truncate sender_fullname in conversation-list and conversation-detail header components
+- bug-fixed: on conversation removed, update local conversations on storage	
+
+### 3.0.64 IN PROD
+- Fixes the bug: in the conversation list, for the direct convesations, the name of the requester changes according to the order of arrival of the conversations
+
 ### 3.0.64-rc1
 - Fixes the bug: in the conversation list, for the direct convesations, the name of the requester changes according to the order of arrival of the conversations
 - Displays balloon messages with a light orange background for "internal notes" type message

package/deploy_amazon_beta.sh

@@ -0,0 +1,29 @@
+#npm version prerelease --preid=beta
+version=`node -e 'console.log(require("./package.json").version)'`
+echo "version $version"
+
+URL_VER=${version//[.]//}
+echo 'URL_VER: ---->'$URL_VER
+
+sed -i -e "s/$URL_VER/g" src/utils/constants.ts
+
+# ng build --prod --base-href /$NEW_BUILD/
+#ionic cordova build browser --prod
+
+ionic cordova platform add browser --save
+#ionic cordova build browser --prod --release
+ionic cordova build --env=pre browser #--prod  --verbose
+
+cp -p src/firebase-messaging-sw.js platforms/browser/www/
+cp -p src/manifest.json platforms/browser/www/
+cp -p src/chat-config.json platforms/browser/www/
+
+cd platforms/browser/www
+aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5/$version/
+aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5/
+cd ../../../
+
+#aws cloudfront create-invalidation --distribution-id E13L8CUUKUWAJF --paths "/*"
+
+echo new version deployed on s3://tiledesk-dashboard-pre/chat-ionic5/$version/
+echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5/$version/index.html

package/deploy_amazon_prod.sh

@@ -0,0 +1,26 @@
+# npm version patch
+version=`node -e 'console.log(require("./package.json").version)'`
+echo "version $version"
+
+URL_VER=${version//[.]//}
+echo 'URL_VER: ---->'$URL_VER
+
+# sed -i -e "s/$start$ver.$build/$start$NEW_VER.$NEW_BUILD/g" src/utils/constants.ts
+sed -i -e "s/$URL_VER/g" src/utils/constants.ts
+ionic cordova platform add browser --save
+#ionic cordova build --env=prod browser  -- --base-href /www/ --prod
+ionic cordova build --env=prod browser --prod 
+cp -p src/firebase-messaging-sw.js platforms/browser/www/
+cp -p src/manifest.json platforms/browser/www/
+cp -p src/chat-config.json platforms/browser/www/
+
+cd platforms/browser/www
+# aws s3 sync . s3://tiledesk-console/v2/chat/
+# aws s3 sync . s3://tiledesk-console/v2/chat/$version/
+aws s3 sync . s3://tiledesk-console/v2/chat/latest/
+cd ../../../
+# aws cloudfront create-invalidation --distribution-id E36UIP90GOSFPM --paths "/*"
+
+# echo new version deployed on s3://tiledesk-dashboard/chat/$NEW_BUILD/
+echo new version deployed on s3://tiledesk-console/v2/chat-ionic5/$version/
+echo available on https://console.tiledesk.com/v2/chat-ionic5/$version/index.html

package/deploy_pre.sh

@@ -27,57 +27,18 @@ sed -i -e "s/$URL_VER/g" src/utils/constants.ts
 
 ionic cordova platform add browser --save
 #ionic cordova build browser --prod --release
-# ionic cordova build --env=pre browser --prod  #--verbose
-ionic cordova build -c=pre  browser --prod
+ionic cordova build --env=pre browser #--prod  --verbose
+
 cp -p src/firebase-messaging-sw.js platforms/browser/www/
 cp -p src/manifest.json platforms/browser/www/
 cp -p src/chat-config.json platforms/browser/www/
-# cp -p config.xml platforms/browser/www/
- 
-######### chat-ionic5 - the good one - publish in pre
+
 cd platforms/browser/www
 aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5/$version/
 aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5/
 cd ../../../
 
-aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
+#aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
 
 echo new version deployed on s3://tiledesk-dashboard-pre/chat-ionic5/$version/
-echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5/$version/index.html
-echo available on https://support-pre.tiledesk.com/chat-ionic5/$version/index.html
-echo available on https://support-pre.tiledesk.com/chat-ionic5/index.html
-
-######### chat-ionic5-panel - publish in pre with the projects right panel 
-# cd platforms/browser/www
-# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-panel/$version/
-# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-panel/
-# cd ../../../
-
-# aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
-
-# echo new version deployed on s3://tiledesk-dashboard-pre/chat-ionic5-panel/$version/
-# echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5-panel/$version/index.html
-# echo available on https://support-pre.tiledesk.com/chat-ionic5-panel/$version/index.html
-# echo available on https://support-pre.tiledesk.com/chat-ionic5-panel/index.html
-
-
-####### chat ionic MQTT in pre da aggiungere in deploy_pre.sh
-# cd platforms/browser/www
-# aws s3 sync . s3://tiledesk-dashboard-pre/native-mqtt/chat-ionic5/
-# aws s3 sync . s3://tiledesk-dashboard-pre/native-mqtt/chat-ionic5/$version
-# cd ../../../
-# echo new version deployed on s3://tiledesk-dashboard-pre/native-mqtt/chat-ionic5/
-# echo new version deployed on s3://tiledesk-dashboard-pre/native-mqtt/chat-ionic5/$version
-# echo http://tiledesk-dashboard-pre.s3-eu-west-1.amazonaws.com/native-mqtt/chat-ionic5/index.html
-# echo http://tiledesk-dashboard-pre.s3-eu-west-1.amazonaws.com/native-mqtt/chat-ionic5/$version/index.html
-
-
-####### chat ionic FIREBASE in pre da aggiungere in deploy_pre.sh
-# cd platforms/browser/www
-# aws s3 sync . s3://tiledesk-dashboard-pre/chat5/
-# aws s3 sync . s3://tiledesk-dashboard-pre/chat5/$version
-# cd ../../../
-# echo new version deployed on s3://tiledesk-dashboard-pre/chat5/$version
-# echo new version deployed on s3://tiledesk-dashboard-pre/chat5/
-# echo available on http://support-pre.tiledesk.com/chat5/index.html
-# echo available on http://support-pre.tiledesk.com/chat5/$version/index.html
+echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5/$version/index.html

package/deploy_prod.sh

@@ -5,58 +5,10 @@ echo "version $version"
 URL_VER=${version//[.]//}
 echo 'URL_VER: ---->'$URL_VER
 
-# if [ "$version" != "" ]; then
-#     git tag -a "$version" -m "`git log -1 --format=%s`"
-#     echo "Created a new tag, $version"
-#     git push --tags
-#     npm publish
-# fi
+if [ "$version" != "" ]; then
+    git tag -a "$version" -m "`git log -1 --format=%s`"
+    echo "Created a new tag, $version"
+    git push remoteTiledesk--tags
+    npm publish
+fi
 
-sed -i -e "s/$URL_VER/g" src/utils/constants.ts
-
-ionic cordova platform add browser --save
-#ionic cordova build --env=prod browser  -- --base-href /www/ --prod
-ionic cordova build --env=prod browser --prod 
-cp -p src/firebase-messaging-sw.js platforms/browser/www/
-cp -p src/manifest.json platforms/browser/www/
-cp -p src/chat-config.json platforms/browser/www/
-cp -p config.xml platforms/browser/www/
-
-
-###### CHAT in prod
-cd platforms/browser/www
-aws s3 sync . s3://tiledesk-console/v2/chat/
-aws s3 sync . s3://tiledesk-console/v2/chat/$version/
-echo new version deployed on s3://tiledesk-console/v2/chat/$version/
-echo available on https://console.tiledesk.com/v2/chat/$version/index.html
-echo available on https://console.tiledesk.com/v2/chat/index.html
-
-
-###### CHAT in prod under latest
-# cd platforms/browser/www
-# aws s3 sync . s3://tiledesk-console/v2/chat/latest
-# echo available on https://console.tiledesk.com/v2/chat/latest/index.html
-
-###### CHAT-IONIC5
-# cd platforms/browser/www
-# #aws s3 sync . s3://tiledesk-dashboard/chat/
-# aws s3 sync . s3://tiledesk-console/v2/chat-ionic5/
-# aws s3 sync . s3://tiledesk-console/v2/chat-ionic5/$version/
-# cd ../../../
-# # aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
-
-# # echo new version deployed on s3://tiledesk-dashboard/chat/$NEW_BUILD/
-# echo new version deployed on s3://tiledesk-console/v2/chat-ionic5/$version/
-# echo available on https://console.tiledesk.com/v2/chat-ionic5/$version/index.html
-
-
-
-####### chat ionic FIREBASE in PROD IN SUBFOLDER 
-# cd platforms/browser/www
-# aws s3 sync . s3://tiledesk-console/v2/chat5-dev/
-# aws s3 sync . s3://tiledesk-console/v2/chat5-dev/$version
-# cd ../../../
-# echo new version deployed on s3://console.tiledesk.com/v2/chat5-dev/$version
-# echo new version deployed on s3://console.tiledesk.com/v2/chat5-dev/
-# echo available on http://console.tiledesk.com/v2/chat5-dev/index.html
-# echo available on http://console.tiledesk.com/v2/chat5-dev/$version/index.html

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.64-rc1",
+    "version": "3.0.65-rc2",
     "license": "AGPL-3.0",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/publiccode.yml

@@ -0,0 +1,110 @@
+# This repository adheres to the publiccode.yml standard by including this 
+# metadata file that makes public software easily discoverable.
+# More info at https://github.com/italia/publiccode.yml
+
+publiccodeYmlVersion: '0.2'
+categories:
+  - customer-service-and-support
+  - communications
+  - marketing
+  - mobile-marketing
+description:
+  it:
+    apiDocumentation: 'https://developer.tiledesk.com/apis/rest-api'
+    documentation: 'https://gethelp.tiledesk.com'
+    features:
+      - live chat widget
+      - chatbot
+      - 'integration with DialogFlow, Rasa and all major AI solutions'
+      - ticketing
+      - multi-project management
+      - SLAs setting
+      - 'smart assignment of the queues '
+      - seamless conversation
+      - dashboard
+      - knowledge base
+      - mobile apps
+    genericName: Live chat with integrated chatbots
+    longDescription: |
+      To have fully satisfied customers is complex. Conversation’s actors
+      (chatbots and humans) should handoff to each other many times during a
+      chat to address customers needs. 
+
+
+      Tiledesk provides a solution **orchestrating instant, asynchronous and
+      multichannel communication among all stakeholders of a typical
+      conversational architecture**: chatbots, support operators, end users,
+      colleagues, applications, etc.  
+
+
+      **Main Features**: 
+
+
+      - Live Chat Widget with full multichannel experience on Web and Mobile; 
+
+      - Resolution Bot to automate customer support; 
+
+      - Easy Integration with all major AI-platforms, cloud and Open source,
+      from DialogFlow to RASA; 
+
+      - Ticketing Management system fully integrated into the platform and
+      instant conversation flow; 
+
+      - Team Organization with multi-project management, SLAs setting, smart
+      assignment of the 
+       queues, departments organization and much more; 
+      - Seamless conversation to “jump” between different channels in a
+      transparent way for end 
+       customers and agents; 
+      - Chat Tools like typing indicator, off-line access, delivery receipts,
+      contact list and much more; 
+
+      - Dashboard with real time analytics; 
+
+      - Knowledge base.
+
+           
+
+      Tiledesk is an **open source **project, made with passion in Salento
+      (Southern Italy).
+    shortDescription: |-
+      Tiledesk delivers scalable customer service to your mobile apps and your
+      website. It is a conversational platform that connects chatbots and
+      humans 
+developmentStatus: stable
+it:
+  conforme:
+    gdpr: false
+    lineeGuidaDesign: false
+    misureMinimeSicurezza: false
+    modelloInteroperabilita: false
+  countryExtensionVersion: '0.2'
+  piattaforme:
+    anpr: false
+    cie: false
+    pagopa: false
+    spid: false
+landingURL: 'https://tiledesk.com/install'
+legal:
+  license: AGPL-3.0-only
+localisation:
+  availableLanguages:
+    - it
+    - en
+    - es
+    - fr
+    - pt
+    - de
+    - ru
+    - tr
+  localisationReady: true
+maintenance:
+  contacts:
+    - name: Andrea Sponziello
+  type: internal
+name: Tiledesk
+platforms:
+  - web
+releaseDate: '2022-06-15'
+softwareType: standalone/web
+url: 'https://github.com/Tiledesk/tiledesk-deployment'

package/src/app/app.component.ts

@@ -935,9 +935,14 @@ export class AppComponent implements OnInit {
         if (conversation && conversation.sender !== currentUser.uid) {
           this.manageTabNotification();
         }
-
       }
     });
+
+    this.conversationsHandlerService.conversationRemoved.subscribe((conversation: ConversationModel) => {
+      this.logger.log('[APP-COMP] ***** conversationRemoved *****', conversation);
+      // that.conversationsChanged(conversations);
+      if(conversation)  this.updateConversationsOnStorage();
+    });
   }
 
   /**

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

@@ -90,7 +90,7 @@
     <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
   </ion-avatar>
   <ion-label>
-    <div class="conversation_with truncate" [innerHTML]="conversation.conversation_with_fullname"></div>
+    <div class="conversation_with truncate">{{conversation.conversation_with_fullname}}</div>
     <div class="conversation_message truncate-conv-msg" [ngClass]="{'truncate-on-desktop': !isApp}">
 
       <!-- -------------------------------------------------------------------------- -->

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

@@ -59,7 +59,6 @@ export class ListConversationsComponent implements OnInit {
   public openConversationByID(conversation) {
     this.logger.log('[LISTCONVERSATIONS-W] openConversationByID: ', conversation);
     if (conversation) {
-      this.logger.log(conversation.recipient_fullname)
       // this.conversationsService.updateIsNew(conversation);
       // this.conversationsService.updateConversationBadge();
       this.uidConvSelected = conversation.uid

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

@@ -1,8 +1,8 @@
 <ion-header no-border class="ion-no-border">
   <ion-toolbar style="height:60px">
-    <ion-buttons slot="start" style="height:60px">
+    <ion-buttons slot="start" style="height:60px" *ngIf="isMobile">
       <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
-      <ion-back-button style="display: block;" text="" *ngIf="isMobile" (click)="goBackToConversationList()">
+      <ion-back-button style="display: block;" text=""  (click)="goBackToConversationList()">
       </ion-back-button>
     </ion-buttons>
 
@@ -12,7 +12,9 @@
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
         <div *ngIf="conversationAvatar" class="avatar-container" (click)="onOpenCloseInfoConversation()" style="cursor: pointer"
           [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
-          <app-avatar-profile [itemAvatar]=conversationAvatar></app-avatar-profile>
+          <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' }">
@@ -32,7 +34,7 @@
       <!-- (click)="onOpenCloseInfoConversation()" -->
       <div *ngIf="conversationAvatar" class="tile-info-with" 
         [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
-        <span class="tile-username">{{ conversationAvatar.conversation_with_fullname }} </span>
+        <span class="tile-username">{{ conversationAvatar.conversation_with_fullname | truncate:50 }} </span>
         <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
 
       </div>

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

@@ -4,6 +4,25 @@ ion-header {
     border-bottom-style: solid;
     border-color: var(--light-gray);
     border-bottom-width: thin;
+    ion-toolbar{
+        height: 60px;
+        .flex-container{
+            display: flex;
+        }
+
+        .back-flex-container{
+            flex: 0 1 auto;
+            order: 0;
+        }
+        .user-info-flex-container{
+            flex: 0 1 auto;
+            order: 1;
+        }
+        .resolve-flex-container{
+            flex: 0 1 auto;
+            order: 2;
+        }
+    }
     ion-title {
         text-align: left;
         height: 40px;

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

@@ -0,0 +1,116 @@
+<ion-header no-border class="ion-no-border">
+  <ion-toolbar style="height:60px">
+    <div class="flex-container">
+      <div class="back-flex-container">
+        <ion-buttons slot="start" style="height:60px">
+          <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
+          <ion-back-button style="display: block;" text="" *ngIf="isMobile" (click)="goBackToConversationList()">
+          </ion-back-button>
+        </ion-buttons>
+      </div>
+      <div class="user-info-flex-container">
+        <div style="display: flex;">
+          <div>1</div>
+          <div>2</div>
+        </div>
+      </div>
+
+      <div class="resolve-flex-container">
+        <ion-buttons slot="end">
+
+          <!-- <ion-button ion-button fill="clear" color="primary" size="small" (click)="presentCreateTicketModal()" [ngClass]="{'resolve-conv-margin-right': !isMobile}">
+            <ion-icon name="ticket-outline"></ion-icon>
+            <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Crea ticket' | translate}} </span>
+          </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">
+            <!-- <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-icon slot="icon-only" name="close-circle-outline"></ion-icon>
+          </ion-button>
+        
+        </ion-buttons>
+      </div>
+
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+
+
+
+<ion-title [class.info-open]="openInfoConversation || openInfoMessage">
+
+  <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" >
+    <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
+    <div *ngIf="conversationAvatar" class="avatar-container" (click)="onOpenCloseInfoConversation()" 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 *ngIf="conversationAvatar" class="user-typing">
+      <app-user-typing [idConversation]=conversationAvatar.uid [idCurrentUser]=idLoggedUser [isDirect]=isDirect
+        [translationMap]=translationMap [color]=fontColor [membersConversation]=membersConversation>
+      </app-user-typing>
+    </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>
+  </div> -->
+
+</ion-title>
+<!-- openInfoConversation  {{openInfoConversation}} -->
+<ion-buttons slot="end">
+
+  <!-- <ion-button ion-button fill="clear" color="primary" size="small" (click)="presentCreateTicketModal()" [ngClass]="{'resolve-conv-margin-right': !isMobile}">
+    <ion-icon name="ticket-outline"></ion-icon>
+    <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Crea ticket' | translate}} </span>
+  </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">
+    <!-- <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-icon slot="icon-only" name="close-circle-outline"></ion-icon>
+  </ion-button>
+
+</ion-buttons>

package/src/app/directives/truncate.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { TruncatePipe } from './truncate.pipe';
+
+describe('TruncatePipe', () => {
+  it('create an instance', () => {
+    const pipe = new TruncatePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

package/src/app/directives/truncate.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'truncate'
+})
+export class TruncatePipe implements PipeTransform {
+
+  transform(value: string, character: number): any {
+    console.log('stringggg', value, character)
+    if(value && value.length > character) 
+      return value.substring(0, character) + ' ...'
+    else 
+      return value;
+  }
+
+}

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

@@ -1,3 +1,4 @@
+import { TruncatePipe } from './../../directives/truncate.pipe';
 import { IonConversationDetailComponent } from '../../chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component';
 import { TooltipModule } from 'ng2-tooltip-directive';
 import { NgModule } from '@angular/core';
@@ -32,7 +33,6 @@ import { InfoGroupComponent } from 'src/app/components/conversation-info/info-gr
 
 
 import { SharedModule } from 'src/app/shared/shared.module';
-// import { SharedConversationInfoModule } from 'src/app/shared/shared-conversation-info.module';
 import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
 import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
@@ -62,7 +62,7 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
   declarations: [
     ConversationDetailPage,
     HeaderConversationDetailComponent,
-    MessageTextAreaComponent
+    MessageTextAreaComponent,
     // BubbleDayMessageComponent,
     // BubbleSystemMessageComponent,
     // BubbleMyMessageComponent,
@@ -71,6 +71,7 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
     // InfoSupportGroupComponent,
     // InfoDirectComponent,
     // InfoGroupComponent,
+    TruncatePipe
   ]
 })
 export class ConversationDetailPageModule {}

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

@@ -327,10 +327,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         this.logger.log('[CONVS-DETAIL] subscribe to  BSConversationsChange showButtonToBottom ', this.showButtonToBottom)
         // UPDATE THE CONVERSATION TO 'READ' IF IT IS ME WHO WRITES THE LAST MESSAGE OF THE CONVERSATION
         // AND IF THE POSITION OF THE SCROLL IS AT THE END
-        if (!this.showButtonToBottom && conv.is_new) {
-          // ARE AT THE END
-          this.updateConversationBadge()
-        }
+        // if (!this.showButtonToBottom && conv.is_new) {
+        //   // ARE AT THE END
+        //   this.updateConversationBadge()
+        // }
         if(conv.uid && conv.uid === this.conversationWith){
           this.conversationAvatar = setConversationAvatar(conv.conversation_with,conv.conversation_with_fullname,conv.channel_type)
         }