@chat21/chat21-web-widget 5.1.32-rc9 → 5.1.33-rc11

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

@@ -1,45 +1,290 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { AppConfigService } from './../../../providers/app-config.service';
-import { Globals } from './../../../utils/globals';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { HttpTestingController } from '@angular/common/http/testing';
 
-import { ConversationHeaderComponent } from './conversation-header.component';
-import { TypingService } from '../../../../chat21-core/providers/abstract/typing.service';
+import { AppConfigService } from '../../../providers/app-config.service';
+import { HEADER_MENU_OPTION } from '../../../utils/constants';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { NGXLogger } from 'ngx-logger';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
+import { NGXLogger } from 'ngx-logger';
+import { ConversationHeaderComponent } from './conversation-header.component';
 
 describe('ConversationHeaderComponent', () => {
   let component: ConversationHeaderComponent;
   let fixture: ComponentFixture<ConversationHeaderComponent>;
-  let ngxlogger: NGXLogger;
-  let customLogger = new CustomLogger(ngxlogger)
-  
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-    declarations: [ConversationHeaderComponent],
-    schemas: [NO_ERRORS_SCHEMA],
-    imports: [],
-    providers: [
-        Globals,
-        TypingService,
-        AppConfigService,
-        provideHttpClient(withInterceptorsFromDi())
-    ]
-})
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
+  let httpMock: HttpTestingController;
+
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+  const customLogger = new CustomLogger(ngxlogger);
+
+  const apiUrl = 'https://api.example.com/';
+  const appConfigStub = {
+    getConfig: jasmine.createSpy('getConfig').and.returnValue({ apiUrl }),
+  };
+
+  beforeEach(async () => {
+    LoggerInstance.setInstance(customLogger);
+
+    await TestBed.configureTestingModule({
+      declarations: [ConversationHeaderComponent],
+      providers: [
+        { provide: AppConfigService, useValue: appConfigStub },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    })
+      .overrideComponent(ConversationHeaderComponent, {
+        set: {
+          template: `
+            <button class="back" (click)="returnHome()">back</button>
+            <button class="close-widget" (click)="closeWidget()">closeW</button>
+            <button class="toggle-menu" (click)="toggleMenu()">menu</button>
+            <button class="close-chat" (click)="closeChat()">closeChat</button>
+            <button class="restart" (click)="restartChat()">restart</button>
+            <button class="detail" (click)="openDetail()">detail</button>
+            <button class="signout" (click)="signOut()">signout</button>
+            <button class="sound" (click)="toggleSound()">sound</button>
+            <button class="max" (click)="onChangeSize('max')">max</button>
+            <button class="min" (click)="onChangeSize('min')">min</button>
+            <button class="top" (click)="onChangeSize('top')">top</button>
+            <button class="transcript" (click)="dowloadTranscript()">transcript</button>
+          `,
+        },
+      })
+      .compileComponents();
+
     fixture = TestBed.createComponent(ConversationHeaderComponent);
     component = fixture.componentInstance;
-    LoggerInstance.setInstance(customLogger)
-    let logger = LoggerInstance.getInstance()
-    component['logger']= logger
+    httpMock = TestBed.inject(HttpTestingController);
+    component.translationMap = new Map([['OPTIONS', 'Opt']]);
+    component.senderId = 'sender-1';
+    component.idConversation = 'conv-1';
+    component.windowContext = window;
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    httpMock.verify();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('constructor / ngOnInit', () => {
+    it('should read apiUrl from AppConfigService', () => {
+      expect((component as any).API_URL).toBe(apiUrl);
+    });
+
+    it('ngOnInit should add senderId to membersConversation', () => {
+      const m = new ConversationHeaderComponent(appConfigStub as unknown as AppConfigService);
+      m.senderId = 'u1';
+      m.translationMap = new Map();
+      m.ngOnInit();
+      expect(m.membersConversation).toContain('u1');
+    });
+  });
+
+  describe('ngOnChanges', () => {
+    it('should run when idConversation is set', () => {
+      component.idConversation = 'new-id';
+      component.ngOnChanges({
+        idConversation: {
+          previousValue: undefined,
+          currentValue: 'new-id',
+          firstChange: true,
+          isFirstChange: () => true,
+        },
+      });
+      expect(component).toBeTruthy();
+    });
+  });
+
+  describe('ngAfterViewInit', () => {
+    it('should enable header buttons', () => {
+      component.isButtonsDisabled = true;
+      component.ngAfterViewInit();
+      expect(component.isButtonsDisabled).toBe(false);
+    });
+  });
+
+  describe('click handlers / outputs', () => {
+    it('returnHome should emit onBack', () => {
+      spyOn(component.onBack, 'emit');
+      component.returnHome();
+      expect(component.onBack.emit).toHaveBeenCalled();
+    });
+
+    it('closeWidget should emit onCloseWidget', () => {
+      spyOn(component.onCloseWidget, 'emit');
+      component.closeWidget();
+      expect(component.onCloseWidget.emit).toHaveBeenCalled();
+    });
+
+    it('toggleMenu should flip menu visibility', () => {
+      spyOn(component.onMenuOptionShow, 'emit');
+      component.isMenuShow = false;
+      component.toggleMenu();
+      expect(component.onMenuOptionShow.emit).toHaveBeenCalledWith(true);
+    });
+
+    it('closeChat should emit CLOSE option', () => {
+      spyOn(component.onMenuOptionClick, 'emit');
+      component.closeChat();
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.CLOSE);
+    });
+
+    it('restartChat should emit RESTART and close menu', () => {
+      spyOn(component.onMenuOptionClick, 'emit');
+      spyOn(component.onMenuOptionShow, 'emit');
+      component.restartChat();
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.RESTART);
+      expect(component.onMenuOptionShow.emit).toHaveBeenCalledWith(false);
+    });
+
+    it('openDetail should emit DETAIL', () => {
+      spyOn(component.onMenuOptionClick, 'emit');
+      component.openDetail();
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.DETAIL);
+    });
+
+    it('signOut should emit LOGOUT', () => {
+      spyOn(component.onMenuOptionClick, 'emit');
+      component.signOut();
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.LOGOUT);
+    });
+
+    it('onChangeSize max should emit MAXIMIZE and close menu', () => {
+      spyOn(component.onMenuOptionClick, 'emit');
+      spyOn(component.onMenuOptionShow, 'emit');
+      component.onChangeSize('max');
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.MAXIMIZE);
+      expect(component.onMenuOptionShow.emit).toHaveBeenCalledWith(false);
+    });
+
+    it('toggleSound should emit volume option and flip soundEnabled', () => {
+      spyOn(component.onMenuOptionClick, 'emit');
+      spyOn(component.onMenuOptionShow, 'emit');
+      component.soundEnabled = false;
+      component.toggleSound();
+      expect(component.soundEnabled).toBe(true);
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.VOLUME_ON);
+      component.toggleSound();
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.VOLUME_OFF);
+    });
+  });
+
+  describe('dowloadTranscript', () => {
+    it('should open transcript URL in windowContext', () => {
+      const openSpy = jasmine.createSpy('open');
+      component.windowContext = { open: openSpy };
+      component.idConversation = 'req-99';
+      component.dowloadTranscript();
+      expect(openSpy).toHaveBeenCalledWith(apiUrl + 'public/requests/req-99/messages-user.html', '_blank');
+    });
+  });
+
+  describe('DOM integration', () => {
+    it('should wire back button', () => {
+      spyOn(component, 'returnHome');
+      const btn = fixture.nativeElement.querySelector('.back');
+      btn.click();
+      expect(component.returnHome).toHaveBeenCalled();
+    });
+  });
+
+  describe('ngOnDestroy', () => {
+    it('should clear subscription entries when subscriptions use value.unsubscribe', () => {
+      const unsub = jasmine.createSpy('unsubscribe');
+      (component as any).subscriptions = [{ value: { unsubscribe: unsub } }];
+      component.ngOnDestroy();
+      expect(unsub).toHaveBeenCalled();
+      expect((component as any).subscriptions.length).toBe(0);
+    });
+
+    it('should not throw when subscriptions is empty', () => {
+      (component as any).subscriptions = [];
+      expect(() => component.ngOnDestroy()).not.toThrow();
+    });
+  });
+
+  describe('onChangeSize edge cases', () => {
+    beforeEach(() => {
+      spyOn(component.onMenuOptionClick, 'emit');
+      spyOn(component.onMenuOptionShow, 'emit');
+    });
+
+    it('should emit MINIMIZE for min', () => {
+      component.onChangeSize('min');
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.MINIMIZE);
+    });
+
+    it('should emit TOP for top', () => {
+      component.onChangeSize('top');
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.TOP);
+    });
+
+    it('should emit nothing for unknown status (only menu close)', () => {
+      (component.onMenuOptionClick.emit as jasmine.Spy).calls.reset();
+      component.onChangeSize('unknown' as any);
+      expect(component.onMenuOptionClick.emit).not.toHaveBeenCalled();
+      expect(component.onMenuOptionShow.emit).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('toggleMenu observable-style flips', () => {
+    it('should emit negation when menu already open', () => {
+      spyOn(component.onMenuOptionShow, 'emit');
+      component.isMenuShow = true;
+      component.toggleMenu();
+      expect(component.onMenuOptionShow.emit).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('dowloadTranscript error handling', () => {
+    it('should propagate open failure and not emit menu close after throw', () => {
+      spyOn(component.onMenuOptionShow, 'emit');
+      component.windowContext = {
+        open: jasmine.createSpy('open').and.throwError('blocked'),
+      };
+      expect(() => component.dowloadTranscript()).toThrow();
+      expect(component.onMenuOptionShow.emit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('DOM click integration (handlers)', () => {
+    const clickClass = (cls: string) => (fixture.nativeElement as HTMLElement).querySelector(cls)?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    it('wires close-widget, toggle-menu, transcript', () => {
+      spyOn(component, 'closeWidget');
+      spyOn(component, 'toggleMenu');
+      spyOn(component, 'dowloadTranscript');
+      clickClass('.close-widget');
+      clickClass('.toggle-menu');
+      clickClass('.transcript');
+      expect(component.closeWidget).toHaveBeenCalled();
+      expect(component.toggleMenu).toHaveBeenCalled();
+      expect(component.dowloadTranscript).toHaveBeenCalled();
+    });
+
+    it('wires sound and resize buttons', () => {
+      spyOn(component, 'toggleSound');
+      spyOn(component, 'onChangeSize');
+      clickClass('.sound');
+      clickClass('.max');
+      expect(component.toggleSound).toHaveBeenCalled();
+      expect(component.onChangeSize).toHaveBeenCalledWith('max');
+    });
+  });
+
+  describe('ngOnInit edge', () => {
+    it('should push undefined senderId when missing', () => {
+      const h = new ConversationHeaderComponent(appConfigStub as unknown as AppConfigService);
+      h.senderId = undefined as any;
+      h.translationMap = new Map();
+      h.ngOnInit();
+      expect(h.membersConversation.length).toBeGreaterThan(1);
+    });
+  });
 });

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

@@ -1,20 +1,25 @@
 <div class="c21-iframe-container" [@enterAnimation]>
-  <!-- 'background-color': stylesMap?.get('backgroundColor'), 'color': styleMap?.get('foregroundColor'), 'background-image': 'linear-gradient( 180grad,' + stylesMap?.get('themeColor')+','+ convertColorToRGBA(stylesMap?.get('themeColor'), 50)+')' -->
   <div class="c21-iframe-header c21-header" [ngStyle]="{ 'background-image': stylesMap?.get('colorGradient')}">
-    
+
     <!-- ICON BACK CHAT -->
-    <button tabindex="1530" class="c21-header-button c21-left c21-button-clean" (click)="returnClose()">
-      <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg"
+    <button type="button"
+        class="c21-header-button c21-left c21-button-clean"
+        [attr.aria-label]="translationMap?.get('CLOSE') || 'Close'"
+        (click)="returnClose()">
+      <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg"
           width="24px" height="24px" viewBox="0 0 24 24">
           <path fill="none" d="M0 0h24v24H0V0z" />
           <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z" />
-          <title id="altIconTitle">{{ translationMap?.get('CLOSE') }}</title>
       </svg>
     </button>
 
     <!-- ICON OPEN EXTERNAL -->
-    <button *ngIf="openExternalLinkButton" tabindex="1530" class="c21-header-button c21-right c21-button-clean" (click)="returnOpenExternal()">
-      <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg"
+    <button *ngIf="openExternalLinkButton"
+        type="button"
+        class="c21-header-button c21-right c21-button-clean"
+        aria-label="Open in a new window"
+        (click)="returnOpenExternal()">
+      <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg"
           width="24px" height="24px" viewBox="0 0 24 24">
           <path d="M0 0h24v24H0z" fill="none"/>
           <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
@@ -27,10 +32,19 @@
     </div>
   </div>
   <div class="c21-iframe">
-    <div  *ngIf="!hideSpinner" class="lds-roller">
+    <div *ngIf="!hideSpinner" class="lds-roller" aria-hidden="true">
       <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
     </div>
 
-    <iframe  id="contentFrame" #iframe allowfullscreen title="" width="100%" height="100%" style= "border:none;" [src] = "url" (load)="onIframeLoaded($event)" (error)="onError($event)"></iframe>
+    <iframe id="contentFrame" #iframe
+      allowfullscreen
+      [title]="button?.value || 'Embedded conversation panel'"
+      sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"
+      referrerpolicy="strict-origin-when-cross-origin"
+      loading="lazy"
+      width="100%" height="100%" style="border:none;"
+      [src]="url"
+      (load)="onIframeLoaded($event)"
+      (error)="onError($event)"></iframe>
   </div>
 </div>

package/src/app/component/conversation-detail/conversation-internal-frame/conversation-internal-frame.component.spec.ts

@@ -1,29 +1,101 @@
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ConversationInternalFrameComponent } from './conversation-internal-frame.component';
-
-describe('InterlalFrameComponent', () => {
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+describe('ConversationInternalFrameComponent', () => {
   let component: ConversationInternalFrameComponent;
   let fixture: ComponentFixture<ConversationInternalFrameComponent>;
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+  const customLogger = new CustomLogger(ngxlogger);
 
   beforeEach(waitForAsync(() => {
+    LoggerInstance.setInstance(customLogger);
     TestBed.configureTestingModule({
-      declarations: [ ConversationInternalFrameComponent ],
-      imports: [
-        BrowserAnimationsModule
-      ]
+      declarations: [ConversationInternalFrameComponent],
+      imports: [BrowserAnimationsModule],
     })
-    .compileComponents();
+      .overrideComponent(ConversationInternalFrameComponent, {
+        set: {
+          template: `
+            <iframe #iframe title="inner" src="about:blank"></iframe>
+            <button type="button" (click)="returnClose()">close</button>
+            <button type="button" (click)="returnOpenExternal()">ext</button>
+          `,
+        },
+      })
+      .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ConversationInternalFrameComponent);
     component = fixture.componentInstance;
+    component.button = { link: 'https://example.com/path', value: 'Test' };
+    component.translationMap = new Map();
+    component.stylesMap = new Map();
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('ngOnInit', () => {
+    it('should trust resource URL from button.link', () => {
+      expect(component.url).toBeDefined();
+    });
+
+    it('should leave url unset when button has no link', () => {
+      const f = TestBed.createComponent(ConversationInternalFrameComponent);
+      const c = f.componentInstance;
+      c.button = { value: 'x' };
+      c.ngOnInit();
+      expect(c.url).toBeUndefined();
+      f.destroy();
+    });
+  });
+
+  describe('ngAfterViewInit', () => {
+    it('should run without throwing when iframe is present', () => {
+      expect(() => component.ngAfterViewInit()).not.toThrow();
+    });
+  });
+
+  describe('events', () => {
+    it('returnClose should emit onClose and set closed state', () => {
+      spyOn(component.onClose, 'emit');
+      component.returnClose();
+      expect(component.isOpen).toBe('closed');
+      expect(component.onClose.emit).toHaveBeenCalled();
+    });
+
+    it('returnOpenExternal should emit button payload', () => {
+      spyOn(component.onOpenExternal, 'emit');
+      component.returnOpenExternal();
+      expect(component.onOpenExternal.emit).toHaveBeenCalledWith(component.button);
+    });
+
+    it('onIframeLoaded should hide spinner', () => {
+      component.hideSpinner = false;
+      component.onIframeLoaded({});
+      expect(component.hideSpinner).toBe(true);
+    });
+
+    it('onError should log', () => {
+      spyOn((component as any).logger, 'error');
+      component.onError({ message: 'x' });
+      expect((component as any).logger.error).toHaveBeenCalled();
+    });
+  });
+
+  describe('ngOnDestroy', () => {
+    it('should reset url and spinner', () => {
+      component.url = {} as any;
+      component.hideSpinner = true;
+      component.ngOnDestroy();
+      expect(component.url).toBeNull();
+      expect(component.hideSpinner).toBe(false);
+    });
+  });
 });

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

@@ -1,23 +1,27 @@
-<div id='c21-preview' >
+<div id='c21-preview'
+    role="dialog"
+    aria-modal="true"
+    cdkTrapFocus
+    [cdkTrapFocusAutoCapture]="true"
+    [attr.aria-label]="translationMap?.get('LABEL_PREVIEW')">
   <div class="modal-preview-image" #divPreview id="divPreview">
 
     <div class="c21-header">
       <div class="c21-header-container">
 
         <div class="c21-header-content">
-          <!-- ICON CLOSE CHAT -->
-          <button tabindex="-1" class="c21-header-button c21-right c21-close c21-button-clean" [ngStyle]="{'display': (hideHeaderCloseButton)?'none':'flex'}" (click)="onClickClose()">
-            <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('themeColor') }" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+          <!-- ICON CLOSE PREVIEW -->
+          <button type="button"
+              class="c21-header-button c21-right c21-close c21-button-clean"
+              [attr.aria-label]="translationMap?.get('BUTTON_CLOSE_PREVIEW') || translationMap?.get('CLOSE')"
+              [ngStyle]="{'display': (hideHeaderCloseButton)?'none':'flex'}"
+              (click)="onClickClose()">
+            <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('themeColor') }" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                 <path fill="none" d="M0 0h24v24H0V0z" />
                 <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
-                <title id="altIconTitle">{{ translationMap?.get('CLOSE') }}</title>
             </svg>
         </button>
 
-           <!-- TITLE -->
-          <!-- <div class="c21-title" [ngStyle]="{'color': stylesMap?.get('themeColor') }">
-            <div class="titleText">{{ translationMap?.get('LABEL_PREVIEW') }}</div>
-          </div> -->
         </div>
 
       </div>
@@ -37,36 +41,38 @@
 
     <div id="c21-footer">
       <div class="visible-text-area">
-        <textarea 
+        <textarea
           start-focus-chat21-conversation-preview-component
-          inputTextArea 
-          #textbox 
-          tabindex="1502" 
-          aria-labelledby="altTextArea"
-          rows="1" 
-          id="chat21-main-message-context-preview" 
+          inputTextArea
+          #textbox
+          [attr.aria-label]="translationMap?.get('LABEL_PLACEHOLDER')"
+          [attr.aria-multiline]="true"
+          rows="1"
+          id="chat21-main-message-context-preview"
           class='f21textarea c21-button-clean'
           [(ngModel)]="textInputTextArea"
-          (ngModelChange)="onTextAreaChange()" 
-          (keypress)="onkeypress($event)"
+          (ngModelChange)="onTextAreaChange()"
           (keydown)="onkeydown($event)"
           (paste)="onPaste($event)"
           placeholder="{{ translationMap?.get('LABEL_PLACEHOLDER') }}">
         </textarea>
 
       </div>
-      <div tabindex="-1" class="chat21-textarea-button" id="chat21-button-send" [class.active]="!isFilePendingToLoad " (click)="onSendPressed($event)">
+      <button type="button"
+          class="chat21-textarea-button c21-button-clean"
+          id="chat21-button-send"
+          [class.active]="!isFilePendingToLoad"
+          [attr.aria-label]="translationMap?.get('BUTTON_SEND_MESSAGE')"
+          (click)="onSendPressed($event)">
         <span class="v-align-center">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
               <path d="M1.8,18.9V1.7L22,10.3L1.8,18.9z M3.9,15.6l12.6-5.4L3.9,4.9v3.7l6.4,1.6l-6.4,1.6V15.6z M3.9,15.6V4.9v7V15.6z"/>
             </svg>
         </span>
-      </div>
+      </button>
 
     </div>
 
   </div>
 
 </div>
-<span id="testFocus" tabindex="1599" onFocus="document.querySelector('[start-focus-chat21-conversation-preview-component]').focus()"></span>
-<span id="altTextArea" style="display: none">scrivi la tua domanda</span>