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

package/src/app/component/message/return-receipt/return-receipt.component.spec.ts

@@ -1,6 +1,10 @@
-import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { MSG_STATUS_SENT } from 'src/chat21-core/utils/constants';
+import {
+  MSG_STATUS_RETURN_RECEIPT,
+  MSG_STATUS_SENT,
+  MSG_STATUS_SENT_SERVER,
+} from 'src/app/utils/constants';
 
 import { ReturnReceiptComponent } from './return-receipt.component';
 
@@ -10,31 +14,48 @@ describe('ReturnReceiptComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ ReturnReceiptComponent ]
-    })
-    .compileComponents();
+      declarations: [ReturnReceiptComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ReturnReceiptComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
 
-  it('shold render MSG_STATUS_SENT icon', ()=> {
-    component.status= MSG_STATUS_SENT
+  it('should render schedule icon when status is falsy', () => {
+    component.status = 0 as any;
+    fixture.detectChanges();
+    const icons = fixture.debugElement.queryAll(By.css('.icon'));
+    expect(icons.length).toBe(1);
+  });
+
+  it('should render sent icon for MSG_STATUS_SENT', () => {
+    component.status = MSG_STATUS_SENT;
+    fixture.detectChanges();
+    expect(fixture.debugElement.queryAll(By.css('.icon')).length).toBe(1);
+  });
+
+  it('should render server-sent icon for MSG_STATUS_SENT_SERVER', () => {
+    component.status = MSG_STATUS_SENT_SERVER;
+    fixture.detectChanges();
+    expect(fixture.debugElement.queryAll(By.css('.icon')).length).toBe(1);
+  });
+
+  it('should render return receipt icon for MSG_STATUS_RETURN_RECEIPT', () => {
+    component.status = MSG_STATUS_RETURN_RECEIPT;
     fixture.detectChanges();
-    expect(component.status).toBe(MSG_STATUS_SENT)
-  })
-
-  // it('shold render MSG_STATUS_SENT icon', ()=> {
-  //   component.status= MSG_STATUS_SENT
-  //   fixture.detectChanges();
-  //   let element = fixture.debugElement.query(By.css('icon'))
-  //   expect(element.classes).toBeE('icon')
-  // })
+    expect(fixture.debugElement.queryAll(By.css('.icon')).length).toBe(1);
+  });
+
+  it('should expose status constants on component', () => {
+    expect(component.MSG_STATUS_SENT).toBe(MSG_STATUS_SENT);
+    expect(component.MSG_STATUS_SENT_SERVER).toBe(MSG_STATUS_SENT_SERVER);
+    expect(component.MSG_STATUS_RETURN_RECEIPT).toBe(MSG_STATUS_RETURN_RECEIPT);
+  });
 });

package/src/app/component/message/text/text.component.html

@@ -1,3 +1,3 @@
-<p  #messageEl class="message_innerhtml marked" 
-    [innerHTML]="printMessage(text, messageEl, this) | marked" 
-    [style.color]="color"></p>
+<div #messageEl class="message_innerhtml marked"
+    [innerHTML]="printMessage(text, messageEl, this) | marked"
+    [style.color]="color"></div>

package/src/app/component/message/text/text.component.scss

