unsafeHello 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/extras/src/markdown-service.ts b/projects/igniteui-angular/extras/src/markdown-service.ts
new file mode 100644
index 00000000000..4f2edf2a508
--- /dev/null
+++ b/projects/igniteui-angular/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/extras/src/public_api.ts b/projects/igniteui-angular/extras/src/public_api.ts
new file mode 100644
index 00000000000..de599f08302
--- /dev/null
+++ b/projects/igniteui-angular/extras/src/public_api.ts
@@ -0,0 +1 @@
+export { MarkdownPipe } from './markdown-pipe';
diff --git a/projects/igniteui-angular/src/lib/chat/chat.component.html b/projects/igniteui-angular/src/lib/chat/chat.component.html
new file mode 100644
index 00000000000..896e36340b4
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/chat/chat.component.html
@@ -0,0 +1,16 @@
+
+
diff --git a/projects/igniteui-angular/src/lib/chat/chat.component.ts b/projects/igniteui-angular/src/lib/chat/chat.component.ts
new file mode 100644
index 00000000000..d54cc8bd268
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/chat/chat.component.ts
@@ -0,0 +1,248 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+ CUSTOM_ELEMENTS_SCHEMA,
+ Directive,
+ effect,
+ inject,
+ input,
+ OnInit,
+ output,
+ signal,
+ TemplateRef,
+ ViewContainerRef,
+ untracked,
+ OnDestroy,
+ ViewRef,
+} 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
+ ? { value: T['value']; attachments: T['attachments'] }
+ : T extends ChatRenderContext
+ ? { instance: T['instance'] }
+ : never;
+
+type ExtractChatContext = T extends (ctx: infer R) => any ? R : never;
+
+type ChatTemplatesContextMap = {
+ [K in keyof ChatRenderers]: {
+ $implicit: ChatContextType<
+ ExtractChatContext> & ChatContextUnion
+ >;
+ };
+};
+
+export type IgxChatTemplates = {
+ [K in keyof ChatRenderers]?: TemplateRef;
+};
+
+export type IgxChatOptions = Omit;
+
+
+@Component({
+ selector: 'igx-chat',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ templateUrl: './chat.component.html',
+ styles: `
+ igc-chat {
+ --igc-chat-height: calc(100vh - 32px);
+ }
+ `
+})
+export class IgxChatComponent implements OnInit, OnDestroy {
+ //#region Internal state
+
+ private readonly _view = inject(ViewContainerRef);
+ private readonly _templateViewRefs = new Map, Set>();
+ private _oldTemplates: IgxChatTemplates = {};
+
+ protected readonly _mergedOptions = signal({});
+ protected readonly _transformedTemplates = signal({});
+
+ //#endregion
+
+ //#region Inputs
+
+ public readonly messages = input([]);
+ public readonly draftMessage = input<
+ { text: string; attachments?: IgcChatMessageAttachment[] } | undefined
+ >({ text: '' });
+ public readonly options = input({});
+ public readonly templates = input({});
+
+ //#endregion
+
+ //#region Outputs
+
+ public readonly messageCreated = output();
+ public readonly messageReact = output();
+ public readonly attachmentClick = output();
+ public readonly attachmentDrag = output();
+ public readonly attachmentDrop = output();
+ public readonly typingChange = output();
+ public readonly inputFocus = output();
+ public readonly inputBlur = output();
+ 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 and merge with options
+ effect(() => {
+ const templates = this.templates();
+ this._setTemplates(templates ?? {});
+ this._mergeOptions(untracked(() => this.options()));
+ });
+
+ // Options changed - merge with current template state
+ effect(() => {
+ const options = this.options();
+ this._mergeOptions(options ?? {});
+ });
+ }
+
+ private _mergeOptions(options: IgxChatOptions): void {
+ const transformedTemplates = this._transformedTemplates();
+ const merged: IgcChatOptions = {
+ ...options,
+ renderers: transformedTemplates
+ };
+ this._mergedOptions.set(merged);
+ }
+
+ 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);
+ }
+ }
+ }
+
+ if (newTemplateKeys.length > 0) {
+ this._oldTemplates = {};
+ for (const key of newTemplateKeys) {
+ const ref = newTemplates[key];
+ if (ref) {
+ this._oldTemplates[key] = ref as any;
+ 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: { value: context.value, attachments: context.attachments },
+ };
+ } else {
+ angularContext = { $implicit: { instance: context.instance } };
+ }
+
+ const viewRef = this._view.createEmbeddedView(ref, angularContext);
+ viewSet.add(viewRef);
+
+ return viewRef.rootNodes;
+ }
+ }
+}
+
+export interface ChatTemplateContext {
+ $implicit: T;
+}
+
+interface ChatInputContext {
+ $implicit: string;
+ attachments: IgcChatMessageAttachment[];
+}
+
+@Directive({ selector: '[igxChatMessageContext]' })
+export class IgxChatMessageContextDirective {
+
+ public static ngTemplateContextGuard(_: IgxChatMessageContextDirective, ctx: unknown): ctx is ChatTemplateContext {
+ return true;
+ }
+};
+
+@Directive({ selector: '[igxChatAttachmentContext]' })
+export class IgxChatAttachmentContextDirective {
+
+ public static ngTemplateContextGuard(_: IgxChatAttachmentContextDirective, ctx: unknown): ctx is ChatTemplateContext {
+ return true;
+ }
+}
+
+@Directive({ selector: '[igxChatInputContext]' })
+export class IgxChatInputContextDirective {
+
+ public static ngTemplateContextGuard(_: IgxChatInputContextDirective, ctx: unknown): ctx is ChatInputContext {
+ return true;
+ }
+}
diff --git a/projects/igniteui-angular/src/lib/chat/chat.spec.ts b/projects/igniteui-angular/src/lib/chat/chat.spec.ts
new file mode 100644
index 00000000000..2977d06f194
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/chat/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/src/public_api.ts b/projects/igniteui-angular/src/public_api.ts
index d4a70104a95..29a51a76e32 100644
--- a/projects/igniteui-angular/src/public_api.ts
+++ b/projects/igniteui-angular/src/public_api.ts
@@ -200,3 +200,5 @@ export * from './lib/tabs/tabs/tabs.module';
export * from './lib/time-picker/time-picker.module';
export * from './lib/toast/toast.module';
export * from './lib/tree/tree.module';
+
+export * from './lib/chat/chat.component';
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c3d2d4d104b..8fbd75268db 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -127,6 +127,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 5234d396dc1..845e289d887 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'
@@ -199,6 +200,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..8b2b548ee9c
--- /dev/null
+++ b/src/app/chat/chat.sample.scss
@@ -0,0 +1,20 @@
+.cards-wrapper {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(340px, 1fr));
+ justify-items: center;
+ padding-block-start: 2rem;
+ gap: 1rem;
+}
+
+#igniteui-demo-app .sample-title {
+ margin-bottom: 0;
+ justify-self: center;
+}
+
+#igniteui-demo-app .sample-wrapper {
+ height: auto;
+}
+
+#igniteui-demo-app .content {
+ padding-bottom: 1rem;
+}
diff --git a/src/app/chat/chat.sample.ts b/src/app/chat/chat.sample.ts
new file mode 100644
index 00000000000..b95a9519550
--- /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';
+import { MarkdownPipe } from 'igniteui-angular/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);
+ }
+}