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

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) + var(--chat-footer-close-button-height));
+    bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height));
     left: 0;
     right: 0;
     background-color: rgba(240,248,255,0.6);
@@ -240,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) + var(--chat-footer-close-button-height) + 34px)!important;
+        bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + 34px)!important;
     }
     
 }

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

@@ -40,6 +40,7 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { TiledeskRequestsService } from 'src/chat21-core/providers/tiledesk/tiledesk-requests.service';
 import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
 import { checkAcceptedFile } from 'src/app/utils/utils';
+import { computeConversationBadgeState } from 'src/app/utils/conversation-sender-classifier';
 // import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -115,12 +116,13 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
 
   // 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 = '';
+  // Diagnostics/internal state: kind of the latest *server* message (including system).
+  public latestServerMessageKind: 'bot' | 'human' | 'system' | 'unknown' = 'unknown';
 
 
   CLIENT_BROWSER: string = navigator.userAgent;
@@ -244,8 +246,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'CONTINUE',
       'EMOJI_NOT_ELLOWED',
       'ATTACHMENT',
-      'EMOJI',
-      'CLOSE_CHAT'
+      'EMOJI'
     ];
 
     const keysContent = [
@@ -367,129 +368,20 @@ 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.
+   * Backward-compat wrappers: keep component API stable while delegating
+   * the sender classification logic to a pure utility module.
    */
   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' : '');
+    const state = computeConversationBadgeState(this.messages || [], this.senderId);
+    this.latestServerMessageKind = state.latestServerMessageKind;
+    this.lastServerSenderKind = state.latestNonSystemResponderKind;
+    this.showLastServerSenderBadge = state.showBadge;
+    this.lastServerSenderBadgeText = state.badgeText;
   }
 
-  private startThinkingMessage() {
-    this.waitingServerReply = true;
-    this.showThinkingMessage = true;
-  }
+  // (Implementation moved to src/app/utils/conversation-sender-classifier.ts)
 
-  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!!!
@@ -506,7 +398,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     // 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();
@@ -610,7 +501,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       return this.isConversationArchived;
     }
 
