@syncfusion/blazor-themes 28.1.36 → 28.1.38

package/SCSS-Themes/grids/grid/tailwind.scss

@@ -1806,6 +1806,10 @@ $grid-checkmark-color: $primary-text-color !default;
       border-right: 1px solid;
     }
 
+    .e-tableborder:has(.e-emptyrow) {
+      border: none;
+    }
+
     .e-virtualtable {
       will-change: transform;
       z-index: 1;
@@ -4084,7 +4088,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;

package/SCSS-Themes/grids/grid/tailwind3-dark-lite.scss

@@ -346,7 +346,7 @@ $grid-rtl-headercelldiv-padding: 0 .4em 0 2.8em !default;
 $grid-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
 $grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
 $grid-ungroup-rtl-padding-right: 0 !default;
-$grid-headercelldiv-padding: 0 20px 0 1px !default;
+$grid-headercelldiv-padding: 0 20px 0 8px !default;
 $grid-headercelldiv-sort-centeralign-padding-right: 5px !default;
 $grid-headercell-div-padding: 0 .4em !default;
 $grid-group-text-width: auto !default;
@@ -368,7 +368,7 @@ $grid-clone-padding: 2px 12px 1px !default;
 $grid-bigger-first-last-rowcell-padding: 8px !default;
 $grid-bigger-content-padding: 16px !default;
 $grid-bigger-group-line-height: 48px !default;
-$grid-bigger-content-right-padding: 16px !default;
+$grid-bigger-content-right-padding: 12px !default;
 $grid-bigger-headercell-font-size: $text-base !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
@@ -433,7 +433,7 @@ $grid-edit-checkbox-bigger-padding-left: 8px !default;
 $grid-edit-checkbox-bigger-padding-top: 8px !default;
 $grid-cell-focus-shadow: 0 0 0 1px $primary inset !default;
 $grid-cell-focus-border-color: $primary !default;
-$grid-headercelldiv-fltricon-margin: -5px 20px -5px -1px !default;
+$grid-headercelldiv-fltricon-margin: -5px 20px -5px -8px !default;
 $grid-headercelldiv-rightalign-fltricon-margin: -5px 20px -5px 8px !default;
 $grid-rtl-headercelldiv-fltricon-margin: -5px !default;
 $grid-rtl-headercelldiv-rightalign-fltricon-margin: -5px !default;
@@ -460,7 +460,7 @@ $grid-rtl-sortdiv-filtericon-margin: -14px 8px -13px 14px !default;
 $grid-bigger-fltricon-sortdiv-rightalign-margin: -18px 4px -14px -7px !default;
 $grid-bigger-fltricon-sortdiv-margin: -18px 18px -14px 5px !default;
 $grid-rtl-bigger-fltricon-sortdiv-margin: -17px 4px -14px 17px !default;
-$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -17px 4px -14px 17px !default;
+$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -17px 4px -14px 28px !default;
 $grid-column-menu-sub-menu-box-shadow: $shadow !default;
 $grid-bigger-checkbox-filter-min-height: 360px !default;
 $grid-checkbox-filter-min-height: 307px !default;
@@ -534,7 +534,7 @@ $grouped-bigger-text-font-size: $text-sm !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
 $grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $text-base !default;
-$grid-rtl-bigger-rightalign-fltrdiv-margin: -17px 4px -14px -10px !default;
+$grid-rtl-bigger-rightalign-fltrdiv-margin: -17px 4px -14px 2px !default;
 $grid-rtl-bigger-wrap-rightalign-fltrdiv-margin: -15px 4px -14px -2px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -8px !default;
 $grid-grouparea-font-weight: $font-weight-normal !default;
@@ -1802,6 +1802,10 @@ $grid-checkmark-color: $primary-text-color !default;
       border-right: 1px solid;
     }
 