@@ -1,113 +1,107 @@
-// Shadow DOM styles - isolati dal resto dell'applicazione
 :host {
     display: block;
-    // Le variabili CSS custom properties possono attraversare il boundary del Shadow DOM
     font-size: var(--font-size-bubble-message, 14px);
 }
 
 .message_innerhtml {
     margin: 0px;
-    // padding: 0px 14px;
-    &.marked{
+
+    &.marked {
         padding: 12px 16px;
-        margin-block-start: 0em!important;
-        margin-block-end: 0em!important;
+        margin-block-start: 0em !important;
+        margin-block-end: 0em !important;
     }
-    
+
     .text-message {
         padding-top: 14px;
     }
-}
 
-p {
-    font-size: inherit;
-    margin: 0;
-    // padding: 14px;
-    line-height: 1.4em;
-    font-style: normal;
-    letter-spacing: normal;
-    font-stretch: normal;
-    font-variant: normal;
-    font-weight: 300;
-    overflow: hidden;
-}
+    p {
+        font-size: inherit;
+        margin: 0;
+        line-height: 1.4em;
+        font-style: normal;
+        letter-spacing: normal;
+        font-stretch: normal;
+        font-variant: normal;
+        font-weight: 300;
+        overflow: hidden;
+    }
 
-p ::ng-deep a,
-p a {
-    word-break: break-word;
-    color: inherit; // Eredita il colore dal parent
-    text-decoration: underline;
-}
+    a {
+        word-break: break-word;
+        color: inherit;
+        text-decoration: underline;
+    }
 
-p ::ng-deep p,
-p a:hover{
-    margin-block-end: 0em;
-    margin-block-start: 0em;
-}
+    a:hover {
+        margin-block-end: 0em;
+        margin-block-start: 0em;
+    }
 
-p ol {
-    margin-block-end: 0em;
-    margin-block-start: 0em;
-    padding-inline-start: 15px;
-    
-    li::before {
-        content: "";
-        font-size: 1.4em;
-        vertical-align: middle;
+    ol {
+        margin-block-end: 0em;
+        margin-block-start: 0em;
+        padding-inline-start: 15px;
+
+        li::before {
+            content: "";
+            font-size: 1.4em;
+            vertical-align: middle;
+        }
     }
-}
 
-// Stili aggiuntivi per elementi markdown comuni
-p h1, p h2, p h3, p h4, p h5, p h6 {
-    margin-block-start: 0.5em;
-    margin-block-end: 0.5em;
-    font-weight: bold;
-    color: inherit; // Eredita il colore dal parent
-}
+    h1, h2, h3, h4, h5, h6 {
+        margin-block-start: 0.5em;
+        margin-block-end: 0.5em;
+        font-weight: bold;
+        color: inherit;
+    }
 
-.message_innerhtml.marked h1 {
-    line-height: normal;
-}
+    &.marked h1 {
+        line-height: normal;
+    }
 
-p ul {
-    margin-block-end: 0em;
-    margin-block-start: 0em;
-    padding-inline-start: 15px;
-}
+    ul {
+        margin-block-end: 0em;
+        margin-block-start: 0em;
+        padding-inline-start: 15px;
+    }
 
-p code {
-    background-color: rgba(0, 0, 0, 0.05);
-    padding: 2px 4px;
-    border-radius: 3px;
-    font-family: monospace;
-}
+    code {
+        background-color: rgba(0, 0, 0, 0.05);
+        padding: 2px 4px;
+        border-radius: 3px;
+        font-family: monospace;
+    }
 
-p pre {
-    background-color: rgba(0, 0, 0, 0.05);
-    padding: 10px;
-    border-radius: 3px;
-    overflow-x: auto;
-}
+    pre {
+        background-color: rgba(0, 0, 0, 0.05);
+        padding: 10px;
+        border-radius: 3px;
+        overflow-x: auto;
+    }
 
-p blockquote {
-    border-left: 3px solid rgba(0, 0, 0, 0.1);
-    padding-left: 10px;
-    margin-left: 0;
-    font-style: italic;
-}
+    blockquote {
+        border-left: 3px solid rgba(0, 0, 0, 0.1);
+        padding-left: 10px;
+        margin-left: 0;
+        font-style: italic;
+    }
 
-p table {
-    border-collapse: collapse;
-    width: 100%;
-    margin: 10px 0;
-}
+    table {
+        border-collapse: collapse;
+        width: 100%;
+        margin: 10px 0;
+    }
 
-p table td, p table th {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    padding: 8px;
-}
+    table td, table th {
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        padding: 8px;
+    }
 
-p table th {
-    background-color: rgba(0, 0, 0, 0.05);
-    font-weight: bold;
+    table th {
+        background-color: rgba(0, 0, 0, 0.05);
+        font-weight: bold;
+    }
 }

package/src/app/component/message/text/text.component.spec.ts

@@ -1,33 +1,126 @@
-import { HtmlEntitiesEncodePipe } from './../../../pipe/html-entities-encode.pipe';
-import { MarkedPipe } from './../../../pipe/marked.pipe';
-import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
+import { MarkedPipe } from '../../../pipe/marked.pipe';
 import { TextComponent } from './text.component';
 
-describe('TextComponent', () => {
+/**
+ * Il template usa solo `| marked` su ciò che ritorna `printMessage(...)`:
+ * `[innerHTML]="printMessage(text, messageEl, this) | marked"`
+ * I test qui riproducono gli stessi use case (XSS / HTML grezzo / markdown) sulla pipeline reale del componente.
+ */
+describe('TextComponent (render via MarkedPipe)', () => {
   let component: TextComponent;
   let fixture: ComponentFixture<TextComponent>;
+  let markedPipe: MarkedPipe;
+
+  function shadowInnerHtml(): string {
+    const host = fixture.nativeElement as HTMLElement;
+    const root = host.shadowRoot;
+    if (!root) {
+      throw new Error('Expected ShadowDom root');
+    }
+    return (root.querySelector('.message_innerhtml') as HTMLElement).innerHTML;
+  }
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ 
-        TextComponent,
-        MarkedPipe,
-        HtmlEntitiesEncodePipe
-      ]
-    })
-    .compileComponents();
+      declarations: [TextComponent, MarkedPipe],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TextComponent);
     component = fixture.componentInstance;
-    component.text = 'Msg text'
-    component.color= 'black'
+    markedPipe = new MarkedPipe();
+    component.text = 'Msg text';
+    component.color = 'black';
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('printMessage should emit before and after and return text (input grezzo per la pipe)', () => {
+    spyOn(component.onBeforeMessageRender, 'emit');
+    spyOn(component.onAfterMessageRender, 'emit');
+    const out = component.printMessage('Hello', {} as any, component);
+    expect(out).toBe('Hello');
+    expect(component.onBeforeMessageRender.emit).toHaveBeenCalled();
+    expect(component.onAfterMessageRender.emit).toHaveBeenCalled();
+  });
+
+  it('should render message container with color style', () => {
+    const host = fixture.nativeElement as HTMLElement;
+    const el = host.shadowRoot!.querySelector('div.message_innerhtml') as HTMLElement;
+    expect(el).toBeTruthy();
+    expect(el.style.color).toBe('black');
+  });
+
+  describe('markdown (use case contenuto legittimo)', () => {
+    it('should render heading and bold from markdown', () => {
+      component.text = '# Title\n\n**Bold**';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html).toMatch(/<h1|<h2/i);
+      expect(html).toMatch(/<strong>|<b>/i);
+    });
+
+    it('should render unordered list from markdown', () => {
+      component.text = '- uno\n- due';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html).toMatch(/<ul/i);
+      expect(html).toMatch(/<li/i);
+    });
+
+    it('should render safe https link with rel=noopener (MarkedPipe renderer)', () => {
+      component.text = '[label](https://example.com/path)';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html).toContain('https://example.com/path');
+      expect(html).toContain('rel="noopener noreferrer"');
+      expect(html).toContain('target="_blank"');
+    });
+  });
+
+  describe('sicurezza / anti code-injection (stesso use case, solo marked)', () => {
+    it('should not leave raw script tags in DOM innerHTML', () => {
+      component.text = '<script>alert(1)</script>testo';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html.toLowerCase()).not.toContain('<script');
+      expect(html).toContain('&lt;');
+    });
+
+    it('should escape inline HTML img/onerror so it is not a live <img> node', () => {
+      component.text = 'Hi <img src=x onerror="alert(1)">';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html.toLowerCase()).not.toContain('<img');
+      expect(html).toContain('&lt;');
+    });
+
+    it('should not emit javascript: href for markdown link', () => {
+      component.text = '[bad](javascript:void(0))';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html).not.toMatch(/href=["']javascript:/i);
+    });
+
+    it('should not emit data: href for markdown link', () => {
+      component.text = '[bad](data:text/html,<script>alert(1)</script>)';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html).not.toMatch(/href=["']data:/i);
+    });
+
+    it('DOM innerHTML should match MarkedPipe applied to printMessage output (stessa pipeline del template)', () => {
+      component.text = 'Line1\n\n**x**';
+      fixture.detectChanges();
+      const raw = component.printMessage(component.text, {} as any, component);
+      const viaPipe = markedPipe.transform(raw) as string;
+      expect(shadowInnerHtml()).toBe(viaPipe);
+    });
+  });
 });

