Chat: Prompt Suggestions demo - Update options class names (#33338)

Co-authored-by: Ruslan Farkhutdinov <ruslan.farkhutdinov@devexpress.com>

Author: r-farkhutdinov

apps/demos/Demos/Chat/PromptSuggestions/Angular/app/app.component.css

@@ -5,7 +5,7 @@
   gap: 20px;
 }
 
-.options-container {
+.options {
   padding: 20px;
   display: flex;
   flex-direction: column;
@@ -17,7 +17,7 @@
   box-sizing: border-box;
 }
 
-.options {
+.suggestions-options {
   display: flex;
   align-items: center;
   gap: 24px;
@@ -46,6 +46,11 @@
   font-size: var(--dx-font-size-heading-5);
 }
 
+::ng-deep .dx-chat-messagelist-empty-prompt {
+  max-width: 462px;
+  line-height: 20px;
+}
+
 ::ng-deep .dx-template-wrapper > div > p:first-child {
   margin-top: 0;
 }

apps/demos/Demos/Chat/PromptSuggestions/Angular/app/app.component.html

@@ -24,9 +24,9 @@
     </div>
   </dx-chat>
 
-  <div class="options-container">
+  <div class="options">
     <div class="caption">Suggestion Options</div>
-    <div class="options">
+    <div class="suggestions-options">
       <div class="option">
         <dx-switch
           [value]="sendImmediately"

apps/demos/Demos/Chat/PromptSuggestions/React/App.tsx

@@ -103,9 +103,9 @@ export default function App() {
         onMessageEntered={onMessageEntered}
         onInputFieldTextChanged={onInputFieldTextChanged}
       />
-      <div className='options-container'>
+      <div className='options'>
         <div className='caption'>Suggestion Options</div>
-        <div className='options'>
+        <div className='suggestions-options'>
           <div className='option'>
             <Switch
               defaultValue={false}

apps/demos/Demos/Chat/PromptSuggestions/React/styles.css

@@ -5,7 +5,7 @@
   gap: 20px;
 }
 
-.options-container {
+.options {
   padding: 20px;
   display: flex;
   flex-direction: column;
@@ -17,7 +17,7 @@
   box-sizing: border-box;
 }
 
-.options {
+.suggestions-options {
   display: flex;
   align-items: center;
   gap: 24px;
@@ -46,6 +46,11 @@
   font-size: var(--dx-font-size-heading-5);
 }
 
+.dx-chat-messagelist-empty-prompt {
+  max-width: 462px;
+  line-height: 20px;
+}
+
 .dx-chat-messagebubble-content > div > p:first-child {
   margin-top: 0;
 }

apps/demos/Demos/Chat/PromptSuggestions/ReactJs/App.js

@@ -89,9 +89,9 @@ export default function App() {
         onMessageEntered={onMessageEntered}
         onInputFieldTextChanged={onInputFieldTextChanged}
       />
-      <div className="options-container">
+      <div className="options">
         <div className="caption">Suggestion Options</div>
-        <div className="options">
+        <div className="suggestions-options">
           <div className="option">
             <Switch
               defaultValue={false}

apps/demos/Demos/Chat/PromptSuggestions/ReactJs/styles.css

@@ -5,7 +5,7 @@
   gap: 20px;
 }
 
-.options-container {
+.options {
   padding: 20px;
   display: flex;
   flex-direction: column;
@@ -17,7 +17,7 @@
   box-sizing: border-box;
 }
 
-.options {
+.suggestions-options {
   display: flex;
   align-items: center;
   gap: 24px;
@@ -46,6 +46,11 @@
   font-size: var(--dx-font-size-heading-5);
 }
 
+.dx-chat-messagelist-empty-prompt {
+  max-width: 462px;
+  line-height: 20px;
+}
+
 .dx-chat-messagebubble-content > div > p:first-child {
   margin-top: 0;
 }

apps/demos/Demos/Chat/PromptSuggestions/Vue/App.vue

@@ -24,9 +24,9 @@
     </template>
   </DxChat>
 
-  <div class="options-container">
+  <div class="options">
     <div class="caption">Suggestion Options</div>
-    <div class="options">
+    <div class="suggestions-options">
       <div class="option">
         <DxSwitch
           :value="sendImmediately"
@@ -185,7 +185,7 @@ function onSuggestionItemClick(e: { itemData?: { text: string; prompt: string }
   gap: 20px;
 }
 
-.options-container {
+.options {
   padding: 20px;
   display: flex;
   flex-direction: column;
@@ -197,7 +197,7 @@ function onSuggestionItemClick(e: { itemData?: { text: string; prompt: string }
   box-sizing: border-box;
 }
 
-.options {
+.suggestions-options {
   display: flex;
   align-items: center;
   gap: 24px;
@@ -226,6 +226,11 @@ function onSuggestionItemClick(e: { itemData?: { text: string; prompt: string }
   font-size: var(--dx-font-size-heading-5);
 }
 
+.dx-chat-messagelist-empty-prompt {
+  max-width: 462px;
+  line-height: 20px;
+}
+
 .dx-chat-messagebubble-content > div > p:first-child {
   margin-top: 0;
 }

apps/demos/Demos/Chat/PromptSuggestions/jQuery/index.html

@@ -34,10 +34,10 @@
     <div class="demo-container">
       <div id="dx-ai-chat"></div>
 
-      <div class="options-container">
+      <div class="options">
         <div class="caption">Suggestion Options</div>
 
-        <div class="options">
+        <div class="suggestions-options">
           <div class="option">
             <div id="send-immediately"></div>
             <span>Send Immediately</span>

apps/demos/Demos/Chat/PromptSuggestions/jQuery/styles.css

@@ -5,7 +5,7 @@
   gap: 20px;
 }
 
-.options-container {
+.options {
   padding: 20px;
   display: flex;
   flex-direction: column;
@@ -17,7 +17,7 @@
   box-sizing: border-box;
 }
 
-.options {
+.suggestions-options {
   display: flex;
   align-items: center;
   gap: 24px;
@@ -46,6 +46,11 @@
   font-size: var(--dx-font-size-heading-5);
 }
 
+.dx-chat-messagelist-empty-prompt {
+  max-width: 462px;
+  line-height: 20px;
+}
+
 .dx-chat-messagebubble-content,
 .chat-messagebubble-text {
   display: flex;