+    .e-tableborder:has(.e-emptyrow) {
+      border: none;
+    }
+
     .e-virtualtable {
       will-change: transform;
       z-index: 1;
@@ -4080,7 +4084,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;

package/SCSS-Themes/grids/grid/tailwind3-dark.scss

@@ -346,7 +346,7 @@ $grid-rtl-headercelldiv-padding: 0 .4em 0 2.8em !default;
 $grid-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
 $grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
 $grid-ungroup-rtl-padding-right: 0 !default;
-$grid-headercelldiv-padding: 0 20px 0 1px !default;
+$grid-headercelldiv-padding: 0 20px 0 8px !default;
 $grid-headercelldiv-sort-centeralign-padding-right: 5px !default;
 $grid-headercell-div-padding: 0 .4em !default;
 $grid-group-text-width: auto !default;
@@ -368,7 +368,7 @@ $grid-clone-padding: 2px 12px 1px !default;
 $grid-bigger-first-last-rowcell-padding: 8px !default;
 $grid-bigger-content-padding: 16px !default;
 $grid-bigger-group-line-height: 48px !default;
-$grid-bigger-content-right-padding: 16px !default;
+$grid-bigger-content-right-padding: 12px !default;
 $grid-bigger-headercell-font-size: $text-base !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
@@ -433,7 +433,7 @@ $grid-edit-checkbox-bigger-padding-left: 8px !default;
 $grid-edit-checkbox-bigger-padding-top: 8px !default;
 $grid-cell-focus-shadow: 0 0 0 1px $primary inset !default;
 $grid-cell-focus-border-color: $primary !default;
-$grid-headercelldiv-fltricon-margin: -5px 20px -5px -1px !default;
+$grid-headercelldiv-fltricon-margin: -5px 20px -5px -8px !default;
 $grid-headercelldiv-rightalign-fltricon-margin: -5px 20px -5px 8px !default;
 $grid-rtl-headercelldiv-fltricon-margin: -5px !default;
 $grid-rtl-headercelldiv-rightalign-fltricon-margin: -5px !default;
@@ -460,7 +460,7 @@ $grid-rtl-sortdiv-filtericon-margin: -14px 8px -13px 14px !default;
 $grid-bigger-fltricon-sortdiv-rightalign-margin: -18px 4px -14px -7px !default;
 $grid-bigger-fltricon-sortdiv-margin: -18px 18px -14px 5px !default;
 $grid-rtl-bigger-fltricon-sortdiv-margin: -17px 4px -14px 17px !default;
-$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -17px 4px -14px 17px !default;
+$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -17px 4px -14px 28px !default;
 $grid-column-menu-sub-menu-box-shadow: $shadow !default;
 $grid-bigger-checkbox-filter-min-height: 360px !default;
 $grid-checkbox-filter-min-height: 307px !default;
@@ -534,7 +534,7 @@ $grouped-bigger-text-font-size: $text-sm !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
 $grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $text-base !default;
-$grid-rtl-bigger-rightalign-fltrdiv-margin: -17px 4px -14px -10px !default;
+$grid-rtl-bigger-rightalign-fltrdiv-margin: -17px 4px -14px 2px !default;
 $grid-rtl-bigger-wrap-rightalign-fltrdiv-margin: -15px 4px -14px -2px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -8px !default;
 $grid-grouparea-font-weight: $font-weight-normal !default;
@@ -1802,6 +1802,10 @@ $grid-checkmark-color: $primary-text-color !default;
       border-right: 1px solid;
     }
 
