HtmlEditor: Process TextTransform command execution

Co-authored-by: marker dao ® <[email protected]>

Author: marker-dao

packages/devextreme-scss/scss/widgets/base/_mixins.scss

@@ -134,5 +134,15 @@
   height: $indicator-size;
 }
 
+@mixin dx-pending-indicator-centered($indicator-size) {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: $indicator-size;
+  height: $indicator-size;
+  transform: translate(-50%, -50%);
+}
+
 $overlay-zindex: 1000;
 $max-integer: 2147483647;

packages/devextreme-scss/scss/widgets/fluent/htmlEditor/_index.scss

@@ -14,6 +14,7 @@
 @use "../common/sizes" as *;
 @use "../fileUploader/sizes" as *;
 @use "../popup/sizes" as *;
+@use "../../base/mixins" as *;
 @use "../../base/htmlEditor";
 
 // adduse
@@ -315,3 +316,7 @@
   padding: $fluent-aidialog-content-padding;
   gap: $fluent-aidialog-content-gap;
 }
+
+.dx-aidialog .dx-pending-indicator {
+  @include dx-pending-indicator-centered($fluent-invalid-badge-size);
+}

packages/devextreme-scss/scss/widgets/generic/htmlEditor/_index.scss

@@ -11,6 +11,8 @@
 @use "../fileUploader/sizes" as *;
 @use "../toolbar/sizes" as *;
 @use "../common/mixins" as *;
+@use "../common/sizes" as *;
+@use "../../base/mixins" as *;
 @use "../../base/htmlEditor";
 
 // adduse
@@ -316,4 +318,8 @@
   .dx-button {
     min-width: auto;
   }
+
+  .dx-pending-indicator {
+    @include dx-pending-indicator-centered($generic-pending-indicator-size);
+  }
 }

packages/devextreme-scss/scss/widgets/material/common/_mixins.scss

@@ -3,6 +3,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../common/sizes" as *;
 @use "../../base/mixins" as *;
 @use "../../base/validation" as *;
 @use "../list/sizes" as *;

packages/devextreme-scss/scss/widgets/material/htmlEditor/_index.scss

@@ -10,8 +10,10 @@
 @use "../textEditor/colors" as *;
 @use "../toolbar/sizes" as *;
 @use "../common/mixins" as *;
+@use "../common/sizes" as *;
 @use "../fileUploader/sizes" as *;
 @use "../popup/sizes" as *;
+@use "../../base/mixins" as *;
 @use "../../base/htmlEditor";
 
 // adduse
@@ -366,4 +368,8 @@
     padding: $material-aidialog-content-padding;
     gap: $material-aidialog-content-gap;
   }
+
+  .dx-pending-indicator {
+    @include dx-pending-indicator-centered($material-invalid-badge-size);
+  }
 }

packages/devextreme/js/__internal/core/ai_integration/core/ai_integration.ts

@@ -161,7 +161,7 @@ export class AIIntegration implements IAIIntegration {
   }
 
   public shorten(
-    params: SummarizeCommandParams,
+    params: ShortenCommandParams,
     callbacks: RequestCallbacks<ShortenCommandResult>,
   ): () => void {
     return this.executeCommand(

packages/devextreme/js/__internal/core/ai_integration/core/request_manager.test.ts

@@ -5,7 +5,7 @@ import {
   it,
   jest,
 } from '@jest/globals';
-import type { AIProvider, Prompt } from '@js/common/ai-integration';
+import type { AIProvider, Prompt, RequestParams } from '@js/common/ai-integration';
 import { ERROR_MESSAGES, RequestManager } from '@ts/core/ai_integration/core/request_manager';
 import { Provider } from '@ts/core/ai_integration/test_utils/provider_mock';
 
@@ -113,8 +113,8 @@ describe('RequestManager', () => {
       });
     });
 
