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,7 +25,6 @@
   i {
     font-size: 16px;
   }
-}
 
   // Modal styles
   .feedback-modal-overlay {
@@ -187,3 +189,5 @@
       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,5 +1,7 @@
 @use '../../src/styles/variables';
 
+:host {
+
   .selectors {
     display: flex;
     flex-direction: row;
@@ -106,3 +108,5 @@
       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">
 
-        <!--      delete button from_text-->
+    @if (!fileIsUploaded && !textFocused) {
-        @if (fromText.length > 0) {
-          <button (click)="emptyText('fromText')" class="delete-button button">x</button>
-        }
-        <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>
+        <i class="ri-upload-cloud-2-line"></i>
       </button>
-        <input #fileUpload (change)="onFileSelected($event)" class="is-outlined" id="fileUploadTranslator" type="file">
+      <!--          hidden text input-->
-      </div>
+      <input #fileUpload
-    </div>
+             accept=".csv"
-    <div class="column">
+             (change)="onFileSelected($event)" class="is-outlined" id="fileUploadTranslator"
+             type="file">
+    }
+    @if (fileIsUploaded) {
 
+      <div class="file-selected">
+        <div class="labeling">
+
+          <div>
+
+            <i class="ri ri-file-2-line"></i>
+          </div>
+          <div class="label">
+            {{ filePath }}
+          </div>
+          <div class="weight">
+            {{ fileWeight }}
+          </div>
+        </div>
+        <button class="remove-file-upload" (click)="onRemoveFileSelected()">x</button>
+      </div>
+    }
+    <!--      delete button from_text-->
+
+    <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 (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>
     @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>
-  </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 {
-  }
-
-  .textarea-placeholder {
       color: variables.$csc-textarea-placeholder-color;
       font-size: 20px;
       font-style: normal;
       font-weight: 400;
       line-height: 140%;
+      width: 370px;
     }
+  }
+
 
   .click-file-upload {
     cursor: pointer;
-  }
-}
-
-#fromText {
-
-
-  textarea {
-  }
-}
-
-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);
+    padding: 8px 20px;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
-  color: #255B8E;
+    color: variables.$csc-nav-color;
-  border-radius: 8px;
+    border-radius: variables.$radius-4;
-  border: 1px solid var(--color-text-title, #255B8E);
+    border: 1px solid var(--color-text-title, variables.$csc-nav-color);
     background: var(--color-background-card-on-base, #FFF);
-  left: 16px;
+    left: 0;
-  top: -50px;
+    top: 100px;
     position: relative;
+    font-weight: 600;
 
     i {
-    margin-right: 4px;
+      margin-left: 10px;
     }
   }
 
+  .file-selected {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    border-radius: 4px;
+    padding: 10px;
+
+    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%;
+    }
+  }
+
+
   #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,5 +1,7 @@
 @use '../../src/styles/variables';
 
+:host {
+
   .input-box {
     margin-left: -1rem;
 
@@ -34,20 +36,25 @@
     }
 
     .selector-button {
-    top: -36px;
+      top: -32px;
-    right: -165px;
+      right: -183px;
     }
 
     .selected-items-counter {
-    background: blue;
+      background: variables.$csc-chips-bg-color;
       color: white;
       border-radius: 200px;
       padding: 10px;
       display: inline-block;
       line-height: 10px;
       position: relative;
-    top: 33px;
+      top: 2px;
-    left: 136px;
+      left: -53px;
+      visibility: hidden;
+
+      &.is-visible {
+        visibility: visible;
+      }
     }
 
 
@@ -105,3 +112,5 @@
       }
     }
   }
+
+}

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

@@ -2,5 +2,5 @@
 @forward 'sae-lib/src/styles/variables.scss';
 
 .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 {
-
-    }
 
   }