Hello World
\n'; + + const result = await service.parse(markdown); + expect(result).toBe(expectedHtml); + }); + + it('should parse a code block with shiki highlighting', async () => { + const markdown = '```typescript\nconst x = 5;\n```'; + const result = await service.parse(markdown); + + expect(result).toContain(' {
+ const markdown = '[Infragistics](https://www.infragistics.com)';
+ const expectedLink = '';
+
+ const result = await service.parse(markdown);
+ expect(result).toContain(expectedLink);
+ });
+});
diff --git a/projects/igniteui-angular/chat-extras/src/markdown-service.ts b/projects/igniteui-angular/chat-extras/src/markdown-service.ts
new file mode 100644
index 00000000000..4f2edf2a508
--- /dev/null
+++ b/projects/igniteui-angular/chat-extras/src/markdown-service.ts
@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import { Marked } from 'marked';
+import markedShiki from 'marked-shiki';
+import { bundledThemes, createHighlighter } from 'shiki/bundle/web';
+
+
+const DEFAULT_LANGUAGES = ['javascript', 'typescript', 'html', 'css'];
+const DEFAULT_THEMES = {
+ light: 'github-light',
+ dark: 'github-dark'
+};
+
+@Injectable({ providedIn: 'root' })
+export class IgxChatMarkdownService {
+
+ private _instance: Marked;
+ private _isInitialized: Promise;
+
+ private _initializeMarked(): void {
+ this._instance = new Marked({
+ breaks: true,
+ gfm: true,
+ extensions: [
+ {
+ name: 'link',
+ renderer({ href, title, text }) {
+ return `${text}`;
+ }
+ }
+ ]
+ });
+ }
+
+ private async _initializeShiki(): Promise {
+ const highlighter = await createHighlighter({
+ langs: DEFAULT_LANGUAGES,
+ themes: Object.keys(bundledThemes)
+ });
+
+ this._instance.use(
+ markedShiki({
+ highlight(code, lang, _) {
+ try {
+ return highlighter.codeToHtml(code, {
+ lang,
+ themes: DEFAULT_THEMES,
+ });
+
+ } catch {
+ return `${code}
`;
+ }
+ }
+ })
+ );
+ }
+
+
+ constructor() {
+ this._initializeMarked();
+ this._isInitialized = this._initializeShiki();
+ }
+
+ public async parse(text: string): Promise {
+ await this._isInitialized;
+ return await this._instance.parse(text);
+ }
+}
diff --git a/projects/igniteui-angular/chat-extras/src/public_api.ts b/projects/igniteui-angular/chat-extras/src/public_api.ts
new file mode 100644
index 00000000000..de599f08302
--- /dev/null
+++ b/projects/igniteui-angular/chat-extras/src/public_api.ts
@@ -0,0 +1 @@
+export { MarkdownPipe } from './markdown-pipe';
diff --git a/projects/igniteui-angular/chat/index.ts b/projects/igniteui-angular/chat/index.ts
new file mode 100644
index 00000000000..decc72d85bc
--- /dev/null
+++ b/projects/igniteui-angular/chat/index.ts
@@ -0,0 +1 @@
+export * from './src/public_api';
diff --git a/projects/igniteui-angular/chat/ng-package.json b/projects/igniteui-angular/chat/ng-package.json
new file mode 100644
index 00000000000..0967ef424bc
--- /dev/null
+++ b/projects/igniteui-angular/chat/ng-package.json
@@ -0,0 +1 @@
+{}
diff --git a/projects/igniteui-angular/chat/src/chat.component.html b/projects/igniteui-angular/chat/src/chat.component.html
new file mode 100644
index 00000000000..896e36340b4
--- /dev/null
+++ b/projects/igniteui-angular/chat/src/chat.component.html
@@ -0,0 +1,16 @@
+
+
diff --git a/projects/igniteui-angular/chat/src/chat.component.ts b/projects/igniteui-angular/chat/src/chat.component.ts
new file mode 100644
index 00000000000..97aa851aeff
--- /dev/null
+++ b/projects/igniteui-angular/chat/src/chat.component.ts
@@ -0,0 +1,329 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+ CUSTOM_ELEMENTS_SCHEMA,
+ Directive,
+ effect,
+ inject,
+ input,
+ OnInit,
+ output,
+ signal,
+ TemplateRef,
+ ViewContainerRef,
+ OnDestroy,
+ ViewRef,
+ computed,
+} from '@angular/core';
+import {
+ IgcChatComponent,
+ type IgcChatMessageAttachment,
+ type IgcChatMessage,
+ type IgcChatOptions,
+ type ChatRenderContext,
+ type ChatRenderers,
+ type ChatAttachmentRenderContext,
+ type ChatInputRenderContext,
+ type ChatMessageRenderContext,
+ type IgcChatMessageReaction,
+} from 'igniteui-webcomponents';
+
+type ChatContextUnion =
+ | ChatAttachmentRenderContext
+ | ChatMessageRenderContext
+ | ChatInputRenderContext
+ | ChatRenderContext;
+
+type ChatContextType =
+ T extends ChatAttachmentRenderContext
+ ? IgcChatMessageAttachment
+ : T extends ChatMessageRenderContext
+ ? IgcChatMessage
+ : T extends ChatInputRenderContext
+ ? string
+ : T extends ChatRenderContext
+ ? { instance: IgcChatComponent }
+ : never;
+
+type ExtractChatContext = T extends (ctx: infer R) => any ? R : never;
+
+type ChatTemplatesContextMap = {
+ [K in keyof ChatRenderers]: {
+ $implicit: ChatContextType<
+ ExtractChatContext> & ChatContextUnion
+ >;
+ };
+};
+
+/**
+ * Template references for customizing chat component rendering.
+ * Each property corresponds to a specific part of the chat UI that can be customized.
+ *
+ * @example
+ * ```typescript
+ * templates = {
+ * messageContent: this.customMessageTemplate,
+ * attachment: this.customAttachmentTemplate
+ * }
+ * ```
+ */
+export type IgxChatTemplates = {
+ [K in keyof Omit]?: TemplateRef;
+};
+
+/**
+ * Configuration options for the chat component.
+ */
+export type IgxChatOptions = Omit;
+
+
+/**
+ * Angular wrapper component for the Ignite UI Web Components Chat component.
+ *
+ * This component provides an Angular-friendly interface to the igc-chat web component,
+ * including support for Angular templates, signals, and change detection.
+ *
+ * Uses OnPush change detection strategy for optimal performance. All inputs are signals,
+ * so changes are automatically tracked and propagated to the underlying web component.
+ *
+ * @example
+ * ```typescript
+ * , Set>();
+ private _oldTemplates: IgxChatTemplates = {};
+
+ protected readonly _transformedTemplates = signal({});
+
+ protected readonly _mergedOptions = computed(() => {
+ const options = this.options();
+ const transformedTemplates = this._transformedTemplates();
+ return {
+ ...options,
+ renderers: transformedTemplates
+ };
+ });
+
+ //#endregion
+
+ //#region Inputs
+
+ /** Array of chat messages to display */
+ public readonly messages = input([]);
+
+ /** Draft message with text and optional attachments */
+ public readonly draftMessage = input<
+ { text: string; attachments?: IgcChatMessageAttachment[] } | undefined
+ >({ text: '' });
+
+ /** Configuration options for the chat component */
+ public readonly options = input({});
+
+ /** Custom templates for rendering chat elements */
+ public readonly templates = input({});
+
+ //#endregion
+
+ //#region Outputs
+
+ /** Emitted when a new message is created */
+ public readonly messageCreated = output();
+
+ /** Emitted when a user reacts to a message */
+ public readonly messageReact = output();
+
+ /** Emitted when an attachment is clicked */
+ public readonly attachmentClick = output();
+
+ /** Emitted when attachment drag starts */
+ public readonly attachmentDrag = output();
+
+ /** Emitted when attachment is dropped */
+ public readonly attachmentDrop = output();
+
+ /** Emitted when typing indicator state changes */
+ public readonly typingChange = output();
+
+ /** Emitted when the input receives focus */
+ public readonly inputFocus = output();
+
+ /** Emitted when the input loses focus */
+ public readonly inputBlur = output();
+
+ /** Emitted when the input value changes */
+ public readonly inputChange = output();
+
+ //#endregion
+
+ /** @internal */
+ public ngOnInit(): void {
+ IgcChatComponent.register();
+ }
+
+ /** @internal */
+ public ngOnDestroy(): void {
+ for (const viewSet of this._templateViewRefs.values()) {
+ viewSet.forEach(viewRef => viewRef.destroy());
+ }
+ this._templateViewRefs.clear();
+ }
+
+ constructor() {
+ // Templates changed - update transformed templates and viewRefs
+ effect(() => {
+ const templates = this.templates();
+ this._setTemplates(templates ?? {});
+ });
+ }
+
+ private _setTemplates(newTemplates: IgxChatTemplates): void {
+ const templateCopies: ChatRenderers = {};
+ const newTemplateKeys = Object.keys(newTemplates) as Array;
+
+ const oldTemplates = this._oldTemplates;
+ const oldTemplateKeys = Object.keys(oldTemplates) as Array;
+
+ for (const key of oldTemplateKeys) {
+ const oldRef = oldTemplates[key];
+ const newRef = newTemplates[key];
+
+ if (oldRef && oldRef !== newRef) {
+ const obsolete = this._templateViewRefs.get(oldRef);
+ if (obsolete) {
+ obsolete.forEach(viewRef => viewRef.destroy());
+ this._templateViewRefs.delete(oldRef);
+ }
+ }
+ }
+
+ this._oldTemplates = {};
+
+ for (const key of newTemplateKeys) {
+ const ref = newTemplates[key];
+ if (ref) {
+ (this._oldTemplates as Record>)[key] = ref;
+ templateCopies[key] = this._createTemplateRenderer(ref);
+ }
+ }
+
+ this._transformedTemplates.set(templateCopies);
+ }
+
+ private _createTemplateRenderer(ref: NonNullable) {
+ type ChatContext = ExtractChatContext>;
+
+ if (!this._templateViewRefs.has(ref)) {
+ this._templateViewRefs.set(ref, new Set());
+ }
+
+ const viewSet = this._templateViewRefs.get(ref)!;
+
+ return (ctx: ChatContext) => {
+ const context = ctx as ChatContextUnion;
+ let angularContext: any;
+
+ if ('message' in context && 'attachment' in context) {
+ angularContext = { $implicit: context.attachment };
+ } else if ('message' in context) {
+ angularContext = { $implicit: context.message };
+ } else if ('value' in context) {
+ angularContext = {
+ $implicit: context.value,
+ attachments: context.attachments
+ };
+ } else {
+ angularContext = { $implicit: { instance: context.instance } };
+ }
+
+ const viewRef = this._view.createEmbeddedView(ref, angularContext);
+ viewSet.add(viewRef);
+
+ return viewRef.rootNodes;
+ }
+ }
+}
+
+/**
+ * Context provided to the chat input template.
+ */
+export interface ChatInputContext {
+ /** The current input value */
+ $implicit: string;
+ /** Array of attachments associated with the input */
+ attachments: IgcChatMessageAttachment[];
+}
+
+/**
+ * Directive providing type information for chat message template contexts.
+ * Use this directive on ng-template elements that render chat messages.
+ *
+ * @example
+ * ```html
+ *
+ * {{ message.text }}
+ *
+ * ```
+ */
+@Directive({ selector: '[igxChatMessageContext]', standalone: true })
+export class IgxChatMessageContextDirective {
+
+ public static ngTemplateContextGuard(_: IgxChatMessageContextDirective, ctx: unknown): ctx is { $implicit: IgcChatMessage } {
+ return true;
+ }
+}
+
+/**
+ * Directive providing type information for chat attachment template contexts.
+ * Use this directive on ng-template elements that render message attachments.
+ *
+ * @example
+ * ```html
+ *
+ * ![]()
+ *
+ * ```
+ */
+@Directive({ selector: '[igxChatAttachmentContext]', standalone: true })
+export class IgxChatAttachmentContextDirective {
+
+ public static ngTemplateContextGuard(_: IgxChatAttachmentContextDirective, ctx: unknown): ctx is { $implicit: IgcChatMessageAttachment } {
+ return true;
+ }
+}
+
+/**
+ * Directive providing type information for chat input template contexts.
+ * Use this directive on ng-template elements that render the chat input.
+ *
+ * @example
+ * ```html
+ *
+ *
+ *
+ * ```
+ */
+@Directive({ selector: '[igxChatInputContext]', standalone: true })
+export class IgxChatInputContextDirective {
+
+ public static ngTemplateContextGuard(_: IgxChatInputContextDirective, ctx: unknown): ctx is ChatInputContext {
+ return true;
+ }
+}
diff --git a/projects/igniteui-angular/chat/src/chat.spec.ts b/projects/igniteui-angular/chat/src/chat.spec.ts
new file mode 100644
index 00000000000..2977d06f194
--- /dev/null
+++ b/projects/igniteui-angular/chat/src/chat.spec.ts
@@ -0,0 +1,177 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
+import { IgxChatComponent, IgxChatMessageContextDirective, type IgxChatTemplates } from './chat.component'
+import { Component, signal, TemplateRef, viewChild } from '@angular/core';
+import type { IgcChatComponent, IgcChatMessage, IgcTextareaComponent } from 'igniteui-webcomponents';
+
+describe('Chat wrapper', () => {
+
+ let chatComponent: IgxChatComponent;
+ let chatElement: IgcChatComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [IgxChatComponent]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(IgxChatComponent);
+ chatComponent = fixture.componentInstance;
+ chatElement = getChatElement(fixture);
+ fixture.detectChanges();
+ })
+
+ it('is created', () => {
+ expect(chatComponent).toBeDefined();
+ });
+
+ it('has correct initial empty state', () => {
+ const draft = chatComponent.draftMessage();
+
+ expect(chatComponent.messages().length).toEqual(0);
+ expect(draft.text).toEqual('');
+ expect(draft.attachments).toBeUndefined();
+ });
+
+ it('correct bindings for messages', async () => {
+ fixture.componentRef.setInput('messages', [{ id: '1', sender: 'user', text: 'Hello' }]);
+
+ fixture.detectChanges();
+ await fixture.whenStable();
+
+
+ const messageElement = getChatMessages(chatElement)[0];
+ expect(messageElement).toBeDefined();
+ expect(getChatMessageDOM(messageElement).textContent.trim()).toEqual(chatComponent.messages()[0].text);
+ });
+
+ it('correct bindings for draft message', async () => {
+ fixture.componentRef.setInput('draftMessage', { text: 'Hello world' });
+
+ fixture.detectChanges();
+ await fixture.whenStable();
+
+ const textarea = getChatInput(chatElement);
+ expect(textarea.value).toEqual(chatComponent.draftMessage().text);
+ });
+});
+
+describe('Chat templates', () => {
+ let fixture: ComponentFixture;
+ let chatElement: IgcChatComponent;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [IgxChatComponent, IgxChatMessageContextDirective, ChatTemplatesBed]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ChatTemplatesBed);
+ fixture.detectChanges();
+ chatElement = getChatElement(fixture);
+ });
+
+ it('has correct initially bound template', async () => {
+ await fixture.whenStable();
+
+ // NOTE: This is invoked since in the test bed there is no app ref so fresh embedded view
+ // has no change detection ran on it. In an application scenario this is not the case.
+ // This is so we don't explicitly invoke `viewRef.detectChanges()` inside the returned closure
+ // from the wrapper's `_createTemplateRenderer` call.
+ fixture.detectChanges();
+ expect(getChatMessageDOM(getChatMessages(chatElement)[0]).textContent.trim())
+ .toEqual(`Your message: ${fixture.componentInstance.messages()[0].text}`);
+ });
+});
+
+describe('Chat dynamic templates binding', () => {
+ let fixture: ComponentFixture;
+ let chatElement: IgcChatComponent;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ imports: [IgxChatComponent, IgxChatMessageContextDirective, ChatDynamicTemplatesBed]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ChatDynamicTemplatesBed);
+ fixture.detectChanges();
+ chatElement = getChatElement(fixture);
+ });
+
+ it('supports late binding', async () => {
+ fixture.componentInstance.bindTemplates();
+ fixture.detectChanges();
+
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ expect(getChatMessageDOM(getChatMessages(chatElement)[0]).textContent.trim())
+ .toEqual(`Your message: ${fixture.componentInstance.messages()[0].text}`);
+ });
+
+});
+
+
+@Component({
+ template: `
+
+ Your message: {{ message.text }}
+
+ `,
+ imports: [IgxChatComponent, IgxChatMessageContextDirective]
+})
+class ChatTemplatesBed {
+ public messages = signal([{
+ id: '1',
+ sender: 'user',
+ text: 'Hello world'
+ }]);
+ public messageTemplate = viewChild.required>('message');
+}
+
+@Component({
+ template: `
+
+ Your message: {{ message.text }}
+
+ `,
+ imports: [IgxChatComponent, IgxChatMessageContextDirective]
+})
+class ChatDynamicTemplatesBed {
+ public templates = signal(null);
+ public messages = signal([{
+ id: '1',
+ sender: 'user',
+ text: 'Hello world'
+ }]);
+ public messageTemplate = viewChild.required>('message');
+
+ public bindTemplates(): void {
+ this.templates.set({
+ messageContent: this.messageTemplate()
+ });
+ }
+}
+
+function getChatElement(fixture: ComponentFixture): IgcChatComponent {
+ const nativeElement = fixture.nativeElement as HTMLElement;
+ return nativeElement.querySelector('igc-chat');
+}
+
+function getChatInput(chat: IgcChatComponent): IgcTextareaComponent {
+ return chat.renderRoot.querySelector('igc-chat-input').shadowRoot.querySelector('igc-textarea');
+}
+
+function getChatMessages(chat: IgcChatComponent): HTMLElement[] {
+ return Array.from(chat.renderRoot.querySelectorAll('igc-chat-message'));
+}
+
+function getChatMessageDOM(message: HTMLElement) {
+ return message.shadowRoot;
+}
diff --git a/projects/igniteui-angular/chat/src/public_api.ts b/projects/igniteui-angular/chat/src/public_api.ts
new file mode 100644
index 00000000000..eca793fd7b9
--- /dev/null
+++ b/projects/igniteui-angular/chat/src/public_api.ts
@@ -0,0 +1 @@
+export * from './chat.component';
diff --git a/projects/igniteui-angular/ng-package.json b/projects/igniteui-angular/ng-package.json
index 183215b2851..503e963ec27 100644
--- a/projects/igniteui-angular/ng-package.json
+++ b/projects/igniteui-angular/ng-package.json
@@ -13,6 +13,11 @@
"igniteui-trial-watermark",
"lodash-es",
"@igniteui/material-icons-extended",
- "igniteui-theming"
+ "igniteui-theming",
+ "igniteui-webcomponents",
+ "dompurify",
+ "marked",
+ "marked-shiki",
+ "shiki"
]
}
diff --git a/projects/igniteui-angular/ng-package.prod.json b/projects/igniteui-angular/ng-package.prod.json
index 7af1254752a..10a2234414b 100644
--- a/projects/igniteui-angular/ng-package.prod.json
+++ b/projects/igniteui-angular/ng-package.prod.json
@@ -12,6 +12,11 @@
"igniteui-trial-watermark",
"lodash-es",
"@igniteui/material-icons-extended",
- "igniteui-theming"
+ "igniteui-theming",
+ "igniteui-webcomponents",
+ "dompurify",
+ "marked",
+ "marked-shiki",
+ "shiki"
]
}
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
index 264200c1cb9..03225f78e67 100644
--- a/projects/igniteui-angular/package.json
+++ b/projects/igniteui-angular/package.json
@@ -84,7 +84,12 @@
"@angular/animations": "21",
"@angular/forms": "21",
"hammerjs": "^2.0.8",
- "@types/hammerjs": "^2.0.46"
+ "@types/hammerjs": "^2.0.46",
+ "igniteui-webcomponents": "^6.3.0",
+ "dompurify": "^3.2.0",
+ "marked": "^16.3.0",
+ "marked-shiki": "^1.2.0",
+ "shiki": "^3.12.0"
},
"peerDependenciesMeta": {
"hammerjs": {
@@ -92,6 +97,21 @@
},
"@types/hammerjs": {
"optional": true
+ },
+ "igniteui-webcomponents": {
+ "optional": true
+ },
+ "dompurify": {
+ "optional": true
+ },
+ "marked": {
+ "optional": true
+ },
+ "marked-shiki": {
+ "optional": true
+ },
+ "shiki": {
+ "optional": true
}
},
"igxDevDependencies": {
diff --git a/projects/igniteui-angular/schematics/utils/dependency-handler.ts b/projects/igniteui-angular/schematics/utils/dependency-handler.ts
index a7fdb148e62..71e3e0f46df 100644
--- a/projects/igniteui-angular/schematics/utils/dependency-handler.ts
+++ b/projects/igniteui-angular/schematics/utils/dependency-handler.ts
@@ -27,6 +27,11 @@ export const DEPENDENCIES_MAP: PackageEntry[] = [
{ name: 'lodash-es', target: PackageTarget.NONE },
{ name: '@igniteui/material-icons-extended', target: PackageTarget.REGULAR },
{ name: 'igniteui-theming', target: PackageTarget.NONE },
+ { name: 'igniteui-webcomponents', target: PackageTarget.NONE },
+ { name: 'dompurify', target: PackageTarget.NONE },
+ { name: 'marked', target: PackageTarget.NONE },
+ { name: 'marked-shiki', target: PackageTarget.NONE },
+ { name: 'shiki', target: PackageTarget.NONE },
// peerDependencies
{ name: '@angular/forms', target: PackageTarget.NONE },
{ name: '@angular/common', target: PackageTarget.NONE },
diff --git a/projects/igniteui-angular/src/public_api.ts b/projects/igniteui-angular/src/public_api.ts
index 1360707be6f..5352b064fef 100644
--- a/projects/igniteui-angular/src/public_api.ts
+++ b/projects/igniteui-angular/src/public_api.ts
@@ -34,6 +34,7 @@ export * from 'igniteui-angular/button-group';
export * from 'igniteui-angular/calendar';
export * from 'igniteui-angular/card';
export * from 'igniteui-angular/carousel';
+export * from 'igniteui-angular/chat';
export * from 'igniteui-angular/checkbox';
export * from 'igniteui-angular/chips';
export * from 'igniteui-angular/combo';
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c6cc68f4294..5785f5a989c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -128,6 +128,11 @@ export class AppComponent implements OnInit {
icon: 'view_carousel',
name: 'Carousel'
},
+ {
+ link: '/chat',
+ icon: 'chat',
+ name: 'Chat'
+ },
{
link: '/chip',
icon: 'android',
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 1b4ee86a042..62c98189e5c 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -6,6 +6,7 @@ import { ButtonSampleComponent } from './button/button.sample';
import { CalendarSampleComponent } from './calendar/calendar.sample';
import { CardSampleComponent } from './card/card.sample';
import { CarouselSampleComponent } from './carousel/carousel.sample';
+import { ChatSampleComponent } from './chat/chat.sample';
import { InputControlsSampleComponent } from './input-controls/input-controls.sample';
import { ChipsSampleComponent } from './chips/chips.sample';
import { CircularProgressSampleComponent } from './circular-progress-showcase/circular-progress-showcase.sample'
@@ -200,6 +201,10 @@ export const appRoutes: Routes = [
path: 'carousel',
component: CarouselSampleComponent
},
+ {
+ path: 'chat',
+ component: ChatSampleComponent
+ },
{
path: 'input-controls',
component: InputControlsSampleComponent
diff --git a/src/app/chat/chat.sample.html b/src/app/chat/chat.sample.html
new file mode 100644
index 00000000000..2e278ad1b91
--- /dev/null
+++ b/src/app/chat/chat.sample.html
@@ -0,0 +1,8 @@
+
+ Prefix
+ Actions
+
+
+
+
+
diff --git a/src/app/chat/chat.sample.scss b/src/app/chat/chat.sample.scss
new file mode 100644
index 00000000000..87a84a0fd2f
--- /dev/null
+++ b/src/app/chat/chat.sample.scss
@@ -0,0 +1,4 @@
+#igniteui-demo-app .sample-wrapper {
+ padding: 0;
+}
+
diff --git a/src/app/chat/chat.sample.ts b/src/app/chat/chat.sample.ts
new file mode 100644
index 00000000000..d4d9058fa34
--- /dev/null
+++ b/src/app/chat/chat.sample.ts
@@ -0,0 +1,115 @@
+
+import { AsyncPipe } from '@angular/common';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ CUSTOM_ELEMENTS_SCHEMA,
+ effect,
+ signal,
+ viewChild,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+ IgxChatComponent,
+ IgxChatMessageContextDirective,
+ type IgxChatOptions,
+} from 'igniteui-angular/chat';
+import { MarkdownPipe } from 'igniteui-angular/chat-extras';
+
+@Component({
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ selector: 'app-chat-sample',
+ styleUrls: ['chat.sample.scss'],
+ templateUrl: 'chat.sample.html',
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ imports: [
+ FormsModule,
+ AsyncPipe,
+ IgxChatComponent,
+ MarkdownPipe,
+ IgxChatMessageContextDirective,
+ ]
+})
+export class ChatSampleComponent {
+ protected _template = viewChild.required('renderer');
+
+ public messages = signal([
+ {
+ id: '1',
+ text: `Hello. How can we assist you today?`,
+ sender: 'support',
+ },
+ {
+ id: '2',
+ text: `Hello. I have problem with styling IgcAvatarComponent. Can you take a look at the attached file and help me?`,
+ sender: 'user',
+ attachments: [
+ {
+ id: 'AvatarStyles.css',
+ name: 'AvatarStyles.css',
+ url: './styles/AvatarStyles.css',
+ type: 'text/css'
+ },
+ ],
+ },
+ {
+ id: '3',
+ text: `Sure, give me a moment to check the file.`,
+ sender: 'support',
+ },
+ {
+ id: '4',
+ text: `
+Thank you for your patience. It seems that the issue is the name of the **CSS part**. Here is the fixed code:
+
+
+\`\`\`css
+igc-avatar::part(base) {
+ --size: 60px;
+ color: var(--ig-success-500-contrast);
+ background: var(--ig-success-500);
+ border-radius: 20px;
+}
+\`\`\``,
+ sender: 'support',
+ },
+ {
+ id: '123213123',
+ sender: 'support',
+ text: `
+Here is some typescript:
+
+
+\`\`\`ts
+
+class User {
+ constructor(public name: string, public age: number) {}
+}
+\`\`\``
+ }
+ ]);
+
+ public options = signal({
+ disableAutoScroll: false,
+ disableInputAttachments: false,
+ suggestions: [`It works. Thanks.`, `It doesn't work.`],
+ inputPlaceholder: 'Type your message here...',
+ headerText: 'Customer Support',
+ });
+
+
+ public templates = signal({});
+
+ constructor() {
+ effect(() => {
+ const template = this._template();
+ if (template) {
+ this.templates.set({ messageContent: template });
+ }
+ });
+ }
+
+ public onMessageReact(event: any) {
+ console.log(event);
+ }
+}