Development: Port new gender contracts

src/main/resources/config/liquibase/changelog/00000000000053_add_biased_issues_to_jobs.xml

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<databaseChangeLog
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xmlns="http://www.liquibase.org/xml/ns/dbchangelog"
+  xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-latest.xsd">
+
+  <changeSet id="053a_add_biased_issues_to_jobs" author="melissa">
+    <preConditions onFail="MARK_RAN">
+      <not>
+        <tableExists tableName="job_biased_issues"/>
+      </not>
+    </preConditions>
+    <createTable tableName="job_biased_issues">
+      <column name="job_id" type="CHAR(36)">
+        <constraints nullable="false" foreignKeyName="fk_biased_issues_job" references="jobs(job_id)" deleteCascade="true"/>
+      </column>
+      <column name="language" type="varchar(10)"/>
+      <column name="word" type="varchar(255)"/>
+      <column name="type" type="varchar(50)"/>
+    </createTable>
+  </changeSet>
+
+  <changeSet id="053b_add_unique_constraint_biased_issues" author="aniruddh">
+    <preConditions onFail="MARK_RAN">
+      <dbms type="mysql"/>
+      <not>
+        <uniqueConstraintExists tableName="job_biased_issues" constraintName="uk_biased_issues_job_lang_word_type"/>
+      </not>
+    </preConditions>
+    <addUniqueConstraint
+      tableName="job_biased_issues"
+      columnNames="job_id, language, word, type"
+      constraintName="uk_biased_issues_job_lang_word_type"/>
+  </changeSet>
+
+  <changeSet id="053c_rename_gender_bias_score_to_ai_score" author="melissa">
+    <preConditions onFail="MARK_RAN">
+      <columnExists tableName="jobs" columnName="gender_bias_score"/>
+      <not>
+        <columnExists tableName="jobs" columnName="ai_score"/>
+      </not>
+    </preConditions>
+    <renameColumn
+      tableName="jobs"
+      oldColumnName="gender_bias_score"
+      newColumnName="ai_score"
+      columnDataType="integer"/>
+  </changeSet>
+
+</databaseChangeLog>

src/main/webapp/app/job/job-creation-form/job-creation-form.component.html

@@ -189,6 +189,7 @@ <h1 jhiTranslate="{{ pageTitle() }}"></h1>
                   [shouldTranslate]="true"
                   [showGenderDecoderButton]="true"
                   [biasedAnalysis]="currentBiasedIssues()"
+                  [showGenderBiasHighlights]="activeComplianceFilter() === undefined || activeComplianceFilter() === genderBiasFilter"
                   height="20rem"
                   (highlightHovered)="onHighlightHovered($event)"
                 />
@@ -219,6 +220,8 @@ <h1 jhiTranslate="{{ pageTitle() }}"></h1>
             [isRewriteMode]="rewriteButtonSignal()"
             [currentLang]="currentDescriptionLanguage()"
             [complianceIssues]="complianceIssues()"
+            [genderBiasAnalysis]="currentBiasedIssues()"
+            [isGenderAnalyzing]="isAnalyzing()"
             (generate)="generateJobApplicationDraft()"
             (filterComplianceCat)="onComplianceFilterChange($event)"
           />

src/main/webapp/app/job/job-creation-form/job-creation-form.component.ts

