HtmlEditor: Add AI Toolbar Item & AI Dialog components for a Text Transform feature (#29501)

Co-authored-by: Ruslan Farkhutdinov <ruslan.farkhutdinov@devexpress.com>
Co-authored-by: ksercs <ksercs0@gmail.com>

Author: 3 people

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

@@ -352,6 +352,29 @@ $transparent-border: 1px solid transparent;
   min-width: 360px;
 }
 
+.dx-aidialog-controls {
+  display: flex;
+  gap: 8px;
+
+  .dx-selectbox {
+    flex: 1 0 0;
+    max-width: calc(50% - 4px);
+  }
+}
+
+.dx-aidialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dx-aidialog-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+}
+
 .dx-overlay-content {
   &.dx-popup-fullscreen {
     .dx-formdialog-form {

packages/devextreme-themebuilder/tests/data/dependencies.ts

@@ -36,7 +36,7 @@ export const dependencies: FlatStylesDependencies = {
   gallery: [],
   toolbar: ['validation', 'button', 'loadindicator', 'loadpanel', 'scrollview', 'popup'],
   contextmenu: ['validation', 'button', 'loadindicator', 'textbox'],
-  htmleditor: ['validation', 'button', 'loadindicator', 'loadpanel', 'scrollview', 'popup', 'toolbar', 'textbox', 'list', 'checkbox', 'selectbox', 'numberbox', 'multiview', 'tabs', 'tabpanel', 'box', 'responsivebox', 'calendar', 'datebox', 'form', 'buttongroup', 'colorbox', 'progressbar', 'fileuploader', 'contextmenu'],
+  htmleditor: ['validation', 'button', 'loadindicator', 'loadpanel', 'scrollview', 'popup', 'toolbar', 'textbox', 'list', 'checkbox', 'selectbox', 'numberbox', 'multiview', 'tabs', 'tabpanel', 'box', 'responsivebox', 'calendar', 'datebox', 'form', 'buttongroup', 'colorbox', 'progressbar', 'fileuploader', 'contextmenu', 'textarea'],
   sortable: [],
   lookup: ['validation', 'button', 'loadindicator', 'textbox', 'popup', 'loadpanel', 'scrollview', 'list', 'popover'],
   map: [],

packages/devextreme/js/__internal/core/utils/capitalize.ts

@@ -0,0 +1 @@
+export const capitalize = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1);

packages/devextreme/js/__internal/grids/pivot_grid/fields_area/m_fields_area.ts

@@ -6,20 +6,20 @@ import { each } from '@js/core/utils/iterator';
 import { setHeight, setWidth } from '@js/core/utils/style';
 import Button from '@js/ui/button';
 import Popup from '@js/ui/popup/ui.popup';
+import { capitalize } from '@ts/core/utils/capitalize';
 
 import { AreaItem } from '../area_item/m_area_item';
-import { capitalizeFirstLetter } from '../m_widget_utils';
 
 const DIV = '<div>';
 
 const AREA_DRAG_CLASS = 'dx-pivotgrid-drag-action';
 
 function renderGroupConnector(field, nextField, prevField, $container) {
-  if (prevField && prevField.groupName && prevField.groupName === field.groupName) {
+  if (prevField?.groupName && prevField.groupName === field.groupName) {
     $(DIV).addClass('dx-group-connector').addClass('dx-group-connector-prev').appendTo($container);
   }
 
-  if (nextField && nextField.groupName && nextField.groupName === field.groupName) {
+  if (nextField?.groupName && nextField.groupName === field.groupName) {
     $(DIV).addClass('dx-group-connector').addClass('dx-group-connector-next').appendTo($container);
   }
 }
@@ -44,7 +44,7 @@ const FieldsArea = AreaItem.inherit({
   },
 
   isVisible() {
-    return !!this.option('fieldPanel.visible') && this.option(`fieldPanel.show${capitalizeFirstLetter(this._area)}Fields`);
+    return !!this.option('fieldPanel.visible') && this.option(`fieldPanel.show${capitalize(this._area)}Fields`);
   },
 
   _renderButton(element) {

packages/devextreme/js/__internal/grids/pivot_grid/m_widget_utils.ts

@@ -182,7 +182,7 @@ function foreachDataLevel(data, callback, index, childrenField?) {
 
   for (let i = 0; i < data.length; i += 1) {
     const item = data[i];
-    if (item[childrenField] && item[childrenField].length) {
+    if (item[childrenField]?.length) {
       foreachDataLevel(item[childrenField], callback, index + 1, childrenField);
     }
   }
@@ -365,10 +365,6 @@ const storeDrillDownMixin = {
   },
 };
 
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
 const getScrollbarWidth = (
   containerElement,
 ): number => containerElement.offsetWidth - containerElement.clientWidth;
@@ -408,14 +404,12 @@ export default {
   setDefaultFieldValueFormatting,
   getFiltersByPath,
   storeDrillDownMixin,
-  capitalizeFirstLetter,
   getScrollbarWidth,
   calculateScrollbarWidth,
 };
 
 export {
   calculateScrollbarWidth,
-  capitalizeFirstLetter,
   createPath,
   discoverObjectFields,
   findField,

packages/devextreme/js/__internal/grids/pivot_grid/remote_store/m_remote_store.ts

@@ -6,9 +6,9 @@ import { Deferred, when } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
 import { each } from '@js/core/utils/iterator';
 import { isDefined, isString } from '@js/core/utils/type';
+import { capitalize } from '@ts/core/utils/capitalize';
 
 import pivotGridUtils, {
-  capitalizeFirstLetter,
   getExpandedLevel,
   getFiltersByPath,
   setDefaultFieldValueFormatting,
@@ -38,7 +38,7 @@ function getFieldFilterSelector(field) {
     if (groupInterval.toLowerCase() === 'quarter') {
       groupInterval = 'Month';
     }
-    selector = `${selector}.${capitalizeFirstLetter(groupInterval)}`;
+    selector = `${selector}.${capitalize(groupInterval)}`;
   }
 
   return selector;
@@ -99,7 +99,7 @@ function createFieldFilterExpressions(field, operation?) {
     let currentExpression: any = [];
 
     if (Array.isArray(filterValue)) {
-      const parseLevelsRecursive = field.levels && field.levels.length;
+      const parseLevelsRecursive = field.levels?.length;
 
       if (parseLevelsRecursive) {
         currentExpression = createFieldFilterExpressions({
@@ -249,7 +249,7 @@ function parseResult(data, total, descriptions, result) {
   const { rowHash } = result;
   const { columnHash } = result;
 
-  if (total && total.summary) {
+  if (total?.summary) {
     each(total.summary, (index, summary) => {
       setValue(
         result.values,
@@ -331,10 +331,10 @@ function parseResult(data, total, descriptions, result) {
       result.rows.push({});
     }
 
-    const currentRowIndex = rowItem && rowItem.index || result.grandTotalRowIndex;
-    const currentColumnIndex = columnItem && columnItem.index || result.grandTotalColumnIndex;
+    const currentRowIndex = rowItem?.index || result.grandTotalRowIndex;
+    const currentColumnIndex = columnItem?.index || result.grandTotalColumnIndex;
 
-    each(item && item.summary || [], (i, summary) => {
+    each(item?.summary || [], (i, summary) => {
       setValue(result.values, summary, currentRowIndex, currentColumnIndex, i);
     });
   });

packages/devextreme/js/__internal/ui/html_editor/m_html_editor.ts

@@ -35,6 +35,9 @@ import getWordMatcher from '@ts/ui/html_editor/matchers/m_wordLists';
 import FormDialog from '@ts/ui/html_editor/ui/m_formDialog';
 import { prepareScrollData } from '@ts/ui/text_box/m_utils.scroll';
 
+import type { AiDialogResult, AiDialogShowPayload } from './ui/aiDialog';
+import AiDialog from './ui/aiDialog';
+
 const HTML_EDITOR_CLASS = 'dx-htmleditor';
 const QUILL_CONTAINER_CLASS = 'dx-quill-container';
 const QUILL_CLIPBOARD_CLASS = 'ql-clipboard';
@@ -52,6 +55,8 @@ class HtmlEditor extends Editor<Properties> {
 
   _formDialog!: FormDialog;
 
+  _aiDialog?: AiDialog;
+
   _quillInstance?: any;
 
   _cleanCallback!: Callback;
@@ -349,6 +354,8 @@ class HtmlEditor extends Editor<Properties> {
     super._renderContentImpl();
     this._renderHtmlEditor();
     this._renderFormDialog();
+
+    this._renderAiDialog();
     this._addKeyPressHandler();
 
     return renderContentPromise;
@@ -547,7 +554,18 @@ class HtmlEditor extends Editor<Properties> {
       hideOnOutsideClick: true,
     }, this.option('formDialogOptions'));
 
-    this._formDialog = new FormDialog(this, userOptions);
+    this._formDialog = new FormDialog(this.$element(), userOptions);
+  }
+
+  _renderAiDialog(): void {
+    // @ts-expect-error ts-error
+    const { aiIntegration } = this.option();
+
+    if (!aiIntegration) {
+      return;
+    }
+
+    this._aiDialog = new AiDialog(this.$element(), aiIntegration);
   }
 
   _getStylingModePrefix(): string {
@@ -815,6 +833,10 @@ class HtmlEditor extends Editor<Properties> {
     return this._formDialog.show(formConfig);
   }
 
+  showAiDialog(payload: AiDialogShowPayload): Promise<AiDialogResult> | undefined {
+    return this._aiDialog?.show(payload);
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   formDialogOption(optionName, optionValue): void {
     // @ts-expect-error ts-error

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

@@ -13,11 +13,16 @@ import { each } from '@js/core/utils/iterator';
 import {
   isDefined, isEmptyObject, isObject, isString,
 } from '@js/core/utils/type';
+import type { AICommandName, AICustomCommand, AIToolbarItem } from '@js/ui/html_editor';
 import type { Item } from '@js/ui/toolbar';
 import Toolbar from '@js/ui/toolbar';
 import errors from '@js/ui/widget/ui.errors';
+import { capitalize } from '@ts/core/utils/capitalize';
 import Quill from 'devextreme-quill';
 
+import {
+  buildCommandsMap, defaultCommandNames, getDefaultOptionsByCommand,
+} from '../utils/ai';
 import { getTableFormats, TABLE_OPERATIONS } from '../utils/m_table_helper';
 import {
   applyFormat, getDefaultClickHandler, getFormatHandlers, ICON_MAP,
@@ -55,6 +60,8 @@ if (Quill) {
     u: 85,
   };
 
+  const TOOLBAR_AI_ITEM_NAME = 'ai';
+
   const localize = (name) => localizationMessage.format(`dxHtmlEditor-${camelize(name)}`);
 
   const localizeValue = (value, name) => {
@@ -288,6 +295,8 @@ if (Quill) {
         this._detectRenamedOptions(item);
         if (isObject(item)) {
           newItem = this._handleObjectItem(item);
+        } else if (item === TOOLBAR_AI_ITEM_NAME) {
+          resultItems.push(this._getToolbarItem(this._prepareAIMenuItemConfig(item)));
         } else if (isString(item)) {
           const buttonItemConfig = this._prepareButtonItemConfig(item);
           newItem = this._getToolbarItem(buttonItemConfig);
@@ -301,16 +310,23 @@ if (Quill) {
     }
 
     _handleObjectItem(item) {
+      if (item.name === TOOLBAR_AI_ITEM_NAME) {
+        return this._getToolbarItem(this._prepareAIMenuItemConfig(item));
+      }
+
       if (item.name && item.acceptedValues && this._isAcceptableItem(item.widget, 'dxSelectBox')) {
         const selectItemConfig = this._prepareSelectItemConfig(item);
 
         return this._getToolbarItem(selectItemConfig);
-      } if (item.name && this._isAcceptableItem(item.widget, 'dxButton')) {
+      }
+
+      if (item.name && this._isAcceptableItem(item.widget, 'dxButton')) {
         const defaultButtonItemConfig = this._prepareButtonItemConfig(item.name);
         const buttonItemConfig = extend(true, defaultButtonItemConfig, item);
 
         return this._getToolbarItem(buttonItemConfig);
       }
+
       return this._getToolbarItem(item);
     }
 
@@ -358,6 +374,92 @@ if (Quill) {
       }, item);
     }
 
+    private _createCommandMenuItem(
+      command: AICommandName,
+      text?: string,
+      commandOptions?: string[],
+    ) {
+      const options = commandOptions ?? getDefaultOptionsByCommand(command)?.map(capitalize);
+
+      return {
+        id: command,
+        text: text ?? defaultCommandNames[command],
+        items: options?.map((option) => ({
+          id: option,
+          text: option,
+          parentCommand: command,
+          options: options?.map(capitalize),
+        })),
+      };
+    }
+
+    private _buildMenuItems(commands: AIToolbarItem['commands']) {
+      return commands?.map((command) => {
+        if (typeof command === 'object') {
+          if (command.name === 'custom') {
+            return {
+              id: '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,
+            };
+          }
+
+          return this._createCommandMenuItem(command.name, command.text, command.options);
+        }
+
+        return this._createCommandMenuItem(command);
+      });
+    }
+
+    _prepareAIMenuItemConfig(item: AIToolbarItem) {
+      const {
+        name = TOOLBAR_AI_ITEM_NAME,
+        commands = Object.keys(defaultCommandNames) as AICommandName[],
+      } = item;
+
+      const commandsMap = buildCommandsMap(commands);
+      const menuItems = this._buildMenuItems(commands);
+
+      const dataSource = [{
+        id: 'root',
+        icon: 'sparkle',
+        items: menuItems,
+      }];
+
+      const options = {
+        dataSource,
+        onItemClick: (e): void => {
+          const { itemData } = e;
+
+          if (itemData.items?.length) {
+            return;
+          }
+
+          const aiDialogOptions = {
+            command: itemData.id,
+            parentCommand: itemData.parentCommand,
+            commandsMap,
+            prompt: itemData.prompt,
+          };
+
+          this._formatHandlers[name](aiDialogOptions);
+        },
+      };
+
+      return extend(true, {
+        widget: 'dxMenu',
+        name,
+        options,
+      }, typeof item === 'string' ? {} : item);
+    }
+
     _hideAdaptiveMenu() {
       if (this.toolbarInstance.option('overflowMenuVisible')) {
         this.toolbarInstance.option('overflowMenuVisible', false);