-    //   //FALLBACK TO TILEDESK
+    //FALLBACK TO TILEDESK
     const requests_list = await this.tiledeskRequestService.getMyRequests().catch(err => {
       this.logger.error('[CONV-COMP] getConversationDetail: error getting request from Tiledesk', err);
       this.isConversationArchived=true
@@ -628,9 +519,9 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       return this.isConversationArchived
     }
 
-      this.isConversationArchived = false;
-      return null;
-    }
+    this.isConversationArchived = true;
+    return null;
+  }
 
   /**
     * this.g.recipientId:
@@ -928,7 +819,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
         this.logger.debug('[CONV-COMP] ***** DETAIL messageAdded *****', msg);
         if (msg) {
           if (msg.sender !== this.senderId) {
-            this.stopThinkingMessageImmediately();
+            this.showThinkingMessage = false;
           }
 
           that.newMessageAdded(msg);
@@ -986,20 +877,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       this.subscriptions.push(subscribe);
     }
 
-    subscribtionKey = 'conversationsAdded';
-    subscribtion = this.subscriptions.find(item => item.key === subscribtionKey);
-    if(!subscribtion){
-
-      subscribtion = this.chatManager.conversationsHandlerService.conversationChanged.pipe(takeUntil(this.unsubscribe$)).subscribe((conversation) => {
-        this.logger.debug('[CONV-COMP] ***** DATAIL conversationsChanged *****', conversation, this.conversationWith, this.isConversationArchived);
-        if(conversation && conversation.recipient === this.conversationId){
-          this.isConversationArchived = false
-        }
-      });
-      const subscribe = {key: subscribtionKey, value: subscribtion };
-      this.subscriptions.push(subscribe);
-    }
-
     subscribtionKey = 'messageWait';
     subscribtion = this.subscriptions.find(item => item.key === subscribtionKey);
     if (!subscribtion) {
@@ -1463,13 +1340,17 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   onAfterSendMessageFN(message: MessageModel){
     // Manage thinking state only for messages sent by the current client.
     // Do not force-hide here for other message types/events.
+    this.logger.debug('[CONV-COMP] onAfterSendMessageFN::::')
     if (message && message.sender === this.senderId) {
-      if (this.shouldShowThinkingForBot()) {
-        this.startThinkingMessage();
-      } else {
-        this.showThinkingMessage = false;
-        this.waitingServerReply = false;
-      }
+      this.logger.debug('[CONV-COMP] onAfterSendMessageFN:::: message', message)
+      // if (this.shouldShowThinkingForBot()) {
+      //   this.logger.debug('[CONV-COMP] shouldShowThinkingForBot::::', true)
+      //   this.startThinkingMessage();
+      // } else {
+      //   this.logger.debug('[CONV-COMP] shouldShowThinkingForBot::::', false)
+      //   this.showThinkingMessage = false;
+      // }
+      this.showThinkingMessage = true;
     }
     this.onAfterSendMessage.emit(message)
   }
@@ -1502,12 +1383,6 @@ 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 ====== //
 
 
@@ -1529,7 +1404,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     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.scss

@@ -44,7 +44,7 @@
                 top: 0;
                 right: 0;
                 left: 0;
-                bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + var(--chat-footer-close-button-height));
+                bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height));
                 overflow: hidden;
                 .time{
                     margin-bottom: 20px;

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

@@ -14,117 +14,94 @@
 
 </div>
 
-<div class="textarea-container-wrapper" *ngIf="!hideTextAreaContent && !hideTextReply">
-    <!-- TEXTAREA + ICONS: conv active-->
-    <div class="textarea-container">
-        
-        <div *ngIf="!isStopRec" class="icons-container">
-            <!-- ICON ATTACHMENT -->
-            <label *ngIf="showAttachmentFooterButton" tabindex="1502" aria-label="allegati" for="chat21-file" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-start-upload-doc">
-                <span class="v-align-center">
-                    <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M9.9,22.7c0,0-.1,0-.2,0-1.9.3-3.7-.2-5.2-1.4-3-2.3-3.6-6.4-1.4-9.5L9.5,2.5c.4-.5,1.1-.6,1.6-.3.5.4.6,1.1.3,1.6l-6.5,9.4c-1.4,2-1,4.8.9,6.3,1,.8,2.2,1.1,3.5.9,1.3-.2,2.4-.9,3.1-1.9l6-8.7c.9-1.2.6-3-.6-3.9-.6-.5-1.4-.6-2.1-.5-.8.1-1.4.5-1.9,1.1l-5.8,8.2c-.3.5-.2,1.1.2,1.5.2.2.5.3.8.2.3,0,.6-.2.7-.4l4.7-6.2c.4-.5,1.1-.6,1.6-.2.5.4.6,1.1.2,1.6l-4.7,6.2c-.5.7-1.4,1.2-2.3,1.3-.9.1-1.8-.2-2.5-.7-1.4-1.1-1.6-3.1-.6-4.6l5.8-8.2c.8-1.1,2-1.9,3.4-2.1,1.4-.2,2.7.1,3.8,1,2.2,1.7,2.7,4.8,1.1,7.1l-6,8.7c-1.1,1.5-2.6,2.5-4.4,2.8h0Z"/>
-                        <title id="altIconTitle">{{ 'MAX_ATTACHMENT' | translate: { FILE_SIZE_LIMIT: file_size_limit } }}</title>
-                    </svg>
-                    
-                </span>
-                <input
-                    [attr.disabled] = "(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
-                    tabindex="1503" 
-                    type="file" 
-                    aria-label="seleziona allegato"
-                    [accept]="fileUploadAccept"
-                    name="chat21-file"
-                    id="chat21-file"
-                    #chat21_file
-                    class="inputfile" 
-                    [ngStyle]="{'display': 'block', height:'1px', width:'1px', overflow: 'hidden' }"
-                    (change)="detectFiles($event)"/>
-            </label>
-            <!-- ICON EMOJII -->
-            <label *ngIf="showEmojiFooterButton" tabindex="1504" aria-label="emojii" for="chat21-emojii" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-emoticon-picker" (click)="onEmojiiPickerClicked()">
-                <span class="v-align-center">
-                    <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
-                        <path stroke-width=".4px" stroke="currentColor" d="M12,20.8c-5.1,0-9.3-4.2-9.3-9.3S6.9,2.2,12,2.2s9.3,4.2,9.3,9.3-4.2,9.3-9.3,9.3ZM12,3.6c-4.4,0-7.9,3.6-7.9,7.9s3.6,7.9,7.9,7.9,7.9-3.6,7.9-7.9-3.6-7.9-7.9-7.9Z"/>
-                        <path stroke-width=".4px" stroke="currentColor" d="M12,17.2c-2.7,0-4.3-1.9-4.6-2.3-.2-.3-.2-.7.1-1s.7-.2,1,.1c.1.2,1.4,1.8,3.5,1.8s2.2,0,3.5-1.8c.2-.3.7-.4,1-.1s.4.7.1,1c-1.7,2.2-4.1,2.3-4.6,2.3Z"/>
-                        <path d="M8.7,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
-                        <path d="M15.5,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
-                        <title id="altIconTitle">{{ translationMap?.get('EMOJI') }}</title>
-
-                        <!-- <path d="M0,0H20.57V20.57H0V0Z" fill="none"/>
-                        <circle cx="15.02" cy="9.86" r="1.29"/>
-                        <circle cx="9.02" cy="9.86" r="1.29"/>
-                        <path d="M12.02,15.43c-1.27,0-2.36-.69-2.96-1.71h-1.43c.69,1.76,2.39,3,4.39,3s3.7-1.24,4.39-3h-1.43c-.6,1.02-1.69,1.71-2.96,1.71Zm0-12C7.28,3.43,3.45,7.27,3.45,12s3.83,8.57,8.56,8.57,8.58-3.84,8.58-8.57S16.75,3.43,12.01,3.43Zm0,15.43c-3.79,0-6.86-3.07-6.86-6.86s3.07-6.86,6.86-6.86,6.86,3.07,6.86,6.86-3.07,6.86-6.86,6.86Z"/> -->
-                    </svg>
-                </span>
-            </label>
-        </div>
+<!-- TEXTAREA + ICONS: conv active-->
+<div class="textarea-container" *ngIf="!hideTextAreaContent && !hideTextReply">
+    
+    <div *ngIf="!isStopRec" class="icons-container">
+        <!-- ICON ATTACHMENT -->
+        <label *ngIf="showAttachmentFooterButton" tabindex="1502" aria-label="allegati" for="chat21-file" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-start-upload-doc">
+            <span class="v-align-center">
+                <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M9.9,22.7c0,0-.1,0-.2,0-1.9.3-3.7-.2-5.2-1.4-3-2.3-3.6-6.4-1.4-9.5L9.5,2.5c.4-.5,1.1-.6,1.6-.3.5.4.6,1.1.3,1.6l-6.5,9.4c-1.4,2-1,4.8.9,6.3,1,.8,2.2,1.1,3.5.9,1.3-.2,2.4-.9,3.1-1.9l6-8.7c.9-1.2.6-3-.6-3.9-.6-.5-1.4-.6-2.1-.5-.8.1-1.4.5-1.9,1.1l-5.8,8.2c-.3.5-.2,1.1.2,1.5.2.2.5.3.8.2.3,0,.6-.2.7-.4l4.7-6.2c.4-.5,1.1-.6,1.6-.2.5.4.6,1.1.2,1.6l-4.7,6.2c-.5.7-1.4,1.2-2.3,1.3-.9.1-1.8-.2-2.5-.7-1.4-1.1-1.6-3.1-.6-4.6l5.8-8.2c.8-1.1,2-1.9,3.4-2.1,1.4-.2,2.7.1,3.8,1,2.2,1.7,2.7,4.8,1.1,7.1l-6,8.7c-1.1,1.5-2.6,2.5-4.4,2.8h0Z"/>
+                    <title id="altIconTitle">{{ 'MAX_ATTACHMENT' | translate: { FILE_SIZE_LIMIT: file_size_limit } }}</title>
+                </svg>
+                
+            </span>
+             <input
+                [attr.disabled] = "(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
+                tabindex="1503" 
+                type="file" 
+                aria-label="seleziona allegato"
+                [accept]="fileUploadAccept"
+                name="chat21-file"
+                id="chat21-file"
+                #chat21_file
+                class="inputfile" 
+                [ngStyle]="{'display': 'block', height:'1px', width:'1px', overflow: 'hidden' }"
+                (change)="detectFiles($event)"/>
+        </label>
+        <!-- ICON EMOJII -->
+        <label *ngIf="showEmojiFooterButton" tabindex="1504" aria-label="emojii" for="chat21-emojii" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-emoticon-picker" (click)="onEmojiiPickerClicked()">
+            <span class="v-align-center">
+                <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+                    <path stroke-width=".4px" stroke="currentColor" d="M12,20.8c-5.1,0-9.3-4.2-9.3-9.3S6.9,2.2,12,2.2s9.3,4.2,9.3,9.3-4.2,9.3-9.3,9.3ZM12,3.6c-4.4,0-7.9,3.6-7.9,7.9s3.6,7.9,7.9,7.9,7.9-3.6,7.9-7.9-3.6-7.9-7.9-7.9Z"/>
+                    <path stroke-width=".4px" stroke="currentColor" d="M12,17.2c-2.7,0-4.3-1.9-4.6-2.3-.2-.3-.2-.7.1-1s.7-.2,1,.1c.1.2,1.4,1.8,3.5,1.8s2.2,0,3.5-1.8c.2-.3.7-.4,1-.1s.4.7.1,1c-1.7,2.2-4.1,2.3-4.6,2.3Z"/>
+                    <path d="M8.7,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
+                    <path d="M15.5,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
+                    <title id="altIconTitle">{{ translationMap?.get('EMOJI') }}</title>
 
+                    <!-- <path d="M0,0H20.57V20.57H0V0Z" fill="none"/>
+                    <circle cx="15.02" cy="9.86" r="1.29"/>
+                    <circle cx="9.02" cy="9.86" r="1.29"/>
+                    <path d="M12.02,15.43c-1.27,0-2.36-.69-2.96-1.71h-1.43c.69,1.76,2.39,3,4.39,3s3.7-1.24,4.39-3h-1.43c-.6,1.02-1.69,1.71-2.96,1.71Zm0-12C7.28,3.43,3.45,7.27,3.45,12s3.83,8.57,8.56,8.57,8.58-3.84,8.58-8.57S16.75,3.43,12.01,3.43Zm0,15.43c-3.79,0-6.86-3.07-6.86-6.86s3.07-6.86,6.86-6.86,6.86,3.07,6.86,6.86-3.07,6.86-6.86,6.86Z"/> -->
+                </svg>
+            </span>
+        </label>
+    </div>
 
 
 
-        <div *ngIf="!isStopRec" class="visible-text-area" [class.hasError]="showAlertEmoji" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
-            <!-- isFilePendingToUpload || -->
-        <textarea 
-            [attr.disabled] = "(hideTextReply)? true : null"
-            [attr.placeholder] ="(footerMessagePlaceholder)? footerMessagePlaceholder : translationMap?.get('LABEL_PLACEHOLDER')"
-            start-focus-chat21-conversation-component
-            inputTextArea
-            #textbox
-            tabindex="1501"
-            aria-labelledby="altTextArea"
-            rows="1"
-            id="chat21-main-message-context"
-            class='f21textarea c21-button-clean'
-            [(ngModel)]="textInputTextArea"
-            (ngModelChange)="onTextAreaChange()"
-            (keypress)="onkeypress($event)"
-            (keydown)="onkeydown($event)"
-            (paste)="onPaste($event)">
-        </textarea>
-        
-        </div>
 
-        <!-- ICON SEND -->
-        <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.disabled]="showAlertEmoji" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
-            <span class="v-align-center">
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" fill="currentColor">
-                    <path d="M1.8,20.6V3.4l20.2,8.6L1.8,20.6ZM3.9,17.3l12.6-5.4L3.9,6.6v3.7l6.4,1.6-6.4,1.6v3.8ZM3.9,17.3V6.6v10.7Z"/>
-                </svg>
-            </span>
-        </div>
+    <div *ngIf="!isStopRec" class="visible-text-area" [class.hasError]="showAlertEmoji" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
+        <!-- isFilePendingToUpload || -->
+      <textarea 
+        [attr.disabled] = "(hideTextReply)? true : null"
+        [attr.placeholder] ="(footerMessagePlaceholder)? footerMessagePlaceholder : translationMap?.get('LABEL_PLACEHOLDER')"
+        start-focus-chat21-conversation-component
+        inputTextArea
+        #textbox
+        tabindex="1501"
+        aria-labelledby="altTextArea"
+        rows="1"
+        id="chat21-main-message-context"
+        class='f21textarea c21-button-clean'
+        [(ngModel)]="textInputTextArea"
+        (ngModelChange)="onTextAreaChange()"
+        (keypress)="onkeypress($event)"
+        (keydown)="onkeydown($event)"
+        (paste)="onPaste($event)">
+      </textarea>
+    
+    </div>
 
-        <!-- ICON REC -->
-        <div *ngIf="showAudioRecorderFooterButton && !textInputTextArea" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
-            <chat-audio-recorder
-                (startRecordingEvent)="onStartRecording()"
-                (deleteRecordingEvent)="onDeleteRecording()"
-                (endRecordingEvent)="onEndRecording($event)"
-                (sendRecordingEvent)="onSendRecording($event)"
-                [stylesMap]="stylesMap">
-            </chat-audio-recorder>
-        </div>
+    <!-- ICON SEND -->
+    <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.disabled]="showAlertEmoji" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
+        <span class="v-align-center">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" fill="currentColor">
+                <path d="M1.8,20.6V3.4l20.2,8.6L1.8,20.6ZM3.9,17.3l12.6-5.4L3.9,6.6v3.7l6.4,1.6-6.4,1.6v3.8ZM3.9,17.3V6.6v10.7Z"/>
+            </svg>
+        </span>
     </div>
 
-    <div class="close-chat-container" *ngIf="closeChatInConversation">
-        <button tabindex="1040" aflistconv #aflistconv  class="c21-button-primary c21-close" (click)="onCloseChat($event)" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'border-color': stylesMap.get('themeColor'), 'color': stylesMap?.get('foregroundColor')}">
-            <span class="v-align-center">
-                <!-- <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
-                    <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}"/>
-                </svg> -->
-                <svg [ngStyle]="{'stroke': stylesMap?.get('foregroundColor'), 'fill': stylesMap?.get('foregroundColor') }" role="img" id="archive" aria-labelledby="altIconTitle" class="icon-menu" xmlns="http://www.w3.org/2000/svg"  
-                    width="15px" height="15px" viewBox="0 0 512 512">
-                    <path d="M80 152v256a40.12 40.12 0 0040 40h272a40.12 40.12 0 0040-40V152" stroke-linecap="round" stroke-linejoin="round" stroke-width="50px" fill="none"></path>
-                    <rect x="48" y="64" width="416" height="80" rx="28" ry="28" stroke-linejoin="round" stroke-width="50px" fill="none" ></rect>
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M320 304l-64 64-64-64M256 345.89V224" stroke-width="50px" fill="none"></path>
-                    <title id="altIconTitle">{{ translationMap?.get('CLOSE_CHAT') }}</title>
-                </svg>
-            </span>
-            <span class="v-align-center c21-label-button">
-                {{translationMap?.get('CLOSE_CHAT')}}
-            </span>  
-            <div class="clear"></div>
-        </button>
+    <!-- ICON REC -->
+    <div *ngIf="showAudioRecorderFooterButton && !textInputTextArea" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
+        <chat-audio-recorder
+            (startRecordingEvent)="onStartRecording()"
+            (deleteRecordingEvent)="onDeleteRecording()"
+            (endRecordingEvent)="onEndRecording($event)"
+            (sendRecordingEvent)="onSendRecording($event)"
+            [stylesMap]="stylesMap">
+        </chat-audio-recorder>
     </div>
 </div>
 

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

@@ -1,25 +1,23 @@
-.textarea-container-wrapper{
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
+
 .textarea-container{
+    // padding: 8px 34px;
+    // padding-left: 70px;
+    // padding-right: 45px;
     display: flex;
+    // width: 100%;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
-}
-.close-chat-container{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
 
-    .c21-close{
-        height: 30px !important;
-        margin: 0px !important;
+    //if attachment icon OR emoji icon is not in DOM -> increment textarea width
+    &:has(:not(#chat21-start-upload-doc), :not(#chat21-emoticon-picker)) .visible-text-area {
+        width: 80%;
     }
+    //if attachment icon AND emoji icon is not in DOM -> increment textarea width
+    &:has(:not(#chat21-start-upload-doc)):has(:not(#chat21-emoticon-picker)) .visible-text-area {
+        width: 90%;
+      }
+
 }
 
 .icons-container{
@@ -421,28 +419,3 @@ textarea:active{
     border: none;
     // margin: -2px -2px 0px;
 }
-
-
-// aggiungi un'animazione di fade in e fade out quando .star-rating-widget è visibile con transition
-.star-rating-widget {
-    transition: all 0.5s ease-in-out;
-}
-
-.star-rating-widget {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -52px;
-    height: 100%;
-    width: 100%;
-    flex-direction: row;
-    justify-content: center;
-    background-color: rgb(255, 255, 255);
-    flex-wrap: nowrap;
-    &.active {
-        bottom: 0px;
-    }
-    &.inactive {
-        bottom: -52px;
-    }
-}

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

@@ -42,7 +42,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Input() isEmojiiPickerShow: boolean;
   @Input() footerMessagePlaceholder: string;
   @Input() fileUploadAccept: string;
-  @Input() closeChatInConversation: boolean;
   @Input() dropEvent: Event;
   @Input() poweredBy: string;
   @Input() stylesMap: Map<string, string>
@@ -53,7 +52,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Output() onChangeTextArea = new EventEmitter<any>();
   @Output() onAttachmentFileButtonClicked = new EventEmitter<any>();
   @Output() onNewConversationButtonClicked = new EventEmitter();
-  @Output() onCloseChatButtonClicked = new EventEmitter();
 
   @ViewChild('chat21_file') public chat21_file: ElementRef;
   // @ViewChild('emojii_container', {read: ViewContainerRef}) selector;
@@ -89,7 +87,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
   file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
-  isErrorNetwork: boolean = false;
 
 
   convertColorToRGBA = convertColorToRGBA;
@@ -712,10 +709,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.onNewConversationButtonClicked.emit();
   }
 
-  onCloseChat(event){
-    this.onCloseChatButtonClicked.emit();
-  }
-
   // onContinueConversation(){
   //   this.hideTextAreaContent = false;
   //   this.onBackButton.emit(false)

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

@@ -16,7 +16,7 @@
         </button>
             
         <!-- ICON MENU OPTION -->
-        <button *ngIf="!isMobile" [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-button-clean" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="toggleMenu()" >
+        <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-button-clean" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="toggleMenu()" >
             <svg aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg"
                 width="24" height="24" viewBox="0 0 24 24">
                 <path fill="none" d="M0 0h24v24H0V0z" />