chore(*): Added a dev sample for the Chat component

Author: gedinakova

package-lock.json

@@ -73,12 +73,16 @@
     "@igniteui/material-icons-extended": "^3.1.0",
     "@lit-labs/ssr-dom-shim": "^1.3.0",
     "@types/source-map": "0.5.2",
+    "dompurify": "^3.2.7",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
     "igniteui-theming": "^20.0.0",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
+    "marked": "^16.4.0",
+    "marked-shiki": "^1.2.1",
     "rxjs": "^7.8.2",
+    "shiki": "^3.13.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },

package.json

@@ -127,6 +127,11 @@ export class AppComponent implements OnInit {
             icon: 'view_carousel',
             name: 'Carousel'
         },
+        {
+            link: '/chat',
+            icon: 'chat',
+            name: 'Chat'
+        },
         {
             link: '/chip',
             icon: 'android',

src/app/app.component.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

src/app/app.routes.ts

@@ -0,0 +1,7 @@
+<div>
+    <igx-chat [options]="options" [messages]="messages" [templates]="{ messageContent: renderer }"></igx-chat>
+    <ng-template #renderer let-message igxChatMessageContext>
+        {{ markdownRenderer()(message) }}
+        <!-- {{ message.text.toUpperCase() }} -->
+    </ng-template>
+</div>

src/app/chat/chat.sample.html

@@ -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;
+}

src/app/chat/chat.sample.scss

@@ -0,0 +1,91 @@
+
+import {
+    Component,
+    CUSTOM_ELEMENTS_SCHEMA,
+    OnInit,
+    signal,
+    ViewEncapsulation,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+    IgxChatComponent,
+    IgxChatMessageContextDirective,
+} from 'igniteui-angular';
+import { createMarkdownRenderer } from 'igniteui-webcomponents/extras';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: 'app-chat-sample',
+    styleUrls: ['chat.sample.scss'],
+    templateUrl: 'chat.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    imports: [
+        FormsModule,
+        IgxChatComponent,
+        IgxChatMessageContextDirective,
+    ]
+})
+export class ChatSampleComponent implements OnInit {
+    public messages: any[] = [];
+    public options = {
+        disableAutoScroll: false,
+        disableInputAttachments: false,
+        suggestions: [`It's there. Thanks.`, `It's not there.`],
+        inputPlaceholder: 'Type your message here...',
+        headerText: 'Customer Support',
+    };
+    public markdownRenderer = signal<any>(null);
+
+    constructor() {
+    }
+
+    public ngOnInit() {
+        this.messages = [
+            {
+                id: '1',
+                text: `Hello. How can we assist you today?`,
+                sender: 'support',
+                timestamp: (Date.now() - 3500000).toString()
+            },
+            {
+                id: '2',
+                text: `Hello. I have problem with styling IgcAvatarComponent. Can you take a look at the attached file and help me?`,
+                sender: 'user',
+                timestamp: (Date.now() - 3400000).toString(),
+                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',
+                timestamp: (Date.now() - 3300000).toString()
+            },
+            {
+                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',
+                timestamp: (Date.now() - 3200000).toString()
+            },
+        ];
+
+       createMarkdownRenderer().then((renderer) => {
+            this.markdownRenderer.set(renderer);
+        });
+    }
+}