Chat FU: Integrate FileView component

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_index.scss

@@ -39,7 +39,5 @@
 }
 
 .dx-chat-file-view {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
+  display: grid;
 }

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss

@@ -49,8 +49,10 @@
 
 @mixin chat-fileview(
   $chat-file-view-items-gap,
+  $chat-file-container-width,
 ) {
   .dx-chat-file-view {
     gap: $chat-file-view-items-gap;
+    grid-template-columns: repeat(auto-fit, $chat-file-container-width);
   }
 }

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss

@@ -9,6 +9,8 @@ $chat-messagebubble-max-height-image: 400px !default;
 }
 
 .dx-chat-messagebubble {
+  display: flex;
+  flex-direction: column;
   width: auto;
   word-break: break-word;
   white-space: break-spaces;

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss

@@ -8,6 +8,7 @@
   $bubble-container-gap,
   $bubble-delete-gap,
   $bubble-delete-icon-size,
+  $chat-bubble-gap,
 ) {
   .dx-chat-messagegroup-content {
     row-gap: $bubble-container-gap;
@@ -16,6 +17,7 @@
   .dx-chat-messagebubble {
     padding: $padding;
     border-radius: $border-radius;
+    gap: $chat-bubble-gap;
 
     &.dx-chat-messagebubble-deleted {
       .dx-chat-messagebubble-content {

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

@@ -29,7 +29,8 @@
   $chat-file-file-size-max-width,
 );
 @include chat-fileview(
-  $chat-file-view-items-gap
+  $chat-file-view-items-gap,
+  $chat-file-container-width,
 );
 @include chat-alertlist(
   $chat-alertlist-color,
@@ -56,6 +57,7 @@
   $chat-bubble-container-gap,
   $chat-bubble-delete-gap,
   $chat-bubble-delete-icon-size,
+  $chat-bubble-gap,
 );
 @include chat-messagegroup(
   $chat-messagegroup-gap,

packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss

@@ -74,6 +74,7 @@ $chat-file-secondary-font-size: 10px !default;
 $chat-file-base-section-gap: 4px !default;
 $chat-file-file-size-max-width: 4em !default;
 $chat-file-view-items-gap: 8px !default;
+$chat-bubble-gap: 8px !default;
 
 @if $size == "default" {
   $chat-bubble-border-radius: $fluent-base-border-radius * 3 !default;

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

@@ -32,7 +32,8 @@
   $chat-file-file-size-max-width,
 );
 @include chat-fileview(
-  $chat-file-view-items-gap
+  $chat-file-view-items-gap,
+  $chat-file-container-width,
 );
 @include chat-alertlist(
   $chat-alertlist-color,
@@ -59,6 +60,7 @@
   $chat-bubble-container-gap,
   $chat-bubble-delete-gap,
   $chat-bubble-delete-icon-size,
+  $chat-bubble-gap,
 );
 @include chat-messagegroup(
   $chat-messagegroup-gap,

packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss

@@ -73,6 +73,7 @@ $chat-file-secondary-font-size: 10px !default;
 $chat-file-base-section-gap: 4px !default;
 $chat-file-file-size-max-width: 4em !default;
 $chat-file-view-items-gap: 8px !default;
+$chat-bubble-gap: 8px !default;
 
 @if $size == "default" {
   $chat-bubble-padding: 8px 12px !default;

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

@@ -30,7 +30,8 @@
   $chat-file-file-size-max-width,
 );
 @include chat-fileview(
-  $chat-file-view-items-gap
+  $chat-file-view-items-gap,
+  $chat-file-container-width,
 );
 @include chat-alertlist(
   $chat-alertlist-color,
@@ -57,6 +58,7 @@
   $chat-bubble-container-gap,
   $chat-bubble-delete-gap,
   $chat-bubble-delete-icon-size,
+  $chat-bubble-gap,
 );
 @include chat-messagegroup(
   $chat-messagegroup-gap,

packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss

@@ -71,6 +71,7 @@ $chat-file-secondary-font-size: 10px !default;
 $chat-file-base-section-gap: 4px !default;
 $chat-file-file-size-max-width: 4em !default;
 $chat-file-view-items-gap: 8px !default;
+$chat-bubble-gap: 8px !default;
 
 @if $size == "default" {
   $chat-bubble-border-radius: 8px !default;

packages/devextreme/js/__internal/ui/chat/chat.ts

@@ -8,6 +8,7 @@ import { isDefined } from '@js/core/utils/type';
 import DataHelperMixin from '@js/data_helper';
 import type dxChat from '@js/ui/chat';
 import type {
+  AttachmentDownloadEvent,
   Message,
   MessageDeletedEvent,
   MessageDeletingEvent,
@@ -73,6 +74,8 @@ class Chat extends Widget<Properties> {
 
   _messageUpdatedAction?: (e: Partial<MessageUpdatedEvent>) => void;
 
+  _attachmentDownloadAction?: (e: Partial<AttachmentDownloadEvent>) => void;
+
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
@@ -125,6 +128,7 @@ class Chat extends Widget<Properties> {
     this._createMessageUpdatedAction();
     this._createTypingStartAction();
     this._createTypingEndAction();
+    this._createAttachmentDownloadAction();
   }
 
   _dataSourceLoadErrorHandler(): void {
@@ -224,6 +228,9 @@ class Chat extends Widget<Properties> {
       onEscapeKeyPressed: () => {
         this.focus();
       },
+      onAttachmentDownload: (e) => {
+        this._attachmentDownloadAction?.(e);
+      },
     };
 
     return options;
@@ -521,6 +528,13 @@ class Chat extends Widget<Properties> {
     );
   }
 
+  _createAttachmentDownloadAction(): void {
+    this._attachmentDownloadAction = this._createActionByOption(
+      'onAttachmentDownload',
+      { excludeValidators: ['disabled'] },
+    );
+  }
+
   _messageEnteredHandler(e: MessageBoxMessageEnteredEvent): void {
     const { text, event } = e;
     const { user } = this.option();
@@ -622,6 +636,9 @@ class Chat extends Widget<Properties> {
       case 'onTypingEnd':
         this._createTypingEndAction();
         break;
+      case 'onAttachmentDownload':
+        this._createAttachmentDownloadAction();
+        break;
       case 'showDayHeaders':
       case 'showAvatar':
       case 'showUserName':

packages/devextreme/js/__internal/ui/chat/file_view/file.ts

@@ -28,8 +28,8 @@ export type Properties = DOMComponentProperties<File> & {
 
 export const CHAT_FILE_CLASS = 'dx-chat-file';
 const CHAT_FILE_ICON_CONTAINER_CLASS = 'dx-chat-file-icon-container';
-const CHAT_FILE_NAME_CLASS = 'dx-chat-file-name';
-const CHAT_FILE_SIZE_CLASS = 'dx-chat-file-size';
+export const CHAT_FILE_NAME_CLASS = 'dx-chat-file-name';
+export const CHAT_FILE_SIZE_CLASS = 'dx-chat-file-size';
 const CHAT_FILE_DOWNLOAD_BUTTON_CLASS = 'dx-chat-file-download-button';
 
 class File extends DOMComponent<File, Properties> {

packages/devextreme/js/__internal/ui/chat/file_view/file_view.ts

@@ -20,7 +20,6 @@ export interface FileViewProperties extends DOMComponentProperties<FileView> {
 }
 
 export const CHAT_FILE_VIEW_CLASS = 'dx-chat-file-view';
-export const CHAT_FILE_VIEW_ITEM_CLASS = 'dx-chat-file-view-item';
 
 class FileView extends DOMComponent<FileView, FileViewProperties> {
   private _fileInstances: File[] = [];

packages/devextreme/js/__internal/ui/chat/messagebubble.ts

@@ -1,11 +1,13 @@
 import messageLocalization from '@js/common/core/localization/message';
 import { getPublicElement } from '@js/core/element';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
-import type { Message } from '@js/ui/chat';
+import type { Attachment, AttachmentDownloadEvent, Message } from '@js/ui/chat';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 import { ICON_CLASS } from '@ts/core/utils/m_icon';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
+import FileView from '@ts/ui/chat/file_view/file_view';
 
 export const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
 export const CHAT_MESSAGEBUBBLE_DELETED_CLASS = 'dx-chat-messagebubble-deleted';
@@ -23,10 +25,16 @@ export interface Properties extends WidgetOptions<MessageBubble> {
   isEdited?: boolean;
   src?: string;
   alt?: string;
+  attachments?: Attachment[];
+  onAttachmentDownload?: (e: AttachmentDownloadEvent) => void;
   template?: ((message: Message, container: Element) => void) | null;
 }
 
 class MessageBubble extends Widget<Properties> {
+  _$content!: dxElementWrapper;
+
+  _$attachments?: dxElementWrapper;
+
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
@@ -42,13 +50,30 @@ class MessageBubble extends Widget<Properties> {
 
     $element.addClass(CHAT_MESSAGEBUBBLE_CLASS);
 
-    $('<div>')
-      .addClass(CHAT_MESSAGEBUBBLE_CONTENT_CLASS)
-      .appendTo($element);
-
     super._initMarkup();
 
+    this._renderContentContainer();
+    this._renderAttachmentsElement();
+
     this._updateContent();
+    this._renderAttachments();
+  }
+
+  _renderContentContainer(): void {
+    this._$content = $('<div>')
+      .addClass(CHAT_MESSAGEBUBBLE_CONTENT_CLASS)
+      .appendTo(this.$element());
+  }
+
+  _renderAttachmentsElement(): void {
+    const { attachments, isDeleted } = this.option();
+
+    this._$attachments?.remove();
+    this._$attachments = undefined;
+
+    if (attachments?.length && !isDeleted) {
+      this._$attachments = $('<div>').appendTo(this.$element());
+    }
   }
 
   _updateContent(): void {
@@ -61,15 +86,16 @@ class MessageBubble extends Widget<Properties> {
       isDeleted = false,
     } = this.option();
 
-    this.$element().removeClass(CHAT_MESSAGEBUBBLE_DELETED_CLASS);
+    this.$element()
+      .removeClass(CHAT_MESSAGEBUBBLE_DELETED_CLASS)
+      .removeClass(CHAT_MESSAGEBUBBLE_HAS_IMAGE_CLASS);
 
-    const $bubbleContainer = $(this.element()).find(`.${CHAT_MESSAGEBUBBLE_CONTENT_CLASS}`);
-    $bubbleContainer.empty();
+    this._$content.empty();
 
     if (template) {
       template({
         type, text, src, alt,
-      }, getPublicElement($bubbleContainer));
+      }, getPublicElement(this._$content));
 
       return;
     }
@@ -84,7 +110,7 @@ class MessageBubble extends Widget<Properties> {
       const deletedMessage = $('<div>')
         .text(messageLocalization.format('dxChat-deletedMessageText'));
 
-      $bubbleContainer
+      this._$content
         .append(icon)
         .append(deletedMessage);
 
@@ -98,11 +124,37 @@ class MessageBubble extends Widget<Properties> {
           .attr('src', src ?? '')
           .attr('alt', alt ?? messageLocalization.format('dxChat-defaultImageAlt'))
           .addClass(CHAT_MESSAGEBUBBLE_IMAGE_CLASS)
-          .appendTo($bubbleContainer);
+          .appendTo(this._$content);
         break;
       case 'text':
       default:
-        $bubbleContainer.text(text ?? '');
+        this._$content.text(text ?? '');
+    }
+  }
+
+  _renderAttachments(): void {
+    const {
+      attachments,
+      activeStateEnabled,
+      focusStateEnabled,
+      hoverStateEnabled,
+      onAttachmentDownload,
+    } = this.option();
+
+    if (!this._$attachments) {
+      return;
+    }
+
+    this._$attachments.empty();
+
+    if (attachments?.length) {
+      this._createComponent(this._$attachments, FileView, {
+        activeStateEnabled,
+        focusStateEnabled,
+        hoverStateEnabled,
+        files: attachments,
+        onDownload: onAttachmentDownload,
+      });
     }
   }
 
@@ -123,13 +175,25 @@ class MessageBubble extends Widget<Properties> {
       case 'isDeleted':
         this._updateMessageData(name, value);
         this._updateContent();
+        this._renderAttachmentsElement();
+        this._renderAttachments();
+        break;
+      case 'type':
+        this._updateContent();
+        this._renderAttachmentsElement();
+        this._renderAttachments();
         break;
       case 'template':
         this._updateContent();
         break;
       case 'isEdited':
         this._updateMessageData(name, value);
         break;
+      case 'onAttachmentDownload':
+      case 'attachments':
+        this._renderAttachmentsElement();
+        this._renderAttachments();
+        break;
       default:
         super._optionChanged(args);
     }