Skip to content

Commit a2d5eb3

Browse files
author
Ruslan Farkhutdinov
committed
Chat: Message streaming - remove unused styles and fix notes
1 parent e77d683 commit a2d5eb3

File tree

9 files changed

+45
-90
lines changed

9 files changed

+45
-90
lines changed

‎apps/demos/Demos/Chat/MessageStreaming/Angular/app/app.component.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
font-weight: revert;
4040
}
4141

42-
::ng-deep .dx-chat-suggestion-cards {
42+
::ng-deep .chat-suggestion-cards {
4343
display: flex;
4444
flex-wrap: wrap;
4545
justify-content: center;
@@ -48,7 +48,7 @@
4848
width: 100%;
4949
}
5050

51-
::ng-deep .dx-chat-suggestion-card {
51+
::ng-deep .chat-suggestion-card {
5252
border-radius: 12px;
5353
padding: 16px;
5454
border: 1px solid #EBEBEB;
@@ -65,20 +65,20 @@
6565
width: 230px;
6666
}
6767

68-
::ng-deep .dx-chat-suggestion-card:hover {
68+
::ng-deep .chat-suggestion-card:hover {
6969
border: 1px solid #E0E0E0;
7070
background: #F5F5F5;
7171
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02);
7272
}
7373

74-
::ng-deep .dx-chat-suggestion-card-title {
74+
::ng-deep .chat-suggestion-card-title {
7575
color: #242424;
7676
font-size: 12px;
7777
font-weight: 600;
7878
line-height: 16px;
7979
}
8080

81-
::ng-deep .dx-chat-suggestion-card-prompt {
81+
::ng-deep .chat-suggestion-card-prompt {
8282
color: #616161;
8383
font-size: 12px;
8484
font-weight: 400;

‎apps/demos/Demos/Chat/MessageStreaming/Angular/app/app.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@
2424
<div *dxTemplate="let data of 'emptyViewTemplate'">
2525
<div class="dx-chat-messagelist-empty-message">{{ data.texts.message }}</div>
2626
<div class="dx-chat-messagelist-empty-prompt">{{ data.texts.prompt }}</div>
27-
<div class="dx-chat-suggestion-cards">
27+
<div class="chat-suggestion-cards">
2828
@for (card of suggestionCards; track card.title) {
2929
<button
3030
type="button"
31-
class="dx-chat-suggestion-card"
31+
class="chat-suggestion-card"
3232
(click)="onSuggestionClick(card.prompt)"
3333
>
34-
<div class="dx-chat-suggestion-card-title">{{ card.title }}</div>
35-
<div class="dx-chat-suggestion-card-prompt">{{ card.description }}</div>
34+
<div class="chat-suggestion-card-title">{{ card.title }}</div>
35+
<div class="chat-suggestion-card-prompt">{{ card.description }}</div>
3636
</button>
3737
}
3838
</div>

‎apps/demos/Demos/Chat/MessageStreaming/React/EmptyView.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@ const EmptyView: FC<EmptyViewProps> = ({ texts, onSuggestionClick }: EmptyViewPr
1212
<div>
1313
<div className='dx-chat-messagelist-empty-message'>{texts.message}</div>
1414
<div className='dx-chat-messagelist-empty-prompt'>{texts.prompt}</div>
15-
<div className='dx-chat-suggestion-cards'>
15+
<div className='chat-suggestion-cards'>
1616
{suggestionCards.map((card) => (
1717
<button
1818
key={card.title}
1919
type='button'
20-
className='dx-chat-suggestion-card'
20+
className='chat-suggestion-card'
2121
onClick={() => onSuggestionClick(card.prompt)}
2222
>
23-
<div className='dx-chat-suggestion-card-title'>{card.title}</div>
24-
<div className='dx-chat-suggestion-card-prompt'>{card.description}</div>
23+
<div className='chat-suggestion-card-title'>{card.title}</div>
24+
<div className='chat-suggestion-card-prompt'>{card.description}</div>
2525
</button>
2626
))}
2727
</div>

‎apps/demos/Demos/Chat/MessageStreaming/React/styles.css‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,11 @@
2121
flex-direction: column;
2222
}
2323

24-
.bubble-button-container {
25-
display: none;
26-
}
27-
2824
.dx-button {
2925
display: inline-block;
3026
color: var(--dx-color-icon);
3127
}
3228

33-
.dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .bubble-button-container {
34-
display: flex;
35-
gap: 4px;
36-
margin-top: 8px;
37-
}
38-
3929
.dx-chat-messagebubble-content > div > p:first-child {
4030
margin-top: 0;
4131
}
@@ -54,12 +44,7 @@
5444
font-weight: revert;
5545
}
5646

57-
.chat-disabled .dx-chat-messagebox {
58-
opacity: 0.5;
59-
pointer-events: none;
60-
}
61-
62-
.dx-chat-suggestion-cards {
47+
.chat-suggestion-cards {
6348
display: flex;
6449
flex-wrap: wrap;
6550
justify-content: center;
@@ -68,7 +53,7 @@
6853
width: 100%;
6954
}
7055

71-
.dx-chat-suggestion-card {
56+
.chat-suggestion-card {
7257
border-radius: 12px;
7358
padding: 16px;
7459
border: 1px solid #EBEBEB;
@@ -85,20 +70,20 @@
8570
width: 230px;
8671
}
8772

88-
.dx-chat-suggestion-card:hover {
73+
.chat-suggestion-card:hover {
8974
border: 1px solid #E0E0E0;
9075
background: #F5F5F5;
9176
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02);
9277
}
9378

94-
.dx-chat-suggestion-card-title {
79+
.chat-suggestion-card-title {
9580
color: #242424;
9681
font-size: 12px;
9782
font-weight: 600;
9883
line-height: 16px;
9984
}
10085

101-
.dx-chat-suggestion-card-prompt {
86+
.chat-suggestion-card-prompt {
10287
color: #616161;
10388
font-size: 12px;
10489
font-weight: 400;

‎apps/demos/Demos/Chat/MessageStreaming/ReactJs/EmptyView.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@ const EmptyView = ({ texts, onSuggestionClick }) => (
55
<div>
66
<div className="dx-chat-messagelist-empty-message">{texts.message}</div>
77
<div className="dx-chat-messagelist-empty-prompt">{texts.prompt}</div>
8-
<div className="dx-chat-suggestion-cards">
8+
<div className="chat-suggestion-cards">
99
{suggestionCards.map((card) => (
1010
<button
1111
key={card.title}
1212
type="button"
13-
className="dx-chat-suggestion-card"
13+
className="chat-suggestion-card"
1414
onClick={() => onSuggestionClick(card.prompt)}
1515
>
16-
<div className="dx-chat-suggestion-card-title">{card.title}</div>
17-
<div className="dx-chat-suggestion-card-prompt">{card.description}</div>
16+
<div className="chat-suggestion-card-title">{card.title}</div>
17+
<div className="chat-suggestion-card-prompt">{card.description}</div>
1818
</button>
1919
))}
2020
</div>

‎apps/demos/Demos/Chat/MessageStreaming/ReactJs/styles.css‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,11 @@
2121
flex-direction: column;
2222
}
2323

24-
.bubble-button-container {
25-
display: none;
26-
}
27-
2824
.dx-button {
2925
display: inline-block;
3026
color: var(--dx-color-icon);
3127
}
3228

33-
.dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .bubble-button-container {
34-
display: flex;
35-
gap: 4px;
36-
margin-top: 8px;
37-
}
38-
3929
.dx-chat-messagebubble-content > div > p:first-child {
4030
margin-top: 0;
4131
}
@@ -54,12 +44,7 @@
5444
font-weight: revert;
5545
}
5646

57-
.chat-disabled .dx-chat-messagebox {
58-
opacity: 0.5;
59-
pointer-events: none;
60-
}
61-
62-
.dx-chat-suggestion-cards {
47+
.chat-suggestion-cards {
6348
display: flex;
6449
flex-wrap: wrap;
6550
justify-content: center;
@@ -68,7 +53,7 @@
6853
width: 100%;
6954
}
7055

71-
.dx-chat-suggestion-card {
56+
.chat-suggestion-card {
7257
border-radius: 12px;
7358
padding: 16px;
7459
border: 1px solid #EBEBEB;
@@ -85,20 +70,20 @@
8570
width: 230px;
8671
}
8772

88-
.dx-chat-suggestion-card:hover {
73+
.chat-suggestion-card:hover {
8974
border: 1px solid #E0E0E0;
9075
background: #F5F5F5;
9176
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02);
9277
}
9378

94-
.dx-chat-suggestion-card-title {
79+
.chat-suggestion-card-title {
9580
color: #242424;
9681
font-size: 12px;
9782
font-weight: 600;
9883
line-height: 16px;
9984
}
10085

101-
.dx-chat-suggestion-card-prompt {
86+
.chat-suggestion-card-prompt {
10287
color: #616161;
10388
font-size: 12px;
10489
font-weight: 400;

‎apps/demos/Demos/Chat/MessageStreaming/Vue/App.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,16 @@
2525
<template #emptyView="{ data }">
2626
<div class="dx-chat-messagelist-empty-message">{{ data.texts.message }}</div>
2727
<div class="dx-chat-messagelist-empty-prompt">{{ data.texts.prompt }}</div>
28-
<div class="dx-chat-suggestion-cards">
28+
<div class="chat-suggestion-cards">
2929
<button
3030
v-for="card in suggestionCards"
3131
:key="card.title"
3232
type="button"
33-
class="dx-chat-suggestion-card"
33+
class="chat-suggestion-card"
3434
@click="sendSuggestion(card.prompt)"
3535
>
36-
<div class="dx-chat-suggestion-card-title">{{ card.title }}</div>
37-
<div class="dx-chat-suggestion-card-prompt">{{ card.description }}</div>
36+
<div class="chat-suggestion-card-title">{{ card.title }}</div>
37+
<div class="chat-suggestion-card-prompt">{{ card.description }}</div>
3838
</button>
3939
</div>
4040
</template>
@@ -235,7 +235,7 @@ function sendSuggestion(prompt: string): void {
235235
font-weight: revert;
236236
}
237237
238-
.dx-chat-suggestion-cards {
238+
.chat-suggestion-cards {
239239
display: flex;
240240
flex-wrap: wrap;
241241
justify-content: center;
@@ -244,7 +244,7 @@ function sendSuggestion(prompt: string): void {
244244
width: 100%;
245245
}
246246
247-
.dx-chat-suggestion-card {
247+
.chat-suggestion-card {
248248
border-radius: 12px;
249249
padding: 16px;
250250
border: 1px solid #EBEBEB;
@@ -261,20 +261,20 @@ function sendSuggestion(prompt: string): void {
261261
width: 230px;
262262
}
263263
264-
.dx-chat-suggestion-card:hover {
264+
.chat-suggestion-card:hover {
265265
border: 1px solid #E0E0E0;
266266
background: #F5F5F5;
267267
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02);
268268
}
269269
270-
.dx-chat-suggestion-card-title {
270+
.chat-suggestion-card-title {
271271
color: #242424;
272272
font-size: 12px;
273273
font-weight: 600;
274274
line-height: 16px;
275275
}
276276
277-
.dx-chat-suggestion-card-prompt {
277+
.chat-suggestion-card-prompt {
278278
color: #616161;
279279
font-size: 12px;
280280
font-weight: 400;

‎apps/demos/Demos/Chat/MessageStreaming/jQuery/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -276,10 +276,10 @@ $(() => {
276276
type: 'button',
277277
tabindex: 0,
278278
})
279-
.addClass('dx-chat-suggestion-card')
279+
.addClass('chat-suggestion-card')
280280
.append(
281-
$('<div>').addClass('dx-chat-suggestion-card-title').text(card.title),
282-
$('<div>').addClass('dx-chat-suggestion-card-prompt').text(card.description),
281+
$('<div>').addClass('chat-suggestion-card-title').text(card.title),
282+
$('<div>').addClass('chat-suggestion-card-prompt').text(card.description),
283283
)
284284
.on('click', (e) => {
285285
sendSuggestion(card.prompt, e);
@@ -315,7 +315,7 @@ $(() => {
315315
renderMessageContent(message, element);
316316
},
317317
emptyViewTemplate(data) {
318-
const $suggestionCards = $('<div>').addClass('dx-chat-suggestion-cards');
318+
const $suggestionCards = $('<div>').addClass('chat-suggestion-cards');
319319

320320
suggestionCards.forEach((card) => {
321321
$suggestionCards.append(createSuggestionCard(card));

‎apps/demos/Demos/Chat/MessageStreaming/jQuery/styles.css‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,11 @@
2121
flex-direction: column;
2222
}
2323

24-
.bubble-button-container {
25-
display: none;
26-
}
27-
2824
.dx-button {
2925
display: inline-block;
3026
color: var(--dx-color-icon);
3127
}
3228

33-
.dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .bubble-button-container {
34-
display: flex;
35-
gap: 4px;
36-
margin-top: 8px;
37-
}
38-
3929
.dx-chat-messagebubble-content > div > p:first-child {
4030
margin-top: 0;
4131
}
@@ -54,12 +44,7 @@
5444
font-weight: revert;
5545
}
5646

57-
.chat-disabled .dx-chat-messagebox {
58-
opacity: 0.5;
59-
pointer-events: none;
60-
}
61-
62-
.dx-chat-suggestion-cards {
47+
.chat-suggestion-cards {
6348
display: flex;
6449
flex-wrap: wrap;
6550
justify-content: center;
@@ -68,7 +53,7 @@
6853
width: 100%;
6954
}
7055

71-
.dx-chat-suggestion-card {
56+
.chat-suggestion-card {
7257
border-radius: 12px;
7358
padding: 16px;
7459
border: 1px solid #EBEBEB;
@@ -85,20 +70,20 @@
8570
width: 230px;
8671
}
8772

88-
.dx-chat-suggestion-card:hover {
73+
.chat-suggestion-card:hover {
8974
border: 1px solid #E0E0E0;
9075
background: #F5F5F5;
9176
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02);
9277
}
9378

94-
.dx-chat-suggestion-card-title {
79+
.chat-suggestion-card-title {
9580
color: #242424;
9681
font-size: 12px;
9782
font-weight: 600;
9883
line-height: 16px;
9984
}
10085

101-
.dx-chat-suggestion-card-prompt {
86+
.chat-suggestion-card-prompt {
10287
color: #616161;
10388
font-size: 12px;
10489
font-weight: 400;

0 commit comments

Comments
 (0)