up csc placeholder and file csv upload

my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss

@@ -1,19 +1,22 @@
+@use "sass:color";
+//@use "../src/styles/variables.scss";
+
 .feedback-button {
-  //background: #ecf3fa;
+  background: #ecf3fa;
-  //color: #083b7d;
+  color: #083b7d;
-  //padding: 15px;
+  padding: 15px;
-  //border-radius: 8px 8px 0 0;
+  border-radius: 8px 8px 0 0;
-  //transform: rotate(270deg);
+  transform: rotate(270deg);
-  //cursor: pointer;
+  cursor: pointer;
-  //display: flex;
+  display: flex;
-  //align-items: center;
+  align-items: center;
-  //gap: 8px;
+  gap: 8px;
-  //
+
-  //margin-right: -35px;
+  margin-right: -35px;
-  //position: fixed;
+  position: fixed;
-  //right: 0;
+  right: 0;
-  //top: 240px;
+  top: 240px;
-  //z-main-button: 100;
+  z-main-button: 100;
 
   &:hover {
     background: #d9e8f6;
@@ -22,168 +25,169 @@
   i {
     font-size: 16px;
   }
-}
 
-// Modal styles
+  // Modal styles
-.feedback-modal-overlay {
+  .feedback-modal-overlay {
-  position: fixed;
+    position: fixed;
-  top: 0;
+    top: 0;
-  left: 0;
+    left: 0;
-  right: 0;
+    right: 0;
-  bottom: 0;
+    bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.feedback-modal {
-  background: white;
-  border-radius: 8px;
-  width: 90%;
-  max-width: 500px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  display: flex;
-  flex-direction: column;
-  max-height: 90vh;
-  overflow: hidden;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #eee;
-
-  h3 {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 600;
-    color: #083b7d;
-  }
-
-  .close-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 20px;
-    color: #666;
-    padding: 4px;
-
-    &:hover {
-      color: #333;
-    }
-  }
-}
-
-.modal-body {
-  padding: 20px;
-  overflow-y: auto;
-
-  .modal-description {
-    margin-bottom: 16px;
-    color: #555;
-  }
-
-  textarea {
-    width: 100%;
-    padding: 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    resize: vertical;
-    font-family: inherit;
-    font-size: 14px;
-
-    &:focus {
-      outline: none;
-      border-color: #083b7d;
-    }
-
-    &:disabled {
-      background-color: #f5f5f5;
-      cursor: not-allowed;
-    }
-  }
-
-  .success-message, .error-message {
-    margin-top: 16px;
-    padding: 10px;
-    border-radius: 4px;
     display: flex;
+    justify-content: center;
     align-items: center;
-    gap: 8px;
+    z-index: 1000;
+  }
 
-    i {
+  .feedback-modal {
+    background: white;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+    max-height: 90vh;
+    overflow: hidden;
+  }
+
+  .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid #eee;
+
+    h3 {
+      margin: 0;
       font-size: 18px;
+      font-weight: 600;
+      color: #083b7d;
+    }
+
+    .close-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 20px;
+      color: #666;
+      padding: 4px;
+
+      &:hover {
+        color: #333;
+      }
     }
   }
 
-  .success-message {
+  .modal-body {
-    background-color: #e6f7e6;
+    padding: 20px;
-    color: #2e7d32;
+    overflow-y: auto;
-  }
 
-  .error-message {
+    .modal-description {
-    background-color: #fdecea;
+      margin-bottom: 16px;
-    color: #d32f2f;
+      color: #555;
-  }
+    }
-}
 
-.modal-footer {
+    textarea {
-  padding: 16px 20px;
+      width: 100%;
-  border-top: 1px solid #eee;
+      padding: 12px;
-  display: flex;
+      border: 1px solid #ddd;
-  justify-content: flex-end;
+      border-radius: 4px;
-  gap: 12px;
+      resize: vertical;
+      font-family: inherit;
+      font-size: 14px;
 
-  button {
+      &:focus {
-    padding: 8px 16px;
+        outline: none;
-    border-radius: 4px;
+        border-color: #083b7d;
-    font-weight: 500;
+      }
-    cursor: pointer;
 
-    &:disabled {
+      &:disabled {
-      opacity: 0.6;
+        background-color: #f5f5f5;
-      cursor: not-allowed;
+        cursor: not-allowed;
+      }
+    }
+
+    .success-message, .error-message {
+      margin-top: 16px;
+      padding: 10px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      i {
+        font-size: 18px;
+      }
+    }
+
+    .success-message {
+      background-color: #e6f7e6;
+      color: #2e7d32;
+    }
+
+    .error-message {
+      background-color: #fdecea;
+      color: #d32f2f;
     }
   }
 
-  .cancel-button {
+  .modal-footer {
-    background: none;
+    padding: 16px 20px;
-    border: 1px solid #ddd;
+    border-top: 1px solid #eee;
-    color: #555;
-
-    &:hover:not(:disabled) {
-      background-color: #f5f5f5;
-    }
-  }
-
-  .submit-button {
-    background-color: #083b7d;
-    color: white;
-    border: none;
     display: flex;
-    align-items: center;
+    justify-content: flex-end;
-    gap: 8px;
+    gap: 12px;
 
-    &:hover:not(:disabled) {
+    button {
-      background-color: #062c5e;
+      padding: 8px 16px;
+      border-radius: 4px;
+      font-weight: 500;
+      cursor: pointer;
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+
+    .cancel-button {
+      background: none;
+      border: 1px solid #ddd;
+      color: #555;
+
+      &:hover:not(:disabled) {
+        background-color: #f5f5f5;
+      }
+    }
+
+    .submit-button {
+      background-color: #083b7d;
+      color: white;
+      border: none;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      &:hover:not(:disabled) {
+        background-color: #062c5e;
+      }
     }
   }
-}
 
-// Spinner animation
+  // Spinner animation
-.spinning {
+  .spinning {
-  animation: spin 1s linear infinite;
+    animation: spin 1s linear infinite;
-}
+  }
 
-@keyframes spin {
+  @keyframes spin {
-  from {
+    from {
-    transform: rotate(0deg);
+      transform: rotate(0deg);
-  }
+    }
-  to {
+    to {
-    transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
   }
+
 }

my-workspace/projects/sae-lib/filters/filters-group/filters-group.html

@@ -3,9 +3,11 @@
     <sae-multi-selector
       (availableChoicesChange)="onAvailableChoicesChange"
       (selectedChoicesChange)="onSelectedChoicesChange"
+      [actionTypes]="actionTypes"
       [availableChoices]="appState.filters.engineType.availableChoices"
       [label]="'Engine type'"
       [selectedChoices]="appState.filters.engineType.selectedChoices"
+      [store]="store"
     ></sae-multi-selector>
     <sae-multi-selector
 

my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss

@@ -1,108 +1,112 @@
 @use '../../src/styles/variables';
 
-.selectors {
+:host {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
 
-  sae-multi-selector {
+  .selectors {
-    margin-left: 20px;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
 
-  }
+    sae-multi-selector {
-}
+      margin-left: 20px;
 
-.dropdown {
-  .dropdown-button {
-    padding: 10px;
-    position: relative;
-    right: 0;
-    top: 0;
-    cursor: pointer;
-
-  }
-
-  &:hover {
-    .dropdown-item {
-      display: block;
     }
   }
 
-  .dropdown-item {
+  .dropdown {
-    display: none;
+    .dropdown-button {
-    background: white;
+      padding: 10px;
-    padding: 12px;
+      position: relative;
-    cursor: pointer;
+      right: 0;
+      top: 0;
+      cursor: pointer;
 
+    }
 
     &:hover {
-      background: #dedede;
+      .dropdown-item {
-      color: #222;
+        display: block;
+      }
     }
-  }
-}
 
-.chips-listing {
+    .dropdown-item {
-  display: flex;
+      display: none;
-  border-radius: 8px;
+      background: white;
-}
+      padding: 12px;
-
+      cursor: pointer;
-.filter-group {
 
 
-  .search {
+      &:hover {
-    display: flex;
+        background: #dedede;
-    min-height: 42px;
+        color: #222;
-    max-height: 42px;
+      }
-    padding: var(--Spacing-Spacing-30, 12px) var(--Spacing-Spacing-40, 16px);
+    }
-    align-items: center;
-    gap: var(--Spacing-Spacing-20, 8px);
-    align-self: stretch;
   }
 
   .chips-listing {
-    margin-top: 16px;
+    display: flex;
-    border-radius: 4px;
-    background: variables.$csc-filters-box-color;
-    width: 100%;
-    height: 400px;
-    padding: 12px;
-
-    .chips-column {
-      padding-right: 10px;
-      width: 210px;
-    }
-
-
-    .chips {
-      background: variables.$csc-chips-bg-color;
-      color: white;
-      border: solid 1px variables.$csc-chips-bg-color;
-      border-radius: 20px;
-      margin-bottom: 10px;
-      display: flex;
-      padding: 8px 10px 10px 12px;
-
-      text-align: center;
-      font-size: 14px;
-      font-weight: 600;
-      line-height: 14px;
-
-      justify-content: center;
-      align-items: center;
-      gap: 5px;
-      align-self: stretch;
-      padding-right: 10px;
-
-
-    }
-
-
-  }
-
-  &.highlighted .chips-listing {
     border-radius: 8px;
-    border: 1px solid #C2A9FD;
-    background: #E3EAF1;
-    box-shadow: 0 0 10px 0 #A86CFD;
   }
+
+  .filter-group {
+
+
+    .search {
+      display: flex;
+      min-height: 42px;
+      max-height: 42px;
+      padding: var(--Spacing-Spacing-30, 12px) var(--Spacing-Spacing-40, 16px);
+      align-items: center;
+      gap: var(--Spacing-Spacing-20, 8px);
+      align-self: stretch;
+    }
+
+    .chips-listing {
+      margin-top: 16px;
+      border-radius: 4px;
+      background: variables.$csc-filters-box-color;
+      width: 100%;
+      height: 400px;
+      padding: 12px;
+
+      .chips-column {
+        padding-right: 10px;
+        width: 210px;
+      }
+
+
+      .chips {
+        background: variables.$csc-chips-bg-color;
+        color: white;
+        border: solid 1px variables.$csc-chips-bg-color;
+        border-radius: 20px;
+        margin-bottom: 10px;
+        display: flex;
+        padding: 8px 10px 10px 12px;
+
+        text-align: center;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 14px;
+
+        justify-content: center;
+        align-items: center;
+        gap: 5px;
+        align-self: stretch;
+        padding-right: 10px;
+
+
+      }
+
+
+    }
+
+    &.highlighted .chips-listing {
+      border-radius: 8px;
+      border: 1px solid #C2A9FD;
+      background: #E3EAF1;
+      box-shadow: 0 0 10px 0 #A86CFD;
+    }
+  }
+
 }

my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts

@@ -2,6 +2,7 @@ import {Component, Input} from '@angular/core';
 import {MultiSelector} from '../../inputs/multi-selector/multi-selector';
 import {NgClass} from '@angular/common';
 
+
 @Component({
   selector: 'sae-filters-group',
   imports: [
@@ -14,6 +15,9 @@ import {NgClass} from '@angular/common';
 export class FiltersGroup {
   @Input() highlighted = false;
   @Input() appState: any = {};
+  @Input() store: any;
+  @Input() actionTypes: any;
+
 
   onSelectedChoicesChange(e: any) {
     console.log('onSelectedChoicesChange', e);

my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.html

@@ -1,44 +1,70 @@
 <div class="translate-texts">
 
-  <div class="columns">
-    <div class="column">
 
-      <div id="fromText">
+  <div id="fromText">
 
-        <!--      delete button from_text-->
+    @if (!fileIsUploaded && !textFocused) {
-        @if (fromText.length > 0) {
+      <button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
-          <button (click)="emptyText('fromText')" class="delete-button button">x</button>
+            <span class="label">
-        }
-        <textarea (keyup)="onFromTextChanged()" [(ngModel)]="fromText" cols="30" id="from_text"
-                  name="from_text"
-                  placeholder=""
-                  rows="10"></textarea>
-
-        <sae-main-button></sae-main-button>
-        <button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
-          <i class="ri-upload-cloud-2-line"></i>
-          <span class="label">
           Upload .csv file
         </span>
-        </button>
+        <i class="ri-upload-cloud-2-line"></i>
-        <input #fileUpload (change)="onFileSelected($event)" class="is-outlined" id="fileUploadTranslator" type="file">
+      </button>
-      </div>
+      <!--          hidden text input-->
-    </div>
+      <input #fileUpload
-    <div class="column">
+             accept=".csv"
+             (change)="onFileSelected($event)" class="is-outlined" id="fileUploadTranslator"
+             type="file">
+    }
+    @if (fileIsUploaded) {
 
+      <div class="file-selected">
+        <div class="labeling">
 
-      <div id="toText">
+          <div>
-        @if (toText.length > 0) {
+
-          <button (click)="emptyText('toText')" class="delete-button button">x</button>
+            <i class="ri ri-file-2-line"></i>
-        }
+          </div>
-        <textarea [(ngModel)]="toText" cols="30" id="to_text" name="to_text" rows="10"></textarea>
+          <div class="label">
-      </div>
+            {{ filePath }}
-      @if (loadingResume) {
+          </div>
-        <div class="loading">
+          <div class="weight">
-          loading...
+            {{ fileWeight }}
+          </div>
         </div>
-      }
+        <button class="remove-file-upload" (click)="onRemoveFileSelected()">x</button>
+      </div>
+    }
+    <!--      delete button from_text-->
 
-    </div>
+    <button (click)="emptyText('fromText')" [ngClass]="{
+      'is-visible' : fromText.length
+      }" class="delete-button button">x
+    </button>
+
+    <textarea
+      (focus)="focusFromText()"
+      (keyup)="onFromTextChanged()"
+      [(ngModel)]="fromText"
+      cols="30"
+      id="from_text"
+      name="from_text"
+      placeholder="Copy/paste client’s question \n or Drag and drop extracted .csv file from CRM portal..."
+      rows="5"></textarea>
   </div>
+
+  <div id="toText">
+
+    @if (loadingResume) {
+      <div class="loading">
+        loading...
+      </div>
+    }
+    @if (toText.length > 0) {
+      <button (click)="emptyText('toText')" class="delete-button button">x</button>
+    }
+    <textarea [(ngModel)]="toText" cols="30" id="to_text" name="to_text" rows="10"></textarea>
+  </div>
+
 </div>
+

my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss

@@ -1,69 +1,141 @@
 @use '../../src/styles/variables';
 
 :host {
+
+
+  .translate-texts {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    gap: 16px;
+  }
+
+  #fromText,
+  #toText {
+    padding: variables.$spacing-4 42px variables.$spacing-4 variables.$spacing-4;
+    box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
+    background: white;
+    height: 235px;
+    width: 648px;
+    overflow-y: auto;
+  }
+
+  .delete-button {
+    border: 0;
+    border-radius: 100%;
+    background: #F2F2F2;
+    color: grey;
+    cursor: pointer;
+    padding: 10px;
+    float: right;
+    width: 37px;
+    visibility: hidden;
+    z-index: 10;
+    position: relative;
+
+    &:hover {
+      background: #888;
+      color: #222;
+      display: block;
+    }
+
+    &.is-visible {
+      visibility: visible;
+    }
+  }
+
   textarea {
     width: 100%;
-    height: 236px;
+    height: 200px;
     flex-shrink: 0;
     border-radius: 4px;
-    background: #FFF;
+
-    box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
+
     border-width: 0;
 
-    color: variables.$csc-textarea-color;
 
-    padding: 16px 42px 16px 16px;
+    color: variables.$csc-text-color;
-
+    font-size: variables.$spacing-4;
-    color: #1B1D27;
-    font-family: Barlow;
-    font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 140%; /* 22.4px */
+    margin-top: -40px;
+    background: transparent;
 
-
+    &::placeholder {
+      color: variables.$csc-textarea-placeholder-color;
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 140%;
+      width: 370px;
+    }
   }
 
-  .textarea-placeholder {
-    color: variables.$csc-textarea-placeholder-color;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 140%;
-  }
 
   .click-file-upload {
     cursor: pointer;
+    display: inline-flex;
+    height: 34px;
+    padding: 8px 20px;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    color: variables.$csc-nav-color;
+    border-radius: variables.$radius-4;
+    border: 1px solid var(--color-text-title, variables.$csc-nav-color);
+    background: var(--color-background-card-on-base, #FFF);
+    left: 0;
+    top: 100px;
+    position: relative;
+    font-weight: 600;
+
+    i {
+      margin-left: 10px;
+    }
   }
-}
 
-#fromText {
+  .file-selected {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
 
+    border-radius: 4px;
+    padding: 10px;
 
-  textarea {
+    background: variables.$csc-file-selector-bg-color;
+
+    .labeling {
+      display: flex;
+      flex-direction: row;
+      justify-content: start;
+
+      div {
+        padding-right: 10px;
+      }
+    }
+
+    .label {
+      color: variables.$csc-text-color;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 140%; /* 19.6px */
+    }
+
+    .weight {
+      color: variables.$csc-light-text-color;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 140%;
+    }
   }
-}
 
-button.is-outlined {
-  display: inline-flex;
-  height: 34px;
-  padding: var(--Spacing-Spacing-10, 4px) var(--Spacing-Spacing-30, 12px) var(--Spacing-Spacing-10, 4px) var(--Spacing-Spacing-20, 8px);
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  color: #255B8E;
-  border-radius: 8px;
-  border: 1px solid var(--color-text-title, #255B8E);
-  background: var(--color-background-card-on-base, #FFF);
-  left: 16px;
-  top: -50px;
-  position: relative;
 
-  i {
+  #fileUploadTranslator {
-    margin-right: 4px;
+    display: none;
   }
-}
 
-#fileUploadTranslator {
-  display: none;
 }

my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts

@@ -1,11 +1,11 @@
 import {Component, EventEmitter, Output} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {Index} from '../index';
+import {NgClass} from '@angular/common';
 
 @Component({
   selector: 'sae-translate-texts',
   standalone: true,
-  imports: [FormsModule, Index],
+  imports: [FormsModule, NgClass],
   templateUrl: './translate-texts.html',
   styleUrl: './translate-texts.scss'
 })
@@ -14,7 +14,17 @@ export class TranslateTexts {
   public toText: string = 'résumé ici'
   public loadingResume: boolean = false;
   public mode: string = 'demo';
-  public debounceEnabled: boolean = false;
+  public debounceEnabled: boolean = true;
+  public textFocused: boolean = false;
+
+  public fileIsUploaded: boolean = false;
+  public filePath: string = '';
+  public fileWeight: string = '';
+  // testing display of file selector
+  // public fileIsUploaded: boolean = true;
+  // public filePath: string = 'abcd.csv';
+  // public fileWeight: string = '12 kb';
+
   public fromTimeout: any;
   public debounceDuration: number = 1000;
   @Output() updateFilters: EventEmitter<any> = new EventEmitter();
@@ -77,13 +87,33 @@ export class TranslateTexts {
     this[someText] = '';
   }
 
-  onFileSelected($event: Event) {
+  onFileSelected($event: any) {
+    console.log('file selected', $event, $event.target.value)
+    if ($event.target.value) {
+      this.fileIsUploaded = true;
+      this.filePath = $event.target.value;
+      this.fileWeight = $event.target.value;
+    }
+  }
 
+  onRemoveFileSelected() {
+    this.fileIsUploaded = false;
+    this.filePath = '';
+    this.fileWeight = '';
+
+    // document.getElementById('fromText')?.focus();
   }
 
   clickFileUpload(fileUpload: HTMLInputElement) {
-
     fileUpload.click();
+    console.log('click file upload', fileUpload)
+  }
 
+  focusFromText(e?: any) {
+    console.log('focus from text', e)
+    console.log('focus from text')
+    this.onRemoveFileSelected()
+    // this.fromText = ' '
+    this.textFocused = true
   }
 }

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html

@@ -4,23 +4,23 @@
 }"
      class="input-box"
 >
-  @if (selectedChoices?.length) {
+
-    <div class="selected-items-counter">
+
-      {{ selectedChoices.length }}
-    </div>
-  }
   <i class="ri-search-line search-placeholder"></i>
   <div class="label">
     <span class="d-none">
     {{ label }}
     </span>
   </div>
-  <!--    (blur)="displayDropdown = false" -->
   <input
-
+    (blur)="displayDropdown = false"
     (click)="onClickInput()" (focus)="displayDropdown = true"
     class="is-hidden" placeholder="{{label}}"
     type="text">
+  <span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
+        class="selected-items-counter">
+    {{ selectedChoices?.length }}
+  </span>
   <div class="dropdown-button selector-button">
     <!--          bouton-->
     <i class="ri-arrow-down-s-line"></i>

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss

@@ -1,107 +1,116 @@
 @use '../../src/styles/variables';
 
-.input-box {
+:host {
-  margin-left: -1rem;
 
-  .d-none {
+  .input-box {
-    display: none;
+    margin-left: -1rem;
-  }
 
-  i {
+    .d-none {
+      display: none;
+    }
 
-    top: 10px;
+    i {
-    left: 1rem;
 
-    &::before {
-      left: 10px;
       top: 10px;
+      left: 1rem;
+
+      &::before {
+        left: 10px;
+        top: 10px;
+      }
+
+      &.is-disabled {
+        color: #525668;
+        fill: #525668;
+      }
     }
 
-    &.is-disabled {
+    .search-placeholder,
-      color: #525668;
+    .selector-button {
-      fill: #525668;
+      position: relative;
-    }
-  }
-
-  .search-placeholder,
-  .selector-button {
-    position: relative;
-  }
-
-  .search-placeholder {
-    top: 30px;
-    left: 16px;
-  }
-
-  .selector-button {
-    top: -36px;
-    right: -165px;
-  }
-
-  .selected-items-counter {
-    background: blue;
-    color: white;
-    border-radius: 200px;
-    padding: 10px;
-    display: inline-block;
-    line-height: 10px;
-    position: relative;
-    top: 33px;
-    left: 136px;
-  }
-
-
-  input {
-
-    border-radius: 8px;
-    border: 1px solid #8D91A4;
-    background: var(--color-background-card-on-base, #FFF);
-
-
-    padding: 10px 40px;
-
-    width: 210px;
-    height: 42px;
-
-    overflow: hidden;
-    color: var(--color-text-secondary, #525668);
-    text-overflow: ellipsis;
-    font-size: var(--Font-Base, 14px);
-
-
-    .is-disabled & {
-      border-color: #525668;
-    }
-  }
-
-  .dropdown {
-    background: white;
-    padding: 1rem;
-    border-radius: 8px;
-    position: relative;
-    display: block;
-    z-index: 10;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-
-    top: -28px;
-    border-left: 1px solid #8D91A4;
-    border-bottom: 1px solid #8D91A4;
-    border-right: 1px solid #8D91A4;
-
-    .dropdown-list {
-      max-height: 200px;
-      overflow-y: auto;
     }
 
-    .dropdown-item {
+    .search-placeholder {
-      padding: 4px;
+      top: 30px;
-      cursor: pointer;
+      left: 16px;
+    }
 
-      &:hover {
+    .selector-button {
-        background: #525668;
+      top: -32px;
-        color: white;
+      right: -183px;
+    }
+
+    .selected-items-counter {
+      background: variables.$csc-chips-bg-color;
+      color: white;
+      border-radius: 200px;
+      padding: 10px;
+      display: inline-block;
+      line-height: 10px;
+      position: relative;
+      top: 2px;
+      left: -53px;
+      visibility: hidden;
+
+      &.is-visible {
+        visibility: visible;
+      }
+    }
+
+
+    input {
+
+      border-radius: 8px;
+      border: 1px solid #8D91A4;
+      background: var(--color-background-card-on-base, #FFF);
+
+
+      padding: 10px 40px;
+
+      width: 210px;
+      height: 42px;
+
+      overflow: hidden;
+      color: var(--color-text-secondary, #525668);
+      text-overflow: ellipsis;
+      font-size: var(--Font-Base, 14px);
+
+
+      .is-disabled & {
+        border-color: #525668;
+      }
+    }
+
+    .dropdown {
+      background: white;
+      padding: 1rem;
+      border-radius: 8px;
+      position: relative;
+      display: block;
+      z-index: 10;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+
+      top: -28px;
+      border-left: 1px solid #8D91A4;
+      border-bottom: 1px solid #8D91A4;
+      border-right: 1px solid #8D91A4;
+
+      .dropdown-list {
+        max-height: 200px;
+        overflow-y: auto;
+      }
+
+      .dropdown-item {
+        padding: 4px;
+        cursor: pointer;
+
+        &:hover {
+          background: #525668;
+          color: white;
+        }
       }
     }
   }
+
 }

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts

@@ -17,6 +17,10 @@ export class MultiSelector {
   @Input() availableChoices: any = ['choix 1', 'choix 2', 'choix 3'];
   @Input() selectedChoices: any = ['choix 4', 'choix 5'];
   @Input() displayDropdown: boolean = false;
+
+  @Input() store: any;
+  @Input() actionTypes: any;
+  
   @Output() selectedChoicesChange = new EventEmitter<any>();
   @Output() availableChoicesChange = new EventEmitter<any>();
 

my-workspace/projects/sae-lib/src/styles/_variables.scss

@@ -56,13 +56,16 @@ $csc-light-yellow-color: #FFF3D8;
 $csc-magic-color: #a86FCD;
 $csc-bg-color: #F5F5F5;
 $csc-title-color: #000;
+$csc-text-color: #1B1D27;
+$csc-light-text-color: #525668;
 
 $csc-nav-color: $main-color-400;
 $csc-chips-bg-color: $main-color-400;
 
 $csc-textarea-color: #1B1D27;
 $csc-textarea-placeholder-color: #7B7B7B;
-$csc-filters-box-color: #E3EAF1;
+$csc-file-selector-bg-color: #e3eaf1;
+$csc-filters-box-color: #e3eaf1;
 
 $bot-bubble: $csc-light-yellow-color;
 // sizes

sae-csc/src/app/pages/main/main.html

@@ -31,7 +31,11 @@
       <h2 class="title">
         Question analysis
       </h2>
-      <sae-bot-talks [message]="'Generating a summary...analyzing client’s question...'"></sae-bot-talks>
+      @if (appState.botMessage) {
+
+        <sae-bot-talks
+          [message]="appState.botMessage"></sae-bot-talks>
+      }
       <!--filters-->
       <!--      advanced filters-->
       <div class="filters-container">

sae-csc/src/app/pages/main/main.scss

@@ -1,5 +1,8 @@
 :host {
 
+  width: 1312px;
+  display: block;
+
   #question_analysis {
     sae-bot-talks {
       top: -50px;
@@ -22,9 +25,22 @@
   }
 
   #translation_request {
+
     .helper {
-      padding-left: 2.65vw;
+      display: flex;
+      flex-direction: row;
+      justify-content: start;
+      align-items: center;
+
       padding-bottom: 16px;
+
+      span {
+        &:nth-of-type(1) {
+          width: 560px;
+          display: inline-block;
+          text-align: right;
+        }
+      }
     }
   }
 

sae-csc/src/app/redux/initialState.ts

@@ -1,7 +1,22 @@
 // Define initial state
 import {StateInterface} from './reducers';
 
-
+export type filterGroupType = {
+  engineType: filterDoubleListType,
+  findings: filterDoubleListType,
+  ata: filterDoubleListType,
+  partNumber: filterDoubleListType,
+  technicalManual: filterDoubleListType,
+  onOffWing: filterDoubleListType,
+}
+export type filterDoubleListType = {
+  availableList: filterListType[],
+  selectedList: filterListType[],
+}
+export type filterListType = {
+  label: string,
+  value: string,
+}
 export const initialState: StateInterface = {
   app: {
     backendAPIRoot: "",
@@ -9,10 +24,17 @@ export const initialState: StateInterface = {
     fromText: "",
     fromFile: "",
     toText: "",
+    botMessage: "Generating a summary...analyzing client’s question...",
     filters: {
       engineType: {
-        availableList: ['choix 1'],
+        availableList: [{
-        selectedList: ['choix 2']
+          label: 'choix 1',
+          value: 'choix 1',
+        }],
+        selectedList: [{
+          label: 'choix 2',
+          value: 'choix 2',
+        }]
       },
       findings: {
         availableList: {},

sae-csc/src/app/redux/reducers/index.ts

@@ -102,6 +102,7 @@ export interface StateInterface {
     fromFile: string,
     fromText: string,
     toText: string,
+    botMessage: string,
     filters: {
       engineType: SelectFilterType,
       findings: SelectFilterType,

sae-csc/src/styles.scss

@@ -3,6 +3,8 @@
 @use "sass:color";
 // lib SAE Aero styles
 @use 'sae-lib/src/styles/index.scss';
+@use 'sae-lib/buttons/feedback-button/feedback-button.scss';
+//@use 'sae-lib/src/styles/feedback.scss';
 /* Fichier de styles global pour l'application */
 
 // Importer les styles principaux

sae-csc/src/styles/_variables-barrel.scss

@@ -1,6 +1,6 @@
 // Ce fichier regroupe toutes les variables de sae-lib pour faciliter l'importation
 @forward 'sae-lib/src/styles/variables.scss';
 
-.all-pages{
+.all-pages {
-  padding: 50px 64px;
+  padding: 70px 64px;
 }

sae-csc/src/styles/app/styles/pages/_main.scss

@@ -7,11 +7,11 @@
     .title {
       font-size: 20px;
       font-weight: 600;
+      margin-bottom: 30px;
     }
 
     .helper {
       text-align: center;
-      margin-bottom: 16px;
 
       color: #000;
       font-size: 16px;
@@ -26,29 +26,6 @@
       }
     }
 
-    .delete-button {
-      border: 0;
-      border-radius: 100%;
-      background: #F2F2F2;
-      color: grey;
-      cursor: pointer;
-      padding: 10px;
-      position: relative;
-      left: 92%;
-      top: 50px;
-      width: 37px;
-      display: none;
-
-      &:hover {
-        background: #888;
-        color: #222;
-        display: block;
-      }
-    }
-
-    textarea {
-
-    }
 
   }