+    .e-tableborder:has(.e-emptyrow) {
+      border: none;
+    }
+
     .e-virtualtable {
       will-change: transform;
       z-index: 1;
@@ -4080,7 +4084,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;

package/SCSS-Themes/grids/grid/tailwind3-lite.scss

@@ -346,7 +346,7 @@ $grid-rtl-headercelldiv-padding: 0 .4em 0 2.8em !default;
 $grid-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
 $grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
 $grid-ungroup-rtl-padding-right: 0 !default;
-$grid-headercelldiv-padding: 0 20px 0 1px !default;
+$grid-headercelldiv-padding: 0 20px 0 8px !default;
 $grid-headercelldiv-sort-centeralign-padding-right: 5px !default;
 $grid-headercell-div-padding: 0 .4em !default;
 $grid-group-text-width: auto !default;
@@ -368,7 +368,7 @@ $grid-clone-padding: 2px 12px 1px !default;
 $grid-bigger-first-last-rowcell-padding: 8px !default;
 $grid-bigger-content-padding: 16px !default;
 $grid-bigger-group-line-height: 48px !default;
-$grid-bigger-content-right-padding: 16px !default;
+$grid-bigger-content-right-padding: 12px !default;
 $grid-bigger-headercell-font-size: $text-base !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
@@ -433,7 +433,7 @@ $grid-edit-checkbox-bigger-padding-left: 8px !default;
 $grid-edit-checkbox-bigger-padding-top: 8px !default;
 $grid-cell-focus-shadow: 0 0 0 1px $primary inset !default;
 $grid-cell-focus-border-color: $primary !default;
-$grid-headercelldiv-fltricon-margin: -5px 20px -5px -1px !default;
+$grid-headercelldiv-fltricon-margin: -5px 20px -5px -8px !default;
 $grid-headercelldiv-rightalign-fltricon-margin: -5px 20px -5px 8px !default;
 $grid-rtl-headercelldiv-fltricon-margin: -5px !default;
 $grid-rtl-headercelldiv-rightalign-fltricon-margin: -5px !default;
@@ -460,7 +460,7 @@ $grid-rtl-sortdiv-filtericon-margin: -14px 8px -13px 14px !default;
 $grid-bigger-fltricon-sortdiv-rightalign-margin: -18px 4px -14px -7px !default;
 $grid-bigger-fltricon-sortdiv-margin: -18px 18px -14px 5px !default;
 $grid-rtl-bigger-fltricon-sortdiv-margin: -17px 4px -14px 17px !default;
-$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -17px 4px -14px 17px !default;
+$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -17px 4px -14px 28px !default;
 $grid-column-menu-sub-menu-box-shadow: $shadow !default;
 $grid-bigger-checkbox-filter-min-height: 360px !default;
 $grid-checkbox-filter-min-height: 307px !default;
@@ -534,7 +534,7 @@ $grouped-bigger-text-font-size: $text-sm !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
 $grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $text-base !default;
-$grid-rtl-bigger-rightalign-fltrdiv-margin: -17px 4px -14px -10px !default;
+$grid-rtl-bigger-rightalign-fltrdiv-margin: -17px 4px -14px 2px !default;
 $grid-rtl-bigger-wrap-rightalign-fltrdiv-margin: -15px 4px -14px -2px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -8px !default;
 $grid-grouparea-font-weight: $font-weight-normal !default;
@@ -1802,6 +1802,10 @@ $grid-checkmark-color: $primary-text-color !default;
       border-right: 1px solid;
     }
 
+    .e-tableborder:has(.e-emptyrow) {
+      border: none;
+    }
+
     .e-virtualtable {
       will-change: transform;
       z-index: 1;
@@ -4080,7 +4084,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;

package/SCSS-Themes/grids/grid/tailwind3.scss

@@ -346,7 +346,7 @@ $grid-rtl-headercelldiv-padding: 0 .4em 0 2.8em !default;
 $grid-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
 $grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
 $grid-ungroup-rtl-padding-right: 0 !default;
-$grid-headercelldiv-padding: 0 20px 0 1px !default;
+$grid-headercelldiv-padding: 0 20px 0 8px !default;
 $grid-headercelldiv-sort-centeralign-padding-right: 5px !default;
 $grid-headercell-div-padding: 0 .4em !default;
 $grid-group-text-width: auto !default;
@@ -368,7 +368,7 @@ $grid-clone-padding: 2px 12px 1px !default;
 $grid-bigger-first-last-rowcell-padding: 8px !default;
 $grid-bigger-content-padding: 16px !default;
 $grid-bigger-group-line-height: 48px !default;
-$grid-bigger-content-right-padding: 16px !default;
+$grid-bigger-content-right-padding: 12px !default;
 $grid-bigger-headercell-font-size: $text-base !default;
 $grid-bigger-content-font-size: $text-base !default;
 $grid-filterbar-border-radius: 4px !default;
@@ -433,7 +433,7 @@ $grid-edit-checkbox-bigger-padding-left: 8px !default;
 $grid-edit-checkbox-bigger-padding-top: 8px !default;
 $grid-cell-focus-shadow: 0 0 0 1px $primary inset !default;
 $grid-cell-focus-border-color: $primary !default;
-$grid-headercelldiv-fltricon-margin: -5px 20px -5px -1px !default;
+$grid-headercelldiv-fltricon-margin: -5px 20px -5px -8px !default;
 $grid-headercelldiv-rightalign-fltricon-margin: -5px 20px -5px 8px !default;
 $grid-rtl-headercelldiv-fltricon-margin: -5px !default;
 $grid-rtl-headercelldiv-rightalign-fltricon-margin: -5px !default;
@@ -460,7 +460,7 @@ $grid-rtl-sortdiv-filtericon-margin: -14px 8px -13px 14px !default;
 $grid-bigger-fltricon-sortdiv-rightalign-margin: -18px 4px -14px -7px !default;
 $grid-bigger-fltricon-sortdiv-margin: -18px 18px -14px 5px !default;
 $grid-rtl-bigger-fltricon-sortdiv-margin: -17px 4px -14px 17px !default;
-$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -17px 4px -14px 17px !default;
+$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -17px 4px -14px 28px !default;
 $grid-column-menu-sub-menu-box-shadow: $shadow !default;
 $grid-bigger-checkbox-filter-min-height: 360px !default;
 $grid-checkbox-filter-min-height: 307px !default;
@@ -534,7 +534,7 @@ $grouped-bigger-text-font-size: $text-sm !default;
 $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
 $grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $text-base !default;
-$grid-rtl-bigger-rightalign-fltrdiv-margin: -17px 4px -14px -10px !default;
+$grid-rtl-bigger-rightalign-fltrdiv-margin: -17px 4px -14px 2px !default;
 $grid-rtl-bigger-wrap-rightalign-fltrdiv-margin: -15px 4px -14px -2px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -8px !default;
 $grid-grouparea-font-weight: $font-weight-normal !default;
@@ -1802,6 +1802,10 @@ $grid-checkmark-color: $primary-text-color !default;
       border-right: 1px solid;
     }
 
