@chat21/chat21-web-widget 5.1.26-rc1 → 5.1.27-rc1

package/CHANGELOG.md

@@ -6,6 +6,27 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.27-rc1
+- **added**: closeChatInConversation parameters
+- **added**: close chat button under textarea footer component
+
+# 5.1.26-rc6
+- **changed**: mobile always opens fullscreen and ignores legacy stored size”.
+- **changed**: changed user-typing 
+
+# 5.1.26-rc5
+- **changed**: Hide the resize-widget button when on mobile
+- **added**: added "I'm thinking" when the bot responds
+
+# 5.1.26-rc4
+- **changed**: decoupled callout from signin
+
+# 5.1.26-rc3
+- **changed**: start with authentication if a proactive message has been set, so if a rule has been set on at one chatbot in the project
+
+# 5.1.26-rc2
+- **changed**: start with authentication if hasCalloutInWidgetConfig is true
+
 # 5.1.26-rc1
 - **bug fixed**: improved audio recording/upload flow by ignoring empty recorder chunks, preserving the recorder MIME type when creating the audio blob/file, and uploading audio directly without Base64 conversion
 
@@ -81,6 +102,7 @@
 - **changed**: Force authentication if ageChangeVisibilityDesktop or PageChangeVisibilityMobile is OPEN
 
 # 5.1.7-rc12
+- **changed**: Force authentication if ageChangeVisibilityDesktop or PageChangeVisibilityMobile is OPEN
 - **changed**: Set the default autoStart value to false
 - **added**: Added the open widget loading spinner
 - **changed**: Load the widget without authentication and display the speech bubble

package/docs/changelog/this-branch.md

@@ -0,0 +1,36 @@
+# This branch: identificazione bot o umano
+
+## Obiettivo
+
+In questo branch e' stata introdotta una logica esplicita per capire, all'apertura della conversazione, se l'ultimo responder lato server e' un **bot** oppure un **umano**.
+
+## Come viene fatta l'identificazione
+
+- La valutazione parte dai messaggi gia' caricati in conversazione.
+- Viene cercato l'**ultimo messaggio ricevuto dal server** (non inviato dal client corrente).
+- Quel messaggio viene classificato con una funzione dedicata (`classifyMessageSenderKind`) che usa piu' segnali:
+  - `attributes.flowAttributes.chatbot_id` (quando presente indica bot)
+  - pattern del mittente (es. `senderId` con prefisso bot, quando applicabile)
+  - informazioni del mittente (`sender_fullname` e metadati associati)
+
+## Regola speciale per messaggi di sistema
+
+Se l'ultimo messaggio utile e' di tipo `system`, viene fatto un controllo aggiuntivo:
+
+- se in `attributes` e' presente un evento con `messagelabel.key = MEMBER_JOINED_GROUP`
+- e rappresenta il passaggio della conversazione a un operatore
+
+allora la conversazione viene forzata a **Umano** anche se altri indizi potrebbero suggerire bot.
+
+## Risultato in UI
+
+- In apertura conversazione viene mostrato un badge con stato:
+  - `Bot`
+  - `Umano`
+- Questo stato viene ricalcolato al variare dei messaggi ricevuti.
+
+## Effetto sui feedback utente
+
+- Il messaggio temporaneo `"sto pensando..."` viene mostrato solo quando la conversazione risulta di tipo **Bot**.
+- Alla ricezione della prima risposta dal server, `"sto pensando..."` viene nascosto **immediatamente**.
+- Non e' previsto alcun tempo minimo di visualizzazione del messaggio.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.26-rc1",
+  "version": "5.1.27-rc1",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.component.html

@@ -120,7 +120,7 @@
   ******* EYE-CATCHER (aka CALLOUT) *********
   *******************************************
   tabindex -> 20 -->
-  <chat-eyeeye-catcher-card *ngIf="g.senderId && !g.isOpenNewMessage"
+  <chat-eyeeye-catcher-card *ngIf="!g.isOpenNewMessage"
     (onOpenChat)="onOpenCloseWidget($event)"
     (onCloseEyeCatcherCard)="onCloseEyeCatcherCard($event)">
   </chat-eyeeye-catcher-card> 

package/src/app/app.component.ts

@@ -109,6 +109,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   //network status
   isOnline: boolean = true;
   loading: boolean = false;
+  private calloutScheduleTimeout: any = null;
   
   // alert error message 
   isShowErrorMessage: boolean = false;
