feat(chat): Intermediate result

Author: marker dao ®

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

@@ -5,7 +5,7 @@
   border-top-style: solid;
 }
 
-.dx-chat-messagebox-input-container {
+.dx-chat-messagebox-textarea-container {
   display: flex;
   align-items: flex-end;
 }

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

@@ -11,7 +11,7 @@
     gap: $padding;
   }
 
-  .dx-chat-messagebox-input-container {
+  .dx-chat-messagebox-textarea-container {
     gap: $gap;
   }
 

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

@@ -1,6 +1,7 @@
 import registerComponent from '@js/core/component_registrator';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import { getOuterHeight } from '@js/core/utils/size';
 import type { Properties as ToolbarProperties } from '@js/ui/toolbar';
 import Toolbar from '@js/ui/toolbar';
 import type { OptionChanged } from '@ts/core/widget/types';
@@ -53,6 +54,14 @@ class TextAreaOnSteroids extends TextArea<Properties> {
 
   _renderButtonContainers(): void {}
 
+  _getHeightDifference($input: dxElementWrapper): number {
+    const superResult = super._getHeightDifference($input);
+    const toolbarHeight = getOuterHeight(this._$toolbar);
+    const sum: number = superResult + toolbarHeight;
+
+    return sum;
+  }
+
   _optionChanged(args: OptionChanged<Properties>): void {
     const { name, value } = args;
 

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

@@ -15,7 +15,7 @@ import EditingPreview from '@ts/ui/chat/message_box/editing_preview';
 import type { EnterKeyEvent, InputEvent } from '../../../../ui/text_area';
 
 export const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox';
-export const CHAT_MESSAGEBOX_INPUT_CONTAINER_CLASS = 'dx-chat-messagebox-input-container';
+export const CHAT_MESSAGEBOX_TEXTAREA_CONTAINER_CLASS = 'dx-chat-messagebox-textarea-container';
 export const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea';
 export const CHAT_MESSAGEBOX_BUTTON_CLASS = 'dx-chat-messagebox-button';
 
@@ -39,7 +39,9 @@ export interface Properties extends DOMComponentProperties<MessageBox> {
 
   text?: string;
 
+  /** To remove */
   toolbarItems?: ToolbarProperties['items'];
+  /** End */
 
   onMessageEntered?: (e: MessageEnteredEvent) => void;
 
@@ -55,7 +57,9 @@ export interface Properties extends DOMComponentProperties<MessageBox> {
 class MessageBox extends DOMComponent<MessageBox, Properties> {
   _textArea!: TextAreaOnSteroids;
 
+  /** Move to ChatTextArea */
   _sendButton?: Button;
+  /** End */
 
   _editingPreview!: EditingPreview | null;
 
@@ -74,12 +78,15 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       activeStateEnabled: true,
       focusStateEnabled: true,
       hoverStateEnabled: true,
+      text: '',
+      /** To remove */
+      toolbarItems: [],
+      /** End */
       onMessageEntered: undefined,
-      onTypingStart: undefined,
-      onTypingEnd: undefined,
       onMessageEditCanceled: undefined,
       onMessageUpdating: undefined,
-      text: '',
+      onTypingStart: undefined,
+      onTypingEnd: undefined,
     };
   }
 
@@ -100,13 +107,12 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       this._renderEditingPreview();
     }
 
-    this._renderInputContainer();
+    this._renderTextAreaContainer();
   }
 
-  /** Why we need additional container? Why it is input container? */
-  _renderInputContainer(): void {
+  _renderTextAreaContainer(): void {
     const $inputContainer = $('<div>')
-      .addClass(CHAT_MESSAGEBOX_INPUT_CONTAINER_CLASS)
+      .addClass(CHAT_MESSAGEBOX_TEXTAREA_CONTAINER_CLASS)
       .appendTo(this.element());
 
     this._renderTextArea($inputContainer);
@@ -150,13 +156,18 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       textAreaOptions,
     );
 
+    /** Will conflict with Enter on other buttons? */
     this._textArea.registerKeyHandler('enter', (event: KeyboardEvent) => {
+      debugger;
       if (!event.shiftKey && this._isValuableTextEntered() && !isMobile()) {
         event.preventDefault();
       }
     });
+    /** End */
 
+    /** Will conflict with Esc on Toolbar DropDowns? */
     this._textArea.registerKeyHandler(ESCAPE_KEY, () => {
+      debugger;
       if (this.option('text')) {
         this._cancelMessageEdit();
       }
@@ -170,24 +181,31 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       hoverStateEnabled,
     } = this.option();
 
+    /** Move to ChatTextArea */
     const toolbarItems = this._getToolbarItems();
+    /** End */
 
     const options = {
       activeStateEnabled,
       focusStateEnabled,
       hoverStateEnabled,
+      /** To remove */
       toolbarOptions: {
         items: toolbarItems,
       },
+      /** Move to ChatTextArea */
       stylingMode: 'outlined',
       placeholder: messageLocalization.format('dxChat-textareaPlaceholder'),
       autoResizeEnabled: true,
       valueChangeEvent: 'input',
       maxHeight: '8em',
+      /** End */
       onInput: (e: InputEvent): void => {
+        /** Move to ChatTextArea */
         const shouldButtonBeDisabled = !this._isValuableTextEntered();
 
         this._toggleButtonDisableState(shouldButtonBeDisabled);
+        /** End */
 
         this._triggerTypingStartAction(e);
         this._updateTypingEndTimeout();
@@ -206,6 +224,7 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
     return options as TextAreaOnSteroidsProperties;
   }
 
+  /** Move to ChatTextArea */
   _getToolbarItems(): ToolbarProperties['items'] {
     const { toolbarItems } = this.option();
 
@@ -218,7 +237,9 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return items;
   }
+  /** End */
 
+  /** Move to ChatTextArea */
   _getDefaultBeforeToolbarItems(): ToolbarProperties['items'] {
     const {
       activeStateEnabled,
@@ -245,7 +266,9 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
 
     return items;
   }
+  /** End */
 
+  /** Move to ChatTextArea */
   _getDefaultAfterToolbarItems(): ToolbarProperties['items'] {
     const {
       activeStateEnabled,
@@ -294,6 +317,7 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
 
     return items;
   }
+  /** End */
 
   _createMessageEnteredAction(): void {
     this._messageEnteredAction = this._createActionByOption(
@@ -348,7 +372,6 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
     this._typingEndAction?.();
 
     const { text = '' } = this._textArea.option();
-
     const { text: previewText } = this.option();
 
     if (previewText) {
@@ -359,21 +382,28 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       return;
     }
 
+    /** Move to ChatTextArea */
+    /** Make onSend action */
     this._textArea.reset();
     this._toggleButtonDisableState(true);
+    /** end */
 
     this._messageEnteredAction?.({ text, event: e.event });
   }
 
+  /** Move to ChatTextArea */
   _toggleButtonDisableState(state: boolean): void {
     this._sendButton?.option('disabled', state);
   }
+  /** End */
 
+  /** Move to ChatTextArea */
   _isValuableTextEntered(): boolean {
     const { text } = this._textArea.option();
 
     return !!text?.trim();
   }
+  /** End */
 
   _optionChanged(args: OptionChanged<Properties>): void {
     const { name, value } = args;
@@ -435,13 +465,17 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
     }
   }
 
+  /** Move to ChatTextArea */
   _updateInputContainer(value: string | undefined): void {
+    /** Is it in law here in the updateInputContainer method? */
+    /** There is no any related things to InputContainer */
     this._textArea.option('value', value);
 
     const shouldButtonBeDisabled = !this._isValuableTextEntered();
 
     this._toggleButtonDisableState(shouldButtonBeDisabled);
   }
+  /** End */
 }
 
 export default MessageBox;

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

@@ -148,10 +148,23 @@ class TextArea<
   }
 
   _getHeightDifference($input: dxElementWrapper): number {
-    return getVerticalOffsets(this.$element().get(0), false)
-      + getVerticalOffsets(this._$textEditorContainer.get(0), false)
-      + getVerticalOffsets(this._$textEditorInputContainer.get(0), true)
-      + getElementBoxParams('height', getWindow().getComputedStyle($input.get(0))).margin;
+    const verticalElementOffset = getVerticalOffsets(this.$element().get(0), false);
+    const verticalEditorContainerOffset = getVerticalOffsets(
+      this._$textEditorContainer.get(0),
+      false,
+    );
+    const verticalInputContainerOffsets = getVerticalOffsets(
+      this._$textEditorInputContainer.get(0),
+      true,
+    );
+    const inputMargin = getElementBoxParams('height', getWindow().getComputedStyle($input.get(0))).margin;
+
+    const sum = verticalElementOffset
+      + verticalEditorContainerOffset
+      + verticalInputContainerOffsets
+      + inputMargin;
+
+    return sum;
   }
 
   _updateInputHeight(): void {
@@ -200,12 +213,20 @@ class TextArea<
     }
   }
 
-  _getBoundaryHeight(optionName) {
+  _getBoundaryHeight(optionName: string): number | undefined {
     const boundaryValue = this.option(optionName);
 
     if (isDefined(boundaryValue)) {
-      return typeof boundaryValue === 'number' ? boundaryValue : parseHeight(boundaryValue, this.$element().get(0).parentElement, this.$element().get(0));
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return typeof boundaryValue === 'number'
+        ? boundaryValue : parseHeight(
+          boundaryValue,
+          this.$element().get(0).parentElement,
+          this.$element().get(0),
+        );
     }
+
+    return undefined;
   }
 
   _renderInputType(): void {}

packages/devextreme/playground/jquery.html

@@ -53,7 +53,8 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
         <script>
             $(() => {
                 $("#button").dxChat({
-                    
+                    height: 600,
+                    width: 500,
                 });
             });
         </script>