Chat: Add user option

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

@@ -1,4 +1,5 @@
 import registerComponent from '@js/core/component_registrator';
+import Guid from '@js/core/guid';
 import $ from '@js/core/renderer';
 import type { Properties } from '@js/ui/chat';
 
@@ -9,8 +10,6 @@ import MessageList from './chat_message_list';
 
 const CHAT_CLASS = 'dx-chat';
 
-const MOCK_CURRENT_USER_ID = 'CURRENT_USER_ID';
-
 class Chat extends Widget<Properties> {
   _chatHeader?: ChatHeader;
 
@@ -23,6 +22,8 @@ class Chat extends Widget<Properties> {
       ...super._getDefaultOptions(),
       title: '',
       items: [],
+      // @ts-expect-error
+      user: { id: new Guid().toString() },
       onMessageSend: undefined,
     };
   }
@@ -47,13 +48,15 @@ class Chat extends Widget<Properties> {
   }
 
   _renderMessageList(): void {
-    const { items } = this.option();
+    // @ts-expect-error
+    const { items, user } = this.option();
 
+    const currentUserId = user?.id;
     const $messageList = $('<div>').appendTo(this.element());
 
     this._messageList = this._createComponent($messageList, MessageList, {
       items,
-      currentUserId: MOCK_CURRENT_USER_ID,
+      currentUserId,
     });
   }
 
@@ -71,8 +74,13 @@ class Chat extends Widget<Properties> {
         // @ts-expect-error
         this._chatHeader?.option(name, value);
         break;
+      case 'user':
+        // @ts-expect-error
+        this._messageList?.option('currentUserId', value.id);
+        break;
       case 'items':
-        this._invalidate();
+        // @ts-expect-error
+        this._messageList?.option(name, value);
         break;
       case 'onMessageSend':
         break;

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

@@ -11,15 +11,15 @@ const CHAT_MESSAGE_LIST_CONTENT_CLASS = 'dx-chat-message-list-content';
 
 export interface MessageListOptions extends WidgetOptions<MessageList> {
   items?: Message[];
-  currentUserId?: string;
+  currentUserId?: number | string;
 }
 
 class MessageList extends Widget<MessageListOptions> {
   _getDefaultOptions(): MessageListOptions {
     return {
       ...super._getDefaultOptions(),
       items: [],
-      currentUserId: '',
+      currentUserId: undefined,
     };
   }
 
@@ -89,6 +89,7 @@ class MessageList extends Widget<MessageListOptions> {
     switch (name) {
       case 'items':
       case 'currentUserId':
+        this._invalidate();
         break;
       default:
         super._optionChanged(args);

packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.markup.tests.js

@@ -92,6 +92,7 @@ const moduleConfig = {
         ];
 
         const options = {
+            user: userSecond,
             items: messages,
         };
 

packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.tests.js

@@ -83,6 +83,51 @@ QUnit.module('Chat initialization', moduleConfig, () => {
     QUnit.test('Chat should be initialized with correct type', function(assert) {
         assert.ok(this.instance instanceof Chat);
     });
+
+    QUnit.test('currentUserId in message list should be equal chat user id', function(assert) {
+        const messageList = this.instance._messageList;
+
+        const chatUserId = this.instance.option('user.id');
+        const messageListUserId = messageList.option('currentUserId');
+
+        assert.strictEqual(chatUserId, messageListUserId);
+    });
+
+    QUnit.test('currentUserId in message list should be changed when user has been changed in runtime', function(assert) {
+        const newId = 'new id';
+
+        this.instance.option({ user: { id: newId } });
+
+        const { currentUserId } = this.instance._messageList.option();
+
+        assert.strictEqual(currentUserId, newId);
+    });
+
+    QUnit.test('items in message list should be changed when items has been changed in runtime', function(assert) {
+        const newItems = [];
+
+        this.instance.option({ items: newItems });
+
+        const { items } = this.instance._messageList.option();
+
+        assert.strictEqual(items, newItems);
+    });
+
+    QUnit.test('Message list should run invalidate after changing user in runtime', function(assert) {
+        const invalidateStub = sinon.stub(this.instance._messageList, '_invalidate');
+
+        this.instance.option({ user: {} });
+
+        assert.strictEqual(invalidateStub.callCount, 1);
+    });
+
+    QUnit.test('Message list should run invalidate after changing items in runtime', function(assert) {
+        const invalidateStub = sinon.stub(this.instance._messageList, '_invalidate');
+
+        this.instance.option({ items: [] });
+
+        assert.strictEqual(invalidateStub.callCount, 1);
+    });
 });
 
 QUnit.module('Header', moduleConfig, () => {
@@ -141,3 +186,20 @@ QUnit.module('Message group', moduleConfig, () => {
         assert.strictEqual($bubble.text(), 'userFirst');
     });
 });
+
+QUnit.module('Default options', () => {
+    QUnit.test('There is an user id by default if user has not been set', function(assert) {
+        const instance = $('#chat').dxChat().dxChat('instance');
+
+        const { user } = instance.option();
+
+        // eslint-disable-next-line no-prototype-builtins
+        assert.strictEqual(user.hasOwnProperty('id'), true);
+    });
+
+    QUnit.test('User id should be generate as a string if user has not been set', function(assert) {
+        const instance = $('#chat').dxChat().dxChat('instance');
+
+        assert.strictEqual(typeof instance.option('user.id') === 'string', true);
+    });
+});