@@ -328,6 +329,10 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     }
                 }
 
+                // STEP-2: schedule callout after settings are loaded,
+                // independently from auth/sign-in.
+                this.scheduleCalloutFromSettings();
+
 
                 /**CHECK IF JWT IS IN URL PARAMETERS */
                 this.logger.debug('[APP-COMP] check if token is passed throw url: ', this.g.jwt);
@@ -367,6 +372,24 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
     }
 
+    private scheduleCalloutFromSettings() {
+        if (this.calloutScheduleTimeout) {
+            clearTimeout(this.calloutScheduleTimeout);
+            this.calloutScheduleTimeout = null;
+        }
+
+        const calloutTimer = Number(this.g.calloutTimer);
+        if (isNaN(calloutTimer) || calloutTimer < 0) {
+            return;
+        }
+
+        const delayMs = calloutTimer * 1000;
+        this.calloutScheduleTimeout = setTimeout(() => {
+            this.calloutScheduleTimeout = null;
+            this.showCallout();
+        }, delayMs);
+    }
+
     private initAll() {
         this.addComponentToWindow(this.ngZone);
 
@@ -467,7 +490,8 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
                 // this.initConversationsHandler(this.g.tenant, that.g.senderId);
                 /* If singleConversation mode is active wait to showWidget: do it later in initConversationsHandler */
-                if (autoStart && !that.g.singleConversation) { 
+                const hasBotsRules = Array.isArray(this.g.botsRules) && this.g.botsRules.length > 0;
+                if ((autoStart || hasBotsRules) && !that.g.singleConversation) { 
                     that.showWidget();
                 }
 
@@ -495,8 +519,15 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 // that.hideWidget();
                 // that.g.setParameter('isShown', false, true);
                 that.triggerOnAuthStateChanged(that.stateLoggedUser);
-                if (autoStart || this.g.onPageChangeVisibilityDesktop === 'open' || this.g.onPageChangeVisibilityMobile === 'open') {
+                const shouldAutoAuthenticate = autoStart ||
+                    this.g.onPageChangeVisibilityDesktop === 'open' ||
+                    this.g.onPageChangeVisibilityMobile === 'open' ||
+                    (Array.isArray(this.g.botsRules) && this.g.botsRules.length > 0)
+                    // || this.g.hasCalloutInWidgetConfig;
+                if (shouldAutoAuthenticate) {
                     that.authenticate();
+                } else {
+                    that.logger.debug('[APP-COMP] Skip auto-auth: startup conditions not met, show launcher only');
                 }
             } else if(state && state === AUTH_STATE_CLOSE ){
                 that.logger.info('[APP-COMP] CLOSE - CHANNEL CLOSED: ', this.chatManager);
@@ -1189,14 +1220,32 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         return this.signOut();
     }
 
+    private canShowCalloutNow(): boolean {
+        if (this.g.isOpen !== false) {
+            return false;
+        }
+        if (this.g.isOpenNewMessage) {
+            return false;
+        }
+        if (!this.g.calloutStaus) {
+            return false;
+        }
+        if (!this.g.hasCalloutInWidgetConfig) {
+            return false;
+        }
+        return true;
+    }
+
     /** show callout */
     private showCallout() {
-        if (this.g.isOpen === false) {
-            // this.g.setParameter('calloutTimer', 1)
-            this.eyeeyeCatcherCardComponent.openEyeCatcher();
-            this.g.setParameter('displayEyeCatcherCard', 'block');
-            this.triggerOnOpenEyeCatcherEvent();
+        if (!this.canShowCalloutNow()) {
+            return;
         }
+        if (!this.eyeeyeCatcherCardComponent) {
+            return;
+        }
+        // Delegate visibility logic to the eye-catcher component.
+        this.eyeeyeCatcherCardComponent.openEyeCatcher();
     }
 
     /** open popup conversation */
@@ -2074,6 +2123,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     onWidgetSizeChange(mode: any) {
+        if (this.g?.isMobile) {
+            this.g.fullscreenMode = true;
+            this.g.size = 'max';
+            return;
+        }
+
         const normalize = (val: any): 'min' | 'max' | 'top' => {
             const v = (typeof val === 'string') ? val.toLowerCase().trim() : '';
             return (v === 'min' || v === 'max' || v === 'top') ? (v as any) : 'min';
@@ -2252,6 +2307,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.el.nativeElement.style.setProperty('--chat-header-height', this.g.hideHeaderConversation? '0px': null)
         this.el.nativeElement.style.setProperty('--font-size-bubble-message', this.g.fontSize)
         this.el.nativeElement.style.setProperty('--font-family-bubble-message', this.g.fontFamily)
+        this.el.nativeElement.style.setProperty('--chat-footer-close-button-height', this.g.closeChatInConversation? '30px': '0px')
 
     }
 
@@ -2301,6 +2357,10 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     /** elimino tutte le sottoscrizioni */
     ngOnDestroy() {
         this.logger.debug('[APP-COMP] this.subscriptions', this.subscriptions);
+        if (this.calloutScheduleTimeout) {
+            clearTimeout(this.calloutScheduleTimeout);
+            this.calloutScheduleTimeout = null;
+        }
         const windowContext = this.g.windowContext;
         if (windowContext && windowContext['tiledesk']) {
             windowContext['tiledesk']['angularcomponent'] = null;

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

@@ -30,12 +30,21 @@
         [isTypings]="isTypings"
         [nameUserTypingNow]="nameUserTypingNow"
         [typingLocation]="g?.typingLocation"
+        [isMobile]="g?.isMobile"
         (onBack)="onBackHomeFN()"
         (onCloseWidget)="onCloseWidgetFN()"
         (onMenuOptionClick)="onMenuOptionClick($event)"
         (onMenuOptionShow)="onMenuOption($event)">
     </chat-conversation-header>
 
+    <!-- Badge: natura dell'ultimo messaggio ricevuto dal server -->
+    <!-- <div
+      *ngIf="showLastServerSenderBadge"
+      id="chat21-last-server-sender-badge"
+      [ngClass]="lastServerSenderKind">
+      {{ lastServerSenderBadgeText }}
+    </div> -->
+
     <div id="dropZone_container" *ngIf="isHovering"
         [class.hideTextReply]="hideFooterTextReply && g?.poweredBy">
         <div class="drop">
@@ -54,6 +63,7 @@
         [idUserTypingNow]="idUserTypingNow"
         [nameUserTypingNow]="nameUserTypingNow"
         [typingLocation]="g?.typingLocation"
+        [showThinkingMessage]="showThinkingMessage"
         [fullscreenMode]="g?.fullscreenMode"
         [translationMap]="translationMapContent"
         [stylesMap]="stylesMap"
@@ -68,7 +78,6 @@
         (dragleave)="drag($event)" >
     </chat-conversation-content>
 
-    
 
     <!-- INTERNAL FRAME FOR SELF ACTION LINK BUTTONS-->
     <chat-internal-frame *ngIf="isButtonUrl"
@@ -128,6 +137,7 @@
             [isMobile]="g?.isMobile"
             [isEmojiiPickerShow]="isEmojiiPickerShow"
             [footerMessagePlaceholder]="footerMessagePlaceholder"
+            [closeChatInConversation]="g?.closeChatInConversation"
             [fileUploadAccept]="g?.fileUploadAccept"
             [dropEvent]="dropEvent"
             [poweredBy]="g?.poweredBy"
@@ -138,7 +148,8 @@
             (onAfterSendMessage)="onAfterSendMessageFN($event)"
             (onChangeTextArea)="onChangeTextArea($event)"
             (onAttachmentFileButtonClicked)="onAttachmentFileButtonClicked($event)"
-            (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)">
+            (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)"
+            (onCloseChatButtonClicked)="onCloseChatButtonClickedFN($event)">
         </chat-conversation-footer>
 
     </div>

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

@@ -137,7 +137,7 @@
 #dropZone_container{
     position: absolute;
     top: 52px;
-    bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height));
+    bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + var(--chat-footer-close-button-height));
     left: 0;
     right: 0;
     background-color: rgba(240,248,255,0.6);
@@ -153,6 +153,34 @@
     }
 }
 
+#chat21-last-server-sender-badge{
+    position: absolute;
+    top: 58px;
+    right: 12px;
+    z-index: 25;
+    padding: 6px 10px;
+    border-radius: 999px;
+    font-size: 0.95em;
+    font-weight: 600;
+    line-height: 1.1;
+    border: 1px solid rgba(0,0,0,0.08);
+    color: rgba(0,0,0,0.65);
+    background: rgba(0,0,0,0.03);
+    user-select: none;
+
+    &.bot{
+        border-color: rgba(0, 150, 136, 0.45);
+        color: rgba(0, 150, 136, 1);
+        background: rgba(0, 150, 136, 0.12);
+    }
+
+    &.human{
+        border-color: rgba(63, 81, 181, 0.45);
+        color: rgba(63, 81, 181, 1);
+        background: rgba(63, 81, 181, 0.12);
+    }
+}
+
 dialog:-internal-dialog-in-top-layer{
     border: 0px;
     border-radius: 16px;
@@ -212,7 +240,7 @@ dialog:-internal-dialog-in-top-layer{
 
 
     ::ng-deep .chat21-sheet-content{
-        bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + 34px)!important;
+        bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + var(--chat-footer-close-button-height) + 34px)!important;
     }
     
 }

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

