Skip to content

Commit 18783d8

Browse files
simeonoffsimeonoff
authored
Merge pull request #3960 from IgniteUI/apetrov/chat-styling-sample
fix(chat): update styling sample
2 parents 8e67530 + fe836c6 commit 18783d8

6 files changed

Lines changed: 155 additions & 151 deletions

File tree

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
"igniteui-grid-lite": "^0.7.1",
8383
"igniteui-i18n-resources": "^1.0.4",
8484
"igniteui-live-editing": "^3.4.3",
85-
"igniteui-webcomponents": "^7.0.0",
85+
"igniteui-webcomponents": "^7.1.3",
8686
"marked": "^17.0.1",
8787
"marked-shiki": "^1.2.1",
8888
"minireset.css": "0.0.6",

‎src/app/interactions/chat/styling-sample/layout.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
igx-chat {
2+
height: 870px;
3+
4+
::ng-deep {
5+
6+
igc-chat {
7+
border-radius: 8px;
8+
}
9+
10+
igc-chat::part(message-header) {
11+
color: #e07a00;
12+
}
13+
14+
igc-chat::part(suggestion) {
15+
background: linear-gradient(135deg, #ffb703, #fb8500);
16+
color: #3a2a1a;
17+
margin: .125rem;
18+
border-radius: 20px;
19+
}
20+
21+
igc-chat::part(suggestions-header) {
22+
color: #70bc12;
23+
}
24+
25+
igc-chat::part(input-area) {
26+
border-color: #d8ccba;
27+
}
28+
29+
igc-chat::part(text-input) {
30+
--box-background: #e5dccd;
31+
--box-background-hover: #efe7dc;
32+
--box-background-focus: #efe7dc;
33+
--idle-button-line-color: #d8ccba;
34+
--hover-bottom-line-color: #d8ccba;
35+
--focused-bottom-line-color: #f3b75f;
36+
}
37+
38+
igc-chat::part(send-button) {
39+
--background: #f3b75f;
40+
--foreground: #3a2a1a;
41+
--hover-background: #f3b75f;
42+
--hover-foreground: #3a2a1a;
43+
--disabled-background: #e5dccd;
44+
--disabled-foreground: #846d58;
45+
}
46+
}
47+
}

‎src/app/interactions/chat/styling-sample/styling-sample.component.html‎

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
11
<div class="sample-column">
2-
<igx-chat
3-
[options]="options()"
4-
[messages]="messages()"
5-
[draftMessage]="draftMessage"
6-
[templates]="{ messageHeader: messageHeader }"
7-
(messageCreated)="onMessageCreated($event)">
8-
9-
<ng-template #messageHeader let-message>
10-
@if (message.sender !== 'user') {
11-
<div style="display: flex; align-items: center; gap: 8px;">
12-
<igx-avatar
13-
shape="circle"
14-
src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg"
15-
size="small"
16-
>
17-
</igx-avatar>
18-
<span style="font-weight: bold; color: #c00000;"
19-
>Customer Support</span>
20-
</div>
21-
}
22-
</ng-template>
23-
</igx-chat>
24-
</div>
2+
<igx-chat [options]="options()" [messages]="messages()" [draftMessage]="draftMessage"
3+
[templates]="{ messageHeader: messageHeader }" (messageCreated)="onMessageCreated($event)">
4+
<ng-template #messageHeader let-message>
5+
@if (message.sender !== 'user') {
6+
<div style="display: flex; align-items: center; gap: 8px;">
7+
<igx-avatar shape="circle" src="assets/images/men/1.jpg" size="small">
8+
</igx-avatar>
9+
<span>Customer Support</span>
10+
</div>
11+
}
12+
</ng-template>
13+
</igx-chat>
14+
</div>

‎src/app/interactions/chat/styling-sample/styling-sample.component.scss‎

Lines changed: 22 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,23 @@
1-
// @use "igniteui-angular/theming" as *;
2-
igx-chat {
3-
height: 870px;
4-
5-
::ng-deep {
6-
igc-chat::part(header) {
7-
display: flex;
8-
align-items: center;
9-
padding: 10px;
10-
border-bottom: 1px solid var(--ig-gray-300);
11-
background-color: var(--ig-gray-200);
12-
font-family: 'Franklin Gothic Medium';
13-
color: var(--ig-gray-700);
14-
}
15-
16-
igc-chat::part(message-container) {
17-
background: var(--igc-chat-bubble-bg, #eee);
18-
color: var(--igc-chat-text-color, #222);
19-
padding: 12px;
20-
border-radius: 8px;
21-
transition: background .15s;
22-
}
23-
24-
igc-chat::part(message-sent) {
25-
background: var(--igc-chat-sent-bubble-bg, #e6f4ff);
26-
color: var(--igc-chat-sent-text-color, #03396b);
27-
}
28-
29-
igc-chat::part(message-header) {
30-
color: #c00000;
31-
font-weight: bold;
32-
margin: 8px;
33-
}
34-
35-
igc-chat::part(message-actions-container) {
36-
border-top: 1px solid var(--ig-gray-300);
37-
}
38-
39-
igc-chat::part(suggestion) {
40-
background-color: var(--ig-primary-100);
41-
color: var(--ig-primary-800);
42-
margin: .125rem;
43-
border-radius: 20px;
44-
cursor: pointer;
45-
transition: background-color 0.3s, color 0.3s;
46-
}
47-
48-
igc-chat::part(message-attachment) {
49-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
50-
background: var(--igc-chat-sent-bubble-bg);
51-
}
52-
53-
igc-chat::part(input-attachments-container) {
54-
border: 5px solid var(--ig-gray-300);
55-
}
56-
}
1+
@use "igniteui-angular/theming" as *;
2+
@use "layout.scss";
3+
4+
$custom-chat-theme: chat-theme(
5+
$background: #f7f5f1,
6+
$header-background: linear-gradient(135deg, #2b2b2b, #4a4a4a),
7+
$header-color: #ffc641,
8+
$sent-message-background: linear-gradient(135deg, #ffb703, #fb8500),
9+
$sent-message-color: #1a1a1a,
10+
$received-message-background: #e2d8c9,
11+
$received-message-color: #2b2b2b,
12+
$message-actions-color: #b26a2a,
13+
$message-border-radius: 8px,
14+
$image-background: #fff3d6,
15+
$image-border: #fb8500,
16+
$image-attachment-icon: #fb8500,
17+
$chat-input-border: #e2d8c9,
18+
$progress-indicator-color: #ffc641,
19+
);
20+
21+
:host {
22+
@include tokens($custom-chat-theme);
5723
}

‎src/app/interactions/chat/styling-sample/styling-sample.component.ts‎

Lines changed: 68 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -3,83 +3,84 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar';
33
import { IgxChatComponent, IgxChatOptions } from 'igniteui-angular/chat';
44

55
@Component({
6-
selector: 'app-chat-styling-sample',
7-
styleUrls: ['./styling-sample.component.scss'],
8-
templateUrl: './styling-sample.component.html',
9-
imports: [IgxAvatarComponent, IgxChatComponent],
10-
schemas: [CUSTOM_ELEMENTS_SCHEMA]
6+
selector: 'app-chat-styling-sample',
7+
styleUrls: ['./styling-sample.component.scss'],
8+
templateUrl: './styling-sample.component.html',
9+
imports: [IgxAvatarComponent, IgxChatComponent],
10+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
1111
})
12+
1213
export class ChatStylingSampleComponent {
13-
public draftMessage = { text: '', attachments: [] };
14+
public draftMessage = { text: '', attachments: [] };
1415

15-
public messages = signal([
16-
{
17-
id: '1',
18-
text: `Hi, I have a question about my recent order, #7890.`,
19-
sender: 'user',
20-
timestamp: (Date.now() - 3500000).toString()
21-
},
22-
{
23-
id: '2',
24-
text: `Hello! I can help with that. What is your question regarding order #7890?`,
25-
sender: 'support',
26-
timestamp: (Date.now() - 3400000).toString()
27-
},
16+
public messages = signal([
17+
{
18+
id: '1',
19+
text: `Hi, I have a question about my recent order, #7890.`,
20+
sender: 'user',
21+
timestamp: (Date.now() - 3500000).toString()
22+
},
23+
{
24+
id: '2',
25+
text: `Hello! I can help with that. What is your question regarding order #7890?`,
26+
sender: 'support',
27+
timestamp: (Date.now() - 3400000).toString()
28+
},
29+
{
30+
id: '3',
31+
text: `The tracking status shows 'delivered', but I haven't received it yet. Can you confirm the delivery location?`,
32+
sender: 'user',
33+
timestamp: (Date.now() - 3300000).toString()
34+
},
35+
{
36+
id: '4',
37+
text: `I've reviewed the delivery details. It seems the package was left in a different spot. Here's a photo from our delivery driver showing where it was placed. Please check your porch and side door.`,
38+
sender: 'support',
39+
timestamp: (Date.now() - 3200000).toString(),
40+
attachments: [
2841
{
29-
id: '3',
30-
text: `The tracking status shows 'delivered', but I haven't received it yet. Can you confirm the delivery location?`,
31-
sender: 'user',
32-
timestamp: (Date.now() - 3300000).toString()
33-
},
34-
{
35-
id: '4',
36-
text: `I've reviewed the delivery details. It seems the package was left in a different spot. Here's a photo from our delivery driver showing where it was placed. Please check your porch and side door.`,
37-
sender: 'support',
38-
timestamp: (Date.now() - 3200000).toString(),
39-
attachments: [
40-
{
41-
id: 'delivery-location-image',
42-
name: 'Delivery location',
43-
url: 'https://media.istockphoto.com/id/1207972183/photo/merchandise-delivery-from-online-ordering.jpg?s=612x612&w=0&k=20&c=cGcMqd_8FALv4Tueh7sllYZuDXurkfkqoJf6IAIWhJk=',
44-
type: 'image'
45-
}
46-
]
42+
id: 'delivery-location-image',
43+
name: 'Delivery location',
44+
url: 'https://media.istockphoto.com/id/1207972183/photo/merchandise-delivery-from-online-ordering.jpg?s=612x612&w=0&k=20&c=cGcMqd_8FALv4Tueh7sllYZuDXurkfkqoJf6IAIWhJk=',
45+
type: 'image'
4746
}
48-
]);
47+
]
48+
}
49+
]);
4950

50-
public options = signal<IgxChatOptions>({
51-
disableAutoScroll: false,
52-
disableInputAttachments: false,
53-
suggestions: [`It's there. Thanks.`, `It's not there.`],
54-
inputPlaceholder: 'Type your message here...',
55-
headerText: 'Customer Support',
56-
adoptRootStyles: true
57-
});
51+
public options = signal<IgxChatOptions>({
52+
disableAutoScroll: false,
53+
disableInputAttachments: false,
54+
suggestions: [`It's there. Thanks.`, `It's not there.`],
55+
inputPlaceholder: 'Type your message here...',
56+
headerText: 'Customer Support',
57+
adoptRootStyles: true
58+
});
5859

59-
constructor() {}
60+
constructor() { }
6061

61-
public onMessageCreated(msg: any): void {
62-
const newMessage = msg;
63-
this.messages.update(messages => ([...messages, newMessage]));
64-
this.options.update(options => ({ ...options, isTyping: true, suggestions: [] }));
62+
public onMessageCreated(msg: any): void {
63+
const newMessage = msg;
64+
this.messages.update(messages => ([...messages, newMessage]));
65+
this.options.update(options => ({ ...options, isTyping: true, suggestions: [] }));
6566

6667

67-
const messageText = msg.text.toLowerCase();
68-
const responseText = messageText.includes('not there')
69-
? `We're sorry to hear that. Checking with the delivery service for more details.`
70-
: messageText.includes('it\'s there')
71-
? `Glad to hear that! If you have any more questions or need further assistance, feel free to ask. We're here to help!`
72-
: `Our support team is currently unavailable. We'll get back to you as soon as possible.`;
68+
const messageText = msg.text.toLowerCase();
69+
const responseText = messageText.includes('not there')
70+
? `We're sorry to hear that. Checking with the delivery service for more details.`
71+
: messageText.includes('it\'s there')
72+
? `Glad to hear that! If you have any more questions or need further assistance, feel free to ask. We're here to help!`
73+
: `Our support team is currently unavailable. We'll get back to you as soon as possible.`;
7374

74-
const responseMessage = {
75-
id: Date.now().toString(),
76-
text: responseText,
77-
sender: 'support',
78-
timestamp: Date.now().toString()
79-
};
75+
const responseMessage = {
76+
id: Date.now().toString(),
77+
text: responseText,
78+
sender: 'support',
79+
timestamp: Date.now().toString()
80+
};
8081

81-
this.draftMessage = { text: '', attachments: [] };
82-
this.messages.update(messages => [...messages, responseMessage]);
83-
this.options.update(options => ({ ...options, isTyping: false }));
84-
}
82+
this.draftMessage = { text: '', attachments: [] };
83+
this.messages.update(messages => [...messages, responseMessage]);
84+
this.options.update(options => ({ ...options, isTyping: false }));
85+
}
8586
}

0 commit comments

Comments
 (0)