@@ -67,6 +67,7 @@ import {
 import { CompliancePopoverComponent } from 'app/shared/components/molecules/ai-compliance-popover/ai-compliance-popover.component';
 import { BiasedIssueDTO as BiasedIssue } from 'app/generated/model/biased-issue-dto';
 import { AnalyzeJobDescriptionRequestDTO } from 'app/generated/model/analyze-job-description-request-dto';
+import { FilterCategory, GENDER_BIAS_FILTER_CATEGORY } from 'app/shared/gender-bias-analysis/gender-bias-analysis.utils';
 
 import { JobDetailComponent } from '../job-detail/job-detail.component';
 import * as DropdownOptions from '.././dropdown-options';
@@ -342,7 +343,9 @@ export class JobCreationFormComponent {
   readonly popoverY = signal<number>(0);
 
   /** When set, only issues of this category are highlighted in the editor. (undefined = all categories shown) */
-  readonly activeComplianceFilter = signal<string | undefined>(undefined);
+  readonly activeComplianceFilter = signal<FilterCategory | undefined>(undefined);
+
+  protected readonly genderBiasFilter = GENDER_BIAS_FILTER_CATEGORY;
 
   /** Returns the explanation of a compliance issue whose text appears in the job title, if any. */
   readonly titleComplianceError = computed(() => {
@@ -976,7 +979,7 @@ export class JobCreationFormComponent {
    * Handles category filter changes from the AI assistant sidebar.
    * Updates filter signal to show only the selected category
    */
-  onComplianceFilterChange(category: string | undefined): void {
+  onComplianceFilterChange(category: FilterCategory | undefined): void {
     this.activeComplianceFilter.set(category);
   }
 

src/main/webapp/app/shared/components/atoms/editor/editor.component.ts

@@ -6,7 +6,8 @@ import { ContentChange, QuillEditorComponent } from 'ngx-quill';
 import { FormsModule } from '@angular/forms';
 import { extractTextFromHtml } from 'app/shared/util/text.util';
 import { BiasedIssueDTO as BiasedIssue, BiasedIssueDTOTypeEnum as BiasedIssueTypeEnum } from 'app/generated/model/biased-issue-dto';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { getUniqueNonInclusiveWords, isWordChar } from 'app/shared/gender-bias-analysis/gender-bias-analysis.utils';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
 import Quill from 'quill';
 import { GenderBiasAnalysisDialogComponent } from 'app/shared/gender-bias-analysis/gender-bias-analysis-dialog/gender-bias-analysis-dialog';
@@ -94,6 +95,39 @@ class HighlightBlot extends Inline {
 // Register in Quill so the editor recognizes it
 Quill.register(HighlightBlot);
 
+/**
+ * Inline marker for wording flagged by the Gender Decoder. It is visually
+ * separate from compliance highlights so both can be rendered together.
+ */
+class GenderBiasHighlightBlot extends Inline {
+  static blotName = 'genderBiasHighlight';
+  static tagName = 'span';
+  static className = 'gender-bias-highlight';
+
+  static baseClasses = [
+    '[text-decoration-line:underline]',
+    '[text-decoration-style:wavy]',
+    'decoration-text-tertiary',
+    '[text-decoration-thickness:1.5px]',
+    'underline-offset-2',
+    '[box-decoration-break:clone]',
+    '[-webkit-box-decoration-break:clone]',
+  ];
+
+  static create(): HTMLElement {
+    const node = super.create() as HTMLElement;
+    GenderBiasHighlightBlot.baseClasses.forEach((cls: string) => node.classList.add(cls));
+    node.dataset['genderBiasHighlight'] = 'non-inclusive';
+    return node;
+  }
+
+  static formats(node: HTMLElement): string | undefined {
+    return node.dataset['genderBiasHighlight'];
+  }
+}
+
+Quill.register(GenderBiasHighlightBlot);
+
 const STANDARD_CHARACTER_LIMIT = 500;
 const STANDARD_CHARACTER_BUFFER = 300;
 
@@ -119,20 +153,19 @@ export class EditorComponent extends BaseInputDirective<string> {
   height = input<string>('12.5rem');
   helperText = input<string | undefined>(undefined); // Optional helper text to display below the editor field
   showGenderDecoderButton = input<boolean>(false);
+  showGenderBiasHighlights = input<boolean>(true);
   // When true the editor is showing externally-streamed content (e.g. an AI
   // translation); the empty/required error is suppressed so it does not flash
   // while the first chunks arrive.
   loading = input<boolean>(false);
   genderDecoderClick = output<string>();
   quillEditorComponent = viewChild(QuillEditorComponent);
   highlightHovered = output<{ text: string; x: number; y: number } | undefined>();
-  pendingHighlights = signal<{ text: string; category: ComplianceIssueCategoryEnum }[]>([]);
   biasedAnalysis = input<BiasedIssue[] | undefined>(undefined);
+  pendingComplianceHighlights = signal<{ text: string; category: ComplianceIssueCategoryEnum }[]>([]);
 
   readonly cdRef = inject(ChangeDetectorRef);
 
-  readonly fieldIdChanges$ = toObservable(this.fieldId);
-
   showAnalysisModal = signal(false);
 
   displayHelperText = computed(() => {
@@ -145,6 +178,12 @@ export class EditorComponent extends BaseInputDirective<string> {
     return this.showGenderDecoderButton() && this.displayResult() !== undefined;
   });
 
+  readonly genderBiasHighlights = computed(() => {
+    if (!this.showGenderDecoderButton() || !this.showGenderBiasHighlights()) return [];
+
+    return getUniqueNonInclusiveWords(this.biasedAnalysis()).map(text => ({ text }));
+  });
+
   // Check if error message should be displayed
   isOverCharLimit = computed(() => {
     const limit = this.characterLimit();
@@ -253,11 +292,13 @@ export class EditorComponent extends BaseInputDirective<string> {
    * Re-runs highlight application whenever:
    * - the QuillEditor view child becomes available
    * - forceUpdate pushes new content (via editorReady)
-   * - new highlights are requested via highlightTexts()
+   * - new compliance highlights are requested via highlightTexts()
+   * - new Gender Decoder analysis results arrive
    */
   private reapplyHighlightsEffect = effect(() => {
     this.quillEditorComponent();
-    this.pendingHighlights();
+    this.pendingComplianceHighlights();
+    this.genderBiasHighlights();
     requestAnimationFrame(() => this.applyPendingHighlights());
   });
 
@@ -362,7 +403,7 @@ export class EditorComponent extends BaseInputDirective<string> {
    * @param highlights Array of {text, category} to highlight
    */
   public highlightTexts(highlights: { text: string; category: ComplianceIssueCategoryEnum }[]): void {
-    this.pendingHighlights.set(highlights);
+    this.pendingComplianceHighlights.set(highlights);
   }
 
   /**
@@ -372,20 +413,22 @@ export class EditorComponent extends BaseInputDirective<string> {
     const editor = this.quillEditorComponent()?.quillEditor;
     // Retry next frame if editor not ready and highlights pending
     if (!editor) {
-      if (this.pendingHighlights().length > 0) {
+      if (this.pendingComplianceHighlights().length > 0 || this.genderBiasHighlights().length > 0) {
         requestAnimationFrame(() => this.applyPendingHighlights());
       }
       return;
     }
-    const highlights = this.pendingHighlights();
+    const complianceHighlights = this.pendingComplianceHighlights();
+    const genderBiasHighlights = this.genderBiasHighlights();
 
     // Clear all existing highlights first
     editor.formatText(0, editor.getLength(), 'background', false);
     editor.formatText(0, editor.getLength(), 'customHighlight', false);
+    editor.formatText(0, editor.getLength(), 'genderBiasHighlight', false);
 
     const fullText = editor.getText().toLowerCase();
 
-    for (const { text, category } of highlights) {
+    for (const { text, category } of complianceHighlights) {
       const searchText = text.toLowerCase();
       if (!searchText) continue;
       let startIndex = 0;
@@ -398,6 +441,21 @@ export class EditorComponent extends BaseInputDirective<string> {
         startIndex = index + text.length;
       }
     }
+
+    for (const { text } of genderBiasHighlights) {
+      const searchText = text.toLowerCase();
+      if (!searchText) continue;
+      let startIndex = 0;
+
+      while (startIndex < fullText.length) {
+        const index = fullText.indexOf(searchText, startIndex);
+        if (index === -1) break;
+        if (!isWordChar(fullText[index - 1]) && !isWordChar(fullText[index + searchText.length])) {
+          editor.formatText(index, searchText.length, 'genderBiasHighlight', true);
+        }
+        startIndex = index + searchText.length;
+      }
+    }
   }
 
   /**
@@ -433,18 +491,19 @@ export class EditorComponent extends BaseInputDirective<string> {
   }
 
   /**
-   * Removes compliance-highlight span wrappers from serialized editor HTML while
+   * Removes highlight span wrappers from serialized editor HTML while
    * keeping their inner content. Highlights are a visual-only overlay, so their
    * markup must never reach the form control or model value.
    *
    * @param html - The raw editor HTML, possibly containing highlight spans
-   * @returns The HTML with all compliance-highlight wrappers unwrapped
+   * @returns The HTML with all highlight wrappers unwrapped
    */
   private stripHighlightMarkup(html: string): string {
-    if (!html.includes(HighlightBlot.className)) return html;
+    const highlightClasses = [HighlightBlot.className, GenderBiasHighlightBlot.className];
+    if (!highlightClasses.some(className => html.includes(className))) return html;
     const container = document.createElement('div');
     container.innerHTML = html;
-    container.querySelectorAll(`span.${HighlightBlot.className}`).forEach(span => {
+    container.querySelectorAll(highlightClasses.map(className => `span.${className}`).join(', ')).forEach(span => {
       const parent = span.parentNode;
       if (!parent) return;
       // Unwrap the highlight span: move each child out in place, then drop the span.

src/main/webapp/app/shared/components/molecules/ai-assistant-card/ai-assistant-card.component.html

@@ -75,6 +75,59 @@
 
     <hr class="m-0 w-full border-0 border-t border-border-default opacity-70" />
 
+    <!-- Gender Decoder -->
+    <div class="flex items-center justify-center gap-2 lg:justify-start">
+      <h3
+        class="m-0 text-base font-semibold text-text-secondary text-center lg:text-left"
+        jhiTranslate="jobCreationForm.aiSidebar.genderDecoder.header"
+      ></h3>
+      <jhi-info-icon tooltip="jobCreationForm.aiSidebar.genderDecoder.tooltipText" tooltipPosition="top" [shouldTranslate]="true" />
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <p
+        class="m-0 text-sm leading-6 text-text-tertiary text-center lg:text-left"
+        jhiTranslate="jobCreationForm.aiSidebar.genderDecoder.relevanceText"
+      ></p>
+
+      <jhi-status-pill
+        data-testid="gender-decoder-pill"
+        labelKey="jobCreationForm.aiSidebar.genderDecoder.pill.fix"
+        dotColor="bg-text-secondary"
+        [count]="genderDecoderReviewCount()"
+        [isActive]="activeFilter() === genderBiasFilter"
+        [loading]="isGenderAnalyzing()"
+        (selected)="selectCategoryFilter(genderBiasFilter)"
+      />
+
+      <div class="flex w-full flex-col gap-1">
+        <p class="m-0 text-xs text-text-secondary" jhiTranslate="jobCreationForm.aiSidebar.genderDecoder.balanceLabel"></p>
+        <div>
+          <div class="relative h-4">
+            <div class="absolute left-0 right-0 top-1/2 flex -translate-y-1/2 items-center gap-px">
+              <span class="h-[2px] flex-1 rounded-full bg-border-default"></span>
+              <span class="h-[2px] flex-1 rounded-full bg-text-tertiary"></span>
+              <span class="h-[2px] flex-1 rounded-full bg-text-disabled"></span>
+            </div>
+            <span
+              data-testid="gender-decoder-pointer"
+              class="absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-background-default bg-text-secondary ring-1 ring-border-default"
+              aria-hidden="true"
+              [class]="genderDecoderPointerClass()"
+            ></span>
+          </div>
+
+          <div class="flex items-center justify-between gap-2 text-xs leading-4 text-text-tertiary">
+            <span jhiTranslate="jobCreationForm.aiSidebar.genderDecoder.scale.exclusive"></span>
+            <span jhiTranslate="jobCreationForm.aiSidebar.genderDecoder.scale.neutral"></span>
+            <span jhiTranslate="jobCreationForm.aiSidebar.genderDecoder.scale.inclusive"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <hr class="m-0 w-full border-0 border-t border-border-default opacity-70" />
+
     <div class="flex items-start justify-center gap-2 lg:justify-start">
       <h3
         class="m-0 text-base font-semibold text-text-secondary text-center lg:text-left"