devexpress-reporting 24.2.8-build-25150-1329 → 25.1.2-beta

package/viewer/ai/_aiPanel.viewmodel.js

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\ai\_aiPanel.viewmodel.js)
-* Version:  24.2.8-build-25150-1329
-* Build date: May 30, 2025
+* Version:  25.1.2-beta
+* Build date: May 14, 2025
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
@@ -30,8 +30,10 @@ export function createViewModel(viewModel) {
         .generateProperty('translateTextButton', createViewModelGenerator()
         .generateProperty('text', TranslateActionText)
         .generateProperty('disabled', this.loading)
-        .generateProperty('onClick', () => this.onTranslateClick())
+        .generateProperty('onClick', () => this.onTranslateClick(this.selectedLanguage))
         .generateProperty('width', '110px')
+        .generateProperty('width', this.translationEnabled ? '110px' : '0px')
+        .generateProperty('visible', this.translationEnabled)
         .generateProperty('template', (data, container) => {
         const buttonIndicatorElement = this._preparetextProcessingButtonTemplate(data, container);
         this.translateButtonLoader = new dxLoadIndicator(buttonIndicatorElement, {
@@ -48,7 +50,8 @@ export function createViewModel(viewModel) {
         .generateProperty('text', SummarizeActionText)
         .generateProperty('onClick', (e) => this.onSummarizeClick())
         .generateProperty('disabled', this.loading)
-        .generateProperty('width', '110px')
+        .generateProperty('width', this.summarizationEnabled ? '110px' : '0px')
+        .generateProperty('visible', this.summarizationEnabled)
         .generateProperty('template', (data, container) => {
         const buttonIndicatorElement = this._preparetextProcessingButtonTemplate(data, container);
         this.summarizeButtonLoader = new dxLoadIndicator(buttonIndicatorElement, {
@@ -65,12 +68,13 @@ export function createViewModel(viewModel) {
         });
     })
         .generateProperty('languageSelectBoxOptions', createViewModelGenerator()
-        .generateProperty('valueExpr', 'key')
+        .generateProperty('valueExpr', 'id')
         .generateProperty('displayExpr', 'text')
         .generateProperty('dataSource', this.languages)
         .generateProperty('value', this.selectedLanguage)
         .generateProperty('showClearButton', true)
         .generateProperty('inputAttr', { 'aria-label': TargetLanguageText })
+        .generateProperty('visible', this.languages.length > 0)
         .generateProperty('onValueChanged', (event) => {
         this.selectedLanguage = event.value;
         this.languageSelectBoxComponent = event.component;

package/viewer/ai/_aiPanelModel.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\ai\_aiPanelModel.d.ts)
-* Version:  24.2.8-build-25150-1329
-* Build date: May 30, 2025
+* Version:  25.1.2-beta
+* Build date: May 14, 2025
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
@@ -11,9 +11,13 @@ import { TabInfo } from '@devexpress/analytics-core/analytics-utils-native';
 import { Properties as DxMenuOptions } from 'devextreme/ui/menu';
 import dxLoadIndicator from 'devextreme/ui/load_indicator';
 import { ReportPreview } from '../reportPreview';
+import { PreviewPage } from '../internal/_page';
 import { IBrickNode } from '../utils/utils';
 import { AILanguageInfo } from '../settings';
 import { IAIPanelViewModel, TextSourceTarget } from './_aiPanel.viewmodel';
+import { IAITextTranslationResponse } from '../internal/_previewRequestWrapper';
+import { IPreviewAISettings } from '../utils/initializer';
+import { IProgressHandler } from '../internal/_progressViewModel';
 export type SurfacePosition = {
     topP: string;
     leftP?: string;
@@ -21,10 +25,15 @@ export type SurfacePosition = {
     heightP: string;
     widthP: string;
 };
+export declare class AITabInfo extends TabInfo {
+    constructor(model: any, template: string, visible: boolean);
+}
 export declare class AIPanelViewModel extends BaseRenderingModel<IAIPanelViewModel> {
     reportPreview: ReportPreview;
+    settings: IPreviewAISettings;
     tabInfo: TabInfo;
     aiProcessingRequestDeferred: DxDeferred<any>;
+    tranlsatePagesDeferred: DxDeferred[];
     ignore: boolean;
     aiProcessingResultText: string;
     selectedLanguage: string;
@@ -40,6 +49,9 @@ export declare class AIPanelViewModel extends BaseRenderingModel<IAIPanelViewMod
     translateButtonLoader: dxLoadIndicator;
     summarizeButtonLoader: dxLoadIndicator;
     languages: AILanguageInfo[];
+    translationEnabled: boolean;
+    inlineTranslationEnabled: boolean;
+    summarizationEnabled: boolean;
     currentPageSelectionSubcriber: () => void;
     loading: boolean;
     TextSourceTargetText: {
@@ -50,6 +62,7 @@ export declare class AIPanelViewModel extends BaseRenderingModel<IAIPanelViewMod
     InvalidLanguageErrorMsg: string;
     SummarizeActionText: string;
     TranslateActionText: string;
+    TranslateDocumentInPlaceText: string;
     warningMsg: string;
     targets: {
         key: TextSourceTarget;
@@ -62,9 +75,14 @@ export declare class AIPanelViewModel extends BaseRenderingModel<IAIPanelViewMod
         text: string;
     }[];
     prevRespose: string;
-    constructor(reportPreview: ReportPreview);
+    get _currentPage(): PreviewPage;
+    constructor(reportPreview: ReportPreview, settings: IPreviewAISettings);
     expandAITabPanel(): void;
+    get progressBar(): IProgressHandler;
+    get documentHasTranslation(): boolean;
+    get IsBrickSelected(): boolean;
     handleSelectedBrickChangedEvent(selectedBricks: IBrickNode[]): void;
+    updateAIMenuToPage(): void;
     updateViewModel(args: PropertyChangedEventArgs<AIPanelViewModel> | ArrayPropertyChangedEventArgs<AIPanelViewModel>): void;
     createViewModel(): IAIPanelViewModel;
     onPropertyChanged(args: PropertyChangedEventArgs<AIPanelViewModel> | ArrayPropertyChangedEventArgs<AIPanelViewModel>): void;
@@ -73,10 +91,19 @@ export declare class AIPanelViewModel extends BaseRenderingModel<IAIPanelViewMod
     _getTextContentToProcess(): string;
     copyResultClick(e: any): void;
     onSummarizeClick(): void;
-    onTranslateClick(): void;
+    onTranslateClick(language: string, translateInPlace?: boolean, allDocument?: boolean): void;
+    revertPageToOriginal(page: PreviewPage): void;
+    revertToOriginal(allPages?: boolean): void;
+    clearTranslatePagesDeffereds(): void;
+    cancelDocumentTranslation(): void;
+    startProgressBar(): void;
+    translateDocument(language: string): void;
+    translateDocumentPage(brickIndexes: string[], pageIndex: number, language: string, aiCustomDocumentStorageId?: string, prevResponse?: string, currentChunkPosition?: number): void;
     translateText(text: string, prevResponse?: string, currentChunkPosition?: number): void;
     summarizeText(text: string, language?: string, prevResponse?: string, currentChunkPosition?: number): void;
-    _handleTextProcessingResult(result: any, nextChunkRequestFunc: (prevResultText: string, nextChunkPosition: number) => void, isSummary?: boolean): void;
+    _handeTranslateInPlaseResult(result: any, page: PreviewPage, nextChunkRequestFunc: (prevResultText: string, nextChunkPosition: number, aiCustomDocumentStorageId?: string) => void): void;
+    _handleTextProcessingResult(result: IAITextTranslationResponse, nextChunkRequestFunc: (prevResultText: string, nextChunkPosition: number) => void, isSummary?: boolean): void;
+    _updatePageImage(page?: PreviewPage): void;
     resizeResultArea(): void;
     failRequestHandler(errorMessage: string, ignore: boolean): void;
     clearProcessing(clearContent?: boolean): void;

package/viewer/ai/_aiPanelModel.js

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (viewer\ai\_aiPanelModel.js)
-* Version:  24.2.8-build-25150-1329
-* Build date: May 30, 2025
+* Version:  25.1.2-beta
+* Build date: May 14, 2025
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
@@ -16,15 +16,34 @@ import { BaseRenderingModel, mutable } from '@devexpress/analytics-core/analytic
 import { $dx, DxDeferred, formatUnicorn } from '@devexpress/analytics-core/analytics-internal-native';
 import { getLocalization, TabInfo } from '@devexpress/analytics-core/analytics-utils-native';
 import { getParentContainer } from '@devexpress/analytics-core/analytics-internal-native';
-import { AIServicesEnabled, AILanguages } from '../settings';
+import { AIServicesEnabled } from '../settings';
 import { createViewModel, TextSourceTarget } from './_aiPanel.viewmodel';
+import { getCurrentResolution } from '../internal/_utils';
+export class AITabInfo extends TabInfo {
+    constructor(model, template, visible) {
+        super({
+            text: getLocalization('AI Operations', 'ASPxReportsStringId.AIPanel_PanelHeaderLabel'),
+            template,
+            model,
+            localizationId: 'ASPxReportsStringId.AIPanel_PanelHeaderLabel',
+            imageClassName: 'aitab',
+            imageTemplateName: 'dxrd-svg-tabs-aitab',
+            visible
+        });
+    }
+}
 export class AIPanelViewModel extends BaseRenderingModel {
-    constructor(reportPreview) {
+    get _currentPage() {
+        return this.reportPreview?.currentPage;
+    }
+    constructor(reportPreview, settings) {
         super();
         this.reportPreview = reportPreview;
+        this.settings = settings;
         this.aiProcessingRequestDeferred = new DxDeferred();
-        this.ignore = false;
-        this.languages = AILanguages();
+        this.tranlsatePagesDeferred = [];
+        this.ignore = true;
+        this.languages = [];
         this.TextSourceTargetText = {
             Document: getLocalization('Entire Document', 'ASPxReportsStringId.AIPanel_TargetTypeDocument'),
             Page: getLocalization('Page', 'ASPxReportsStringId.AIPanel_TargetType_Page'),
@@ -33,61 +52,180 @@ export class AIPanelViewModel extends BaseRenderingModel {
         this.InvalidLanguageErrorMsg = getLocalization('Select a language', 'ASPxReportsStringId.AIPanel_InvalidLanguageValueErrorMsg');
         this.SummarizeActionText = getLocalization('Summarize', 'ASPxReportsStringId.AIPanel_SummarizeAction');
         this.TranslateActionText = getLocalization('Translate', 'ASPxReportsStringId.AIPanel_TranslateAction');
+        this.TranslateDocumentInPlaceText = getLocalization('Translate Inline', 'ASPxReportsStringId.AIPanel_TranslateInPlase');
         this.warningMsg = 'Text is too long to process within a single request. Text will be split into sections and processed in {0} steps. Proceed?';
         this.targets = [
             { key: TextSourceTarget.Document, text: this.TextSourceTargetText.Document },
             { key: TextSourceTarget.Page, text: this.TextSourceTargetText.Page },
             { key: TextSourceTarget.Selection, text: this.TextSourceTargetText.Selection }
         ];
+        const translationSettings = settings?.translationSettings;
+        this.languages = translationSettings?.languages ?? [];
+        this.inlineTranslationEnabled = !!(translationSettings?.inlineTranslationEnabled && this.languages?.length > 0);
+        this.translationEnabled = !!(translationSettings?.translationEnabled && this.languages?.length > 0);
+        this.summarizationEnabled = settings?.summarizationSettings?.summarizationEnabled ?? false;
+        const aiEnabled = this.inlineTranslationEnabled || this.translationEnabled || this.summarizationEnabled || AIServicesEnabled();
+        AIServicesEnabled(aiEnabled);
         const getDisabled = () => reportPreview.documentBuilding || !reportPreview.documentId || reportPreview.pageIndex === -1;
-        const tabInfoVisible = () => !getDisabled() && AIServicesEnabled();
-        this.tabInfo = new TabInfo({
-            text: getLocalization('AI Operations', 'ASPxReportsStringId.AIPanel_PanelHeaderLabel'),
-            template: 'dxrd-preview-ai-panel',
-            model: this,
-            localizationId: 'ASPxReportsStringId.AIPanel_PanelHeaderLabel',
-            imageClassName: 'aitab',
-            imageTemplateName: 'dxrd-svg-tabs-aitab',
-            visible: tabInfoVisible()
-        });
-        const summarizeMenuItem = {
-            text: this.SummarizeActionText,
-            key: 'dx_summarize_text'
+        const tabInfoVisible = () => !getDisabled() && AIServicesEnabled() && (this.translationEnabled || this.summarizationEnabled);
+        this.tabInfo = new AITabInfo(this, 'dxrd-preview-ai-panel', tabInfoVisible());
+        const menuItemId = {
+            Summarize: 'dx_summarize_text',
+            Translate: 'dx_translate',
+            TranslateInPlaceRoot: 'dx_translate_in_place_root',
+            TranslatePageInPlace: 'dx_translate_page_in_place',
+            TranslateSelectionInPlace: 'dx_translate_selection_in_place',
+            TranslateDocumentInPlace: 'dx_translate_document_in_place',
+            RevertToOriginalRoot: 'dx_revert_to_original_root',
+            RevertPageToOriginal: 'dx_revert_page_to_original_root',
+            RevertAllDocumentToOriginal: 'dx_revert_all_document_to_original_root',
         };
+        const aiMenuItems = [{
+                text: this.SummarizeActionText,
+                key: menuItemId.Summarize,
+                visible: this.summarizationEnabled
+            },
+            {
+                text: this.TranslateActionText,
+                visible: this.translationEnabled,
+                items: this.languages.map(language => {
+                    return { ...language, key: menuItemId.Translate };
+                }),
+            },
+            {
+                text: this.TranslateDocumentInPlaceText,
+                visible: this.inlineTranslationEnabled,
+                id: menuItemId.TranslateInPlaceRoot,
+                items: [{
+                        text: getLocalization('Current Page', 'ASPxReportsStringId.AIPanel_TranslateCurrentPage'),
+                        id: menuItemId.TranslatePageInPlace,
+                        items: this.languages.map(language => {
+                            return { ...language, key: menuItemId.TranslatePageInPlace };
+                        }),
+                    }, {
+                        text: getLocalization('Entire Document', 'ASPxReportsStringId.AIPanel_TranslateAllDocument'),
+                        id: menuItemId.TranslateDocumentInPlace,
+                        items: this.languages.map(language => {
+                            return { ...language, key: menuItemId.TranslateDocumentInPlace };
+                        }),
+                    },
+                    ...this.languages.map(language => { return { ...language, key: menuItemId.TranslateSelectionInPlace }; })
+                ]
+            },
+            {
+                text: getLocalization('Revert to Original', 'ASPxReportsStringId.AIPanel_RevertPageToOriginal'),
+                id: menuItemId.RevertToOriginalRoot,
+                key: menuItemId.RevertToOriginalRoot,
+                items: [{
+                        text: getLocalization('Current Page', 'ASPxReportsStringId.AIPanel_RevertPageToOriginal'),
+                        id: menuItemId.RevertPageToOriginal,
+                        key: menuItemId.RevertPageToOriginal,
+                    }, {
+                        text: getLocalization('Entire Document', 'ASPxReportsStringId.AIPanel_RevertAllDocumentToOriginal'),
+                        id: menuItemId.RevertAllDocumentToOriginal,
+                        key: menuItemId.RevertAllDocumentToOriginal,
+                    }]
+            }
+        ];
         const that = this;
         this.smartTagAIMenu = {
             dataSource: [{
                     text: '',
                     icon: 'dxrd-svg-menu-aimenu',
-                    items: [
-                        summarizeMenuItem,
-                        {
-                            text: this.TranslateActionText,
-                            items: AILanguages()
-                        }
-                    ],
+                    items: aiMenuItems
                 }],
             hideSubmenuOnMouseLeave: false,
             onItemClick(e) {
                 e.event?.stopPropagation();
                 if (!e.itemData || !e.itemData['key'] || that.loading)
                     return;
+                const itemKey = e.itemData['key'];
                 that.selectedTarget = TextSourceTarget.Selection;
-                that.expandAITabPanel();
-                if (e.itemData['key'] === 'dx_summarize_text') {
+                if (itemKey === menuItemId.Summarize) {
+                    that.expandAITabPanel();
+                    that.IsBrickSelected ? that.selectedTarget = TextSourceTarget.Selection : that.selectedTarget = TextSourceTarget.Page;
                     that.onSummarizeClick();
                 }
-                else if (e.itemData['key']) {
-                    that.selectedLanguage = e.itemData['key'];
-                    that.onTranslateClick();
+                else if (itemKey === menuItemId.TranslatePageInPlace || itemKey === menuItemId.TranslateSelectionInPlace) {
+                    that.onTranslateClick(e.itemData['id'], true);
+                }
+                else if (itemKey === menuItemId.TranslateDocumentInPlace) {
+                    that.onTranslateClick(e.itemData['id'], true, true);
+                }
+                else if (itemKey === menuItemId.Translate) {
+                    that.expandAITabPanel();
+                    that.selectedLanguage = e.itemData['id'];
+                    if (!that.selectedLanguage) {
+                        that.languageSelectBoxComponent?.option({
+                            validationStatus: 'invalid',
+                            validationErrors: [{ message: this.InvalidLanguageErrorMsg }]
+                        });
+                        return;
+                    }
+                    that.IsBrickSelected ? that.selectedTarget = TextSourceTarget.Selection : that.selectedTarget = TextSourceTarget.Page;
+                    that.onTranslateClick(that.selectedLanguage);
+                }
+                else if (itemKey === menuItemId.RevertPageToOriginal) {
+                    that.revertToOriginal(false);
+                }
+                else if (itemKey === menuItemId.RevertAllDocumentToOriginal) {
+                    that.revertToOriginal(true);
                 }
             },
             onSubmenuShowing: (e) => {
+                const that = this;
                 const popupContainer = getParentContainer(e['element']);
                 e['submenu']._overlay.option('container', popupContainer);
                 e['submenu']._overlay.option('focusStateEnabled', false);
                 e['submenu']._overlay.option('position', { collision: 'none', boundary: popupContainer });
                 e['submenu']._attachHoverEvents();
+                const submenuItems = e['submenu'].option('items');
+                let updateItems = false;
+                submenuItems.forEach(function (item) {
+                    let visible = item.visible;
+                    switch (item.id) {
+                        case menuItemId.RevertToOriginalRoot:
+                            visible = !!that._currentPage.aiCustomDocumentStorageId || that.documentHasTranslation;
+                            item.internalFields?.item?.items?.forEach(item => {
+                                const pageHasTranslation = !!that._currentPage?.aiCustomDocumentStorageId;
+                                if (item.id === menuItemId.RevertPageToOriginal && item.visible !== pageHasTranslation) {
+                                    item.visible = pageHasTranslation;
+                                    updateItems = true;
+                                }
+                            });
+                            break;
+                        case menuItemId.RevertPageToOriginal:
+                            visible = !!that._currentPage.aiCustomDocumentStorageId;
+                            break;
+                        case menuItemId.RevertAllDocumentToOriginal:
+                            visible = that.documentHasTranslation;
+                            break;
+                        case menuItemId.TranslateInPlaceRoot:
+                            item.internalFields?.item?.items?.forEach(item => {
+                                const shouldChange = item.visible !== !that.IsBrickSelected;
+                                if (item.id === menuItemId.TranslateDocumentInPlace && shouldChange) {
+                                    item.visible = !that.IsBrickSelected;
+                                    updateItems = true;
+                                }
+                                if (item.id === menuItemId.TranslatePageInPlace && shouldChange) {
+                                    item.visible = !that.IsBrickSelected;
+                                    updateItems = true;
+                                }
+                                if (item.key === menuItemId.TranslateSelectionInPlace && item.visible !== that.IsBrickSelected) {
+                                    item.visible = that.IsBrickSelected;
+                                    updateItems = true;
+                                }
+                            });
+                            break;
+                    }
+                    if (item.visible !== visible) {
+                        item.visible = visible;
+                        item['internalFields']['item']['visible'] = visible;
+                        updateItems = true;
+                    }
+                });
+                if (updateItems)
+                    e['submenu'].option('items', submenuItems);
             },
             visible: AIServicesEnabled()
         };
@@ -111,6 +249,7 @@ export class AIPanelViewModel extends BaseRenderingModel {
                 const currentPage = args.newValue;
                 currentPage.smartTagAIMenu = this.smartTagAIMenu;
                 this.currentPageSelectionSubcriber && this.currentPageSelectionSubcriber();
+                this.updateAIMenuToPage();
                 this.currentPageSelectionSubcriber = currentPage.events.on('activeBricksChanged', (args) => {
                     this.handleSelectedBrickChangedEvent(args.newValue);
                 });
@@ -123,9 +262,20 @@ export class AIPanelViewModel extends BaseRenderingModel {
     expandAITabPanel() {
         this.reportPreview.tabPanel?.toggleTabVisibility({ model: this.tabInfo }, true);
     }
+    get progressBar() {
+        return this.reportPreview?.progressBar;
+    }
+    get documentHasTranslation() {
+        return this.reportPreview?.pages.some(page => !!page.aiCustomDocumentStorageId) ?? false;
+    }
+    get IsBrickSelected() {
+        return this._currentPage?.getActiveBrick()?.length > 0;
+    }
     handleSelectedBrickChangedEvent(selectedBricks) {
-        if (selectedBricks.length === 0)
+        if (selectedBricks.length === 0) {
+            this.updateAIMenuToPage();
             return;
+        }
         let topBrick = selectedBricks[0];
         selectedBricks.forEach(brick => {
             if (brick.top < topBrick.top)
@@ -134,7 +284,7 @@ export class AIPanelViewModel extends BaseRenderingModel {
                 topBrick = brick;
         });
         const topP = topBrick.topP;
-        this.reportPreview.currentPage.smartTagAIMenuPosition = {
+        this._currentPage.smartTagAIMenuPosition = {
             heightP: topBrick.heightP,
             topP: topP,
             widthP: topBrick.widthP,
@@ -142,6 +292,16 @@ export class AIPanelViewModel extends BaseRenderingModel {
             rightP: this.reportPreview.rtlViewer ? '92.5%' : '0%'
         };
     }
+    updateAIMenuToPage() {
+        this.selectedTarget = TextSourceTarget.Page;
+        this._currentPage.smartTagAIMenuPosition = {
+            heightP: '3%',
+            topP: '0%',
+            widthP: '11%',
+            leftP: this.reportPreview?.showMultipagePreview ? '94%' : '100%',
+            rightP: '0%'
+        };
+    }
     updateViewModel(args) {
         const viewModel = this.getViewModel();
         if (args.propertyName === 'aiProcessingResultText') {
@@ -229,9 +389,11 @@ export class AIPanelViewModel extends BaseRenderingModel {
         let page;
         const useSelectedContent = this.selectedTarget === TextSourceTarget.Selection;
         if (useSelectedContent)
-            page = this.reportPreview.currentPage;
+            page = this._currentPage;
         else if (!this.translateWholeDocument)
             page = this.reportPreview.pages[this.selectedPage];
+        if (page)
+            page.shouldSendRequest = false;
         return this.translateWholeDocument ? '' : (page?.getBricksTextContent(useSelectedContent) ?? '');
     }
     copyResultClick(e) {
@@ -271,32 +433,101 @@ export class AIPanelViewModel extends BaseRenderingModel {
         const text = this._getTextContentToProcess();
         this.summarizeText(text, this.selectedLanguage);
     }
-    onTranslateClick() {
-        if (this.loading)
-            return;
-        if (!this.selectedLanguage) {
-            this.languageSelectBoxComponent?.option({
-                validationStatus: 'invalid',
-                validationErrors: [{ message: this.InvalidLanguageErrorMsg }]
-            });
+    onTranslateClick(language, translateInPlace = false, allDocument = false) {
+        if (this.loading && !translateInPlace)
             return;
+        if (!translateInPlace) {
+            this.clearProcessing();
+            this.loading = true;
+            const viewModel = this.getViewModel();
+            if (this.translateButtonLoader) {
+                viewModel.buttons.translateTextButton.text = '';
+                this.translateButtonLoader.option('visible', true);
+            }
+            const text = this._getTextContentToProcess();
+            this.translateText(text);
         }
-        this.clearProcessing();
-        this.loading = true;
-        const viewModel = this.getViewModel();
-        if (this.translateButtonLoader) {
-            viewModel.buttons.translateTextButton.text = '';
-            this.translateButtonLoader.option('visible', true);
+        else {
+            if (allDocument)
+                this.translateDocument(language);
+            else {
+                const brickIndexes = this._currentPage?.getActiveBrick()?.map(brick => brick.indexes) ?? [];
+                this.translateDocumentPage(brickIndexes, this._currentPage.pageIndex, language, this._currentPage.aiCustomDocumentStorageId);
+            }
         }
-        const text = this._getTextContentToProcess();
-        this.translateText(text);
+    }
+    revertPageToOriginal(page) {
+        if (!!page.aiCustomDocumentStorageId) {
+            page._useOriginal = true;
+            this._updatePageImage(page);
+        }
+    }
+    revertToOriginal(allPages = false) {
+        if (allPages) {
+            this.reportPreview.pages.forEach(page => this.revertPageToOriginal(page));
+        }
+        else {
+            this.revertPageToOriginal(this._currentPage);
+        }
+    }
+    clearTranslatePagesDeffereds() {
+        this.tranlsatePagesDeferred.length && this.tranlsatePagesDeferred.forEach(deferred => deferred.reject());
+        this.tranlsatePagesDeferred = [];
+    }
+    cancelDocumentTranslation() {
+        this.clearTranslatePagesDeffereds();
+        this.progressBar.complete(this.reportPreview.documentId);
+        this.reportPreview?.pages.forEach(page => page.aiOperationInProgress = false);
+    }
+    startProgressBar() {
+        this.progressBar.text = getLocalization('Translating the document...', 'ASPxReportsStringId.WebDocumentViewer_TranslatingDocument');
+        this.progressBar.cancelText = getLocalization('Cancel', 'AnalyticsCoreStringId.SearchDialog_Cancel');
+        this.progressBar.startProgress(this.reportPreview.documentId, (documentId) => this.cancelDocumentTranslation());
+    }
+    translateDocument(language) {
+        this.clearTranslatePagesDeffereds();
+        this.startProgressBar();
+        let totalPagesProcessed = 0;
+        const totalPages = this.reportPreview.pages.length;
+        const step = 100 / totalPages;
+        this.reportPreview.pages.forEach(page => {
+            const translatePageDeffered = new DxDeferred();
+            this.tranlsatePagesDeferred.push(translatePageDeffered);
+            page.aiOperationInProgress = true;
+            this.reportPreview.requestWrapper.translateDocumentInPlaseRequest([], language ?? 'en', false, '', 0, page.pageIndex, page.aiCustomDocumentStorageId, this.ignore)
+                .then(result => translatePageDeffered.resolve(result), fail => translatePageDeffered.reject())
+                .always(() => {
+                page.aiOperationInProgress = false;
+                this.progressBar.progress += step;
+                totalPagesProcessed += 1;
+                if (totalPagesProcessed == totalPages) {
+                    this.loading = false;
+                    this.progressBar.complete(this.reportPreview.documentId);
+                }
+            });
+            translatePageDeffered.done(result => this._handeTranslateInPlaseResult(result, page, (prevResultText, nextChunkPosition, aiCustomDocumentStorageId) => this.translateDocumentPage([], page.pageIndex, language, aiCustomDocumentStorageId, prevResultText, nextChunkPosition)));
+            translatePageDeffered.fail(() => page.loading = false);
+        });
+    }
+    translateDocumentPage(brickIndexes, pageIndex, language, aiCustomDocumentStorageId, prevResponse, currentChunkPosition) {
+        const page = this.reportPreview.pages[pageIndex];
+        if (!page)
+            return;
+        page.aiOperationInProgress = true;
+        const ignore = true;
+        this.aiProcessingRequestDeferred = new DxDeferred();
+        this.reportPreview.requestWrapper.translateDocumentInPlaseRequest(brickIndexes, language, false, prevResponse, currentChunkPosition, pageIndex, aiCustomDocumentStorageId, ignore)
+            .then(result => this.aiProcessingRequestDeferred.resolve(result), fail => this.aiProcessingRequestDeferred.reject())
+            .always(() => page && (page.aiOperationInProgress = false));
+        this.aiProcessingRequestDeferred.done((result) => {
+            this._handeTranslateInPlaseResult(result, page, (prevResultText, nextChunkPosition, aiCustomDocumentStorageId) => this.translateDocumentPage(brickIndexes, pageIndex, language, aiCustomDocumentStorageId, prevResultText, nextChunkPosition));
+        }).always(() => page && (page.aiOperationInProgress = false));
     }
     translateText(text, prevResponse, currentChunkPosition) {
         const ignore = true;
         this.aiProcessingRequestDeferred = new DxDeferred();
-        this.reportPreview.requestWrapper.translateTextRequest(text, this.selectedLanguage ?? 'en', this.translateWholeDocument, prevResponse, currentChunkPosition, ignore)
-            .then(result => this.aiProcessingRequestDeferred.resolve(result))
-            .catch(fail => this.failRequestHandler(fail, ignore));
+        this.reportPreview.requestWrapper.translateTextRequest(text, this.selectedLanguage ?? 'en', this.translateWholeDocument, prevResponse, currentChunkPosition, false, ignore)
+            .then(result => this.aiProcessingRequestDeferred.resolve(result), fail => this.failRequestHandler(fail, ignore));
         this.aiProcessingRequestDeferred.done((result) => {
             this._handleTextProcessingResult(result, (prevResultText, nextChunkPosition) => this.translateText(text, prevResultText, nextChunkPosition));
         });
@@ -304,13 +535,37 @@ export class AIPanelViewModel extends BaseRenderingModel {
     summarizeText(text, language, prevResponse, currentChunkPosition) {
         this.aiProcessingRequestDeferred = new DxDeferred();
         this.reportPreview.requestWrapper.summarizeTextRequest(text, this.translateWholeDocument, prevResponse, currentChunkPosition, language, this.ignore)
-            .then(result => this.aiProcessingRequestDeferred.resolve(result))
-            .catch(fail => this.failRequestHandler(fail, this.ignore));
+            .then(result => this.aiProcessingRequestDeferred.resolve(result), fail => this.failRequestHandler(fail, this.ignore));
         this.aiProcessingRequestDeferred.done((result) => {
             result.language = language;
             this._handleTextProcessingResult(result, (prevResultText, nextChunkPosition) => this.summarizeText(text, language, prevResultText, nextChunkPosition), true);
         });
     }
+    _handeTranslateInPlaseResult(result, page, nextChunkRequestFunc) {
+        if (result.success) {
+            if (result.requestAgain) {
+                let nextChunkPosition = result.chunkIndex;
+                if (nextChunkPosition === -1 || (result.text && result.text.length))
+                    nextChunkPosition += 1;
+                if (this.proceedForAllChunks) {
+                    nextChunkRequestFunc(result.text, nextChunkPosition, result.aiCustomDocumentStorageId);
+                }
+                else {
+                    const remainingChunkRequests = parseInt(result.totalChunks) - nextChunkPosition;
+                    this.limitExceededWarningMsg = formatUnicorn(getLocalization(this.warningMsg, 'ASPxReportsStringId.AIPanel_LimitExceededWarning'), remainingChunkRequests);
+                    this.warningTextLimitPopupVisible = true;
+                    this.proceedNextButtonClick = (e) => {
+                        this.warningTextLimitPopupVisible = false;
+                        nextChunkRequestFunc(result.text, nextChunkPosition);
+                    };
+                }
+            }
+            else {
+                page.aiCustomDocumentStorageId = result.aiCustomDocumentStorageId;
+                this._updatePageImage(page);
+            }
+        }
+    }
     _handleTextProcessingResult(result, nextChunkRequestFunc, isSummary = false) {
         if (result.success) {
             if (!isSummary)
@@ -335,16 +590,15 @@ export class AIPanelViewModel extends BaseRenderingModel {
             else {
                 if (isSummary) {
                     if (result.language) {
-                        this.reportPreview.requestWrapper.translateTextRequest(result.text, result.language, false, '', 0, this.ignore)
+                        this.reportPreview.requestWrapper.translateTextRequest(result.text, result.language, false, '', 0, true, this.ignore)
                             .then(translateResult => {
                             if (translateResult.success) {
                                 this.aiProcessingResultText = translateResult.text;
                                 this.clearProcessing(false);
                             }
                             else
-                                this.failRequestHandler(result.ErrorMessage, false);
-                        })
-                            .catch(fail => {
+                                this.failRequestHandler(result.errorMessage, false);
+                        }, fail => {
                             this.aiProcessingResultText = result.text;
                             this.failRequestHandler(fail, this.ignore);
                         });
@@ -360,9 +614,17 @@ export class AIPanelViewModel extends BaseRenderingModel {
             }
         }
         else {
-            this.failRequestHandler(result.ErrorMessage, false);
+            this.failRequestHandler(result.errorMessage, false);
         }
     }
+    _updatePageImage(page) {
+        const currentPage = page ?? this._currentPage;
+        currentPage.shouldSendRequest = true;
+        if (currentPage.actualResolution === 0)
+            currentPage.actualResolution = getCurrentResolution(this.reportPreview.zoom);
+        currentPage._updateImageSrc(true);
+        setTimeout(() => { currentPage._onImageSrcChanged(); }, 10);
+    }
     resizeResultArea() {
         const aiPanelElement = document.getElementById('dxrd-preview-ai-panel-id');
         const resultTextElement = document.getElementById('dxrd-ai-panel-text-area-id');