fix(*): Updated to alpha.8. Fixed chat height.

Author: gedinakova

package-lock.json

@@ -72,11 +72,11 @@
     "express": "^4.18.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^21.0.0-alpha.7",
+    "igniteui-angular": "^21.0.0-alpha.8",
     "igniteui-angular-charts": "^20.2.0",
     "igniteui-angular-core": "^20.2.0",
     "igniteui-angular-extras": "^20.0.2",
-    "igniteui-angular-i18n": "^21.0.0-alpha.7",
+    "igniteui-angular-i18n": "^21.0.0-alpha.8",
     "igniteui-dockmanager": "^1.17.0",
     "igniteui-grid-lite": "^0.0.1",
     "igniteui-live-editing": "^3.2.0",

package.json

@@ -2,3 +2,7 @@
     display: block;
     padding: 16px;
 }
+
+igx-chat {
+    height: 870px;
+}

src/app/interactions/chat/features-sample/features-sample.component.scss

@@ -1,6 +1,7 @@
 import { AsyncPipe } from '@angular/common';
-import { ChangeDetectorRef, Component, effect, OnInit, signal, viewChild } from '@angular/core';
-import { IgxChatComponent, IgxChatMessageContextDirective, IgxChatOptions, MarkdownPipe } from 'igniteui-angular';
+import { ChangeDetectorRef, Component, effect, signal, viewChild } from '@angular/core';
+import { IgxChatComponent, IgxChatMessageContextDirective, IgxChatOptions } from 'igniteui-angular';
+import { MarkdownPipe } from 'igniteui-angular/chat-extras';
 
 @Component({
     selector: 'app-chat-features-sample',
@@ -32,8 +33,8 @@ export class ChatFeaturesSampleComponent {
                 name: 'AvatarStyles.css',
                 url: './styles/AvatarStyles.css',
                 type: 'text/css'
-                },
-            ],
+                }
+            ]
         },
         {
             id: '3',
@@ -56,7 +57,7 @@ export class ChatFeaturesSampleComponent {
             `,
             sender: 'support',
             timestamp: (Date.now() - 3200000).toString()
-        },
+        }
     ]);
 
     public options = signal<IgxChatOptions>({

src/app/interactions/chat/features-sample/features-sample.component.ts

@@ -2,3 +2,7 @@
     display: block;
     padding: 16px;
 }
+
+igx-chat {
+    height: 870px;
+}

src/app/interactions/chat/overview-sample/overview-sample.component.scss

@@ -40,17 +40,17 @@ export class ChatOverviewSampleComponent {
                 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',
+        headerText: 'Customer Support'
     });
 
     constructor() {

src/app/interactions/chat/overview-sample/overview-sample.component.ts

@@ -1,5 +1,7 @@
 // @use "igniteui-angular/theming" as *;
 igx-chat {
+    height: 870px;
+
     ::ng-deep {
         igc-chat::part(header) {
             display: flex;

src/app/interactions/chat/styling-sample/styling-sample.component.scss

@@ -1,12 +1,13 @@
 import { AsyncPipe } from '@angular/common';
 import { Component, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { IgxAvatarComponent, IgxChatComponent, IgxChatOptions, MarkdownPipe } from 'igniteui-angular';
+import { IgxAvatarComponent, IgxChatComponent, IgxChatOptions } from 'igniteui-angular';
+
 
 @Component({
     selector: 'app-chat-styling-sample',
     styleUrls: ['./styling-sample.component.scss'],
     templateUrl: './styling-sample.component.html',
-    imports: [IgxAvatarComponent, IgxChatComponent, AsyncPipe, MarkdownPipe],
+    imports: [IgxAvatarComponent, IgxChatComponent, AsyncPipe],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class ChatStylingSampleComponent {
@@ -42,9 +43,9 @@ export class ChatStylingSampleComponent {
                 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>({