AI translations

package.json

@@ -122,7 +122,7 @@
     "sass-loader": "6.0.6",
     "shortid": "2.2.8",
     "style-loader": "0.20.2",
-    "superdesk-ui-framework": "^3.1.3",
+    "superdesk-ui-framework": "^3.1.9",
     "ts-loader": "3.5.0",
     "typescript": "4.9.5",
     "uuid": "8.3.1",

scripts/api/index.ts

@@ -11,6 +11,7 @@ import {time} from './time';
 import {user} from './user';
 import {vocabularies} from './vocabularies';
 import {contentProfiles} from './content-profiles';
+import {translations} from './translations';
 
 /**
  * This is core API, not extensions API.
@@ -31,4 +32,5 @@ export const sdApi = {
     vocabularies,
     highlights,
     contentProfiles,
+    translations,
 };

scripts/api/translations.ts

@@ -0,0 +1,29 @@
+import {IArticle} from 'superdesk-api';
+import ng from 'core/services/ng';
+import {extensions} from 'appConfig';
+import notify from 'core/notify/notify';
+import {gettext} from 'core/utils';
+
+function aiTranslationActions(item: IArticle): void {
+    if (extensions['ai-widget'].extension.exposes?.overrideTranslations === true) {
+        localStorage.setItem(
+            'sideWidget',
+            JSON.stringify({
+                id: 'ai-assistant',
+                pinned: true,
+                activeSection: 'translations',
+            }),
+        );
+    }
+
+    ng.get('authoringWorkspace').open(item);
+    notify.success(gettext('Item Translated'));
+}
+
+interface ITranslationsApi {
+    aiTranslationActions(item: IArticle): void;
+}
+
+export const translations: ITranslationsApi = {
+    aiTranslationActions,
+};

scripts/apps/authoring-react/authoring-integration-wrapper.tsx

@@ -260,9 +260,11 @@ export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapp
     constructor(props: IPropsWrapper) {
         super(props);
 
+        const lsSideWidget = localStorage.getItem('sideWidget');
+
         this.state = {
             sidebarMode: this.props.sidebarMode === 'hidden' ? 'hidden' : (this.props.sidebarMode ?? false),
-            sideWidget: null,
+            sideWidget: lsSideWidget != null ? JSON.parse(lsSideWidget) : null,
         };
 
         this.prepareForUnmounting = this.prepareForUnmounting.bind(this);

scripts/apps/authoring-react/toolbar/translate-modal.tsx

@@ -51,15 +51,18 @@ export class TranslateModal extends React.PureComponent<IProps, IState> {
 
     translate() {
         if (this.state.initialized) {
-            return httpRequestJsonLocal({
+            return httpRequestJsonLocal<IArticle>({
                 method: 'POST',
                 path: '/archive/translate',
                 payload: {
                     desk: sdApi.desks.getCurrentDeskId(),
                     language: this.state.selectedLanguage,
                     guid: this.props.article._id,
                 },
-            }).then(() => this.props.closeModal());
+            }).then((item) => {
+                sdApi.translations.aiTranslationActions(item);
+                this.props.closeModal();
+            });
         }
     }
 

scripts/apps/authoring/widgets/widgets.ts

@@ -157,7 +157,13 @@ function WidgetsManagerCtrl(
     preferencesService,
     $rootScope,
 ) {
-    $scope.active = null;
+    const lsSideWidget = localStorage.getItem('sideWidget');
+    const localStorageWidgetState = lsSideWidget != null ? JSON.parse(lsSideWidget) : null;
+    const widgetValue = lsSideWidget == null
+        ? null
+        : authoringWidgets.find((widget) => widget._id === localStorageWidgetState?.id);
+
+    $scope.active = widgetValue != null ? widgetValue : null;
 
     preferencesService.get(USER_PREFERENCE_SETTINGS).then((preferences) =>
         this.widgetFromPreferences = preferences,
@@ -338,7 +344,7 @@ function WidgetsManagerCtrl(
     widgetReactIntegration.pinWidget = $scope.pinWidget;
     widgetReactIntegration.getActiveWidget = () => $scope.active ?? $scope.pinnedWidget;
     widgetReactIntegration.getPinnedWidget =
-        () => $scope.widgets.find(({pinned}) => pinned === true)?.name ?? null;
+        () => $scope.widgets?.find(({pinned}) => pinned === true)?.name ?? null;
 
     widgetReactIntegration.WidgetHeaderComponent = WidgetHeaderComponent;
     widgetReactIntegration.WidgetLayoutComponent = WidgetLayoutComponent;
@@ -392,6 +398,10 @@ function WidgetsManagerCtrl(
         });
     };
 
+    if (widgetValue?.component != null && localStorageWidgetState?.pinned === true) {
+        $scope.pinWidget(widgetValue);
+    }
+
     $scope.$on('$destroy', () => {
         unbindAllShortcuts();
     });

scripts/apps/translations/services/TranslationService.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
-import {gettext} from 'core/utils';
 import {AuthoringWorkspaceService} from 'apps/authoring/authoring/services/AuthoringWorkspaceService';
+import {sdApi} from 'api';
 
 /**
  * @ngdoc service
@@ -64,9 +64,8 @@ export function TranslationService(
         };
 
         api.save('translate', params).then((_item) => {
-            authoringWorkspace.open(_item);
+            sdApi.translations.aiTranslationActions(_item);
             $rootScope.$broadcast('item:translate');
-            notify.success(gettext('Item Translated'));
         });
     };
 

scripts/core/superdesk-api.d.ts

@@ -1,5 +1,4 @@
 /* tslint:disable */