package/src/app/component/message-attachment/message-attachment.component.spec.ts

@@ -1,33 +1,154 @@
-import { ActionButtonComponent } from './../message/buttons/action-button/action-button.component';
-import { TextButtonComponent } from './../message/buttons/text-button/text-button.component';
-import { LinkButtonComponent } from './../message/buttons/link-button/link-button.component';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { MessageModel } from 'src/chat21-core/models/message';
+import { ActionButtonComponent } from '../message/buttons/action-button/action-button.component';
+import { LinkButtonComponent } from '../message/buttons/link-button/link-button.component';
+import { TextButtonComponent } from '../message/buttons/text-button/text-button.component';
 
 import { MessageAttachmentComponent } from './message-attachment.component';
 
+function makeMessageWithAttachment(buttons: any[]): MessageModel {
+  return new MessageModel(
+    'm1',
+    'it',
+    'r1',
+    'Recipient',
+    's1',
+    'Sender',
+    200,
+    {},
+    'testo',
+    Date.now(),
+    'text',
+    {
+      attachment: {
+        type: 'template',
+        buttons,
+      },
+    },
+    'chat',
+    true,
+    false,
+  );
+}
+
 describe('MessageAttachmentComponent', () => {
   let component: MessageAttachmentComponent;
   let fixture: ComponentFixture<MessageAttachmentComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ 
-        MessageAttachmentComponent, 
-        LinkButtonComponent, 
-        TextButtonComponent, 
-        ActionButtonComponent 
-      ]
-    })
-    .compileComponents();
+      imports: [CommonModule],
+      declarations: [
+        MessageAttachmentComponent,
+        LinkButtonComponent,
+        TextButtonComponent,
+        ActionButtonComponent,
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MessageAttachmentComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    component.isConversationArchived = false;
+    component.isLastMessage = true;
+    component.fullscreenMode = false;
+    component.limit = 5;
+    component.stylesMap = new Map<string, string>([
+      ['buttonFontSize', '14px'],
+      ['buttonBackgroundColor', '#eee'],
+      ['buttonTextColor', '#111'],
+      ['buttonHoverBackgroundColor', '#ddd'],
+      ['buttonHoverTextColor', '#000'],
+    ]);
   });
 
   it('should create', () => {
+    component.message = makeMessageWithAttachment([]);
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
+
+  it('getAttachmentButton should read type and buttons from message.attributes.attachment', () => {
+    component.message = makeMessageWithAttachment([
+      { type: 'text', value: 'OK' },
+      { type: 'url', value: 'Apri', link: 'https://example.com' },
+    ]);
+    component.ngOnInit();
+    expect(component.type).toBe('template');
+    expect((component.buttons as unknown as any[]).length).toBe(2);
+  });
+
+  it('should render text and url attachment buttons in DOM when isLastMessage is true for text', () => {
+    component.message = makeMessageWithAttachment([
+      { type: 'text', value: 'Conferma' },
+      { type: 'url', value: 'Vai', link: 'https://example.com', target: '_blank' },
+    ]);
+    fixture.detectChanges();
+    const root = fixture.nativeElement.querySelector('#buttons-in-message') as HTMLElement;
+    expect(root).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('chat-text-button-attachment')).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('chat-link-button-attachment')).toBeTruthy();
+    const textBtn = fixture.nativeElement.querySelector('chat-text-button-attachment .text') as HTMLElement;
+    expect(textBtn.textContent?.trim()).toContain('Conferma');
+  });
+
+  it('should respect limit via slice (only first button when limit is 1)', () => {
+    component.limit = 1;
+    component.message = makeMessageWithAttachment([
+      { type: 'text', value: 'A' },
+      { type: 'text', value: 'B' },
+    ]);
+    fixture.detectChanges();
+    const textButtons = fixture.nativeElement.querySelectorAll('chat-text-button-attachment');
+    expect(textButtons.length).toBe(1);
+  });
+
+  it('should hide text and action buttons when isLastMessage is false', () => {
+    component.isLastMessage = false;
+    component.message = makeMessageWithAttachment([
+      { type: 'text', value: 'Nascosto' },
+      { type: 'url', value: 'Visibile', link: 'https://x.com' },
+    ]);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('chat-text-button-attachment')).toBeNull();
+    expect(fixture.nativeElement.querySelector('chat-link-button-attachment')).toBeTruthy();
+  });
+
+  it('returnOnAttachmentButtonClicked should emit structured event when target exists', () => {
+    component.message = makeMessageWithAttachment([{ type: 'text', value: 'X' }]);
+    fixture.detectChanges();
+    spyOn(component.onAttachmentButtonClicked, 'emit');
+    const inner = fixture.debugElement.query(By.css('chat-text-button-attachment .text'));
+    inner.triggerEventHandler('click', {});
+    expect(component.onAttachmentButtonClicked.emit).toHaveBeenCalled();
+    const arg = (component.onAttachmentButtonClicked.emit as jasmine.Spy).calls.mostRecent().args[0];
+    expect(arg.message).toBe(component.message);
+    expect(arg.target).toBeTruthy();
+  });
+
+  it('returnOnAttachmentButtonClicked should not emit when event has no target', () => {
+    component.message = makeMessageWithAttachment([{ type: 'text', value: 'X' }]);
+    fixture.detectChanges();
+    spyOn(component.onAttachmentButtonClicked, 'emit');
+    component.returnOnAttachmentButtonClicked({} as any);
+    expect(component.onAttachmentButtonClicked.emit).not.toHaveBeenCalled();
+  });
+
+  it('ngAfterViewInit should emit onElementRendered for attachment', () => {
+    spyOn(component.onElementRendered, 'emit');
+    component.message = makeMessageWithAttachment([{ type: 'url', value: 'L', link: 'https://a' }]);
+    fixture.detectChanges();
+    component.ngAfterViewInit();
+    expect(component.onElementRendered.emit).toHaveBeenCalledWith({ element: 'attachment', status: true });
+  });
+
+  it('should render action button when type is action and isLastMessage', () => {
+    component.message = makeMessageWithAttachment([{ type: 'action', value: 'Azione', action: 'reply' }]);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('chat-action-button-attachment')).toBeTruthy();
+  });
 });

