diff --git a/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (fluent.blue.light).png b/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (fluent.blue.light).png
index beca57f943ac..eaf634144e04 100644
Binary files a/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (fluent.blue.light).png and b/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (material.blue.light).png b/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (material.blue.light).png
index 8fcfe3e5c949..e6a6c9a7968f 100644
Binary files a/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (material.blue.light).png and b/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration.png b/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration.png
index 1d9dcd6a8c2a..fbe129b39c2c 100644
Binary files a/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration.png and b/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration.png differ
diff --git a/apps/demos/testing/etalons/Chat-Customization (fluent.blue.light).png b/apps/demos/testing/etalons/Chat-Customization (fluent.blue.light).png
index fcd2af28fd60..333448c167f4 100644
Binary files a/apps/demos/testing/etalons/Chat-Customization (fluent.blue.light).png and b/apps/demos/testing/etalons/Chat-Customization (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-Customization (material.blue.light).png b/apps/demos/testing/etalons/Chat-Customization (material.blue.light).png
index 96dd78e87e62..346743feeffb 100644
Binary files a/apps/demos/testing/etalons/Chat-Customization (material.blue.light).png and b/apps/demos/testing/etalons/Chat-Customization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-Customization.png b/apps/demos/testing/etalons/Chat-Customization.png
index 992fc51f15a9..5f5c01bdb487 100644
Binary files a/apps/demos/testing/etalons/Chat-Customization.png and b/apps/demos/testing/etalons/Chat-Customization.png differ
diff --git a/apps/demos/testing/etalons/Chat-MessageEditing (fluent.blue.light).png b/apps/demos/testing/etalons/Chat-MessageEditing (fluent.blue.light).png
index 43f83cf0467a..03eac2c2edff 100644
Binary files a/apps/demos/testing/etalons/Chat-MessageEditing (fluent.blue.light).png and b/apps/demos/testing/etalons/Chat-MessageEditing (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-MessageEditing (material.blue.light).png b/apps/demos/testing/etalons/Chat-MessageEditing (material.blue.light).png
index ef76b6b666df..7c0cdcbb0317 100644
Binary files a/apps/demos/testing/etalons/Chat-MessageEditing (material.blue.light).png and b/apps/demos/testing/etalons/Chat-MessageEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-MessageEditing.png b/apps/demos/testing/etalons/Chat-MessageEditing.png
index ce65759f4a09..f537f1da5531 100644
Binary files a/apps/demos/testing/etalons/Chat-MessageEditing.png and b/apps/demos/testing/etalons/Chat-MessageEditing.png differ
diff --git a/apps/demos/testing/etalons/Chat-Overview (fluent.blue.light).png b/apps/demos/testing/etalons/Chat-Overview (fluent.blue.light).png
index 0ae57434f6bb..8731e9484433 100644
Binary files a/apps/demos/testing/etalons/Chat-Overview (fluent.blue.light).png and b/apps/demos/testing/etalons/Chat-Overview (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-Overview (material.blue.light).png b/apps/demos/testing/etalons/Chat-Overview (material.blue.light).png
index 54133c503cba..9aa18c54d7bd 100644
Binary files a/apps/demos/testing/etalons/Chat-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Chat-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-Overview.png b/apps/demos/testing/etalons/Chat-Overview.png
index 48500277891a..af8a912a9bfb 100644
Binary files a/apps/demos/testing/etalons/Chat-Overview.png and b/apps/demos/testing/etalons/Chat-Overview.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (fluent.blue.light).png
index 4f09812c025f..ff55a477212f 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (material.blue.light).png
index e3aaf4c90ea3..a1e96e78c473 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden.png
index 12cf3d5cfccc..8bbca9e21330 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden.png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (fluent.blue.light).png
index de7050c14809..a769f822e897 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (material.blue.light).png
index 6f40c9bb2a74..28cf465f8bb1 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed.png
index 7048da844bdc..421aea805cba 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed.png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (fluent.blue.light).png
index 215c96490189..4f77b951ed43 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (material.blue.light).png
index 0f9b1fa8ae15..e09e67b1a487 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden.png
index 8ee1790b3bfa..c06da2a3ed94 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden.png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (fluent.blue.light).png
index ce3979572993..4fffaae0bd52 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (material.blue.light).png
index fa8edc0085d0..970eba1428f5 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent.png
index 6a1fad0de706..217504184366 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent.png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (fluent.blue.light).png
index 59fa8b812d80..5a5a00b61008 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (material.blue.light).png
index 4227fac75688..9ca2daee96e3 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed.png
index 508d209e9040..ad3f15acc244 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed.png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (fluent.blue.light).png
index b6d47928f5ae..c0fcafd5b903 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (material.blue.light).png
index 2051db9fd0be..66ca2d61b014 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden.png
index e5b026e55e9f..fc52d31d3ea1 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden.png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (fluent.blue.light).png
index 45ec65411918..055d81a8d7a2 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (material.blue.light).png
index 4f3c8823636f..9badb67f0a35 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden.png b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden.png
index 7644f8cf0c20..1276b0e4a309 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden.png and b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown (fluent.blue.light).png
index 3cf2f7d97de9..62e266e855e7 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown (material.blue.light).png
index 603fb5599cbc..f8a192bdfdf6 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown.png b/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown.png
index 69f42164701b..5c16df891b40 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown.png and b/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/last_message_context_menu (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/last_message_context_menu (fluent.blue.light).png
index 003a07778e51..203f3ec0f90d 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/last_message_context_menu (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/last_message_context_menu (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/last_message_context_menu (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/last_message_context_menu (material.blue.light).png
index b0565cc46e77..22de782ebe68 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/last_message_context_menu (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/last_message_context_menu (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/last_message_context_menu.png b/apps/demos/testing/widgets/chat/etalons/last_message_context_menu.png
index 72bdedfaa884..ab24b780e37b 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/last_message_context_menu.png and b/apps/demos/testing/widgets/chat/etalons/last_message_context_menu.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled (fluent.blue.light).png
index 01a5dd83c4bc..4d9a4d2d234c 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled (material.blue.light).png
index 11274e249c38..5eedf1748f4d 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled.png b/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled.png
index 0296ff6ebffd..77ef370f6b8b 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled.png and b/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled (fluent.blue.light).png
index 10c22bc44e3c..a260376c9978 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled (material.blue.light).png
index 853b7ec34867..9698e4f27cff 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled.png b/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled.png
index 21ab52221d0b..c9a42004e23b 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled.png and b/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_is_deleted (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/message_is_deleted (fluent.blue.light).png
index 6ed352c249dc..74d0c8e06496 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/message_is_deleted (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/message_is_deleted (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_is_deleted (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/message_is_deleted (material.blue.light).png
index 065947f44bc9..a57a4da5ce00 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/message_is_deleted (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/message_is_deleted (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_is_deleted.png b/apps/demos/testing/widgets/chat/etalons/message_is_deleted.png
index ba32fa762286..2108a5582933 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/message_is_deleted.png and b/apps/demos/testing/widgets/chat/etalons/message_is_deleted.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_is_edited (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/message_is_edited (fluent.blue.light).png
index 17aae59711fe..e4f5911bd051 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/message_is_edited (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/message_is_edited (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_is_edited (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/message_is_edited (material.blue.light).png
index ba0514814c1a..dbb75fe6d168 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/message_is_edited (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/message_is_edited (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_is_edited.png b/apps/demos/testing/widgets/chat/etalons/message_is_edited.png
index 0a797dc5453e..9c004a754978 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/message_is_edited.png and b/apps/demos/testing/widgets/chat/etalons/message_is_edited.png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/preview_is_shown (fluent.blue.light).png b/apps/demos/testing/widgets/chat/etalons/preview_is_shown (fluent.blue.light).png
index 4440ed94488d..a3228721cb06 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/preview_is_shown (fluent.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/preview_is_shown (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/preview_is_shown (material.blue.light).png b/apps/demos/testing/widgets/chat/etalons/preview_is_shown (material.blue.light).png
index 550dba7e44fe..7efdf750d365 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/preview_is_shown (material.blue.light).png and b/apps/demos/testing/widgets/chat/etalons/preview_is_shown (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/preview_is_shown.png b/apps/demos/testing/widgets/chat/etalons/preview_is_shown.png
index 31b5d439d9ea..0bd8efd94002 100644
Binary files a/apps/demos/testing/widgets/chat/etalons/preview_is_shown.png and b/apps/demos/testing/widgets/chat/etalons/preview_is_shown.png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (fluent-blue-light).png
index b1c44b928235..6b9a6ef90d5e 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (generic-light).png
index 0ebcca34085a..97bff4066669 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (material-blue-light).png
index 608f08553f55..7400ba86d825 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-blue-dark).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-blue-dark).png
index 4fe80d4cafc7..154173c35b78 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-blue-dark).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-blue-dark).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-blue-light).png
index fba14eba43de..b8374534115e 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-blue-light-compact).png
index 68618e80ae81..995b0836fbb4 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-blue-light-compact).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-blue-light-compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (generic-dark).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (generic-dark).png
index 3dcc5c50ab3b..2414f2e53475 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (generic-dark).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (generic-dark).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (generic-light).png
index fa6a189278eb..f3c8931f2967 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (generic-light-compact).png
index 69134172dfa4..f3210a32c121 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (generic-light-compact).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (generic-light-compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (material-blue-dark).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (material-blue-dark).png
index 51123a59c8b9..d63e960185bd 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (material-blue-dark).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (material-blue-dark).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (material-blue-light).png
index c4fb5e59d7ee..051b8ab4ca71 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (material-blue-light-compact).png
index 48f6085770f6..0f7cbf5f1aa2 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (material-blue-light-compact).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (material-blue-light-compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (fluent-blue-light).png
index eaa320490d26..bda63a5d7a9c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (generic-light).png
index 3d8974d6406d..318dbd72f27f 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (material-blue-light).png
index c84d7420ef1e..d49bfc08cf2a 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (fluent-blue-light).png
index 73d05ca6989b..7e5699f51492 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (generic-light).png
index 0a3e740fc807..2d4bb6e7cc2e 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (material-blue-light).png
index 13a3e29dc18f..02fea9205390 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (fluent-blue-light).png
index 46aa954dbf2f..c85b743e7b93 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (generic-light).png
index dd14b750fbe0..a50c84b1d521 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (material-blue-light).png
index 0e9b3764ea7c..345c0a9f0ae4 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (fluent-blue-light).png
index 43cf1472fb0d..43070e2e29ff 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (generic-light).png
index d226becda73a..1bd3e44495fb 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (material-blue-light).png
index e5ff0a6cdb3c..e554b47a2875 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (fluent-blue-light).png
index a3b651944b7a..ef232f6a62bc 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (generic-light).png
index 0c48e2c2287d..5936140480fc 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (material-blue-light).png
index df8dba0f110f..c2fff30c5f84 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (fluent-blue-light).png
index 6ec83d522989..c32a06cef14a 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (generic-light).png
index d31f55b01fdc..c4de247b4051 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (material-blue-light).png
index 9b3ae608d322..1962168dca1f 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with image (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with image (fluent-blue-light).png
index 483248bda8ad..802956b34470 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with image (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with image (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with image (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with image (generic-light).png
index 3e31964e1db0..54b1b2d59b1e 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with image (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with image (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with image (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with image (material-blue-light).png
index b9287f276625..a02ef89ac687 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with image (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with image (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (fluent-blue-light).png
index e1753c6422b7..f8993e83f9bb 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (generic-light).png
index 1207c8d4e165..a71289ea583a 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (material-blue-light).png
index ce72822c86dc..aef27c7e0472 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (fluent-blue-light).png
index 0dac2354768c..2bda32a8517e 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (generic-light).png
index 32ec7f6d6011..022bf51679c6 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (material-blue-light).png
index f3c5a9211746..b782d1c1b069 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with small image (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with small image (fluent-blue-light).png
index 2416e5cb0b72..b49819010149 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with small image (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with small image (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with small image (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with small image (generic-light).png
index 8de29ed25a99..e09f5d3fbf48 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with small image (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with small image (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with small image (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with small image (material-blue-light).png
index 595f12cc3468..2eebc781222d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with small image (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with small image (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (fluent-blue-light).png
index cf1ea10b0b2f..a9a3df1267ee 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (fluent-blue-light-compact).png
index 17b9f99a4ecd..aad7aa46ff9b 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (fluent-blue-light-compact).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (fluent-blue-light-compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (material-blue-light).png
index 7e80870c289c..69d7cf0465e4 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (material-blue-light-compact).png
index 8406f560cbc1..9c3524568612 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (material-blue-light-compact).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (material-blue-light-compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (fluent-blue-light).png
index 4f460b48b192..a947a6f67788 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (generic-light).png
index d24b2b1ea0ec..4009427eb8df 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (material-blue-light).png
index 5dbce79d808f..52e2a3e00c55 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (fluent-blue-light).png
index 644ef581df96..73eacf4d5c71 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (generic-light).png
index e7518d71bfd8..b1d6cc022dd6 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (material-blue-light).png
index 5acc8f2fd07e..8178c418b26c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (fluent-blue-light).png
index be3109b4b028..c9f25a00e6eb 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (generic-light).png
index bf8301c12bc2..55a540a8f8e9 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (material-blue-light).png
index 4fb55626afcc..0789b84ca42d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (fluent-blue-light).png
index 5d28dbe22ff5..35f4e1235190 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (generic-light).png
index 2618cee98c3c..f885dfce611d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (material-blue-light).png
index 1042783bd152..524a5205c49b 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (fluent-blue-light).png
index 91062a43ae20..e067d1d7bace 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (generic-light).png
index a0fd74c43a49..623258d15787 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (material-blue-light).png
index bc31ed640f71..ddf1eec773c9 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (fluent-blue-light).png
index 902ade46defb..f42737f8ffa0 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (generic-light).png
index 3bc25dc8941e..962cfd65aae9 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (material-blue-light).png
index 2853054bcb3e..71807d4eaa48 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with attach button (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with attach button (fluent-blue-light).png
new file mode 100644
index 000000000000..9676df3eb5ce
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with attach button (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with attach button (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with attach button (generic-light).png
new file mode 100644
index 000000000000..c1f8591bb11a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with attach button (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with attach button (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with attach button (material-blue-light).png
new file mode 100644
index 000000000000..5d1195516207
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with attach button (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (fluent-blue-light).png
index dea8b0840793..868b85637fa7 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (fluent-blue-light-compact).png
index 3b96590d7988..b0e0f3d1b55d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (fluent-blue-light-compact).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (fluent-blue-light-compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (generic-light).png
index 803b20068a8f..a476ffe2c059 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (generic-light-compact).png
index 4b71a51875b2..768cd48790e0 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (generic-light-compact).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (generic-light-compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (material-blue-light).png
index e4141a9aaaa6..4ef288df6161 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (material-blue-light-compact).png
index db95737ef766..2899bef8a50f 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (material-blue-light-compact).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (material-blue-light-compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (fluent-blue-light).png
index 73a567758365..40f9a7477493 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (generic-light).png
index 7b870f75cf08..ed491a17ba20 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (material-blue-light).png
index 3b5bcff1d7c3..a3b41c328c39 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (fluent-blue-light).png
index 360fec7b3c84..2b0cbd13a433 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (generic-light).png
index 27cc53a87d3a..388fc9f65f93 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (material-blue-light).png
index d7b69a9b8496..c16c47e3ebf2 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (fluent-blue-light).png
index f6fe4054823e..c82d3467b40c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (generic-light).png
index ef6ab5cec346..3c2cc0196681 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (material-blue-light).png
index f3b9d834d66e..77237bc39361 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (fluent-blue-light).png
index 0cb1227bcede..5f41fd16ac40 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (generic-light).png
index c971a0b75938..017dd52cd785 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (material-blue-light).png
index 7876dd5aecc1..0136fcb67548 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (fluent-blue-light).png
index fc62ed5e71c3..3e5c67ecff9a 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (generic-light).png
index 8f6a1375106d..66d795e9e184 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (material-blue-light).png
index ca75ebc5356a..803712c70429 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (fluent-blue-light).png
index 471ffaece086..64328d786cc5 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (generic-light).png
index c3bf18bd137c..e66aaad404fb 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (material-blue-light).png
index 824f51f91979..78b63b1556a9 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (fluent-blue-light).png
index ce5a1a14d541..a28f7ee8c9ef 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (generic-light).png
index af67b91816ea..d76863ab2a99 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (material-blue-light).png
index d91ac8359b63..0a131044cb5e 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (fluent-blue-light).png
index 925a38708a71..4fa39d50a527 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (generic-light).png
index a4f541b7772d..7a984b28b49b 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (material-blue-light).png
index 51e0af52329b..bcdbb6dd33f5 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (fluent-blue-light).png
index c31f0f49f597..68531ca98a65 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (generic-light).png
index a11b106bd714..b4b51ba4c77c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (material-blue-light).png
index 154e92ec5214..3693c1d0ad36 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (fluent-blue-light).png
index 710698c943f8..38e884fe523d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (generic-light).png
index 0f4fd3d08cf1..bf971c56a51c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (material-blue-light).png
index df6dd25e42b5..2fc48590d39d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist loadindicator position on initial loading (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist loadindicator position on initial loading (fluent-blue-light).png
index bb1880b3f9d8..a40610f2d5c6 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist loadindicator position on initial loading (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist loadindicator position on initial loading (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist loadindicator position on initial loading (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist loadindicator position on initial loading (generic-light).png
index 4d81d55d1aee..10356af5fc4c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist loadindicator position on initial loading (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist loadindicator position on initial loading (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist loadindicator position on initial loading (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist loadindicator position on initial loading (material-blue-light).png
index e59f79480c60..3c1fb4faa859 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist loadindicator position on initial loading (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist loadindicator position on initial loading (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (fluent-blue-light).png
index a0b1a6a84b1c..2e79361ddcaa 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (generic-light).png
index ea0e1fb70bfb..949d65963392 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (material-blue-light).png
index ebc46e1341b0..d7a4cccd432e 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (fluent-blue-light).png
index fbab406bb645..604dc431a5cf 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (generic-light).png
index 83e1b7a3909a..6f4fd70d321c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (material-blue-light).png
index 58d0203b77f4..c3c0ef294bac 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (fluent-blue-light).png
index 6f56f5d9a9d6..4f9c24c7fbd5 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (generic-light).png
index f6ed45c67c0f..d9a830d24d9f 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (material-blue-light).png
index 0d46232e179c..2a4b7dc6e8f8 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (fluent-blue-light).png
index f2e512112e59..81c71d58d40a 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (generic-light).png
index e9412976b8d8..499b6188abad 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (material-blue-light).png
index 89fe4252ebee..4f16effab579 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (fluent-blue-light).png
index bd824f924ab0..3ebd2284385c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (generic-light).png
index 9d92b161db0f..33e6ec3c0643 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (material-blue-light).png
index 99868ec585d0..92c0a8381a93 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (fluent-blue-light).png
index f82a629181ab..e1c4a0329b88 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (generic-light).png
index 4296c1ca7668..4569a9a7a6b1 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (material-blue-light).png
index 9a41956d045f..11d26415c645 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (fluent-blue-light).png
index 1a862f424c01..1586be63f9c1 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (generic-light).png
index 0fa80bd4e366..53aa85eb943d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (material-blue-light).png
index f5f92a222e14..e9dc8fec9cdb 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (fluent-blue-light).png
index b7ca9254c4fc..defde7d01158 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (generic-light).png
index 271e95919ff3..5146770b827c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (material-blue-light).png
index d0270cffebbb..1e279742c152 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (fluent-blue-light).png
index c8dd061bb37b..445ae3f1be48 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (generic-light).png
index 9d3f9aacfeff..a37edafc9317 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (material-blue-light).png
index fe37343643c5..fbccceefeba0 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (fluent-blue-light).png
index 6a38fec9f6db..3d01b24bc948 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (generic-light).png
index 5bef5a2dd9a7..51ebf2e6f51c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (material-blue-light).png
index e5fd3d40af20..166beaa78c17 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (fluent-blue-light).png
index a219f5d56fa7..d12aed8628c7 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (generic-light).png
index ec545e133f4c..26f58cd78945 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (material-blue-light).png
index 0de9313f5ed5..f730f1b3cdee 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (fluent-blue-light).png
index 6e6d3f8a7dcb..b7dc98cc42b5 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (generic-light).png
index 614daff3f846..26cec974c26d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (material-blue-light).png
index b2dba3fc5966..173412601776 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (fluent-blue-light).png
index d27e9032ee6f..52cd0159d107 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (generic-light).png
index 57b836bbd298..f96b06acbb5d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (material-blue-light).png
index 586b3e5878f0..18b084f32bc0 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (fluent-blue-light).png
index 102d1766ec0b..bf588b83f9ce 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (generic-light).png
index 66f8166837f3..a342ef36d51c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (material-blue-light).png
index eb751bf1f3ad..7e726d969031 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (fluent-blue-light).png
index eacb348f2c49..cae622d9caec 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (generic-light).png
index e48ab1659b69..f8a7968f873d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (material-blue-light).png
index 2260ac5bbff6..d6c5af6b0d9d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (fluent-blue-light).png
index 993bb816f35c..6a3f96e16587 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (generic-light).png
index 7af2f101ddf9..679bb097fd0a 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (material-blue-light).png
index 1d4d47dde71d..5d530da6c7e6 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (fluent-blue-light).png
index 11ad16bfaacd..4b0e5d208950 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (generic-light).png
index 739a6dbd1cdf..2783aa89fcaa 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (material-blue-light).png
index 6d3c08d83298..ac7f6673d338 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (fluent-blue-light).png
index 1fbe2685240a..1bc247774581 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (generic-light).png
index 682ffc0fc011..df1416e454b4 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (material-blue-light).png
index aacf3e028d77..b8fdad626dfe 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-blue-dark).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-blue-dark).png
index a31a64348bcd..e40f21136894 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-blue-dark).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-blue-dark).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-blue-light).png
index b41e41a23038..03b8b87fad6e 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-blue-light-compact).png
index 32f7bf350fab..6c5b59496f59 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-blue-light-compact).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-blue-light-compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (generic-dark).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (generic-dark).png
index 3d4f32a9ff2c..ea6305f80dc8 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (generic-dark).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (generic-dark).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (generic-light).png
index b9514a629a4d..8b571b3c1654 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (generic-light-compact).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (generic-light-compact).png
index 6fec45d781f1..a379158e4e19 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (generic-light-compact).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (generic-light-compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (material-blue-dark).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (material-blue-dark).png
index 2f10af1cab7b..f04852bce2e8 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (material-blue-dark).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (material-blue-dark).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (material-blue-light).png
index dd4b81065426..b00795ba243c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (material-blue-light-compact).png
index 85ea264dc96e..79d9a0043881 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (material-blue-light-compact).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (material-blue-light-compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (fluent-blue-light).png
index 0b25f2e129f9..fb1dbdf5e821 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (generic-light).png
index 980c8b6f4560..0721b52f605d 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (material-blue-light).png
index 790a7b988ac4..7ca59c13ae9a 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (fluent-blue-light).png
index 79af609e7e96..b1a886a8bc7e 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (fluent-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (generic-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (generic-light).png
index de2c4a4d58b5..7b7d11074b7e 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (generic-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (material-blue-light).png
index 83483803fd75..dcdbc4bdba68 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (material-blue-light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/messageBox.ts b/e2e/testcafe-devextreme/tests/editors/chat/messageBox.ts
index 27dc490b954e..22eac59f3804 100644
--- a/e2e/testcafe-devextreme/tests/editors/chat/messageBox.ts
+++ b/e2e/testcafe-devextreme/tests/editors/chat/messageBox.ts
@@ -81,3 +81,24 @@ test('Chat: messagebox with editing preview', async (t) => {
     height: 600,
   }, '#chat');
 });
+
+test('Chat: messagebox with attach button', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const chat = new Chat('#chat');
+
+  await chat.focus();
+  await testScreenshot(t, takeScreenshot, 'Messagebox with attach button.png', { element: '#chat' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat');
+
+  return createWidget('dxChat', {
+    width: 400,
+    height: 600,
+    fileUploaderOptions: {},
+  }, '#chat');
+});
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/messageList.ts b/e2e/testcafe-devextreme/tests/editors/chat/messageList.ts
index 672a31b15532..04b5df3d0849 100644
--- a/e2e/testcafe-devextreme/tests/editors/chat/messageList.ts
+++ b/e2e/testcafe-devextreme/tests/editors/chat/messageList.ts
@@ -34,7 +34,7 @@ test('Messagelist empty view scenarios', async (t) => {
 
   await chat.option({
     width: 200,
-    height: 200,
+    height: 400,
     disabled: false,
   });
 
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss
index 0d3cdfc11b62..66a8ddfb0fbc 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss
@@ -5,11 +5,28 @@
   border-top-style: solid;
 }
 
-.dx-chat-messagebox-input-container {
+.dx-chat-messagebox-textarea-container {
   display: flex;
   align-items: flex-end;
 }
 
-.dx-chat-messagebox-textarea {
+.dx-chat-messagebox-textarea.dx-textarea {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
+
+  &.dx-texteditor {
+    > .dx-texteditor-container {
+      .dx-texteditor-input,
+      .dx-placeholder::before {
+        padding: 0;
+      }
+    }
+  }
+}
+
+.dx-textarea-toolbar.dx-toolbar {
+  .dx-toolbar-items-container {
+    height: auto;
+  }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss
index c30b9d7db441..2180d1385f66 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss
@@ -1,27 +1,39 @@
 @mixin chat-messagebox(
-  $padding,
-  $border-color,
+  $messagebox-padding,
+  $messagebox-border-color,
   $gap,
   $textarea-border-radius,
-  $button-gap
+  $textarea-padding,
+  $toolbar-min-height
 ) {
   .dx-chat-messagebox {
-    padding: $padding;
-    border-top-color: $border-color;
-    gap: $padding;
+    padding: $messagebox-padding;
+    border-top-color: $messagebox-border-color;
+    gap: $messagebox-padding;
   }
 
-  .dx-chat-messagebox-input-container {
+  .dx-chat-messagebox-textarea-container {
     gap: $gap;
   }
 
-  .dx-chat-messagebox-textarea {
-    &.dx-textarea.dx-texteditor {
+  .dx-chat-messagebox-textarea.dx-textarea {
+    gap: $gap;
+    padding: $textarea-padding;
+
+    &.dx-texteditor {
       border-radius: $textarea-border-radius;
+
+      &.dx-editor-outlined::before {
+        height: $textarea-border-radius;
+        border-bottom-left-radius: $textarea-border-radius;
+        border-bottom-right-radius: $textarea-border-radius;
+      }
     }
   }
 
-  .dx-chat-messagebox-button {
-    margin-bottom: $button-gap;
+  .dx-textarea-toolbar.dx-toolbar {
+    .dx-toolbar-items-container {
+      min-height: $toolbar-min-height;
+    }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/textArea/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/textArea/_mixins.scss
index 49a7e5a90cf5..99a7eebae123 100644
--- a/packages/devextreme-scss/scss/widgets/base/textArea/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/textArea/_mixins.scss
@@ -8,7 +8,7 @@
   $underlined-top-padding,
 ) {
   .dx-textarea {
-    .dx-texteditor-input-container {
+    > .dx-texteditor-container > .dx-texteditor-input-container {
       margin: $input-container-margin;
     }
 
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
index 3cf4bd6722d7..bedb09bd1232 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -28,7 +28,8 @@
   $chat-messagebox-border-color,
   $chat-messagebox-gap,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-buton-gap,
+  $chat-messagebox-textarea-padding,
+  $chat-messagebox-toolbar-min-height,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
index d05a76c45ea2..897d932e173c 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
@@ -14,9 +14,10 @@ $chat-bubble-container-gap: 4px !default;
 $chat-bubble-delete-gap: null !default;
 $chat-bubble-delete-icon-size: null !default;
 $chat-messagebox-padding: null !default;
-$chat-messagebox-textarea-border-radius: $texteditor-input-border-radius !default;
+$chat-messagebox-textarea-padding: null !default;
+$chat-messagebox-textarea-border-radius: null !default;
+$chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
-$chat-messagebox-buton-gap: 2px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;
@@ -72,6 +73,9 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-bubble-delete-gap: 4px !default;
   $chat-bubble-delete-icon-size: 20px !default;
   $chat-messagebox-padding: 20px !default;
+  $chat-messagebox-textarea-border-radius: 8px !default;
+  $chat-messagebox-textarea-padding: 12px !default;
+  $chat-messagebox-toolbar-min-height: 32px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
@@ -105,6 +109,9 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-bubble-delete-gap: 2px !default;
   $chat-bubble-delete-icon-size: 16px !default;
   $chat-messagebox-padding: 16px !default;
+  $chat-messagebox-textarea-border-radius: 8px !default;
+  $chat-messagebox-textarea-padding: 8px !default;
+  $chat-messagebox-toolbar-min-height: 24px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
index 4a4bcfec6ed0..0dbd88af6663 100644
--- a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -31,7 +31,8 @@
   $chat-messagebox-border-color,
   $chat-messagebox-gap,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-buton-gap,
+  $chat-messagebox-textarea-padding,
+  $chat-messagebox-toolbar-min-height,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
index 49e169b67322..3bffe7c2b716 100644
--- a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
@@ -15,8 +15,9 @@ $chat-bubble-delete-gap: null !default;
 $chat-bubble-delete-icon-size: null !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-border-radius: $texteditor-input-border-radius !default;
+$chat-messagebox-textarea-padding: null !default;
+$chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
-$chat-messagebox-buton-gap: 0 !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;
@@ -70,6 +71,8 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-bubble-delete-gap: 4px !default;
   $chat-bubble-delete-icon-size: 18px !default;
   $chat-messagebox-padding: 20px !default;
+  $chat-messagebox-textarea-padding: 9px !default;
+  $chat-messagebox-toolbar-min-height: 36px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
@@ -102,6 +105,8 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-bubble-delete-gap: 2px !default;
   $chat-bubble-delete-icon-size: 14px !default;
   $chat-messagebox-padding: 16px !default;
+  $chat-messagebox-textarea-padding: 5px !default;
+  $chat-messagebox-toolbar-min-height: 26px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
index e28bc2675da5..83cf5243abc8 100644
--- a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -29,7 +29,8 @@
   $chat-messagebox-border-color,
   $chat-messagebox-gap,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-buton-gap,
+  $chat-messagebox-textarea-padding,
+  $chat-messagebox-toolbar-min-height,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
index 9bac74b4ab9c..c70493c7889d 100644
--- a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
@@ -13,7 +13,8 @@ $chat-bubble-delete-gap: null !default;
 $chat-bubble-delete-icon-size: null !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-border-radius: $base-border-radius * 2 !default;
-$chat-messagebox-buton-gap: null !default;
+$chat-messagebox-textarea-padding: null !default;
+$chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
@@ -64,12 +65,13 @@ $chat-confirmation-popup-toolbar-padding-inline: null !default;
 $chat-confirmation-popup-toolbar-gap: null !default;
 
 @if $size == "default" {
-  $chat-messagebox-buton-gap: 10px !default;
   $chat-bubble-border-radius: 8px !default;
   $chat-bubble-padding: 8px 16px !default;
   $chat-bubble-delete-gap: 4px !default;
   $chat-bubble-delete-icon-size: 20px !default;
   $chat-messagebox-padding: 20px !default;
+  $chat-messagebox-textarea-padding: 16px !default;
+  $chat-messagebox-toolbar-min-height: 36px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
@@ -100,12 +102,13 @@ $chat-confirmation-popup-toolbar-gap: null !default;
 }
 
 @else if $size == "compact" {
-  $chat-messagebox-buton-gap: 7px !default;
   $chat-bubble-border-radius: 4px !default;
   $chat-bubble-padding: 6px 8px !default;
   $chat-bubble-delete-gap: 2px !default;
   $chat-bubble-delete-icon-size: 16px !default;
   $chat-messagebox-padding: 16px !default;
+  $chat-messagebox-textarea-padding: 12px !default;
+  $chat-messagebox-toolbar-min-height: 28px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 
diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
index 9c13d2607d32..d1619885d425 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -15,10 +15,11 @@ import type {
   MessageEnteredEvent,
   MessageUpdatedEvent,
   MessageUpdatingEvent,
-  Properties,
+  Properties as PublicProperties,
   TypingEndEvent,
   TypingStartEvent,
 } from '@js/ui/chat';
+import type { Properties as FileUploaderProperties } from '@js/ui/file_uploader';
 import { invokeConditionally } from '@ts/core/utils/conditional_invoke';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
@@ -28,8 +29,8 @@ import type {
   MessageEnteredEvent as MessageBoxMessageEnteredEvent,
   Properties as MessageBoxProperties,
   TypingStartEvent as MessageBoxTypingStartEvent,
-} from '@ts/ui/chat/messagebox';
-import MessageBox from '@ts/ui/chat/messagebox';
+} from '@ts/ui/chat/message_box/message_box';
+import MessageBox from '@ts/ui/chat/message_box/message_box';
 import type {
   EmptyViewTemplate,
   MessageEditingEvent,
@@ -42,6 +43,10 @@ import type { DataChange } from '@ts/ui/collection/collection_widget.base';
 const CHAT_CLASS = 'dx-chat';
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
+type Properties = PublicProperties & {
+  fileUploaderOptions?: FileUploaderProperties;
+};
+
 class Chat extends Widget<Properties> {
   _messageBox!: MessageBox;
 
@@ -76,34 +81,35 @@ class Chat extends Widget<Properties> {
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
-      showDayHeaders: true,
       activeStateEnabled: true,
+      alerts: [],
+      dataSource: null,
+      dayHeaderFormat: 'shortdate',
       editing: {
         allowUpdating: false,
         allowDeleting: false,
       },
+      emptyViewTemplate: null,
+      fileUploaderOptions: undefined,
       focusStateEnabled: true,
       hoverStateEnabled: true,
       items: [],
-      dataSource: null,
-      user: { id: new Guid().toString() },
-      dayHeaderFormat: 'shortdate',
       messageTemplate: null,
       messageTimestampFormat: 'shorttime',
-      emptyViewTemplate: null,
-      alerts: [],
+      reloadOnChange: true,
       showAvatar: true,
-      showUserName: true,
+      showDayHeaders: true,
       showMessageTimestamp: true,
+      showUserName: true,
       typingUsers: [],
+      user: { id: new Guid().toString() },
+      onMessageDeleted: undefined,
+      onMessageDeleting: undefined,
+      onMessageEditCanceled: undefined,
+      onMessageEditingStart: undefined,
       onMessageEntered: undefined,
-      reloadOnChange: true,
-      onTypingStart: undefined,
       onTypingEnd: undefined,
-      onMessageEditingStart: undefined,
-      onMessageEditCanceled: undefined,
-      onMessageDeleting: undefined,
-      onMessageDeleted: undefined,
+      onTypingStart: undefined,
     };
   }
 
@@ -408,6 +414,7 @@ class Chat extends Widget<Properties> {
   _renderMessageBox(): void {
     const {
       activeStateEnabled,
+      fileUploaderOptions,
       focusStateEnabled,
       hoverStateEnabled,
     } = this.option();
@@ -418,6 +425,7 @@ class Chat extends Widget<Properties> {
 
     const configuration: MessageBoxProperties = {
       activeStateEnabled,
+      fileUploaderOptions,
       focusStateEnabled,
       hoverStateEnabled,
       onMessageEntered: (e) => {
@@ -570,6 +578,7 @@ class Chat extends Widget<Properties> {
       case 'activeStateEnabled':
       case 'focusStateEnabled':
       case 'hoverStateEnabled':
+      case 'fileUploaderOptions':
         this._messageBox.option(name, value);
         break;
       case 'user': {
diff --git a/packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts b/packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts
new file mode 100644
index 000000000000..aeb5335fc52f
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts
@@ -0,0 +1,275 @@
+import { normalizeKeyName } from '@js/common/core/events/utils/index';
+import messageLocalization from '@js/common/core/localization/message';
+import devices from '@js/core/devices';
+import type { DefaultOptionsRule } from '@js/core/options/utils';
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import { getOuterHeight } from '@js/core/utils/size';
+import type { DxEvent, NativeEventInfo } from '@js/events';
+import type {
+  ClickEvent,
+  InitializedEvent,
+} from '@js/ui/button';
+import type Button from '@js/ui/button';
+import type { Properties as FileUploaderProperties } 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 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 isMobile = (): boolean => devices.current().deviceType !== 'desktop';
+
+type EnterKeyEvent = NativeEventInfo<ChatTextArea, KeyboardEvent>;
+
+export type SendEvent = ClickEvent | EnterKeyEvent;
+
+export type Properties = TextAreaProperties & {
+  fileUploaderOptions?: FileUploaderProperties;
+
+  onSend?: (e: SendEvent) => void;
+};
+
+class ChatTextArea extends TextArea<Properties> {
+  _$toolbar?: dxElementWrapper | null;
+
+  _toolbar?: Toolbar | null;
+
+  _sendButton?: Button;
+
+  _sendAction?: (e: SendEvent) => void;
+
+  _getDefaultOptions(): Properties {
+    return {
+      ...super._getDefaultOptions(),
+      stylingMode: 'outlined',
+      placeholder: messageLocalization.format('dxChat-textareaPlaceholder'),
+      autoResizeEnabled: true,
+      valueChangeEvent: 'input',
+      maxHeight: '8em',
+      fileUploaderOptions: undefined,
+    };
+  }
+
+  _defaultOptionsRules(): DefaultOptionsRule<Properties>[] {
+    const rules = [
+      ...super._defaultOptionsRules(),
+      {
+        device: (): boolean => isMaterial(current()),
+        options: {
+          stylingMode: 'outlined' as const,
+        },
+      },
+    ];
+
+    return rules;
+  }
+
+  _supportedKeys(): SupportedKeys {
+    return {
+      ...super._supportedKeys(),
+      enter: (e: DxEvent<KeyboardEvent>): void => {
+        if (this._shouldSendMessageOnEnter(e)) {
+          e.preventDefault();
+        }
+      },
+    };
+  }
+
+  _enterKeyHandlerUp(e: DxEvent<KeyboardEvent>): void {
+    super._enterKeyHandlerUp(e);
+
+    if (normalizeKeyName(e) !== 'enter') {
+      return;
+    }
+
+    if (this._shouldSendMessageOnEnter(e)) {
+      this._processSendButtonActivation({
+        component: this,
+        element: this.element(),
+        event: e,
+      });
+    }
+  }
+
+  _init(): void {
+    super._init();
+
+    this._createSendAction();
+  }
+
+  _createSendAction(): void {
+    this._sendAction = this._createActionByOption(
+      'onSend',
+      { excludeValidators: ['disabled'] },
+    );
+  }
+
+  _initMarkup(): void {
+    super._initMarkup();
+    this._renderToolbar();
+  }
+
+  _renderToolbar(): void {
+    const toolbarItems = this._getToolbarItems();
+
+    const toolbarOptions = {
+      items: toolbarItems,
+    };
+
+    this._$toolbar = $('<div>')
+      .addClass(TEXT_AREA_TOOLBAR)
+      .appendTo(this.$element());
+
+    this._toolbar = this._createComponent(
+      this._$toolbar,
+      Toolbar,
+      toolbarOptions,
+    );
+  }
+
+  _getToolbarItems(): ToolbarItem[] {
+    const { fileUploaderOptions } = this.option();
+
+    const items = [
+      this._getSendButtonConfig(),
+    ];
+
+    if (fileUploaderOptions) {
+      items.push(this._getFileUploaderButtonConfig());
+    }
+
+    return items;
+  }
+
+  _getFileUploaderButtonConfig(): ToolbarItem {
+    const {
+      activeStateEnabled,
+      focusStateEnabled,
+      hoverStateEnabled,
+    } = this.option();
+
+    const configuration = {
+      widget: 'dxButton',
+      location: 'before',
+      options: {
+        activeStateEnabled,
+        focusStateEnabled,
+        hoverStateEnabled,
+        icon: 'attach',
+      },
+    } as ToolbarItem;
+
+    return configuration;
+  }
+
+  _getSendButtonConfig(): ToolbarItem {
+    const {
+      activeStateEnabled,
+      focusStateEnabled,
+      hoverStateEnabled,
+    } = this.option();
+
+    const configuration = {
+      widget: 'dxButton',
+      location: 'after',
+      options: {
+        activeStateEnabled,
+        focusStateEnabled,
+        hoverStateEnabled,
+        icon: 'arrowright',
+        type: 'default',
+        stylingMode: 'contained',
+        disabled: true,
+        elementAttr: {
+          'aria-label': messageLocalization.format('dxChat-sendButtonAriaLabel'),
+        },
+        onClick: (e: ClickEvent): void => {
+          this._processSendButtonActivation(e);
+        },
+        onInitialized: (e: InitializedEvent): void => {
+          this._sendButton = e.component;
+        },
+      },
+    } as ToolbarItem;
+
+    return configuration;
+  }
+
+  _toggleButtonDisableState(state: boolean): void {
+    this._sendButton?.option('disabled', state);
+  }
+
+  _renderButtonContainers(): void {}
+
+  _getHeightDifference($input: dxElementWrapper): number {
+    const superResult = super._getHeightDifference($input);
+    const toolbarHeight = getOuterHeight(this._$toolbar);
+    const sum: number = superResult + toolbarHeight;
+
+    return sum;
+  }
+
+  _keyPressHandler(e: InputEvent): void {
+    super._keyPressHandler(e);
+
+    const shouldButtonBeDisabled = !this._isValuableTextEntered();
+    this._toggleButtonDisableState(shouldButtonBeDisabled);
+  }
+
+  _processSendButtonActivation(e: SendEvent): void {
+    this._sendAction?.(e);
+    this.reset();
+    this._toggleButtonDisableState(true);
+  }
+
+  _shouldSendMessageOnEnter(e: DxEvent<KeyboardEvent>): boolean {
+    return !e?.shiftKey && this._isValuableTextEntered() && !isMobile();
+  }
+
+  _optionChanged(args: OptionChanged<Properties>): void {
+    const { name, value } = args;
+
+    switch (name) {
+      case 'activeStateEnabled':
+      case 'focusStateEnabled':
+      case 'hoverStateEnabled':
+        this._sendButton?.option(name, value);
+        break;
+
+      case 'text': {
+        const shouldButtonBeDisabled = !this._isValuableTextEntered();
+        this._toggleButtonDisableState(shouldButtonBeDisabled);
+        break;
+      }
+
+      case 'onSend':
+        this._createSendAction();
+        break;
+
+      case 'fileUploaderOptions':
+      default:
+        super._optionChanged(args);
+    }
+  }
+
+  _isValuableTextEntered(): boolean {
+    const { text } = this.option();
+
+    return Boolean(text?.trim());
+  }
+
+  _dispose(): void {
+    this._toolbar?.dispose();
+    this._$toolbar?.remove();
+    this._toolbar = null;
+    this._$toolbar = null;
+    super._dispose();
+  }
+}
+
+export default ChatTextArea;
diff --git a/packages/devextreme/js/__internal/ui/chat/editing_preview.ts b/packages/devextreme/js/__internal/ui/chat/message_box/editing_preview.ts
similarity index 100%
rename from packages/devextreme/js/__internal/ui/chat/editing_preview.ts
rename to packages/devextreme/js/__internal/ui/chat/message_box/editing_preview.ts
diff --git a/packages/devextreme/js/__internal/ui/chat/messagebox.ts b/packages/devextreme/js/__internal/ui/chat/message_box/message_box.ts
similarity index 67%
rename from packages/devextreme/js/__internal/ui/chat/messagebox.ts
rename to packages/devextreme/js/__internal/ui/chat/message_box/message_box.ts
index 270cd952dc53..446fa17a7f0f 100644
--- a/packages/devextreme/js/__internal/ui/chat/messagebox.ts
+++ b/packages/devextreme/js/__internal/ui/chat/message_box/message_box.ts
@@ -1,22 +1,21 @@
 import type { NativeEventInfo } from '@js/common/core/events';
-import messageLocalization from '@js/common/core/localization/message';
-import devices from '@js/core/devices';
 import $, { type dxElementWrapper } from '@js/core/renderer';
 import type { InteractionEvent } from '@js/events';
-import type { ClickEvent, Properties as ButtonProperties } from '@js/ui/button';
-import Button from '@js/ui/button';
+import type { Properties as FileUploaderProperties } from '@js/ui/file_uploader';
+import type { InputEvent } from '@js/ui/text_area';
 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 EditingPreview from '@ts/ui/chat/editing_preview';
-import TextArea from '@ts/ui/m_text_area';
-
-import type { EnterKeyEvent, InputEvent } from '../../../ui/text_area';
+import type {
+  Properties as ChatTextAreaProperties,
+  SendEvent,
+} from '@ts/ui/chat/message_box/chat_text_area';
+import ChatTextArea from '@ts/ui/chat/message_box/chat_text_area';
+import EditingPreview from '@ts/ui/chat/message_box/editing_preview';
 
 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';
 
 export const TYPING_END_DELAY = 2000;
 const ESCAPE_KEY = 'escape';
@@ -27,8 +26,6 @@ export type MessageEnteredEvent =
 
 export type TypingStartEvent = NativeEventInfo<MessageBox, UIEvent & { target: HTMLInputElement }>;
 
-const isMobile = (): boolean => devices.current().deviceType !== 'desktop';
-
 export interface Properties extends DOMComponentProperties<MessageBox> {
   activeStateEnabled?: boolean;
 
@@ -36,6 +33,10 @@ export interface Properties extends DOMComponentProperties<MessageBox> {
 
   hoverStateEnabled?: boolean;
 
+  fileUploaderOptions?: FileUploaderProperties;
+
+  text?: string;
+
   onMessageEntered?: (e: MessageEnteredEvent) => void;
 
   onTypingStart?: (e: TypingStartEvent) => void;
@@ -45,14 +46,10 @@ export interface Properties extends DOMComponentProperties<MessageBox> {
   onMessageEditCanceled?: () => void;
 
   onMessageUpdating?: (e: { text: string }) => void;
-
-  text?: string;
 }
 
 class MessageBox extends DOMComponent<MessageBox, Properties> {
-  _textArea!: TextArea;
-
-  _button!: Button;
+  _textArea!: ChatTextArea;
 
   _editingPreview!: EditingPreview | null;
 
@@ -71,12 +68,13 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       activeStateEnabled: true,
       focusStateEnabled: true,
       hoverStateEnabled: true,
+      fileUploaderOptions: undefined,
+      text: '',
       onMessageEntered: undefined,
-      onTypingStart: undefined,
-      onTypingEnd: undefined,
       onMessageEditCanceled: undefined,
       onMessageUpdating: undefined,
-      text: '',
+      onTypingStart: undefined,
+      onTypingEnd: undefined,
     };
   }
 
@@ -97,16 +95,15 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       this._renderEditingPreview();
     }
 
-    this._renderInputContainer();
+    this._renderTextAreaContainer();
   }
 
-  _renderInputContainer(): void {
-    const $messageBox = $('<div>')
-      .addClass(CHAT_MESSAGEBOX_INPUT_CONTAINER_CLASS)
+  _renderTextAreaContainer(): void {
+    const $inputContainer = $('<div>')
+      .addClass(CHAT_MESSAGEBOX_TEXTAREA_CONTAINER_CLASS)
       .appendTo(this.element());
 
-    this._renderTextArea($messageBox);
-    this._renderButton($messageBox);
+    this._renderTextArea($inputContainer);
   }
 
   _cancelMessageEdit(): void {
@@ -136,49 +133,16 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
   }
 
   _renderTextArea($parent: dxElementWrapper): void {
-    const {
-      activeStateEnabled,
-      focusStateEnabled,
-      hoverStateEnabled,
-    } = this.option();
-
     const $textArea = $('<div>').addClass(CHAT_MESSAGEBOX_TEXTAREA_CLASS);
+    const textAreaOptions = this._getTextAreaOptions();
 
     $parent.append($textArea);
 
-    this._textArea = this._createComponent($textArea, TextArea, {
-      activeStateEnabled,
-      focusStateEnabled,
-      hoverStateEnabled,
-      stylingMode: 'outlined',
-      placeholder: messageLocalization.format('dxChat-textareaPlaceholder'),
-      autoResizeEnabled: true,
-      valueChangeEvent: 'input',
-      maxHeight: '8em',
-      onInput: (e: InputEvent): void => {
-        const shouldButtonBeDisabled = !this._isValuableTextEntered();
-
-        this._toggleButtonDisableState(shouldButtonBeDisabled);
-
-        this._triggerTypingStartAction(e);
-        this._updateTypingEndTimeout();
-      },
-      onEnterKey: (e: EnterKeyEvent): void => {
-        if (isMobile()) {
-          return;
-        }
-
-        if (!e.event?.shiftKey) {
-          this._sendHandler(e);
-        }
-      },
-    });
-
-    this._textArea.registerKeyHandler('enter', (event: KeyboardEvent) => {
-      if (!event.shiftKey && this._isValuableTextEntered() && !isMobile()) {
-        event.preventDefault();
-      }
-    });
+    this._textArea = this._createComponent(
+      $textArea,
+      ChatTextArea,
+      textAreaOptions,
+    );
 
     this._textArea.registerKeyHandler(ESCAPE_KEY, () => {
       if (this.option('text')) {
@@ -187,30 +151,31 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
     });
   }
 
-  _renderButton($parent: dxElementWrapper): void {
+  _getTextAreaOptions(): ChatTextAreaProperties {
     const {
       activeStateEnabled,
+      fileUploaderOptions,
       focusStateEnabled,
       hoverStateEnabled,
+      text,
     } = this.option();
 
-    const $button = $('<div>').addClass(CHAT_MESSAGEBOX_BUTTON_CLASS);
-
-    $parent.append($button);
-
-    this._button = this._createComponent<Button, ButtonProperties>($button, Button, {
+    const options = {
       activeStateEnabled,
+      fileUploaderOptions,
       focusStateEnabled,
       hoverStateEnabled,
-      icon: 'sendfilled',
-      type: 'default',
-      stylingMode: 'text',
-      disabled: true,
-      elementAttr: { 'aria-label': messageLocalization.format('dxChat-sendButtonAriaLabel') },
-      onClick: (e): void => {
+      value: text,
+      onInput: (e: InputEvent): void => {
+        this._triggerTypingStartAction(e);
+        this._updateTypingEndTimeout();
+      },
+      onSend: (e: SendEvent): void => {
         this._sendHandler(e);
       },
-    });
+    };
+
+    return options as ChatTextAreaProperties;
   }
 
   _createMessageEnteredAction(): void {
@@ -257,16 +222,11 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
     this._typingEndTimeoutId = undefined;
   }
 
-  _sendHandler(e: ClickEvent | EnterKeyEvent): void {
-    if (!this._isValuableTextEntered()) {
-      return;
-    }
-
+  _sendHandler(e: SendEvent): void {
     this._clearTypingEndTimeout();
     this._typingEndAction?.();
 
     const { text = '' } = this._textArea.option();
-
     const { text: previewText } = this.option();
 
     if (previewText) {
@@ -277,51 +237,41 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       return;
     }
 
-    this._textArea.reset();
-    this._toggleButtonDisableState(true);
-
     this._messageEnteredAction?.({ text, event: e.event });
   }
 
-  _toggleButtonDisableState(state: boolean): void {
-    this._button.option('disabled', state);
-  }
-
-  _isValuableTextEntered(): boolean {
-    const { text } = this._textArea.option();
-
-    return !!text?.trim();
-  }
-
   _optionChanged(args: OptionChanged<Properties>): void {
     const { name, value } = args;
 
     switch (name) {
       case 'activeStateEnabled':
       case 'focusStateEnabled':
-      case 'hoverStateEnabled': {
-        this._button.option(name, value);
+      case 'hoverStateEnabled':
         this._textArea.option(name, value);
         this._editingPreview?.option(name, value);
         break;
-      }
+
+      case 'fileUploaderOptions':
+        this._textArea.option(name, value);
+        break;
+
       case 'onMessageEntered':
         this._createMessageEnteredAction();
-
         break;
+
       case 'onTypingStart':
         this._createTypingStartAction();
-
         break;
+
       case 'onTypingEnd':
         this._createTypingEndAction();
-
         break;
+
       case 'text':
         this._updateEditingPreview(value);
-        this._updateInputContainer(value);
-
+        this._textArea.option('value', value);
         break;
+
       default:
         super._optionChanged(args);
     }
@@ -352,14 +302,6 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       this._renderEditingPreview();
     }
   }
-
-  _updateInputContainer(value: string | undefined): void {
-    this._textArea.option('value', value);
-
-    const shouldButtonBeDisabled = !this._isValuableTextEntered();
-
-    this._toggleButtonDisableState(shouldButtonBeDisabled);
-  }
 }
 
 export default MessageBox;
diff --git a/packages/devextreme/js/__internal/ui/m_text_area.ts b/packages/devextreme/js/__internal/ui/m_text_area.ts
index 9e8562998887..2b104bb9e8f6 100644
--- a/packages/devextreme/js/__internal/ui/m_text_area.ts
+++ b/packages/devextreme/js/__internal/ui/m_text_area.ts
@@ -27,10 +27,12 @@ export interface TextAreaProperties extends Omit<Properties,
   _shouldAttachKeyboardEvents?: boolean;
 }
 
-class TextArea extends TextBox<TextAreaProperties> {
+class TextArea<
+  TProperties extends TextAreaProperties = TextAreaProperties,
+> extends TextBox<TProperties> {
   _eventY!: number;
 
-  _getDefaultOptions(): TextAreaProperties {
+  _getDefaultOptions(): TProperties {
     return {
       ...super._getDefaultOptions(),
       spellcheck: true,
@@ -146,10 +148,23 @@ class TextArea extends TextBox<TextAreaProperties> {
   }
 
   _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 {
@@ -198,12 +213,20 @@ class TextArea extends TextBox<TextAreaProperties> {
     }
   }
 
-  _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 {}
@@ -228,7 +251,7 @@ class TextArea extends TextBox<TextAreaProperties> {
     }
   }
 
-  _optionChanged(args: OptionChanged<TextAreaProperties>): void {
+  _optionChanged(args: OptionChanged<TProperties>): void {
     const { name, value } = args;
 
     switch (name) {
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
index 37bd30a743cc..b8f32a81c6ff 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.markup.tests.js
@@ -16,4 +16,5 @@ import './chatParts/messageList.markup.tests.js';
 import './chatParts/alertList.markup.tests.js';
 import './chatParts/typingIndicator.markup.tests.js';
 import './chatParts/editingPreview.markup.tests.js';
+import './chatParts/chatTextArea.markup.tests.js';
 import './chatParts/chat.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
index 6bcfab7c26da..67066b2beab3 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.tests.js
@@ -16,4 +16,5 @@ import './chatParts/messageList.tests.js';
 import './chatParts/alertList.tests.js';
 import './chatParts/typingIndicator.tests.js';
 import './chatParts/editingPreview.tests.js';
+import './chatParts/chatTextArea.tests.js';
 import './chatParts/chat.tests.js';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js
index ca7d52fba489..87cf1b3ce625 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js
@@ -15,9 +15,8 @@ import AlertList from '__internal/ui/chat/alertlist';
 import MessageBox, {
     TYPING_END_DELAY,
     CHAT_MESSAGEBOX_CLASS,
-    CHAT_MESSAGEBOX_BUTTON_CLASS,
     CHAT_MESSAGEBOX_TEXTAREA_CLASS,
-} from '__internal/ui/chat/messagebox';
+} from '__internal/ui/chat/message_box/message_box';
 import keyboardMock from '../../../helpers/keyboardMock.js';
 import pointerMock from '../../../helpers/pointerMock.js';
 import { DataSource } from 'common/data/data_source/data_source';
@@ -33,12 +32,13 @@ import ArrayStore from 'common/data/array_store';
 import {
     CHAT_EDITING_PREVIEW_CLASS,
     CHAT_EDITING_PREVIEW_CANCEL_BUTTON_CLASS,
-} from '__internal/ui/chat/editing_preview';
+} from '__internal/ui/chat/message_box/editing_preview';
 import { CHAT_CONFIRMATION_POPUP_WRAPPER_CLASS } from '__internal/ui/chat/confirmationpopup';
 import { POPUP_CLASS } from '__internal/ui/popup/m_popup';
 import { BUTTON_CLASS } from '__internal/ui/button/button';
 import { shouldSkipOnMobile } from '../../../helpers/device.js';
 import MessageBubble from '__internal/ui/chat/messagebubble';
+import ChatTextArea from '__internal/ui/chat/message_box/chat_text_area';
 
 const CHAT_MESSAGEGROUP_CLASS = 'dx-chat-messagegroup';
 const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist';
@@ -96,12 +96,11 @@ const moduleConfig = {
 
             this.instance = new Chat($('#component'), options);
             this.$element = $(this.instance.$element());
-
             this.$textArea = this.$element.find(`.${CHAT_MESSAGEBOX_TEXTAREA_CLASS}`);
-            this.textArea = this.$textArea.dxTextArea('instance');
+            this.textArea = ChatTextArea.getInstance(this.$textArea);
             this.$input = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
-
-            this.$sendButton = this.$element.find(`.${CHAT_MESSAGEBOX_BUTTON_CLASS}`);
+            const $buttons = this.$element.find(`.${BUTTON_CLASS}`);
+            this.$sendButton = $($buttons[$buttons.length - 1]);
         };
 
         this.reinit = (options) => {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chatTextArea.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chatTextArea.markup.tests.js
new file mode 100644
index 000000000000..e59f335f6c35
--- /dev/null
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chatTextArea.markup.tests.js
@@ -0,0 +1,105 @@
+import $ from 'jquery';
+import ChatTextArea, {
+    TEXT_AREA_TOOLBAR,
+} from '__internal/ui/chat/message_box/chat_text_area';
+
+const BUTTON_CLASS = 'dx-button';
+const TOOLBAR_CLASS = 'dx-toolbar';
+const TOOLBAR_BEFORE_CONTAINER_CLASS = 'dx-toolbar-before';
+const TOOLBAR_AFTER_CONTAINER_CLASS = 'dx-toolbar-after';
+
+const moduleConfig = {
+    beforeEach: function() {
+        const init = (options = {}) => {
+            this.instance = new ChatTextArea($('#component'), options);
+            this.$element = $(this.instance.$element());
+        };
+
+        this.reinit = (options) => {
+            this.instance.dispose();
+            init(options);
+        };
+
+        init();
+    }
+};
+
+QUnit.module('ChatTextArea', moduleConfig, () => {
+    QUnit.module('Classes', () => {
+        QUnit.test('toolbar should be rendered', function(assert) {
+            const $toolbar = this.$element.find(`.${TEXT_AREA_TOOLBAR}`);
+
+            assert.strictEqual($toolbar.length, 1, 'toolbar element exists');
+            assert.strictEqual($toolbar.hasClass(TOOLBAR_CLASS), true, 'toolbar has correct class');
+        });
+    });
+
+    QUnit.module('Toolbar buttons', () => {
+        QUnit.test('send button should be rendered by default', function(assert) {
+            const $toolbar = this.$element.find(`.${TEXT_AREA_TOOLBAR}`);
+            const $afterContainer = $toolbar.find(`.${TOOLBAR_AFTER_CONTAINER_CLASS}`);
+            const $sendButton = $afterContainer.find(`.${BUTTON_CLASS}`);
+
+            assert.strictEqual($sendButton.length, 1, 'send button exists');
+        });
+
+        QUnit.test('file uploader button should not be rendered by default', function(assert) {
+            const $toolbar = this.$element.find(`.${TEXT_AREA_TOOLBAR}`);
+            const $beforeContainer = $toolbar.find(`.${TOOLBAR_BEFORE_CONTAINER_CLASS}`);
+            const $buttons = $beforeContainer.find(`.${BUTTON_CLASS}`);
+
+            assert.strictEqual($buttons.length, 0, 'no buttons in before container');
+        });
+
+        QUnit.test('file uploader button should be rendered when fileUploaderOptions is set', function(assert) {
+            this.reinit({
+                fileUploaderOptions: {}
+            });
+
+            const $toolbar = this.$element.find(`.${TEXT_AREA_TOOLBAR}`);
+            const $beforeContainer = $toolbar.find(`.${TOOLBAR_BEFORE_CONTAINER_CLASS}`);
+            const $fileButton = $beforeContainer.find(`.${BUTTON_CLASS}`);
+
+            assert.strictEqual($fileButton.length, 1, 'file uploader button exists');
+        });
+
+        QUnit.test('buttons should be in correct containers', function(assert) {
+            this.reinit({
+                fileUploaderOptions: {}
+            });
+
+            const $toolbar = this.$element.find(`.${TEXT_AREA_TOOLBAR}`);
+            const $beforeContainer = $toolbar.find(`.${TOOLBAR_BEFORE_CONTAINER_CLASS}`);
+            const $afterContainer = $toolbar.find(`.${TOOLBAR_AFTER_CONTAINER_CLASS}`);
+
+            assert.strictEqual($beforeContainer.find(`.${BUTTON_CLASS}`).length, 1, 'one button in before container');
+            assert.strictEqual($afterContainer.find(`.${BUTTON_CLASS}`).length, 1, 'one button in after container');
+        });
+    });
+
+    QUnit.module('Accessibility', () => {
+        QUnit.test('send button should have correct aria-label', function(assert) {
+            const $toolbar = this.$element.find(`.${TEXT_AREA_TOOLBAR}`);
+            const $sendButton = $toolbar.find(`.${TOOLBAR_AFTER_CONTAINER_CLASS} .${BUTTON_CLASS}`);
+
+            assert.strictEqual($sendButton.attr('aria-label'), 'Send', 'send button has correct aria-label');
+        });
+    });
+
+    QUnit.module('DOM structure', () => {
+        QUnit.test('component should have correct DOM hierarchy', function(assert) {
+            const $toolbar = this.$element.find(`.${TEXT_AREA_TOOLBAR}`);
+
+            assert.ok($toolbar.length > 0, 'toolbar is present');
+            assert.ok($toolbar.parent().is(this.$element), 'toolbar is direct child of root element');
+        });
+
+        QUnit.test('toolbar should be appended after textarea elements', function(assert) {
+            const $toolbar = this.$element.find(`.${TEXT_AREA_TOOLBAR}`);
+            const $children = this.$element.children();
+            const toolbarIndex = $children.index($toolbar);
+
+            assert.strictEqual(toolbarIndex, $children.length - 1, 'toolbar is the last child element');
+        });
+    });
+});
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chatTextArea.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chatTextArea.tests.js
new file mode 100644
index 000000000000..a0f7a4f6ed36
--- /dev/null
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chatTextArea.tests.js
@@ -0,0 +1,399 @@
+import $ from 'jquery';
+import keyboardMock from '../../../helpers/keyboardMock.js';
+import { isRenderer } from 'core/utils/type';
+import config from 'core/config';
+
+import ChatTextArea from '__internal/ui/chat/message_box/chat_text_area';
+import Button from 'ui/button';
+import { BUTTON_CLASS } from '__internal/ui/button/button';
+import { shouldSkipOnDesktop, shouldSkipOnMobile } from '../../../helpers/device.js';
+
+const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
+
+const moduleConfig = {
+    beforeEach: function() {
+        const init = (options = {}) => {
+            this.instance = new ChatTextArea($('#component'), options);
+            this.$element = $(this.instance.$element());
+            this.$input = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
+
+            const $buttons = this.$element.find(`.${BUTTON_CLASS}`);
+            this.$sendButton = $($buttons[$buttons.length - 1]);
+            this.sendButton = Button.getInstance(this.$sendButton);
+        };
+
+        this.reinit = (options) => {
+            this.instance.dispose();
+            init(options);
+        };
+
+        init();
+    }
+};
+
+QUnit.module('ChatTextArea', moduleConfig, () => {
+    QUnit.module('Render', () => {
+        QUnit.test('should be initialized with correct type', function(assert) {
+            assert.ok(this.instance instanceof ChatTextArea);
+        });
+
+        QUnit.test('send button should be initialized with the corresponding configuration', function(assert) {
+            const expectedOptions = {
+                icon: 'arrowright',
+                type: 'default',
+                stylingMode: 'contained',
+                disabled: true,
+            };
+
+            Object.entries(expectedOptions).forEach(([key, value]) => {
+                assert.deepEqual(this.sendButton.option(key), value, `${key} value is correct`);
+            });
+        });
+
+        QUnit.test('should have correct default options', function(assert) {
+            const expectedOptions = {
+                stylingMode: 'outlined',
+                placeholder: 'Type a message',
+                autoResizeEnabled: true,
+                maxHeight: '8em',
+                valueChangeEvent: 'input'
+            };
+
+            Object.entries(expectedOptions).forEach(([key, value]) => {
+                assert.deepEqual(this.instance.option(key), value, `${key} value is correct`);
+            });
+        });
+    });
+
+    QUnit.module('Behavior', () => {
+        QUnit.test('textarea should be cleared after clicking the send button', function(assert) {
+            const text = 'new text message';
+
+            keyboardMock(this.$input)
+                .focus()
+                .type(text);
+
+            this.$sendButton.trigger('dxclick');
+
+            assert.strictEqual(this.$input.val(), '');
+        });
+
+        QUnit.test('textarea should not be cleared when the send button is clicked if the input contains only spaces', function(assert) {
+            const emptyValue = '    ';
+
+            keyboardMock(this.$input)
+                .focus()
+                .type(emptyValue);
+
+            this.$sendButton.trigger('dxclick');
+
+            assert.strictEqual(this.$input.val(), emptyValue);
+        });
+
+        QUnit.test('send button should be enabled after entering any character', function(assert) {
+            keyboardMock(this.$input)
+                .focus()
+                .type('i');
+
+            const { disabled } = this.sendButton.option();
+
+            assert.strictEqual(disabled, false);
+        });
+
+        QUnit.test('send button should be disabled after entering any character and clicking the button', function(assert) {
+            keyboardMock(this.$input)
+                .focus()
+                .type('i');
+
+            this.$sendButton.trigger('dxclick');
+
+            const { disabled } = this.sendButton.option();
+
+            assert.strictEqual(disabled, true);
+        });
+
+        QUnit.test('send button should be disabled after entering only spaces', function(assert) {
+            const emptyValue = '    ';
+
+            keyboardMock(this.$input)
+                .focus()
+                .type(emptyValue);
+
+            const { disabled } = this.sendButton.option();
+
+            assert.strictEqual(disabled, true);
+        });
+
+        QUnit.test('send button should be disabled after entering only line breaks', function(assert) {
+            const lineBreakValue = '\n';
+
+            keyboardMock(this.$input)
+                .focus()
+                .type(lineBreakValue);
+
+            const { disabled } = this.sendButton.option();
+
+            assert.strictEqual(disabled, true);
+        });
+
+        QUnit.test('send button should be disabled after entering character and removing it', function(assert) {
+            keyboardMock(this.$input)
+                .focus()
+                .type('i')
+                .press('backspace');
+
+            const { disabled } = this.sendButton.option();
+
+            assert.strictEqual(disabled, true);
+        });
+    });
+
+    QUnit.module('onSend event', () => {
+        QUnit.test('should be fired when send button is clicked with valid text', function(assert) {
+            const onSendStub = sinon.stub();
+
+            this.reinit({ onSend: onSendStub });
+
+            keyboardMock(this.$input)
+                .focus()
+                .type('new text message');
+
+            this.$sendButton.trigger('dxclick');
+
+            assert.strictEqual(onSendStub.callCount, 1);
+        });
+
+        QUnit.test('should be fired on enter key if textarea contains valid text', function(assert) {
+            if(shouldSkipOnMobile(assert)) {
+                return;
+            }
+
+            const onSendStub = sinon.stub();
+
+            this.reinit({ onSend: onSendStub });
+
+            keyboardMock(this.$input)
+                .focus()
+                .type('new text message')
+                .keyDown('enter')
+                .keyUp('enter');
+
+            assert.strictEqual(onSendStub.callCount, 1);
+        });
+
+        QUnit.test('should not be fired when send button is clicked if textarea is empty', function(assert) {
+            const onSendStub = sinon.stub();
+
+            this.reinit({ onSend: onSendStub });
+
+            this.$sendButton.trigger('dxclick');
+
+            assert.strictEqual(onSendStub.callCount, 0);
+        });
+
+        QUnit.test('should not be fired on enter key if textarea contains only spaces', function(assert) {
+            if(shouldSkipOnMobile(assert)) {
+                return;
+            }
+
+            const onSendStub = sinon.stub();
+
+            this.reinit({ onSend: onSendStub });
+
+            keyboardMock(this.$input)
+                .focus()
+                .type('   ')
+                .keyDown('enter')
+                .keyUp('enter');
+
+            assert.strictEqual(onSendStub.callCount, 0);
+        });
+
+        QUnit.test('should be possible to update it at runtime', function(assert) {
+            const onSendStub = sinon.stub();
+
+            this.instance.option('onSend', onSendStub);
+
+            keyboardMock(this.$input)
+                .focus()
+                .type('new text message');
+
+            this.$sendButton.trigger('dxclick');
+
+            assert.strictEqual(onSendStub.callCount, 1);
+        });
+
+        QUnit.test('should be fired with correct arguments on button click', function(assert) {
+            assert.expect(4);
+
+            const text = 'new text message';
+
+            this.reinit({
+                onSend: (e) => {
+                    const { component, element, event } = e;
+
+                    assert.strictEqual(component, this.instance, 'component is correct');
+                    assert.strictEqual(isRenderer(element), !!config().useJQuery, 'element is renderer');
+                    assert.strictEqual($(element).is(this.$element), true, 'element is correct');
+                    assert.strictEqual(event.type, 'dxclick', 'event.type is correct');
+                },
+            });
+
+            keyboardMock(this.$input).focus().type(text);
+            this.$sendButton.trigger('dxclick');
+        });
+
+        QUnit.test('should be fired with correct arguments on enter key', function(assert) {
+            if(shouldSkipOnMobile(assert)) {
+                return;
+            }
+
+            assert.expect(5);
+
+            const text = 'new text message';
+
+            this.reinit({
+                onSend: (e) => {
+                    const { component, element, event } = e;
+
+                    assert.strictEqual(component, this.instance, 'component is correct');
+                    assert.strictEqual(isRenderer(element), !!config().useJQuery, 'element is renderer');
+                    assert.strictEqual($(element).is(this.$element), true, 'element is correct');
+                    assert.strictEqual(event.type, 'keyup', 'event.type is correct');
+                    assert.strictEqual(event.target, this.$input.get(0), 'event.target is correct');
+                },
+            });
+
+            keyboardMock(this.$input)
+                .focus()
+                .type(text)
+                .keyDown('enter')
+                .keyUp('enter');
+        });
+
+        QUnit.test('should not send message on enter key on mobile devices', function(assert) {
+            if(shouldSkipOnDesktop(assert)) {
+                return;
+            }
+
+            const onSendStub = sinon.stub();
+
+            this.reinit({ onSend: onSendStub });
+
+            keyboardMock(this.$input)
+                .focus()
+                .type('new text message')
+                .keyDown('enter')
+                .keyUp('enter');
+
+            assert.strictEqual(onSendStub.callCount, 0);
+        });
+    });
+
+    QUnit.module('Keyboard navigation', () => {
+        QUnit.test('textarea should not be cleared on enter if text contains only spaces', function(assert) {
+            keyboardMock(this.$input)
+                .focus()
+                .type('   ')
+                .keyDown('enter')
+                .keyUp('enter');
+
+            assert.strictEqual(this.$input.val(), '   ');
+        });
+
+        QUnit.test('textarea should be cleared on enter when valid text is entered', function(assert) {
+            if(shouldSkipOnMobile(assert)) {
+                return;
+            }
+
+            keyboardMock(this.$input)
+                .focus()
+                .type('some text')
+                .keyDown('enter')
+                .keyUp('enter');
+
+            assert.strictEqual(this.$input.val(), '');
+        });
+
+        QUnit.test('enter keydown should be prevented if input has non-space characters', function(assert) {
+            if(shouldSkipOnMobile(assert)) {
+                return;
+            }
+
+            const enterKeyDownEvent = $.Event('keydown', { key: 'enter' });
+
+            keyboardMock(this.$input).type('1');
+
+            this.$input.trigger(enterKeyDownEvent);
+
+            assert.ok(enterKeyDownEvent.isDefaultPrevented(), 'default is prevented');
+        });
+
+        QUnit.test('enter keydown with Shift should not be prevented', function(assert) {
+            const enterKeyDownEvent = $.Event('keydown', { key: 'enter', shiftKey: true });
+
+            keyboardMock(this.$input).focus().type('1');
+
+            this.$input.trigger(enterKeyDownEvent);
+
+            assert.notOk(enterKeyDownEvent.isDefaultPrevented(), 'default is not prevented');
+        });
+
+        QUnit.test('enter keydown should not be prevented if text has only spaces', function(assert) {
+            const enterKeyDownEvent = $.Event('keydown', { key: 'enter' });
+
+            keyboardMock(this.$input).type('  \n  \n');
+
+            this.$input.trigger(enterKeyDownEvent);
+
+            assert.notOk(enterKeyDownEvent.isDefaultPrevented(), 'default is not prevented');
+        });
+
+        QUnit.test('textarea should restore height after enter with multiline text', function(assert) {
+            if(shouldSkipOnMobile(assert)) {
+                return;
+            }
+
+            const initialHeight = this.$element.height();
+
+            keyboardMock(this.$input)
+                .type('1\n2\n3')
+                .keyDown('enter')
+                .keyUp('enter');
+
+            assert.roughEqual(this.$element.height(), initialHeight, 0.1, 'height is restored');
+        });
+    });
+
+    QUnit.module('Proxy state options', () => {
+        [true, false].forEach(value => {
+            QUnit.test('passed state options should be equal chat textarea state options', function(assert) {
+                const options = {
+                    activeStateEnabled: value,
+                    focusStateEnabled: value,
+                    hoverStateEnabled: value,
+                };
+
+                this.reinit(options);
+
+                Object.entries(options).forEach(([key, value]) => {
+                    assert.deepEqual(value, this.sendButton.option(key), `button ${key} value is correct`);
+                });
+            });
+
+            QUnit.test('passed state options should be updated when state options are changed in runtime', function(assert) {
+                const options = {
+                    activeStateEnabled: value,
+                    focusStateEnabled: value,
+                    hoverStateEnabled: value,
+                };
+
+                this.instance.option(options);
+
+                Object.entries(options).forEach(([key, value]) => {
+                    assert.deepEqual(value, this.sendButton.option(key), `button ${key} value is correct`);
+                });
+            });
+        });
+    });
+});
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/editingPreview.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/editingPreview.markup.tests.js
index c91a4bacac4c..b57ddc8f8e8d 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/editingPreview.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/editingPreview.markup.tests.js
@@ -7,7 +7,7 @@ import EditingPreview, {
     CHAT_EDITING_PREVIEW_CAPTION_CLASS,
     CHAT_EDITING_PREVIEW_TEXT_CLASS,
     CHAT_EDITING_PREVIEW_CANCEL_BUTTON_CLASS,
-} from '__internal/ui/chat/editing_preview';
+} from '__internal/ui/chat/message_box/editing_preview';
 import { BUTTON_CLASS } from '__internal/ui/button/button';
 
 const ANIMATION_TIMEOUT = 300;
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/editingPreview.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/editingPreview.tests.js
index 46b155513ee1..04b2eb49bdd2 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/editingPreview.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/editingPreview.tests.js
@@ -5,7 +5,7 @@ import EditingPreview, {
     CHAT_EDITING_PREVIEW_TEXT_CLASS,
     CHAT_EDITING_PREVIEW_CANCEL_BUTTON_CLASS,
     CHAT_EDITING_PREVIEW_CAPTION_CLASS,
-} from '__internal/ui/chat/editing_preview';
+} from '__internal/ui/chat/message_box/editing_preview';
 import messageLocalization from 'common/core/localization/message';
 import Button from 'ui/button';
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.markup.tests.js
index 68668df8704a..14684c909202 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.markup.tests.js
@@ -2,13 +2,11 @@ import $ from 'jquery';
 
 import MessageBox, {
     CHAT_MESSAGEBOX_CLASS,
-    CHAT_MESSAGEBOX_INPUT_CONTAINER_CLASS,
+    CHAT_MESSAGEBOX_TEXTAREA_CONTAINER_CLASS,
     CHAT_MESSAGEBOX_TEXTAREA_CLASS,
-    CHAT_MESSAGEBOX_BUTTON_CLASS,
-} from '__internal/ui/chat/messagebox';
+} from '__internal/ui/chat/message_box/message_box';
 
 const TEXTAREA_CLASS = 'dx-textarea';
-const BUTTON_CLASS = 'dx-button';
 
 const moduleConfig = {
     beforeEach: function() {
@@ -37,7 +35,7 @@ QUnit.module('MessageBox', moduleConfig, () => {
             const $messageBoxContent = this.$element.children();
 
             assert.strictEqual($messageBoxContent.length, 1, 'message box content has one elements');
-            assert.strictEqual($messageBoxContent.eq(0).hasClass(CHAT_MESSAGEBOX_INPUT_CONTAINER_CLASS), true, 'message box contains input container');
+            assert.strictEqual($messageBoxContent.eq(0).hasClass(CHAT_MESSAGEBOX_TEXTAREA_CONTAINER_CLASS), true, 'message box contains input container');
         });
 
         QUnit.test(`textarea field should have ${CHAT_MESSAGEBOX_TEXTAREA_CLASS} class`, function(assert) {
@@ -45,19 +43,5 @@ QUnit.module('MessageBox', moduleConfig, () => {
 
             assert.strictEqual($textArea.hasClass(CHAT_MESSAGEBOX_TEXTAREA_CLASS), true);
         });
-
-        QUnit.test(`send button should have ${CHAT_MESSAGEBOX_BUTTON_CLASS} class`, function(assert) {
-            const $button = this.$element.find(`.${BUTTON_CLASS}`);
-
-            assert.strictEqual($button.hasClass(CHAT_MESSAGEBOX_BUTTON_CLASS), true);
-        });
-    });
-
-    QUnit.module('Accessibility', moduleConfig, () => {
-        QUnit.test('send button should have correct aria-label', function(assert) {
-            const $button = this.$element.find(`.${BUTTON_CLASS}`);
-
-            assert.strictEqual($button.attr('aria-label'), 'Send');
-        });
     });
 });
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js
index 8edcdafa9a4d..5680da519cff 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js
@@ -6,17 +6,17 @@ import config from 'core/config';
 import MessageBox, {
     TYPING_END_DELAY,
     CHAT_MESSAGEBOX_TEXTAREA_CLASS,
-    CHAT_MESSAGEBOX_BUTTON_CLASS,
-} from '__internal/ui/chat/messagebox';
-import TextArea from '__internal/ui/m_text_area';
+} from '__internal/ui/chat/message_box/message_box';
+import ChatTextArea from '__internal/ui/chat/message_box/chat_text_area';
 import Button from 'ui/button';
 import EditingPreview, {
     CHAT_EDITING_PREVIEW_CLASS,
     CHAT_EDITING_PREVIEW_CANCEL_BUTTON_CLASS,
-} from '__internal/ui/chat/editing_preview';
+} from '__internal/ui/chat/message_box/editing_preview';
 import {
     FOCUSED_STATE_CLASS,
 } from '__internal/core/widget/widget';
+import { BUTTON_CLASS } from '__internal/ui/button/button';
 import { shouldSkipOnDesktop, shouldSkipOnMobile } from '../../../helpers/device.js';
 
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
@@ -28,11 +28,13 @@ const moduleConfig = {
             this.$element = $(this.instance.$element());
 
             this.$textArea = this.$element.find(`.${CHAT_MESSAGEBOX_TEXTAREA_CLASS}`);
-            this.textArea = TextArea.getInstance(this.$textArea);
+            this.textArea = ChatTextArea.getInstance(this.$textArea);
 
             this.$input = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
 
-            this.$sendButton = this.$element.find(`.${CHAT_MESSAGEBOX_BUTTON_CLASS}`);
+            const $buttons = this.$element.find(`.${BUTTON_CLASS}`);
+            this.$sendButton = $($buttons[$buttons.length - 1]);
+
             this.sendButton = Button.getInstance(this.$sendButton);
 
             this.getEditingPreview = () => this.$element.find(`.${CHAT_EDITING_PREVIEW_CLASS}`);
@@ -58,20 +60,7 @@ QUnit.module('MessageBox', moduleConfig, () => {
             assert.ok(this.instance instanceof MessageBox);
         });
 
-        QUnit.test('send button should be initialized with the corresponding configuration', function(assert) {
-            const expectedOptions = {
-                icon: 'sendfilled',
-                type: 'default',
-                stylingMode: 'text',
-                disabled: true,
-            };
-
-            Object.entries(expectedOptions).forEach(([key, value]) => {
-                assert.deepEqual(value, this.sendButton.option(key), `${key} value is correct`);
-            });
-        });
-
-        QUnit.test('TextArea should be initialized with the corresponding configuration', function(assert) {
+        QUnit.test('should pass correct configuration to ChatTextArea', function(assert) {
             const expectedOptions = {
                 stylingMode: 'outlined',
                 placeholder: 'Type a message',
@@ -80,7 +69,7 @@ QUnit.module('MessageBox', moduleConfig, () => {
                 valueChangeEvent: 'input'
             };
 
-            const textArea = TextArea.getInstance(this.$textArea);
+            const textArea = ChatTextArea.getInstance(this.$textArea);
 
             Object.entries(expectedOptions).forEach(([key, value]) => {
                 assert.deepEqual(value, textArea.option(key), `textarea ${key} value is correct`);
@@ -88,89 +77,6 @@ QUnit.module('MessageBox', moduleConfig, () => {
         });
     });
 
-    QUnit.module('Behavior', () => {
-        QUnit.test('textarea should be cleared after clicking the send button', function(assert) {
-            const text = 'new text message';
-
-            keyboardMock(this.$input)
-                .focus()
-                .type(text);
-
-            this.$sendButton.trigger('dxclick');
-
-            assert.strictEqual(this.$input.val(), '');
-        });
-
-        QUnit.test('textarea should be cleared when the send button is clicked if the input contains a value consisting only of spaces', function(assert) {
-            const emptyValue = '    ';
-
-            keyboardMock(this.$input)
-                .focus()
-                .type(emptyValue);
-
-            this.$sendButton.trigger('dxclick');
-
-            assert.strictEqual(this.$input.val(), emptyValue);
-        });
-
-        QUnit.test('send button should not be disabled after entering any character into input', function(assert) {
-            keyboardMock(this.$input)
-                .focus()
-                .type('i');
-
-            const { disabled } = this.sendButton.option();
-
-            assert.strictEqual(disabled, false);
-        });
-
-        QUnit.test('send button should be disabled after entering any character into input and clicking the button', function(assert) {
-            keyboardMock(this.$input)
-                .focus()
-                .type('i');
-
-            this.$sendButton.trigger('dxclick');
-
-            const { disabled } = this.sendButton.option();
-
-            assert.strictEqual(disabled, true);
-        });
-
-        QUnit.test('send button should be disabled after entering spacing into input', function(assert) {
-            const emptyValue = '    ';
-
-            keyboardMock(this.$input)
-                .focus()
-                .type(emptyValue);
-
-            const { disabled } = this.sendButton.option();
-
-            assert.strictEqual(disabled, true);
-        });
-
-        QUnit.test('send button should be disabled after adding a line break into input', function(assert) {
-            const lineBreakValue = '\n';
-
-            keyboardMock(this.$input)
-                .focus()
-                .type(lineBreakValue);
-
-            const { disabled } = this.sendButton.option();
-
-            assert.strictEqual(disabled, true);
-        });
-
-        QUnit.test('send button should be disabled after entering any character and then removing it', function(assert) {
-            keyboardMock(this.$input)
-                .focus()
-                .type('i')
-                .press('backspace');
-
-            const { disabled } = this.sendButton.option();
-
-            assert.strictEqual(disabled, true);
-        });
-    });
-
     QUnit.module('onMessageEntered event', () => {
         QUnit.test('should be fired when the send button is clicked if the textarea input contains a value', function(assert) {
             const onMessageEnteredStub = sinon.stub();
@@ -708,80 +614,217 @@ QUnit.module('MessageBox', moduleConfig, () => {
         });
     });
 
-    QUnit.module('Keyboard navigation', () => {
-        QUnit.test('textarea should not be cleared on enter key if the input contains a value consisting only of spaces', function(assert) {
+    QUnit.module('Integration with ChatTextArea', () => {
+        QUnit.test('should pass fileUploaderOptions to ChatTextArea on initialization', function(assert) {
+            const fileUploaderOptions = {
+                uploadMode: 'instantly',
+            };
+
+            this.reinit({ fileUploaderOptions });
+
+            const chatTextArea = ChatTextArea.getInstance(this.$textArea);
+
+            assert.deepEqual(
+                chatTextArea.option('fileUploaderOptions'),
+                fileUploaderOptions,
+                'fileUploaderOptions is passed to ChatTextArea'
+            );
+        });
+
+        QUnit.test('should update fileUploaderOptions in ChatTextArea at runtime', function(assert) {
+            const fileUploaderOptions = {
+                uploadMode: 'useButtons',
+            };
+
+            this.instance.option('fileUploaderOptions', fileUploaderOptions);
+
+            const chatTextArea = ChatTextArea.getInstance(this.$textArea);
+
+            assert.deepEqual(
+                chatTextArea.option('fileUploaderOptions'),
+                fileUploaderOptions,
+                'fileUploaderOptions updated in ChatTextArea'
+            );
+        });
+
+        QUnit.test('should transform ChatTextArea onSend event to onMessageEntered when not editing', function(assert) {
+            const onMessageEnteredStub = sinon.stub();
+            const onMessageUpdatingStub = sinon.stub();
+
+            this.reinit({
+                onMessageEntered: onMessageEnteredStub,
+                onMessageUpdating: onMessageUpdatingStub,
+            });
+
             keyboardMock(this.$input)
                 .focus()
-                .type('   ')
-                .keyDown('enter')
-                .keyUp('enter');
+                .type('new message');
 
-            assert.strictEqual(this.$input.val(), '   ');
+            this.$sendButton.trigger('dxclick');
+
+            assert.strictEqual(onMessageEnteredStub.callCount, 1, 'onMessageEntered fired once');
+            assert.strictEqual(onMessageUpdatingStub.callCount, 0, 'onMessageUpdating not fired');
         });
 
-        QUnit.test('textarea should be cleared on enter key when some text is entered', function(assert) {
-            if(shouldSkipOnMobile(assert)) {
-                return;
-            }
+        QUnit.test('should transform ChatTextArea onSend event to onMessageUpdating when editing', function(assert) {
+            const onMessageEnteredStub = sinon.stub();
+            const onMessageUpdatingStub = sinon.stub();
+
+            this.reinit({
+                onMessageEntered: onMessageEnteredStub,
+                onMessageUpdating: onMessageUpdatingStub,
+                text: 'original text',
+            });
 
             keyboardMock(this.$input)
                 .focus()
-                .type('some text')
-                .keyDown('enter')
-                .keyUp('enter');
+                .type('updated text');
 
-            assert.strictEqual(this.$input.val(), '');
+            this.$sendButton.trigger('dxclick');
+
+            assert.strictEqual(onMessageEnteredStub.callCount, 0, 'onMessageEntered not fired');
+            assert.strictEqual(onMessageUpdatingStub.callCount, 1, 'onMessageUpdating fired once');
         });
 
-        QUnit.test('enter keydown event should be prevented if input text has non-space characters', function(assert) {
-            if(shouldSkipOnMobile(assert)) {
-                return;
-            }
+        QUnit.test('should pass correct text to onMessageUpdating from ChatTextArea', function(assert) {
+            assert.expect(1);
 
-            const enterKeyDownEvent = $.Event('keydown', { key: 'enter' });
+            const originalText = 'original';
+            const newText = 'updated message text';
 
-            keyboardMock(this.$input).type('1');
+            this.reinit({
+                text: originalText,
+                onMessageUpdating: (e) => {
+                    assert.strictEqual(e.text, `${newText}${originalText}`, 'correct text passed to onMessageUpdating');
+                },
+            });
 
-            this.$input.trigger(enterKeyDownEvent);
+            keyboardMock(this.$input)
+                .focus()
+                .type(newText);
 
-            assert.ok(enterKeyDownEvent.isDefaultPrevented(), 'empty line is not added before sending');
+            this.$sendButton.trigger('dxclick');
         });
+    });
 
-        QUnit.test('enter keydown event with Shift modificator should not be prevented', function(assert) {
-            const enterKeyDownEvent = $.Event('keydown', { key: 'enter', shiftKey: true });
+    QUnit.module('Integration with EditingPreview', () => {
+        QUnit.test('should render EditingPreview when text option is set on initialization', function(assert) {
+            this.reinit({ text: 'editing text' });
 
-            keyboardMock(this.$input).focus().type('1');
+            const $editingPreview = this.getEditingPreview();
+            const editingPreviewInstance = this.getEditingPreviewInstance();
+
+            assert.strictEqual($editingPreview.length, 1, 'EditingPreview is rendered');
+            assert.strictEqual(
+                editingPreviewInstance.option('text'),
+                'editing text',
+                'EditingPreview has correct text'
+            );
+        });
 
-            this.$input.trigger(enterKeyDownEvent);
+        QUnit.test('should not render EditingPreview when text option is empty', function(assert) {
+            this.reinit({ text: '' });
 
-            assert.notOk(enterKeyDownEvent.isDefaultPrevented(), 'empty line is added when shift is used');
+            const $editingPreview = this.getEditingPreview();
+
+            assert.strictEqual($editingPreview.length, 0, 'EditingPreview is not rendered');
         });
 
-        QUnit.test('enter keydown event should not be prevented if input text consists only from space characters', function(assert) {
-            const enterKeyDownEvent = $.Event('keydown', { key: 'enter' });
+        QUnit.test('should render EditingPreview when text option is set at runtime', function(assert) {
+            this.instance.option('text', 'new editing text');
+
+            const $editingPreview = this.getEditingPreview();
+            const editingPreviewInstance = this.getEditingPreviewInstance();
+
+            assert.strictEqual($editingPreview.length, 1, 'EditingPreview is rendered');
+            assert.strictEqual(
+                editingPreviewInstance.option('text'),
+                'new editing text',
+                'EditingPreview has correct text'
+            );
+        });
 
-            keyboardMock(this.$input).type('  \n  \n');
+        QUnit.test('should remove EditingPreview when text option is cleared at runtime', function(assert) {
+            this.reinit({ text: 'editing text' });
 
-            this.$input.trigger(enterKeyDownEvent);
+            assert.strictEqual(this.getEditingPreview().length, 1, 'EditingPreview initially rendered');
 
-            assert.notOk(enterKeyDownEvent.isDefaultPrevented(), 'empty line is added');
+            this.instance.option('text', '');
+
+            assert.strictEqual(this.getEditingPreview().length, 1, 'EditingPreview is not removed after clearing text');
         });
 
-        QUnit.test('textarea should restore its height after enter press when multiline text was entered', function(assert) {
-            if(shouldSkipOnMobile(assert)) {
-                return;
-            }
+        QUnit.test('should sync text between EditingPreview and ChatTextArea value', function(assert) {
+            this.reinit({ text: 'editing message' });
 
-            const initialTextAreaHeight = this.$textArea.height();
+            assert.strictEqual(this.$input.val(), 'editing message', 'ChatTextArea value initially synced');
 
-            keyboardMock(this.$input)
-                .type('1\n2\n3')
-                .keyDown('enter')
-                .keyUp('enter');
+            this.instance.option('text', 'modified message');
 
-            assert.roughEqual(this.$textArea.height(), initialTextAreaHeight, 0.1, 'textarea height is restored');
+            assert.strictEqual(this.$input.val(), 'modified message', 'ChatTextArea value updated');
         });
+    });
+
+    QUnit.module('Mode switching', () => {
+        QUnit.test('should switch from creation mode to editing mode when text is set', function(assert) {
+            assert.strictEqual(this.instance.option('text'), '', 'initially in creation mode');
+            assert.strictEqual(this.getEditingPreview().length, 0, 'no EditingPreview in creation mode');
+
+            this.instance.option('text', 'message to edit');
+
+            assert.strictEqual(this.getEditingPreview().length, 1, 'EditingPreview appears in editing mode');
+            assert.strictEqual(this.$input.val(), 'message to edit', 'ChatTextArea filled with text');
+        });
+
+        QUnit.test('should switch from editing mode to creation mode when text is cleared', function(assert) {
+            this.reinit({ text: 'editing message' });
+
+            assert.strictEqual(this.getEditingPreview().length, 1, 'initially in editing mode');
+
+            this.instance.option('text', '');
+
+            assert.strictEqual(this.getEditingPreview().length, 1, 'EditingPreview has not been removed in creation mode');
+            assert.strictEqual(this.$input.val(), '', 'ChatTextArea cleared');
+        });
+
+        QUnit.test('should use onMessageEntered in creation mode and onMessageUpdating in editing mode', function(assert) {
+            const onMessageEnteredStub = sinon.stub();
+            const onMessageUpdatingStub = sinon.stub();
 
+            this.reinit({
+                onMessageEntered: onMessageEnteredStub,
+                onMessageUpdating: onMessageUpdatingStub,
+            });
+
+            keyboardMock(this.$input).focus().type('new message');
+            this.$sendButton.trigger('dxclick');
+
+            assert.strictEqual(onMessageEnteredStub.callCount, 1, 'onMessageEntered called in creation mode');
+            assert.strictEqual(onMessageUpdatingStub.callCount, 0, 'onMessageUpdating not called in creation mode');
+
+            this.instance.option('text', 'edit this');
+
+            keyboardMock(this.$input).focus().type('edited message');
+            this.$sendButton.trigger('dxclick');
+
+            assert.strictEqual(onMessageEnteredStub.callCount, 1, 'onMessageEntered still called once');
+            assert.strictEqual(onMessageUpdatingStub.callCount, 1, 'onMessageUpdating called in editing mode');
+        });
+
+        QUnit.test('Escape key should cancel editing and switch to creation mode', function(assert) {
+            this.reinit({ text: 'original message' });
+
+            assert.strictEqual(this.getEditingPreview().length, 1, 'in editing mode');
+
+            keyboardMock(this.$input).focus().press('esc');
+
+            assert.strictEqual(this.instance.option('text'), '', 'text cleared');
+            assert.strictEqual(this.getEditingPreview().length, 1, 'EditingPreview has not been removed');
+            assert.strictEqual(this.$input.val(), '', 'ChatTextArea cleared');
+        });
+    });
+
+    QUnit.module('Keyboard navigation', () => {
         QUnit.test('textarea should be cleared on escape key when some message is editing', function(assert) {
             this.instance.option('text', 'test');
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js b/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js
index 9a737956d6ec..9ed1b4a1ae43 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js
@@ -16,13 +16,14 @@ import Avatar from '__internal/ui/chat/avatar';
 import Button from 'ui/button';
 import ColorBox from 'ui/color_box';
 import Chat from 'ui/chat';
-import ChatMessageBox from '__internal/ui/chat/messagebox';
+import ChatMessageBox from '__internal/ui/chat/message_box/message_box';
+import ChatTextArea from '__internal/ui/chat/message_box/chat_text_area';
 import ChatMessageBubble from '__internal/ui/chat/messagebubble';
 import ChatMessageGroup from '__internal/ui/chat/messagegroup';
 import ChatMessageList from '__internal/ui/chat/messagelist';
 import ChatAlertList from '__internal/ui/chat/alertlist';
 import ChatTypingIndicator from '__internal/ui/chat/typingindicator';
-import ChatEditingPreview from '__internal/ui/chat/editing_preview';
+import ChatEditingPreview from '__internal/ui/chat/message_box/editing_preview';
 import DataGrid from 'ui/data_grid';
 import DateBox from 'ui/date_box';
 import DateRangeBox from 'ui/date_range_box';
@@ -1362,6 +1363,7 @@ testComponentDefaults(Chat,
         items: [],
         alerts: [],
         typingUsers: [],
+        fileUploaderOptions: undefined,
         onMessageEntered: undefined,
         onTypingStart: undefined,
         onTypingEnd: undefined,
@@ -1391,6 +1393,8 @@ testComponentDefaults(ChatMessageBox,
         activeStateEnabled: true,
         focusStateEnabled: true,
         hoverStateEnabled: true,
+        fileUploaderOptions: undefined,
+        text: '',
         onMessageEntered: undefined,
         onTypingStart: undefined,
         onTypingEnd: undefined,
@@ -1399,6 +1403,19 @@ testComponentDefaults(ChatMessageBox,
     }
 );
 
+testComponentDefaults(ChatTextArea,
+    {},
+    {
+        stylingMode: 'outlined',
+        placeholder: 'Type a message',
+        autoResizeEnabled: true,
+        valueChangeEvent: 'input',
+        maxHeight: '8em',
+        fileUploaderOptions: undefined,
+        onSend: undefined,
+    }
+);
+
 testComponentDefaults(ChatMessageBubble,
     {},
     {
diff --git a/packages/testcafe-models/chat.ts b/packages/testcafe-models/chat.ts
index a114226d4549..d5cf8baf8365 100644
--- a/packages/testcafe-models/chat.ts
+++ b/packages/testcafe-models/chat.ts
@@ -7,7 +7,7 @@ import dxChat from 'devextreme/ui/chat';
 const CLASS = {
   input: 'dx-texteditor-input',
   messageList: 'dx-chat-messagelist',
-  messageBoxButton: 'dx-chat-messagebox-button',
+  messageBoxButton: 'dx-button',
   scrollable: 'dx-scrollable',
   textArea: 'dx-textarea',
   messageBubble: 'dx-chat-messagebubble',