AIChat: add css

Author: anna-shakhova

packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss

@@ -2,6 +2,7 @@
 @use "../mixins" as *;
 @use 'variables' as *;
 @use 'layout/cell' as *;
+@use "layout/ai-chat" as *;
 
 // adduse
 

packages/devextreme-scss/scss/widgets/base/gridBase/_mixins.scss

@@ -0,0 +1 @@
+@forward 'layout/ai-chat/mixins';

packages/devextreme-scss/scss/widgets/base/gridBase/layout/ai-chat/_index.scss

@@ -0,0 +1,16 @@
+@use "../../../icon_fonts" as *;
+
+.dx-ai-chat .dx-popup-content {
+  padding: 0;
+}
+
+.dx-ai-chat__content {
+  border: none;
+  min-height: auto;
+}
+
+.dx-ai-chat-messagelist-empty-image {
+  @include dx-icon(sparkle);
+
+  border-radius: 999em;
+}

packages/devextreme-scss/scss/widgets/base/gridBase/layout/ai-chat/_mixins.scss

@@ -0,0 +1,11 @@
+@use "sass:math";
+
+@mixin ai-chat-messagelist-empty(
+  $messagelist-empty-icon-color,
+  $messagelist-empty-icon-background-color,
+) {
+  .dx-ai-chat-messagelist-empty-image {
+    color: $messagelist-empty-icon-color;
+    background-color: $messagelist-empty-icon-background-color;
+  }
+}

packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss

@@ -21,6 +21,7 @@
 @use "../button/colors" as *;
 @use "../validation/colors" as *;
 @use "../typography/sizes" as *;
+@use "../../base/gridBase/mixins" as *;
 
 // adduse
 @use "../scrollable";
@@ -1055,4 +1056,9 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
     height: $fluent-grid-base-ai-prompt-editor-progressbar-height;
     border-radius: 0;
   }
+
+  @include ai-chat-messagelist-empty(
+    $button-default-bg,
+    $button-default-outlined-hover-bg,
+  )
 }

packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss

@@ -24,6 +24,7 @@
 @use "../scrollable";
 @use "../overlay";
 @use "../pagination";
+@use "../../base/gridBase/mixins" as *;
 
 $generic-grid-base-border-hidden: 1px solid transparent;
 $generic-grid-base-row-border: 1px solid transparent;
@@ -898,4 +899,9 @@ $generic-grid-base-cell-input-height: math.round($generic-base-line-height * $ge
     border: none;
     border-radius: 0;
   }
+
+  @include ai-chat-messagelist-empty(
+    $button-default-bg,
+    $button-default-outlined-bg-hover,
+  )
 }

packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss

@@ -21,6 +21,7 @@
 @use "../button/sizes" as *;
 @use "../validation/colors" as *;
 @use "../typography/sizes" as *;
+@use "../../base/gridBase/mixins" as *;
 
 // adduse
 @use "variables" as *;
@@ -1032,4 +1033,9 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
     height: $material-grid-base-ai-prompt-editor-progressbar-height;
     border-radius: 0;
   }
+
+  @include ai-chat-messagelist-empty(
+    $button-default-bg,
+    $button-default-outlined-hover-bg,
+  )
 }

packages/devextreme/js/__internal/grids/grid_core/ai_chat/ai_chat.ts

@@ -36,7 +36,8 @@ export class AIChat {
       ...DEFAULT_CHAT_OPTIONS,
       emptyViewTemplate: (_data, container): void => {
         const $image = $('<div>')
-          .addClass(CHAT_MESSAGELIST_EMPTY_IMAGE_CLASS);
+          .addClass(CHAT_MESSAGELIST_EMPTY_IMAGE_CLASS)
+          .addClass(CLASSES.aiChatEmptyImage);
         const $message = $('<div>')
           .addClass(CHAT_MESSAGELIST_EMPTY_MESSAGE_CLASS)
           .text(messageLocalization.format('dxDataGrid-aiAChatEmptyViewMessage'));

packages/devextreme/js/__internal/grids/grid_core/ai_chat/const.ts

@@ -19,6 +19,7 @@ export const CLASSES = {
   aiChat: 'dx-ai-chat',
   aiDialog: 'dx-aidialog',
   aiChatContent: 'dx-ai-chat__content',
+  aiChatEmptyImage: 'dx-ai-chat-messagelist-empty-image',
 };
 
 export const CLEAR_CHAT_ICON = 'chatdismiss';