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

@@ -1,21 +1,45 @@
+@reference "tailwindcss";
+
 mat-form-field.translatable-form-field {
   width: 100%;
+
+  .mat-mdc-form-field-bottom-align::before {
+    @apply -ms-2;
+  }
 }
 
 .translatable {
   .mat-mdc-form-field-hint-wrapper {
     position: relative;
-    margin: -20px 0 4px;
+    margin: 0;
+    padding: 0;
     flex-direction: column;
     align-items: flex-start;
   }
 
+  .mat-mdc-form-field-bottom-align::before {
+    display: none;
+  }
+
   .mat-mdc-form-field-hint-spacer {
-  display: none;
+    display: none;
   }
 
   .source-language {
-    padding: 4px 8px;
-    margin-top: 4px;
+    @apply px-2 py-1;
   }
 }
+
+.translation-tools {
+  @apply flex flex-wrap items-center gap-2 text-sm;
+}
+
+.translation-link {
+  @apply flex items-center gap-1;
+
+  .mat-icon {
+    font-size: inherit;
+    height: 1rem;
+    width: 1rem;
+  }
+}

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,57 @@ 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(event: Event): Promise<void> {
+    event.preventDefault();
+    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 contact WISE staff if the error persists.`
+            )
+        });
+    }
+  }
+
+  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, {
+      panelClass: 'dialog-md',
+      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,17 @@
     @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="translation-tools mt-1 mb-2">
+      <div class="source-language selected-bg-bg">
+        <strong><mat-icon>translate</mat-icon> {{ defaultLanguage.language }}:</strong>
+        {{ content[key] }}
+      </div>
+      @if (content[key] && isTranslationServiceEnabled()) {
+        <span class="translation-link">
+          <mat-icon class="primary align-middle">auto_awesome</mat-icon>
+          <a href="#" role="button" (click)="translateText($event)" i18n>Translate with AI</a>
+        </span>
+      }
     </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

@@ -2,7 +2,7 @@
   <mat-tab-group mat-stretch-tabs="false">
     <mat-tab label="{{ currentLanguage().language }}">
       <ng-template matTabContent>
-        <div class="translation-tools">
+        <div class="translation-tools my-2">
           <button
             class="enable-in-translation"
             mat-stroked-button
@@ -12,6 +12,12 @@
           >
             Copy content from {{ defaultLanguage.language }}
           </button>
+          @if (content[key] && isTranslationServiceEnabled()) {
+            <span class="translation-link">
+              <mat-icon class="primary align-middle">auto_awesome</mat-icon>
+              <a href="#" role="button" (click)="translateText($event)" i18n>Translate with AI</a>
+            </span>
+          }
         </div>
         <wise-authoring-tinymce-editor
           [language]="currentLanguage()"
@@ -22,7 +28,7 @@
     </mat-tab>
     <mat-tab label="{{ defaultLanguage.language }}">
       <ng-template matTabContent>
-        <div class="translation-tools flex flex-row justify-start items-center gap-2">
+        <div class="translation-tools my-2">
           <span class="info mat-caption" i18n
             >Note: Editing is disabled. Please switch back to {{ defaultLanguage.language }} if you
             want to edit.</span

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,17 @@
     @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="translation-tools mt-1 mb-2">
+      <div class="source-language selected-bg-bg">
+        <strong><mat-icon>translate</mat-icon> {{ defaultLanguage.language }}:</strong>
+        {{ content[key] }}
+      </div>
+      @if (content[key] && isTranslationServiceEnabled()) {
+        <span class="translation-link">
+          <mat-icon class="primary align-middle">auto_awesome</mat-icon>
+          <a href="#" role="button" (click)="translateText($event)" i18n>Translate with AI</a>
+        </span>
+      }
     </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,18 @@
+<h2 mat-dialog-title i18n>Replace Translation</h2>
+<mat-divider />
+<mat-dialog-content class="!my-4">
+  <p class="font-medium" i18n>{{ this.data.defaultLanguage }} text:</p>
+  <p class="text-sm px-2">{{ this.data.defaultLanguageContent }}</p>
+  <p class="font-medium" i18n>{{ this.data.currentLanguage }} text (current translation):</p>
+  <p class="text-sm px-2">{{ this.data.currentLanguageContent }}</p>
+  <p class="font-medium" i18n>{{ this.data.currentLanguage }} text (AI suggested translation):</p>
+  <p class="text-sm px-2">{{ this.translation }}</p>
+  <p class="pt-2 font-medium" i18n>
+    Do you want to replace the current translation with the AI suggested translation?
+  </p>
+</mat-dialog-content>
+<mat-divider />
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onClose(false)" i18n>Cancel</button>
+  <button mat-flat-button color="primary" (click)="onClose(true)" i18n>Replace</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();
+  });
+});