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/suggest`);
+      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,12 +1,15 @@
+import { ConfigService } from '../../../services/configService';
+import { copy } from '../../../common/object/object';
+import { generateRandomKey } from '../../../common/string/string';
 import { Input, Signal, Output, computed, Directive } from '@angular/core';
-import { Subject, Subscription, debounceTime } from 'rxjs';
 import { Language } from '../../../../../app/domain/language';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { Subject, Subscription, debounceTime } from 'rxjs';
 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 { copy } from '../../../common/object/object';
+import { TranslationSuggestionsDialogComponent } from '../translation-suggestions-dialog/translation-suggestions-dialog.component';
 
 @Directive()
 export abstract class AbstractTranslatableFieldComponent {
@@ -27,6 +30,8 @@ export abstract class AbstractTranslatableFieldComponent {
   protected translationText: string;
   protected translationTextChanged: Subject<string> = new Subject<string>();
   constructor(
+    protected configService: ConfigService,
+    protected dialog: MatDialog,
     protected projectService: TeacherProjectService,
     protected projectTranslationService: TeacherProjectTranslationService
   ) {}
@@ -71,8 +76,54 @@ export abstract class AbstractTranslatableFieldComponent {
   }
 
   protected saveTranslationText(text: string): void {
+    if (this.i18nId === undefined) {
+      this.createI18NField();
+    }
     const currentTranslations = copy(this.projectTranslationService.currentTranslations());
     currentTranslations[this.i18nId] = { value: text, modified: new Date().getTime() };
     this.projectTranslationService.saveCurrentTranslations(currentTranslations).subscribe();
   }
+
+  protected isTranslationServiceEnabled(): boolean {
+    return this.configService.getConfigParam('translationServiceEnabled');
+  }
+
+  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({
+          next: (translation) => this.saveTranslationText(translation),
+          error: () =>
+            alert($localize`There was an error translating the text. Please talk to WISE staff.`)
+        });
+    }
+  }
+
+  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.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ConfigService } from '../../../services/configService';
 import { TranslatableAssetChooserComponent } from './translatable-asset-chooser.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -21,7 +22,7 @@ describe('TranslatableAssetChooserComponent', () => {
         StudentTeacherCommonServicesModule,
         TranslatableAssetChooserComponent
       ],
-      providers: [TeacherProjectService, TeacherProjectTranslationService]
+      providers: [ConfigService, TeacherProjectService, TeacherProjectTranslationService]
     });
     spyOn(TestBed.inject(TeacherProjectService), 'getLocale').and.returnValue(
       new ProjectLocale({ default: 'en-US' })

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

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { ConfigService } from '../../../services/configService';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -22,11 +23,12 @@ export class TranslatableAssetChooserComponent extends AbstractTranslatableField
   };
 
   constructor(
-    private dialog: MatDialog,
+    protected configService: ConfigService,
+    protected dialog: MatDialog,
     protected projectService: TeacherProjectService,
     protected projectTranslationService: TeacherProjectTranslationService
   ) {
-    super(projectService, projectTranslationService);
+    super(configService, 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] && isTranslationServiceEnabled()) {
+        <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-input/translatable-input.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ConfigService } from '../../../services/configService';
 import { MockProviders } from 'ng-mocks';
 import { ProjectLocale } from '../../../../../app/domain/projectLocale';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
@@ -12,7 +13,9 @@ describe('TranslatableInputComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [TranslatableInputComponent],
-      providers: [MockProviders(TeacherProjectService, TeacherProjectTranslationService)]
+      providers: [
+        MockProviders(ConfigService, TeacherProjectService, TeacherProjectTranslationService)
+      ]
     });
     const projectService = TestBed.inject(TeacherProjectService);
     spyOn(projectService, 'getLocale').and.returnValue(new ProjectLocale({ default: 'en-US' }));

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] && isTranslationServiceEnabled()) {
+    <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,24 +6,33 @@ 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 {
   protected html: string = '';
   @ViewChild(MatTabGroup) private tabs: MatTabGroup;
 
   constructor(
-    private configService: ConfigService,
+    protected configService: ConfigService,
+    protected dialog: MatDialog,
     protected projectService: TeacherProjectService,
     protected projectTranslationService: TeacherProjectTranslationService
   ) {
-    super(projectService, projectTranslationService);
+    super(configService, 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] && isTranslationServiceEnabled()) {
+        <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-textarea/translatable-textarea.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ConfigService } from '../../../services/configService';
 import { TranslatableTextareaComponent } from './translatable-textarea.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -19,7 +20,7 @@ describe('TranslatableTextareaComponent', () => {
         StudentTeacherCommonServicesModule,
         TranslatableTextareaComponent
       ],
-      providers: [TeacherProjectTranslationService, TeacherProjectService]
+      providers: [ConfigService, TeacherProjectTranslationService, TeacherProjectService]
     });
     spyOn(TestBed.inject(TeacherProjectService), 'getLocale').and.returnValue(
       new ProjectLocale({ default: 'en-US' })

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();
+  });
+});