fix: improve UI

apps/portal/src/app/features/file-processor/file-processor.component.scss

@@ -1,5 +1,5 @@
 .table-container {
-  max-height: 400px;
+  max-height: 350px;
   overflow-y: auto;
 }
 

apps/portal/src/app/features/file.service.ts

@@ -16,12 +16,12 @@ export class FileService {
     private graphqlService: GraphqlService,
     private apollo: Apollo,
   ) {
-    this.jobIdsSubject.next(JSON.parse(localStorage.getItem('jobIds') || '[]'));
+    this.jobIdsSubject.next(JSON.parse(sessionStorage.getItem('jobIds') || '[]'));
   }
 
   updateJobIds(jobId: number): void {
     const jobIds = [...this.jobIdsSubject.value, jobId];
-    localStorage.setItem('jobIds', JSON.stringify(jobIds));
+    sessionStorage.setItem('jobIds', JSON.stringify(jobIds));
     this.jobIdsSubject.next(jobIds);
   }
 

apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.html

@@ -1,21 +1,16 @@
 <div class="main flex justify-content-center mt-5">
-  <div class="transcript-analyzer">
-    <div class="buttons flex flex-column align-items-center mb-3">
-      <input
-        type="file"
-        #fileInput
-        style="display: none"
-        (change)="onFileSelected($event)"
-        accept=".vtt,.txt"
-      />
-      <p-button (click)="fileInput.click()" severity="success">{{
-        'TRANSCRIPT.BUTTONS.UPLOAD' | translate
-      }}</p-button>
-      <span *ngIf="selectedFileName" class="file-name text-base">{{ selectedFileName }}</span>
-      <span *ngIf="limitError" class="error">{{ 'TRANSCRIPT.ERRORS.FILE_SIZE' | translate }}</span>
-      <span *ngIf="invalidTypeError" class="error">{{
-        'TRANSCRIPT.ERRORS.FILE_TYPE' | translate
-      }}</span>
+  <div class="transcript-analyzer mt-3 p-6 border-round-xl">
+    <p-fileUpload
+      name="file"
+      [url]="''"
+      accept=".vtt,.txt"
+      (onSelect)="onFileSelected($event)"
+      [maxFileSize]="maxFileSize"
+      [auto]="true"
+      chooseLabel="{{ 'TRANSCRIPT.BUTTONS.CHOOSE' | translate }}"
+      styleClass="mb-4 text-center"
+    ></p-fileUpload>
+    <div class="flex flex-column align-items-center mb-3">
       <p-button (click)="summarizeTranscript()">{{
         'TRANSCRIPT.BUTTONS.SUMMARIZE' | translate
       }}</p-button>

apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.scss

@@ -4,22 +4,7 @@ body {
   height: 90vh;
 
   .transcript-analyzer {
-    @include styleclass('flex flex-column justify-content-center align-items-center relative p-6 border-round-xl');
     border: 3px solid #4d4dff;
     box-shadow: 0 4px 9px rgba(0, 0, 0, 0.9);
-
-    button {
-      margin: 30px 0;
-    }
-
-    .file-name {
-      bottom: 70%;
-      color: #333;
-    }
-  }
-
-  .error {
-    bottom: 70%;
-    color: red;
   }
 }

apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.ts

@@ -19,51 +19,20 @@ export class TranscriptAnalyzerComponent {
     this.translate.setDefaultLang('en');
   }
 
-  fileType = '';
-
-  limitError = false;
-
-  invalidTypeError = false;
-
   maxFileSize: number = 10 * 1024 * 1024; // 10 MB
 
-  selectedFileName = '';
-
   selectedFile: File | null = null;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onFileSelected(event: any): void {
-    const file: File = event.target.files[0];
+    const { files } = event.originalEvent.target;
+    const file: File = files[0];
 
     if (file) {
-      if (!this.isValidFileType(file)) {
-        this.limitError = false;
-        this.invalidTypeError = true;
-        this.selectedFileName = '';
-        this.selectedFile = null;
-      } else if (!this.isValidFileSize(file)) {
-        this.invalidTypeError = false;
-        this.limitError = true;
-        this.selectedFileName = '';
-        this.selectedFile = null;
-      } else {
-        this.selectedFileName = file.name;
-        this.limitError = false;
-        this.invalidTypeError = false;
-        this.selectedFile = file;
-      }
+      this.selectedFile = file;
     }
   }
 
-  isValidFileType(file: File): boolean {
-    this.fileType = file.type;
-    return this.fileType === 'text/plain' || this.fileType === 'text/vtt';
-  }
-
-  isValidFileSize(file: File): boolean {
-    return file.size <= this.maxFileSize;
-  }
-
   // eslint-disable-next-line
   summarizeTranscript(): void {
     // eslint-disable-next-line
@@ -85,9 +54,9 @@ export class TranscriptAnalyzerComponent {
         const jobId = result?.data?.createSummary?.jobId;
 
         if (jobId) {
-          const jobIdsArray = JSON.parse(localStorage.getItem('jobIds') || '[]');
+          const jobIdsArray = JSON.parse(sessionStorage.getItem('jobIds') || '[]');
           jobIdsArray.push(jobId);
-          localStorage.setItem('jobIds', JSON.stringify(jobIdsArray));
+          sessionStorage.setItem('jobIds', JSON.stringify(jobIdsArray));
           this.fileService.updateJobIds(jobId);
         }
       },

apps/portal/src/assets/i18n/en.json

@@ -11,6 +11,7 @@
       "FILE_UPLOAD": "File upload failed. Please try again."
     },
     "BUTTONS": {
+      "CHOOSE": "Choose File",
       "UPLOAD": "Upload File",
       "SUMMARIZE": "Summarize Me"
     }

apps/portal/src/index.html

@@ -3,7 +3,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Portal</title>
+  <title>Transcript Summarization</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">