feat(chat): Add text-overflow && Fix button size

DevExpress · Sep 4, 2024 · 6bb9fb6 · 6bb9fb6
1 parent b220247
commit 6bb9fb6
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 28 deletions.
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
@@ -4,8 +4,7 @@
   $gap,
   $textarea-min-height,
   $textarea-border-radius,
-  $button-height,
-  $button-width
+  $button-size
 ) {
   .dx-chat-message-box {
     padding: $padding;
@@ -22,8 +21,8 @@
 
   .dx-chat-message-box-button {
     &.dx-button.dx-button-default {
-      height: $button-height;
-      width: $button-width;
+      height: $button-size;
+      width: $button-size;
     }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss
@@ -1,3 +1,5 @@
+@use "../../../mixins" as *;
+
 .dx-chat-message-group {
   display: grid;
   align-items: start;
@@ -6,6 +8,12 @@
 .dx-chat-message-group-information {
   display: flex;
   grid-row: 1;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.dx-chat-message-author-name {
+  @include dx-overflow();
 }
 
 .dx-chat-message-group-alignment-start {

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -14,8 +14,7 @@
   $chat-messagebox-gap,
   $chat-messagebox-textarea-min-height,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-button-height,
-  $chat-messagebox-button-width
+  $chat-messagebox-button-size,
 );
 @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
@@ -9,8 +9,7 @@ $chat-bubble-container-gap: 4px !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-min-height: null !default;
 $chat-messagebox-textarea-border-radius: $texteditor-input-border-radius !default;
-$chat-messagebox-button-height: null !default;
-$chat-messagebox-button-width: null !default;
+$chat-messagebox-button-size: null !default;
 $chat-messagebox-gap: 8px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
@@ -27,8 +26,7 @@ $chat-information-font-size: 12px !default;
   $chat-bubble-padding: 8px 12px !default;
   $chat-messagebox-padding: 20px !default;
   $chat-messagebox-textarea-min-height: 40px !default;
-  $chat-messagebox-button-height: 40px !default;
-  $chat-messagebox-button-width: 32px !default;
+  $chat-messagebox-button-size: 32px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagelist-gap: 24px !default;
 }
@@ -38,8 +36,7 @@ $chat-information-font-size: 12px !default;
   $chat-bubble-padding: 6px 8px !default;
   $chat-messagebox-padding: 16px !default;
   $chat-messagebox-textarea-min-height: 32px !default;
-  $chat-messagebox-button-height: 32px !default;
-  $chat-messagebox-button-width: 24px !default;
+  $chat-messagebox-button-size: 24px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagelist-gap: 12px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -14,8 +14,7 @@
   $chat-messagebox-gap,
   $chat-messagebox-textarea-min-height,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-button-height,
-  $chat-messagebox-button-width
+  $chat-messagebox-button-size
 );
 @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
@@ -8,8 +8,7 @@ $chat-bubble-container-gap: 4px !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-min-height: null !default;
 $chat-messagebox-textarea-border-radius: null !default;
-$chat-messagebox-button-height: null !default;
-$chat-messagebox-button-width: null !default;
+$chat-messagebox-button-size: null !default;
 $chat-messagebox-gap: 8px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
@@ -27,8 +26,7 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-padding: 20px !default;
   $chat-messagebox-textarea-min-height: 34px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
-  $chat-messagebox-button-height: 34px !default;
-  $chat-messagebox-button-width: 34px !default;
+  $chat-messagebox-button-size: 34px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagelist-gap: 24px !default;
 }
@@ -39,8 +37,7 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-padding: 16px !default;
   $chat-messagebox-textarea-min-height: 28px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
-  $chat-messagebox-button-height: 28px !default;
-  $chat-messagebox-button-width: 24px !default;
+  $chat-messagebox-button-size: 24px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagelist-gap: 12px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -14,8 +14,7 @@
   $chat-messagebox-gap,
   $chat-messagebox-textarea-min-height,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-button-height,
-  $chat-messagebox-button-width
+  $chat-messagebox-button-size
 );
 @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
@@ -8,8 +8,7 @@ $chat-bubble-container-gap: 4px !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-min-height: null !default;
 $chat-messagebox-textarea-border-radius: null !default;
-$chat-messagebox-button-height: null !default;
-$chat-messagebox-button-width: null !default;
+$chat-messagebox-button-size: null !default;
 $chat-messagebox-gap: 8px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
@@ -27,8 +26,7 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-padding: 20px !default;
   $chat-messagebox-textarea-min-height: 48px !default;
   $chat-messagebox-textarea-border-radius: 8px !default;
-  $chat-messagebox-button-height: 48px !default;
-  $chat-messagebox-button-width: 36px !default;
+  $chat-messagebox-button-size: 36px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagelist-gap: 24px !default;
 }
@@ -39,8 +37,7 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-padding: 16px !default;
   $chat-messagebox-textarea-min-height: 32px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
-  $chat-messagebox-button-height: 32px !default;
-  $chat-messagebox-button-width: 28px !default;
+  $chat-messagebox-button-size: 28px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagelist-gap: 12px !default;
 }