feat(Authoring): Translate with AI

src/app/services/teacherProjectTranslationService.spec.ts

@@ -48,4 +48,19 @@ describe('TeacherProjectTranslationService', () => {
       expect(request.request.body).toEqual({});
     });
   });
+  describe('getTranslationSuggestion()', () => {
+    it('makes a POST request to backend with do not translate tags', () => {
+      service
+        .getTranslationSuggestion('srcLang', 'targetLang', '<span>srcText</span> untagged')
+        .subscribe();
+      const request = http.expectOne(`/api/author/project/translate/translationSuggestions`);
+      expect(request.request.method).toEqual('POST');
+      expect(request.request.body).toEqual({
+        srcLang: 'srcLang',
+        targetLang: 'targetLang',
+        srcText:
+          '<span translate="no"><span></span>srcText<span translate="no"></span></span> untagged'
+      });
+    });
+  });
 });

src/assets/wise5/authoringTool/components/abstract-translatable-field/abstract-translatable-field.component.scss

@@ -19,3 +19,21 @@ mat-form-field.translatable-form-field {
     margin-top: 4px;
   }
 }
+
+.translatable-input-hints {
+  display: flex;
+}
+
+.translation-suggestions {
+  margin-left: 8px;
+  text-decoration: underline;
+  color: blue;
+}
+
+.translation-suggestions:hover {
+  cursor: pointer;
+}
+
+.translation-tools {
+  padding: 8px 0;
+}

src/assets/wise5/authoringTool/components/abstract-translatable-field/abstract-translatable-field.component.ts

@@ -1,11 +1,13 @@
 import { Input, Signal, Output, computed, Directive } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Subject, Subscription, debounceTime } from 'rxjs';
 import { Language } from '../../../../../app/domain/language';
 import { TeacherProjectTranslationService } from '../../../services/teacherProjectTranslationService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { generateRandomKey } from '../../../common/string/string';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { Translations } from '../../../../../app/domain/translations';
+import { TranslationSuggestionsDialogComponent } from '../translation-suggestions-dialog/translation-suggestions-dialog.component';
 import { copy } from '../../../common/object/object';
 
 @Directive()
@@ -27,6 +29,7 @@ export abstract class AbstractTranslatableFieldComponent {
   protected translationText: string;
   protected translationTextChanged: Subject<string> = new Subject<string>();
   constructor(
+    protected dialog: MatDialog,
     protected projectService: TeacherProjectService,
     protected projectTranslationService: TeacherProjectTranslationService
   ) {}
@@ -75,4 +78,39 @@ export abstract class AbstractTranslatableFieldComponent {
     currentTranslations[this.i18nId] = { value: text, modified: new Date().getTime() };
     this.projectTranslationService.saveCurrentTranslations(currentTranslations).subscribe();
   }
+
+  protected async translateText(): Promise<void> {
+    if (this.translationText) {
+      this.openDialog();
+    } else {
+      this.projectTranslationService
+        .getTranslationSuggestion(
+          this.defaultLanguage.language,
+          this.currentLanguage().language,
+          this.content[this.key]
+        )
+        .subscribe((translation) => this.saveTranslationText(translation));
+    }
+  }
+
+  private openDialog(): void {
+    const dialogRef = this.createDialogRef();
+    dialogRef.afterClosed().subscribe((result: string) => {
+      if (result) {
+        this.saveTranslationText(result);
+      }
+    });
+  }
+
+  private createDialogRef(): MatDialogRef<TranslationSuggestionsDialogComponent> {
+    return this.dialog.open(TranslationSuggestionsDialogComponent, {
+      width: '40%',
+      data: {
+        defaultLanguage: this.defaultLanguage.language,
+        currentLanguage: this.currentLanguage().language,
+        defaultLanguageContent: this.content[this.key],
+        currentLanguageContent: this.translationText
+      }
+    });
+  }
 }

src/assets/wise5/authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component.ts

