IgniteUI · adrianptrv · May 12, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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;
+    }
+  }
+}
diff --git 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 @@
 <div class="sample-column">
-    <igx-chat
-        [options]="options()"
-        [messages]="messages()"
-        [draftMessage]="draftMessage"
-        [templates]="{ messageHeader: messageHeader }"
-        (messageCreated)="onMessageCreated($event)">
-
-        <ng-template #messageHeader let-message>
-            @if (message.sender !== 'user') {
-                <div style="display: flex; align-items: center; gap: 8px;">
-                    <igx-avatar
-                        shape="circle"
-                        src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg"
-                        size="small"
-                    >
-                    </igx-avatar>
-                    <span style="font-weight: bold; color: #c00000;"
-                    >Customer Support</span>
-                </div>
-            }
-        </ng-template>
-    </igx-chat>
-</div>
+  <igx-chat [options]="options()" [messages]="messages()" [draftMessage]="draftMessage"
+    [templates]="{ messageHeader: messageHeader }" (messageCreated)="onMessageCreated($event)">
+    <ng-template #messageHeader let-message>
+      @if (message.sender !== 'user') {
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <igx-avatar shape="circle" src="assets/images/men/1.jpg" size="small">
+          </igx-avatar>
+          <span>Customer Support</span>
+        </div>
+      }
+    </ng-template>
+  </igx-chat>
+</div>
diff --git 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
@@ -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<IgxChatOptions>({
-        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<IgxChatOptions>({
+    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 }));
+  }
 }