package/src/app/component/selection-department/selection-department.component.html

@@ -1,24 +1,25 @@
-<!-- <div id="chat21-modal-content modal-body"></div> -->
-<!-- tabindex="1200"-->
-
-<div id="chat21-selection-department" 
+<div id="chat21-selection-department"
     #afSelectionDepartment
-    tabindex="1200"
+    role="dialog"
     aria-modal="true"
-    onFocus="document.querySelector('[start-focus-chat21-selection-department]').focus()">
+    cdkTrapFocus
+    [cdkTrapFocusAutoCapture]="true"
+    [attr.aria-label]="g.LABEL_SELECT_TOPIC">
 
     <!-- HEADER -->
-    <div class="c21-header" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }" >
+    <div class="c21-header" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }">
         <div class="c21-header-container">
 
-            <!-- ICON CLOSE CHAT -->
+            <!-- ICON CLOSE PANEL -->
             <div class="c21-header-button">
-                <div class="c21-close-button c21-small" role="button">
-                    <button tabindex="1210" aria-label=" chiudi pannello" class="c21-close-button-body" (click)="closePage()">
-                        <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
+                <div class="c21-close-button c21-small">
+                    <button type="button"
+                        [attr.aria-label]="g.BUTTON_CLOSE_TO_ICON || 'Close panel'"
+                        class="c21-close-button-body"
+                        (click)="closePage()">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" 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">{{BUTTON_CLOSE_CHAT}}</title> -->
                         </svg>
                     </button>
                 </div>