@@ -22,11 +22,11 @@ export class TranslatableAssetChooserComponent extends AbstractTranslatableField
   };
 
   constructor(
-    private dialog: MatDialog,
+    protected dialog: MatDialog,
     protected projectService: TeacherProjectService,
     protected projectTranslationService: TeacherProjectTranslationService
   ) {
-    super(projectService, projectTranslationService);
+    super(dialog, projectService, projectTranslationService);
   }
 
   protected chooseAsset(): void {

src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.html

@@ -11,9 +11,16 @@
     @if (hint) {
       <mat-hint>{{ hint }}</mat-hint>
     }
-    <mat-hint class="source-language selected-bg-bg">
-      <strong><mat-icon>translate</mat-icon> {{ defaultLanguage.language }}:</strong>
-      {{ content[key] }}
+    <mat-hint class="translatable-input-hints">
+      <div class="source-language selected-bg-bg">
+        <strong><mat-icon>translate</mat-icon> {{ defaultLanguage.language }}:</strong>
+        {{ content[key] }}
+      </div>
+      @if (content[key]) {
+        <div class="source-language selected-bg-bg translation-suggestions">
+          <span (click)="translateText()"><mat-icon>auto_awesome</mat-icon> Translate with AI</span>
+        </div>
+      }
     </mat-hint>
   </mat-form-field>
 } @else {

src/assets/wise5/authoringTool/components/translatable-rich-text-editor/translatable-rich-text-editor.component.html

@@ -41,6 +41,13 @@
       </ng-template>
     </mat-tab>
   </mat-tab-group>
+  @if (content[key]) {
+    <div class="translatable translatable-input-hints">
+      <mat-hint class="source-language selected-bg-bg translation-suggestions">
+        <span (click)="translateText()"><mat-icon>auto_awesome</mat-icon> Translate with AI</span>
+      </mat-hint>
+    </div>
+  }
 } @else {
   <wise-authoring-tinymce-editor [(model)]="html" (modelChange)="saveDefaultLanguageText()" />
 }

src/assets/wise5/authoringTool/components/translatable-rich-text-editor/translatable-rich-text-editor.component.ts

@@ -6,12 +6,20 @@ import { insertWiseLinks, replaceWiseLinks } from '../../../common/wise-link/wis
 import { ConfigService } from '../../../services/configService';
 import { TeacherProjectTranslationService } from '../../../services/teacherProjectTranslationService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
-  imports: [MatButtonModule, MatTabsModule, WiseAuthoringTinymceEditorComponent],
+  imports: [
+    MatButtonModule,
+    MatDialogModule,
+    MatIconModule,
+    MatTabsModule,
+    WiseAuthoringTinymceEditorComponent
+  ],
   selector: 'translatable-rich-text-editor',