@@ -113,6 +113,15 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   // availableAgentsStatus = false; // indica quando è impostato lo stato degli agenti nel subscribe
   messages: Array<MessageModel> = [];
 
+  // Temporary "thinking" state after a client message is sent.
+  public showThinkingMessage: boolean = false;
+  private waitingServerReply: boolean = false;
+
+  // Badge "ultimo messaggio ricevuto dal server" (bot/umano)
+  public showLastServerSenderBadge: boolean = false;
+  public lastServerSenderKind: 'bot' | 'human' | null = null;
+  public lastServerSenderBadgeText: string = '';
+
 
   CLIENT_BROWSER: string = navigator.userAgent;
 
@@ -235,7 +244,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'CONTINUE',
       'EMOJI_NOT_ELLOWED',
       'ATTACHMENT',
-      'EMOJI'
+      'EMOJI',
+      'CLOSE_CHAT'
     ];
 
     const keysContent = [
@@ -252,6 +262,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'LABEL_TODAY',
       'LABEL_TOMORROW',
       'LABEL_LOADING',
+      'LABEL_THINKING',
       'LABEL_TO',
       'ARRAY_DAYS',
     ];
@@ -356,6 +367,130 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
 
   }
 
+  private classifyMessageSenderKind(msg: MessageModel | null | undefined): 'bot' | 'human' | 'system' | 'unknown' {
+    if (!msg) return 'unknown';
+
+    const sender = msg.sender;
+    const senderFullname = msg.sender_fullname;
+    const senderFullnameLower = (senderFullname || '').toString().toLowerCase();
+
+    // System messages are always from "system".
+    if (sender === 'system' || senderFullnameLower === 'system') {
+      return 'system';
+    }
+
+    const chatbotId = msg?.attributes?.flowAttributes?.chatbot_id;
+    if (chatbotId && sender && String(chatbotId) === String(sender)) {
+      return 'bot';
+    }
+
+    // Fallback heuristics (used when chatbot_id is missing)
+    if (sender && String(sender).includes('bot_')) {
+      return 'bot';
+    }
+    if (senderFullnameLower.includes('bot')) {
+      return 'bot';
+    }
+
+    return 'human';
+  }
+
+  /**
+   * Detects explicit handoff-to-human system messages.
+   * Example:
+   * attributes.subtype = "info"
+   * attributes.updateconversation = true
+   * attributes.messagelabel.key = "MEMBER_JOINED_GROUP"
+   * attributes.messagelabel.parameters.member_id = "<human-agent-id>"
+   */
+  private isHumanHandoffSystemMessage(msg: MessageModel | null | undefined): boolean {
+    if (!msg) return false;
+    if (msg.sender !== 'system') return false;
+
+    const attrs: any = msg.attributes || {};
+    const key = attrs?.messagelabel?.key;
+    const memberId = attrs?.messagelabel?.parameters?.member_id;
+
+    if (attrs?.subtype !== 'info') return false;
+    if (attrs?.updateconversation !== true) return false;
+    if (key !== 'MEMBER_JOINED_GROUP') return false;
+    if (!memberId || typeof memberId !== 'string') return false;
+
+    // Exclude system/bot/self joins.
+    if (memberId === 'system') return false;
+    if (memberId.startsWith('bot_')) return false;
+    if (this.senderId && memberId === this.senderId) return false;
+
+    return true;
+  }
+
+  /**
+   * Finds the last server message (sender != client) and classifies it as bot/human.
+   * If the last server message is "system", it scans backward to find the last non-system server message.
+   */
+  private refreshLastServerSenderBadge() {
+    const senderId = this.senderId;
+    const msgs = this.messages || [];
+
+    let found: 'bot' | 'human' | null = null;
+    let latestServerMsg: MessageModel | null = null;
+
+    // messages are kept sorted by the handler, but we still scan from the end for "latest".
+    for (let i = msgs.length - 1; i >= 0; i--) {
+      const m = msgs[i];
+      if (!m) continue;
+
+      // Skip messages sent by the current client/user.
+      if (senderId && m.sender === senderId) continue;
+
+      if (!latestServerMsg) {
+        latestServerMsg = m;
+      }
+
+      const kind = this.classifyMessageSenderKind(m);
+      if (kind === 'system') continue;
+      if (kind === 'bot' || kind === 'human') {
+        found = kind;
+        break;
+      }
+    }
+
+    // Priority rule requested: if the latest server message is a system handoff message,
+    // consider the conversation as "human".
+    if (this.isHumanHandoffSystemMessage(latestServerMsg)) {
+      found = 'human';
+    }
+
+    this.lastServerSenderKind = found;
+    this.showLastServerSenderBadge = found !== null;
+    this.lastServerSenderBadgeText = found === 'bot' ? 'Bot' : (found === 'human' ? 'Umano' : '');
+  }
+
+  private startThinkingMessage() {
+    this.waitingServerReply = true;
+    this.showThinkingMessage = true;
+  }
+
+  private stopThinkingMessageImmediately() {
+    if (!this.waitingServerReply) {
+      return;
+    }
+    this.waitingServerReply = false;
+    this.showThinkingMessage = false;
+  }
+
+  private shouldShowThinkingForBot(): boolean {
+    // Primary source: latest server-side classification already computed.
+    if (this.lastServerSenderKind === 'bot') {
+      return true;
+    }
+    // Safe fallback for bot-targeted direct conversations.
+    if (this.conversationWith && this.conversationWith.includes('bot_')) {
+      return true;
+    }
+    return false;
+  }
+
   /**
    * do per scontato che this.userId esiste!!!
    */
