diff --git a/package-lock.json b/package-lock.json index 7668ae918..cf2904984 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,7 +45,7 @@ "igniteui-grid-lite": "^0.7.1", "igniteui-i18n-resources": "^1.0.4", "igniteui-live-editing": "^3.4.3", - "igniteui-webcomponents": "^7.0.0", + "igniteui-webcomponents": "^7.1.3", "marked": "^17.0.1", "marked-shiki": "^1.2.1", "minireset.css": "0.0.6", @@ -10696,9 +10696,9 @@ } }, "node_modules/igniteui-webcomponents": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-7.1.1.tgz", - "integrity": "sha512-hL3/8wNgLRInZUylpD2MLj2wgjkSYfjAIoSit86AmqPUYTl7RndngPtdjNZvFUK+sab4Rvu1bvxEUsp+AALr9g==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-7.1.3.tgz", + "integrity": "sha512-iG4xBzooIOxtnAG8VIg39zKVWoo9jy2iEK3CDLGZYb9hU1LZx+4SAOPFkB9FSp15dgR4ql6kGKYf93T8oK0sdw==", "license": "MIT", "dependencies": { "@floating-ui/dom": "^1.7.0", diff --git a/package.json b/package.json index c488adeb8..983ccb6ac 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "igniteui-grid-lite": "^0.7.1", "igniteui-i18n-resources": "^1.0.4", "igniteui-live-editing": "^3.4.3", - "igniteui-webcomponents": "^7.0.0", + "igniteui-webcomponents": "^7.1.3", "marked": "^17.0.1", "marked-shiki": "^1.2.1", "minireset.css": "0.0.6", diff --git a/src/app/interactions/chat/styling-sample/layout.scss b/src/app/interactions/chat/styling-sample/layout.scss new file mode 100644 index 000000000..4fa010447 --- /dev/null +++ b/src/app/interactions/chat/styling-sample/layout.scss @@ -0,0 +1,47 @@ +igx-chat { + height: 870px; + + ::ng-deep { + + igc-chat { + border-radius: 8px; + } + + igc-chat::part(message-header) { + color: #e07a00; + } + + igc-chat::part(suggestion) { + background: linear-gradient(135deg, #ffb703, #fb8500); + color: #3a2a1a; + margin: .125rem; + border-radius: 20px; + } + + igc-chat::part(suggestions-header) { + color: #70bc12; + } + + igc-chat::part(input-area) { + border-color: #d8ccba; + } + + igc-chat::part(text-input) { + --box-background: #e5dccd; + --box-background-hover: #efe7dc; + --box-background-focus: #efe7dc; + --idle-button-line-color: #d8ccba; + --hover-bottom-line-color: #d8ccba; + --focused-bottom-line-color: #f3b75f; + } + + igc-chat::part(send-button) { + --background: #f3b75f; + --foreground: #3a2a1a; + --hover-background: #f3b75f; + --hover-foreground: #3a2a1a; + --disabled-background: #e5dccd; + --disabled-foreground: #846d58; + } + } +} \ No newline at end of file diff --git a/src/app/interactions/chat/styling-sample/styling-sample.component.html b/src/app/interactions/chat/styling-sample/styling-sample.component.html index c5c982950..212d8101f 100644 --- a/src/app/interactions/chat/styling-sample/styling-sample.component.html +++ b/src/app/interactions/chat/styling-sample/styling-sample.component.html @@ -1,24 +1,14 @@
- - - - @if (message.sender !== 'user') { -
- - - Customer Support -
- } - - -
+ + + @if (message.sender !== 'user') { +
+ + + Customer Support +
+ } + + + \ No newline at end of file diff --git a/src/app/interactions/chat/styling-sample/styling-sample.component.scss b/src/app/interactions/chat/styling-sample/styling-sample.component.scss index 43f1ad8e8..854ee378f 100644 --- a/src/app/interactions/chat/styling-sample/styling-sample.component.scss +++ b/src/app/interactions/chat/styling-sample/styling-sample.component.scss @@ -1,57 +1,23 @@ -// @use "igniteui-angular/theming" as *; -igx-chat { - height: 870px; - - ::ng-deep { - igc-chat::part(header) { - display: flex; - align-items: center; - padding: 10px; - border-bottom: 1px solid var(--ig-gray-300); - background-color: var(--ig-gray-200); - font-family: 'Franklin Gothic Medium'; - color: var(--ig-gray-700); - } - - igc-chat::part(message-container) { - background: var(--igc-chat-bubble-bg, #eee); - color: var(--igc-chat-text-color, #222); - padding: 12px; - border-radius: 8px; - transition: background .15s; - } - - igc-chat::part(message-sent) { - background: var(--igc-chat-sent-bubble-bg, #e6f4ff); - color: var(--igc-chat-sent-text-color, #03396b); - } - - igc-chat::part(message-header) { - color: #c00000; - font-weight: bold; - margin: 8px; - } - - igc-chat::part(message-actions-container) { - border-top: 1px solid var(--ig-gray-300); - } - - igc-chat::part(suggestion) { - background-color: var(--ig-primary-100); - color: var(--ig-primary-800); - margin: .125rem; - border-radius: 20px; - cursor: pointer; - transition: background-color 0.3s, color 0.3s; - } - - igc-chat::part(message-attachment) { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); - background: var(--igc-chat-sent-bubble-bg); - } - - igc-chat::part(input-attachments-container) { - border: 5px solid var(--ig-gray-300); - } - } +@use "igniteui-angular/theming" as *; +@use "layout.scss"; + +$custom-chat-theme: chat-theme( + $background: #f7f5f1, + $header-background: linear-gradient(135deg, #2b2b2b, #4a4a4a), + $header-color: #ffc641, + $sent-message-background: linear-gradient(135deg, #ffb703, #fb8500), + $sent-message-color: #1a1a1a, + $received-message-background: #e2d8c9, + $received-message-color: #2b2b2b, + $message-actions-color: #b26a2a, + $message-border-radius: 8px, + $image-background: #fff3d6, + $image-border: #fb8500, + $image-attachment-icon: #fb8500, + $chat-input-border: #e2d8c9, + $progress-indicator-color: #ffc641, +); + +:host { + @include tokens($custom-chat-theme); } diff --git a/src/app/interactions/chat/styling-sample/styling-sample.component.ts b/src/app/interactions/chat/styling-sample/styling-sample.component.ts index f17fde274..09205aa50 100644 --- a/src/app/interactions/chat/styling-sample/styling-sample.component.ts +++ b/src/app/interactions/chat/styling-sample/styling-sample.component.ts @@ -3,83 +3,84 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxChatComponent, IgxChatOptions } from 'igniteui-angular/chat'; @Component({ - selector: 'app-chat-styling-sample', - styleUrls: ['./styling-sample.component.scss'], - templateUrl: './styling-sample.component.html', - imports: [IgxAvatarComponent, IgxChatComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA] + selector: 'app-chat-styling-sample', + styleUrls: ['./styling-sample.component.scss'], + templateUrl: './styling-sample.component.html', + imports: [IgxAvatarComponent, IgxChatComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) + export class ChatStylingSampleComponent { - public draftMessage = { text: '', attachments: [] }; + public draftMessage = { text: '', attachments: [] }; - public messages = signal([ - { - id: '1', - text: `Hi, I have a question about my recent order, #7890.`, - sender: 'user', - timestamp: (Date.now() - 3500000).toString() - }, - { - id: '2', - text: `Hello! I can help with that. What is your question regarding order #7890?`, - sender: 'support', - timestamp: (Date.now() - 3400000).toString() - }, + public messages = signal([ + { + id: '1', + text: `Hi, I have a question about my recent order, #7890.`, + sender: 'user', + timestamp: (Date.now() - 3500000).toString() + }, + { + id: '2', + text: `Hello! I can help with that. What is your question regarding order #7890?`, + sender: 'support', + timestamp: (Date.now() - 3400000).toString() + }, + { + id: '3', + text: `The tracking status shows 'delivered', but I haven't received it yet. Can you confirm the delivery location?`, + sender: 'user', + timestamp: (Date.now() - 3300000).toString() + }, + { + id: '4', + 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.`, + sender: 'support', + timestamp: (Date.now() - 3200000).toString(), + attachments: [ { - id: '3', - text: `The tracking status shows 'delivered', but I haven't received it yet. Can you confirm the delivery location?`, - sender: 'user', - timestamp: (Date.now() - 3300000).toString() - }, - { - id: '4', - 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.`, - sender: 'support', - timestamp: (Date.now() - 3200000).toString(), - attachments: [ - { - id: 'delivery-location-image', - name: 'Delivery location', - url: 'https://media.istockphoto.com/id/1207972183/photo/merchandise-delivery-from-online-ordering.jpg?s=612x612&w=0&k=20&c=cGcMqd_8FALv4Tueh7sllYZuDXurkfkqoJf6IAIWhJk=', - type: 'image' - } - ] + id: 'delivery-location-image', + name: 'Delivery location', + url: 'https://media.istockphoto.com/id/1207972183/photo/merchandise-delivery-from-online-ordering.jpg?s=612x612&w=0&k=20&c=cGcMqd_8FALv4Tueh7sllYZuDXurkfkqoJf6IAIWhJk=', + type: 'image' } - ]); + ] + } + ]); - public options = signal({ - disableAutoScroll: false, - disableInputAttachments: false, - suggestions: [`It's there. Thanks.`, `It's not there.`], - inputPlaceholder: 'Type your message here...', - headerText: 'Customer Support', - adoptRootStyles: true - }); + public options = signal({ + disableAutoScroll: false, + disableInputAttachments: false, + suggestions: [`It's there. Thanks.`, `It's not there.`], + inputPlaceholder: 'Type your message here...', + headerText: 'Customer Support', + adoptRootStyles: true + }); - constructor() {} + constructor() { } - public onMessageCreated(msg: any): void { - const newMessage = msg; - this.messages.update(messages => ([...messages, newMessage])); - this.options.update(options => ({ ...options, isTyping: true, suggestions: [] })); + public onMessageCreated(msg: any): void { + const newMessage = msg; + this.messages.update(messages => ([...messages, newMessage])); + this.options.update(options => ({ ...options, isTyping: true, suggestions: [] })); - const messageText = msg.text.toLowerCase(); - const responseText = messageText.includes('not there') - ? `We're sorry to hear that. Checking with the delivery service for more details.` - : messageText.includes('it\'s there') - ? `Glad to hear that! If you have any more questions or need further assistance, feel free to ask. We're here to help!` - : `Our support team is currently unavailable. We'll get back to you as soon as possible.`; + const messageText = msg.text.toLowerCase(); + const responseText = messageText.includes('not there') + ? `We're sorry to hear that. Checking with the delivery service for more details.` + : messageText.includes('it\'s there') + ? `Glad to hear that! If you have any more questions or need further assistance, feel free to ask. We're here to help!` + : `Our support team is currently unavailable. We'll get back to you as soon as possible.`; - const responseMessage = { - id: Date.now().toString(), - text: responseText, - sender: 'support', - timestamp: Date.now().toString() - }; + const responseMessage = { + id: Date.now().toString(), + text: responseText, + sender: 'support', + timestamp: Date.now().toString() + }; - this.draftMessage = { text: '', attachments: [] }; - this.messages.update(messages => [...messages, responseMessage]); - this.options.update(options => ({ ...options, isTyping: false })); - } + this.draftMessage = { text: '', attachments: [] }; + this.messages.update(messages => [...messages, responseMessage]); + this.options.update(options => ({ ...options, isTyping: false })); + } }