-
 declare module 'superdesk-api' {
     // TYPESCRIPT TYPES
 

scripts/extensions/ai-widget/src/ai-assistant.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
-import {IArticleSideWidgetComponentType} from 'superdesk-api';
+import {IArticleSideWidgetComponentType, ITranslation} from 'superdesk-api';
 import {Spacer} from 'superdesk-ui-framework/react';
 import {superdesk} from './superdesk';
 import {configuration} from './configuration';
 import getHeadlinesWidget from './headlines/headlines-widget';
 import getSummaryWidget from './summary/summary-widget';
 import DefaultAiAssistantPanel from './main-panel';
+import getTranslationsWidget from './translations/translations-widget';
 
-export type IAiAssistantSection = 'headlines' | 'summary' | null;
+export type IAiAssistantSection = 'headlines' | 'summary' | 'translations' | null;
+export type ITranslationLanguage = ITranslation['_id'];
 
 interface IState {
     activeSection: IAiAssistantSection;
@@ -17,28 +19,44 @@ interface IState {
      */
     loadingHeadlines: boolean;
     loadingSummary: boolean;
+    loadingTranslations: boolean;
 
     headlines: Array<string>;
     error: boolean;
     summary: string;
+    translations: string;
+    activeLanguageId: ITranslationLanguage;
+    programmaticallyOpened: boolean;
 }
 
 export class AiAssistantWidget extends React.PureComponent<IArticleSideWidgetComponentType, IState> {
     constructor(props: IArticleSideWidgetComponentType) {
         super(props);
 
+        const lsSideWidget = localStorage.getItem('sideWidget');
+        const programmaticallyOpened = lsSideWidget != null
+            ? JSON.parse(lsSideWidget).activeSection === 'translations'
+            : false;
+
         this.state = {
-            activeSection: null,
+            activeSection: lsSideWidget != null ? JSON.parse(lsSideWidget).activeSection : null,
             headlines: [],
-            error: false,
+            summary: '',
+            translations: '',
             loadingSummary: true,
             loadingHeadlines: true,
-            summary: '',
+            loadingTranslations: programmaticallyOpened,
+            error: false,
+            activeLanguageId: this.props.article.language,
+            programmaticallyOpened: programmaticallyOpened,
         };
 
+        localStorage.removeItem('sideWidget');
+
         this.setError = this.setError.bind(this);
         this.generateHeadlines = this.generateHeadlines.bind(this);
         this.generateSummary = this.generateSummary.bind(this);
+        this.generateTranslations = this.generateTranslations.bind(this);
     }
 
     setError() {
@@ -59,6 +77,18 @@ export class AiAssistantWidget extends React.PureComponent<IArticleSideWidgetCom
             });
     }
 
+    generateTranslations() {
+        configuration.generateTranslations?.(this.props.article, this.state.activeLanguageId, superdesk)
+            .then((res) => {
+                this.setState({
+                    loadingTranslations: false,
+                    translations: res,
+                });
+            }).catch(() => {
+                this.setError();
+            });
+    }
+
     generateSummary() {
         configuration.generateSummary?.(this.props.article, superdesk)
             .then((res) => {
@@ -92,6 +122,27 @@ export class AiAssistantWidget extends React.PureComponent<IArticleSideWidgetCom
             fieldsData: this.props.fieldsData,
             onFieldsDataChange: this.props.onFieldsDataChange,
         });
+        const translationsWidget = getTranslationsWidget({
+            closeActiveSection,
+            article: this.props.article,
+            error: this.state.error,
+            setActiveLanguage: (language) => {
+                this.setState({
+                    activeLanguageId: language,
+                });
+            },
+            activeLanguageId: this.state.activeLanguageId,
+            programmaticallyOpened: this.state.programmaticallyOpened,
+            generateTranslations: () => {
+                this.setState({
+                    loadingTranslations: true,
+                }, () => this.generateTranslations());
+            },
+            translations: this.state.translations,
+            loading: this.state.loadingTranslations,
+            fieldsData: this.props.fieldsData,
+            onFieldsDataChange: this.props.onFieldsDataChange,
+        });
         const summaryWidget = getSummaryWidget({
             closeActiveSection,
             article: this.props.article,
@@ -114,6 +165,8 @@ export class AiAssistantWidget extends React.PureComponent<IArticleSideWidgetCom
                 return headlinesWidget;
             } else if (this.state.activeSection === 'summary') {
                 return summaryWidget;
+            } else if (this.state.activeSection === 'translations') {
+                return translationsWidget;
             } else {
                 return {
                     header: undefined,