-  styles: ['.translation-tools { padding: 8px 0; }'],
+  styleUrl: '../abstract-translatable-field/abstract-translatable-field.component.scss',
   templateUrl: './translatable-rich-text-editor.component.html'
 })
 export class TranslatableRichTextEditorComponent extends AbstractTranslatableFieldComponent {
@@ -20,10 +28,11 @@ export class TranslatableRichTextEditorComponent extends AbstractTranslatableFie
 
   constructor(
     private configService: ConfigService,
+    protected dialog: MatDialog,
     protected projectService: TeacherProjectService,
     protected projectTranslationService: TeacherProjectTranslationService
   ) {
-    super(projectService, projectTranslationService);
+    super(dialog, projectService, projectTranslationService);
   }
 
   ngOnChanges(): void {

src/assets/wise5/authoringTool/components/translatable-textarea/translatable-textarea.component.html

@@ -12,9 +12,16 @@
     @if (hint) {
       <mat-hint>{{ hint }}</mat-hint>
     }
-    <mat-hint class="source-language selected-bg-bg">
-      <strong><mat-icon>translate</mat-icon> {{ defaultLanguage.language }}:</strong>
-      {{ content[key] }}
+    <mat-hint class="translatable-input-hints">
+      <div class="source-language selected-bg-bg">
+        <strong><mat-icon>translate</mat-icon> {{ defaultLanguage.language }}:</strong>
+        {{ content[key] }}
+      </div>
+      @if (content[key]) {
+        <div class="source-language selected-bg-bg translation-suggestions">
+          <span (click)="translateText()"><mat-icon>auto_awesome</mat-icon> Translate with AI</span>
+        </div>
+      }
     </mat-hint>
   </mat-form-field>
 } @else {

src/assets/wise5/authoringTool/components/translation-suggestions-dialog/translation-suggestions-dialog.component.html

@@ -0,0 +1,21 @@
+<mat-dialog-content>
+  <p>
+    <b>{{ this.data.defaultLanguage }} text</b>
+  </p>
+  <p class="text-content">{{ this.data.defaultLanguageContent }}</p>
+  <p>
+    <b>{{ this.data.currentLanguage }} text (current translation)</b>
+  </p>
+  <p class="text-content">{{ this.data.currentLanguageContent }}</p>
+  <p>
+    <b>{{ this.data.currentLanguage }} text (AI suggested translation)</b>
+  </p>
+  <p class="text-content">{{ this.translation }}</p>
+  <p class="replace-translation">
+    Do you want to replace the current translation with the AI suggested translation?
+  </p>
+</mat-dialog-content>
+<mat-dialog-actions align="start">
+  <button mat-raised-button (click)="onClose(true)">Replace</button>
+  <button mat-raised-button (click)="onClose(false)">Cancel</button>
+</mat-dialog-actions>

src/assets/wise5/authoringTool/components/translation-suggestions-dialog/translation-suggestions-dialog.component.scss

@@ -0,0 +1,7 @@
+.text-content {
+  margin-left: 15px;
+}
+
+.replace-translation {
+  margin-top: 20px;
+}

src/assets/wise5/authoringTool/components/translation-suggestions-dialog/translation-suggestions-dialog.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TeacherProjectTranslationService } from '../../../services/teacherProjectTranslationService';
+import { TranslationSuggestionsDialogComponent } from './translation-suggestions-dialog.component';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MockProvider } from 'ng-mocks';
+import { of } from 'rxjs';
+
+describe('TranslationSuggestionsDialogComponent', () => {
+  let component: TranslationSuggestionsDialogComponent;
+  let fixture: ComponentFixture<TranslationSuggestionsDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslationSuggestionsDialogComponent],
+      providers: [
+        MockProvider(TeacherProjectTranslationService),
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: MatDialogRef, useValue: {} }
+      ]
+    }).compileComponents();
+
+    spyOn(
+      TestBed.inject(TeacherProjectTranslationService),
+      'getTranslationSuggestion'
+    ).and.returnValue(of('Example translated text'));
+
+    fixture = TestBed.createComponent(TranslationSuggestionsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/assets/wise5/authoringTool/components/translation-suggestions-dialog/translation-suggestions-dialog.component.ts

@@ -0,0 +1,58 @@
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TeacherProjectTranslationService } from '../../../services/teacherProjectTranslationService';
+
+interface TranslationSuggestionsDialogData {
+  defaultLanguage: string;
+  currentLanguage: string;
+  defaultLanguageContent: string;
+  currentLanguageContent?: string;
+}
+
+@Component({
+  selector: 'translation-suggestions-dialog',
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatButtonModule,
+    MatDialogContent,
+    MatDialogActions
+  ],
+  templateUrl: './translation-suggestions-dialog.component.html',
+  styleUrl: './translation-suggestions-dialog.component.scss'
+})
+export class TranslationSuggestionsDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<TranslationSuggestionsDialogComponent>);
+  readonly data = inject<TranslationSuggestionsDialogData>(MAT_DIALOG_DATA);
+  protected translation;
+
+  constructor(protected projectTranslationService: TeacherProjectTranslationService) {
+    this.generateTranslationSuggestion();
+  }
+
+  private generateTranslationSuggestion(): void {
+    this.projectTranslationService
+      .getTranslationSuggestion(
+        this.data.defaultLanguage,
+        this.data.currentLanguage,
+        this.data.defaultLanguageContent
+      )
+      .subscribe((suggestedTranslation: string) => {
+        this.translation = suggestedTranslation;
+      });
+  }
+
+  protected onClose(saveTranslation: boolean): void {
+    this.dialogRef.close(saveTranslation && this.translation);
+  }
+}

src/assets/wise5/services/teacherProjectTranslationService.ts

@@ -48,4 +48,35 @@ export class TeacherProjectTranslationService extends ProjectTranslationService
         })
       );
   }
+
+  getTranslationSuggestion(
+    defaultLanguage: string,
+    currentLanguage: string,
+    defaultLanguageText: string
+  ): Observable<string> {
+    return this.http
+      .post(
+        `/api/author/project/translate/translationSuggestions`,
+        {
+          srcLang: defaultLanguage,
+          targetLang: currentLanguage,
+          srcText: this.addDoNotTranslateTags(defaultLanguageText)
+        },
+        { responseType: 'text' }
+      )
+      .pipe(map(this.removeDoNotTranslateTags));
+  }
+
+  private addDoNotTranslateTags(textToTranslate: string): string {
+    return textToTranslate.replaceAll(
+      /<.*?>/g,
+      (match) => '<span translate="no">' + match + '</span>'
+    );
+  }
+
+  private removeDoNotTranslateTags(translatedText: string): string {
+    return translatedText.replaceAll(/<span translate="no"><.*?><\/span>/g, (match) =>
+      match.slice(21, -7)
+    );
+  }
 }

src/messages.xlf

@@ -11048,7 +11048,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Are you sure you want to replace the content in <x id="PH" equiv-text="this.currentLanguage().language"/> with content in <x id="PH_1" equiv-text="this.defaultLanguage.language"/> for this item?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/translatable-rich-text-editor/translatable-rich-text-editor.component.ts</context>
-          <context context-type="linenumber">50,52</context>
+          <context context-type="linenumber">59,61</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1318680729593701201" datatype="html">