@syncfusion/blazor-themes 28.1.36 → 28.1.37

package/SCSS-Themes/bds.scss

@@ -75427,7 +75427,7 @@ $de-column-presets-font-size: $text-6xl !default;
             height: 20px;
             line-height: 20px;
             min-width: 44px;
-            max-width: 150px;
+            max-width: auto;
             padding: 0px 8px;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -88158,7 +88158,7 @@ $grid-checkmark-color: $primary !default;
         white-space: nowrap;
       }
 
-      & .e-stackedheader .e-columnheader {
+      & .e-stackedheader .e-columnheader :not(.e-columnsheader) {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
           max-height: $grid-rowcell-wrap-max-height;
@@ -99301,7 +99301,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         }
       }
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
         .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
           padding: 0 4px;
         }
@@ -101257,7 +101257,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         background: $rte-tb-item-active-bg;
         border: $rte-tb-item-active-border;
   
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
           border: 0;
         }
       }
@@ -142412,8 +142412,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 16px !default;
 $chat-suggesstions-list-padding: 4px 6px !default;
 
+$chat-suggesstion-bigger-line-height: 18px !default;
 $chat-suggesstions-li-padding-bigger: 5px 8px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -142759,7 +142761,7 @@ $timestamp-border-color: rgba(36, 36, 36, 1) !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -142841,6 +142843,9 @@ $timestamp-border-color: rgba(36, 36, 36, 1) !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -142937,6 +142942,13 @@ $timestamp-border-color: rgba(36, 36, 36, 1) !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -142945,10 +142957,6 @@ $timestamp-border-color: rgba(36, 36, 36, 1) !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -143141,6 +143149,7 @@ $timestamp-border-color: rgba(36, 36, 36, 1) !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {

package/SCSS-Themes/bootstrap-dark-lite.scss

@@ -54283,7 +54283,7 @@ $de-column-presets-font-size: 60px !default;
             height: 20px;
             line-height: 20px;
             min-width: 44px;
-            max-width: 150px;
+            max-width: auto;
             padding: 0px 8px;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -64144,7 +64144,7 @@ $grid-checkmark-color: $grey-light-font !default;
         white-space: nowrap;
       }
 
-      & .e-stackedheader .e-columnheader {
+      & .e-stackedheader .e-columnheader :not(.e-columnsheader) {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
           max-height: $grid-rowcell-wrap-max-height;
@@ -71746,7 +71746,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         }
       }
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
         .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
           padding: 0 4px;
         }
@@ -73702,7 +73702,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         background: $rte-tb-item-active-bg;
         border: $rte-tb-item-active-border;
   
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
           border: 0;
         }
       }
@@ -108190,8 +108190,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 10px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 6px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 6px 12px !default;
 $typing-user-font-size-bigger: 12px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -108537,7 +108539,7 @@ $timestamp-border-color: $grey-lighter !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -108619,6 +108621,9 @@ $timestamp-border-color: $grey-lighter !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -108715,6 +108720,13 @@ $timestamp-border-color: $grey-lighter !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -108723,10 +108735,6 @@ $timestamp-border-color: $grey-lighter !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;

package/SCSS-Themes/bootstrap-dark.scss

@@ -73710,7 +73710,7 @@ $de-column-presets-font-size: 60px !default;
             height: 20px;
             line-height: 20px;
             min-width: 44px;
-            max-width: 150px;
+            max-width: auto;
             padding: 0px 8px;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -86344,7 +86344,7 @@ $grid-checkmark-color: $grey-light-font !default;
         white-space: nowrap;
       }
 
-      & .e-stackedheader .e-columnheader {
+      & .e-stackedheader .e-columnheader :not(.e-columnsheader) {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
           max-height: $grid-rowcell-wrap-max-height;
@@ -97521,7 +97521,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         }
       }
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
         .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
           padding: 0 4px;
         }
@@ -99477,7 +99477,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         background: $rte-tb-item-active-bg;
         border: $rte-tb-item-active-border;
   
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
           border: 0;
         }
       }
@@ -140611,8 +140611,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 10px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 6px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 6px 12px !default;
 $typing-user-font-size-bigger: 12px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -140958,7 +140960,7 @@ $timestamp-border-color: $grey-lighter !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -141040,6 +141042,9 @@ $timestamp-border-color: $grey-lighter !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -141136,6 +141141,13 @@ $timestamp-border-color: $grey-lighter !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -141144,10 +141156,6 @@ $timestamp-border-color: $grey-lighter !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -141340,6 +141348,7 @@ $timestamp-border-color: $grey-lighter !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {

package/SCSS-Themes/bootstrap-lite.scss

@@ -54038,7 +54038,7 @@ $de-column-presets-font-size: 60px !default;
             height: 20px;
             line-height: 20px;
             min-width: 44px;
-            max-width: 150px;
+            max-width: auto;
             padding: 0px 8px;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -63903,7 +63903,7 @@ $grid-checkmark-color: $grey !default;
         white-space: nowrap;
       }
 