-    it('should return the abort function that returned from sendRequest', () => {
-      const abort = (): void => {};
+    it('should call the abort function that returned from sendRequest', () => {
+      const abort = jest.fn();
 
       const sendRequestSpy = jest.spyOn(provider, 'sendRequest');
 
@@ -125,7 +125,9 @@ describe('RequestManager', () => {
 
       const abortRequest = requestManager.sendRequest({ user: 'user' }, {});
 
-      expect(abortRequest).toBe(abort);
+      abortRequest();
+
+      expect(abort).toHaveBeenCalledTimes(1);
     });
 
     it('should work correctly with no definition of callbacks', () => {
@@ -139,5 +141,72 @@ describe('RequestManager', () => {
         requestManager.sendRequest({ user: 'test' }, { onChunk: () => {} });
       }).not.toThrow();
     });
+
+    describe('if abort is called', () => {
+      it('should not forward chunks', () => {
+        const onChunkSpy = jest.fn();
+
+        let capturedParams = undefined as unknown as RequestParams;
+
+        jest.spyOn(provider, 'sendRequest').mockImplementation((params) => {
+          capturedParams = params;
+
+          return {
+            promise: Promise.resolve(''),
+            abort: (): void => {},
+          };
+        });
+
+        const abort = requestManager.sendRequest({ user: 'test' }, { onChunk: onChunkSpy });
+
+        abort();
+
+        capturedParams?.onChunk?.('chunk');
+
+        expect(onChunkSpy).not.toHaveBeenCalled();
+      });
+
+      it('should not call onComplete', async () => {
+        let resolvePromise: (response: string) => void = () => {};
+
+        const promise = new Promise<string>((resolve) => { resolvePromise = resolve; });
+
+        jest.spyOn(provider, 'sendRequest').mockReturnValue({
+          promise,
+          abort: (): void => {},
+        });
+
+        const onCompleteSpy = jest.fn();
+        const abort = requestManager.sendRequest({ user: 'user' }, { onComplete: onCompleteSpy });
+
+        abort();
+        resolvePromise('resolve');
+
+        await promise;
+
+        expect(onCompleteSpy).not.toHaveBeenCalled();
+      });
+
+      it('should not call onError', async () => {
+        let rejectPromise: (e: Error) => void = () => {};
+
+        const promise = new Promise<string>((_, reject) => { rejectPromise = reject; });
+
+        jest.spyOn(provider, 'sendRequest').mockReturnValue({
+          promise,
+          abort: (): void => {},
+        });
+
+        const onErrorSpy = jest.fn();
+        const abort = requestManager.sendRequest({ user: 'user' }, { onError: onErrorSpy });
+
+        abort();
+        rejectPromise(new Error('error'));
+
+        await new Promise(process.nextTick);
+
+        expect(onErrorSpy).not.toHaveBeenCalled();
+      });
+    });
   });
 });

packages/devextreme/js/__internal/core/ai_integration/core/request_manager.ts

@@ -19,16 +19,23 @@ export class RequestManager {
 
   public sendRequest(prompt: Prompt, callbacks: RequestManagerCallbacks): () => void {
     if (typeof this.provider.sendRequest === 'function') {
+      let aborted = false;
+
       const params: RequestParams = {
         prompt,
-        onChunk: (chunk: string): void => { callbacks?.onChunk?.(chunk); },
+        onChunk: (chunk: string): void => { if (!aborted) { callbacks?.onChunk?.(chunk); } },
       };
 
-      const { promise, abort } = this.provider.sendRequest(params);
+      const { promise, abort: abortRequest } = this.provider.sendRequest(params);
 
       promise
-        .then((response) => { callbacks?.onComplete?.(response); })
-        .catch((e) => { callbacks?.onError?.(e); });
+        .then((response) => { if (!aborted) { callbacks?.onComplete?.(response); } })
+        .catch((e) => { if (!aborted) { callbacks?.onError?.(e); } });
+
+      const abort = (): void => {
+        aborted = true;
+        abortRequest?.();
+      };
 
       return abort;
     }

packages/devextreme/js/__internal/ui/html_editor/modules/m_toolbar.ts

@@ -380,10 +380,12 @@ if (Quill) {
       text?: string,
       commandOptions?: string[],
     ) {
-      const options = commandOptions ?? getDefaultOptionsByCommand(command)?.map(capitalize);
+      const options = commandOptions?.map(capitalize)
+        ?? getDefaultOptionsByCommand(command)?.map(capitalize);
 
-      return {
+      const item = {
         id: command,
+        name: command,
         text: text ?? defaultCommandNames[command],
         items: options?.map((option) => ({
           id: option,
@@ -392,31 +394,52 @@ if (Quill) {
           options: options?.map(capitalize),
         })),
       };
+
+      return item;
     }
 
     private _buildMenuItems(commands: AIToolbarItem['commands']) {
-      return commands?.map((command) => {
+      let customCommandIndex = 0;
+
+      const items = commands?.map((command) => {
         if (typeof command === 'object') {
           if (command.name === 'custom') {
-            return {
-              id: 'custom',
+            const id = `custom${customCommandIndex}`;
+            const { prompt, options } = command as AICustomCommand;
+            const capitalized = options?.map(capitalize);
+
+            const item = {
+              id,
+              name: 'custom',
               text: command.text,
-              items: command.options?.map((option) => ({
-                parentCommand: 'custom',
-                id: option,
-                text: option,
-                options: command.options.map(capitalize),
-                prompt,
-              })),
-              prompt: (command as AICustomCommand).prompt,
+              items: command.options?.map((rawOptionName: string) => {
+                const option = capitalize(rawOptionName);
+
+                const result = {
+                  parentCommand: id,
+                  id: option,
+                  text: option,
+                  options: capitalized,
+                  prompt,
+                };
+
+                return result;
+              }),
+              prompt,
             };
+
+            customCommandIndex += 1;
+
+            return item;
           }
 
           return this._createCommandMenuItem(command.name, command.text, command.options);
         }
 
         return this._createCommandMenuItem(command);
       });
+
+      return items;
     }
 
     _prepareAIMenuItemConfig(item: AIToolbarItem) {