@syncfusion/blazor-themes 28.1.36 → 28.1.37

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

@@ -54423,7 +54423,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;
@@ -64391,7 +64391,7 @@ $grid-checkmark-color: $primary-text-color !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;
@@ -71957,7 +71957,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;
         }
@@ -73913,7 +73913,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;
         }
       }
@@ -108399,8 +108399,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: 22px !default;
 $chat-suggesstions-list-padding: 1px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 24px !default;
 $chat-suggesstions-li-padding-bigger: 4px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -108746,7 +108748,7 @@ $timestamp-border-color: $content-bg-color-alt2 !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;
@@ -108828,6 +108830,9 @@ $timestamp-border-color: $content-bg-color-alt2 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -108924,6 +108929,13 @@ $timestamp-border-color: $content-bg-color-alt2 !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') {
@@ -108932,10 +108944,6 @@ $timestamp-border-color: $content-bg-color-alt2 !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/bootstrap5-dark.scss

@@ -73850,7 +73850,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;
@@ -86591,7 +86591,7 @@ $grid-checkmark-color: $primary-text-color !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;
@@ -97732,7 +97732,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;
         }
@@ -99688,7 +99688,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;
         }
       }
@@ -140820,8 +140820,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: 22px !default;
 $chat-suggesstions-list-padding: 1px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 24px !default;
 $chat-suggesstions-li-padding-bigger: 4px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -141167,7 +141169,7 @@ $timestamp-border-color: $content-bg-color-alt2 !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;
@@ -141249,6 +141251,9 @@ $timestamp-border-color: $content-bg-color-alt2 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -141345,6 +141350,13 @@ $timestamp-border-color: $content-bg-color-alt2 !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') {
@@ -141353,10 +141365,6 @@ $timestamp-border-color: $content-bg-color-alt2 !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;
@@ -141549,6 +141557,7 @@ $timestamp-border-color: $content-bg-color-alt2 !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/bootstrap5-lite.scss

@@ -54422,7 +54422,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;
@@ -64390,7 +64390,7 @@ $grid-checkmark-color: $primary-text-color !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;
@@ -71956,7 +71956,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;
         }
@@ -73912,7 +73912,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;
         }
       }
@@ -108398,8 +108398,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: 22px !default;
 $chat-suggesstions-list-padding: 1px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 24px !default;
 $chat-suggesstions-li-padding-bigger: 4px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -108745,7 +108747,7 @@ $timestamp-border-color: $content-bg-color-alt2 !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;
@@ -108827,6 +108829,9 @@ $timestamp-border-color: $content-bg-color-alt2 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -108923,6 +108928,13 @@ $timestamp-border-color: $content-bg-color-alt2 !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') {
@@ -108931,10 +108943,6 @@ $timestamp-border-color: $content-bg-color-alt2 !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/bootstrap5.3-dark-lite.scss

@@ -55200,7 +55200,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;
@@ -65186,7 +65186,7 @@ $grid-checkmark-color: $primary-text-color !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;
@@ -72752,7 +72752,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;
         }
@@ -74708,7 +74708,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;
         }
       }
@@ -109187,8 +109187,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: 22px !default;
 $chat-suggesstions-list-padding: 1px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 24px !default;
 $chat-suggesstions-li-padding-bigger: 4px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -109534,7 +109536,7 @@ $timestamp-border-color: $content-bg-color-alt2 !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;
@@ -109616,6 +109618,9 @@ $timestamp-border-color: $content-bg-color-alt2 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -109712,6 +109717,13 @@ $timestamp-border-color: $content-bg-color-alt2 !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') {
@@ -109720,10 +109732,6 @@ $timestamp-border-color: $content-bg-color-alt2 !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/bootstrap5.3-dark.scss

@@ -74627,7 +74627,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;
@@ -87386,7 +87386,7 @@ $grid-checkmark-color: $primary-text-color !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;
@@ -98527,7 +98527,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;
         }
@@ -100483,7 +100483,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;
         }
       }
@@ -141608,8 +141608,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: 22px !default;
 $chat-suggesstions-list-padding: 1px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 24px !default;
 $chat-suggesstions-li-padding-bigger: 4px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -141955,7 +141957,7 @@ $timestamp-border-color: $content-bg-color-alt2 !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;
@@ -142037,6 +142039,9 @@ $timestamp-border-color: $content-bg-color-alt2 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -142133,6 +142138,13 @@ $timestamp-border-color: $content-bg-color-alt2 !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') {
@@ -142141,10 +142153,6 @@ $timestamp-border-color: $content-bg-color-alt2 !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;
@@ -142337,6 +142345,7 @@ $timestamp-border-color: $content-bg-color-alt2 !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/bootstrap5.3-lite.scss

@@ -55547,7 +55547,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;
@@ -65533,7 +65533,7 @@ $grid-checkmark-color: $primary-text-color !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;
@@ -73099,7 +73099,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;
         }
@@ -75055,7 +75055,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;
         }
       }
@@ -109534,8 +109534,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: 22px !default;
 $chat-suggesstions-list-padding: 1px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 24px !default;
 $chat-suggesstions-li-padding-bigger: 4px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -109881,7 +109883,7 @@ $timestamp-border-color: $content-bg-color-alt2 !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;
@@ -109963,6 +109965,9 @@ $timestamp-border-color: $content-bg-color-alt2 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -110059,6 +110064,13 @@ $timestamp-border-color: $content-bg-color-alt2 !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') {
@@ -110067,10 +110079,6 @@ $timestamp-border-color: $content-bg-color-alt2 !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/bootstrap5.3.scss

@@ -74974,7 +74974,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;
@@ -87733,7 +87733,7 @@ $grid-checkmark-color: $primary-text-color !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;
@@ -98874,7 +98874,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;
         }
@@ -100830,7 +100830,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;
         }
       }
@@ -141955,8 +141955,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: 22px !default;
 $chat-suggesstions-list-padding: 1px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 24px !default;
 $chat-suggesstions-li-padding-bigger: 4px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -142302,7 +142304,7 @@ $timestamp-border-color: $content-bg-color-alt2 !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;
@@ -142384,6 +142386,9 @@ $timestamp-border-color: $content-bg-color-alt2 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -142480,6 +142485,13 @@ $timestamp-border-color: $content-bg-color-alt2 !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') {
@@ -142488,10 +142500,6 @@ $timestamp-border-color: $content-bg-color-alt2 !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;
@@ -142684,6 +142692,7 @@ $timestamp-border-color: $content-bg-color-alt2 !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {