@chat21/chat21-web-widget 5.1.34-rc1 → 5.1.34

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

@@ -1,290 +1,45 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { HttpTestingController } from '@angular/common/http/testing';
+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 { AppConfigService } from '../../../providers/app-config.service';
-import { HEADER_MENU_OPTION } from '../../../utils/constants';
+import { ConversationHeaderComponent } from './conversation-header.component';
+import { TypingService } from '../../../../chat21-core/providers/abstract/typing.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { NGXLogger } from 'ngx-logger';
-import { ConversationHeaderComponent } from './conversation-header.component';
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 
 describe('ConversationHeaderComponent', () => {
   let component: ConversationHeaderComponent;
   let fixture: ComponentFixture<ConversationHeaderComponent>;
-  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();
-
+  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(() => {
     fixture = TestBed.createComponent(ConversationHeaderComponent);
     component = fixture.componentInstance;
-    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();
+    LoggerInstance.setInstance(customLogger)
+    let logger = LoggerInstance.getInstance()
+    component['logger']= logger
   });
 
   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,25 +1,20 @@
 <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 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"
+    <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"
           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"
-        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"
+    <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"
           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"/>
@@ -32,19 +27,10 @@
     </div>
   </div>
   <div class="c21-iframe">
-    <div *ngIf="!hideSpinner" class="lds-roller" aria-hidden="true">
+    <div  *ngIf="!hideSpinner" class="lds-roller">
       <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
     </div>
 
-    <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>
+    <iframe  id="contentFrame" #iframe allowfullscreen title="" 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,101 +1,29 @@
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ConversationInternalFrameComponent } from './conversation-internal-frame.component';
-import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-describe('ConversationInternalFrameComponent', () => {
+
+describe('InterlalFrameComponent', () => {
   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
+      ]
     })
-      .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();
+    .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,27 +1,23 @@
-<div id='c21-preview'
-    role="dialog"
-    aria-modal="true"
-    cdkTrapFocus
-    [cdkTrapFocusAutoCapture]="true"
-    [attr.aria-label]="translationMap?.get('LABEL_PREVIEW')">
+<div id='c21-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 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">
+          <!-- 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">
                 <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>
@@ -41,38 +37,36 @@
 
     <div id="c21-footer">
       <div class="visible-text-area">
-        <textarea
+        <textarea 
           start-focus-chat21-conversation-preview-component
-          inputTextArea
-          #textbox
-          [attr.aria-label]="translationMap?.get('LABEL_PLACEHOLDER')"
-          [attr.aria-multiline]="true"
-          rows="1"
-          id="chat21-main-message-context-preview"
+          inputTextArea 
+          #textbox 
+          tabindex="1502" 
+          aria-labelledby="altTextArea"
+          rows="1" 
+          id="chat21-main-message-context-preview" 
           class='f21textarea c21-button-clean'
           [(ngModel)]="textInputTextArea"
-          (ngModelChange)="onTextAreaChange()"
+          (ngModelChange)="onTextAreaChange()" 
+          (keypress)="onkeypress($event)"
           (keydown)="onkeydown($event)"
           (paste)="onPaste($event)"
           placeholder="{{ translationMap?.get('LABEL_PLACEHOLDER') }}">
         </textarea>
 
       </div>
-      <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)">
+      <div tabindex="-1" class="chat21-textarea-button" id="chat21-button-send" [class.active]="!isFilePendingToLoad " (click)="onSendPressed($event)">
         <span class="v-align-center">
-            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <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">
               <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>
-      </button>
+      </div>
 
     </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>