Chat: implement FileUploader integration (#31509)

Author: Zedwag

e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (fluent-blue-light).png

@@ -25,6 +25,16 @@
   }
 }
 
+.dx-textarea-attachments {
+  .dx-fileuploader-input-wrapper {
+    display: none;
+  }
+
+  .dx-fileuploader-wrapper {
+    padding: 0;
+  }
+}
+
 .dx-textarea-toolbar.dx-toolbar {
   .dx-toolbar-items-container {
     height: auto;

e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (fluent-blue-light).png

@@ -17,7 +17,7 @@ export const dependencies: FlatStylesDependencies = {
   dropdownbutton: ['validation', 'button', 'buttongroup', 'popup', 'loadindicator', 'loadpanel', 'scrollview', 'list'],
   calendar: ['validation', 'button'],
   cardview: ['box', 'button', 'calendar', 'checkbox', 'contextmenu', 'datebox', 'filterbuilder', 'form', 'list', 'loadindicator', 'loadpanel', 'multiview', 'numberbox', 'popup', 'responsivebox', 'scrollview', 'selectbox', 'sortable', 'tabpanel', 'tabs', 'textbox', 'toast', 'toolbar', 'treeview', 'validation'],
-  chat: ['button', 'loadindicator', 'loadpanel', 'popup', 'scrollview', 'textbox', 'toolbar', 'validation'],
+  chat: ['button', 'loadindicator', 'loadpanel', 'popup', 'progressbar', 'scrollview', 'textbox', 'toolbar', 'validation'],
   checkbox: ['validation'],
   numberbox: ['validation', 'button', 'loadindicator'],
   colorbox: ['validation', 'button', 'loadindicator', 'numberbox', 'textbox', 'popup'],

e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (fluent-blue-light).png

@@ -536,7 +536,7 @@ class Chat extends Widget<Properties> {
   }
 
   _messageEnteredHandler(e: MessageBoxMessageEnteredEvent): void {
-    const { text, event } = e;
+    const { text, event, attachments } = e;
     const { user } = this.option();
 
     const message: Message = {
@@ -545,6 +545,10 @@ class Chat extends Widget<Properties> {
       text,
     };
 
+    if (attachments) {
+      message.attachments = attachments;
+    }
+
     // @ts-expect-error
     const dataSource = this.getDataSource();
 
@@ -581,15 +585,17 @@ class Chat extends Widget<Properties> {
   }
 
   _optionChanged(args: OptionChanged<Properties>): void {
-    const { name, value } = args;
+    const { name, fullName, value } = args;
 
     switch (name) {
       case 'activeStateEnabled':
       case 'focusStateEnabled':
       case 'hoverStateEnabled':
-      case 'fileUploaderOptions':
         this._messageBox.option(name, value);
         break;
+      case 'fileUploaderOptions':
+        this._messageBox.option(fullName, value);
+        break;
       case 'user': {
         const author = value as Properties[typeof name];
 

e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (fluent-blue-light).png

@@ -11,23 +11,33 @@ import type {
   InitializedEvent,
 } from '@js/ui/button';
 import type Button from '@js/ui/button';
-import type { Properties as FileUploaderProperties } from '@js/ui/file_uploader';
+import type { Attachment } from '@js/ui/chat';
+import type { UploadedEvent, UploadStartedEvent, ValueChangedEvent } from '@js/ui/file_uploader';
 import { current, isMaterial } from '@js/ui/themes';
 import type { Item as ToolbarItem } from '@js/ui/toolbar';
 import Toolbar from '@js/ui/toolbar';
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { SupportedKeys } from '@ts/core/widget/widget';
+import Widget from '@ts/core/widget/widget';
+import FileUploader from '@ts/ui/file_uploader/file_uploader';
+import type { CancelButtonClickEvent, Properties as FileUploaderProperties } from '@ts/ui/file_uploader/file_uploader.types';
 import type { TextAreaProperties } from '@ts/ui/m_text_area';
 import TextArea from '@ts/ui/m_text_area';
 
 export const TEXT_AREA_TOOLBAR = 'dx-textarea-toolbar';
+const TEXT_AREA_ATTACHMENTS = 'dx-textarea-attachments';
+const TEXT_AREA_ATTACH_BUTTON = 'dx-textarea-attach-button';
 
 const isMobile = (): boolean => devices.current().deviceType !== 'desktop';
 
 type EnterKeyEvent = NativeEventInfo<ChatTextArea, KeyboardEvent>;
 
 export type SendEvent = ClickEvent | EnterKeyEvent;
 
+type FileToSend = Attachment & {
+  readyToSend: boolean;
+};
+
 export type Properties = TextAreaProperties & {
   fileUploaderOptions?: FileUploaderProperties;
 
@@ -39,18 +49,34 @@ class ChatTextArea extends TextArea<Properties> {
 
   _toolbar?: Toolbar | null;
 
+  _$fileUploader?: dxElementWrapper | null;
+
+  _fileUploader?: FileUploader | null;
+
+  _filesToSend?: Map<File, FileToSend>;
+
   _sendButton?: Button;
 
   _sendAction?: (e: SendEvent) => void;
 
+  getAttachments(): Attachment[] | undefined {
+    if (!this._filesToSend?.size) {
+      return undefined;
+    }
+
+    return Array
+      .from(this._filesToSend.values())
+      .map(({ name, size }) => ({ name, size }));
+  }
+
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
       stylingMode: 'outlined',
       placeholder: messageLocalization.format('dxChat-textareaPlaceholder'),
       autoResizeEnabled: true,
-      valueChangeEvent: 'input',
       maxHeight: '8em',
+      valueChangeEvent: 'input',
       fileUploaderOptions: undefined,
     };
   }
@@ -112,6 +138,7 @@ class ChatTextArea extends TextArea<Properties> {
   _initMarkup(): void {
     super._initMarkup();
     this._renderToolbar();
+    this._initFileUploader();
   }
 
   _renderToolbar(): void {
@@ -160,6 +187,7 @@ class ChatTextArea extends TextArea<Properties> {
         activeStateEnabled,
         focusStateEnabled,
         hoverStateEnabled,
+        elementAttr: { class: TEXT_AREA_ATTACH_BUTTON },
         icon: 'attach',
       },
     } as ToolbarItem;
@@ -200,35 +228,136 @@ class ChatTextArea extends TextArea<Properties> {
     return configuration;
   }
 
-  _toggleButtonDisableState(state: boolean): void {
-    this._sendButton?.option('disabled', state);
+  _initFileUploader(): void {
+    const { fileUploaderOptions } = this.option();
+
+    if (!fileUploaderOptions) {
+      return;
+    }
+
+    this._renderFileUploader();
+    this._filesToSend = new Map<File, FileToSend>();
+  }
+
+  _renderFileUploader(): void {
+    this._$fileUploader = $('<div>')
+      .addClass(TEXT_AREA_ATTACHMENTS)
+      .insertBefore(this._$textEditorContainer);
+
+    this._fileUploader = this._createComponent(
+      this._$fileUploader,
+      FileUploader,
+      this._getFileUploaderOptions(),
+    );
+  }
+
+  _shouldHideFileUploader(value: File[] = []): boolean {
+    return value.length !== 0;
+  }
+
+  _getFileUploaderOptions(): FileUploaderProperties {
+    const { fileUploaderOptions = {} } = this.option();
+    const multiple = fileUploaderOptions.multiple ?? true;
+    const visible = this._shouldHideFileUploader(fileUploaderOptions.value);
+
+    return {
+      ...fileUploaderOptions,
+      multiple,
+      visible,
+      uploadMode: 'instantly',
+      dialogTrigger: this.$element().find(`.${TEXT_AREA_ATTACH_BUTTON}`).get(0),
+      _hideCancelButtonOnUpload: false,
+      _showFileIcon: true,
+      _cancelButtonPosition: 'end',
+      onValueChanged: (e) => this._fileUploaderOnValueChanged(e),
+      onUploadStarted: (e) => this._fileUploaderOnUploadStarted(e),
+      onUploaded: (e) => this._fileUploaderOnUploaded(e),
+      onCancelButtonClick: (e) => this._fileUploaderOnCancelButtonClick(e),
+    };
+  }
+
+  _fileUploaderOnValueChanged(e: ValueChangedEvent): void {
+    const { value, component } = e;
+    const { fileUploaderOptions = {} } = this.option();
+
+    component.option('visible', this._shouldHideFileUploader(value));
+    this._updateInputHeight();
+    fileUploaderOptions.onValueChanged?.(e);
+  }
+
+  _fileUploaderOnUploadStarted(e: UploadStartedEvent): void {
+    const { file } = e;
+    const { fileUploaderOptions = {} } = this.option();
+
+    this._filesToSend?.set(file, {
+      readyToSend: false,
+      name: file.name,
+      size: file.size,
+    });
+    this._toggleButtonDisableState();
+
+    fileUploaderOptions.onUploadStarted?.(e);
+  }
+
+  _fileUploaderOnUploaded(e: UploadedEvent): void {
+    const { file } = e;
+    const { fileUploaderOptions = {} } = this.option();
+    const fileInfo = this._filesToSend?.get(file);
+
+    if (this._filesToSend && fileInfo) {
+      this._filesToSend.set(file, {
+        ...fileInfo,
+        readyToSend: true,
+      });
+    }
+
+    this._toggleButtonDisableState();
+
+    fileUploaderOptions.onUploaded?.(e);
+  }
+
+  _fileUploaderOnCancelButtonClick = (e: CancelButtonClickEvent): void => {
+    const { file } = e;
+
+    if (file) {
+      this._filesToSend?.delete(file);
+    }
+
+    this._toggleButtonDisableState();
+  };
+
+  _toggleButtonDisableState(state?: boolean): void {
+    const shouldDisable = state ?? !this._isMessageCanBeSent();
+    this._sendButton?.option('disabled', shouldDisable);
   }
 
   _renderButtonContainers(): void {}
 
   _getHeightDifference($input: dxElementWrapper): number {
     const superResult = super._getHeightDifference($input);
     const toolbarHeight = getOuterHeight(this._$toolbar);
-    const sum: number = superResult + toolbarHeight;
+    const fileUploaderHeight = getOuterHeight(this._$fileUploader);
+    const sum: number = superResult + toolbarHeight + fileUploaderHeight;
 
     return sum;
   }
 
   _keyPressHandler(e: InputEvent): void {
     super._keyPressHandler(e);
 
-    const shouldButtonBeDisabled = !this._isValuableTextEntered();
-    this._toggleButtonDisableState(shouldButtonBeDisabled);
+    this._toggleButtonDisableState();
   }
 
   _processSendButtonActivation(e: SendEvent): void {
     this._sendAction?.(e);
     this.reset();
+    this._fileUploader?.reset();
+    this._filesToSend?.clear();
     this._toggleButtonDisableState(true);
   }
 
   _shouldSendMessageOnEnter(e: DxEvent<KeyboardEvent>): boolean {
-    return !e?.shiftKey && this._isValuableTextEntered() && !isMobile();
+    return !e?.shiftKey && this._isMessageCanBeSent() && !isMobile();
   }
 
   _optionChanged(args: OptionChanged<Properties>): void {
@@ -242,8 +371,7 @@ class ChatTextArea extends TextArea<Properties> {
         break;
 
       case 'text': {
-        const shouldButtonBeDisabled = !this._isValuableTextEntered();
-        this._toggleButtonDisableState(shouldButtonBeDisabled);
+        this._toggleButtonDisableState();
         break;
       }
 
@@ -252,22 +380,73 @@ class ChatTextArea extends TextArea<Properties> {
         break;
 
       case 'fileUploaderOptions':
+        this._handleFileUploaderOptionsChange(args);
+        break;
       default:
         super._optionChanged(args);
     }
   }
 
+  _handleFileUploaderOptionsChange(args: OptionChanged<Properties>): void {
+    const { fullName, value, previousValue } = args;
+
+    if (fullName === 'fileUploaderOptions' && (!value || !previousValue)) {
+      this._cleanToolbar();
+      this._renderToolbar();
+      this._cleanFileUploader();
+      this._initFileUploader();
+
+      return;
+    }
+
+    const options = Widget.getOptionsFromContainer(args);
+    this._fileUploader?.option(options);
+  }
+
   _isValuableTextEntered(): boolean {
     const { text } = this.option();
 
     return Boolean(text?.trim());
   }
 
-  _dispose(): void {
+  _getFilesArray(): FileToSend[] {
+    return this._filesToSend ? Array.from(this._filesToSend.values()) : [];
+  }
+
+  _areFilesReadyToSend(): boolean {
+    if (!this._filesToSend?.size) {
+      return false;
+    }
+
+    return this._getFilesArray().every((file) => file.readyToSend);
+  }
+
+  _isMessageCanBeSent(): boolean {
+    const hasText = this._isValuableTextEntered();
+    const hasReadyFiles = this._areFilesReadyToSend();
+    const hasUnreadyFiles = this._filesToSend && this._getFilesArray()
+      .some((file) => !file.readyToSend);
+
+    return !hasUnreadyFiles && (hasText || hasReadyFiles);
+  }
+
+  _cleanFileUploader(): void {
+    this._fileUploader?.dispose();
+    this._$fileUploader?.remove();
+    this._fileUploader = null;
+    this._$fileUploader = null;
+  }
+
+  _cleanToolbar(): void {
     this._toolbar?.dispose();
     this._$toolbar?.remove();
     this._toolbar = null;
     this._$toolbar = null;
+  }
+
+  _dispose(): void {
+    this._cleanFileUploader();
+    this._cleanToolbar();
     super._dispose();
   }
 }