feat(Authoring): Translate with AI

[Aaron-Detre]

Changes

• Added a button below translatable fields that automatically translates the default language text into the current language.
• If there is already a translation, clicking the button opens a dialog where you can choose to replace the current translation with the AI translation.

Test

• Test with feat(Authoring): Translate with AI WISE-API#314
• The "translate with AI" button should only appear below fields containing some default language text.
• Clicking the translate button should automatically fill the field if there is no translation in the current language.
• Clicking the translate button should open the translation suggestion dialog if there is a translation in the current language.
• Clicking replace in the dialog should overwrite the field. Clicking cancel should leave the field as is.
• Translating one field should not affect any other field.

Bug

• When switching languages, all translatable fields that haven't been edited will be automatically filled with the most recent translationText in that language it seems.
• When clicking the translate button on a component with multiple translatable fields, clicking to translate one field will automatically fill in all translatable fields that haven't been edited yet in that language.
• If I then delete whatever was filled in the random field and click translate on the original field again, it doesn't fill in the random field.
• I think this happens because all these fields' values are bound to translationText in the AbstractTranslatableFieldComponent., but I wasn't able to figure out why they're all sharing the same translationText when these are all different components which should each have their own translationText field. I'm also not sure why editing a field would stop this from happening.

[qltysh]

All good ✅

[qltysh]

Coverage Impact

Unable to calculate total coverage change because base branch coverage was not found.

Modified Files with Diff Coverage (4)

Rating	File	% Diff	Uncovered Line #s
	src/assets/wise5/services/teacherProjectTranslationService.ts	75.0%	56
	...ct-translatable-field/abstract-translatable-field.component.ts	66.7%	81-86
	...suggestions-dialog/translation-suggestions-dialog.component.ts	94.1%	34
	...slatable-asset-chooser/translatable-asset-chooser.component.ts	100.0%
	Total	86.2%

🤖 Increase coverage with AI coding...

In the `translate-with-ai` branch, add test coverage for this new code:

- `src/assets/wise5/authoringTool/components/abstract-translatable-field/abstract-translatable-field.component.ts` -- Line 81-86
- `src/assets/wise5/authoringTool/components/translation-suggestions-dialog/translation-suggestions-dialog.component.ts` -- Line 34
- `src/assets/wise5/services/teacherProjectTranslationService.ts` -- Line 56

🚦 See full report on Qlty Cloud »

🛟 Help

• Diff Coverage: Coverage for added or modified lines of code (excludes deleted files). Learn more.

• Total Coverage: Coverage for the whole repository, calculated as the sum of all File Coverage. Learn more.

• File Coverage: Covered Lines divided by Covered Lines plus Missed Lines. (Excludes non-executable lines including blank lines and comments.)

  • Indirect Changes: Changes to File Coverage for files that were not modified in this PR. Learn more.

[hirokiterashima]

I was able to set up my testing environment, and I can see that the request/response to AWS's translation API is happening. I am seeing what looks like problems on the client-side.

After adding a new language (i.e., translations.ja.json file doesn't exist yet), I clicked on "Translate with AI" for a step title, and saw that all the fields on the step get populated with the translated text.

After this change, translations.ja.json looks like this:

{"undefined":{"value":"日本語","modified":1772495595914}}

It should look something like this:

{"v4oc25ub7l2ahozhdkwum4saew0qq0":{"value":"日本語","modified":1772495631120}}

In this example, "v4oc25ub7l2ahozhdkwum4saew0qq0" is the translationId that is defined in project.json, and it is used to uniquely identify the field that contains the text to be translated. Here's a part of the project.json, where the id is defined for the "title" field.

...
 "title.i18n": {
   "id": "v4oc25ub7l2ahozhdkwum4saew0qq0",
    "modified": 1772495631087
  }
...

It looks like this id is not being set properly when the translated text is saved in the project.ja.json file.