@@ -26,9 +27,7 @@
 
             <!-- CONTENT HEADER -->
             <div class="c21-header-content">
-                <!-- TITLE HEADER -->
                 <div class="c21-title" [ngStyle]="{'color': g.themeForegroundColor}">
-                    <!-- <span>{{g.LABEL_SELECT_TOPIC}}</span> -->
                 </div>
             </div>
 
@@ -40,15 +39,17 @@
         <div class="c21-body-container">
 
             <div class="c21-body-header">
-                <div start-focus-chat21-selection-department tabindex="1201" class="c21-message-field">{{g.LABEL_SELECT_TOPIC}}</div>
+                <h2 start-focus-chat21-selection-department class="c21-message-field">{{g.LABEL_SELECT_TOPIC}}</h2>
             </div>
 
-            <div class="c21-body-content" tabindex="211" onFocus="document.querySelector('[start-focus]').focus()">
+            <div class="c21-body-content">
                 <ul class="chat21-content-modal-select">
                     <li *ngFor="let department of departments; let i = index">
-                        <button tabindex="1202" class="c21-button-department c21-button-clean" (click)="onSelectDepartment(department)">
-                            <span  class="chat21-badge">{{i+1}}</span>
-                            <span class="chat21-name-list" >{{department?.name}}</span>
+                        <button type="button"
+                            class="c21-button-department c21-button-clean"
+                            (click)="onSelectDepartment(department)">
+                            <span class="chat21-badge" aria-hidden="true">{{i+1}}</span>
+                            <span class="chat21-name-list">{{department?.name}}</span>
                         </button>
                     </li>
                 </ul>
@@ -56,7 +57,4 @@
 
         </div>
     </div>
-    
-    <span style="height:0px" tabindex="1299" onFocus="document.querySelector('[start-focus-chat21-selection-department]').focus()"></span> 
-</div> 
-   
+</div>