@@ -368,6 +503,11 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     // this.connectConversation();
     await this.initConversationHandler();
 
+    // After loading/connecting, compute "ultimo messaggio ricevuto dal server"
+    // (excluding messages sent by the client).
+    this.refreshLastServerSenderBadge();
+    setTimeout(() => this.refreshLastServerSenderBadge(), 300);
+
     this.logger.debug('[CONV-COMP] ------ 4: initializeChatManager ------ ');
     //this.initializeChatManager();
 
@@ -787,8 +927,14 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       subscribtion = this.conversationHandlerService.messageAdded.pipe(takeUntil(this.unsubscribe$)).subscribe((msg: MessageModel) => {
         this.logger.debug('[CONV-COMP] ***** DETAIL messageAdded *****', msg);
         if (msg) {
+          if (msg.sender !== this.senderId) {
+            this.stopThinkingMessageImmediately();
+          }
 
           that.newMessageAdded(msg);
+          // Update badge based on the latest message received from the server.
+          // We rely on `messages` being kept in-sync by the conversation handler.
+          that.refreshLastServerSenderBadge();
           this.checkMessagesLegntForTranscriptDownloadMenuOption();
           this.resetTimeout();
           
@@ -1102,6 +1248,13 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   }
   /** CALLED BY: conv-header component */
   onWidgetSizeChange(mode: any){
+    if (this.g?.isMobile) {
+      this.g.fullscreenMode = true;
+      this.g.size = 'max';
+      this.isMenuShow = false;
+      return;
+    }
+
     const normalize = (val: any): 'min' | 'max' | 'top' => {
       const v = (typeof val === 'string') ? val.toLowerCase().trim() : '';
       return (v === 'min' || v === 'max' || v === 'top') ? (v as any) : 'min';
@@ -1308,6 +1461,16 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   }
   /** CALLED BY: conv-footer component */ 
   onAfterSendMessageFN(message: MessageModel){
+    // Manage thinking state only for messages sent by the current client.
+    // Do not force-hide here for other message types/events.
+    if (message && message.sender === this.senderId) {
+      if (this.shouldShowThinkingForBot()) {
+        this.startThinkingMessage();
+      } else {
+        this.showThinkingMessage = false;
+        this.waitingServerReply = false;
+      }
+    }
     this.onAfterSendMessage.emit(message)
   }
   /** CALLED BY: conv-footer component */ 
@@ -1339,6 +1502,12 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.logger.debug('[CONV-COMP] floating onNewConversationButtonClicked')
     this.onNewConversationButtonClicked.emit()
   }
+
+  /** CALLED BY: conv-footer component */
+  onCloseChatButtonClickedFN(event){
+    this.logger.debug('[CONV-COMP] onCloseChatButtonClicked::::', event)
+    this.onCloseChat()
+  }
   // =========== END: event emitter function ====== //
 
 
@@ -1359,6 +1528,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     //this.storageService.removeItem('activeConversation');
     this.isConversationArchived = false;
     this.hideTextAreaContent = false;
+    this.showThinkingMessage = false;
+    this.waitingServerReply = false;
     this.conversationFooter.textInputTextArea='';
     this.hideFooterTextReply = false;
     this.footerMessagePlaceholder = '';

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

@@ -13,7 +13,6 @@
           [nameUserTypingNow]="nameUserTypingNow">
         </user-typing>
       </span>
-      
     
       <div id="chat21-sheet-content" class="chat21-sheet-content">
           <div class="chat21-conversation-parts-container">
@@ -120,25 +119,21 @@
 
                       <!-- FILE PENDING UPLOAD -->
                       <!--  -->
-                      <div *ngIf="showUploadProgress" class="msg_container base_sent" >
+                      <div *ngIf="showUploadProgress && !showThinkingMessage" class="msg_container base_sent" >
                         <div class="chat21-spinner active" id="chat21-spinner" style="margin: 0px 6px 0px;">
                           <div class="chat21-bounce1" [ngStyle]="{'background-color': stylesMap.get('iconColor')}"></div>
                           <div class="chat21-bounce2" [ngStyle]="{'background-color': stylesMap.get('iconColor'), 'opacity': 0.4}"></div>
                           <div class="chat21-bounce3" [ngStyle]="{'background-color': stylesMap.get('iconColor'), 'opacity': 0.6}"></div>
                         </div>
-
-                        
                       </div>
 
 
-                      <div *ngIf="isTypings && typingLocation==='content' " class="msg_container base_receive">
-                        <!-- !isSameSender(idUserTypingNow, i) -->
+                      <div *ngIf="isTypings && !showThinkingMessage && typingLocation==='content'" class="msg_container base_receive">
                         <chat-avatar-image *ngIf="idUserTypingNow " class="slide-in-left"  
                           [senderID]="idUserTypingNow"
                           [senderFullname]="nameUserTypingNow"
                           [baseLocation]="baseLocation">
                         </chat-avatar-image>
-
                         <user-typing
                           [ngClass]="{'userTypingNowExist': !idUserTypingNow}"
                           [color]="stylesMap?.get('iconColor')"
@@ -147,7 +142,16 @@
                           [nameUserTypingNow]="nameUserTypingNow">
                         </user-typing>
                       </div>
-                      
+
+                      <div *ngIf="showThinkingMessage" class="msg_container base_receive thinking_receive">
+                        <user-typing class="loading thinking-dots"
+                          [color]="stylesMap?.get('iconColor')"
+                          [translationMap]="translationMap"
+                          [idUserTypingNow]="idUserTypingNow"
+                          [nameUserTypingNow]="nameUserTypingNow">
+                        </user-typing>
+                      </div>
+   
                   </div>
               </div>
           </div>
@@ -155,7 +159,6 @@
       </div>
     </div>  
   </div>
-
 </div>
 
 

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

@@ -44,7 +44,7 @@
                 top: 0;
                 right: 0;
                 left: 0;
-                bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height));
+                bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + var(--chat-footer-close-button-height));
                 overflow: hidden;
                 .time{
                     margin-bottom: 20px;
@@ -122,6 +122,11 @@
                     text-align: center;
                     padding: 0px 0px 6px 0px
                 }
+                .thinking_receive {
+                    .thinking-dots ::ng-deep > div.spinner{
+                        margin: 25px 30px;
+                    }
+                }
                 /* ====== SET MESSAGES ====== */
                 .messages {
                     border-radius: var(--border-radius-bubble-message);
@@ -265,6 +270,15 @@
     }// end c21-body-container
 }// end c21-body
 
+@keyframes thinking-dot {
+    0%, 80%, 100% {
+        opacity: 0.2;
+    }
+    40% {
+        opacity: 1;
+    }
+}
+
 /* LOADING */
 /*http://tobiasahlin.com/spinkit/*/
 #chat21-spinner {