From 78ff452c306da75b50be8b42aac61c271f6683bd Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Thu, 4 Dec 2025 10:58:47 +0200 Subject: [PATCH 1/2] fix(docs): adding chat readme and info in changelog --- CHANGELOG.md | 26 ++++++----- projects/igniteui-angular/chat/README.md | 55 ++++++++++++++++++++++++ 2 files changed, 67 insertions(+), 14 deletions(-) create mode 100644 projects/igniteui-angular/chat/README.md diff --git a/CHANGELOG.md b/CHANGELOG.md index cb640dfa939..bbb24432b15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,23 +4,14 @@ All notable changes for each version of this project will be documented in this ## 21.0.0 -### Themes - -- `IgxButton` - - **Breaking Change** - - The following shadow-related parameters were removed from the `outlined-button-theme` and `flat-button-theme`: - - `resting-shadow` - - `hover-shadow` - - `focus-shadow` - - `active-shadow` - -## 21.0.0 - ### New Features +- **New component** `IgxChat`: + - A component that provides complete solution for building conversational interfaces in your applications. Read up more information in the [ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/chat/README.md) + - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` - Added PDF export functionality to grid components. Grids can now be exported to PDF format alongside the existing Excel and CSV export options. - + The new `IgxPdfExporterService` follows the same pattern as Excel and CSV exporters: ```ts @@ -60,9 +51,16 @@ All notable changes for each version of this project will be documented in this - **Landscape orientation** by default (suitable for wide grids) - **Internationalization** support for all 19 supported languages - Respects all grid export options (ignoreFiltering, ignoreSorting, ignoreColumnsVisibility, etc.) - + ### Breaking Changes +- `IgxButton` + - The following shadow-related parameters were removed from the `outlined-button-theme` and `flat-button-theme`: + - `resting-shadow` + - `hover-shadow` + - `focus-shadow` + - `active-shadow` + #### Dependency Injection Refactor - All internal DI now uses the `inject()` API across `igniteui-angular` (no more constructor DI in library code). - If you extend our components/services or call their constructors directly, remove DI params and switch to `inject()` (e.g., `protected foo = inject(FooService);`). diff --git a/projects/igniteui-angular/chat/README.md b/projects/igniteui-angular/chat/README.md new file mode 100644 index 00000000000..356e9119179 --- /dev/null +++ b/projects/igniteui-angular/chat/README.md @@ -0,0 +1,55 @@ + +# IgxChat + +**IgxChat** is a component that provides a chat interface, wrapping the **IgcChat** web component. + +A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/chat) + +# Usage + +```html + + +``` + +# API Summary +The following tables summarize the **igx-chat** inputs, outputs and directives. + +### Inputs +The following inputs are available in the **igx-chat** component: + +| Name | Type | Description | +| :--- | :--- | :--- | +| `messages` | `IgcChatMessage[]` | Array of chat messages to display | +| `draftMessage` | `{ text: string; attachments?: IgcChatMessageAttachment[] } \| undefined` | Draft message with text and optional attachments | +| `options` | `IgxChatOptions` | Configuration options for the chat component | +| `templates` | `IgxChatTemplates` | Custom templates for rendering chat elements | + +### Outputs +The following outputs are available in the **igx-chat** component: + +| Name | Description | Parameters | +| :--- | :--- | :--- | +| `messageCreated` | Emitted when a new message is created | `IgcChatMessage` | +| `messageReact` | Emitted when a user reacts to a message | `IgcChatMessageReaction` | +| `attachmentClick` | Emitted when an attachment is clicked | `IgcChatMessageAttachment` | +| `attachmentDrag` | Emitted when attachment drag starts | `void` | +| `attachmentDrop` | Emitted when attachment is dropped | `void` | +| `typingChange` | Emitted when typing indicator state changes | `boolean` | +| `inputFocus` | Emitted when the input receives focus | `void` | +| `inputBlur` | Emitted when the input loses focus | `void` | +| `inputChange` | Emitted when the input value changes | `string` | + +### Directives +The following directives are available for type checking in templates: + +| Name | Selector | Description | +| :--- | :--- | :--- | +| `IgxChatMessageContextDirective` | `[igxChatMessageContext]` | Provides type information for chat message template contexts | +| `IgxChatAttachmentContextDirective` | `[igxChatAttachmentContext]` | Provides type information for chat attachment template contexts | +| `IgxChatInputContextDirective` | `[igxChatInputContext]` | Provides type information for chat input template contexts | From 8ee9de26a3a67544a5b36207355ecc249f39a4ec Mon Sep 17 00:00:00 2001 From: Galina Edinakova Date: Tue, 9 Dec 2025 09:16:54 +0200 Subject: [PATCH 2/2] fix(*): Adding the markdown pipe to the Readme --- projects/igniteui-angular/chat/README.md | 38 ++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/projects/igniteui-angular/chat/README.md b/projects/igniteui-angular/chat/README.md index 356e9119179..3bc631722ed 100644 --- a/projects/igniteui-angular/chat/README.md +++ b/projects/igniteui-angular/chat/README.md @@ -53,3 +53,41 @@ The following directives are available for type checking in templates: | `IgxChatMessageContextDirective` | `[igxChatMessageContext]` | Provides type information for chat message template contexts | | `IgxChatAttachmentContextDirective` | `[igxChatAttachmentContext]` | Provides type information for chat attachment template contexts | | `IgxChatInputContextDirective` | `[igxChatInputContext]` | Provides type information for chat input template contexts | + +# Chat Extras + +The **chat-extras** module provides additional utilities for enhancing chat functionality. + +## MarkdownPipe + +The `MarkdownPipe` transforms markdown text into HTML, allowing you to render formatted messages in the chat. + +### Usage + +```typescript +import { MarkdownPipe } from 'igniteui-angular/chat-extras'; + +@Component({ + standalone: true, + imports: [IgxChatComponent, MarkdownPipe, AsyncPipe], + template: ` + + +
+ + + ` +}) +``` + +### Supported Markdown Features + +The pipe supports common markdown syntax including: +- **Bold** text (`**text**`) +- *Italic* text (`*text*`) +- Headings (`# H1`, `## H2`, etc.) +- Lists (ordered and unordered) +- Links (`[text](url)`) +- Code blocks and inline code +- Blockquotes +- And more...