Chat FU: Create FileView component (#31428)

r-farkhutdinov · Ruslan Farkhutdinov · web-flow · commit 0a6926931106 · 2025-10-24T17:21:58.000+03:00
Co-authored-by: Ruslan Farkhutdinov &lt;ruslan.farkhutdinov@devexpress.com&gt;
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_index.scss
@@ -1,9 +1,9 @@
 @use "../../../mixins" as *;
 
 .dx-chat-file {
-  flex: 1 1 30%;
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .dx-chat-file-icon-container {
@@ -37,3 +37,9 @@
   flex-grow: 0;
   flex-shrink: 0;
 }
+
+.dx-chat-file-view {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss
@@ -1,5 +1,5 @@
 @mixin chat-file(
-  $chat-file-container-min-width,
+  $chat-file-container-width,
   $chat-file-container-padding,
   $chat-file-container-background-color,
   $chat-file-container-border-radius,
@@ -11,7 +11,7 @@
   $chat-file-file-size-max-width
 ) {
   .dx-chat-file {
-    min-width: $chat-file-container-min-width;
+    width: $chat-file-container-width;
     padding: $chat-file-container-padding;
     background-color: $chat-file-container-background-color;
     border-radius: $chat-file-container-border-radius;
@@ -46,3 +46,11 @@
     flex-basis: $chat-file-button-size;
   }
 }
+
+@mixin chat-fileview(
+  $chat-file-view-items-gap,
+) {
+  .dx-chat-file-view {
+    gap: $chat-file-view-items-gap;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -16,7 +16,7 @@
   $chat-avatar-background-color,
 );
 @include chat-file(
-  $chat-file-container-min-width,
+  $chat-file-container-width,
   $chat-file-container-padding,
   $chat-file-container-background-color,
   $chat-file-container-border-radius,
@@ -27,6 +27,9 @@
   $chat-file-base-section-gap,
   $chat-file-file-size-max-width,
 );
+@include chat-fileview(
+  $chat-file-view-items-gap
+);
 @include chat-alertlist(
   $chat-alertlist-color,
   $chat-alerts-padding-block,
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
@@ -66,13 +66,14 @@ $chat-confirmation-popup-toolbar-padding-block: $fluent-popup-content-withtitle-
 $chat-confirmation-popup-toolbar-padding-inline: $fluent-popup-content-withtitle-top-padding !default;
 $chat-confirmation-popup-toolbar-gap: null !default;
 
-$chat-file-container-min-width: 17.14em !default;
+$chat-file-container-width: 17.14em !default;
 $chat-file-container-padding: 7px 8px !default;
 $chat-file-container-border-radius: $fluent-base-border-radius !default;
 $chat-file-button-size: $fluent-button-height !default;
 $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;
 
 @if $size == "default" {
   $chat-bubble-border-radius: $fluent-base-border-radius * 3 !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -19,7 +19,7 @@
   $chat-avatar-background-color,
 );
 @include chat-file(
-  $chat-file-container-min-width,
+  $chat-file-container-width,
   $chat-file-container-padding,
   $chat-file-container-background-color,
   $chat-file-container-border-radius,
@@ -30,6 +30,9 @@
   $chat-file-base-section-gap,
   $chat-file-file-size-max-width,
 );
+@include chat-fileview(
+  $chat-file-view-items-gap
+);
 @include chat-alertlist(
   $chat-alertlist-color,
   $chat-alerts-padding-block,
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
@@ -65,13 +65,14 @@ $chat-confirmation-popup-toolbar-padding-block: $generic-popup-toolbarbottom-pad
 $chat-confirmation-popup-toolbar-padding-inline: $generic-popup-toolbarbottom-padding !default;
 $chat-confirmation-popup-toolbar-gap: null !default;
 
-$chat-file-container-min-width: 17.14em !default;
+$chat-file-container-width: 17.14em !default;
 $chat-file-container-padding: 7px 8px !default;
 $chat-file-container-border-radius: $base-border-radius !default;
 $chat-file-button-size: null !default;
 $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;
 
 @if $size == "default" {
   $chat-bubble-padding: 8px 12px !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -17,7 +17,7 @@
   $chat-avatar-background-color,
 );
 @include chat-file(
-  $chat-file-container-min-width,
+  $chat-file-container-width,
   $chat-file-container-padding,
   $chat-file-container-background-color,
   $chat-file-container-border-radius,
@@ -28,6 +28,9 @@
   $chat-file-base-section-gap,
   $chat-file-file-size-max-width,
 );
+@include chat-fileview(
+  $chat-file-view-items-gap
+);
 @include chat-alertlist(
   $chat-alertlist-color,
   $chat-alerts-padding-block,
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
@@ -63,13 +63,14 @@ $chat-confirmation-popup-toolbar-padding-block: null !default;
 $chat-confirmation-popup-toolbar-padding-inline: null !default;
 $chat-confirmation-popup-toolbar-gap: null !default;
 
-$chat-file-container-min-width: 17.14em !default;
+$chat-file-container-width: 17.14em !default;
 $chat-file-container-padding: 7px 8px !default;
 $chat-file-container-border-radius: $material-base-border-radius !default;
 $chat-file-button-size: $material-button-height !default;
 $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;
 
 @if $size == "default" {
   $chat-bubble-border-radius: 8px !default;
diff --git a/packages/devextreme/js/__internal/ui/chat/file_view/file.ts b/packages/devextreme/js/__internal/ui/chat/file_view/file.ts
@@ -25,7 +25,7 @@ export type Properties = DOMComponentProperties<File> & {
   onDownload?: (e: AttachmentDownloadEvent) => void;
 };
 
-const CHAT_FILE_CLASS = 'dx-chat-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';
diff --git a/packages/devextreme/js/__internal/ui/chat/file_view/file_view.ts b/packages/devextreme/js/__internal/ui/chat/file_view/file_view.ts
@@ -0,0 +1,127 @@
+import $ from '@js/core/renderer';
+import type { Attachment, AttachmentDownloadEvent } from '@js/ui/chat';
+import type { DOMComponentProperties } from '@ts/core/widget/dom_component';
+import DOMComponent from '@ts/core/widget/dom_component';
+import type { OptionChanged } from '@ts/core/widget/types';
+import type { Properties as FileProperties } from '@ts/ui/chat/file_view/file';
+import File from '@ts/ui/chat/file_view/file';
+
+export interface FileViewProperties extends DOMComponentProperties<FileView> {
+  activeStateEnabled?: boolean;
+
+  focusStateEnabled?: boolean;
+
+  hoverStateEnabled?: boolean;
+
+  files?: Attachment[];
+
+  onDownload?: (e: AttachmentDownloadEvent) => void;
+}
+
+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[] = [];
+
+  private _downloadAction?: (e: Partial<AttachmentDownloadEvent>) => void;
+
+  _getDefaultOptions(): FileViewProperties {
+    return {
+      ...super._getDefaultOptions(),
+      files: [],
+      activeStateEnabled: true,
+      focusStateEnabled: true,
+      hoverStateEnabled: true,
+    };
+  }
+
+  _init(): void {
+    super._init();
+
+    this._createDownloadAction();
+  }
+
+  _createDownloadAction(): void {
+    this._downloadAction = this._createActionByOption(
+      'onDownload',
+      { excludeValidators: ['disabled'] },
+    );
+  }
+
+  _initMarkup(): void {
+    this.$element().addClass(CHAT_FILE_VIEW_CLASS);
+    super._initMarkup();
+
+    this._renderItems();
+  }
+
+  _renderItems(): void {
+    const { files = [] } = this.option();
+
+    this._clearFileInstances();
+
+    files.forEach((file) => {
+      this._renderItem(file);
+    });
+  }
+
+  _renderItem(data: Attachment): void {
+    const $file = $('<div>');
+
+    const fileInstance = this._createComponent($file, File, this._getFileConfig(data));
+
+    this.$element().append($file);
+
+    this._fileInstances.push(fileInstance);
+  }
+
+  _getFileConfig(data: Attachment): FileProperties {
+    const { activeStateEnabled, focusStateEnabled, hoverStateEnabled } = this.option();
+
+    const configuration: FileProperties = {
+      data,
+      activeStateEnabled,
+      focusStateEnabled,
+      hoverStateEnabled,
+      onDownload: (event) => {
+        this._downloadAction?.(event);
+      },
+    };
+
+    return configuration;
+  }
+
+  _clearFileInstances(): void {
+    this._fileInstances?.forEach((instance) => { instance.dispose(); });
+    this._fileInstances = [];
+    this.$element().empty();
+  }
+
+  _dispose(): void {
+    this._clearFileInstances();
+    super._dispose();
+  }
+
+  _optionChanged(args: OptionChanged<FileViewProperties>): void {
+    const { name } = args;
+
+    switch (name) {
+      case 'activeStateEnabled':
+      case 'focusStateEnabled':
+      case 'hoverStateEnabled':
+      case 'files':
+        this._renderItems();
+        break;
+
+      case 'onDownload':
+        this._createDownloadAction();
+        break;
+
+      default:
+        super._optionChanged(args);
+    }
+  }
+}
+
+export default FileView;
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.markup.tests.js
@@ -19,3 +19,4 @@ import './chatParts/typingIndicator.markup.tests.js';
 import './chatParts/editingPreview.markup.tests.js';
 import './chatParts/chatTextArea.markup.tests.js';
 import './chatParts/chat.markup.tests.js';
+import './chatParts/fileView.markup.tests.js';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.tests.js
@@ -19,3 +19,4 @@ import './chatParts/typingIndicator.tests.js';
 import './chatParts/editingPreview.tests.js';
 import './chatParts/chatTextArea.tests.js';
 import './chatParts/chat.tests.js';
+import './chatParts/fileView.tests.js';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/fileView.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/fileView.markup.tests.js
@@ -0,0 +1,42 @@
+import $ from 'jquery';
+import FileView, { CHAT_FILE_VIEW_CLASS } from '__internal/ui/chat/file_view/file_view';
+
+import { CHAT_FILE_CLASS } from '__internal/ui/chat/file_view/file';
+
+const { test } = QUnit;
+
+QUnit.module('FileView', {
+    beforeEach() {
+        this.$element = $('<div>').appendTo('#qunit-fixture');
+
+        const init = (options) => {
+            this.instance = new FileView(this.$element, options);
+        };
+
+        this.reinit = (options) => {
+            this.instance.dispose();
+
+            init(options);
+        };
+
+        init();
+    },
+    afterEach() {
+        this.instance.dispose();
+        this.$element.remove();
+    },
+}, () => {
+    test('should have correct structure when no files passed', function(assert) {
+        assert.ok(this.$element.hasClass(CHAT_FILE_VIEW_CLASS), 'root has correct class');
+        assert.strictEqual(this.$element.children().length, 0, 'no items initially');
+    });
+
+    test('should have correct structure when files passed', function(assert) {
+        const files = [{ name: 'Test', size: 50 }, { name: 'Test2', size: 50 }];
+        this.reinit({ files });
+
+        const $chatFile = this.$element.find(`.${CHAT_FILE_CLASS}`);
+
+        assert.strictEqual($chatFile.length, 2, 'file is rendered');
+    });
+});
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/fileView.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/fileView.tests.js