+    .e-tableborder:has(.e-emptyrow) {
+      border: none;
+    }
+
     .e-virtualtable {
       will-change: transform;
       z-index: 1;
@@ -4080,7 +4084,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;

package/SCSS-Themes/highcontrast-lite.scss

@@ -54206,7 +54206,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;
@@ -61782,6 +61782,10 @@ $grid-checkmark-color: $selection-font !default;
       border-right: 1px solid;
     }
 
+    .e-tableborder:has(.e-emptyrow) {
+      border: none;
+    }
+
     .e-virtualtable {
       will-change: transform;
       z-index: 1;
@@ -64060,7 +64064,7 @@ $grid-checkmark-color: $selection-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;
@@ -71633,7 +71637,7 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
         }
       }
 
-      @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;
         }
@@ -73589,7 +73593,7 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
         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;
         }
       }
@@ -108056,8 +108060,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 0 !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 0 !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;
@@ -108403,7 +108409,7 @@ $timestamp-border-color: transparent !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;
@@ -108485,6 +108491,9 @@ $timestamp-border-color: transparent !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -108581,6 +108590,13 @@ $timestamp-border-color: transparent !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') {
@@ -108589,10 +108605,6 @@ $timestamp-border-color: transparent !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/highcontrast.scss

@@ -73633,7 +73633,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;
@@ -83982,6 +83982,10 @@ $grid-checkmark-color: $selection-font !default;
       border-right: 1px solid;
     }
 
+    .e-tableborder:has(.e-emptyrow) {
+      border: none;
+    }
+
     .e-virtualtable {
       will-change: transform;
       z-index: 1;
@@ -86260,7 +86264,7 @@ $grid-checkmark-color: $selection-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;
@@ -97408,7 +97412,7 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
         }
       }
 
-      @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;
         }
@@ -99364,7 +99368,7 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
         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;
         }
       }
@@ -140477,8 +140481,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 0 !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 0 !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;
@@ -140824,7 +140830,7 @@ $timestamp-border-color: transparent !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;
@@ -140906,6 +140912,9 @@ $timestamp-border-color: transparent !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -141002,6 +141011,13 @@ $timestamp-border-color: transparent !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') {
@@ -141010,10 +141026,6 @@ $timestamp-border-color: transparent !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;
@@ -141206,6 +141218,7 @@ $timestamp-border-color: transparent !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/interactive-chat/chat-ui/bds-dark-lite.scss

@@ -20,8 +20,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;
@@ -367,7 +369,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;
@@ -449,6 +451,9 @@ $timestamp-border-color: rgba(36, 36, 36, 1) !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -545,6 +550,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') {
@@ -553,10 +565,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;

package/SCSS-Themes/interactive-chat/chat-ui/bds-dark.scss

@@ -20,8 +20,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;
@@ -367,7 +369,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;
@@ -449,6 +451,9 @@ $timestamp-border-color: rgba(36, 36, 36, 1) !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -545,6 +550,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') {
@@ -553,10 +565,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;
@@ -749,6 +757,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/interactive-chat/chat-ui/bds-lite.scss

@@ -20,8 +20,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;
@@ -367,7 +369,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;
@@ -449,6 +451,9 @@ $timestamp-border-color: rgba(36, 36, 36, 1) !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -545,6 +550,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') {
@@ -553,10 +565,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;