-      & .e-stackedheader .e-columnheader {
+      & .e-stackedheader .e-columnheader :not(.e-columnsheader) {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
           max-height: $grid-rowcell-wrap-max-height;
@@ -71579,7 +71579,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         }
       }
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
         .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
           padding: 0 4px;
         }
@@ -73535,7 +73535,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         background: $rte-tb-item-active-bg;
         border: $rte-tb-item-active-border;
   
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
           border: 0;
         }
       }
@@ -108009,8 +108009,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 10px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 6px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 6px 12px !default;
 $typing-user-font-size-bigger: 12px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -108356,7 +108358,7 @@ $timestamp-border-color: $grey-cc !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -108438,6 +108440,9 @@ $timestamp-border-color: $grey-cc !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -108534,6 +108539,13 @@ $timestamp-border-color: $grey-cc !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -108542,10 +108554,6 @@ $timestamp-border-color: $grey-cc !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;

package/SCSS-Themes/bootstrap.scss

@@ -73465,7 +73465,7 @@ $de-column-presets-font-size: 60px !default;
             height: 20px;
             line-height: 20px;
             min-width: 44px;
-            max-width: 150px;
+            max-width: auto;
             padding: 0px 8px;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -86103,7 +86103,7 @@ $grid-checkmark-color: $grey !default;
         white-space: nowrap;
       }
 
-      & .e-stackedheader .e-columnheader {
+      & .e-stackedheader .e-columnheader :not(.e-columnsheader) {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
           max-height: $grid-rowcell-wrap-max-height;
@@ -97354,7 +97354,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         }
       }
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
         .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
           padding: 0 4px;
         }
@@ -99310,7 +99310,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         background: $rte-tb-item-active-bg;
         border: $rte-tb-item-active-border;
   
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
           border: 0;
         }
       }
@@ -140430,8 +140430,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 10px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 6px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 6px 12px !default;
 $typing-user-font-size-bigger: 12px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -140777,7 +140779,7 @@ $timestamp-border-color: $grey-cc !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -140859,6 +140861,9 @@ $timestamp-border-color: $grey-cc !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -140955,6 +140960,13 @@ $timestamp-border-color: $grey-cc !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -140963,10 +140975,6 @@ $timestamp-border-color: $grey-cc !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -141159,6 +141167,7 @@ $timestamp-border-color: $grey-cc !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {

package/SCSS-Themes/bootstrap4-lite.scss

@@ -54108,7 +54108,7 @@ $de-column-presets-font-size: 60px !default;
             height: 20px;
             line-height: 20px;
             min-width: 44px;
-            max-width: 150px;
+            max-width: auto;
             padding: 0px 8px;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -63995,7 +63995,7 @@ $grid-checkmark-color: $white !default;
         white-space: nowrap;
       }
 
-      & .e-stackedheader .e-columnheader {
+      & .e-stackedheader .e-columnheader :not(.e-columnsheader) {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
           max-height: $grid-rowcell-wrap-max-height;
@@ -71757,7 +71757,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         }
       }
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
         .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
           padding: 0 4px;
         }
@@ -73713,7 +73713,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         background: $rte-tb-item-active-bg;
         border: $rte-tb-item-active-border;
   
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
           border: 0;
         }
       }
@@ -108243,8 +108243,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 3px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 4px 10px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -108590,7 +108592,7 @@ $timestamp-border-color: $gray-200 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -108672,6 +108674,9 @@ $timestamp-border-color: $gray-200 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -108768,6 +108773,13 @@ $timestamp-border-color: $gray-200 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -108776,10 +108788,6 @@ $timestamp-border-color: $gray-200 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;

package/SCSS-Themes/bootstrap4.scss

@@ -73535,7 +73535,7 @@ $de-column-presets-font-size: 60px !default;
             height: 20px;
             line-height: 20px;
             min-width: 44px;
-            max-width: 150px;
+            max-width: auto;
             padding: 0px 8px;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -86195,7 +86195,7 @@ $grid-checkmark-color: $white !default;
         white-space: nowrap;
       }
 
-      & .e-stackedheader .e-columnheader {
+      & .e-stackedheader .e-columnheader :not(.e-columnsheader) {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
           max-height: $grid-rowcell-wrap-max-height;
@@ -97532,7 +97532,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         }
       }
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
         .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
           padding: 0 4px;
         }
@@ -99488,7 +99488,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         background: $rte-tb-item-active-bg;
         border: $rte-tb-item-active-border;
   
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
           border: 0;
         }
       }
@@ -140664,8 +140664,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 3px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 4px 10px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -141011,7 +141013,7 @@ $timestamp-border-color: $gray-200 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -141093,6 +141095,9 @@ $timestamp-border-color: $gray-200 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -141189,6 +141194,13 @@ $timestamp-border-color: $gray-200 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -141197,10 +141209,6 @@ $timestamp-border-color: $gray-200 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -141393,6 +141401,7 @@ $timestamp-border-color: $gray-200 !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {